Merge pull request #257 from bnb-chain/feat/sendConfirmPopup1230

chore: Update amount styling
bnb-chain · Jan 7, 2025 · cebedc8 · cebedc8
2 parents 44f9b27 + 17406a4
commit cebedc8
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/...anonical-bridge-widget/src/modules/aggregator/adapters/meson/hooks/useGetTronAllowance.ts b/...anonical-bridge-widget/src/modules/aggregator/adapters/meson/hooks/useGetTronAllowance.ts
@@ -52,7 +52,11 @@ export const useGetTronAllowance = () => {
     let mount = true;
     if (!mount) return;
     getAllowance();
+    const interval = setInterval(() => {
+      getAllowance();
+    }, 5000);
     return () => {
+      interval && clearInterval(interval);
       mount = false;
     };
   }, [getAllowance]);

diff --git a/...bridge-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/TokenInfo.tsx b/...bridge-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/TokenInfo.tsx
@@ -20,8 +20,14 @@ export const TokenInfo = ({
   const isGlobalFeeLoading = useAppSelector((state) => state.transfer.isGlobalFeeLoading);
 
   return (
-    <Flex flexDir={'row'} justifyContent={'space-between'} w={'100%'} alignItems={'center'}>
-      <Flex flexDir={'row'} alignItems={'center'} gap={'14px'}>
+    <Flex
+      flexDir={'row'}
+      justifyContent={'space-between'}
+      w={'100%'}
+      alignItems={'center'}
+      gap={'16px'}
+    >
+      <Flex flexShrink={1} flexDir={'row'} alignItems={'center'} gap={'14px'}>
         <Flex
           justifyContent={'center'}
           alignItems={'center'}
@@ -40,24 +46,28 @@ export const TokenInfo = ({
           />
           <IconImage boxSize="32px" src={chainIconUrl} flexShrink={0} />
         </Flex>
-        <Box fontSize={'16px'} py={'8px'} fontWeight={700}>
+        <Box fontSize={'16px'} py={'8px'} fontWeight={700} maxW={'103px'} whiteSpace={'wrap'}>
           {chainName}
         </Box>
       </Flex>
       {isGlobalFeeLoading ? (
         <Skeleton height="24px" maxW="120px" w={'100%'} borderRadius={'4px'} />
       ) : (
-        <Box
+        <Flex
+          flex={1}
           wordBreak={'break-all'}
           py={'8px'}
+          textAlign={'right'}
+          alignItems={'center'}
+          justifyContent={'flex-end'}
           color={
-            Number(amount) < 0
+            Number(amount?.replace(' ', '')) < 0
               ? theme.colors[colorMode].support.danger[3]
               : theme.colors[colorMode].support.success[3]
           }
         >
           {amount ?? '--'} {tokenSymbol}
-        </Box>
+        </Flex>
       )}
     </Flex>
   );

diff --git a/...-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/TransferSummary.tsx b/...-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/TransferSummary.tsx
@@ -52,7 +52,7 @@ export const TransferSummary = () => {
         chainIconUrl={fromChain?.icon}
         tokenIconUrl={selectedToken?.icon}
         chainName={fromChain?.name}
-        amount={!!sendValue ? `-${sendValue}` : ''}
+        amount={!!sendValue ? `- ${sendValue}` : ''}
         tokenSymbol={selectedToken?.symbol ?? ''}
       />
       <TransferToIcon
@@ -66,7 +66,7 @@ export const TransferSummary = () => {
         chainIconUrl={toChain?.icon}
         tokenIconUrl={toTokenInfo?.icon}
         chainName={toChain?.name}
-        amount={!!receiveAmt ? `+${receiveAmt}` : ''}
+        amount={!!receiveAmt ? `+ ${receiveAmt}` : ''}
         tokenSymbol={toTokenInfo?.symbol ?? ''}
       />
       <WarningMessage