Revert "Revert "adrienne/fix: added routing for wallets and wallets b…

…uild workflow (#10478)" (#10626)" (#10628)

This reverts commit 4c3663a.

.circleci/config.yml

@@ -230,7 +230,7 @@ jobs:
       #     command: npx tsc --project packages/cashier/tsconfig.json -noEmit
       - run:
           name: "Check ESLint for @deriv/wallets"
-          command: npx eslint --fix --config packages/wallets/.eslintrc.js packages/wallets
+          command: npx eslint --fix --ignore-path packages/wallets/.eslintignore --config packages/wallets/.eslintrc.js packages/wallets
       - run:
           name: "Check Stylelint for @deriv/wallets"
           command: npx stylelint packages/wallets/**/*.scss

.github/workflows/test.yml

@@ -27,11 +27,12 @@ jobs:
       run: npx tsc --project packages/analytics/tsconfig.json -noEmit
     - name: Check TypeScript for @deriv/stores
       run: npx tsc --project packages/stores/tsconfig.json -noEmit
-    - name: Check TypeScript and linting for @deriv/wallets
-      run: |-
-        npx tsc --project packages/wallets/tsconfig.json -noEmit
-        npx eslint --fix --config packages/wallets/.eslintrc.js packages/wallets
-        npx stylelint packages/wallets/**/*.scss
+    - name: Check TypeScript for @deriv/wallets
+      run: npx tsc --project packages/wallets/tsconfig.json -noEmit
+    - name: Check ESLint for @deriv/wallets
+      run: npx eslint --fix --ignore-path packages/wallets/.eslintignore --config packages/wallets/.eslintrc.js packages/wallets
+    - name: Check Stylelint for @deriv/wallets
+      run: npx stylelint packages/wallets/**/*.scss
     - name: Check tests for @deriv/hooks
       run: bash ./scripts/check-tests.sh packages/hooks/src
     - name: Check tests for @deriv/utils

packages/appstore/webpack.config.js

@@ -131,30 +131,11 @@ module.exports = function (env) {
                                 resources: [
                                     // eslint-disable-next-line global-require, import/no-dynamic-require
                                     ...require('@deriv/shared/src/styles/index.js'),
-                                    // eslint-disable-next-line global-require, import/no-dynamic-require
-                                    ...require('@deriv/wallets/src/styles/index.js'),
                                 ],
                             },
                         },
                     ],
                 },
