From 0f47fbd39fd288e273fea156939753b0dc6bba62 Mon Sep 17 00:00:00 2001 From: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com> Date: Tue, 24 Oct 2023 16:44:43 +0800 Subject: [PATCH] thisyahlen/chore: update proper type and cleanup (#10916) * chore: update proper type and cleanup * chore: cleanup * chore: add more proper types --- .../DerivAppsSection/DerivAppsGetAccount.tsx | 4 +-- .../DerivAppsTradingAccount.tsx | 5 ++-- .../OptionsAndMultipliersListing.tsx | 2 +- .../WalletAddMoreCurrencyIcon.tsx | 5 ++-- .../src/components/WalletCard/WalletCard.tsx | 4 +-- .../WalletCardIcon/WalletCardIcon.tsx | 3 +- .../WalletCurrencyCard/WalletCurrencyCard.tsx | 7 +++-- .../WalletGradientBackground.tsx | 5 ++-- .../WalletListCard/WalletListCard.tsx | 15 +++++----- .../WalletListCardActions.tsx | 7 +++-- .../WalletListCardBadge.tsx | 5 ++-- .../WalletListCardIBalance.tsx | 3 +- .../WalletListCardIDetails.tsx | 13 +++++---- .../WalletListCardTitle.tsx | 6 ++-- .../WalletMarketCurrencyIcon.tsx | 19 +++++++----- .../WalletNoWalletFoundState.tsx | 2 +- .../WalletTourGuide/WalletTourGuide.tsx | 2 +- .../WalletTourGuideSettings.tsx | 4 +-- .../WalletsAccordion/WalletsAccordion.tsx | 5 ++-- .../WalletsAddMoreCard/WalletsAddMoreCard.tsx | 8 ++--- .../WalletsAddMoreCardBanner.tsx | 8 ++--- .../WalletsAddMoreCardContent.tsx | 7 ++++- .../WalletsAddMoreCarousel.tsx | 2 +- .../features/cfd/screens/Success/Success.tsx | 7 +++-- packages/wallets/src/types.ts | 29 +++++++++++++++---- 25 files changed, 110 insertions(+), 67 deletions(-) diff --git a/packages/wallets/src/components/DerivAppsSection/DerivAppsGetAccount.tsx b/packages/wallets/src/components/DerivAppsSection/DerivAppsGetAccount.tsx index f55e8ccbeb3b..1efce19fc388 100644 --- a/packages/wallets/src/components/DerivAppsSection/DerivAppsGetAccount.tsx +++ b/packages/wallets/src/components/DerivAppsSection/DerivAppsGetAccount.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import { useActiveWalletAccount } from '@deriv/api'; import DerivApps from '../../public/images/deriv-apps.svg'; +import { THooks } from '../../types'; import { WalletButton, WalletText } from '../Base'; type TProps = { - isMaltaWallet?: NonNullable['data']>['is_malta_wallet']; + isMaltaWallet?: THooks.ActiveWalletAccount['is_malta_wallet']; }; const DerivAppsGetAccount: React.FC = ({ isMaltaWallet }) => { diff --git a/packages/wallets/src/components/DerivAppsSection/DerivAppsTradingAccount.tsx b/packages/wallets/src/components/DerivAppsSection/DerivAppsTradingAccount.tsx index 3be582203b9a..e4e0eb5a460c 100644 --- a/packages/wallets/src/components/DerivAppsSection/DerivAppsTradingAccount.tsx +++ b/packages/wallets/src/components/DerivAppsSection/DerivAppsTradingAccount.tsx @@ -1,11 +1,12 @@ import React from 'react'; import DerivApps from '../../public/images/deriv-apps.svg'; +import { THooks } from '../../types'; import { WalletButton, WalletText } from '../Base'; import { WalletListCardBadge } from '../WalletListCardBadge'; type TProps = { - isDemo?: boolean; - label?: string; + isDemo?: THooks.ActiveWalletAccount['is_virtual']; + label?: THooks.ActiveWalletAccount['landing_company_name']; tradingAccountLoginId?: string; }; diff --git a/packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx b/packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx index 330cc07d29cf..7bd6a0f3b44f 100644 --- a/packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx +++ b/packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx @@ -45,7 +45,7 @@ const optionsAndMultipliers = [ }, ]; -const OptionsAndMultipliersListing = () => { +const OptionsAndMultipliersListing: React.FC = () => { const history = useHistory(); const { isMobile } = useDevice(); const { data } = useActiveWalletAccount(); diff --git a/packages/wallets/src/components/WalletAddMoreCurrencyIcon/WalletAddMoreCurrencyIcon.tsx b/packages/wallets/src/components/WalletAddMoreCurrencyIcon/WalletAddMoreCurrencyIcon.tsx index 3824e97871e6..ad2f91b0c128 100644 --- a/packages/wallets/src/components/WalletAddMoreCurrencyIcon/WalletAddMoreCurrencyIcon.tsx +++ b/packages/wallets/src/components/WalletAddMoreCurrencyIcon/WalletAddMoreCurrencyIcon.tsx @@ -8,6 +8,7 @@ import GBPIcon from '../../public/images/currencies/gbp.svg'; import LTCIcon from '../../public/images/currencies/ltc.svg'; import USDIcon from '../../public/images/currencies/usd.svg'; import USDCIcon from '../../public/images/currencies/usdc.svg'; +import { THooks } from '../../types'; const currencies = { aud: AUDIcon, @@ -24,10 +25,10 @@ const currencies = { }; type TWalletCurrencyIconProps = { - currency: string; + currency: THooks.AvailableWallets['currency']; }; -const WalletAddMoreCurrencyIcon = ({ currency }: TWalletCurrencyIconProps) => { +const WalletAddMoreCurrencyIcon: React.FC = ({ currency }) => { const CurrencyIcon = useMemo(() => currencies[currency as keyof typeof currencies], [currency]); if (CurrencyIcon) { diff --git a/packages/wallets/src/components/WalletCard/WalletCard.tsx b/packages/wallets/src/components/WalletCard/WalletCard.tsx index 575b9fdf1270..03bbd7cb9d7a 100644 --- a/packages/wallets/src/components/WalletCard/WalletCard.tsx +++ b/packages/wallets/src/components/WalletCard/WalletCard.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useWalletAccountsList } from '@deriv/api'; +import { THooks } from '../../types'; import { WalletText } from '../Base'; import { WalletCardIcon } from '../WalletCardIcon'; import { WalletGradientBackground } from '../WalletGradientBackground'; @@ -7,7 +7,7 @@ import { WalletListCardBadge } from '../WalletListCardBadge'; import './WalletCard.scss'; type TProps = { - account: NonNullable['data']>[number]; + account: THooks.WalletAccountsList; }; const WalletCard: React.FC = ({ account }) => { diff --git a/packages/wallets/src/components/WalletCardIcon/WalletCardIcon.tsx b/packages/wallets/src/components/WalletCardIcon/WalletCardIcon.tsx index f629ced1e582..880ecf304490 100644 --- a/packages/wallets/src/components/WalletCardIcon/WalletCardIcon.tsx +++ b/packages/wallets/src/components/WalletCardIcon/WalletCardIcon.tsx @@ -9,6 +9,7 @@ import GBP from '../../public/images/gbp.svg'; import LTC from '../../public/images/ltc.svg'; import USD from '../../public/images/usd.svg'; import USDC from '../../public/images/usdc.svg'; +import { TGenericSizes } from '../../types'; const typeToIconMapper = { BTC: Bitcoin, @@ -42,7 +43,7 @@ const typeToWidthMapper = { const typesWithRoundedIcon = ['EUR', 'GBP', 'USD']; type TProps = { - size?: 'lg' | 'md' | 'sm' | 'xl'; + size?: Extract; type: Omit | keyof typeof typeToIconMapper; }; diff --git a/packages/wallets/src/components/WalletCurrencyCard/WalletCurrencyCard.tsx b/packages/wallets/src/components/WalletCurrencyCard/WalletCurrencyCard.tsx index 57cb8f3540c5..4b984ce0b3d4 100644 --- a/packages/wallets/src/components/WalletCurrencyCard/WalletCurrencyCard.tsx +++ b/packages/wallets/src/components/WalletCurrencyCard/WalletCurrencyCard.tsx @@ -1,12 +1,13 @@ import React from 'react'; +import { TGenericSizes, THooks } from '../../types'; import { WalletCardIcon } from '../WalletCardIcon'; import { WalletGradientBackground } from '../WalletGradientBackground'; import './WalletCurrencyCard.scss'; type TProps = { - currency: string; - isDemo?: boolean; - size?: 'lg' | 'md' | 'sm'; + currency: THooks.WalletAccountsList['wallet_currency_type']; + isDemo?: THooks.WalletAccountsList['is_virtual']; + size?: Extract; }; const WalletCurrencyCard: React.FC = ({ currency, isDemo, size = 'lg' }: TProps) => { diff --git a/packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.tsx b/packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.tsx index 5bc6c86d5eb3..1d67c26614fc 100644 --- a/packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.tsx +++ b/packages/wallets/src/components/WalletGradientBackground/WalletGradientBackground.tsx @@ -1,13 +1,14 @@ import React from 'react'; +import { THooks } from '../../types'; import './WalletGradientBackground.scss'; type TProps = { bodyClassName?: string; children: React.ReactNode; - currency: string; + currency: THooks.WalletAccountsList['wallet_currency_type']; device?: 'desktop' | 'mobile'; hasShine?: boolean; - isDemo?: boolean; + isDemo?: THooks.WalletAccountsList['is_virtual']; theme?: 'dark' | 'grey' | 'light'; type?: 'card' | 'header'; }; diff --git a/packages/wallets/src/components/WalletListCard/WalletListCard.tsx b/packages/wallets/src/components/WalletListCard/WalletListCard.tsx index 5e488d892439..3cf1cc2e0bc0 100644 --- a/packages/wallets/src/components/WalletListCard/WalletListCard.tsx +++ b/packages/wallets/src/components/WalletListCard/WalletListCard.tsx @@ -1,17 +1,18 @@ import React from 'react'; +import { THooks } from '../../types'; import { WalletCurrencyCard } from '../WalletCurrencyCard'; import WalletListCardIBalance from '../WalletListCardIBalance/WalletListCardIBalance'; import WalletListCardIDetails from '../WalletListCardIDetails/WalletListCardIDetails'; import './WalletListCard.scss'; type TProps = { - badge?: string; - balance: string; - currency: string; - isActive: boolean; - isDemo: boolean; - loginid: string; - title: string; + badge?: THooks.WalletAccountsList['landing_company_name']; + balance: THooks.WalletAccountsList['display_balance']; + currency: THooks.WalletAccountsList['wallet_currency_type']; + isActive: THooks.WalletAccountsList['is_active']; + isDemo: THooks.WalletAccountsList['is_virtual']; + loginid: THooks.WalletAccountsList['loginid']; + title: Exclude; }; const WalletListCard: React.FC = ({ badge, balance, currency, isActive, isDemo, loginid, title }) => ( diff --git a/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx b/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx index 6a4827123617..901143441d8d 100644 --- a/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx +++ b/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx @@ -6,6 +6,7 @@ import IcCashierAdd from '../../public/images/ic-cashier-deposit.svg'; import IcCashierStatement from '../../public/images/ic-cashier-statement.svg'; import IcCashierTransfer from '../../public/images/ic-cashier-transfer.svg'; import IcCashierWithdrawal from '../../public/images/ic-cashier-withdrawal.svg'; +import { THooks } from '../../types'; import { WalletButton, WalletText } from '../Base'; import './WalletListCardActions.scss'; @@ -43,9 +44,9 @@ const getWalletHeaderButtons = (isDemo: boolean, handleAction?: () => void) => { }; type TProps = { - isActive: boolean; - isDemo: boolean; - loginid: string; + isActive: THooks.WalletAccountsList['is_active']; + isDemo: THooks.WalletAccountsList['is_virtual']; + loginid: THooks.WalletAccountsList['loginid']; }; const WalletListCardActions: React.FC = ({ isActive, isDemo, loginid }) => { diff --git a/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx b/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx index 6ea32f0d3aae..1c5754c38354 100644 --- a/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx +++ b/packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx @@ -1,10 +1,11 @@ import React from 'react'; +import { THooks } from '../../types'; import { WalletText } from '../Base'; import './WalletListCardBadge.scss'; type TProps = { - isDemo?: boolean; - label?: string; + isDemo?: THooks.WalletAccountsList['is_virtual']; + label?: THooks.WalletAccountsList['landing_company_name']; }; const WalletListCardBadge: React.FC = ({ isDemo, label }) => { diff --git a/packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.tsx b/packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.tsx index 0f7725c6cf0b..6334f0324854 100644 --- a/packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.tsx +++ b/packages/wallets/src/components/WalletListCardIBalance/WalletListCardIBalance.tsx @@ -1,9 +1,10 @@ import React from 'react'; +import { THooks } from '../../types'; import { WalletText } from '../Base'; import './WalletListCardIBalance.scss'; type TProps = { - balance: string; + balance: THooks.WalletAccountsList['display_balance']; }; const WalletListCardIBalance: React.FC = ({ balance }) => ( diff --git a/packages/wallets/src/components/WalletListCardIDetails/WalletListCardIDetails.tsx b/packages/wallets/src/components/WalletListCardIDetails/WalletListCardIDetails.tsx index b1d026f4e5cb..7bc075de5de4 100644 --- a/packages/wallets/src/components/WalletListCardIDetails/WalletListCardIDetails.tsx +++ b/packages/wallets/src/components/WalletListCardIDetails/WalletListCardIDetails.tsx @@ -1,16 +1,17 @@ import React from 'react'; +import { THooks } from '../../types'; import WalletListCardActions from '../WalletListCardActions/WalletListCardActions'; import WalletListCardBadge from '../WalletListCardBadge/WalletListCardBadge'; import WalletListCardTitle from '../WalletListCardTitle/WalletListCardTitle'; import './WalletListCardIDetails.scss'; type TProps = { - badge?: string; - currency: string; - isActive: boolean; - isDemo: boolean; - loginid: string; - title: string; + badge?: THooks.WalletAccountsList['landing_company_name']; + currency: THooks.WalletAccountsList['wallet_currency_type']; + isActive: THooks.WalletAccountsList['is_active']; + isDemo: THooks.WalletAccountsList['is_virtual']; + loginid: THooks.WalletAccountsList['loginid']; + title: Exclude; }; const WalletListCardIDetails: React.FC = ({ badge, isActive, isDemo, loginid, title }) => ( diff --git a/packages/wallets/src/components/WalletListCardTitle/WalletListCardTitle.tsx b/packages/wallets/src/components/WalletListCardTitle/WalletListCardTitle.tsx index a3650eb2fd08..017bba51f1fb 100644 --- a/packages/wallets/src/components/WalletListCardTitle/WalletListCardTitle.tsx +++ b/packages/wallets/src/components/WalletListCardTitle/WalletListCardTitle.tsx @@ -1,14 +1,14 @@ import React from 'react'; -import { useWalletAccountsList } from '@deriv/api'; +import { THooks } from '../../types'; import { WalletText } from '../Base'; type TProps = { - title: NonNullable['data']>[0]['currency']; + title: THooks.WalletAccountsList['currency']; }; const WalletListCardTitle: React.FC = ({ title }) => { return ( - + {title} Wallet ); diff --git a/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx b/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx index 488b10e11099..a4708a760803 100644 --- a/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx +++ b/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx @@ -1,13 +1,13 @@ import React, { ComponentType, SVGAttributes } from 'react'; -import type { useSortedMT5Accounts } from '@deriv/api'; +import useDevice from '../../hooks/useDevice'; import CTraderIcon from '../../public/images/ctrader.svg'; import DerivXIcon from '../../public/images/derivx.svg'; import DerivedMT5Icon from '../../public/images/mt5-derived.svg'; import FinancialMT5Icon from '../../public/images/mt5-financial.svg'; import SwapFreeMT5Icon from '../../public/images/mt5-swap-free.svg'; +import { THooks, TPlatforms } from '../../types'; import { WalletCardIcon } from '../WalletCardIcon'; import { WalletGradientBackground } from '../WalletGradientBackground'; -import useDevice from '../../hooks/useDevice'; import './WalletMarketCurrencyIcon.scss'; const marketTypeToIconMapper: Record>> = { @@ -22,13 +22,18 @@ const marketTypeToPlatformIconMapper: Record['data']>[number]['market_type'], undefined>; - platform: string; + currency: Exclude; + isDemo: THooks.ActiveWalletAccount['is_virtual']; + marketType: Exclude; + platform: TPlatforms.All; }; -const WalletMarketCurrencyIcon = ({ currency, isDemo, marketType, platform }: TWalletMarketCurrencyIconProps) => { +const WalletMarketCurrencyIcon: React.FC = ({ + currency, + isDemo, + marketType, + platform, +}) => { const { isMobile } = useDevice(); const MarketTypeIcon = diff --git a/packages/wallets/src/components/WalletNoWalletFoundState/WalletNoWalletFoundState.tsx b/packages/wallets/src/components/WalletNoWalletFoundState/WalletNoWalletFoundState.tsx index 9492e4ad59a6..4fe80b99d683 100644 --- a/packages/wallets/src/components/WalletNoWalletFoundState/WalletNoWalletFoundState.tsx +++ b/packages/wallets/src/components/WalletNoWalletFoundState/WalletNoWalletFoundState.tsx @@ -5,7 +5,7 @@ import NoWalletIcon from '../../public/images/no-wallet.svg'; import { WalletButton, WalletText } from '../Base'; import './WalletNoWalletFoundState.scss'; -const WalletNoWalletFoundState = () => { +const WalletNoWalletFoundState: React.FC = () => { const { isMobile } = useDevice(); const history = useHistory(); diff --git a/packages/wallets/src/components/WalletTourGuide/WalletTourGuide.tsx b/packages/wallets/src/components/WalletTourGuide/WalletTourGuide.tsx index 4531b603e89a..dbf2002fd0ad 100644 --- a/packages/wallets/src/components/WalletTourGuide/WalletTourGuide.tsx +++ b/packages/wallets/src/components/WalletTourGuide/WalletTourGuide.tsx @@ -8,7 +8,7 @@ type TProps = { setIsStarted?: (value: boolean) => void; }; -const WalletTourGuide = ({ isStarted = false, setIsStarted }: TProps) => { +const WalletTourGuide: React.FC = ({ isStarted, setIsStarted }) => { const callbackHandle = (data: CallBackProps) => { if (data.action === 'reset') { setIsStarted?.(false); diff --git a/packages/wallets/src/components/WalletTourGuide/WalletTourGuideSettings.tsx b/packages/wallets/src/components/WalletTourGuide/WalletTourGuideSettings.tsx index 9fbd4a0d4fc3..ad69744adb4f 100644 --- a/packages/wallets/src/components/WalletTourGuide/WalletTourGuideSettings.tsx +++ b/packages/wallets/src/components/WalletTourGuide/WalletTourGuideSettings.tsx @@ -33,7 +33,7 @@ export const tourStepConfig: Step[] = [ }, ]; -export const TooltipComponent = ({ +export const TooltipComponent: React.FC = ({ backProps, closeProps, continuous, @@ -42,7 +42,7 @@ export const TooltipComponent = ({ primaryProps, step, tooltipProps, -}: TooltipRenderProps) => { +}) => { return (
{step?.title as React.ReactNode}
diff --git a/packages/wallets/src/components/WalletsAccordion/WalletsAccordion.tsx b/packages/wallets/src/components/WalletsAccordion/WalletsAccordion.tsx index 2299a8edfc94..66be0f4bc246 100644 --- a/packages/wallets/src/components/WalletsAccordion/WalletsAccordion.tsx +++ b/packages/wallets/src/components/WalletsAccordion/WalletsAccordion.tsx @@ -1,10 +1,11 @@ import React, { useEffect, useRef } from 'react'; import IcDropdown from '../../public/images/ic-dropdown.svg'; +import { THooks } from '../../types'; import './WalletsAccordion.scss'; type TProps = { - isDemo?: boolean; - isOpen?: boolean; + isDemo?: THooks.WalletAccountsList['is_virtual']; + isOpen?: THooks.WalletAccountsList['is_active']; onToggle?: () => void; renderHeader: () => React.ReactNode; }; diff --git a/packages/wallets/src/components/WalletsAddMoreCard/WalletsAddMoreCard.tsx b/packages/wallets/src/components/WalletsAddMoreCard/WalletsAddMoreCard.tsx index 957828f38e14..d51a5c540120 100644 --- a/packages/wallets/src/components/WalletsAddMoreCard/WalletsAddMoreCard.tsx +++ b/packages/wallets/src/components/WalletsAddMoreCard/WalletsAddMoreCard.tsx @@ -1,16 +1,16 @@ import React from 'react'; -import { useAvailableWallets } from '@deriv/api'; +import { THooks } from '../../types'; import { WalletGradientBackground } from '../WalletGradientBackground'; import WalletsAddMoreCardBanner from '../WalletsAddMoreCardBanner'; import WalletsAddMoreCardContent from '../WalletsAddMoreCardContent'; -type TWalletsAddMoreCard = NonNullable['data']>[0]; +type TProps = THooks.AvailableWallets; -const WalletsAddMoreCard = ({ +const WalletsAddMoreCard: React.FC = ({ currency, is_added: isAdded, landing_company_name: landingCompanyName, -}: TWalletsAddMoreCard) => { +}) => { return (
diff --git a/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.tsx b/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.tsx index 7a2253509acd..ea63cef1df67 100644 --- a/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.tsx +++ b/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.tsx @@ -1,17 +1,17 @@ import React from 'react'; -import type { useAvailableWallets } from '@deriv/api'; import CheckIcon from '../../public/images/check.svg'; import PlusIcon from '../../public/images/plus.svg'; +import { THooks } from '../../types'; import { WalletText } from '../Base'; import WalletAddMoreCurrencyIcon from '../WalletAddMoreCurrencyIcon'; -type TWalletsAddMoreCardBannerProps = NonNullable['data']>[0]; +type TProps = THooks.AvailableWallets; -const WalletsAddMoreCardBanner = ({ +const WalletsAddMoreCardBanner: React.FC = ({ currency, is_added: isAdded, landing_company_name: landingCompanyName, -}: TWalletsAddMoreCardBannerProps) => { +}) => { return (
diff --git a/packages/wallets/src/components/WalletsAddMoreCardContent/WalletsAddMoreCardContent.tsx b/packages/wallets/src/components/WalletsAddMoreCardContent/WalletsAddMoreCardContent.tsx index a6c737667952..735ba310bf1c 100644 --- a/packages/wallets/src/components/WalletsAddMoreCardContent/WalletsAddMoreCardContent.tsx +++ b/packages/wallets/src/components/WalletsAddMoreCardContent/WalletsAddMoreCardContent.tsx @@ -1,10 +1,15 @@ import React from 'react'; +import { THooks } from '../../types'; import { WalletText } from '../Base'; type TWalletDescriptionMapper = { [key: string]: string; }; +type TProps = { + currency: Exclude; +}; + const walletDescriptionMapper: TWalletDescriptionMapper = { AUD: 'Deposit and withdraw Australian dollars using credit or debit cards, e-wallets, or bank wires.', BTC: "Deposit and withdraw Bitcoin, the world's most popular cryptocurrency, hosted on the Bitcoin blockchain.", @@ -19,7 +24,7 @@ const walletDescriptionMapper: TWalletDescriptionMapper = { UST: 'Deposit and withdraw Tether Omni, hosted on the Bitcoin blockchain.', }; -const WalletsAddMoreCardContent = ({ currency }: { currency: string }) => { +const WalletsAddMoreCardContent: React.FC = ({ currency }) => { return (
diff --git a/packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.tsx b/packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.tsx index 65ade84d4424..2e1f950039f6 100644 --- a/packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.tsx +++ b/packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.tsx @@ -8,7 +8,7 @@ import { WalletsAddMoreLoader } from '../SkeletonLoader'; import WalletsAddMoreCard from '../WalletsAddMoreCard'; import './WalletsAddMoreCarousel.scss'; -const WalletsAddMoreCarousel = () => { +const WalletsAddMoreCarousel: React.FC = () => { const { isDesktop, isMobile } = useDevice(); const { data: availableWallets, isLoading } = useAvailableWallets(); const [walletsAddMoreEmblaRef, walletsAddMoreEmblaAPI] = useEmblaCarousel({ diff --git a/packages/wallets/src/features/cfd/screens/Success/Success.tsx b/packages/wallets/src/features/cfd/screens/Success/Success.tsx index 424896713d3a..052f7a053531 100644 --- a/packages/wallets/src/features/cfd/screens/Success/Success.tsx +++ b/packages/wallets/src/features/cfd/screens/Success/Success.tsx @@ -3,14 +3,17 @@ import { useActiveWalletAccount } from '@deriv/api'; import { WalletText } from '../../../../components'; import { WalletGradientBackground } from '../../../../components/WalletGradientBackground'; import { WalletMarketCurrencyIcon } from '../../../../components/WalletMarketCurrencyIcon'; -import { TDisplayBalance, TMarketTypes, TPlatforms } from '../../../../types'; import useDevice from '../../../../hooks/useDevice'; +import { TDisplayBalance, TMarketTypes, TPlatforms } from '../../../../types'; import { MarketTypeToTitleMapper, PlatformToTitleMapper } from '../../constants'; import './Success.scss'; type TSuccessProps = { description: string; - displayBalance: TDisplayBalance; + displayBalance: + | TDisplayBalance.CtraderAccountsList + | TDisplayBalance.DxtradeAccountsList + | TDisplayBalance.MT5AccountsList; marketType: TMarketTypes.SortedMT5Accounts; platform: TPlatforms.All; renderButton: () => ReactNode; diff --git a/packages/wallets/src/types.ts b/packages/wallets/src/types.ts index d557058011c1..776d9ce3ffd5 100644 --- a/packages/wallets/src/types.ts +++ b/packages/wallets/src/types.ts @@ -1,10 +1,16 @@ import type { + useAccountsList, + useActiveAccount, + useActiveTradingAccount, + useActiveWalletAccount, useAvailableMT5Accounts, + useAvailableWallets, useCreateOtherCFDAccount, useCtraderAccountsList, useDxtradeAccountsList, useMT5AccountsList, useSortedMT5Accounts, + useWalletAccountsList, } from '@deriv/api'; // eslint-disable-next-line @typescript-eslint/no-namespace @@ -14,6 +20,12 @@ export namespace THooks { export type DxtradeAccountsList = NonNullable['data']>[number]; export type MT5AccountsList = NonNullable['data']>[number]; export type SortedMT5Accounts = NonNullable['data']>[number]; + export type WalletAccountsList = NonNullable['data']>[number]; + export type ActiveWalletAccount = NonNullable['data']>; + export type AccountsList = NonNullable['data']>[number]; + export type ActiveTradingAccount = NonNullable['data']>; + export type ActiveAccount = NonNullable['data']>; + export type AvailableWallets = NonNullable['data']>[number]; } // eslint-disable-next-line @typescript-eslint/no-namespace export namespace TPlatforms { @@ -32,8 +44,15 @@ export namespace TMarketTypes { export type SortedMT5Accounts = Exclude; } -// NOTE: If in the future there is a case where we need a specific display balance from a hook, refactor this into another namespace -export type TDisplayBalance = - | THooks.CtraderAccountsList['display_balance'] - | THooks.DxtradeAccountsList['display_balance'] - | THooks.MT5AccountsList['display_balance']; +// eslint-disable-next-line @typescript-eslint/no-namespace +export namespace TDisplayBalance { + export type CtraderAccountsList = THooks.CtraderAccountsList['display_balance']; + export type DxtradeAccountsList = THooks.DxtradeAccountsList['display_balance']; + export type MT5AccountsList = THooks.MT5AccountsList['display_balance']; + export type WalletAccountsList = THooks.WalletAccountsList['display_balance']; + export type ActiveWalletAccount = THooks.ActiveWalletAccount['display_balance']; + export type AccountsList = THooks.AccountsList['display_balance']; + export type ActiveTradingAccount = THooks.ActiveTradingAccount['display_balance']; +} + +export type TGenericSizes = '2xl' | '2xs' | '3xl' | '3xs' | '4xl' | '5xl' | '6xl' | 'lg' | 'md' | 'sm' | 'xl' | 'xs';