thisyahlen/chore: update proper type and cleanup (deriv-com#10916)

* chore: update proper type and cleanup * chore: cleanup * chore: add more proper types
heorhi-deriv · Oct 24, 2023 · 0f47fbd · 0f47fbd
1 parent 3676af8
commit 0f47fbd
Show file tree

Hide file tree

Showing 25 changed files with 110 additions and 67 deletions.
diff --git 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<ReturnType<typeof useActiveWalletAccount>['data']>['is_malta_wallet'];
+    isMaltaWallet?: THooks.ActiveWalletAccount['is_malta_wallet'];
 };
 
 const DerivAppsGetAccount: React.FC<TProps> = ({ isMaltaWallet }) => {

diff --git 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/...ages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx b/...ages/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
@@ -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<TWalletCurrencyIconProps> = ({ 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
@@ -1,13 +1,13 @@
 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';
 import { WalletListCardBadge } from '../WalletListCardBadge';
 import './WalletCard.scss';
 
 type TProps = {
-    account: NonNullable<ReturnType<typeof useWalletAccountsList>['data']>[number];
+    account: THooks.WalletAccountsList;
 };
 
 const WalletCard: React.FC<TProps> = ({ account }) => {

diff --git 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<TGenericSizes, 'lg' | 'md' | 'sm' | 'xl'>;
     type: Omit<string, keyof typeof typeToIconMapper> | keyof typeof typeToIconMapper;
 };
 

diff --git 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<TGenericSizes, 'lg' | 'md' | 'sm'>;
 };
 
 const WalletCurrencyCard: React.FC<TProps> = ({ currency, isDemo, size = 'lg' }: TProps) => {

diff --git 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
@@ -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<THooks.WalletAccountsList['currency'], undefined>;
 };
 
 const WalletListCard: React.FC<TProps> = ({ 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
@@ -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<TProps> = ({ isActive, isDemo, loginid }) => {

diff --git 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<TProps> = ({ isDemo, label }) => {

diff --git 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<TProps> = ({ balance }) => (

diff --git 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<THooks.WalletAccountsList['currency'], undefined>;
 };
 
 const WalletListCardIDetails: React.FC<TProps> = ({ badge, isActive, isDemo, loginid, title }) => (

diff --git 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<ReturnType<typeof useWalletAccountsList>['data']>[0]['currency'];
+    title: THooks.WalletAccountsList['currency'];
 };
 
 const WalletListCardTitle: React.FC<TProps> = ({ title }) => {
     return (
-        <WalletText size='xl' weight='bold'>
+        <WalletText size='lg' weight='bold'>
             {title} Wallet
         </WalletText>
     );

diff --git 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<string, ComponentType<SVGAttributes<SVGElement>>> = {
@@ -22,13 +22,18 @@ const marketTypeToPlatformIconMapper: Record<string, ComponentType<SVGAttributes
 };
 
 type TWalletMarketCurrencyIconProps = {
-    currency: string;
-    isDemo: boolean;
-    marketType: Exclude<NonNullable<ReturnType<typeof useSortedMT5Accounts>['data']>[number]['market_type'], undefined>;
-    platform: string;
+    currency: Exclude<THooks.ActiveWalletAccount['currency'], undefined>;
+    isDemo: THooks.ActiveWalletAccount['is_virtual'];
+    marketType: Exclude<THooks.SortedMT5Accounts['market_type'], undefined>;
+    platform: TPlatforms.All;
 };
 
-const WalletMarketCurrencyIcon = ({ currency, isDemo, marketType, platform }: TWalletMarketCurrencyIconProps) => {
+const WalletMarketCurrencyIcon: React.FC<TWalletMarketCurrencyIconProps> = ({
+    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
@@ -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
@@ -8,7 +8,7 @@ type TProps = {
     setIsStarted?: (value: boolean) => void;
 };
 
-const WalletTourGuide = ({ isStarted = false, setIsStarted }: TProps) => {
+const WalletTourGuide: React.FC<TProps> = ({ 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
@@ -33,7 +33,7 @@ export const tourStepConfig: Step[] = [
     },
 ];
 
-export const TooltipComponent = ({
+export const TooltipComponent: React.FC<TooltipRenderProps> = ({
     backProps,
     closeProps,
     continuous,
@@ -42,7 +42,7 @@ export const TooltipComponent = ({
     primaryProps,
     step,
     tooltipProps,
-}: TooltipRenderProps) => {
+}) => {
     return (
         <div {...tooltipProps} className='wallets-tour-guide__container'>
             <div className='wallets-tour-guide__header'>{step?.title as React.ReactNode}</div>

diff --git 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
@@ -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<ReturnType<typeof useAvailableWallets>['data']>[0];
+type TProps = THooks.AvailableWallets;
 
-const WalletsAddMoreCard = ({
+const WalletsAddMoreCard: React.FC<TProps> = ({
     currency,
     is_added: isAdded,
     landing_company_name: landingCompanyName,
-}: TWalletsAddMoreCard) => {
+}) => {
     return (
         <div className='wallets-add-more__card'>
             <WalletGradientBackground currency={currency || 'USD'} device='mobile' hasShine type='card'>

diff --git 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<ReturnType<typeof useAvailableWallets>['data']>[0];
+type TProps = THooks.AvailableWallets;
 
-const WalletsAddMoreCardBanner = ({
+const WalletsAddMoreCardBanner: React.FC<TProps> = ({
     currency,
     is_added: isAdded,
     landing_company_name: landingCompanyName,
-}: TWalletsAddMoreCardBannerProps) => {
+}) => {
     return (
         <div className='wallets-add-more__banner'>
             <div className='wallets-add-more__banner-header'>

diff --git 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<THooks.AvailableWallets['currency'], undefined>;
+};
+
 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<TProps> = ({ currency }) => {
     return (
         <div className='wallets-add-more__content'>
             <WalletText size='md' weight='bold'>