From 73507deab0bfc65114641c43e0dd7762d0678bc3 Mon Sep 17 00:00:00 2001 From: evavirseda Date: Fri, 5 Jul 2024 13:24:18 +0200 Subject: [PATCH] feat(wallet-dashboard): update send flow after clustering coins by coin type (#839) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(wallet-dashboard): improve coins portfolio by clustering them by coin type * feat(wallet-dashboard): remove disabled rule * feat(wallet-dashboard): update types and improve code * feat(wallet-dashboard): fix build * feat(wallet-dashboard): remove useCoinMetadata from filterAndSortTokenBalances * feat(wallet-dashboard): cleanup * feat(wallet-dashboard): sort by coinType * feat(wallet-dashboard): add dropdown component * feat(wallet-dashboard): rename component * feat(wallet-dashboard): udpate popup logic * feat(core): add info to function * feat(core): move useSortedCoinsByCategories hook to core and use it in dashboard * feat(wallet-dashboard): add comment and link to issue * feat(wallet-dashboard): cleanup * fix(wallet-dashboard): add conditional and use another format for documentation * fix(dashboard): improvements * feat(dashboard): add disabled feature to dropdown component * fix(dashboard): rename Dropdown fields * feat(wallet-dashboard): allow sending coins with any coin type (#929) * feat(wallet-dashboard): show unrecognized coins * feat(wallet-dashboard): allow sending coins with any coin type --------- Co-authored-by: Begoña Álvarez de la Cruz Co-authored-by: cpl121 <100352899+cpl121@users.noreply.github.com> Co-authored-by: cpl121 --- apps/core/src/constants/coins.constants.ts | 5 ++ apps/core/src/constants/index.ts | 2 + .../constants/recognizedPackages.constants.ts | 6 ++ apps/core/src/hooks/index.ts | 1 + .../src}/hooks/useSortedCoinsByCategories.ts | 31 ++++---- .../src/utils/filterAndSortTokenBalances.ts | 18 ++--- .../app/dashboard/home/page.tsx | 4 +- .../components/Coins/AllCoins.tsx | 44 ----------- .../components/Coins/MyCoins.tsx | 74 ++++++++++++++++++ .../components/Coins/index.ts | 2 +- apps/wallet-dashboard/components/Dropdown.tsx | 53 +++++++++++++ .../Popups/SendCoinPopup/SendCoinPopup.tsx | 75 +++++++++++++------ .../views/EnterValuesFormView.tsx | 3 +- apps/wallet-dashboard/components/index.ts | 1 + .../hooks/useSendCoinTransaction.ts | 15 ++-- apps/wallet/src/ui/app/hooks/index.ts | 2 +- .../ui/app/hooks/useCoinsReFetchingConfig.ts | 8 +- .../src/ui/app/hooks/useRecognizedPackages.ts | 5 +- .../app/pages/home/tokens/TokensDetails.tsx | 3 +- 19 files changed, 237 insertions(+), 115 deletions(-) create mode 100644 apps/core/src/constants/coins.constants.ts create mode 100644 apps/core/src/constants/recognizedPackages.constants.ts rename apps/{wallet/src/ui/app => core/src}/hooks/useSortedCoinsByCategories.ts (58%) delete mode 100644 apps/wallet-dashboard/components/Coins/AllCoins.tsx create mode 100644 apps/wallet-dashboard/components/Coins/MyCoins.tsx create mode 100644 apps/wallet-dashboard/components/Dropdown.tsx diff --git a/apps/core/src/constants/coins.constants.ts b/apps/core/src/constants/coins.constants.ts new file mode 100644 index 00000000000..11fba0c12a0 --- /dev/null +++ b/apps/core/src/constants/coins.constants.ts @@ -0,0 +1,5 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +export const COINS_QUERY_REFETCH_INTERVAL = 20_000; +export const COINS_QUERY_STALE_TIME = 20_000; diff --git a/apps/core/src/constants/index.ts b/apps/core/src/constants/index.ts index 92489fa3c4b..50a180aa574 100644 --- a/apps/core/src/constants/index.ts +++ b/apps/core/src/constants/index.ts @@ -2,3 +2,5 @@ // SPDX-License-Identifier: Apache-2.0 export * from './staking.constants'; +export * from './recognizedPackages.constants'; +export * from './coins.constants'; diff --git a/apps/core/src/constants/recognizedPackages.constants.ts b/apps/core/src/constants/recognizedPackages.constants.ts new file mode 100644 index 00000000000..2c1335ae1ea --- /dev/null +++ b/apps/core/src/constants/recognizedPackages.constants.ts @@ -0,0 +1,6 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +import { IOTA_FRAMEWORK_ADDRESS, IOTA_SYSTEM_ADDRESS } from '@iota/iota.js/utils'; + +export const DEFAULT_RECOGNIZED_PACKAGES = [IOTA_FRAMEWORK_ADDRESS, IOTA_SYSTEM_ADDRESS]; diff --git a/apps/core/src/hooks/index.ts b/apps/core/src/hooks/index.ts index 82e2dda8953..646721aa723 100644 --- a/apps/core/src/hooks/index.ts +++ b/apps/core/src/hooks/index.ts @@ -31,6 +31,7 @@ export * from './useKioskClient'; export * from './useQueryTransactionsByAddress'; export * from './useGetTransaction'; export * from './useExtendedTransactionSummary'; +export * from './useSortedCoinsByCategories'; export * from './useGetNFTMeta'; export * from './useIotaAddressValidation'; diff --git a/apps/wallet/src/ui/app/hooks/useSortedCoinsByCategories.ts b/apps/core/src/hooks/useSortedCoinsByCategories.ts similarity index 58% rename from apps/wallet/src/ui/app/hooks/useSortedCoinsByCategories.ts rename to apps/core/src/hooks/useSortedCoinsByCategories.ts index 1bab036bda8..33a912d0846 100644 --- a/apps/wallet/src/ui/app/hooks/useSortedCoinsByCategories.ts +++ b/apps/core/src/hooks/useSortedCoinsByCategories.ts @@ -2,13 +2,12 @@ // Modifications Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 -import { usePinnedCoinTypes } from '_app/hooks/usePinnedCoinTypes'; -import { useRecognizedPackages } from '_app/hooks/useRecognizedPackages'; -import { type CoinBalance as CoinBalanceType } from '@iota/iota.js/client'; +import { type CoinBalance } from '@iota/iota.js/client'; import { IOTA_TYPE_ARG } from '@iota/iota.js/utils'; import { useMemo } from 'react'; +import { DEFAULT_RECOGNIZED_PACKAGES } from '../constants'; -function sortCoins(balances: CoinBalanceType[]) { +function sortCoins(balances: CoinBalance[]) { return balances.sort((a, b) => { if (a.coinType === IOTA_TYPE_ARG) { return -1; @@ -18,26 +17,30 @@ function sortCoins(balances: CoinBalanceType[]) { }); } -export function useSortedCoinsByCategories(coinBalances: CoinBalanceType[]) { - const recognizedPackages = useRecognizedPackages(); - const [pinnedCoinTypes] = usePinnedCoinTypes(); +export function useSortedCoinsByCategories(coinBalances: CoinBalance[]) { + const recognizedPackages = DEFAULT_RECOGNIZED_PACKAGES; // previous: useRecognizedPackages(); + + // Commented out pinnedCoinTypes until https://github.com/iotaledger/iota/issues/832 is resolved + // const [pinnedCoinTypes] = usePinnedCoinTypes(); return useMemo(() => { const reducedCoinBalances = coinBalances?.reduce( (acc, coinBalance) => { if (recognizedPackages.includes(coinBalance.coinType.split('::')[0])) { acc.recognized.push(coinBalance); - } else if (pinnedCoinTypes.includes(coinBalance.coinType)) { - acc.pinned.push(coinBalance); - } else { + } + // else if (pinnedCoinTypes.includes(coinBalance.coinType)) { + // acc.pinned.push(coinBalance); + // } + else { acc.unrecognized.push(coinBalance); } return acc; }, { - recognized: [] as CoinBalanceType[], - pinned: [] as CoinBalanceType[], - unrecognized: [] as CoinBalanceType[], + recognized: [] as CoinBalance[], + pinned: [] as CoinBalance[], + unrecognized: [] as CoinBalance[], }, ) ?? { recognized: [], pinned: [], unrecognized: [] }; @@ -46,5 +49,5 @@ export function useSortedCoinsByCategories(coinBalances: CoinBalanceType[]) { pinned: sortCoins(reducedCoinBalances.pinned), unrecognized: sortCoins(reducedCoinBalances.unrecognized), }; - }, [coinBalances, recognizedPackages, pinnedCoinTypes]); + }, [coinBalances, recognizedPackages /*pinnedCoinTypes*/]); } diff --git a/apps/core/src/utils/filterAndSortTokenBalances.ts b/apps/core/src/utils/filterAndSortTokenBalances.ts index a1b7f1cffa1..23230cadd48 100644 --- a/apps/core/src/utils/filterAndSortTokenBalances.ts +++ b/apps/core/src/utils/filterAndSortTokenBalances.ts @@ -3,8 +3,8 @@ import { type CoinBalance } from '@iota/iota.js/client'; import { getCoinSymbol } from '../hooks'; -import { IOTA_TYPE_ARG } from '@iota/iota.js/utils'; +// Move this to the API backend https://github.com/iotaledger/iota/issues/922 /** * Filter and sort token balances by symbol and total balance. * IOTA tokens are always sorted first. @@ -14,15 +14,9 @@ import { IOTA_TYPE_ARG } from '@iota/iota.js/utils'; export function filterAndSortTokenBalances(tokens: CoinBalance[]) { return tokens .filter((token) => Number(token.totalBalance) > 0) - .sort((a, b) => { - if (a.coinType === IOTA_TYPE_ARG && b.coinType !== IOTA_TYPE_ARG) { - return -1; - } else if (a.coinType !== IOTA_TYPE_ARG && b.coinType === IOTA_TYPE_ARG) { - return 1; - } - - return (getCoinSymbol(a.coinType) + Number(a.totalBalance)).localeCompare( - getCoinSymbol(a.coinType) + Number(b.totalBalance), - ); - }); + .sort((a, b) => + (getCoinSymbol(a.coinType) + Number(a.totalBalance)).localeCompare( + getCoinSymbol(b.coinType) + Number(b.totalBalance), + ), + ); } diff --git a/apps/wallet-dashboard/app/dashboard/home/page.tsx b/apps/wallet-dashboard/app/dashboard/home/page.tsx index f3d1b9df660..f862e2ffc03 100644 --- a/apps/wallet-dashboard/app/dashboard/home/page.tsx +++ b/apps/wallet-dashboard/app/dashboard/home/page.tsx @@ -2,7 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 'use client'; -import { AccountBalance, AllCoins, Button, NewStakePopup } from '@/components'; +import { AccountBalance, MyCoins, Button, NewStakePopup } from '@/components'; import { usePopups } from '@/hooks'; import { useCurrentAccount, useCurrentWallet } from '@iota/dapp-kit'; @@ -23,7 +23,7 @@ function HomeDashboardPage(): JSX.Element {

Welcome

Address: {account.address}
- + )} diff --git a/apps/wallet-dashboard/components/Coins/AllCoins.tsx b/apps/wallet-dashboard/components/Coins/AllCoins.tsx deleted file mode 100644 index b651245ba19..00000000000 --- a/apps/wallet-dashboard/components/Coins/AllCoins.tsx +++ /dev/null @@ -1,44 +0,0 @@ -// Copyright (c) 2024 IOTA Stiftung -// SPDX-License-Identifier: Apache-2.0 - -import React from 'react'; -import { filterAndSortTokenBalances } from '@iota/core'; -import { useCurrentAccount, useIotaClientQuery } from '@iota/dapp-kit'; -import { CoinItem, SendCoinPopup } from '@/components'; -import { usePopups } from '@/hooks'; -import { CoinBalance } from '@iota/iota.js/client'; - -function AllCoins(): React.JSX.Element { - const { openPopup, closePopup } = usePopups(); - const account = useCurrentAccount(); - const { data: coins } = useIotaClientQuery( - 'getAllBalances', - { owner: account?.address ?? '' }, - { - enabled: !!account?.address, - select: filterAndSortTokenBalances, - }, - ); - - const openSendTokenPopup = (coin: CoinBalance, address: string) => { - openPopup(); - }; - - return ( -
-

