refactor: update TokenDetailBox.tsx

PolkaGate · Feb 16, 2025 · 93d2f3b · 93d2f3b
1 parent d837163
commit 93d2f3b
Showing 1 changed file with 21 additions and 19 deletions.
diff --git a/packages/extension-polkagate/src/popup/tokens/partial/TokenDetailBox.tsx b/packages/extension-polkagate/src/popup/tokens/partial/TokenDetailBox.tsx
@@ -19,7 +19,7 @@ import { ColumnAmounts } from '..';
 interface TokenDetailBoxProp {
   Icon: Icon;
   title: string;
-  description?: string;
+  description?: React.ReactNode;
   amount: BN | undefined;
   decimal: number | undefined;
   token: string | undefined;
@@ -52,29 +52,31 @@ function TokenDetailBox ({ Icon, amount, decimal, description, onClick, priceId,
   const totalBalance = useMemo(() => calcPrice(priceOf(priceId ?? '0'), amount ?? BN_ZERO, decimal ?? 0), [amount, decimal, priceId, priceOf]);
 
   return (
-    <TokenDetailBoxContainer clickable={!!onClick} onClick={onClick}>
-      <Grid container direction='column' gap='8px' item>
-        <Icon color='#AA83DC' size='21' variant='Bulk' />
-        <Grid alignItems='center' container item sx={{ columnGap: '6px' }}>
-          <Typography color='text.secondary' variant='B-1'>
-            {title}
-          </Typography>
-          {description && <InfoCircle color='#AA83DC' ref={toolTipRef} size='19' variant='Bold' />}
+    <>
+      <TokenDetailBoxContainer clickable={!!onClick} onClick={onClick}>
+        <Grid container direction='column' gap='8px' item>
+          <Icon color='#AA83DC' size='21' variant='Bulk' />
+          <Grid alignItems='center' container item sx={{ columnGap: '6px' }}>
+            <Typography color='text.secondary' variant='B-1'>
+              {title}
+            </Typography>
+            {description && <InfoCircle color='#AA83DC' ref={toolTipRef} size='19' variant='Bold' />}
+          </Grid>
         </Grid>
-      </Grid>
-      <ColumnAmounts
-        cryptoAmount={amount ?? BN_ZERO}
-        decimal={decimal ?? 0}
-        fiatAmount={totalBalance}
-        token={token ?? ''}
-      />
+        <ColumnAmounts
+          cryptoAmount={amount ?? BN_ZERO}
+          decimal={decimal ?? 0}
+          fiatAmount={totalBalance}
+          token={token ?? ''}
+        />
+      </TokenDetailBoxContainer>
       <Tooltip
         content={description}
         placement='top'
-        positionAdjustment={{ left: 0, top: 40 }}
-        targetRef={toolTipRef}
+        positionAdjustment={{ top: -10 }}
+        targetRef={description ? toolTipRef : null}
       />
-    </TokenDetailBoxContainer>
+    </>
   );
 }