-                {
-                    test: /\.svg$/,
-                    issuer: /\/packages\/wallets\/.*(\/)?.*.scss/,
-                    exclude: /node_modules/,
-                    include: /public\//,
-                    type: 'asset/resource',
-                    generator: {
-                        filename: 'appstore/wallets/public/[name].[contenthash][ext]',
-                    },
-                },
-                {
-                    test: /\.svg$/,
-                    issuer: /\/packages\/wallets\/.*(\/)?.*.tsx/,
-                    exclude: /node_modules/,
-                    include: /public\//,
-                    use: svg_loaders,
-                },
                 {
                     test: /\.svg$/,
                     exclude: [/node_modules/, path.resolve('../', 'wallets')],
@@ -166,7 +147,7 @@ module.exports = function (env) {
                 },
                 {
                     test: /\.svg$/,
-                    exclude: [/node_modules|public\//],
+                    exclude: /node_modules|public\//,
                     use: svg_loaders,
                 },
             ],

packages/core/build/config.js

@@ -75,6 +75,10 @@ const copyConfig = base => {
             from: path.resolve(__dirname, '../node_modules/@deriv/appstore/dist/appstore'),
             to: 'appstore',
         },
+        {
+            from: path.resolve(__dirname, '../node_modules/@deriv/wallets/dist/wallets'),
+            to: 'wallets',
+        },
         { from: path.resolve(__dirname, '../scripts/CNAME'), to: 'CNAME', toType: 'file', noErrorOnMissing: true },
         {
             from: path.resolve(__dirname, '../src/public/.well-known/apple-app-site-association'),

packages/core/package.json

@@ -91,6 +91,7 @@
         "@deriv/analytics": "^1.0.0",
         "@deriv/api": "^1.0.0",
         "@deriv/appstore": "^0.0.4",
+        "@deriv/wallets": "^1.0.0",
         "@deriv/bot-web-ui": "^1.0.0",
         "@deriv/cashier": "^1.0.0",
         "@deriv/cfd": "^1.0.0",

packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx

@@ -7,6 +7,7 @@ import {
     useAccountTransferVisible,
     useIsP2PEnabled,
     usePaymentAgentTransferVisible,
+    useFeatureFlags,
 } from '@deriv/hooks';
 import { routes, PlatformContext, getStaticUrl, whatsapp_url } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
@@ -62,6 +63,7 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
     const { is_appstore } = React.useContext(PlatformContext);
     const timeout = React.useRef();
     const history = useHistory();
+    const { is_next_wallet_enabled } = useFeatureFlags();
 
     React.useEffect(() => {
         const processRoutes = () => {
@@ -293,7 +295,7 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
                                 {is_logged_in && (
                                     <MobileDrawer.Item>
                                         <MenuLink
-                                            link_to={routes.traders_hub}
+                                            link_to={is_next_wallet_enabled ? routes.wallets : routes.traders_hub}
                                             icon={is_dark_mode ? 'IcAppstoreHomeDark' : 'IcAppstoreTradersHubHome'}
                                             text={localize("Trader's Hub")}
                                             onClickLink={toggleDrawer}

packages/core/src/App/Constants/routes-config.js

@@ -57,6 +57,13 @@ const AppStore = React.lazy(() =>
     })
 );
 
+const Wallets = React.lazy(() =>
+    moduleLoader(() => {
+        // eslint-disable-next-line import/no-unresolved
+        return import(/* webpackChunkName: "wallets" */ '@deriv/wallets');
+    })
+);
+
 const P2P = React.lazy(() =>
     moduleLoader(() => {
         // eslint-disable-next-line import/no-unresolved
@@ -236,6 +243,12 @@ const getModules = () => {
             is_authenticated: true,
             getTitle: () => localize("Trader's Hub"),
         },
+        {
+            path: routes.wallets,
+            component: Wallets,
+            is_authenticated: true,
+            getTitle: () => localize('Wallets'),
+        },
         {
             path: routes.onboarding,
             component: AppStore,

packages/core/src/App/Containers/Layout/header/__tests__/traders-hub-header.spec.tsx

@@ -35,7 +35,15 @@ jest.mock('../show-notifications', () => jest.fn(() => <div>MockedShowNotificati
 describe('TradersHubHeader', () => {
     const renderComponent = () =>
         render(
-            <StoreProvider store={mockStore({})}>
+            <StoreProvider
+                store={mockStore({
+                    feature_flags: {
+                        data: {
+                            next_wallet: true,
+                        },
+                    },
+                })}
+            >
                 <TradersHubHeader />
             </StoreProvider>
         );

packages/core/src/App/Containers/Layout/header/__tests__/traders-hub-home-button.spec.tsx

@@ -12,7 +12,15 @@ jest.mock('react-router', () => ({
 describe('TradersHubHomeButton', () => {
     it("should display the text Trader's Hub in the header", () => {
         render(
-            <StoreProvider store={mockStore({})}>
+            <StoreProvider
+                store={mockStore({
+                    feature_flags: {
+                        data: {
+                            next_wallet: true,
+                        },
+                    },
+                })}
+            >
                 <TradersHubHomeButton />
             </StoreProvider>
         );
@@ -21,7 +29,15 @@ describe('TradersHubHomeButton', () => {
 
     it('should have the --active class if in traders hub route', () => {
         render(
-            <StoreProvider store={mockStore({})}>
+            <StoreProvider
+                store={mockStore({
+                    feature_flags: {
+                        data: {
+                            next_wallet: true,
+                        },
+                    },
+                })}
+            >
                 <TradersHubHomeButton />
             </StoreProvider>
         );

packages/core/src/App/Containers/Layout/header/traders-hub-home-button.tsx

@@ -5,21 +5,24 @@ import { Icon, Text } from '@deriv/components';
 import { routes } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
+import { useFeatureFlags } from '@deriv/hooks';
 
 const TradersHubHomeButton = observer(() => {
     const { ui } = useStore();
     const { is_dark_mode_on } = ui;
     const history = useHistory();
     const location = useLocation();
     const { pathname } = location;
+    const { is_next_wallet_enabled } = useFeatureFlags();
 
     return (
         <div
             data-testid='dt_traders_hub_home_button'
             className={classNames('traders-hub-header__tradershub', {
-                'traders-hub-header__tradershub--active': pathname === routes.traders_hub,
+                'traders-hub-header__tradershub--active':
+                    pathname === routes.traders_hub || pathname === routes.wallets,
             })}
-            onClick={() => history.push(routes.traders_hub)}
+            onClick={() => history.push(is_next_wallet_enabled ? routes.wallets : routes.traders_hub)}
         >
             <div className='traders-hub-header__tradershub--home-logo'>
                 <Icon

packages/shared/src/utils/routes/routes.ts

@@ -72,4 +72,7 @@ export const routes = {
     traders_hub: '/appstore/traders-hub',
     onboarding: '/appstore/onboarding',
     compare_cfds: '/appstore/cfd-compare-acccounts',
+
+    // Wallets
+    wallets: '/wallets',
 };

packages/stores/types.ts

@@ -81,7 +81,8 @@ type TRoutes =
     | '/complaints-policy'
     | '/appstore'
     | '/appstore/traders-hub'
-    | '/appstore/onboarding';
+    | '/appstore/onboarding'
+    | '/wallets';
 
 type TPopulateSettingsExtensionsMenuItem = {
     icon: string;

packages/wallets/.eslintignore

@@ -0,0 +1,2 @@
+dist/*.js
+webpack.config.js

packages/wallets/babel.config.json

@@ -0,0 +1,16 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+    "plugins": [
+        ["@babel/plugin-proposal-decorators", { "legacy": true }],
+        ["@babel/plugin-proposal-class-properties", { "loose": true }],
+        ["@babel/plugin-proposal-private-methods", { "loose": true }],
+        ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
+        "@babel/plugin-proposal-export-default-from",
+        "@babel/plugin-proposal-object-rest-spread",
+        "@babel/plugin-proposal-export-namespace-from",
+        "@babel/plugin-syntax-dynamic-import",
+        ["@babel/plugin-proposal-unicode-property-regex", { "useUnicodeFlag": false }],
+        "@babel/plugin-proposal-optional-chaining",
+        "@babel/plugin-proposal-nullish-coalescing-operator"
+    ]
+}

packages/wallets/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+    const content: React.ComponentType<React.SVGAttributes<SVGElement>>;
+    export default content;
+}

packages/wallets/package.json

@@ -2,7 +2,15 @@
     "name": "@deriv/wallets",
     "private": true,
     "version": "1.0.0",
-    "main": "src/index.tsx",
+    "main": "dist/wallets/js/index.js",
+    "engines": {
+        "node": "18.x"
+    },
+    "scripts": {
+        "build": "rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.js\"",
+        "serve": "rimraf dist && concurrently \"cross-env BUILD_MODE='serve' NODE_OPTIONS='-r ts-node/register' webpack --progress --watch --config ./webpack.config.js\" \"tsc -w --noEmit --preserveWatchOutput\"",
+        "start": "rimraf dist && npm run test && npm run serve"
+    },
     "dependencies": {
         "@deriv/api": "^1.0.0",
         "@deriv/utils": "^1.0.0",
@@ -12,8 +20,8 @@
         "formik": "^2.1.4",
         "moment": "^2.29.2",
         "qrcode.react": "^1.0.0",
-        "react-dom": "^17.0.2",
         "react": "^17.0.2",
+        "react-dom": "^17.0.2",
         "react-router-dom": "^5.2.0",
         "usehooks-ts": "^2.7.0"
     },
@@ -27,6 +35,9 @@
         "eslint-plugin-simple-import-sort": "^10.0.0",
         "eslint-plugin-sort-destructure-keys": "^1.5.0",
         "eslint-plugin-typescript-sort-keys": "^2.3.0",
-        "typescript": "^4.6.3"
+        "typescript": "^4.6.3",
+        "webpack": "^5.81.0",
+        "webpack-cli": "^4.7.2",
+        "webpack-bundle-analyzer": "^4.3.0"
     }
 }

packages/wallets/src/App.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { APIProvider } from '@deriv/api';
+import { ModalProvider } from './components/ModalProvider';
+import AppContent from './AppContent';
+import './styles/fonts.scss';
+import './index.scss';
+
+const App: React.FC = () => (
+    <APIProvider standalone>
+        <ModalProvider>
+            <AppContent />
+        </ModalProvider>
+    </APIProvider>
+);
+
+export default App;

packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.scss

@@ -1140,7 +1140,7 @@
                         top: 0;
                         width: 100%;
                         height: 100%;
-                        background-image: url('../../public//images/wallet-demo-bg-light.svg');
+                        background-image: url('../../public/images/wallet-demo-bg-light.svg');
                         background-repeat: repeat;
                         background-size: 70px;
                         mix-blend-mode: overlay;

packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx

@@ -62,7 +62,7 @@ const WalletListCardActions: React.FC<TProps> = ({ isActive, isDemo, loginid })
                                 className='wallets-mobile-actions-content-icon'
                                 key={button.name}
                                 onClick={() => {
-                                    history.push(`/appstore/traders-hub/cashier/${button.name}`);
+                                    history.push(`/wallets/cashier/${button.name}`);
                                 }}
                             >
                                 {button.icon}
@@ -82,7 +82,7 @@ const WalletListCardActions: React.FC<TProps> = ({ isActive, isDemo, loginid })
                     key={button.name}
                     onClick={async () => {
                         await switchAccount(loginid);
-                        history.push(`/appstore/traders-hub/cashier/${button.name}`);
+                        history.push(`/wallets/cashier/${button.name}`);
                     }}
                 >
                     {button.icon}

packages/wallets/src/components/WalletsAccordion/WalletsAccordion.scss

@@ -28,7 +28,7 @@
                 width: 100%;
                 height: 100%;
                 border-radius: 16px;
-                background-image: url('../../public//images/wallet-demo-desktop-bg.svg');
+                background-image: url('../../public/images/wallet-demo-desktop-bg.svg');
                 background-repeat: repeat;
                 background-size: 60px;
                 opacity: 0.24;

packages/wallets/src/features/cashier/components/WalletCashierContent/WalletCashierContent.tsx

@@ -6,15 +6,15 @@ import { WalletTransfer } from '../../flows/WalletTransfer';
 
 const WalletCashierContent = () => {
     const history = useHistory();
-    const isTransfer = useRouteMatch('/appstore/traders-hub/cashier/transfer');
-    const isDeposit = useRouteMatch('/appstore/traders-hub/cashier/deposit');
-    const isTransactions = useRouteMatch('/appstore/traders-hub/cashier/transactions');
-    const isWithdraw = useRouteMatch('/appstore/traders-hub/cashier/withdraw');
+    const isTransfer = useRouteMatch('/wallets/cashier/transfer');
+    const isDeposit = useRouteMatch('/wallets/cashier/deposit');
+    const isTransactions = useRouteMatch('/wallets/cashier/transactions');
+    const isWithdraw = useRouteMatch('/wallets/cashier/withdraw');
 
     useEffect(() => {
         // redirect to deposit page if no other page is matched
         if (!isTransfer && !isDeposit && !isTransactions && !isWithdraw) {
-            history.push('/appstore/traders-hub/cashier/deposit');
+            history.push('/wallets/cashier/deposit');
         }
     }, [isTransfer, isDeposit, isTransactions, isWithdraw, history]);
 

packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.tsx

@@ -40,7 +40,7 @@ const WalletCashierHeader = () => {
                         {data?.wallet_currency_type && <WalletCardIcon size='xl' type={data?.wallet_currency_type} />}
                         <button
                             className='wallets-cashier-header__close-button'
-                            onClick={() => history.push('/appstore/traders-hub')}
+                            onClick={() => history.push('/wallets')}
                         >
                             <CloseIcon />
                         </button>
@@ -50,12 +50,12 @@ const WalletCashierHeader = () => {
                     {tabs.map(tab => (
                         <button
                             className={`wallets-cashier-header__tabs__tab ${
-                                location.pathname === `/appstore/traders-hub/cashier/${tab}`
+                                location.pathname === `/wallets/cashier/${tab}`
                                     ? 'wallets-cashier-header__tabs__tab--active'
                                     : ''
                             }`}
                             key={`cashier-tab-${tab}`}
-                            onClick={() => history.push(`/appstore/traders-hub/cashier/${tab}`)}
+                            onClick={() => history.push(`/wallets/cashier/${tab}`)}
                         >
                             {tab}
                         </button>