My Coins:

- {coins?.map((coin, index) => { - return ( - openSendTokenPopup(coin, account?.address ?? '')} - /> - ); - })} -
- ); -} - -export default AllCoins; diff --git a/apps/wallet-dashboard/components/Coins/MyCoins.tsx b/apps/wallet-dashboard/components/Coins/MyCoins.tsx new file mode 100644 index 00000000000..b870b01df99 --- /dev/null +++ b/apps/wallet-dashboard/components/Coins/MyCoins.tsx @@ -0,0 +1,74 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +import React from 'react'; +import { useCurrentAccount, useIotaClientQuery } from '@iota/dapp-kit'; +import { CoinItem, SendCoinPopup } from '@/components'; +import { usePopups } from '@/hooks'; +import { CoinBalance } from '@iota/iota.js/client'; +import { + COINS_QUERY_REFETCH_INTERVAL, + COINS_QUERY_STALE_TIME, + filterAndSortTokenBalances, + useSortedCoinsByCategories, +} from '@iota/core'; + +function MyCoins(): React.JSX.Element { + const { openPopup, closePopup } = usePopups(); + const account = useCurrentAccount(); + const activeAccountAddress = account?.address; + + const { data: coinBalances } = useIotaClientQuery( + 'getAllBalances', + { owner: activeAccountAddress! }, + { + enabled: !!activeAccountAddress, + staleTime: COINS_QUERY_STALE_TIME, + refetchInterval: COINS_QUERY_REFETCH_INTERVAL, + select: filterAndSortTokenBalances, + }, + ); + const { recognized, unrecognized } = useSortedCoinsByCategories(coinBalances ?? []); + + function openSendTokenPopup(coin: CoinBalance, address: string): void { + if (coinBalances) { + openPopup( + , + ); + } + } + + return ( +
+

My Coins:

+ {recognized?.map((coin, index) => { + return ( + openSendTokenPopup(coin, account?.address ?? '')} + /> + ); + })} + Unrecognized coins + {unrecognized?.map((coin, index) => { + return ( + openSendTokenPopup(coin, account?.address ?? '')} + /> + ); + })} +
+ ); +} + +export default MyCoins; diff --git a/apps/wallet-dashboard/components/Coins/index.ts b/apps/wallet-dashboard/components/Coins/index.ts index 7bee9f4356c..d1519105eec 100644 --- a/apps/wallet-dashboard/components/Coins/index.ts +++ b/apps/wallet-dashboard/components/Coins/index.ts @@ -1,5 +1,5 @@ // Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 -export { default as AllCoins } from './AllCoins'; +export { default as MyCoins } from './MyCoins'; export { default as CoinItem } from './CoinItem'; diff --git a/apps/wallet-dashboard/components/Dropdown.tsx b/apps/wallet-dashboard/components/Dropdown.tsx new file mode 100644 index 00000000000..50ac7decf3f --- /dev/null +++ b/apps/wallet-dashboard/components/Dropdown.tsx @@ -0,0 +1,53 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +import React from 'react'; + +interface DropdownProps { + options: T[]; + selectedOption: T | null | undefined; + onChange: (selectedOption: T) => void; + placeholder?: string; + disabled?: boolean; + getOptionId: (option: T) => string | number; +} + +function Dropdown({ + options, + selectedOption, + onChange, + placeholder, + disabled = false, + getOptionId, +}: DropdownProps): JSX.Element { + function handleSelectionChange(e: React.ChangeEvent): void { + const selectedKey = e.target.value; + const selectedOption = options.find((option) => getOptionId(option) === selectedKey); + if (selectedOption) { + onChange(selectedOption); + } + } + + return ( + + ); +} + +export default Dropdown; diff --git a/apps/wallet-dashboard/components/Popup/Popups/SendCoinPopup/SendCoinPopup.tsx b/apps/wallet-dashboard/components/Popup/Popups/SendCoinPopup/SendCoinPopup.tsx index e55aa853a17..cc4bf5f2473 100644 --- a/apps/wallet-dashboard/components/Popup/Popups/SendCoinPopup/SendCoinPopup.tsx +++ b/apps/wallet-dashboard/components/Popup/Popups/SendCoinPopup/SendCoinPopup.tsx @@ -6,8 +6,9 @@ import { EnterValuesFormView, ReviewValuesFormView } from './views'; import { CoinBalance } from '@iota/iota.js/client'; import { useSendCoinTransaction, useNotifications } from '@/hooks'; import { useSignAndExecuteTransactionBlock } from '@iota/dapp-kit'; -import { useGetAllCoins } from '@iota/core'; import { NotificationType } from '@/stores/notificationStore'; +import { Dropdown } from '@/components'; +import { useGetAllCoins } from '@iota/core'; export interface FormDataValues { amount: string; @@ -18,6 +19,7 @@ interface SendCoinPopupProps { coin: CoinBalance; senderAddress: string; onClose: () => void; + coins: CoinBalance[]; } enum FormStep { @@ -25,15 +27,21 @@ enum FormStep { ReviewValues, } -function SendCoinPopup({ coin, senderAddress, onClose }: SendCoinPopupProps): JSX.Element { +function SendCoinPopup({ + coin, + senderAddress, + onClose, + coins, +}: SendCoinPopupProps): React.JSX.Element { const [step, setStep] = useState(FormStep.EnterValues); + const [selectedCoin, setCoin] = useState(coin); const [formData, setFormData] = useState({ amount: '', recipientAddress: '', }); - const { data: coins } = useGetAllCoins(coin.coinType, senderAddress); const { addNotification } = useNotifications(); - const totalCoins = coins?.reduce((partialSum, c) => partialSum + BigInt(c.balance), BigInt(0)); + + const { data: coinsData } = useGetAllCoins(selectedCoin.coinType, senderAddress); const { mutateAsync: signAndExecuteTransactionBlock, @@ -41,40 +49,61 @@ function SendCoinPopup({ coin, senderAddress, onClose }: SendCoinPopupProps): JS isPending, } = useSignAndExecuteTransactionBlock(); const { data: sendCoinData } = useSendCoinTransaction( - coin, + coinsData || [], + selectedCoin.coinType, senderAddress, formData.recipientAddress, formData.amount, - totalCoins === BigInt(formData.amount), + selectedCoin.totalBalance === formData.amount, ); - const handleTransfer = async () => { - if (!sendCoinData?.transaction) return; - signAndExecuteTransactionBlock({ - transactionBlock: sendCoinData.transaction, - }) - .then(() => { - onClose(); - addNotification('Transfer transaction has been sent'); + function handleTransfer() { + if (!sendCoinData?.transaction) { + addNotification('There was an error with the transaction', NotificationType.Error); + return; + } else { + signAndExecuteTransactionBlock({ + transactionBlock: sendCoinData.transaction, }) - .catch(() => { - addNotification('Transfer transaction was not sent', NotificationType.Error); - }); - }; + .then(() => { + onClose(); + addNotification('Transfer transaction has been sent'); + }) + .catch(() => { + addNotification('Transfer transaction was not sent', NotificationType.Error); + }); + } + } - const onNext = () => { + function onNext(): void { setStep(FormStep.ReviewValues); - }; + } - const onBack = () => { + function onBack(): void { setStep(FormStep.EnterValues); - }; + } + + function handleSelectedCoin(coin: CoinBalance): void { + setCoin(coin); + setFormData({ + amount: '', + recipientAddress: '', + }); + } return ( <> + _selectedCoin.coinType} + /> {step === FormStep.EnterValues && ( -

