[WALL] Wallets interactivity tap (binary-com#14435)

* chore: removed responsive root * chore: reverted old changes * chore: redirect users to deposit/reset balance on click card responsive * chore: fix sonarcloud
niloofar-deriv · Apr 3, 2024 · dfb27be · dfb27be
1 parent ccb4f94
commit dfb27be
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/packages/wallets/src/components/WalletCard/WalletCard.scss b/packages/wallets/src/components/WalletCard/WalletCard.scss
@@ -1,6 +1,9 @@
 @import '../../components/SkeletonLoader/SkeletonLoader.scss';
 
 .wallets-card {
+    border: none;
+    background: none;
+
     &__carousel-content {
         background-color: transparent;
         margin: 0 -0.4rem;

diff --git a/packages/wallets/src/components/WalletCard/WalletCard.tsx b/packages/wallets/src/components/WalletCard/WalletCard.tsx
@@ -14,6 +14,7 @@ type TProps = {
     isCarouselContent?: boolean;
     isDemo?: boolean;
     landingCompanyName?: string;
+    onClick?: () => void;
 };
 
 const WalletCard: React.FC<TProps> = ({
@@ -23,11 +24,15 @@ const WalletCard: React.FC<TProps> = ({
     isCarouselContent = false,
     isDemo,
     landingCompanyName,
+    onClick,
 }) => {
     const { isLoading } = useBalance();
 
     return (
-        <div className={classNames('wallets-card', { 'wallets-card__carousel-content': isCarouselContent })}>
+        <button
+            className={classNames('wallets-card', { 'wallets-card__carousel-content': isCarouselContent })}
+            onClick={onClick}
+        >
             <div className='wallets-card__container'>
                 <WalletGradientBackground
                     currency={isDemo ? 'Demo' : currency}
@@ -79,7 +84,7 @@ const WalletCard: React.FC<TProps> = ({
                     </div>
                 </WalletGradientBackground>
             </div>
-        </div>
+        </button>
     );
 };
 

diff --git a/packages/wallets/src/components/WalletsCarouselContent/WalletsCarouselContent.tsx b/packages/wallets/src/components/WalletsCarouselContent/WalletsCarouselContent.tsx
@@ -7,6 +7,7 @@ import { WalletsCarouselLoader } from '../SkeletonLoader';
 import { WalletCard } from '../WalletCard';
 import { WalletListCardActions } from '../WalletListCardActions';
 import './WalletsCarouselContent.scss';
+import { useHistory } from 'react-router-dom';
 
 type TProps = {
     onWalletSettled?: (value: boolean) => void;
@@ -25,6 +26,7 @@ const TRANSITION_FACTOR_SCALE = 1 - 25.6 / 28.8;
  */
 const WalletsCarouselContent: React.FC<TProps> = ({ onWalletSettled }) => {
     const switchWalletAccount = useWalletAccountSwitcher();
+    const history = useHistory();
 
     const { data: walletAccountsList, isLoading: isWalletAccountsListLoading } = useMobileCarouselWalletsList();
     const { data: activeWallet, isLoading: isActiveWalletLoading } = useActiveWalletAccount();
@@ -223,6 +225,11 @@ const WalletsCarouselContent: React.FC<TProps> = ({ onWalletSettled }) => {
                         isDemo={account.is_virtual}
                         key={`wallet-card-${account.loginid}`}
                         landingCompanyName={account.landing_company_name}
+                        onClick={() =>
+                            account.is_virtual
+                                ? history.push('/wallets/cashier/reset-balance')
+                                : history.push('/wallets/cashier/deposit')
+                        }
                     />
                 ))}
             </div>