render txo or keyimage table row with background highlight when it ma…

…tches search param (#30)
mobilecoinofficial · Jul 25, 2023 · af8e32d · af8e32d
1 parent 5f44d25
commit af8e32d
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 12 deletions.
diff --git a/src/api/loaders.ts b/src/api/loaders.ts
@@ -7,14 +7,15 @@ import getBurns from "api/getBurns";
 import getNetworkStatus from "api/getNetworkStatus";
 import searchBlock from "api/searchBlock";
 
-const getBlockInfo = async (blockIndex) => {
+const getBlockInfo = async (blockIndex, highlightItem?: string) => {
     const blockContents = await getBlock(blockIndex);
     const mintInfo = await getMintInfo(blockIndex);
     const burns = await getBurns(blockIndex);
     return {
         blockContents,
         mintInfo,
-        burns
+        burns,
+        highlightItem
     };
 };
 
@@ -47,8 +48,16 @@ export async function currentBlockLoader({ params }) {
 
 export async function byTxoCurrentBlockLoader({ params }) {
     const foundBlock = await searchBlock(params.pubKeyOrKeyImage.trim());
+    let highlightItem: string = null;
     if (foundBlock) {
-        return getBlockInfo(foundBlock.block.index);
+        highlightItem =
+            foundBlock.resultType == "TxOut"
+                ? foundBlock.blockContents.outputs[foundBlock.txOut.blockContentsTxOutIndex]
+                      .publicKey
+                : foundBlock.blockContents.keyImages[
+                      foundBlock.keyImage.blockContentsKeyImageIndex
+                  ];
+        return getBlockInfo(foundBlock.block.index, highlightItem);
     } else {
         throw new Error(params.pubKeyOrKeyImage);
     }

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -97,7 +97,7 @@ export default function Header({ networkStatus }: { networkStatus: NetworkStatus
         const foundBlock = await searchBlock(trimmedQuery);
         if (foundBlock) {
             setQuery("");
-            navigate(`/blocks/${foundBlock.block.index}`);
+            navigate(`/txos/${trimmedQuery}`);
             return;
         }
 

diff --git a/src/components/current-block/CurrentBlock.tsx b/src/components/current-block/CurrentBlock.tsx
@@ -35,7 +35,7 @@ export const StyledCell = styled(TableCell)(() => ({
     border: "none"
 }));
 
-export default function CurrentBlock({ blockContents, mintInfo, burns }: BlockInfo) {
+export default function CurrentBlock({ blockContents, mintInfo, burns, highlightItem }: BlockInfo) {
     const theme = useTheme();
     const matches = useMediaQuery(theme.breakpoints.down("sm"));
     const networkStatus = useNetworkStatus();
@@ -86,8 +86,12 @@ export default function CurrentBlock({ blockContents, mintInfo, burns }: BlockIn
             </Box>
             <Box sx={{ marginTop: 2 }}>
                 <Grid container spacing={2}>
-                    <Txos blockContents={blockContents} burns={burns} />
-                    <KeyImages blockContents={blockContents} />
+                    <Txos
+                        blockContents={blockContents}
+                        burns={burns}
+                        highlightItem={highlightItem}
+                    />
+                    <KeyImages blockContents={blockContents} highlightItem={highlightItem} />
                     <Mints mintInfo={mintInfo} />
                     <MintConfigTxs mintInfo={mintInfo} />
                     <Signatures blockContents={blockContents} />

diff --git a/src/components/current-block/KeyImages.tsx b/src/components/current-block/KeyImages.tsx
@@ -13,6 +13,7 @@ import { useTheme } from "@mui/material/styles";
 import { StyledCard, StyledCell } from "components/current-block/CurrentBlock";
 import { Block } from "api/types";
 import CopyableField from "components/CopyableField";
+import { highlightColor } from "theme";
 
 // handle full-service tech debt
 function removeProtoBuffFromKeyImage(keyImage: string) {
@@ -23,7 +24,13 @@ function removeProtoBuffFromKeyImage(keyImage: string) {
     return keyImage;
 }
 
-export default function KeyImages({ blockContents }: { blockContents: Block }) {
+export default function KeyImages({
+    blockContents,
+    highlightItem
+}: {
+    blockContents: Block;
+    highlightItem: string;
+}) {
     const theme = useTheme();
     const matches = useMediaQuery(theme.breakpoints.down("sm"));
 
@@ -42,7 +49,13 @@ export default function KeyImages({ blockContents }: { blockContents: Block }) {
                         <Table size="small" padding="none">
                             <TableBody>
                                 {blockContents.keyImages.map((k) => (
-                                    <TableRow key={k}>
+                                    <TableRow
+                                        key={k}
+                                        sx={{
+                                            bgcolor:
+                                                highlightItem === k ? highlightColor : "inherit"
+                                        }}
+                                    >
                                         <StyledCell>
                                             <CopyableField
                                                 text={removeProtoBuffFromKeyImage(k)}

diff --git a/src/components/current-block/Txos.tsx b/src/components/current-block/Txos.tsx
@@ -17,8 +17,17 @@ import { StyledCard, StyledCell } from "components/current-block/CurrentBlock";
 import CopyableField from "components/CopyableField";
 import { Block, BurnTx, TxOut } from "api/types";
 import { getTokenAmount, TOKENS } from "utils/tokens";
+import { highlightColor } from "theme";
 
-export default function Txos({ blockContents, burns }: { blockContents: Block; burns: BurnTx[] }) {
+export default function Txos({
+    blockContents,
+    burns,
+    highlightItem
+}: {
+    blockContents: Block;
+    burns: BurnTx[];
+    highlightItem: string;
+}) {
     const theme = useTheme();
     const matches = useMediaQuery(theme.breakpoints.down("md"));
     const [renderMemo, setRenderMemo] = useState(false);
@@ -36,6 +45,7 @@ export default function Txos({ blockContents, burns }: { blockContents: Block; b
 
     function RenderOutput({ txout }: { txout: TxOut }) {
         const matchingBurn = burns.find(({ burn }) => burn.publicKeyHex === txout.publicKey);
+        const rowBgColor = highlightItem === txout.publicKey ? highlightColor : "inherit";
 
         if (matchingBurn) {
             // remove null characters
@@ -44,7 +54,7 @@ export default function Txos({ blockContents, burns }: { blockContents: Block; b
                 ""
             );
             return (
-                <TableRow>
+                <TableRow sx={{ bgcolor: rowBgColor }}>
                     <StyledCell>
                         <CopyableField text={txout.publicKey} abbreviate={matches} />
                     </StyledCell>
@@ -68,7 +78,7 @@ export default function Txos({ blockContents, burns }: { blockContents: Block; b
         }
 
         return (
-            <TableRow>
+            <TableRow sx={{ bgcolor: rowBgColor }}>
                 <StyledCell>
                     <CopyableField text={txout.publicKey} abbreviate={matches} />
                 </StyledCell>

diff --git a/src/pages/CurrentBlock.tsx b/src/pages/CurrentBlock.tsx
@@ -7,6 +7,7 @@ export type BlockInfo = {
     blockContents: Block;
     mintInfo: MintInfoResponse;
     burns: BurnTx[];
+    highlightItem?: string;
 };
 
 export default function CurrentBlockPage() {

diff --git a/src/theme.ts b/src/theme.ts
@@ -1,5 +1,7 @@
 import { createTheme } from "@mui/material/styles";
 
+export const highlightColor = "LemonChiffon";
+
 const theme = createTheme({
     palette: {
         primary: {