Send {coinMeta?.name.toUpperCase()}

+

Send

+

{coinMeta?.name.toUpperCase() ?? coinType}

Balance: {formattedCoin} {coinSymbol}

diff --git a/apps/wallet-dashboard/components/index.ts b/apps/wallet-dashboard/components/index.ts index 6a18bb79879..92c10096966 100644 --- a/apps/wallet-dashboard/components/index.ts +++ b/apps/wallet-dashboard/components/index.ts @@ -10,6 +10,7 @@ export { default as Input } from './Input'; export { default as VirtualList } from './VirtualList'; export { default as ExternalImage } from './ExternalImage'; export { default as TransactionIcon } from './TransactionIcon'; +export { default as Dropdown } from './Dropdown'; export * from './AccountBalance/AccountBalance'; export * from './Coins'; diff --git a/apps/wallet-dashboard/hooks/useSendCoinTransaction.ts b/apps/wallet-dashboard/hooks/useSendCoinTransaction.ts index d4ab7973863..bd2022535df 100644 --- a/apps/wallet-dashboard/hooks/useSendCoinTransaction.ts +++ b/apps/wallet-dashboard/hooks/useSendCoinTransaction.ts @@ -3,11 +3,12 @@ import { useCoinMetadata, createTokenTransferTransaction } from '@iota/core'; import { useIotaClient } from '@iota/dapp-kit'; -import { CoinBalance, CoinStruct } from '@iota/iota.js/client'; +import { CoinStruct } from '@iota/iota.js/client'; import { useQuery } from '@tanstack/react-query'; export function useSendCoinTransaction( - coin: CoinBalance, + coins: CoinStruct[], + coinType: string, senderAddress: string, recipientAddress: string, amount: string, @@ -22,19 +23,19 @@ export function useSendCoinTransaction( 'token-transfer-transaction', recipientAddress, amount, - coin, + coins, + coinType, coinMetadata?.decimals, senderAddress, isPayAllIota, ], queryFn: async () => { - const coinStruct = coin as unknown as CoinStruct; const transaction = createTokenTransferTransaction({ - coinType: coin.coinType, + coinType, coinDecimals: coinMetadata?.decimals || 0, to: recipientAddress, amount, - coins: [coinStruct], + coins, isPayAllIota, }); @@ -42,7 +43,7 @@ export function useSendCoinTransaction( await transaction.build({ client }); return transaction; }, - enabled: !!recipientAddress && !!amount && !!coin && !!senderAddress, + enabled: !!recipientAddress && !!amount && !!coins && !!senderAddress && !!coinType, gcTime: 0, select: (transaction) => { return { diff --git a/apps/wallet/src/ui/app/hooks/index.ts b/apps/wallet/src/ui/app/hooks/index.ts index cf03a096702..7bf62ec2791 100644 --- a/apps/wallet/src/ui/app/hooks/index.ts +++ b/apps/wallet/src/ui/app/hooks/index.ts @@ -15,7 +15,7 @@ export { useTransactionDryRun } from './useTransactionDryRun'; export { useGetTxnRecipientAddress } from './useGetTxnRecipientAddress'; export { useGetTransferAmount } from './useGetTransferAmount'; export { useOwnedNFT } from './useOwnedNFT'; -export { useSortedCoinsByCategories } from './useSortedCoinsByCategories'; + export * from './useTransactionData'; export * from './useActiveAddress'; export * from './useCoinsReFetchingConfig'; diff --git a/apps/wallet/src/ui/app/hooks/useCoinsReFetchingConfig.ts b/apps/wallet/src/ui/app/hooks/useCoinsReFetchingConfig.ts index c665af1f84a..adb1222240a 100644 --- a/apps/wallet/src/ui/app/hooks/useCoinsReFetchingConfig.ts +++ b/apps/wallet/src/ui/app/hooks/useCoinsReFetchingConfig.ts @@ -4,17 +4,15 @@ import { Feature } from '_src/shared/experimentation/features'; import { useFeatureValue } from '@growthbook/growthbook-react'; - -const DEFAULT_REFETCH_INTERVAL = 20_000; -const DEFAULT_STALE_TIME = 20_000; +import { COINS_QUERY_REFETCH_INTERVAL, COINS_QUERY_STALE_TIME } from '@iota/core'; export function useCoinsReFetchingConfig() { const refetchInterval = useFeatureValue( Feature.WalletBalanceRefetchInterval, - DEFAULT_REFETCH_INTERVAL, + COINS_QUERY_REFETCH_INTERVAL, ); return { refetchInterval, - staleTime: DEFAULT_STALE_TIME, + staleTime: COINS_QUERY_STALE_TIME, }; } diff --git a/apps/wallet/src/ui/app/hooks/useRecognizedPackages.ts b/apps/wallet/src/ui/app/hooks/useRecognizedPackages.ts index 7058daf27de..079f080bf0f 100644 --- a/apps/wallet/src/ui/app/hooks/useRecognizedPackages.ts +++ b/apps/wallet/src/ui/app/hooks/useRecognizedPackages.ts @@ -4,11 +4,8 @@ import { useFeatureValue } from '@growthbook/growthbook-react'; import { Network } from '@iota/iota.js/client'; -import { IOTA_FRAMEWORK_ADDRESS, IOTA_SYSTEM_ADDRESS } from '@iota/iota.js/utils'; - import useAppSelector from './useAppSelector'; - -const DEFAULT_RECOGNIZED_PACKAGES = [IOTA_FRAMEWORK_ADDRESS, IOTA_SYSTEM_ADDRESS]; +import { DEFAULT_RECOGNIZED_PACKAGES } from '@iota/core'; export function useRecognizedPackages() { const network = useAppSelector((app) => app.app.network); diff --git a/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx b/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx index f4485ed83a5..60c3c8f6d94 100644 --- a/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx +++ b/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx @@ -9,7 +9,7 @@ import { ButtonOrLink } from '_app/shared/utils/ButtonOrLink'; import Alert from '_components/alert'; import { CoinIcon } from '_components/coin-icon'; import Loading from '_components/loading'; -import { useAppSelector, useCoinsReFetchingConfig, useSortedCoinsByCategories } from '_hooks'; +import { useAppSelector, useCoinsReFetchingConfig } from '_hooks'; import { ampli } from '_src/shared/analytics/ampli'; import { Feature } from '_src/shared/experimentation/features'; import { AccountsList } from '_src/ui/app/components/accounts/AccountsList'; @@ -30,6 +30,7 @@ import { useResolveIotaNSName, DELEGATED_STAKES_QUERY_REFETCH_INTERVAL, DELEGATED_STAKES_QUERY_STALE_TIME, + useSortedCoinsByCategories, } from '@iota/core'; import { useIotaClientQuery } from '@iota/dapp-kit'; import { Info12, Pin16, Unpin16 } from '@iota/icons';