Webapp - Fix eslint

Koniverse · Nov 6, 2024 · 483675f · 483675f
1 parent d12509a
commit 483675f
Show file tree

Hide file tree

Showing 25 changed files with 112 additions and 114 deletions.
diff --git a/packages/extension-base/src/background/KoniTypes.ts b/packages/extension-base/src/background/KoniTypes.ts
@@ -650,8 +650,15 @@ export interface NFTTransactionAdditionalInfo {
   collectionName: string;
 }
 
+export interface OffRanpAdditionalInfo {
+  orderId: string;
+  service: string;
+}
+
 export type TransactionAdditionalInfo = {
   [ExtrinsicType.TRANSFER_XCM]: XCMTransactionAdditionalInfo,
+  [ExtrinsicType.TRANSFER_TOKEN]: OffRanpAdditionalInfo,
+  [ExtrinsicType.TRANSFER_BALANCE]: OffRanpAdditionalInfo,
   [ExtrinsicType.SEND_NFT]: NFTTransactionAdditionalInfo,
   [ExtrinsicType.MINT_VDOT]: Pick<SubmitYieldStepData, 'derivativeTokenSlug' | 'exchangeRate' | 'slug'>,
   [ExtrinsicType.MINT_VMANTA]: Pick<SubmitYieldStepData, 'derivativeTokenSlug' | 'exchangeRate' | 'slug'>,

diff --git a/packages/extension-base/src/koni/background/handlers/State.ts b/packages/extension-base/src/koni/background/handlers/State.ts
@@ -1444,7 +1444,8 @@ export default class KoniState {
       estimateFee: {
         value: transactionValidated.estimateGas,
         symbol: token.symbol,
-        decimals: token.decimals || 18
+        decimals: token.decimals || 18,
+        feeTokenSlug: token.slug
       },
       id
     });

diff --git a/packages/extension-base/src/services/buy-service/constants/token.ts b/packages/extension-base/src/services/buy-service/constants/token.ts
@@ -3,7 +3,7 @@
 
 import { BuyService, SupportService } from '@subwallet/extension-base/types';
 
