[WALL] Aizad/WALL-3967/ Fix "USD" is missing from swap free account c…

…reation success card (#15012) * chore: created display balance and put it inside of usememo * chore: added loading animation to display balance * chore: added skeleton loader css inside of stylesheet of the component
deriv-com · May 10, 2024 · 8a7fde9 · 8a7fde9
1 parent e17bcd2
commit 8a7fde9
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 23 deletions.
diff --git a/packages/wallets/src/features/cfd/modals/MT5AccountAdded/MT5AccountAdded.tsx b/packages/wallets/src/features/cfd/modals/MT5AccountAdded/MT5AccountAdded.tsx
@@ -39,6 +39,11 @@ const MT5AccountAdded: FC<TProps> = ({ account, marketType, platform }) => {
 
     const isDemo = activeWallet?.is_virtual;
 
+    const displayBalance = useMemo(() => {
+        const account = mt5Accounts?.find(account => account.market_type === marketType);
+        return account?.display_balance;
+    }, [mt5Accounts, marketType]);
+
     const renderAccountSuccessButton = useCallback(
         (isTransferAllowed = false) => {
             if (isTransferAllowed) {
@@ -70,14 +75,20 @@ const MT5AccountAdded: FC<TProps> = ({ account, marketType, platform }) => {
         [hide, history, addedAccount?.loginid, isMobile]
     );
 
-    const renderMainContent = useMemo(() => {
-        const renderSuccessDescription = () => {
-            if (isDemo) {
-                return `Let's practise trading with ${activeWallet?.display_balance} virtual funds.`;
-            }
-            return `Transfer funds from your ${activeWallet?.wallet_currency_type} Wallet to your ${marketTypeTitle} ${landingCompanyName} account to start trading.`;
-        };
+    const renderSuccessDescription = useMemo(() => {
+        if (isDemo) {
+            return `Let's practise trading with ${activeWallet?.display_balance} virtual funds.`;
+        }
+        return `Transfer funds from your ${activeWallet?.wallet_currency_type} Wallet to your ${marketTypeTitle} ${landingCompanyName} account to start trading.`;
+    }, [
+        activeWallet?.display_balance,
+        activeWallet?.wallet_currency_type,
+        isDemo,
+        landingCompanyName,
+        marketTypeTitle,
+    ]);
 
+    const renderMainContent = useMemo(() => {
         if (!isSuccess) return null;
 
         if (!verificationStatus.is_not_applicable && !isPOIVerified && !isPOAVerified) {
@@ -87,9 +98,7 @@ const MT5AccountAdded: FC<TProps> = ({ account, marketType, platform }) => {
                         description={`We need a few minutes to review your documents before you can start trading with your ${marketTypeTitle} ${
                             isDemo ? ' demo' : landingCompanyName
                         } account. You’ll get an in-app notification as soon as this is done.`}
-                        displayBalance={
-                            mt5Accounts?.find(account => account.market_type === marketType)?.display_balance ?? '0.00'
-                        }
+                        displayBalance={displayBalance}
                         landingCompany={selectedJurisdiction}
                         marketType={marketType}
                         platform={platform}
@@ -105,9 +114,7 @@ const MT5AccountAdded: FC<TProps> = ({ account, marketType, platform }) => {
                         description={`We need 1-3 days to review your documents before you can start trading with your ${marketTypeTitle} ${
                             isDemo ? ' demo' : landingCompanyName
                         } account. You’ll get an email as soon as this is done.`}
-                        displayBalance={
-                            mt5Accounts?.find(account => account.market_type === marketType)?.display_balance ?? '0.00'
-                        }
+                        displayBalance={displayBalance}
                         landingCompany={selectedJurisdiction}
                         marketType={marketType}
                         platform={platform}
@@ -120,10 +127,8 @@ const MT5AccountAdded: FC<TProps> = ({ account, marketType, platform }) => {
 
         return (
             <CFDSuccess
-                description={renderSuccessDescription()}
-                displayBalance={
-                    mt5Accounts?.find(account => account.market_type === marketType)?.display_balance ?? '0.00'
-                }
+                description={renderSuccessDescription}
+                displayBalance={displayBalance}
                 landingCompany={selectedJurisdiction}
                 marketType={marketType}
                 platform={platform}
@@ -132,19 +137,18 @@ const MT5AccountAdded: FC<TProps> = ({ account, marketType, platform }) => {
             />
         );
     }, [
-        activeWallet?.display_balance,
-        activeWallet?.wallet_currency_type,
+        displayBalance,
         isDemo,
         isPOAVerified,
         isPOIVerified,
         isSuccess,
         landingCompanyName,
         marketType,
         marketTypeTitle,
-        mt5Accounts,
         platform,
         poiService,
         renderAccountSuccessButton,
+        renderSuccessDescription,
         selectedJurisdiction,
         verificationStatus.is_not_applicable,
     ]);

diff --git a/packages/wallets/src/features/cfd/screens/CFDSuccess/CFDSuccess.scss b/packages/wallets/src/features/cfd/screens/CFDSuccess/CFDSuccess.scss
@@ -1,3 +1,5 @@
+@import '../../../../components/SkeletonLoader/SkeletonLoader.scss';
+
 .wallets-cfd-success {
     display: flex;
     flex-direction: column;
@@ -40,4 +42,9 @@
     &__gradient {
         border-radius: 1rem;
     }
+
+    &__balance-loader {
+        padding: 0.7rem;
+        width: 8rem;
+    }
 }
diff --git a/packages/wallets/src/features/cfd/screens/CFDSuccess/CFDSuccess.tsx b/packages/wallets/src/features/cfd/screens/CFDSuccess/CFDSuccess.tsx
@@ -90,9 +90,13 @@ const CFDSuccess: React.FC<TSuccessProps> = ({
                                 <WalletText color='primary' size='2xs'>
                                     {data?.currency} Wallet
                                 </WalletText>
-                                <WalletText size='sm' weight='bold'>
-                                    {displayBalance}
-                                </WalletText>
+                                {!displayBalance ? (
+                                    <div className='wallets-skeleton wallets-cfd-success__balance-loader' />
+                                ) : (
+                                    <WalletText size='sm' weight='bold'>
+                                        {displayBalance}
+                                    </WalletText>
+                                )}
                             </div>
                         </div>
                     </div>