Vinu/Wallet names from be (deriv-com#5302)

* made wallet names to be dynamic from backend

* resolved linting issue

* implemented review comments and also added wrapper component for create-wallet for storybook to work

* fixed linting issue

* minor fix in wallet-store onUnmount function

* implemented the review comments in create-wallet

* resolved linting issue

* added all account types in wallet store

* changed function name in wallet store

packages/appstore/src/components/app.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { observer } from 'mobx-react-lite';
+import { setWebsocket } from '@deriv/shared';
 import Routes from 'Components/routes/routes';
 import { useStores, initContext } from 'Stores';
 import './app.scss';
@@ -15,7 +16,7 @@ type TAppProps = {
 const App: React.FC<TAppProps> = ({ passthrough }: TAppProps) => {
     const { root_store, WS } = passthrough;
     initContext(root_store, WS);
-
+    setWebsocket(WS);
     const { ui } = useStores();
 
     // Different consumers of this package have different sized headers and footers so they

packages/appstore/src/components/create-wallet/create-wallet-wrapper.tsx

@@ -0,0 +1,24 @@
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { useStores } from 'Stores';
+import CreateWallet from './create-wallet';
+import './create-wallet.scss';
+
+type TProps = {
+    is_dark_mode_on: boolean;
+    should_show_fiat: boolean;
+};
+
+const CreateWalletWrapper = ({ is_dark_mode_on, should_show_fiat }: TProps) => {
+    const { wallet_store } = useStores();
+
+    React.useEffect(() => {
+        wallet_store.onMount();
+    }, []);
+
+    const wallets = should_show_fiat ? wallet_store.wallet_provider.fiat_wallets : wallet_store.wallet_provider.wallets;
+
+    return <CreateWallet is_dark_mode_on={is_dark_mode_on} should_show_fiat={should_show_fiat} wallets={wallets} />;
+};
+
+export default observer(CreateWalletWrapper);

packages/appstore/src/components/create-wallet/create-wallet.tsx

@@ -1,19 +1,17 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
 import { Icon, Popover, Text, ThemedScrollbars } from '@deriv/components';
 import { localize } from '@deriv/translations';
-import Providers from './create-wallet-provider';
-import WalletCard from 'Components/wallet';
 import WalletIcon from 'Assets/svgs/wallet';
+import WalletCard from 'Components/wallet';
 
 type TProps = {
     is_dark_mode_on: boolean;
     should_show_fiat: boolean;
+    wallets: { getTitle: () => string; content: string[]; popover_text: () => string }[];
 };
 
-const CreateWallet = ({ is_dark_mode_on, should_show_fiat }: TProps) => {
-    const wallets = should_show_fiat ? Providers.fiat_wallets : Providers.wallets;
-
+const CreateWallet = ({ is_dark_mode_on, should_show_fiat, wallets }: TProps) => {
     const [selected_wallet, setSeletedWallet] = React.useState('');
 
     const onWalletClicked = (wallet: string) => {
@@ -59,10 +57,10 @@ const CreateWallet = ({ is_dark_mode_on, should_show_fiat }: TProps) => {
                                     </div>
                                     <div
                                         className={classNames('create-wallet-list__items', {
-                                            'create-wallet-list__items__center': wallet.content.length < 5,
+                                            'create-wallet-list__items__center': wallet.content?.length < 5,
                                         })}
                                     >
-                                        {wallet.content?.map((wallet_name, id) => {
+                                        {wallet.content?.map((wallet_name: string, id: number) => {
                                             const name = snakeToPascal(wallet_name || '');
                                             const wallet_logo = `${name}${is_dark_mode_on ? 'Dark' : 'Light'}`;
                                             const is_wallet_selected = selected_wallet === wallet_name;

packages/appstore/src/components/create-wallet/stories/create-wallet.stories.tsx

@@ -1,9 +1,60 @@
 import React from 'react';
 import type { Meta, Story } from '@storybook/react';
-import CreateWallet from '../index';
+import { localize } from '@deriv/translations';
+import CreateWallet from 'Components/create-wallet';
 
 type CreateWalletProps = Parameters<typeof CreateWallet>[0];
 
+const wallets = [
+    {
+        getTitle: () => localize('Fiat currency wallets'),
+        content: ['aud', 'eur', 'gbp', 'usd'],
+        popover_text: () => localize('***'),
+    },
+    {
+        getTitle: () => localize('Cryptocurrency wallets'),
+        content: ['bitcoin', 'ethereum', 'litecoin', 'tether', 'usd_coin'],
+        popover_text: () => '',
+    },
+    {
+        getTitle: () => localize('Deriv P2P and Payment agents wallets'),
+        content: ['deriv_p2p', 'payment_agent'],
+        popover_text: () => '',
+    },
+];
+
+const fiat_wallets = [
+    {
+        getTitle: () => localize('E-wallets'),
+        content: [
+            'airtm',
+            'Fasapay',
+            'Jeton',
+            'Boleto',
+            'Neteller',
+            'PayLivre',
+            'paysafecard',
+            'Onlinenaira',
+            'PerfectMoney',
+            'Skrill',
+            'Sticpay',
+            'Astropay',
+            'WechatPay',
+            'Webmoney',
+            'Beyonic',
+            '1foryou',
+            'Advcash',
+        ],
+        popover_text: () => '',
+    },
+    {
+        getTitle: () => localize('Bankwire'),
+        content: ['InstantBankTransfer', 'Paytrust88', 'Nganluong', 'Help2pay', 'Zingpay', 'Trustly', 'Oxxo', 'Spei'],
+        popover_text: () => '',
+    },
+    { getTitle: () => localize('Credit/Debit card'), content: ['CreditCards'], popover_text: () => '' },
+];
+
 export default {
     title: 'CreateWallet',
     argTypes: {
@@ -23,4 +74,13 @@ export default {
 const Template: Story<CreateWalletProps> = args => <CreateWallet {...args} />;
 
 export const CreateWalletTemplate = Template.bind({});
-CreateWalletTemplate.args = {};
+CreateWalletTemplate.args = {
+    wallets,
+    should_show_fiat: false,
+};
+
+export const CreateWalletTemplateWithShouldShowFiat = Template.bind({});
+CreateWalletTemplateWithShouldShowFiat.args = {
+    wallets: fiat_wallets,
+    should_show_fiat: true,
+};

packages/appstore/src/constants/wallet-types.ts

@@ -0,0 +1,46 @@
+type CryptoWalletMapping = {
+    [key: string]: string;
+};
+
+export const crypto_wallets_mapping: CryptoWalletMapping = {
+    BTC: 'bitcoin',
+    ETH: 'ethereum',
+    LTC: 'litecoin',
+    USDT: 'tether',
+    USDC: 'usd_coin',
+};
+
+export const built_in_wallets = ['deriv_p2p', 'payment_agent'];
+
+export const e_wallets = [
+    'airtm',
+    'Fasapay',
+    'Jeton',
+    'Boleto',
+    'Neteller',
+    'PayLivre',
+    'paysafecard',
+    'Onlinenaira',
+    'PerfectMoney',
+    'Skrill',
+    'Sticpay',
+    'Astropay',
+    'WechatPay',
+    'Webmoney',
+    'Beyonic',
+    '1foryou',
+    'Advcash',
+];
+
+export const bankwire = [
+    'InstantBankTransfer',
+    'Paytrust88',
+    'Nganluong',
+    'Help2pay',
+    'Zingpay',
+    'Trustly',
+    'Oxxo',
+    'Spei',
+];
+
+export const credit_debit_card = ['CreditCards'];

packages/appstore/src/stores/root-store.ts

@@ -1,16 +1,19 @@
 import ConfigStore from './config-store';
+import WalletStore from './wallet-store';
 
 export default class RootStore {
     public config: ConfigStore;
     public ws: unknown;
     public client: any;
     public common: any;
     public ui: any;
+    public wallet_store: WalletStore;
 
     public constructor(core_store: any) {
         this.config = new ConfigStore(this);
         this.client = core_store.client;
         this.common = core_store.common;
         this.ui = core_store.ui;
+        this.wallet_store = new WalletStore(this);
     }
 }

packages/appstore/src/stores/wallet-store.ts

@@ -0,0 +1,92 @@
+import { action, observable, computed } from 'mobx';
+import { WS } from '@deriv/shared';
+import { localize } from '@deriv/translations';
+import BaseStore from './base-store';
+import {
+    crypto_wallets_mapping,
+    built_in_wallets,
+    e_wallets,
+    bankwire,
+    credit_debit_card,
+} from 'Constants/wallet-types';
+
+type TWalletProvider = {
+    fiat_wallets: { getTitle: () => string; content: string[]; popover_text: () => string }[];
+    wallets: { getTitle: () => string; content: string[]; popover_text: () => string }[];
+};
+export default class WalletStore extends BaseStore {
+    @observable
+    account_types: any;
+
+    @computed
+    get wallet_names() {
+        return this.account_types?.wallet;
+    }
+
+    @computed
+    get fiat_currencies() {
+        return this.wallet_names?.fiat?.currencies.map((currency: string) => currency.toLowerCase());
+    }
+
+    @computed
+    get crypto_wallets() {
+        return this.wallet_names?.crypto?.currencies.map((currency: string) => crypto_wallets_mapping[currency]);
+    }
+
+    @computed
+    get wallet_provider(): TWalletProvider {
+        const fiat_wallets = [
+            { getTitle: () => localize('E-wallets'), content: e_wallets, popover_text: () => '' },
+            { getTitle: () => localize('Bankwire'), content: bankwire, popover_text: () => '' },
+            { getTitle: () => localize('Credit/Debit card'), content: credit_debit_card, popover_text: () => '' },
+        ];
+
+        const wallets = [
+            {
+                getTitle: () => localize('Fiat currency wallets'),
+                content: this.fiat_currencies,
+                popover_text: () => localize('***'),
+            },
+            {
+                getTitle: () => localize('Cryptocurrency wallets'),
+                content: this.crypto_wallets,
+                popover_text: () => '',
+            },
+            {
+                getTitle: () => localize('Deriv P2P and Payment agents wallets'),
+                content: built_in_wallets,
+                popover_text: () => '',
+            },
+        ];
+
+        return {
+            fiat_wallets,
+            wallets,
+        };
+    }
+
+    @action
+    onMount() {
+        this.getWalletNames();
+    }
+
+    @action.bound
+    setAccountTypes(data: any) {
+        this.account_types = data;
+    }
+
+    @action.bound
+    async getWalletNames() {
+        if (this.wallet_names) return;
+        const response = await WS.authorized.storage.send({
+            get_account_types: 1,
+        });
+
+        if (response) this.setAccountTypes(response.get_account_types);
+    }
+
+    @action
+    onUnmount() {
+        this.account_types = null;
+    }
+}

packages/appstore/src/types/stores.types.ts

@@ -1,7 +1,9 @@
 import ConfigStore from 'Stores/config-store';
+import WalletStore from 'Stores/wallet-store';
 
 export type TRootStore = {
     ui: any;
     client: any;
     config: ConfigStore;
+    wallet_store: WalletStore;
 };