hamid/wall-432/transfer-account-selector-refactor

packages/components/src/components/transfer-account-selector/index.ts

@@ -0,0 +1,3 @@
+import TransferAccountSelector from './transfer-account-selector';
+
+export { TransferAccountSelector };

packages/components/src/components/transfer-account-selector/transfer-account-selector.scss

@@ -0,0 +1,63 @@
+.transfer-account-selector {
+    cursor: pointer;
+    width: 100%;
+    background-color: $color-white;
+    padding: 0.8rem;
+
+    &__label {
+        display: block;
+    }
+
+    &__value {
+        padding: 0;
+    }
+
+    &__heading {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 0.4rem;
+    }
+
+    &__chevron-icon {
+        margin-left: 1rem;
+    }
+
+    &__content {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    &__list {
+        margin-bottom: 0.8rem;
+        border-bottom: 0.2rem solid $color-grey-2;
+
+        &--is-last {
+            border-bottom: none;
+            margin-bottom: 0;
+        }
+
+        &-items {
+            padding: 0 0.8rem;
+        }
+
+        &-header {
+            display: block;
+            padding: 1.6rem 2.8rem;
+        }
+
+        &-tile {
+            cursor: pointer;
+
+            &--is-last {
+                margin-bottom: 1.6rem;
+            }
+        }
+    }
+}
+
+// Overwrite modal style
+.dc-modal-header--transfer-account-selector__modal-header {
+    border-bottom: 2px solid $color-grey-2;
+}

packages/components/src/components/transfer-account-selector/transfer-account-selector.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import classNames from 'classnames';
+import { capitalizeFirstLetter, isMobile } from '@deriv/shared';
+import { Localize } from '@deriv/translations';
+import Text from '../text';
+import { WalletTile } from '../wallet-tile';
+import Modal from '../modal';
+import Icon from '../icon';
+import './transfer-account-selector.scss';
+
+type TTransferAccount = React.ComponentProps<typeof WalletTile>['account'];
+
+type TTransferAccountSelectorProps = {
+    label?: string;
+    placeholder?: string;
+    transfer_accounts: { [k: string]: TTransferAccount[] };
+    value?: TTransferAccount;
+    wallet_name?: string;
+};
+
+const ChevronIcon = ({ className }: { className?: string }) => {
+    return (
+        <React.Fragment>
+            <Icon className={`transfer-account-selector__chevron-icon ${className}`} icon='IcChevronDown' />
+        </React.Fragment>
+    );
+};
+
+const TransferAccountSelector = ({
+    label,
+    placeholder,
+    transfer_accounts = {},
+    value,
+    wallet_name,
+}: TTransferAccountSelectorProps) => {
+    const [is_list_modal_open, setIsListModalOpen] = React.useState(false);
+    const [selected_account, setSelectedAccount] = React.useState<TTransferAccount | undefined>(value);
+
+    const openAccountsList = () => {
+        setIsListModalOpen(true);
+    };
+
+    return (
+        <div className='transfer-account-selector' onClick={openAccountsList}>
+            <div className='transfer-account-selector__heading'>
+                <Text className='transfer-account-selector__label' size='xs'>
+                    {label}
+                </Text>
+
+                {isMobile() && <ChevronIcon />}
+            </div>
+
+            <div className='transfer-account-selector__content'>
+                {!selected_account && (
+                    <Text size='xs' weight='bold'>
+                        {placeholder}
+                    </Text>
+                )}
+                {selected_account && (
+                    <WalletTile
+                        account={selected_account}
+                        className='transfer-account-selector__value'
+                        is_mobile={isMobile()}
+                        is_value
+                    />
+                )}
+
+                {!isMobile() && <ChevronIcon />}
+            </div>
+
+            <Modal
+                className='transfer-account-selector__modal-header'
+                has_close_icon
+                is_open={is_list_modal_open}
+                title={label}
+                toggleModal={() => setIsListModalOpen(old => !old)}
+                width='100vh'
+                height='100vh'
+            >
+                <div>
+                    {Object.keys(transfer_accounts).map((key, idx) => {
+                        return (
+                            <React.Fragment key={idx}>
+                                <div
+                                    className={classNames('transfer-account-selector__list', {
+                                        'transfer-account-selector__list--is-last':
+                                            Object.keys(transfer_accounts).length === idx + 1,
+                                    })}
+                                >
+                                    <span className='transfer-account-selector__list-header'>
+                                        <Text size='xs' weight='bold'>
+                                            {key === 'accounts' ? (
+                                                <Localize
+                                                    i18n_default_text='Trading accounts linked with {{wallet}}'
+                                                    values={{
+                                                        wallet: wallet_name,
+                                                    }}
+                                                />
+                                            ) : (
+                                                <React.Fragment>{capitalizeFirstLetter(key)}</React.Fragment>
+                                            )}
+                                        </Text>
+                                    </span>
+                                    <div className='transfer-account-selector__list-items'>
+                                        {transfer_accounts[key].map((account, index) => (
+                                            <WalletTile
+                                                key={index}
+                                                account={account}
+                                                className={classNames('transfer-account-selector__list-tile', {
+                                                    'transfer-account-selector__list-tile--is-last':
+                                                        transfer_accounts[key].length === index + 1,
+                                                })}
+                                                is_active={selected_account?.loginid === account.loginid}
+                                                has_hover
+                                                onClick={() => {
+                                                    setSelectedAccount(account);
+                                                    setIsListModalOpen(false);
+                                                }}
+                                            />
+                                        ))}
+                                    </div>
+                                </div>
+                            </React.Fragment>
+                        );
+                    })}
+                </div>
+            </Modal>
+        </div>
+    );
+};
+
+export default TransferAccountSelector;

packages/components/src/components/wallet-icon/wallet-icon.scss

@@ -6,6 +6,12 @@
     border-radius: $BORDER_RADIUS;
     overflow: hidden;
 
+    &__default-bg {
+        // Default Background
+        background: radial-gradient(100% 4130.74% at 0% 100%, rgba(244, 67, 54, 0.24) 0%, rgba(40, 57, 145, 0.48) 100%)
+            #ffffff;
+    }
+
     &--xsmall {
         width: 2.4rem;
         height: 1.4rem;

packages/components/src/components/wallet-icon/wallet-icon.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import Icon from '../icon';
 import './wallet-icon.scss';
 
-type TWalletIconSizes = keyof (typeof sizes)['fiat' | 'crypto'];
+type TWalletIconSizes = keyof typeof sizes['fiat' | 'crypto'];
 
 type TWalletIconProps = {
     currency?: string;
@@ -53,7 +53,7 @@ const WalletIcon = ({ currency, icon, size = 'medium', type, has_bg }: TWalletIc
     return (
         <div
             className={classNames('wallet-icon', {
-                [`wallet-icon--${size} wallet-card__${currency?.toLowerCase()}-bg`]:
+                [`wallet-icon--${size} wallet-icon__default-bg wallet-card__${currency?.toLowerCase()}-bg`]:
                     (!!currency && type !== 'app') || has_bg,
             })}
         >

packages/components/src/components/wallet-tile/index.ts

@@ -0,0 +1,3 @@
+import WalletTile from './wallet-tile';
+
+export { WalletTile };

packages/components/src/components/wallet-tile/wallet-tile.scss

@@ -0,0 +1,61 @@
+.wallet-tile {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    background-color: $color-white;
+    padding: 1rem 2rem;
+    border-radius: $BORDER_RADIUS;
+    flex-grow: 1;
+
+    &--mobile {
+        flex-direction: column;
+        align-items: flex-start;
+
+        .wallet-tile {
+            &__header {
+                display: flex;
+                justify-content: flex-start;
+                align-items: flex-end;
+                margin-bottom: 0.4rem;
+            }
+
+            &__icon {
+                margin-right: 0.4rem;
+            }
+        }
+    }
+
+    &--hover {
+        &:hover {
+            background-color: $color-grey-4;
+        }
+    }
+
+    &--active {
+        background-color: $color-grey-5;
+    }
+
+    &__icon {
+        margin-right: 1.6rem;
+        min-width: 4rem;
+    }
+
+    &__content {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-grow: 1;
+    }
+
+    &__jurisdiction {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: flex-start;
+        gap: 0.4rem;
+        border: 1px solid $color-black-1;
+        border-radius: $BORDER_RADIUS / 2;
+        padding: 0.2rem 0.4rem;
+        text-transform: uppercase;
+    }
+}