[42069] Aizad: Creating Base Button for Wallets

packages/wallets/package.json

@@ -36,6 +36,7 @@
         "eslint-plugin-sort-destructure-keys": "^1.5.0",
         "eslint-plugin-typescript-sort-keys": "^2.3.0",
         "typescript": "^4.6.3",
+        "@types/css-modules": "^1.0.2",
         "webpack": "^5.81.0",
         "webpack-cli": "^4.7.2",
         "webpack-bundle-analyzer": "^4.3.0"

packages/wallets/src/components/Base/WalletButton/WalletButton.module.css

@@ -0,0 +1,86 @@
+.wallets-button {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    /* TODO: Remove this once merged with <Text /> */
+    line-height: 20px;
+    text-align: center;
+    font-style: normal;
+    font-weight: 700;
+    &:disabled {
+        opacity: 0.32;
+        cursor: not-allowed;
+    }
+    &-size-sm {
+        padding: 3px 8px;
+        font-size: 12px;
+        line-height: 18px;
+    }
+    &-size-md {
+        height: 32px;
+        padding: 6px 16px;
+        flex-shrink: 0;
+        font-size: 14px;
+    }
+    &-size-lg {
+        height: 40px;
+        padding: 10px 16px;
+        flex-shrink: 0;
+        font-size: 14px;
+    }
+    &-variant-contained {
+        border: none;
+    }
+    &-variant-outlined {
+        color: var(--system-light-1-prominent-text, #333);
+        border: 1px solid var(--system-light-3-less-prominent-text, #999);
+        background: none;
+        &:hover {
+            background: rgba(0, 0, 0, 0.08);
+        }
+    }
+    &-variant-text {
+        color: var(--button-primary-default, #ff444f);
+        background: none;
+        border: none;
+        &:hover {
+            background: rgba(255, 68, 79, 0.08);
+        }
+    }
+    &-rounded-default {
+        border-radius: 4px;
+    }
+    &-rounded-full {
+        border-radius: 64px;
+    }
+    &-color-primary {
+        color: var(--system-dark-1-prominent-text, #fff);
+        background: var(--brand-coral, #ff444f);
+        &:hover {
+            background: var(--button-primary-hover-light, #eb3e48);
+        }
+    }
+    &-color-primary-light {
+        color: var(--brand-coral, #ff444f);
+        background: var(--button-primary-light-default, rgba(255, 68, 79, 0.16));
+        &:hover {
+            background: var(--button-primary-light-hover, rgba(255, 68, 79, 0.24));
+        }
+    }
+    &-color-white {
+        color: var(--system-light-1-prominent-text, #333);
+        background: var(--system-light-8-primary-background, #fff);
+        &:hover {
+            background: var(--system-light-5-active-background, #d6dadb);
+        }
+    }
+    &-color-black {
+        color: var(--system-dark-1-prominent-text, #fff);
+        background: var(--system-dark-8-primary-background, #0e0e0e);
+        &:hover {
+            background: var(--system-dark-5-active-background, #323738);
+        }
+    }
+}

packages/wallets/src/components/Base/WalletButton/WalletButton.tsx

@@ -0,0 +1,39 @@
+import React, { ComponentProps, CSSProperties } from 'react';
+import classNames from 'classnames';
+import styles from './WalletButton.module.css';
+
+interface WalletButtonProps extends ComponentProps<'button'> {
+    children: React.ReactNode;
+    // eslint-disable-next-line @typescript-eslint/sort-type-constituents
+    color?: CSSProperties['color'] | 'primary' | 'primary-light';
+    isRounded?: boolean;
+    // eslint-disable-next-line @typescript-eslint/sort-type-constituents
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'contained' | 'outlined' | 'text';
+}
+
+const WalletButton: React.FC<WalletButtonProps> = ({
+    children,
+    color = 'primary',
+    isRounded = false,
+    size = 'md',
+    variant = 'contained',
+    ...rest
+}) => {
+    const isContained = variant === 'contained';
+    const buttonClassNames = classNames(
+        styles[`wallets-button`],
+        (isContained && styles[`wallets-button-color-${color}`]) || '',
+        styles[`wallets-button-size-${size}`],
+        styles[`wallets-button-variant-${variant}`],
+        isRounded ? styles[`wallets-button-rounded-full`] : styles[`wallets-button-rounded-default`]
+    );
+
+    return (
+        <button className={buttonClassNames} {...rest}>
+            {children}
+        </button>
+    );
+};
+
+export default WalletButton;

packages/wallets/src/components/Base/WalletButton/index.ts

@@ -0,0 +1 @@
+export { default as WalletButton } from './WalletButton';

packages/wallets/src/components/Base/index.ts

@@ -1 +1,2 @@
 export * from './InlineMessage';
+export * from './WalletButton';

packages/wallets/src/components/ExternalTradingPlatforms/AddedDxtradeAccountsList/AddedDxtradeAccountsList.scss

@@ -1,38 +1,4 @@
 .wallets-available-derivx {
-    &__transfer_button {
-        display: flex;
-        height: 32px;
-        padding: 6px 16px;
-        justify-content: center;
-        align-items: center;
-        border-radius: 4px;
-        border: 1px solid var(--system-light-3-less-prominent-text, #999);
-        cursor: pointer;
-        background: #fff;
-    }
-
-    &__transfer_text {
-        color: var(--system-light-1-prominent-text, #333);
-        text-align: center;
-
-        /* desktop/paragraph/P2 - bold */
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 20px; /* 142.857% */
-    }
-
-    &__open_text {
-        color: var(--system-dark-1-prominent-text, #fff);
-        text-align: center;
-
-        /* desktop/paragraph/P2 - bold */
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 20px; /* 142.857% */
-    }
-
     &__actions {
         display: flex;
         flex-direction: column;

packages/wallets/src/components/ExternalTradingPlatforms/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDxtradeAccountsList } from '@deriv/api';
 import DerivX from '../../../public/images/derivx.svg';
-import { PrimaryActionButton } from '../../PrimaryActionButton';
+import { WalletButton } from '../../Base';
 import { TradingAccountCard } from '../../TradingAccountCard';
 import './AddedDxtradeAccountsList.scss';
 
@@ -17,12 +17,8 @@ const AddedDxtradeAccountsList: React.FC = () => {
             )}
             trailing={() => (
                 <div className='wallets-available-derivx__actions'>
-                    <PrimaryActionButton className='wallets-available-derivx__transfer_button'>
-                        <p className='wallets-available-derivx__transfer_text'>Transfer</p>
-                    </PrimaryActionButton>
-                    <PrimaryActionButton>
-                        <p className='wallets-available-derivx__open_text'>Open</p>
-                    </PrimaryActionButton>
+                    <WalletButton variant='outlined'>Transfer</WalletButton>
+                    <WalletButton>Open</WalletButton>
                 </div>
             )}
         >

packages/wallets/src/components/ExternalTradingPlatforms/AddedMT5AccountsList/AddedMT5AccountsList.scss

@@ -1,38 +1,4 @@
 .wallets-added-mt5 {
-    &__transfer_button {
-        display: flex;
-        height: 32px;
-        padding: 6px 16px;
-        justify-content: center;
-        align-items: center;
-        border-radius: 4px;
-        border: 1px solid var(--system-light-3-less-prominent-text, #999);
-        cursor: pointer;
-        background: #fff;
-    }
-
-    &__transfer_text {
-        color: var(--system-light-1-prominent-text, #333);
-        text-align: center;
-
-        /* desktop/paragraph/P2 - bold */
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 20px; /* 142.857% */
-    }
-
-    &__open_text {
-        color: var(--system-dark-1-prominent-text, #fff);
-        text-align: center;
-
-        /* desktop/paragraph/P2 - bold */
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 20px; /* 142.857% */
-    }
-
     &__actions {
         display: flex;
         flex-direction: column;

packages/wallets/src/components/ExternalTradingPlatforms/AddedMT5AccountsList/AddedMT5AccountsList.tsx

@@ -3,7 +3,7 @@ import { useMT5AccountsList } from '@deriv/api';
 import DerivedMT5 from '../../../public/images/mt5-derived.svg';
 import FinancialMT5 from '../../../public/images/mt5-financial.svg';
 import SwapFreeMT5 from '../../../public/images/mt5-swap-free.svg';
-import { PrimaryActionButton } from '../../PrimaryActionButton';
+import { WalletButton } from '../../Base';
 import { TradingAccountCard } from '../../TradingAccountCard';
 import './AddedMT5AccountsList.scss';
 
@@ -31,12 +31,8 @@ const AddedMT5AccountsList: React.FC<TProps> = ({ account }) => {
             )}
             trailing={() => (
                 <div className='wallets-added-mt5__actions'>
-                    <PrimaryActionButton className='wallets-added-mt5__transfer_button'>
-                        <p className='wallets-added-mt5__transfer_text'>Transfer</p>
-                    </PrimaryActionButton>
-                    <PrimaryActionButton>
-                        <p className='wallets-added-mt5__open_text'>Open</p>
-                    </PrimaryActionButton>
+                    <WalletButton variant='outlined'>Transfer</WalletButton>
+                    <WalletButton>Open</WalletButton>
                 </div>
             )}
         >

packages/wallets/src/components/ExternalTradingPlatforms/AvailableDerivezAccountsList/AvailableDerivezAccountsList.scss

@@ -1,15 +1,4 @@
 .wallets-available-derivez {
-    &__text {
-        color: var(--brand-coral, #ff444f);
-        text-align: center;
-
-        /* desktop/paragraph/P2 - bold */
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 20px; /* 142.857% */
-    }
-
     &__details {
         flex-grow: 1;
         &-title {

packages/wallets/src/components/ExternalTradingPlatforms/AvailableDerivezAccountsList/AvailableDerivezAccountsList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import DerivEZ from '../../../public/images/derivez.svg';
-import { SecondaryActionButton } from '../../SecondaryActionButton';
+import { WalletButton } from '../../Base';
 import { TradingAccountCard } from '../../TradingAccountCard';
 import './AvailableDerivezAccountsList.scss';
 
@@ -12,11 +12,7 @@ const AvailableDerivezAccountsList: React.FC = () => {
                     <DerivEZ />
                 </div>
             )}
-            trailing={() => (
-                <SecondaryActionButton>
-                    <p className='wallets-available-derivez__text'>Get</p>
-                </SecondaryActionButton>
-            )}
+            trailing={() => <WalletButton color='primary-light'>Get</WalletButton>}
         >
             <div className='wallets-available-derivez__details'>
                 <p className='wallets-available-derivez__details-title'>Deriv EZ</p>

packages/wallets/src/components/ExternalTradingPlatforms/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import DerivX from '../../../public/images/derivx.svg';
+import { WalletButton } from '../../Base';
 import { DxtradeEnterPasswordModal } from '../../DxtradeEnterPasswordModal';
 import { useModal } from '../../ModalProvider';
-import { SecondaryActionButton } from '../../SecondaryActionButton';
 import { TradingAccountCard } from '../../TradingAccountCard';
 import './AvailableDxtradeAccountsList.scss';
 
@@ -17,9 +17,9 @@ const AvailableDxtradeAccountsList: React.FC = () => {
                 </div>
             )}
             trailing={() => (
-                <SecondaryActionButton onClick={() => show(<DxtradeEnterPasswordModal />)}>
-                    <p className='wallets-available-dxtrade__text'>Get</p>
-                </SecondaryActionButton>
+                <WalletButton color='primary-light' onClick={() => show(<DxtradeEnterPasswordModal />)}>
+                    Get
+                </WalletButton>
             )}
         >
             <div className='wallets-available-dxtrade__details'>

packages/wallets/src/components/ExternalTradingPlatforms/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx

@@ -3,9 +3,9 @@ import { useSortedMT5Accounts } from '@deriv/api';
 import DerivedMT5 from '../../../public/images/mt5-derived.svg';
 import FinancialMT5 from '../../../public/images/mt5-financial.svg';
 import SwapFreeMT5 from '../../../public/images/mt5-swap-free.svg';
+import { WalletButton } from '../../Base';
 import { useModal } from '../../ModalProvider';
 import { MT5PasswordModal } from '../../MT5PasswordModal';
-import { SecondaryActionButton } from '../../SecondaryActionButton';
 import { TradingAccountCard } from '../../TradingAccountCard';
 import './AvailableMT5AccountsList.scss';
 
@@ -41,11 +41,12 @@ const AvailableMT5AccountsList: React.FC<TProps> = ({ account }) => {
                 </div>
             )}
             trailing={() => (
-                <SecondaryActionButton
+                <WalletButton
+                    color='primary-light'
                     onClick={() => show(<MT5PasswordModal marketType={account?.market_type || 'synthetic'} />)}
                 >
-                    <p className='wallets-available-mt5__text'>Get</p>
-                </SecondaryActionButton>
+                    Get
+                </WalletButton>
             )}
         >
             <div className='wallets-available-mt5__details'>

packages/wallets/src/components/ExternalTradingPlatforms/CTraderList/CTraderList.scss

@@ -38,15 +38,4 @@
             }
         }
     }
-
-    &__text {
-        color: #ff444f;
-        text-align: center;
-
-        /* desktop/paragraph/P2 - bold */
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 20px; /* 142.857% */
-    }
 }

packages/wallets/src/components/ExternalTradingPlatforms/CTraderList/CTraderList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import CTrader from '../../../public/images/ctrader.svg';
-import { SecondaryActionButton } from '../../SecondaryActionButton';
+import { WalletButton } from '../../Base';
 import { TradingAccountCard } from '../../TradingAccountCard';
 import './CTraderList.scss';
 
@@ -24,11 +24,7 @@ const CTraderList: React.FC = () => {
                         {...account}
                         key={`ctrader--${account.title}`}
                         leading={() => <div className='wallets-ctrader__content__icon'>{account.icon}</div>}
-                        trailing={() => (
-                            <SecondaryActionButton>
-                                <p className='wallets-ctrader__text'>Get</p>
-                            </SecondaryActionButton>
-                        )}
+                        trailing={() => <WalletButton color='primary-light'>Get</WalletButton>}
                     >
                         <div className='wallets-ctrader__content__details'>
                             <p className='wallets-ctrader__content__details-title'>{account.title}</p>