Aizad/WALL-4039/Resize Logo in Transfer Summary Details on Transactio…

…n Screen (deriv-com#15070) * chore: replace WalletsAppLinkedWithWalletIcon with WaleltMarketCurrencyIcon * chore: Fix type error * chore: change true to isDemo * chore: change default from All to null * chore: fix typescript errors * chore: fix typescript errros pt.2 * chore: improve logic within WalletMarketCurrenyIcon * chore: standardize logic across features * chore: change z-index for market icon * chore: update border radius according to design * chore: update all of the icons for transaction rows to have border-radius 4px
heorhi-deriv · May 21, 2024 · 29d8f63 · 29d8f63
1 parent 0ee6ce6
commit 29d8f63
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 36 deletions.
diff --git a/packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.scss b/packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.scss
@@ -1,6 +1,7 @@
 .wallets-gradient {
     position: relative;
     display: inline-block;
+    border-radius: 0.8rem;
 
     &__content {
         position: relative;
@@ -28,11 +29,6 @@
         }
     }
 
-    &[class*='desktop-card'],
-    &[class*='mobile-card'] {
-        border-radius: 0.8rem;
-    }
-
     &--USD {
         &-desktop {
             &-card {

diff --git a/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.scss b/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.scss
@@ -1,6 +1,4 @@
 .wallets-market-currency-icon {
-    width: 10rem;
-    height: 7rem;
     display: inline-block;
     position: relative;
 
@@ -10,16 +8,15 @@
         justify-content: flex-start;
         width: 100%;
         height: 100%;
-        padding: 0.5rem;
     }
 
     &__market-icon {
-        z-index: 2;
+        z-index: 1;
         position: relative;
     }
 
     &__currency-icon {
-        z-index: 1;
         transform: translate(-0.8rem, 1.2rem);
+        border-radius: 0.4rem;
     }
 }
diff --git a/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx b/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx
@@ -1,5 +1,5 @@
-import React, { FC } from 'react';
-import { MARKET_TYPE } from '../../features/cfd/constants';
+import React, { ComponentProps, FC } from 'react';
+import { CFD_PLATFORMS, MARKET_TYPE } from '../../features/cfd/constants';
 import { THooks, TPlatforms } from '../../types';
 import { WalletCurrencyCard } from '../WalletCurrencyCard';
 import { WalletMarketIcon } from '../WalletMarketIcon';
@@ -24,17 +24,19 @@ type TWalletMarketCurrencyIconProps = {
 };
 
 const WalletMarketCurrencyIcon: FC<TWalletMarketCurrencyIconProps> = ({ currency, isDemo, marketType, platform }) => {
-    const MarketTypeIcon =
-        marketType && platform && marketType === MARKET_TYPE.ALL && platform in cfdPlatformIcon
-            ? cfdPlatformIcon[platform as keyof typeof cfdPlatformIcon]
-            : mt5MarketTypeIcon[marketType as keyof typeof mt5MarketTypeIcon];
+    let MarketTypeIcon: ComponentProps<typeof WalletMarketIcon>['icon'];
+    if (marketType === MARKET_TYPE.ALL && platform && platform in cfdPlatformIcon) {
+        MarketTypeIcon = cfdPlatformIcon[platform as keyof typeof cfdPlatformIcon];
+    } else if (platform === CFD_PLATFORMS.MT5 && marketType && marketType in mt5MarketTypeIcon) {
+        MarketTypeIcon = mt5MarketTypeIcon[marketType as keyof typeof mt5MarketTypeIcon];
+    } else MarketTypeIcon = 'IcWalletOptionsLight';
 
     return (
         <div className='wallets-market-currency-icon'>
             <div className='wallets-market-currency-icon__container'>
                 <WalletMarketIcon
                     className='wallets-market-currency-icon__market-icon'
-                    icon={MarketTypeIcon ?? 'IcWalletOptionsLight'}
+                    icon={MarketTypeIcon}
                     size='sm'
                 />
                 <WalletCurrencyCard

diff --git a/packages/wallets/src/components/index.ts b/packages/wallets/src/components/index.ts
@@ -28,6 +28,7 @@ export * from './WalletListCardBalance';
 export * from './WalletListCardDetails';
 export * from './WalletListCardDropdown';
 export * from './WalletListHeader';
+export * from './WalletMarketCurrencyIcon';
 export * from './WalletMarketIcon';
 export * from './WalletNoWalletFoundState';
 export * from './WalletsActionScreen';

diff --git a/packages/wallets/src/features/cashier/helpers/helpers.ts b/packages/wallets/src/features/cashier/helpers/helpers.ts
@@ -14,7 +14,7 @@ export const getMarketType = (mt5Group?: string) => {
     if (mt5Group?.includes(MT5MarketTypeDetails.financial.name)) return MT5MarketTypeDetails.financial.name;
     if (mt5Group?.includes(MT5MarketTypeDetails.synthetic.name)) return MT5MarketTypeDetails.synthetic.name;
     if (mt5Group?.includes(MT5MarketTypeDetails.all.name)) return MT5MarketTypeDetails.all.name;
-    return MT5MarketTypeDetails.all.name;
+    return undefined;
 };
 
 //TODO: remove this function when landing_company_name will be added to transfer_between_accounts response in API for mt5 accounts

diff --git a/...onents/TransactionsCompletedRowAccountDetails/TransactionsCompletedRowAccountDetails.scss b/...onents/TransactionsCompletedRowAccountDetails/TransactionsCompletedRowAccountDetails.scss
@@ -3,6 +3,10 @@
     width: max-content;
     gap: 0.8rem;
 
+    &__currency-card {
+        border-radius: 0.4rem;
+    }
+
     &__type-and-wallet-name {
         display: flex;
         flex-direction: column;

diff --git a/...ponents/TransactionsCompletedRowAccountDetails/TransactionsCompletedRowAccountDetails.tsx b/...ponents/TransactionsCompletedRowAccountDetails/TransactionsCompletedRowAccountDetails.tsx
@@ -2,11 +2,12 @@ import React from 'react';
 import {
     WalletCurrencyCard,
     WalletListCardBadge,
-    WalletsAppLinkedWithWalletIcon,
+    WalletMarketCurrencyIcon,
     WalletText,
 } from '../../../../../../../../components';
-import { THooks, TWalletLandingCompanyName } from '../../../../../../../../types';
-import { getTradingAppIcon } from '../../../../../../helpers';
+import { THooks, TPlatforms, TWalletLandingCompanyName } from '../../../../../../../../types';
+import { MARKET_TYPE } from '../../../../../../../cfd/constants';
+import { getMarketType } from '../../../../../../helpers';
 import './TransactionsCompletedRowAccountDetails.scss';
 
 type TProps = {
@@ -34,15 +35,23 @@ const TransactionsCompletedRowAccountDetails: React.FC<TProps> = ({
     mt5Group,
     mt5LandingCompanyName,
 }) => {
+    const marketType = getMarketType(mt5Group);
+
     return (
         <div className='wallets-transactions-completed-row-account-details'>
             {actionType !== 'transfer' || isInterWallet ? (
-                <WalletCurrencyCard currency={currency} isDemo={isDemo} size='md' />
+                <WalletCurrencyCard
+                    className='wallets-transactions-completed-row-account-details__currency-card'
+                    currency={currency}
+                    isDemo={isDemo}
+                    size='md'
+                />
             ) : (
-                <WalletsAppLinkedWithWalletIcon
-                    appIcon={getTradingAppIcon(accountType, landingCompanyName ?? 'svg', mt5Group)}
+                <WalletMarketCurrencyIcon
                     currency={currency}
                     isDemo={isDemo}
+                    marketType={marketType ?? MARKET_TYPE.ALL}
+                    platform={accountType as TPlatforms.All}
                 />
             )}
             <div className='wallets-transactions-completed-row-account-details__type-and-wallet-name'>

diff --git a/packages/wallets/src/features/cashier/modules/Transfer/hooks/useSortedTransferAccounts.ts b/packages/wallets/src/features/cashier/modules/Transfer/hooks/useSortedTransferAccounts.ts
@@ -71,8 +71,14 @@ const sortTradingAccounts = (a: TAccount, b: TAccount) => {
         const marketTypeA = getMarketType(a.mt5_group);
         const marketTypeB = getMarketType(b.mt5_group);
 
-        if (marketTypeOrder[marketTypeA] !== marketTypeOrder[marketTypeB]) {
-            return marketTypeOrder[marketTypeA] - marketTypeOrder[marketTypeB];
+        if (
+            marketTypeOrder[marketTypeA ?? MT5MarketTypeDetails.all.name] !==
+            marketTypeOrder[marketTypeB ?? MT5MarketTypeDetails.all.name]
+        ) {
+            return (
+                marketTypeOrder[marketTypeA ?? MT5MarketTypeDetails.all.name] -
+                marketTypeOrder[(marketTypeB ?? MT5MarketTypeDetails.all.name) as keyof typeof marketTypeOrder]
+            );
         }
 
         // For 'synthetic' and 'financial' market types, compare landing company name

diff --git a/packages/wallets/src/features/cfd/screens/CFDSuccess/CFDSuccess.scss b/packages/wallets/src/features/cfd/screens/CFDSuccess/CFDSuccess.scss
@@ -43,6 +43,13 @@
         border-radius: 1rem;
     }
 
+    &__market-icon {
+        display: flex;
+        padding: 0.5rem;
+        width: 10rem;
+        height: 7rem;
+    }
+
     &__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
@@ -1,12 +1,11 @@
 import React, { ComponentProps } from 'react';
 import classNames from 'classnames';
 import { useActiveWalletAccount } from '@deriv/api-v2';
-import { WalletSuccess, WalletText } from '../../../../components';
+import { WalletMarketCurrencyIcon, WalletSuccess, WalletText } from '../../../../components';
 import { WalletGradientBackground } from '../../../../components/WalletGradientBackground';
-import { WalletMarketCurrencyIcon } from '../../../../components/WalletMarketCurrencyIcon';
 import useDevice from '../../../../hooks/useDevice';
 import { TDisplayBalance, THooks, TMarketTypes, TPlatforms } from '../../../../types';
-import { CFD_PLATFORMS, MarketTypeDetails, PlatformDetails } from '../../constants';
+import { CFD_PLATFORMS, MARKET_TYPE, MarketTypeDetails, PlatformDetails } from '../../constants';
 import './CFDSuccess.scss';
 
 type TSuccessProps = {
@@ -37,7 +36,7 @@ const CFDSuccess: React.FC<TSuccessProps> = ({
     const landingCompanyName = landingCompany.toUpperCase();
 
     const isDxtradeOrCtrader =
-        marketType === 'all' &&
+        marketType === MARKET_TYPE.ALL &&
         (platform === PlatformDetails.dxtrade.platform || platform === PlatformDetails.ctrader.platform);
 
     let marketTypeTitle = 'Options';
@@ -76,12 +75,14 @@ const CFDSuccess: React.FC<TSuccessProps> = ({
                                     {isDemo ? 'Demo' : 'Real'}
                                 </WalletText>
                             </div>
-                            <WalletMarketCurrencyIcon
-                                currency={data?.currency ?? 'USD'}
-                                isDemo={isDemo ?? false}
-                                marketType={marketType}
-                                platform={platform}
-                            />
+                            <div className='wallets-cfd-success__market-icon'>
+                                <WalletMarketCurrencyIcon
+                                    currency={data?.currency ?? 'USD'}
+                                    isDemo={isDemo ?? false}
+                                    marketType={marketType}
+                                    platform={platform}
+                                />
+                            </div>
                             <div className='wallets-cfd-success__info'>
                                 <WalletText size='2xs'>
                                     {platformTitlePrefix} {marketTypeTitle}{' '}