Merge branch 'fix/amount' into tmp/20240725

RabbyHub · Jul 26, 2024 · 194b1df · 194b1df
2 parents 083bcfe + 07c04c3
commit 194b1df
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/src/ui/views/Approval/components/Actions/components/TokenAmountItem.tsx b/src/ui/views/Approval/components/Actions/components/TokenAmountItem.tsx
@@ -22,22 +22,23 @@ export const TokenAmountItem: React.FC<Props> = ({
   onEdit,
   balance,
 }) => {
-  const isExceed = isNil(balance) ? false : new BigNumber(amount).gt(balance);
+  const hideTooltip = isNil(balance);
+  const isExceed = hideTooltip ? false : new BigNumber(amount).gt(balance);
   const { t } = useTranslation();
 
   return (
     <TooltipWithMagnetArrow
       inApproval
       overlayClassName="rectangle w-[max-content]"
       title={
-        isNil(balance) ? (
+        hideTooltip ? (
           false
         ) : (
           <div>
-            <div className="gap-x-4 flex whitespace-nowrap">
-              <div>{t('page.signTx.tokenApprove.amount')}</div>
-              {/* <Values.TokenAmount value={amount} /> */}
-              <span>{amount}</span>
+            <div className="break-all">
+              {`${t('page.signTx.tokenApprove.amount')} ${new BigNumber(
+                amount
+              ).toFixed()}`}
             </div>
             {isExceed && (
               <div className="flex items-center gap-x-4">
@@ -70,7 +71,7 @@ export const TokenAmountItem: React.FC<Props> = ({
                   isExceed && 'text-red-light'
                 )}
               >
-                <Values.TokenAmount value={amount} />
+                <Values.TokenAmount hasTitle={hideTooltip} value={amount} />
               </div>
               {onEdit ? (
                 <span className="text-blue-light text-14 font-medium ml-4 hover:underline">

diff --git a/src/ui/views/Approval/components/Actions/components/Values.tsx b/src/ui/views/Approval/components/Actions/components/Values.tsx
@@ -36,9 +36,15 @@ const TokenAmountWrapper = styled.div`
   white-space: nowrap;
   overflow: hidden;
 `;
-const TokenAmount = ({ value }: { value: string | number }) => {
+const TokenAmount = ({
+  value,
+  hasTitle = true,
+}: {
+  value: string | number;
+  hasTitle?: boolean;
+}) => {
   return (
-    <TokenAmountWrapper title={String(value)}>
+    <TokenAmountWrapper title={hasTitle ? String(value) : ''}>
       {formatAmount(value)}
     </TokenAmountWrapper>
   );

diff --git a/src/ui/views/Approval/components/TypedDataActions/BatchPermit2.tsx b/src/ui/views/Approval/components/TypedDataActions/BatchPermit2.tsx
@@ -81,6 +81,7 @@ const Permit2 = ({
                 <TokenAmountItem
                   amount={token.amount}
                   logoUrl={token.logo_url}
+                  balance={tokenBalanceMap[token.id]}
                 />
               </Row>
             </Col>