feat(wallets): replace Loader with WalletLoader component across the …

…application (#17864) Co-authored-by: Jim Daniels Wasswa <[email protected]>
deriv-com · Jan 9, 2025 · 48d0f0c · 48d0f0c
1 parent 1ebece6
commit 48d0f0c
Show file tree

Hide file tree

Showing 44 changed files with 211 additions and 98 deletions.
diff --git a/packages/wallets/src/App.tsx b/packages/wallets/src/App.tsx
@@ -1,11 +1,11 @@
 import React, { lazy, useMemo, useState } from 'react';
 import { APIProvider } from '@deriv/api-v2';
 import { initializeI18n, TranslationProvider } from '@deriv-com/translations';
-import { Loader } from '@deriv-com/ui';
 import { ModalProvider } from './components/ModalProvider';
 import useLanguage from './hooks/useLanguage';
 import AppContent from './AppContent';
 import WalletsAuthProvider from './AuthProvider';
+import { WalletLoader } from './components';
 import { TLanguageType } from './types';
 import './styles/fonts.scss';
 import './index.scss';
@@ -47,7 +47,7 @@ const App: React.FC<TProps> = ({
         <APIProvider platform='wallets' standalone>
             <WalletsAuthProvider logout={logout}>
                 <TranslationProvider defaultLang={defaultLanguage} i18nInstance={i18nInstance}>
-                    <React.Suspense fallback={<Loader />}>
+                    <React.Suspense fallback={<WalletLoader />}>
                         <ModalProvider>
                             {!isWalletsOnboardingTourGuideVisible && Notifications && <Notifications />}
                             <AppContent
@@ -57,7 +57,7 @@ const App: React.FC<TProps> = ({
                         </ModalProvider>
                     </React.Suspense>
                     {isWalletsOnboardingTourGuideVisible && (
-                        <React.Suspense fallback={<Loader />}>
+                        <React.Suspense fallback={<WalletLoader />}>
                             <LazyWalletTourGuide
                                 onWalletsOnboardingTourGuideCloseHandler={onWalletsOnboardingTourGuideCloseHandler}
                             />

diff --git a/packages/wallets/src/components/Base/WalletLoader/WalletLoader.scss b/packages/wallets/src/components/Base/WalletLoader/WalletLoader.scss
@@ -0,0 +1,53 @@
+/** @define barspinner */
+.wallets-barspinner {
+    margin: auto;
+    width: 6rem;
+    height: 2rem;
+    white-space: nowrap;
+
+    &__rect {
+        margin: 0.4rem;
+        border-radius: 20px;
+        height: 40%;
+        width: 0.6rem;
+        display: inline-block;
+        @include createBarspinnerAnimation(5, 1.2s, 0.1);
+    }
+}
+
+@keyframes sk-stretchdelay {
+    0%,
+    40%,
+    100% {
+        transform: scaleY(1);
+    }
+    20% {
+        transform: scaleY(2);
+    }
+}
+
+/** @define initial-loader */
+.wallets-initial-loader {
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    display: flex;
+    background: transparent;
+
+    &--fullscreen {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    &__barspinner {
+        margin: 5rem auto;
+
+        &--rect {
+            background-color: var(--brand-secondary);
+        }
+    }
+}
diff --git a/packages/wallets/src/components/Base/WalletLoader/WalletLoader.tsx b/packages/wallets/src/components/Base/WalletLoader/WalletLoader.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import classNames from 'classnames';
+import './WalletLoader.scss';
+
+type TWalletLoaderProps = {
+    className?: string;
+    isFullScreen?: boolean;
+};
+
+const WalletLoader: React.FC<TWalletLoaderProps> = ({ className, isFullScreen = true }) => {
+    return (
+        <div
+            className={classNames(
+                'wallets-initial-loader',
+                {
+                    'wallets-initial-loader--fullscreen': isFullScreen,
+                },
+                className
+            )}
+            data-testid='dt_initial_loader'
+        >
+            <div className={classNames('wallets-initial-loader__barspinner', 'wallets-barspinner')}>
+                {Array.from(new Array(5)).map((_, idx) => (
+                    <div
+                        className={`wallets-initial-loader__barspinner--rect wallets-barspinner__rect wallets-barspinner__rect--${
+                            idx + 1
+                        } rect${idx + 1}`}
+                        key={idx}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default WalletLoader;
diff --git a/packages/wallets/src/components/Base/WalletLoader/index.ts b/packages/wallets/src/components/Base/WalletLoader/index.ts
@@ -0,0 +1 @@
+export { default as WalletLoader } from './WalletLoader';
diff --git a/packages/wallets/src/components/Base/WalletPasswordFieldLazy/WalletPasswordFieldLazy.tsx b/packages/wallets/src/components/Base/WalletPasswordFieldLazy/WalletPasswordFieldLazy.tsx
@@ -1,5 +1,5 @@
 import React, { lazy, Suspense } from 'react';
-import { Loader } from '@deriv-com/ui';
+import { WalletLoader } from '../WalletLoader';
 import { WalletTextFieldProps } from '../WalletTextField/WalletTextField';
 
 export interface WalletPasswordFieldProps extends WalletTextFieldProps {
@@ -16,7 +16,7 @@ const WalletPasswordFieldLazyContainer = lazy(
 ) as React.FC<WalletPasswordFieldProps>;
 
 const WalletPasswordFieldLazy: React.FC<WalletPasswordFieldProps> = props => (
-    <Suspense fallback={<Loader isFullScreen={false} />}>
+    <Suspense fallback={<WalletLoader isFullScreen={false} />}>
         <WalletPasswordFieldLazyContainer {...props} />
     </Suspense>
 );

diff --git a/packages/wallets/src/components/Base/index.ts b/packages/wallets/src/components/Base/index.ts
@@ -9,5 +9,6 @@ export * from './WalletButtonGroup';
 export * from './WalletClipboard';
 export * from './WalletDialog';
 export * from './WalletLink';
+export * from './WalletLoader';
 export * from './WalletPasswordFieldLazy';
 export * from './WalletTextField';
diff --git a/packages/wallets/src/features/cashier/WalletCashier.tsx b/packages/wallets/src/features/cashier/WalletCashier.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { useActiveWalletAccount } from '@deriv/api-v2';
-import { Loader } from '@deriv-com/ui';
+import { WalletLoader } from '../../components';
 import { WalletCashierContent, WalletCashierHeader } from './components';
 import { CashierScrollContext } from './context';
 import './WalletCashier.scss';
@@ -21,7 +21,7 @@ const WalletCashier = () => {
         [onCashierScroll]
     );
 
-    if (isLoading) return <Loader />;
+    if (isLoading) return <WalletLoader />;
 
     return (
         <div className='wallets-cashier'>

diff --git a/packages/wallets/src/features/cashier/__tests__/WalletCashier.spec.tsx b/packages/wallets/src/features/cashier/__tests__/WalletCashier.spec.tsx
@@ -8,8 +8,9 @@ jest.mock('@deriv/api-v2', () => ({
     useActiveWalletAccount: jest.fn(),
 }));
 
-jest.mock('@deriv-com/ui', () => ({
-    Loader: jest.fn(() => <div>Loading...</div>),
+jest.mock('../../../components', () => ({
+    ...jest.requireActual('../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
 }));
 
 jest.mock('../components/', () => ({

diff --git a/packages/wallets/src/features/cashier/flows/WalletDeposit/WalletDeposit.tsx b/packages/wallets/src/features/cashier/flows/WalletDeposit/WalletDeposit.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { useActiveWalletAccount } from '@deriv/api-v2';
-import { Loader } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../components';
 import { DepositCryptoModule, DepositFiatModule } from '../../modules';
 
 const WalletDeposit = () => {
     const { data: activeWallet } = useActiveWalletAccount();
 
-    if (!activeWallet?.currency_config) return <Loader />;
+    if (!activeWallet?.currency_config) return <WalletLoader />;
 
     const isCryptoProvider = activeWallet.currency_config.platform.cashier.includes('crypto');
 

diff --git a/packages/wallets/src/features/cashier/flows/WalletTransfer/WalletTransfer.tsx b/packages/wallets/src/features/cashier/flows/WalletTransfer/WalletTransfer.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { useTransferBetweenAccounts } from '@deriv/api-v2';
-import { Loader } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../components';
 import { TransferModule } from '../../modules';
 import { TransferNotAvailable } from '../../screens/TransferNotAvailable';
 
@@ -13,7 +13,7 @@ const WalletTransfer = () => {
         requestTransferAccounts();
     }, [requestTransferAccounts]);
 
-    if (isTransferAccountsLoading || !data?.accounts) return <Loader />;
+    if (isTransferAccountsLoading || !data?.accounts) return <WalletLoader />;
 
     return (
         <TransferNotAvailable accounts={data.accounts}>

diff --git a/packages/wallets/src/features/cashier/flows/WalletTransfer/__tests__/WalletTransfer.spec.tsx b/packages/wallets/src/features/cashier/flows/WalletTransfer/__tests__/WalletTransfer.spec.tsx
@@ -4,8 +4,9 @@ import { render, screen } from '@testing-library/react';
 import { CashierLocked } from '../../../modules';
 import WalletTransfer from '../WalletTransfer';
 
-jest.mock('@deriv-com/ui', () => ({
-    Loader: jest.fn(() => <div>Loading...</div>),
+jest.mock('../../../../../components', () => ({
+    ...jest.requireActual('../../../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
 }));
 
 jest.mock('../../../modules', () => ({

diff --git a/packages/wallets/src/features/cashier/flows/WalletWithdrawal/WalletWithdrawal.tsx b/packages/wallets/src/features/cashier/flows/WalletWithdrawal/WalletWithdrawal.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useActiveWalletAccount, useAuthorize } from '@deriv/api-v2';
-import { Loader } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../components';
 import useAllBalanceSubscription from '../../../../hooks/useAllBalanceSubscription';
 import { WithdrawalCryptoModule, WithdrawalFiatModule, WithdrawalVerificationModule } from '../../modules';
 import { WithdrawalNoBalance } from '../../screens';
@@ -42,7 +42,7 @@ const WalletWithdrawal = () => {
     }, [activeWallet?.loginid, switchAccount]);
 
     if (!activeWallet || isBalanceLoading) {
-        return <Loader />;
+        return <WalletLoader />;
     }
 
     if (balanceData && !isBalanceLoading && balanceData[activeWallet?.loginid ?? 'USD'].balance <= 0) {

diff --git a/...s/wallets/src/features/cashier/flows/WalletWithdrawal/__tests__/WalletWithdrawal.spec.tsx b/...s/wallets/src/features/cashier/flows/WalletWithdrawal/__tests__/WalletWithdrawal.spec.tsx
@@ -5,6 +5,11 @@ import useAllBalanceSubscription from '../../../../../hooks/useAllBalanceSubscri
 import { CashierLocked, WithdrawalLocked } from '../../../modules';
 import WalletWithdrawal from '../WalletWithdrawal';
 
+jest.mock('../../../../../components', () => ({
+    ...jest.requireActual('../../../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
+}));
+
 jest.mock('../../../modules', () => ({
     ...jest.requireActual('../../../modules'),
     CashierLocked: jest.fn(({ children }) => <>{children}</>),
@@ -32,10 +37,6 @@ jest.mock('../../../screens', () => ({
     WithdrawalNoBalance: jest.fn(() => <div>WithdrawalNoBalance</div>),
 }));
 
-jest.mock('@deriv-com/ui', () => ({
-    Loader: jest.fn(() => <div>Loading...</div>),
-}));
-
 const mockSwitchAccount = jest.fn();
 jest.mock('@deriv/api-v2', () => ({
     ...jest.requireActual('@deriv/api-v2'),

diff --git a/packages/wallets/src/features/cashier/modules/CashierLocked/CashierLocked.tsx b/packages/wallets/src/features/cashier/modules/CashierLocked/CashierLocked.tsx
@@ -8,7 +8,8 @@ import {
     usePOI,
 } from '@deriv/api-v2';
 import { Localize } from '@deriv-com/translations';
-import { ActionScreen, Loader } from '@deriv-com/ui';
+import { ActionScreen } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../components';
 import getCashierLockedDesc, { getSystemMaintenanceContent } from './CashierLockedContent';
 import './CashierLocked.scss';
 
@@ -79,7 +80,7 @@ const CashierLocked: React.FC<TCashierLockedProps> = ({ children, module }) => {
     });
 
     if (isLoading) {
-        return <Loader />;
+        return <WalletLoader />;
     }
 
     if (isSystemMaintenance && systemMaintenanceContent) {

diff --git a/packages/wallets/src/features/cashier/modules/CashierLocked/__tests__/CashierLocked.spec.tsx b/packages/wallets/src/features/cashier/modules/CashierLocked/__tests__/CashierLocked.spec.tsx
@@ -20,9 +20,9 @@ jest.mock('@deriv/api-v2', () => ({
     usePOI: jest.fn(),
 }));
 
-jest.mock('@deriv-com/ui', () => ({
-    ...jest.requireActual('@deriv-com/ui'),
-    Loader: jest.fn(() => <div>Loading...</div>),
+jest.mock('../../../../../components', () => ({
+    ...jest.requireActual('../../../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
 }));
 
 jest.mock('../CashierLockedContent', () => ({

diff --git a/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.tsx b/packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useActiveWalletAccount, useCurrencyConfig, useDepositCryptoAddress } from '@deriv/api-v2';
-import { Divider, Loader, useDevice } from '@deriv-com/ui';
+import { Divider, useDevice } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../components';
 import { isServerError } from '../../../../utils/utils';
 import { DepositErrorScreen } from '../../screens';
 import { TransactionStatus } from '../TransactionStatus';
@@ -21,7 +22,7 @@ const DepositCrypto = () => {
     const isTUSDT = activeWallet?.currency && getConfig(activeWallet.currency)?.is_tUSDT;
     const isOnrampAvailable = activeWallet?.currency_config && activeWallet.currency_config.platform.ramp.length > 0;
 
-    if (isLoading) return <Loader />;
+    if (isLoading) return <WalletLoader />;
 
     if (isServerError(depositCryptoError)) {
         return <DepositErrorScreen error={depositCryptoError} />;

diff --git a/packages/wallets/src/features/cashier/modules/DepositFiat/DepositFiat.tsx b/packages/wallets/src/features/cashier/modules/DepositFiat/DepositFiat.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useAuthorize, useCashierFiatAddress } from '@deriv/api-v2';
-import { Loader } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../components';
 import { isServerError } from '../../../../utils/utils';
 import { DepositErrorScreen } from '../../screens';
 import './DepositFiat.scss';
@@ -22,15 +22,15 @@ const DepositFiat: React.FC = () => {
         }
     }, [isAuthorizeSuccess, mutateDepositFiat]);
 
-    if (isDepositFiatLoading) return <Loader />;
+    if (isDepositFiatLoading) return <WalletLoader />;
 
     if (isServerError(depositFiatError)) {
         return <DepositErrorScreen error={depositFiatError} />;
     }
 
     return (
         <React.Fragment>
-            {isIframeLoading && <Loader />}
+            {isIframeLoading && <WalletLoader />}
             {iframeUrl && (
                 <iframe
                     className='wallets-deposit-fiat__iframe'

diff --git a/packages/wallets/src/features/cashier/modules/DepositFiat/__tests__/DepositFiat.spec.tsx b/packages/wallets/src/features/cashier/modules/DepositFiat/__tests__/DepositFiat.spec.tsx
@@ -8,8 +8,9 @@ jest.mock('@deriv/api-v2', () => ({
     useCashierFiatAddress: jest.fn(),
 }));
 
-jest.mock('@deriv-com/ui', () => ({
-    Loader: jest.fn(() => <div>Loading...</div>),
+jest.mock('../../../../../components', () => ({
+    ...jest.requireActual('../../../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
 }));
 
 jest.mock('../../../screens', () => ({

diff --git a/packages/wallets/src/features/cashier/modules/DepositLocked/DepositLocked.tsx b/packages/wallets/src/features/cashier/modules/DepositLocked/DepositLocked.tsx
@@ -8,7 +8,8 @@ import {
     useSettings,
 } from '@deriv/api-v2';
 import { Localize } from '@deriv-com/translations';
-import { ActionScreen, Loader } from '@deriv-com/ui';
+import { ActionScreen } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../components';
 import getDepositLockedDesc from './DepositLockedContent';
 import './DepositLocked.scss';
 
@@ -42,7 +43,7 @@ const DepositLocked: React.FC<React.PropsWithChildren> = ({ children }) => {
     const tradingExperienceNotComplete = accountStatus?.is_trading_experience_not_complete;
 
     if (isAccountStatusLoading) {
-        return <Loader />;
+        return <WalletLoader />;
     }
 
     if (isDepositLocked) {

diff --git a/packages/wallets/src/features/cashier/modules/DepositLocked/__tests__/DepositLocked.spec.tsx b/packages/wallets/src/features/cashier/modules/DepositLocked/__tests__/DepositLocked.spec.tsx
@@ -21,9 +21,9 @@ jest.mock('@deriv/api-v2', () => ({
     useWebsiteStatus: jest.fn(),
 }));
 
-jest.mock('@deriv-com/ui', () => ({
-    ...jest.requireActual('@deriv-com/ui'),
-    Loader: jest.fn(() => <div>Loading...</div>),
+jest.mock('../../../../../components', () => ({
+    ...jest.requireActual('../../../../../components'),
+    WalletLoader: () => <div>Loading...</div>,
 }));
 
 jest.mock('../DepositLockedContent', () => ({

diff --git a/packages/wallets/src/features/cashier/modules/ResetBalance/ResetBalance.tsx b/packages/wallets/src/features/cashier/modules/ResetBalance/ResetBalance.tsx
@@ -3,7 +3,8 @@ import { useHistory } from 'react-router-dom';
 import { useActiveWalletAccount, useMutation } from '@deriv/api-v2';
 import { DerivLightDemoResetBalanceIcon, DerivLightDemoResetBalanceSuccessfulIcon } from '@deriv/quill-icons';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { ActionScreen, Button, Loader } from '@deriv-com/ui';
+import { ActionScreen, Button } from '@deriv-com/ui';
+import { WalletLoader } from '../../../../components';
 import useAllBalanceSubscription from '../../../../hooks/useAllBalanceSubscription';
 
 const ResetBalance = () => {
@@ -21,7 +22,7 @@ const ResetBalance = () => {
     const isResetBalanceAvailable = balanceData && balanceData?.[activeWallet?.loginid ?? '']?.balance < 10000;
 
     if (isBalanceLoading) {
-        return <Loader />;
+        return <WalletLoader />;
     }
 
     if (isResetBalanceSuccess) {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as WalletLoader } from './WalletLoader';