feat: Update confirmation popup amount styling

bnb-chain · Jan 9, 2025 · 322b18c · 322b18c
1 parent a0bed35
commit 322b18c
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 22 deletions.
diff --git a/...ridge-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/FeeSummary.tsx b/...ridge-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/FeeSummary.tsx
@@ -19,6 +19,7 @@ export const FeeSummary = () => {
       h={['auto', 'auto', '60px']}
       borderRadius={'8px'}
       bg={theme.colors[colorMode].background.modal}
+      className="bccb-widget-transaction-summary-modal-fee-summary"
     >
       {isGlobalFeeLoading ? (
         <Flex flexDir={'column'} gap={'8px'}>

diff --git a/...bridge-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/TokenInfo.tsx b/...bridge-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/TokenInfo.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Skeleton, theme, useColorMode } from '@bnb-chain/space';
+import { Flex, Skeleton, useColorMode, useTheme } from '@bnb-chain/space';
 
 import { IconImage } from '@/core/components/IconImage';
 import { useAppSelector } from '@/modules/store/StoreProvider';
@@ -9,14 +9,15 @@ export const TokenInfo = ({
   chainName,
   amount,
   tokenSymbol,
+  isLongText,
 }: {
   chainIconUrl?: string;
   tokenIconUrl?: string;
   chainName?: string;
   amount?: string;
   tokenSymbol?: string;
+  isLongText: boolean;
 }) => {
-  const { colorMode } = useColorMode();
   const isGlobalFeeLoading = useAppSelector((state) => state.transfer.isGlobalFeeLoading);
 
   return (
@@ -26,6 +27,7 @@ export const TokenInfo = ({
       w={'100%'}
       alignItems={'center'}
       gap={'16px'}
+      className="bccb-widget-transaction-summary-modal-token-info"
     >
       <Flex flexShrink={1} flexDir={'row'} alignItems={'center'} gap={'14px'}>
         <Flex
@@ -43,32 +45,65 @@ export const TokenInfo = ({
             boxSize="16px"
             src={tokenIconUrl}
             flexShrink={0}
+            className="bccb-widget-transaction-summary-modal-token-icon"
+          />
+          <IconImage
+            boxSize="32px"
+            src={chainIconUrl}
+            flexShrink={0}
+            className="bccb-widget-transaction-summary-modal-chain-icon"
           />
-          <IconImage boxSize="32px" src={chainIconUrl} flexShrink={0} />
         </Flex>
-        <Box fontSize={'16px'} py={'8px'} fontWeight={700} maxW={'142px'} whiteSpace={'wrap'}>
-          {chainName}
-        </Box>
-      </Flex>
-      {isGlobalFeeLoading ? (
-        <Skeleton height="24px" maxW="120px" w={'100%'} borderRadius={'4px'} />
-      ) : (
         <Flex
-          flex={1}
-          wordBreak={'break-all'}
-          py={'8px'}
-          textAlign={'right'}
-          alignItems={'center'}
-          justifyContent={'flex-end'}
-          color={
-            Number(amount?.replace(' ', '')) < 0
-              ? theme.colors[colorMode].support.danger[3]
-              : theme.colors[colorMode].support.success[3]
-          }
+          flexDir={'column'}
+          justifyContent={isLongText ? 'flex-start' : 'center'}
+          whiteSpace={'wrap'}
+          className="bccb-widget-transaction-summary-modal-chain-name"
         >
-          {amount ?? '--'} {tokenSymbol}
+          <Flex fontSize={'16px'} fontWeight={700}>
+            {chainName}
+          </Flex>
+          {isLongText && !isGlobalFeeLoading && (
+            <TokenAmount amount={amount ?? '--'} tokenSymbol={tokenSymbol ?? ''} />
+          )}
         </Flex>
+      </Flex>
+      {!isLongText && !isGlobalFeeLoading && (
+        <TokenAmount amount={amount ?? '--'} tokenSymbol={tokenSymbol ?? ''} />
       )}
+      {isGlobalFeeLoading && (
+        <Skeleton
+          className="bccb-widget-transaction-summary-modal-loading-skeleton"
+          height="24px"
+          maxW="120px"
+          w={'100%'}
+          borderRadius={'4px'}
+        />
+      )}
+    </Flex>
+  );
+};
+
+const TokenAmount = ({ amount, tokenSymbol }: { amount: string; tokenSymbol: string }) => {
+  const { colorMode } = useColorMode();
+  const theme = useTheme();
+  return (
+    <Flex
+      flex={1}
+      wordBreak={'break-all'}
+      alignItems={'center'}
+      justifyContent={'flex-end'}
+      fontSize={'14px'}
+      lineHeight={'14px'}
+      fontWeight={700}
+      className="bccb-widget-transaction-summary-modal-token-amount"
+      color={
+        Number(amount?.replace(' ', '')) < 0
+          ? theme.colors[colorMode].support.danger[3]
+          : theme.colors[colorMode].support.success[3]
+      }
+    >
+      {amount} {tokenSymbol}
     </Flex>
   );
 };
diff --git a/...-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/TransferSummary.tsx b/...-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/TransferSummary.tsx
@@ -47,6 +47,26 @@ export const TransferSummary = () => {
     [toTokenAddress, toChain?.chainType],
   );
 
+  const isLongFromAmount = useMemo(() => {
+    if (isBase) return true;
+    try {
+      if (sendValue && selectedToken?.symbol) {
+        return sendValue.length + selectedToken.symbol.length - 1 > 16;
+      }
+    } catch {}
+    return false;
+  }, [sendValue, selectedToken?.symbol, isBase]);
+
+  const isLongToAmount = useMemo(() => {
+    if (isBase) return true;
+    try {
+      if (receiveAmt && toTokenInfo?.symbol) {
+        return String(receiveAmt).length + toTokenInfo?.symbol.length - 1 > 16;
+      }
+    } catch {}
+    return false;
+  }, [receiveAmt, toTokenInfo?.symbol, isBase]);
+
   return (
     <Flex
       flexDir={'column'}
@@ -55,13 +75,15 @@ export const TransferSummary = () => {
       gap={'4px'}
       borderRadius={'8px'}
       bg={theme.colors[colorMode].background.modal}
+      className="bccb-widget-transaction-summary-modal-summary-wrapper"
     >
       <TokenInfo
         chainIconUrl={fromChain?.icon}
         tokenIconUrl={selectedToken?.icon}
         chainName={fromChain?.name}
         amount={!!sendValue ? `- ${sendValue}` : ''}
         tokenSymbol={selectedToken?.symbol ?? ''}
+        isLongText={isLongFromAmount || isLongToAmount}
       />
       <TransferToIcon
         w={'24px'}
@@ -76,6 +98,7 @@ export const TransferSummary = () => {
         chainName={toChain?.name}
         amount={!!receiveAmt ? `+ ${receiveAmt}` : ''}
         tokenSymbol={toTokenInfo?.symbol ?? ''}
+        isLongText={isLongFromAmount || isLongToAmount}
       />
       <WarningMessage
         text={