From bc6fdfcc4cf9f0a4a861c11a0ebb20a6162e3726 Mon Sep 17 00:00:00 2001 From: dominhquang Date: Fri, 15 Nov 2024 19:15:27 +0700 Subject: [PATCH] [Issue-1826] Fix bug in issue 1828 --- src/components/Account.tsx | 116 ------- src/components/AccountSettingButton.tsx | 16 +- src/components/AccountTokenDetail/index.tsx | 8 +- .../parts/EarningAccountInfo/index.tsx | 5 +- .../parts/EarningNominationInfo/index.tsx | 5 +- src/components/Field/AccountInfo.tsx | 7 +- src/components/Field/AccountSelect.tsx | 5 +- src/components/Field/Address.tsx | 8 +- src/components/Input/InputAddressNew.tsx | 3 +- src/components/MetaInfo/parts/AccountItem.tsx | 3 +- .../Modal/AddressBook/AddressBookModal.tsx | 2 +- .../AddressBook/ReadonlyAddressField.tsx | 5 +- .../Earning/EarningNominationModal/index.tsx | 5 +- src/components/Modal/ExportQrSignerModal.tsx | 2 +- .../WalletConnect/Account/WCAccountInput.tsx | 12 +- .../common/Field/AccountInfo/index.tsx | 4 +- src/hooks/chain/useAssetChecker.tsx | 89 +++++ src/hooks/screen/Home/Crypto/useBuyToken.ts | 324 +++++++++--------- src/messaging/index.ts | 22 ++ src/screens/Home/Crypto/BuyToken.tsx | 94 ++--- .../History/parts/HistoryAccountSelector.tsx | 5 +- src/screens/Home/NFT/Detail/NftDetail.tsx | 2 +- src/screens/ImportToken/ImportToken.tsx | 2 +- .../ApplyMasterPassword/index.tsx | 10 +- src/screens/Settings/AddressBook/index.tsx | 2 +- src/screens/Signing/Detail/index.tsx | 2 +- src/screens/Transaction/NFT/index.tsx | 2 +- src/screens/Transaction/SendFund/index.tsx | 4 +- .../Transaction/TransactionDone/index.tsx | 2 +- src/utils/account.ts | 2 +- src/utils/account/account.ts | 15 + src/utils/scanner/attach.ts | 5 +- 32 files changed, 384 insertions(+), 404 deletions(-) delete mode 100644 src/components/Account.tsx create mode 100644 src/hooks/chain/useAssetChecker.tsx diff --git a/src/components/Account.tsx b/src/components/Account.tsx deleted file mode 100644 index 12c51463b..000000000 --- a/src/components/Account.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import { StyleProp, TextStyle, View, ViewStyle } from 'react-native'; -import Text from '../components/Text'; -import { AccountJson } from '@subwallet/extension-base/background/types'; -import React, { useCallback } from 'react'; -import Clipboard from '@react-native-clipboard/clipboard'; -import { FontBold, FontSemiBold, sharedStyles } from 'styles/sharedStyles'; -import { CircleWavyCheck, CopySimple } from 'phosphor-react-native'; -import { ColorMap } from 'styles/color'; -import { IconButton } from 'components/IconButton'; -import i18n from 'utils/i18n/i18n'; -import { isAccountAll } from '@subwallet/extension-base/utils'; -import { Avatar } from 'components/design-system-ui'; -import { isEthereumAddress } from '@polkadot/util-crypto'; - -export interface AccountProps extends AccountJson { - name: string; - isShowBanner?: boolean; - isShowAddress?: boolean; - showCopyBtn?: boolean; - showSelectedIcon?: boolean; - isSelected?: boolean; - subIconSize?: number; - showSubIcon?: boolean; -} - -const accountNameStyle: StyleProp = { - color: ColorMap.light, - ...sharedStyles.mediumText, - ...FontBold, - paddingRight: 5, - maxWidth: 220, -}; - -const accountAddressStyle: StyleProp = { - color: ColorMap.disabled, - ...sharedStyles.mainText, - ...FontSemiBold, -}; - -const accountAddressBlock: StyleProp = { - display: 'flex', - flexDirection: 'row', -}; - -const accountCopyBtn: StyleProp = { - paddingLeft: 11, -}; - -const nameWrapper: StyleProp = { - flexDirection: 'row', - alignItems: 'center', - paddingBottom: 6, -}; - -const InfoIconStyle: StyleProp = { - marginRight: 5, -}; - -const toShortAddress = (_address: string | null, halfLength?: number) => { - const currentAddress = (_address || '').toString(); - - const addressLength = halfLength || 7; - - return currentAddress.length > 13 - ? `${currentAddress.slice(0, addressLength)}…${currentAddress.slice(-addressLength)}` - : currentAddress; -}; - -export const Account = ({ - name, - address, - isShowAddress = true, - showCopyBtn = true, - showSelectedIcon = true, - isSelected, -}: AccountProps) => { - const _isAccountAll = address && isAccountAll(address); - - const copyToClipboard = useCallback((text: string) => { - Clipboard.setString(text); - }, []); - - const Name = () => { - return ( - - - {name} - - {showSelectedIcon && isSelected && ( - - )} - - ); - }; - - return ( - - - - - - - {isShowAddress && ( - - {_isAccountAll ? `${i18n.common.allAccounts}` : toShortAddress(address, 10)} - - )} - - {showCopyBtn && ( - copyToClipboard(address || '')} /> - )} - - - - ); -}; diff --git a/src/components/AccountSettingButton.tsx b/src/components/AccountSettingButton.tsx index 7a0e703ad..bd0a118e8 100644 --- a/src/components/AccountSettingButton.tsx +++ b/src/components/AccountSettingButton.tsx @@ -5,11 +5,11 @@ import { RootStackParamList } from 'routes/index'; import { useSelector } from 'react-redux'; import { RootState } from 'stores/index'; import { CaretDown } from 'phosphor-react-native'; -import { Avatar, Icon } from 'components/design-system-ui'; +import { Icon } from 'components/design-system-ui'; import { useSubWalletTheme } from 'hooks/useSubWalletTheme'; -import AvatarGroup from 'components/common/AvatarGroup'; -import { isEthereumAddress } from '@polkadot/util-crypto'; import createStylesheet from './styles/AccountSettingButton'; +import { AccountProxyAvatarGroup } from 'components/design-system-ui/avatar/account-proxy-avatar-group'; +import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar'; interface Props { navigation: NativeStackNavigationProp; @@ -28,14 +28,8 @@ export const AccountSettingButton = ({ navigation, style }: Props) => { onPress={() => { navigation.navigate('AccountsScreen', {}); }}> - {isAllAccount && } - {!isAllAccount && ( - - )} + {isAllAccount && } + {!isAllAccount && } {!isReady && ( diff --git a/src/components/AccountTokenDetail/index.tsx b/src/components/AccountTokenDetail/index.tsx index 8eb5b418e..9d508c93f 100644 --- a/src/components/AccountTokenDetail/index.tsx +++ b/src/components/AccountTokenDetail/index.tsx @@ -1,8 +1,8 @@ import React, { useMemo } from 'react'; -import { Avatar, Button, Icon, Number, Typography } from 'components/design-system-ui'; +import { Button, Icon, Number, Typography } from 'components/design-system-ui'; import { Linking, View } from 'react-native'; import i18n from 'utils/i18n/i18n'; -import reformatAddress, { toShort } from 'utils/index'; +import { toShort } from 'utils/index'; import { useSubWalletTheme } from 'hooks/useSubWalletTheme'; import createStylesheet from './style'; import { BalanceItem } from '@subwallet/extension-base/types'; @@ -15,6 +15,8 @@ import useGetAccountByAddress from 'hooks/screen/useGetAccountByAddress'; import MetaInfo from 'components/MetaInfo'; import { ArrowSquareOut } from 'phosphor-react-native'; import { getExplorerLink } from '@subwallet/extension-base/services/transaction-service/utils'; +import { reformatAddress } from 'utils/account/account'; +import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar'; interface Props { item: BalanceItem; @@ -51,7 +53,7 @@ export const AccountTokenDetail = ({ item, chainInfoMap }: Props) => { - + {name ? ( diff --git a/src/components/Earning/EarningBaseInfo/parts/EarningAccountInfo/index.tsx b/src/components/Earning/EarningBaseInfo/parts/EarningAccountInfo/index.tsx index 78fb62fd1..4636f9c0b 100644 --- a/src/components/Earning/EarningBaseInfo/parts/EarningAccountInfo/index.tsx +++ b/src/components/Earning/EarningBaseInfo/parts/EarningAccountInfo/index.tsx @@ -8,7 +8,7 @@ import { } from '@subwallet/extension-base/types'; import { isSameAddress } from '@subwallet/extension-base/utils'; import BigN from 'bignumber.js'; -import { Avatar, Button, Icon, Typography } from 'components/design-system-ui'; +import { Button, Icon, Typography } from 'components/design-system-ui'; import MetaInfo from 'components/MetaInfo'; import EarningNominationModal from 'components/Modal/Earning/EarningNominationModal'; import { StakingStatusUi } from 'constants/stakingStatusUi'; @@ -24,6 +24,7 @@ import { createEarningTypeTags } from 'utils/earning'; import i18n from 'utils/i18n/i18n'; import { findAccountByAddress, toShort } from 'utils/index'; import createStyles from './styles'; +import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar'; type Props = { compound: YieldPositionInfo; @@ -103,7 +104,7 @@ const EarningAccountInfo: React.FC = (props: Props) => { return () => { return ( - + {account?.name || toShort(item.address)} diff --git a/src/components/Earning/EarningBaseInfo/parts/EarningNominationInfo/index.tsx b/src/components/Earning/EarningBaseInfo/parts/EarningNominationInfo/index.tsx index 6acf6750e..b2d3fa415 100644 --- a/src/components/Earning/EarningBaseInfo/parts/EarningNominationInfo/index.tsx +++ b/src/components/Earning/EarningBaseInfo/parts/EarningNominationInfo/index.tsx @@ -1,7 +1,7 @@ import { _ChainAsset } from '@subwallet/chain-list/types'; import { _STAKING_CHAIN_GROUP } from '@subwallet/extension-base/services/earning-service/constants'; import { YieldPoolInfo, YieldPoolType, YieldPositionInfo } from '@subwallet/extension-base/types'; -import { Avatar, Button, Icon, Number, Typography } from 'components/design-system-ui'; +import { Button, Icon, Number, Typography } from 'components/design-system-ui'; import MetaInfo from 'components/MetaInfo'; import { useSubWalletTheme } from 'hooks/useSubWalletTheme'; import { CaretDown, CaretUp } from 'phosphor-react-native'; @@ -10,6 +10,7 @@ import { TouchableOpacity, View } from 'react-native'; import { isAccountAll } from 'utils/accountAll'; import { toShort } from 'utils/index'; import createStyles from './styles'; +import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar'; type Props = { compound: YieldPositionInfo; @@ -65,7 +66,7 @@ const EarningNominationInfo: React.FC = (props: Props) => { return ( - + {item.validatorIdentity || toShort(item.validatorAddress)} diff --git a/src/components/Field/AccountInfo.tsx b/src/components/Field/AccountInfo.tsx index 8ebe30537..b8958415b 100644 --- a/src/components/Field/AccountInfo.tsx +++ b/src/components/Field/AccountInfo.tsx @@ -1,9 +1,10 @@ import React from 'react'; import { StyleProp, Text, View } from 'react-native'; -import reformatAddress, { getNetworkLogo, toShort } from 'utils/index'; +import { getNetworkLogo, toShort } from 'utils/index'; import { ColorMap } from 'styles/color'; import { FontMedium, sharedStyles } from 'styles/sharedStyles'; -import { Avatar } from 'components/design-system-ui'; +import { reformatAddress } from 'utils/account/account'; +import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar'; interface Props { address: string; @@ -32,7 +33,7 @@ export const AccountInfoField = ({ address, name, networkKey, networkPrefix }: P alignItems: 'center', }}> - + {name} diff --git a/src/components/Field/AccountSelect.tsx b/src/components/Field/AccountSelect.tsx index 15af8d95d..937bcd343 100644 --- a/src/components/Field/AccountSelect.tsx +++ b/src/components/Field/AccountSelect.tsx @@ -6,9 +6,8 @@ import Text from '../../components/Text'; import { FontSemiBold } from 'styles/sharedStyles'; import { ColorMap } from 'styles/color'; import { CaretDown } from 'phosphor-react-native'; -import { Avatar } from 'components/design-system-ui'; -import { isEthereumAddress } from '@polkadot/util-crypto'; import i18n from 'utils/i18n/i18n'; +import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar'; interface Props extends FieldBaseProps { disabled?: boolean; @@ -72,7 +71,7 @@ export const AccountSelectField = ({ - + {!!value && {accountName}} {!!value && {`(${toShort(value, 4, 4)})`}} {!value && {i18n.header.selectAccount}} diff --git a/src/components/Field/Address.tsx b/src/components/Field/Address.tsx index 98c91228f..a8fe767b4 100644 --- a/src/components/Field/Address.tsx +++ b/src/components/Field/Address.tsx @@ -1,12 +1,14 @@ import { FieldBase, FieldBaseProps } from 'components/Field/Base'; import React, { useMemo } from 'react'; -import reformatAddress, { toShort } from 'utils/index'; +import { toShort } from 'utils/index'; import { StyleSheet, View } from 'react-native'; import { FontMedium } from 'styles/sharedStyles'; import { IconProps, Info } from 'phosphor-react-native'; import { ThemeTypes } from 'styles/themes'; import { useSubWalletTheme } from 'hooks/useSubWalletTheme'; -import { Avatar, Button, Icon, Typography } from 'components/design-system-ui'; +import { Button, Icon, Typography } from 'components/design-system-ui'; +import { AccountProxyAvatar } from '../design-system-ui/avatar/account-proxy-avatar'; +import { reformatAddress } from 'utils/account/account'; interface Props extends FieldBaseProps { address: string; @@ -50,7 +52,7 @@ export const AddressField = ({ {!!showAvatar && ( - + )} {!!placeholder && {placeholder}} diff --git a/src/components/Input/InputAddressNew.tsx b/src/components/Input/InputAddressNew.tsx index 9d879ac55..95f2b45a1 100644 --- a/src/components/Input/InputAddressNew.tsx +++ b/src/components/Input/InputAddressNew.tsx @@ -4,7 +4,7 @@ import { Keyboard, TextInput, View } from 'react-native'; import { useSubWalletTheme } from 'hooks/useSubWalletTheme'; import { decodeAddress, isAddress, isEthereumAddress } from '@polkadot/util-crypto'; import { Button, Icon, Typography } from 'components/design-system-ui'; -import reformatAddress, { toShort } from 'utils/index'; +import { toShort } from 'utils/index'; import { Book, Scan } from 'phosphor-react-native'; import { AddressBookModal } from 'components/Modal/AddressBook/AddressBookModal'; import { NativeSyntheticEvent } from 'react-native/Libraries/Types/CoreEventTypes'; @@ -20,6 +20,7 @@ import i18n from 'utils/i18n/i18n'; import { setAdjustResize } from 'rn-android-keyboard-adjust'; import useCheckCamera from 'hooks/common/useCheckCamera'; import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar'; +import { reformatAddress } from 'utils/account/account'; interface Props extends InputProps { chain?: string; diff --git a/src/components/MetaInfo/parts/AccountItem.tsx b/src/components/MetaInfo/parts/AccountItem.tsx index e135f1f6f..6a0b5e7ea 100644 --- a/src/components/MetaInfo/parts/AccountItem.tsx +++ b/src/components/MetaInfo/parts/AccountItem.tsx @@ -9,10 +9,11 @@ import { useSelector } from 'react-redux'; import useGetAccountByAddress from 'hooks/screen/useGetAccountByAddress'; import { RootState } from 'stores/index'; import { findNetworkJsonByGenesisHash } from 'utils/getNetworkJsonByGenesisHash'; -import reformatAddress, { toShort } from 'utils/index'; +import { toShort } from 'utils/index'; import Typography from '../../design-system-ui/typography'; import { isAddress } from '@polkadot/util-crypto'; import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar'; +import { reformatAddress } from 'utils/account/account'; export interface AccountInfoItem extends InfoItemBase { address: string; diff --git a/src/components/Modal/AddressBook/AddressBookModal.tsx b/src/components/Modal/AddressBook/AddressBookModal.tsx index 805dc91c4..b1447bdba 100644 --- a/src/components/Modal/AddressBook/AddressBookModal.tsx +++ b/src/components/Modal/AddressBook/AddressBookModal.tsx @@ -9,7 +9,6 @@ import { View } from 'react-native'; import Typography from '../../design-system-ui/typography'; import { FlatListScreenPaddingTop } from 'styles/sharedStyles'; import { isAddress, isEthereumAddress } from '@polkadot/util-crypto'; -import reformatAddress from 'utils/index'; import { useSelector } from 'react-redux'; import { RootState } from 'stores/index'; import { isAccountAll } from 'utils/accountAll'; @@ -21,6 +20,7 @@ import { SWModalRefProps } from 'components/design-system-ui/modal/ModalBaseV2'; import useGetChainInfoByGenesisHash from 'hooks/chain/useGetChainInfoByGenesisHash'; import { ListRenderItemInfo } from '@shopify/flash-list'; import { AbstractAddressJson, AccountJson } from '@subwallet/extension-base/types'; +import { reformatAddress } from 'utils/account/account'; interface Props { modalVisible: boolean; diff --git a/src/components/Modal/AddressBook/ReadonlyAddressField.tsx b/src/components/Modal/AddressBook/ReadonlyAddressField.tsx index 544b7face..443846fe8 100644 --- a/src/components/Modal/AddressBook/ReadonlyAddressField.tsx +++ b/src/components/Modal/AddressBook/ReadonlyAddressField.tsx @@ -1,6 +1,6 @@ import { useSubWalletTheme } from 'hooks/useSubWalletTheme'; import { View } from 'react-native'; -import { Avatar, Button, Field, Icon, Typography } from 'components/design-system-ui'; +import { Button, Field, Icon, Typography } from 'components/design-system-ui'; import { toShort } from 'utils/index'; import React, { useCallback } from 'react'; import Clipboard from '@react-native-clipboard/clipboard'; @@ -8,6 +8,7 @@ import { Copy } from 'phosphor-react-native'; import createStylesheet from './style/ReadonlyAddressField'; import Toast from 'react-native-toast-notifications'; import i18n from 'utils/i18n/i18n'; +import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar'; interface Props { label?: string; @@ -32,7 +33,7 @@ export const ReadonlyAddressField = ({ address, label, showAvatar = true, toastR {showAvatar && ( - + )} {toShort(address, 9, 11)} diff --git a/src/components/Modal/Earning/EarningNominationModal/index.tsx b/src/components/Modal/Earning/EarningNominationModal/index.tsx index 05378fa13..ecc6d8290 100644 --- a/src/components/Modal/Earning/EarningNominationModal/index.tsx +++ b/src/components/Modal/Earning/EarningNominationModal/index.tsx @@ -1,7 +1,7 @@ import { _ChainAsset } from '@subwallet/chain-list/types'; import { _STAKING_CHAIN_GROUP } from '@subwallet/extension-base/services/earning-service/constants'; import { YieldPositionInfo } from '@subwallet/extension-base/types'; -import { Avatar, Number, SwModal, Typography } from 'components/design-system-ui'; +import { Number, SwModal, Typography } from 'components/design-system-ui'; import MetaInfo from 'components/MetaInfo'; import { useSubWalletTheme } from 'hooks/useSubWalletTheme'; import React, { useMemo } from 'react'; @@ -9,6 +9,7 @@ import { Platform, ScrollView, View } from 'react-native'; import { toShort } from 'utils/index'; import createStyles from './style'; import { deviceHeight } from 'constants/index'; +import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar'; interface Props { item: YieldPositionInfo; @@ -39,7 +40,7 @@ const EarningNominationModal: React.FC = (props: Props) => { return ( - + {nomination.validatorIdentity || toShort(nomination.validatorAddress)} diff --git a/src/components/Modal/ExportQrSignerModal.tsx b/src/components/Modal/ExportQrSignerModal.tsx index 461a0930d..5e78f00a8 100644 --- a/src/components/Modal/ExportQrSignerModal.tsx +++ b/src/components/Modal/ExportQrSignerModal.tsx @@ -10,7 +10,7 @@ import ViewShot from 'react-native-view-shot'; import { ColorMap } from 'styles/color'; import { FontBold, FontSemiBold, sharedStyles } from 'styles/sharedStyles'; import i18n from 'utils/i18n/i18n'; -import reformatAddress from 'utils/index'; +import { reformatAddress } from 'utils/account/account'; interface Props { networkKey: string; diff --git a/src/components/WalletConnect/Account/WCAccountInput.tsx b/src/components/WalletConnect/Account/WCAccountInput.tsx index 556ef107d..8b3b78361 100644 --- a/src/components/WalletConnect/Account/WCAccountInput.tsx +++ b/src/components/WalletConnect/Account/WCAccountInput.tsx @@ -1,6 +1,5 @@ import React, { useMemo } from 'react'; import AccountItemBase from 'components/common/Account/Item/AccountItemBase'; -import AvatarGroup from 'components/common/AvatarGroup'; import { Icon, Typography } from 'components/design-system-ui'; import { DotsThree } from 'phosphor-react-native'; import i18n from 'utils/i18n/i18n'; @@ -8,6 +7,7 @@ import { useSubWalletTheme } from 'hooks/useSubWalletTheme'; import { FontMedium } from 'styles/sharedStyles'; import { isSameAddress } from 'utils/account/account'; import { AccountJson } from '@subwallet/extension-base/types'; +import { AccountProxyAvatarGroup } from 'components/design-system-ui/avatar/account-proxy-avatar-group'; interface Props { accounts: AccountJson[]; @@ -20,6 +20,14 @@ export const WCAccountInput = ({ accounts, selected }: Props) => { () => accounts.filter(account => selected.some(address => isSameAddress(address, account.address))), [accounts, selected], ); + const basicAccountProxiesInfo = useMemo(() => { + return selectedAccounts.map(account => { + return { + id: account.proxyId || '', + name: account.name, + }; + }); + }, [selectedAccounts]); const countSelected = selectedAccounts.length; @@ -27,7 +35,7 @@ export const WCAccountInput = ({ accounts, selected }: Props) => { acc.address)} />} + leftItem={} middleItem={ {countSelected ? i18n.formatString(i18n.message.connectedAccounts, countSelected) : i18n.inputLabel.selectAcc} diff --git a/src/components/common/Field/AccountInfo/index.tsx b/src/components/common/Field/AccountInfo/index.tsx index 269bc1e1c..59aabbfdc 100644 --- a/src/components/common/Field/AccountInfo/index.tsx +++ b/src/components/common/Field/AccountInfo/index.tsx @@ -5,7 +5,7 @@ import { ColorMap } from 'styles/color'; import { FontMedium, sharedStyles } from 'styles/sharedStyles'; import { useSubWalletTheme } from 'hooks/useSubWalletTheme'; import AccountInfoFieldStyle from './style'; -import { Avatar } from 'components/design-system-ui'; +import { AccountProxyAvatar } from 'components/design-system-ui/avatar/account-proxy-avatar'; interface Props { address: string; @@ -27,7 +27,7 @@ const AccountInfoField = ({ address, name, rightIcon, style }: Props) => { return ( - + {name} diff --git a/src/hooks/chain/useAssetChecker.tsx b/src/hooks/chain/useAssetChecker.tsx new file mode 100644 index 000000000..f1b230fd4 --- /dev/null +++ b/src/hooks/chain/useAssetChecker.tsx @@ -0,0 +1,89 @@ +// Copyright 2019-2022 @subwallet/extension-koni-ui authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import { _ChainConnectionStatus } from '@subwallet/extension-base/services/chain-service/types'; +import { useCallback, useContext, useEffect, useRef, useState } from 'react'; +import { useSelector } from 'react-redux'; +import { RootState } from 'stores/index'; +import { useToast } from 'react-native-toast-notifications'; +import { enableChain, updateAssetSetting } from 'messaging/index'; +import i18n from 'utils/i18n/i18n'; +import { AppModalContext } from 'providers/AppModalContext'; + +export default function useAssetChecker() { + const { chainInfoMap, chainStateMap, chainStatusMap } = useSelector((root: RootState) => root.chainStore); + const { assetRegistry, assetSettingMap } = useSelector((root: RootState) => root.assetRegistry); + const [enablingAsset, setEnablingAsset] = useState(null); + const asset = useRef(null); + const { hideAll, show } = useToast(); + const { confirmModal } = useContext(AppModalContext); + + useEffect(() => { + if (enablingAsset && assetSettingMap[enablingAsset]?.visible) { + const assetInfo = assetRegistry[enablingAsset]; + const message = `${assetInfo?.symbol} is turned on.`; + + hideAll(); + show(message, { type: 'success' }); + setEnablingAsset(null); + } + }, [enablingAsset, chainInfoMap, chainStateMap, assetSettingMap, assetRegistry, hideAll, show]); + + return useCallback( + (assetSlug: string) => { + if (asset.current === assetSlug) { + return; + } + + asset.current = assetSlug; + const assetSetting = assetSettingMap[assetSlug]; + const assetInfo = assetRegistry[assetSlug]; + const chainState = chainStateMap[assetInfo.originChain]; + const chainInfo = chainInfoMap[assetInfo.originChain]; + const chainStatus = chainStatusMap[assetInfo.originChain]; + + if ((assetInfo && !assetSetting) || !assetSetting.visible) { + const message = `${assetInfo?.symbol} on ${chainInfo?.name} is not ready to use, do you want to turn it on?`; + + const _onEnabled = () => { + updateAssetSetting({ + tokenSlug: assetSlug, + assetSetting: { visible: true }, + autoEnableNativeToken: true, + }) + .then(() => { + setEnablingAsset(assetSlug); + hideAll(); + show(`${assetInfo?.symbol} is turning on.`, { type: 'success' }); + }) + .catch(console.error); + }; + + setTimeout(() => { + confirmModal.setConfirmModal({ + visible: true, + completeBtnTitle: i18n.buttonTitles.enable, + message: message, + title: i18n.common.enableChain, + onCancelModal: () => { + confirmModal.hideConfirmModal(); + }, + onCompleteModal: () => { + _onEnabled(); + setTimeout(() => confirmModal.hideConfirmModal(), 300); + }, + messageIcon: assetInfo.originChain, + }); + }, 700); + } else if (!!assetSetting?.visible && !chainState?.active) { + enableChain(assetInfo.originChain, false).catch(console.error); + } else if (chainStatus && chainStatus.connectionStatus === _ChainConnectionStatus.DISCONNECTED) { + const message = `Chain ${chainInfo?.name} is disconnected`; + + hideAll(); + show(message, { type: 'danger' }); + } + }, + [assetRegistry, assetSettingMap, chainInfoMap, chainStateMap, chainStatusMap, confirmModal, hideAll, show], + ); +} diff --git a/src/hooks/screen/Home/Crypto/useBuyToken.ts b/src/hooks/screen/Home/Crypto/useBuyToken.ts index 2224cb4a3..924d1fadf 100644 --- a/src/hooks/screen/Home/Crypto/useBuyToken.ts +++ b/src/hooks/screen/Home/Crypto/useBuyToken.ts @@ -1,39 +1,36 @@ import { useSelector } from 'react-redux'; import { RootState } from 'stores/index'; -import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { AccountJson } from '@subwallet/extension-base/background/types'; -import { reformatAddress } from '@subwallet/extension-base/utils'; -import { getAccountType } from 'utils/index'; -import { findNetworkJsonByGenesisHash } from 'utils/getNetworkJsonByGenesisHash'; -import { findAccountByAddress } from 'utils/account'; -import { AccountType } from 'types/ui-types'; +import { useCallback, useEffect, useMemo, useRef } from 'react'; +import { getReformatedAddressRelatedToChain } from 'utils/account'; import { TokenItemType } from 'components/Modal/common/TokenSelector'; import { ModalRef } from 'types/modalRef'; import { InAppBrowser } from 'react-native-inappbrowser-reborn'; import { Linking, Platform } from 'react-native'; import { ServiceItem, baseServiceItems } from 'screens/Home/Crypto/ServiceModal'; -import { BuyServiceInfo, BuyTokenInfo, CreateBuyOrderFunction, SupportService } from 'types/buy'; +import { BuyServiceInfo, CreateBuyOrderFunction, SupportService } from 'types/buy'; import { BrowserOptions, createBanxaOrder, createCoinbaseOrder, createTransakOrder } from 'utils/buy'; -import { isEthereumAddress } from '@polkadot/util-crypto'; import { isAccountAll } from 'utils/accountAll'; import useAppLock from 'hooks/useAppLock'; -import { _isAssetFungibleToken } from '@subwallet/extension-base/services/chain-service/utils'; - -type BuyTokenSelectedResult = { - selectedBuyAccount?: string; - selectedBuyToken?: string; -}; +import { _getOriginChainOfAsset, _isAssetFungibleToken } from '@subwallet/extension-base/services/chain-service/utils'; +import { AccountJson, AccountProxy, BuyTokenInfo } from '@subwallet/extension-base/types'; +import { reformatAddress } from 'utils/account/account'; +import { AccountAddressItemType } from 'types/account'; +import useFormControl, { FormControlConfig } from 'hooks/screen/useFormControl'; +import { useGetChainSlugsByAccount } from 'hooks/useGetChainSlugsByAccount'; +import useAssetChecker from 'hooks/chain/useAssetChecker'; const convertChainActivePriority = (active?: boolean) => (active ? 1 : 0); -export default function useBuyToken(currentSymbol?: string) { - const { accounts, isAllAccount, currentAccount } = useSelector((state: RootState) => state.accountState); +export default function useBuyToken(currentAccountProxy: AccountProxy | null, currentSymbol?: string) { + const { accountProxies } = useSelector((state: RootState) => state.accountState); const { assetRegistry } = useSelector((state: RootState) => state.assetRegistry); const { isLocked } = useAppLock(); const { walletReference } = useSelector((state: RootState) => state.settings); const { chainInfoMap, chainStateMap } = useSelector((state: RootState) => state.chainStore); const { services, tokens } = useSelector((state: RootState) => state.buyService); - const fixedTokenKey = useMemo((): string | undefined => { + const checkAsset = useAssetChecker(); + const allowedChains = useGetChainSlugsByAccount(); + const fixedTokenSlug = useMemo((): string | undefined => { if (currentSymbol) { return Object.values(tokens).filter(value => value.slug === currentSymbol || value.symbol === currentSymbol)[0] ?.slug; @@ -41,19 +38,32 @@ export default function useBuyToken(currentSymbol?: string) { return undefined; } }, [currentSymbol, tokens]); - const [{ selectedBuyAccount, selectedBuyToken }, setBuyTokenSelectedResult] = useState({ - selectedBuyAccount: isAllAccount ? undefined : currentAccount?.address, - selectedBuyToken: fixedTokenKey || '', - }); - const [{ selectedService }, setSelectedService] = useState<{ selectedService: SupportService | undefined }>({ - selectedService: undefined, + + const formConfig = useMemo((): FormControlConfig => { + return { + address: { + name: 'address', + value: '', + require: true, + }, + tokenSlug: { + name: 'Token', + value: fixedTokenSlug || '', + }, + service: { + name: 'service', + value: '' as SupportService, + }, + }; + }, [fixedTokenSlug]); + + const { formState, onChangeValue } = useFormControl(formConfig, { + onSubmitForm: () => {}, }); + console.log('formState', formState.data); const getServiceItems = useCallback( - (tokenSlug: string | undefined): ServiceItem[] => { - if (!tokenSlug) { - return []; - } + (tokenSlug: string): ServiceItem[] => { const buyInfo = tokens[tokenSlug]; const result: ServiceItem[] = []; @@ -74,90 +84,63 @@ export default function useBuyToken(currentSymbol?: string) { const isCloseByLockScreen = useRef(false); const isOpenInAppBrowser = useRef(false); const sleep = (timeout: number) => new Promise(resolve => setTimeout(resolve, timeout)); - const serviceItems = useMemo(() => getServiceItems(selectedBuyToken), [getServiceItems, selectedBuyToken]); + const serviceItems = useMemo( + () => getServiceItems(formState.data.tokenSlug), + [getServiceItems, formState.data.tokenSlug], + ); const disclaimerData = useMemo((): BuyServiceInfo => { - if (!selectedService) { - return { name: '', url: '', contactUrl: '', policyUrl: '', termUrl: '' }; - } - return services[selectedService] || { name: '', url: '', contactUrl: '', policyUrl: '', termUrl: '' }; - }, [selectedService, services]); + return services[formState.data.service] || { name: '', url: '', contactUrl: '', policyUrl: '', termUrl: '' }; + }, [formState.data.service, services]); const accountBuyRef = useRef(); const tokenBuyRef = useRef(); const serviceBuyRef = useRef(); - const filterAccountType = useMemo((): AccountType => { - if (currentSymbol) { - let result: AccountType = '' as AccountType; + const accountAddressItems = useMemo(() => { + const selectedTokenSlug = formState.data.tokenSlug; + const chainSlug = selectedTokenSlug ? _getOriginChainOfAsset(selectedTokenSlug) : undefined; + const chainInfo = chainSlug ? chainInfoMap[chainSlug] : undefined; - const list = Object.values(tokens).filter( - value => value.slug === currentSymbol || value.symbol === currentSymbol, - ); - - list.forEach(info => { - if (result) { - if (result !== info.support) { - if (result === 'SUBSTRATE' || result === 'ETHEREUM') { - result = 'ALL'; - } - } - } else { - result = info.support; - } - }); - - return result; - } else { - return 'ALL'; + if (!chainInfo) { + return []; } - }, [currentSymbol, tokens]); - const accountsFilter = useCallback( - (account: AccountJson) => { - if (isAccountAll(account.address)) { - return false; - } + const result: AccountAddressItemType[] = []; - if (filterAccountType !== 'ALL') { - if (filterAccountType === 'ETHEREUM') { - return isEthereumAddress(account.address); - } else { - return !isEthereumAddress(account.address); - } - } + const updateResult = (ap: AccountProxy) => { + ap.accounts.forEach(a => { + const address = getReformatedAddressRelatedToChain(a, chainInfo); - return true; - }, - [filterAccountType], - ); - const buyAccountSelectorItems = useMemo(() => { - return accounts.filter(accountsFilter); - }, [accounts, accountsFilter]); - - const accountType = useMemo( - () => (selectedBuyAccount ? getAccountType(selectedBuyAccount) : ''), - [selectedBuyAccount], - ); + if (address) { + result.push({ + accountName: ap.name, + accountProxyId: ap.id, + accountProxyType: ap.accountType, + accountType: a.type, + address, + }); + } + }); + }; - const ledgerNetwork = useMemo((): string | undefined => { - const account = findAccountByAddress(accounts, selectedBuyAccount); + if (currentAccountProxy && isAccountAll(currentAccountProxy.id)) { + accountProxies.forEach(ap => { + if (isAccountAll(ap.id)) { + return; + } - if (account?.originGenesisHash) { - return findNetworkJsonByGenesisHash(chainInfoMap, account.originGenesisHash)?.slug; + updateResult(ap); + }); + } else { + currentAccountProxy && updateResult(currentAccountProxy); } - return undefined; - }, [accounts, chainInfoMap, selectedBuyAccount]); + return result; + }, [accountProxies, chainInfoMap, currentAccountProxy, formState.data.tokenSlug]); const tokenItems = useMemo(() => { const result: TokenItemType[] = []; - const list = [...Object.values(tokens)]; - - const filtered = currentSymbol - ? list.filter(value => value.slug === currentSymbol || value.symbol === currentSymbol) - : list; - const convertToItem = (info: BuyTokenInfo): TokenItemType => { return { name: assetRegistry[info.slug]?.name || info.symbol, @@ -167,38 +150,35 @@ export default function useBuyToken(currentSymbol?: string) { }; }; - filtered.forEach(info => { - const item = convertToItem(info); + Object.values(tokens).forEach(item => { + if (!allowedChains.includes(item.network)) { + return; + } - if (ledgerNetwork) { - if (info.network === ledgerNetwork) { - result.push(item); - } - } else { - if (accountType === 'ALL' || accountType === info.support) { - result.push(item); - } + if (!currentSymbol || item.slug === currentSymbol || item.symbol === currentSymbol) { + result.push(convertToItem(item)); } }); return result; - }, [accountType, assetRegistry, currentSymbol, ledgerNetwork, tokens]); + }, [allowedChains, assetRegistry, currentSymbol, tokens]); const isSupportBuyTokens = useMemo(() => { - if (selectedService && selectedBuyAccount && selectedBuyToken) { - const buyInfo = tokens[selectedBuyToken]; - const _accountType = getAccountType(selectedBuyAccount); + const selectedTokenSlug = formState.data.tokenSlug; + const selectedAddress = formState.data.address; + const selectedService = formState.data.service as SupportService; + if (selectedService && selectedTokenSlug && selectedAddress) { + const buyInfo = tokens[selectedTokenSlug]; return ( buyInfo && - buyInfo.support === _accountType && buyInfo.services.includes(selectedService) && - tokenItems.find(item => item.slug === selectedBuyToken) + tokenItems.find(item => item.slug === selectedTokenSlug) ); } return false; - }, [selectedService, selectedBuyAccount, selectedBuyToken, tokens, tokenItems]); + }, [formState.data.tokenSlug, formState.data.address, formState.data.service, tokens, tokenItems]); const buyTokenSelectorItems = useMemo(() => { const raw = tokenItems.filter(item => { @@ -217,16 +197,22 @@ export default function useBuyToken(currentSymbol?: string) { return raw; }, [assetRegistry, chainStateMap, tokenItems]); - const openSelectBuyAccount = useCallback((account: AccountJson) => { - setSelectedService({ selectedService: undefined }); - setBuyTokenSelectedResult({ selectedBuyAccount: account.address }); - }, []); + const openSelectBuyAccount = useCallback( + (account: AccountJson) => { + onChangeValue('service')(''); + onChangeValue('address')(account.address); + }, + [onChangeValue], + ); - const openSelectBuyToken = useCallback((item: TokenItemType) => { - setBuyTokenSelectedResult(prevState => ({ ...prevState, selectedBuyToken: item.slug })); - setSelectedService({ selectedService: undefined }); - tokenBuyRef && tokenBuyRef.current?.onCloseModal(); - }, []); + const openSelectBuyToken = useCallback( + (item: TokenItemType) => { + onChangeValue('tokenSlug')(item.slug); + onChangeValue('service')(''); + tokenBuyRef && tokenBuyRef.current?.onCloseModal(); + }, + [onChangeValue], + ); const onCloseSelectBuyAccount = useCallback(() => { accountBuyRef && accountBuyRef.current?.onCloseModal(); @@ -242,11 +228,14 @@ export default function useBuyToken(currentSymbol?: string) { const onBuyToken = useCallback( async (currentUrl?: string) => { - if (!selectedBuyAccount || !selectedBuyToken || !selectedService) { + const selectedTokenSlug = formState.data.tokenSlug; + const selectedAddress = formState.data.address; + const selectedService = formState.data.service as SupportService; + if (!selectedAddress || !selectedTokenSlug || !selectedService) { console.warn( 'no: selectedBuyAccount || selectedBuyToken || selectedService', - selectedBuyAccount, - selectedBuyToken, + selectedAddress, + selectedTokenSlug, selectedService, ); return; @@ -268,7 +257,7 @@ export default function useBuyToken(currentSymbol?: string) { console.warn('no urlPromise'); return; } - const buyInfo = tokens[selectedBuyToken]; + const buyInfo = tokens[selectedTokenSlug]; const serviceInfo = buyInfo.serviceInfo[selectedService]; if (!serviceInfo) { console.warn('no serviceInfo'); @@ -277,7 +266,7 @@ export default function useBuyToken(currentSymbol?: string) { const { network: serviceNetwork, symbol } = serviceInfo; const { network } = buyInfo; const networkPrefix = chainInfoMap[network].substrateInfo?.addressPrefix; - const walletAddress = reformatAddress(selectedBuyAccount, networkPrefix === undefined ? -1 : networkPrefix); + const walletAddress = reformatAddress(selectedTokenSlug, networkPrefix === undefined ? -1 : networkPrefix); try { const url = await urlPromise(symbol, walletAddress, serviceNetwork, walletReference); if (await InAppBrowser.isAvailable()) { @@ -295,11 +284,11 @@ export default function useBuyToken(currentSymbol?: string) { console.log('error message for buy feature', errorMessage); } }, - [chainInfoMap, selectedBuyAccount, selectedBuyToken, selectedService, tokens, walletReference], + [chainInfoMap, formState.data.address, formState.data.service, formState.data.tokenSlug, tokens, walletReference], ); const onPressItem = (currentValue: SupportService) => { - setSelectedService({ selectedService: currentValue }); + onChangeValue('service')(currentValue); serviceBuyRef?.current?.onCloseModal(); }; @@ -319,40 +308,65 @@ export default function useBuyToken(currentSymbol?: string) { }, [isLocked, onBuyToken]); useEffect(() => { - setBuyTokenSelectedResult(prev => ({ - ...prev, - selectedAccount: currentAccount?.address, - })); - }, [currentAccount?.address]); + if (!fixedTokenSlug && tokenItems.length) { + const tokenSlug = formState.data.tokenSlug; + + if (!tokenSlug) { + onChangeValue('tokenSlug')(tokenItems[0].slug); + } else { + const isSelectedTokenInList = tokenItems.some(i => i.slug === tokenSlug); + + if (!isSelectedTokenInList) { + onChangeValue('tokenSlug')(tokenItems[0].slug); + } + } + } else if (fixedTokenSlug) { + setTimeout(() => { + onChangeValue('tokenSlug')(fixedTokenSlug); + }, 100); + } + }, [fixedTokenSlug, formState.data.tokenSlug, onChangeValue, tokenItems]); + + useEffect(() => { + formState.data.tokenSlug && checkAsset(formState.data.tokenSlug); + }, [checkAsset, formState.data.tokenSlug]); useEffect(() => { - if (serviceItems.length) { - const supportedSevices = serviceItems.filter(service => !service.disabled); - if (!supportedSevices.length) { + const selectedAddress = formState.data.address; + const updateFromValue = () => { + if (!accountAddressItems.length) { return; } - if (supportedSevices.length === 1) { - setSelectedService({ selectedService: supportedSevices[0].key }); + if (accountAddressItems.length === 1) { + if (!selectedAddress || accountAddressItems[0].address !== selectedAddress) { + onChangeValue('address')(accountAddressItems[0].address); + } + } else { + if (selectedAddress && !accountAddressItems.some(i => i.address === selectedAddress)) { + console.log('run to this'); + onChangeValue('address')(''); + } } - } - }, [selectedBuyToken, selectedService, serviceItems]); + }; + + updateFromValue(); + }, [accountAddressItems, formState.data.address, formState.data.service, formState.data.tokenSlug, onChangeValue]); + useEffect(() => { - if (buyTokenSelectorItems.length) { - if (!fixedTokenKey) { - setBuyTokenSelectedResult(prevState => ({ ...prevState, selectedBuyToken: buyTokenSelectorItems[0].slug })); - } else { - const isSelectedTokenInList = buyTokenSelectorItems.some(i => i.slug === fixedTokenKey); + const selectedTokenSlug = formState.data.tokenSlug; - if (!isSelectedTokenInList) { - setBuyTokenSelectedResult(prevState => ({ ...prevState, selectedBuyToken: buyTokenSelectorItems[0].slug })); - } else { - setBuyTokenSelectedResult(prevState => ({ ...prevState, selectedBuyToken: fixedTokenKey })); - } + if (selectedTokenSlug) { + const _services = getServiceItems(selectedTokenSlug); + const filtered = _services.filter(service => !service.disabled); + + if (filtered.length > 1) { + onChangeValue('service')(''); + } else { + onChangeValue('service')(filtered[0]?.key || ''); } } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [buyTokenSelectorItems.toString(), fixedTokenKey]); + }, [getServiceItems, formState.data.tokenSlug, onChangeValue]); return { openSelectBuyAccount, @@ -360,16 +374,16 @@ export default function useBuyToken(currentSymbol?: string) { onCloseSelectBuyAccount, onCloseSelectBuyToken, onCloseSelectBuyService, - selectedBuyAccount, - selectedBuyToken, - buyAccountSelectorItems, - buyTokenSelectorItems, + selectedBuyAccount: formState.data.address, + selectedBuyToken: formState.data.tokenSlug, + buyAccountSelectorItems: accountAddressItems, + buyTokenSelectorItems: buyTokenSelectorItems, accountBuyRef, tokenBuyRef, serviceBuyRef, onBuyToken, onPressItem, - selectedService, + selectedService: formState.data.service, serviceItems, disclaimerData, isSupportBuyTokens, diff --git a/src/messaging/index.ts b/src/messaging/index.ts index ef005baee..6079d57ae 100644 --- a/src/messaging/index.ts +++ b/src/messaging/index.ts @@ -1,7 +1,9 @@ import { CronReloadRequest, + CronServiceType, MobileData, ResponseSubscribeHistory, + SubscriptionServiceType, TransactionHistoryItem, } from '@subwallet/extension-base/background/KoniTypes'; import { sendMessage } from 'messaging/base'; @@ -19,6 +21,26 @@ export async function reloadCron(request: CronReloadRequest): Promise { return sendMessage('pri(cron.reload)', request); } +export async function startCronServices(request: CronServiceType[]): Promise { + return sendMessage('mobile(cron.start)', request); +} + +export async function stopCronServices(request: CronServiceType[]): Promise { + return sendMessage('mobile(cron.stop)', request); +} + +export async function restartCronServices(request: CronServiceType[]): Promise { + return sendMessage('mobile(cron.restart)', request); +} + +export async function startSubscriptionServices(request: SubscriptionServiceType[]): Promise { + return sendMessage('mobile(subscription.start)', request); +} + +export async function stopSubscriptionServices(request: SubscriptionServiceType[]): Promise { + return sendMessage('mobile(subscription.stop)', request); +} + export async function subscribeTransactionHistory( chain: string, address: string, diff --git a/src/screens/Home/Crypto/BuyToken.tsx b/src/screens/Home/Crypto/BuyToken.tsx index 81d93a199..53bacaa22 100644 --- a/src/screens/Home/Crypto/BuyToken.tsx +++ b/src/screens/Home/Crypto/BuyToken.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { ContainerWithSubHeader } from 'components/ContainerWithSubHeader'; import { Button, Icon, PageIcon, Typography } from 'components/design-system-ui'; import { ShoppingCartSimple } from 'phosphor-react-native'; @@ -21,8 +21,6 @@ import { ThemeTypes } from 'styles/themes'; import { BuyTokenProps } from 'routes/wrapper'; import { DisclaimerModal } from 'components/Buy/DisclaimerModal'; import { SupportService } from 'types/buy'; -import useChainChecker from 'hooks/chain/useChainChecker'; -import { AppModalContext } from 'providers/AppModalContext'; import { TokenItemType } from 'components/Modal/common/TokenSelector'; const submitButtonIcon = (iconColor: string) => ( @@ -37,7 +35,7 @@ export const BuyToken = ({ const theme = useSubWalletTheme().swThemes; const styles = useMemo(() => createStyle(theme), [theme]); const { tokens } = useSelector((state: RootState) => state.buyService); - const { confirmModal } = useContext(AppModalContext); + const currentAccountProxy = useSelector((state: RootState) => state.accountState.currentAccountProxy); const { openSelectBuyAccount, openSelectBuyToken, @@ -53,7 +51,7 @@ export const BuyToken = ({ selectedService, serviceItems, disclaimerData, - } = useBuyToken(groupSymbol); + } = useBuyToken(currentAccountProxy, groupSymbol); const [disclaimerAgree, setDisclaimerAgree] = useState>({ transak: false, banxa: false, @@ -64,24 +62,6 @@ export const BuyToken = ({ const [isVisible, setVisible] = useState(false); const { isAllAccount } = useSelector((state: RootState) => state.accountState); const { contactUrl, name: serviceName, policyUrl, termUrl, url } = disclaimerData; - const { checkChainConnected, turnOnChain } = useChainChecker(); - const sortedBuyTokenSelectorItems = useMemo(() => { - return buyTokenSelectorItems.sort((a, b) => { - if (checkChainConnected(a.originChain)) { - if (checkChainConnected(b.originChain)) { - return 0; - } else { - return -1; - } - } else { - if (checkChainConnected(b.originChain)) { - return 1; - } else { - return 0; - } - } - }); - }, [buyTokenSelectorItems, checkChainConnected]); useEffect(() => { const onBackPress = () => { @@ -93,41 +73,11 @@ export const BuyToken = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const showPopupEnableChain = useCallback( - (chain: string) => { - if (!chain) { - return; - } - const isConnected = checkChainConnected(chain); - - if (!isConnected) { - setTimeout(() => { - confirmModal.setConfirmModal({ - visible: true, - completeBtnTitle: i18n.buttonTitles.enable, - message: i18n.common.enableChainMessage, - title: i18n.common.enableChain, - onCancelModal: () => { - confirmModal.hideConfirmModal(); - }, - onCompleteModal: () => { - turnOnChain(chain); - setTimeout(() => confirmModal.hideConfirmModal(), 300); - }, - messageIcon: chain, - }); - }, 700); - } - }, - [confirmModal, checkChainConnected, turnOnChain], - ); - const onSelectBuyToken = useCallback( (item: TokenItemType) => { openSelectBuyToken(item); - showPopupEnableChain(item.originChain); }, - [openSelectBuyToken, showPopupEnableChain], + [openSelectBuyToken], ); const selectedAccount = useGetAccountByAddress(selectedBuyAccount); @@ -139,7 +89,7 @@ export const BuyToken = ({ }, [selectedBuyToken, tokens]); const onSubmit = () => { - if (selectedService && disclaimerAgree[selectedService]) { + if (selectedService && disclaimerAgree[selectedService as SupportService]) { onBuyToken(); return; } @@ -170,26 +120,10 @@ export const BuyToken = ({ - ( - - )} - /> + ( + + )} + /> {i18n.message.buyMessage}