Skip to content

Commit 48d0f0c

Browse files
heorhi-derivjim-deriv
heorhi-deriv
and
jim-deriv
authored
feat(wallets): replace Loader with WalletLoader component across the application (#17864)
Co-authored-by: Jim Daniels Wasswa <[email protected]>
1 parent 1ebece6 commit 48d0f0c

File tree

44 files changed

+211
-98
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+211
-98
lines changed

‎packages/wallets/src/App.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { lazy, useMemo, useState } from 'react';
22
import { APIProvider } from '@deriv/api-v2';
33
import { initializeI18n, TranslationProvider } from '@deriv-com/translations';
4-
import { Loader } from '@deriv-com/ui';
54
import { ModalProvider } from './components/ModalProvider';
65
import useLanguage from './hooks/useLanguage';
76
import AppContent from './AppContent';
87
import WalletsAuthProvider from './AuthProvider';
8+
import { WalletLoader } from './components';
99
import { TLanguageType } from './types';
1010
import './styles/fonts.scss';
1111
import './index.scss';
@@ -47,7 +47,7 @@ const App: React.FC<TProps> = ({
4747
<APIProvider platform='wallets' standalone>
4848
<WalletsAuthProvider logout={logout}>
4949
<TranslationProvider defaultLang={defaultLanguage} i18nInstance={i18nInstance}>
50-
<React.Suspense fallback={<Loader />}>
50+
<React.Suspense fallback={<WalletLoader />}>
5151
<ModalProvider>
5252
{!isWalletsOnboardingTourGuideVisible && Notifications && <Notifications />}
5353
<AppContent
@@ -57,7 +57,7 @@ const App: React.FC<TProps> = ({
5757
</ModalProvider>
5858
</React.Suspense>
5959
{isWalletsOnboardingTourGuideVisible && (
60-
<React.Suspense fallback={<Loader />}>
60+
<React.Suspense fallback={<WalletLoader />}>
6161
<LazyWalletTourGuide
6262
onWalletsOnboardingTourGuideCloseHandler={onWalletsOnboardingTourGuideCloseHandler}
6363
/>

‎packages/wallets/src/components/Base/WalletLoader/WalletLoader.scss

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/** @define barspinner */
2+
.wallets-barspinner {
3+
margin: auto;
4+
width: 6rem;
5+
height: 2rem;
6+
white-space: nowrap;
7+
8+
&__rect {
9+
margin: 0.4rem;
10+
border-radius: 20px;
11+
height: 40%;
12+
width: 0.6rem;
13+
display: inline-block;
14+
@include createBarspinnerAnimation(5, 1.2s, 0.1);
15+
}
16+
}
17+
18+
@keyframes sk-stretchdelay {
19+
0%,
20+
40%,
21+
100% {
22+
transform: scaleY(1);
23+
}
24+
20% {
25+
transform: scaleY(2);
26+
}
27+
}
28+
29+
/** @define initial-loader */
30+
.wallets-initial-loader {
31+
width: 100%;
32+
height: 100%;
33+
justify-content: center;
34+
align-items: center;
35+
flex-direction: column;
36+
display: flex;
37+
background: transparent;
38+
39+
&--fullscreen {
40+
position: absolute;
41+
top: 50%;
42+
left: 50%;
43+
transform: translate(-50%, -50%);
44+
}
45+
46+
&__barspinner {
47+
margin: 5rem auto;
48+
49+
&--rect {
50+
background-color: var(--brand-secondary);
51+
}
52+
}
53+
}

‎packages/wallets/src/components/Base/WalletLoader/WalletLoader.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from 'react';
2+
import classNames from 'classnames';
3+
import './WalletLoader.scss';
4+
5+
type TWalletLoaderProps = {
6+
className?: string;
7+
isFullScreen?: boolean;
8+
};
9+
10+
const WalletLoader: React.FC<TWalletLoaderProps> = ({ className, isFullScreen = true }) => {
11+
return (
12+
<div
13+
className={classNames(
14+
'wallets-initial-loader',
15+
{
16+
'wallets-initial-loader--fullscreen': isFullScreen,
17+
},
18+
className
19+
)}
20+
data-testid='dt_initial_loader'
21+
>
22+
<div className={classNames('wallets-initial-loader__barspinner', 'wallets-barspinner')}>
23+
{Array.from(new Array(5)).map((_, idx) => (
24+
<div
25+
className={`wallets-initial-loader__barspinner--rect wallets-barspinner__rect wallets-barspinner__rect--${
26+
idx + 1
27+
} rect${idx + 1}`}
28+
key={idx}
29+
/>
30+
))}
31+
</div>
32+
</div>
33+
);
34+
};
35+
36+
export default WalletLoader;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as WalletLoader } from './WalletLoader';

‎packages/wallets/src/components/Base/WalletPasswordFieldLazy/WalletPasswordFieldLazy.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { lazy, Suspense } from 'react';
2-
import { Loader } from '@deriv-com/ui';
2+
import { WalletLoader } from '../WalletLoader';
33
import { WalletTextFieldProps } from '../WalletTextField/WalletTextField';
44

55
export interface WalletPasswordFieldProps extends WalletTextFieldProps {
@@ -16,7 +16,7 @@ const WalletPasswordFieldLazyContainer = lazy(
1616
) as React.FC<WalletPasswordFieldProps>;
1717

1818
const WalletPasswordFieldLazy: React.FC<WalletPasswordFieldProps> = props => (
19-
<Suspense fallback={<Loader isFullScreen={false} />}>
19+
<Suspense fallback={<WalletLoader isFullScreen={false} />}>
2020
<WalletPasswordFieldLazyContainer {...props} />
2121
</Suspense>
2222
);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,6 @@ export * from './WalletButtonGroup';
99
export * from './WalletClipboard';
1010
export * from './WalletDialog';
1111
export * from './WalletLink';
12+
export * from './WalletLoader';
1213
export * from './WalletPasswordFieldLazy';
1314
export * from './WalletTextField';

‎packages/wallets/src/features/cashier/WalletCashier.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useCallback, useState } from 'react';
22
import { useActiveWalletAccount } from '@deriv/api-v2';
3-
import { Loader } from '@deriv-com/ui';
3+
import { WalletLoader } from '../../components';
44
import { WalletCashierContent, WalletCashierHeader } from './components';
55
import { CashierScrollContext } from './context';
66
import './WalletCashier.scss';
@@ -21,7 +21,7 @@ const WalletCashier = () => {
2121
[onCashierScroll]
2222
);
2323

24-
if (isLoading) return <Loader />;
24+
if (isLoading) return <WalletLoader />;
2525

2626
return (
2727
<div className='wallets-cashier'>

‎packages/wallets/src/features/cashier/__tests__/WalletCashier.spec.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ jest.mock('@deriv/api-v2', () => ({
88
useActiveWalletAccount: jest.fn(),
99
}));
1010

11-
jest.mock('@deriv-com/ui', () => ({
12-
Loader: jest.fn(() => <div>Loading...</div>),
11+
jest.mock('../../../components', () => ({
12+
...jest.requireActual('../../../components'),
13+
WalletLoader: () => <div>Loading...</div>,
1314
}));
1415

1516
jest.mock('../components/', () => ({

‎packages/wallets/src/features/cashier/flows/WalletDeposit/WalletDeposit.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from 'react';
22
import { useActiveWalletAccount } from '@deriv/api-v2';
3-
import { Loader } from '@deriv-com/ui';
3+
import { WalletLoader } from '../../../../components';
44
import { DepositCryptoModule, DepositFiatModule } from '../../modules';
55

66
const WalletDeposit = () => {
77
const { data: activeWallet } = useActiveWalletAccount();
88

9-
if (!activeWallet?.currency_config) return <Loader />;
9+
if (!activeWallet?.currency_config) return <WalletLoader />;
1010

1111
const isCryptoProvider = activeWallet.currency_config.platform.cashier.includes('crypto');
1212

‎packages/wallets/src/features/cashier/flows/WalletTransfer/WalletTransfer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useCallback, useEffect } from 'react';
22
import { useTransferBetweenAccounts } from '@deriv/api-v2';
3-
import { Loader } from '@deriv-com/ui';
3+
import { WalletLoader } from '../../../../components';
44
import { TransferModule } from '../../modules';
55
import { TransferNotAvailable } from '../../screens/TransferNotAvailable';
66

@@ -13,7 +13,7 @@ const WalletTransfer = () => {
1313
requestTransferAccounts();
1414
}, [requestTransferAccounts]);
1515

16-
if (isTransferAccountsLoading || !data?.accounts) return <Loader />;
16+
if (isTransferAccountsLoading || !data?.accounts) return <WalletLoader />;
1717

1818
return (
1919
<TransferNotAvailable accounts={data.accounts}>

‎packages/wallets/src/features/cashier/flows/WalletTransfer/__tests__/WalletTransfer.spec.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import { render, screen } from '@testing-library/react';
44
import { CashierLocked } from '../../../modules';
55
import WalletTransfer from '../WalletTransfer';
66

7-
jest.mock('@deriv-com/ui', () => ({
8-
Loader: jest.fn(() => <div>Loading...</div>),
7+
jest.mock('../../../../../components', () => ({
8+
...jest.requireActual('../../../../../components'),
9+
WalletLoader: () => <div>Loading...</div>,
910
}));
1011

1112
jest.mock('../../../modules', () => ({

‎packages/wallets/src/features/cashier/flows/WalletWithdrawal/WalletWithdrawal.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect, useState } from 'react';
22
import { useActiveWalletAccount, useAuthorize } from '@deriv/api-v2';
3-
import { Loader } from '@deriv-com/ui';
3+
import { WalletLoader } from '../../../../components';
44
import useAllBalanceSubscription from '../../../../hooks/useAllBalanceSubscription';
55
import { WithdrawalCryptoModule, WithdrawalFiatModule, WithdrawalVerificationModule } from '../../modules';
66
import { WithdrawalNoBalance } from '../../screens';
@@ -42,7 +42,7 @@ const WalletWithdrawal = () => {
4242
}, [activeWallet?.loginid, switchAccount]);
4343

4444
if (!activeWallet || isBalanceLoading) {
45-
return <Loader />;
45+
return <WalletLoader />;
4646
}
4747

4848
if (balanceData && !isBalanceLoading && balanceData[activeWallet?.loginid ?? 'USD'].balance <= 0) {

‎packages/wallets/src/features/cashier/flows/WalletWithdrawal/__tests__/WalletWithdrawal.spec.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ import useAllBalanceSubscription from '../../../../../hooks/useAllBalanceSubscri
55
import { CashierLocked, WithdrawalLocked } from '../../../modules';
66
import WalletWithdrawal from '../WalletWithdrawal';
77

8+
jest.mock('../../../../../components', () => ({
9+
...jest.requireActual('../../../../../components'),
10+
WalletLoader: () => <div>Loading...</div>,
11+
}));
12+
813
jest.mock('../../../modules', () => ({
914
...jest.requireActual('../../../modules'),
1015
CashierLocked: jest.fn(({ children }) => <>{children}</>),
@@ -32,10 +37,6 @@ jest.mock('../../../screens', () => ({
3237
WithdrawalNoBalance: jest.fn(() => <div>WithdrawalNoBalance</div>),
3338
}));
3439

35-
jest.mock('@deriv-com/ui', () => ({
36-
Loader: jest.fn(() => <div>Loading...</div>),
37-
}));
38-
3940
const mockSwitchAccount = jest.fn();
4041
jest.mock('@deriv/api-v2', () => ({
4142
...jest.requireActual('@deriv/api-v2'),

‎packages/wallets/src/features/cashier/modules/CashierLocked/CashierLocked.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import {
88
usePOI,
99
} from '@deriv/api-v2';
1010
import { Localize } from '@deriv-com/translations';
11-
import { ActionScreen, Loader } from '@deriv-com/ui';
11+
import { ActionScreen } from '@deriv-com/ui';
12+
import { WalletLoader } from '../../../../components';
1213
import getCashierLockedDesc, { getSystemMaintenanceContent } from './CashierLockedContent';
1314
import './CashierLocked.scss';
1415

@@ -79,7 +80,7 @@ const CashierLocked: React.FC<TCashierLockedProps> = ({ children, module }) => {
7980
});
8081

8182
if (isLoading) {
82-
return <Loader />;
83+
return <WalletLoader />;
8384
}
8485

8586
if (isSystemMaintenance && systemMaintenanceContent) {

‎packages/wallets/src/features/cashier/modules/CashierLocked/__tests__/CashierLocked.spec.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ jest.mock('@deriv/api-v2', () => ({
2020
usePOI: jest.fn(),
2121
}));
2222

23-
jest.mock('@deriv-com/ui', () => ({
24-
...jest.requireActual('@deriv-com/ui'),
25-
Loader: jest.fn(() => <div>Loading...</div>),
23+
jest.mock('../../../../../components', () => ({
24+
...jest.requireActual('../../../../../components'),
25+
WalletLoader: () => <div>Loading...</div>,
2626
}));
2727

2828
jest.mock('../CashierLockedContent', () => ({

‎packages/wallets/src/features/cashier/modules/DepositCrypto/DepositCrypto.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { useActiveWalletAccount, useCurrencyConfig, useDepositCryptoAddress } from '@deriv/api-v2';
3-
import { Divider, Loader, useDevice } from '@deriv-com/ui';
3+
import { Divider, useDevice } from '@deriv-com/ui';
4+
import { WalletLoader } from '../../../../components';
45
import { isServerError } from '../../../../utils/utils';
56
import { DepositErrorScreen } from '../../screens';
67
import { TransactionStatus } from '../TransactionStatus';
@@ -21,7 +22,7 @@ const DepositCrypto = () => {
2122
const isTUSDT = activeWallet?.currency && getConfig(activeWallet.currency)?.is_tUSDT;
2223
const isOnrampAvailable = activeWallet?.currency_config && activeWallet.currency_config.platform.ramp.length > 0;
2324

24-
if (isLoading) return <Loader />;
25+
if (isLoading) return <WalletLoader />;
2526

2627
if (isServerError(depositCryptoError)) {
2728
return <DepositErrorScreen error={depositCryptoError} />;

‎packages/wallets/src/features/cashier/modules/DepositFiat/DepositFiat.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect, useState } from 'react';
22
import { useAuthorize, useCashierFiatAddress } from '@deriv/api-v2';
3-
import { Loader } from '@deriv-com/ui';
3+
import { WalletLoader } from '../../../../components';
44
import { isServerError } from '../../../../utils/utils';
55
import { DepositErrorScreen } from '../../screens';
66
import './DepositFiat.scss';
@@ -22,15 +22,15 @@ const DepositFiat: React.FC = () => {
2222
}
2323
}, [isAuthorizeSuccess, mutateDepositFiat]);
2424

25-
if (isDepositFiatLoading) return <Loader />;
25+
if (isDepositFiatLoading) return <WalletLoader />;
2626

2727
if (isServerError(depositFiatError)) {
2828
return <DepositErrorScreen error={depositFiatError} />;
2929
}
3030

3131
return (
3232
<React.Fragment>
33-
{isIframeLoading && <Loader />}
33+
{isIframeLoading && <WalletLoader />}
3434
{iframeUrl && (
3535
<iframe
3636
className='wallets-deposit-fiat__iframe'

‎packages/wallets/src/features/cashier/modules/DepositFiat/__tests__/DepositFiat.spec.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ jest.mock('@deriv/api-v2', () => ({
88
useCashierFiatAddress: jest.fn(),
99
}));
1010

11-
jest.mock('@deriv-com/ui', () => ({
12-
Loader: jest.fn(() => <div>Loading...</div>),
11+
jest.mock('../../../../../components', () => ({
12+
...jest.requireActual('../../../../../components'),
13+
WalletLoader: () => <div>Loading...</div>,
1314
}));
1415

1516
jest.mock('../../../screens', () => ({

‎packages/wallets/src/features/cashier/modules/DepositLocked/DepositLocked.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import {
88
useSettings,
99
} from '@deriv/api-v2';
1010
import { Localize } from '@deriv-com/translations';
11-
import { ActionScreen, Loader } from '@deriv-com/ui';
11+
import { ActionScreen } from '@deriv-com/ui';
12+
import { WalletLoader } from '../../../../components';
1213
import getDepositLockedDesc from './DepositLockedContent';
1314
import './DepositLocked.scss';
1415

@@ -42,7 +43,7 @@ const DepositLocked: React.FC<React.PropsWithChildren> = ({ children }) => {
4243
const tradingExperienceNotComplete = accountStatus?.is_trading_experience_not_complete;
4344

4445
if (isAccountStatusLoading) {
45-
return <Loader />;
46+
return <WalletLoader />;
4647
}
4748

4849
if (isDepositLocked) {

‎packages/wallets/src/features/cashier/modules/DepositLocked/__tests__/DepositLocked.spec.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@ jest.mock('@deriv/api-v2', () => ({
2121
useWebsiteStatus: jest.fn(),
2222
}));
2323

24-
jest.mock('@deriv-com/ui', () => ({
25-
...jest.requireActual('@deriv-com/ui'),
26-
Loader: jest.fn(() => <div>Loading...</div>),
24+
jest.mock('../../../../../components', () => ({
25+
...jest.requireActual('../../../../../components'),
26+
WalletLoader: () => <div>Loading...</div>,
2727
}));
2828

2929
jest.mock('../DepositLockedContent', () => ({

‎packages/wallets/src/features/cashier/modules/ResetBalance/ResetBalance.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { useHistory } from 'react-router-dom';
33
import { useActiveWalletAccount, useMutation } from '@deriv/api-v2';
44
import { DerivLightDemoResetBalanceIcon, DerivLightDemoResetBalanceSuccessfulIcon } from '@deriv/quill-icons';
55
import { Localize, useTranslations } from '@deriv-com/translations';
6-
import { ActionScreen, Button, Loader } from '@deriv-com/ui';
6+
import { ActionScreen, Button } from '@deriv-com/ui';
7+
import { WalletLoader } from '../../../../components';
78
import useAllBalanceSubscription from '../../../../hooks/useAllBalanceSubscription';
89

910
const ResetBalance = () => {
@@ -21,7 +22,7 @@ const ResetBalance = () => {
2122
const isResetBalanceAvailable = balanceData && balanceData?.[activeWallet?.loginid ?? '']?.balance < 10000;
2223

2324
if (isBalanceLoading) {
24-
return <Loader />;
25+
return <WalletLoader />;
2526
}
2627

2728
if (isResetBalanceSuccess) {

0 commit comments

Comments
 (0)