From 322b18cd15ef67c29a3af435899cd2afbd3e0158 Mon Sep 17 00:00:00 2001
From: chris <leosameric@gmail.com>
Date: Thu, 9 Jan 2025 11:22:08 +1000
Subject: [PATCH] feat: Update confirmation popup amount styling

---
 .../TransactionSummaryModal/FeeSummary.tsx    |  1 +
 .../TransactionSummaryModal/TokenInfo.tsx     | 79 +++++++++++++------
 .../TransferSummary.tsx                       | 23 ++++++
 3 files changed, 81 insertions(+), 22 deletions(-)

diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/FeeSummary.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/FeeSummary.tsx
index 9c56e862..af65f2ce 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/FeeSummary.tsx
+++ b/packages/canonical-bridge-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/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/TokenInfo.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/TokenInfo.tsx
index 4a6798e6..1663f152 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/TokenInfo.tsx
+++ b/packages/canonical-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/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/TransferSummary.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/TransferSummary.tsx
index 66b4d9b0..88de0e1c 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Modal/TransactionSummaryModal/TransferSummary.tsx
+++ b/packages/canonical-bridge-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,6 +75,7 @@ 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}
@@ -62,6 +83,7 @@ export const TransferSummary = () => {
         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={