-const DEFAULT_BUY_SERVICE: BuyService = { symbol: '', network: '' };
+const DEFAULT_BUY_SERVICE: BuyService = { symbol: '', network: '', supportSell: false };
 
 export const DEFAULT_SERVICE_INFO: Record<SupportService, BuyService> = {
   transak: { ...DEFAULT_BUY_SERVICE },

diff --git a/packages/extension-base/src/services/swap-service/utils.ts b/packages/extension-base/src/services/swap-service/utils.ts
@@ -12,6 +12,9 @@ import BigN from 'bignumber.js';
 export const CHAIN_FLIP_TESTNET_EXPLORER = 'https://blocks-perseverance.chainflip.io';
 export const CHAIN_FLIP_MAINNET_EXPLORER = 'https://scan.chainflip.io';
 
+export const TRANSAK_TEST_MODE = process.env.TRANSAK_TEST_MODE !== undefined ? !!process.env.TRANSAK_TEST_MODE : true;
+export const TRANSAK_URL = TRANSAK_TEST_MODE ? 'https://global-stg.transak.com' : 'https://global.transak.com';
+
 export const CHAIN_FLIP_SUPPORTED_MAINNET_MAPPING: Record<string, Chain> = {
   [COMMON_CHAIN_SLUGS.POLKADOT]: Chains.Polkadot,
   [COMMON_CHAIN_SLUGS.ETHEREUM]: Chains.Ethereum,

diff --git a/packages/extension-base/src/services/transaction-service/utils.ts b/packages/extension-base/src/services/transaction-service/utils.ts
@@ -4,7 +4,7 @@
 import { _ChainInfo } from '@subwallet/chain-list/types';
 import { ExtrinsicDataTypeMap, ExtrinsicType } from '@subwallet/extension-base/background/KoniTypes';
 import { _getBlockExplorerFromChain, _isChainTestNet, _isPureEvmChain } from '@subwallet/extension-base/services/chain-service/utils';
-import { CHAIN_FLIP_MAINNET_EXPLORER, CHAIN_FLIP_TESTNET_EXPLORER } from '@subwallet/extension-base/services/swap-service/utils';
+import { CHAIN_FLIP_MAINNET_EXPLORER, CHAIN_FLIP_TESTNET_EXPLORER, TRANSAK_URL } from '@subwallet/extension-base/services/swap-service/utils';
 import { ChainflipSwapTxData } from '@subwallet/extension-base/types/swap';
 
 // @ts-ignore
@@ -82,6 +82,6 @@ export function getChainflipExplorerLink (data: ChainflipSwapTxData, chainInfo:
   return `${chainflipDomain}/channels/${data.depositChannelId}`;
 }
 
-export function getTransakOrderLink(data: any) {
-    return `https://global-stg.transak.com/user/order/${data.orderId}`;
-}
+export function getTransakOrderLink (orderId: string) {
+  return `${TRANSAK_URL}/user/order/${orderId}`;
+}
diff --git a/packages/extension-koni-ui/src/Popup/Account/ConnectLedger.tsx b/packages/extension-koni-ui/src/Popup/Account/ConnectLedger.tsx
@@ -307,6 +307,7 @@ const Component: React.FC<Props> = (props: Props) => {
               <>
                 <div className='logo'>
                   <DualLogo
+                    innerSize={52}
                     leftLogo={(
                       <Image
                         height={52}
@@ -323,18 +324,17 @@ const Component: React.FC<Props> = (props: Props) => {
                         width={52}
                       />
                     )}
-                    innerSize={52}
                     sizeLinkIcon={36}
                     sizeSquircleBorder={108}
                   />
                 </div>
                 <ChainSelector
+                  className={'select-ledger-app'}
                   items={networks}
                   label={t('Select Ledger app')}
                   onChange={onChainChange}
                   placeholder={t('Select Ledger app')}
                   value={chain}
-                  className={'select-ledger-app'}
                 />
                 {
                   !!chainMigrateMode && <ChainSelector

diff --git a/packages/extension-koni-ui/src/Popup/Transaction/variants/ClaimReward.tsx b/packages/extension-koni-ui/src/Popup/Transaction/variants/ClaimReward.tsx
@@ -198,10 +198,10 @@ const Component = () => {
             name={'from'}
           >
             <AccountSelector
+              addressPrefix={networkPrefix}
               disabled={!isAllAccount}
               doFilter={false}
               externalAccounts={accountList}
-              addressPrefix={networkPrefix}
             />
           </Form.Item>
           <FreeBalance

diff --git a/packages/extension-koni-ui/src/components/Logo/DualLogo.tsx b/packages/extension-koni-ui/src/components/Logo/DualLogo.tsx
@@ -33,13 +33,19 @@ const defaultLogo = <Logo2D />;
 const Component = ({ className, leftLogo = defaultLogo, linkIcon = defaultLinkIcon, rightLogo = defaultLogo, sizeSquircleBorder, innerSize }: Props) => {
   return (
     <div className={CN(className, 'dual-logo-container')}>
-      <LogoWithSquircleBorder size={sizeSquircleBorder} innerSize={innerSize}>
+      <LogoWithSquircleBorder
+        innerSize={innerSize}
+        size={sizeSquircleBorder}
+      >
         {leftLogo}
       </LogoWithSquircleBorder>
       <div className='link-icon'>
         {linkIcon}
       </div>
-      <LogoWithSquircleBorder size={sizeSquircleBorder} innerSize={innerSize}>
+      <LogoWithSquircleBorder
+        innerSize={innerSize}
+        size={sizeSquircleBorder}
+      >
         {rightLogo}
       </LogoWithSquircleBorder>
     </div>

diff --git a/packages/extension-web-ui/src/Popup/BuyTokens.tsx b/packages/extension-web-ui/src/Popup/BuyTokens.tsx
@@ -2,14 +2,15 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { AccountJson, Resolver } from '@subwallet/extension-base/background/types';
+import { BuyServiceInfo, BuyTokenInfo, SupportService } from '@subwallet/extension-base/types';
 import { detectTranslate, isAccountAll } from '@subwallet/extension-base/utils';
 import { BaseModal, baseServiceItems, Layout, PageWrapper, ServiceItem } from '@subwallet/extension-web-ui/components';
 import { AccountSelector } from '@subwallet/extension-web-ui/components/Field/AccountSelector';
 import { ServiceSelector } from '@subwallet/extension-web-ui/components/Field/BuyTokens/ServiceSelector';
 import { TokenItemType, TokenSelector } from '@subwallet/extension-web-ui/components/Field/TokenSelector';
 import { useAssetChecker, useDefaultNavigate, useNotification, useTranslation } from '@subwallet/extension-web-ui/hooks';
 import { RootState } from '@subwallet/extension-web-ui/stores';
-import { AccountType, BuyServiceInfo, BuyTokenInfo, CreateBuyOrderFunction, SupportService, ThemeProps } from '@subwallet/extension-web-ui/types';
+import { AccountType, CreateBuyOrderFunction, ThemeProps } from '@subwallet/extension-web-ui/types';
 import { BuyTokensParam } from '@subwallet/extension-web-ui/types/navigation';
 import { createBanxaOrder, createCoinbaseOrder, createTransakOrder, findAccountByAddress, noop, openInNewTab } from '@subwallet/extension-web-ui/utils';
 import { getAccountType } from '@subwallet/extension-web-ui/utils/account/account';
@@ -65,12 +66,12 @@ function Component ({ className, modalContent, slug }: Props) {
 
   const [buyForm, setBuyForm] = useState(true);
 
-  const handleForm = (mode: string) => {
+  const handleForm = useCallback((mode: string) => {
     setBuyForm(mode === 'BUY');
-  };
+  }, []);
 
-  const handleBuyForm = () => handleForm('BUY');
-  const handleSellForm = () => handleForm('SELL');
+  const handleBuyForm = useCallback(() => handleForm('BUY'), [handleForm]);
+  const handleSellForm = useCallback(() => handleForm('SELL'), [handleForm]);
 
   const currentSymbol = slug || _currentSymbol;
 
@@ -422,14 +423,12 @@ function Component ({ className, modalContent, slug }: Props) {
 
           <div
             className='__service-selector'
-            // eslint-disable-next-line react/jsx-no-bind
             onClick={handleBuyForm}
           >
               Buy
           </div>
           <div
             className='__service-selector'
-            // eslint-disable-next-line react/jsx-no-bind
             onClick={handleSellForm}
           >
               Sell
@@ -633,7 +632,7 @@ const BuyTokens = styled(Wrapper)<Props>(({ theme: { token } }: Props) => {
     },
 
     '.__service-container': {
-      backgroundColor: '#1A1A1A',
+      backgroundColor: token.colorBgSecondary,
       borderRadius: '0.5rem',
       padding: '0.25rem',
       height: '2.5rem',

diff --git a/packages/extension-web-ui/src/Popup/Home/History/Detail/index.tsx b/packages/extension-web-ui/src/Popup/Home/History/Detail/index.tsx
@@ -67,8 +67,12 @@ function Component ({ className = '', data, onCancel }: Props): React.ReactEleme
       }
     }
 
-    if(data.additionalInfo?.orderId && data.additionalInfo?.service === 'transak'){
-      link = getTransakOrderLink(data.additionalInfo);
+    if ([ExtrinsicType.TRANSFER_BALANCE, ExtrinsicType.TRANSFER_TOKEN].includes(extrinsicType)) {
+      const additionalInfo = data.additionalInfo as TransactionAdditionalInfo[ExtrinsicType.TRANSFER_TOKEN];
+
+      if (additionalInfo?.orderId && additionalInfo?.service === 'transak') {
+        link = getTransakOrderLink(additionalInfo?.orderId);
+      }
     }
 
     return (

diff --git a/packages/extension-web-ui/src/Popup/Home/History/Detail/parts/Amount.tsx b/packages/extension-web-ui/src/Popup/Home/History/Detail/parts/Amount.tsx
@@ -31,7 +31,7 @@ const Component: React.FC<Props> = (props: Props) => {
   const isNft = data.type === ExtrinsicType.SEND_NFT;
   const isMint = isTypeMint(data.type);
   const isLeavePool = isPoolLeave(data.type);
-
+  const hasOrderId = data.type === ExtrinsicType.TRANSFER_TOKEN;
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const additionalInfo = data.additionalInfo;
 
@@ -99,8 +99,8 @@ const Component: React.FC<Props> = (props: Props) => {
             />
           )
       }
-      {additionalInfo?.orderId && (
-      <MetaInfo.Default label={t('Order ID')}> {additionalInfo?.orderId} </MetaInfo.Default>
+      {data.additionalInfo && hasOrderId && (
+        <MetaInfo.Default label={t('Order ID')}> {(data.additionalInfo as TransactionAdditionalInfo[ExtrinsicType.TRANSFER_TOKEN]).orderId} </MetaInfo.Default>
       )}
       {isMint && amountDerivative && (
 

diff --git a/packages/extension-web-ui/src/Popup/Home/History/Detail/parts/Layout.tsx b/packages/extension-web-ui/src/Popup/Home/History/Detail/parts/Layout.tsx
@@ -48,6 +48,7 @@ const Component: React.FC<Props> = (props: Props) => {
         valueColorSchema={HistoryStatusMap[data.status].schema}
       />
       <MetaInfo.Default label={t('Extrinsic hash')}>{(data.extrinsicHash || '').startsWith('0x') ? toShort(data.extrinsicHash, 8, 9) : '...'}</MetaInfo.Default>
+      <MetaInfo.Default label={t('Transaction time')}>{formatHistoryDate(data.time, language, 'detail')}</MetaInfo.Default>
       <HistoryDetailAmount data={data} />
 
       {

diff --git a/packages/extension-web-ui/src/Popup/Home/Tokens/DetailList.tsx b/packages/extension-web-ui/src/Popup/Home/Tokens/DetailList.tsx
@@ -1,6 +1,7 @@
 // Copyright 2019-2022 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import { BuyTokenInfo } from '@subwallet/extension-base/types';
 import { TokenBalance, TokenItem } from '@subwallet/extension-web-ui/components';
 import PageWrapper from '@subwallet/extension-web-ui/components/Layout/PageWrapper';
 import { AccountSelectorModal } from '@subwallet/extension-web-ui/components/Modal/AccountSelectorModal';
@@ -17,7 +18,7 @@ import Banner from '@subwallet/extension-web-ui/Popup/Home/Tokens/Banner';
 import { DetailModal } from '@subwallet/extension-web-ui/Popup/Home/Tokens/DetailModal';
 import { DetailUpperBlock } from '@subwallet/extension-web-ui/Popup/Home/Tokens/DetailUpperBlock';
 import { RootState } from '@subwallet/extension-web-ui/stores';
-import { BuyTokenInfo, EarningPoolsParam, ThemeProps } from '@subwallet/extension-web-ui/types';
+import { EarningPoolsParam, ThemeProps } from '@subwallet/extension-web-ui/types';
 import { TokenBalanceItemType } from '@subwallet/extension-web-ui/types/balance';
 import { getAccountType, isAccountAll, sortTokenByValue } from '@subwallet/extension-web-ui/utils';
 import { ModalContext } from '@subwallet/react-ui';

diff --git a/packages/extension-web-ui/src/Popup/Home/Tokens/index.tsx b/packages/extension-web-ui/src/Popup/Home/Tokens/index.tsx
@@ -8,7 +8,7 @@ import ReceiveQrModal from '@subwallet/extension-web-ui/components/Modal/Receive
 import { TokensSelectorModal } from '@subwallet/extension-web-ui/components/Modal/ReceiveModal/TokensSelectorModal';
 import NoContent, { PAGE_TYPE } from '@subwallet/extension-web-ui/components/NoContent';
 import { TokenGroupBalanceItem } from '@subwallet/extension-web-ui/components/TokenItem/TokenGroupBalanceItem';
-import { DEFAULT_OFF_RAMP_PARAMS, DEFAULT_SWAP_PARAMS, DEFAULT_TRANSFER_PARAMS, OFF_RAMP_DATA, SWAP_TRANSACTION, TRANSFER_TRANSACTION } from '@subwallet/extension-web-ui/constants';
+import { DEFAULT_SWAP_PARAMS, DEFAULT_TRANSFER_PARAMS, SWAP_TRANSACTION, TRANSFER_TRANSACTION } from '@subwallet/extension-web-ui/constants';
 import { DataContext } from '@subwallet/extension-web-ui/contexts/DataContext';
 import { HomeContext } from '@subwallet/extension-web-ui/contexts/screen/HomeContext';
 import { ScreenContext } from '@subwallet/extension-web-ui/contexts/ScreenContext';
@@ -55,7 +55,7 @@ const Component = (): React.ReactElement => {
   const { accountBalance: { tokenGroupBalanceMap,
     totalBalanceInfo }, tokenGroupStructure: { sortedTokenGroups } } = useContext(HomeContext);
   const currentAccount = useSelector((state: RootState) => state.accountState.currentAccount);
-  const accounts = useSelector((state: RootState) => state.accountState.accounts);
+
   const [, setSwapStorage] = useLocalStorage(SWAP_TRANSACTION, DEFAULT_SWAP_PARAMS);
 
   const [, setStorage] = useLocalStorage<TransferParams>(TRANSFER_TRANSACTION, DEFAULT_TRANSFER_PARAMS);

diff --git a/packages/extension-web-ui/src/Popup/OffRampLoading.tsx b/packages/extension-web-ui/src/Popup/OffRampLoading.tsx
@@ -9,20 +9,22 @@ import { RootState } from '@subwallet/extension-web-ui/stores';
 import { OffRampParams, Theme, ThemeProps } from '@subwallet/extension-web-ui/types';
 import { Button, ModalContext, PageIcon, SwModal } from '@subwallet/react-ui';
 import CN from 'classnames';
-import { XCircle } from 'phosphor-react';
+import { Warning, XCircle } from 'phosphor-react';
 import React, { useCallback, useContext, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import styled, { useTheme } from 'styled-components';
 import { useLocalStorage } from 'usehooks-ts';
 
 import { LoadingScreen } from '../components';
+import { removeStorage } from '../utils';
 
 type Props = ThemeProps;
 
+const noAccountModalId = NO_ACCOUNT_MODAL;
+const redirectTransakModalId = REDIRECT_TRANSAK_MODAL;
+
 function Component ({ className = '' }: Props): React.ReactElement<Props> {
-  const noAccountModalId = NO_ACCOUNT_MODAL;
-  const redirectTransakModalId = REDIRECT_TRANSAK_MODAL;
   const { token } = useTheme() as Theme;
   // Handle Sell Token
   const { accounts } = useSelector((state: RootState) => state.accountState);
@@ -34,8 +36,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   const addresses = useMemo(() => accounts.map((account) => account.address), [accounts]);
   const { isWebUI } = useContext(ScreenContext);
 
-  const data = offRampData;
-  const TokenInfo = useGetChainAssetInfo(data.slug);
+  const TokenInfo = useGetChainAssetInfo(offRampData.slug);
   const navigate = useNavigate();
 
   const onOpenSellToken = useCallback((data: OffRampParams) => {
@@ -65,22 +66,23 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   }, [TokenInfo?.decimals, TokenInfo?.originChain, TokenInfo?.slug, setStorage, isWebUI, navigate]);
 
   useEffect(() => {
-    if (data.orderId) {
-      if (addresses.includes(data.partnerCustomerId)) {
+    if (offRampData.orderId) {
+      if (addresses.includes(offRampData.partnerCustomerId)) {
         activeModal(redirectTransakModalId);
       } else {
         activeModal(noAccountModalId);
       }
     }
-  }, [activeModal, addresses, data, redirectTransakModalId, onOpenSellToken, noAccountModalId]);
+  }, [activeModal, addresses, offRampData, onOpenSellToken]);
 
   const onClick = useCallback(() => {
+    removeStorage(OFF_RAMP_DATA);
     navigate('/home/tokens');
   }, [navigate]);
 
   const onRedirectclick = useCallback(() => {
-    onOpenSellToken(data);
-  }, [data, onOpenSellToken]);
+    onOpenSellToken(offRampData);
+  }, [offRampData, onOpenSellToken]);
 
   const { t } = useTranslation();
   const footerModal = useMemo(() => {
@@ -96,18 +98,25 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
     );
   }, [onClick, t]);
 
-    const redirectFooterModal = useMemo(() => {
+  const redirectFooterModal = useMemo(() => {
     return (
       <>
+        <Button
+          block={true}
+          onClick={onClick}
+          schema={'secondary'}
+        >
+          {t('Cancel')}
+        </Button>
         <Button
           block={true}
           onClick={onRedirectclick}
         >
-          {t('I understand')}
+          {t('Continue')}
         </Button>
       </>
     );
-  }, [onRedirectclick, t]);
+  }, [onClick, onRedirectclick, t]);
 
   return (
     <>
@@ -137,18 +146,17 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
         footer={redirectFooterModal}
         id={redirectTransakModalId}
         onCancel={onRedirectclick}
-        title={t('Send token to transak')}
+        title={t('Action needed')}
       >
         <div className={'__modal-content'}>
           <PageIcon
-            color={token.colorError}
+            color={token.colorWarning}
             iconProps={{
-              weight: 'fill',
-              phosphorIcon: XCircle
+              phosphorIcon: Warning
             }}
           />
           <div className='__modal-description'>
-            {t('Send token to transak')}
+            {t('To complete the transaction, you\'ll need to transfer tokens to the the address of your chosen provider. Hit "Continue" to proceed')}
           </div>
         </div>
       </SwModal>