From d1ed6e542ee35fe3067f6644f4dcd91133697213 Mon Sep 17 00:00:00 2001 From: Linkie Link Date: Tue, 30 Jan 2024 09:19:51 +0100 Subject: [PATCH] fix: replaces the store with useChainConfig (#755) --- src/components/Wallet/RecentTransactions.tsx | 3 ++- src/components/Wallet/WalletBridges.tsx | 3 ++- src/components/Wallet/WalletConnectedButton.tsx | 3 ++- src/components/Wallet/WalletSelect.tsx | 3 ++- src/components/common/Toaster/index.tsx | 3 ++- src/components/earn/farm/Vaults.tsx | 9 +++++---- src/components/header/navigation/DesktopNavigation.tsx | 5 +++-- src/components/header/navigation/Routes.tsx | 6 +++--- src/components/hls/Farm/AvailableHLSVaults.tsx | 7 ++++--- .../trade/TradeModule/AssetSelector/AssetList.tsx | 5 +++-- src/hooks/assets/useAllAssets.ts | 5 +++-- src/hooks/assets/useBasetAsset.ts | 5 +++-- src/hooks/assets/useBorrowEnabledAssets.ts | 4 ++-- src/hooks/assets/useDisplayCurrencyAssets.ts | 4 ++-- src/hooks/assets/useMarketEnabledAssets.ts | 4 ++-- src/hooks/assets/usePerpsEnabledAssets.ts | 4 ++-- src/pages/LendPage.tsx | 8 ++++---- src/pages/PortfolioAccountPage.tsx | 4 ++-- 18 files changed, 48 insertions(+), 37 deletions(-) diff --git a/src/components/Wallet/RecentTransactions.tsx b/src/components/Wallet/RecentTransactions.tsx index 5dfe2cd3..567da7d9 100644 --- a/src/components/Wallet/RecentTransactions.tsx +++ b/src/components/Wallet/RecentTransactions.tsx @@ -8,11 +8,12 @@ import { TextLink } from 'components/common/TextLink' import { generateToastContent } from 'components/common/Toaster' import useTransactions from 'hooks/localStorage/useTransactions' import useStore from 'store' +import useChainConfig from 'hooks/useChainConfig' export default function RecentTransactions() { const address = useStore((s) => s.address) const [transactions, setTransactions] = useTransactions() - const chainConfig = useStore((s) => s.chainConfig) + const chainConfig = useChainConfig() const recentTransactions = transactions.recent .filter((tx) => tx.address === address) .sort((a, b) => (a.timestamp > b.timestamp ? -1 : 1)) diff --git a/src/components/Wallet/WalletBridges.tsx b/src/components/Wallet/WalletBridges.tsx index 25f35999..504f46bd 100644 --- a/src/components/Wallet/WalletBridges.tsx +++ b/src/components/Wallet/WalletBridges.tsx @@ -17,6 +17,7 @@ import useStore from 'store' import { byDenom } from 'utils/array' import { defaultFee } from 'utils/constants' import { BN } from 'utils/helpers' +import useChainConfig from 'hooks/useChainConfig' function Bridge({ name, url, image }: Bridge) { return ( @@ -35,7 +36,7 @@ function Bridge({ name, url, image }: Bridge) { } export default function WalletBridges() { - const chainConfig = useStore((s) => s.chainConfig) + const chainConfig = useChainConfig() const address = useStore((s) => s.address) const currentWallet = useCurrentWallet() diff --git a/src/components/Wallet/WalletConnectedButton.tsx b/src/components/Wallet/WalletConnectedButton.tsx index 00ffdf03..5cc4a907 100644 --- a/src/components/Wallet/WalletConnectedButton.tsx +++ b/src/components/Wallet/WalletConnectedButton.tsx @@ -27,6 +27,7 @@ import { NETWORK } from 'types/enums/network' import { ChainInfoID } from 'types/enums/wallet' import { truncate } from 'utils/formatters' import { getPage, getRoute } from 'utils/route' +import useChainConfig from 'hooks/useChainConfig' export default function WalletConnectedButton() { // --------------- @@ -40,7 +41,7 @@ export default function WalletConnectedButton() { const userDomain = useStore((s) => s.userDomain) const focusComponent = useStore((s) => s.focusComponent) const network = useStore((s) => s.client?.connectedWallet.network) - const chainConfig = useStore((s) => s.chainConfig) + const chainConfig = useChainConfig() const baseAsset = useBaseAsset() const { data: walletBalances, isLoading } = useWalletBalances(address) const { data: icnsData, isLoading: isLoadingICNS } = useICNSDomain(address) diff --git a/src/components/Wallet/WalletSelect.tsx b/src/components/Wallet/WalletSelect.tsx index 91be68a0..e83fabe5 100644 --- a/src/components/Wallet/WalletSelect.tsx +++ b/src/components/Wallet/WalletSelect.tsx @@ -13,6 +13,7 @@ import { WALLETS } from 'constants/wallets' import useStore from 'store' import { WalletID } from 'types/enums/wallet' import { isAndroid, isIOS, isMobile } from 'utils/mobile' +import useChainConfig from 'hooks/useChainConfig' interface Props { error?: ErrorObject @@ -52,7 +53,7 @@ function WalletOption(props: WalletOptionProps) { } export default function WalletSelect(props: Props) { - const chainConfig = useStore((s) => s.chainConfig) + const chainConfig = useChainConfig() const { extensionProviders, mobileProviders, mobileConnect } = useShuttle() const [qrCodeUrl, setQRCodeUrl] = useState('') const [error, setError] = useState(props.error) diff --git a/src/components/common/Toaster/index.tsx b/src/components/common/Toaster/index.tsx index 9e27b26d..f83e80b7 100644 --- a/src/components/common/Toaster/index.tsx +++ b/src/components/common/Toaster/index.tsx @@ -15,6 +15,7 @@ import useTransactionStore from 'hooks/useTransactionStore' import useStore from 'store' import { formatAmountWithSymbol } from 'utils/formatters' import { BN } from 'utils/helpers' +import useChainConfig from 'hooks/useChainConfig' const toastBodyClasses = classNames( 'flex flex-wrap w-full group/transaction', @@ -60,7 +61,7 @@ export default function Toaster() { LocalStorageKeys.REDUCE_MOTION, DEFAULT_SETTINGS.reduceMotion, ) - const chainConfig = useStore((s) => s.chainConfig) + const chainConfig = useChainConfig() const toast = useStore((s) => s.toast) const { addTransaction } = useTransactionStore() diff --git a/src/components/earn/farm/Vaults.tsx b/src/components/earn/farm/Vaults.tsx index be0a2d20..4374403c 100644 --- a/src/components/earn/farm/Vaults.tsx +++ b/src/components/earn/farm/Vaults.tsx @@ -5,17 +5,17 @@ import DepositedVaultsTable from 'components/earn/farm/Table/DepositedVaultsTabl import VaultUnlockBanner from 'components/earn/farm/VaultUnlockBanner' import { BN_ZERO } from 'constants/math' import useAccountId from 'hooks/useAccountId' +import useChainConfig from 'hooks/useChainConfig' import useDepositedVaults from 'hooks/useDepositedVaults' import useVaults from 'hooks/useVaults' -import useStore from 'store' import { VaultStatus } from 'types/enums/vault' function Content() { const accountId = useAccountId() const { data: vaults } = useVaults() const { data: depositedVaults } = useDepositedVaults(accountId || '') - - const vaultMetaData = useStore((s) => s.chainConfig.vaults) + const chainConfig = useChainConfig() + const vaultMetaData = chainConfig.vaults const { deposited, available } = useMemo(() => { return vaultMetaData.reduce( @@ -60,7 +60,8 @@ function Content() { } function Fallback() { - const vaults = useStore((s) => s.chainConfig.vaults) + const chainConfig = useChainConfig() + const vaults = chainConfig.vaults const mockVaults: Vault[] = vaults.map((vault) => ({ ...vault, apy: null, diff --git a/src/components/header/navigation/DesktopNavigation.tsx b/src/components/header/navigation/DesktopNavigation.tsx index f194e1d1..92fc1a47 100644 --- a/src/components/header/navigation/DesktopNavigation.tsx +++ b/src/components/header/navigation/DesktopNavigation.tsx @@ -3,10 +3,11 @@ import classNames from 'classnames' import { useMemo } from 'react' import Button from 'components/common/Button' -import { menuTree } from 'components/header/DesktopHeader' import { ChevronDown, Logo } from 'components/common/Icons' +import { menuTree } from 'components/header/DesktopHeader' import { NavLink } from 'components/header/navigation/NavLink' import { NavMenu } from 'components/header/navigation/NavMenu' +import useChainConfig from 'hooks/useChainConfig' import useToggle from 'hooks/useToggle' import useStore from 'store' import { WalletID } from 'types/enums/wallet' @@ -19,7 +20,7 @@ export function getIsActive(pages: string[]) { export default function DesktopNavigation() { const [showMenu, setShowMenu] = useToggle() const { recentWallet } = useShuttle() - const chainConfig = useStore((s) => s.chainConfig) + const chainConfig = useChainConfig() const walletId = (recentWallet?.providerId as WalletID) ?? WalletID.Keplr const focusComponent = useStore((s) => s.focusComponent) diff --git a/src/components/header/navigation/Routes.tsx b/src/components/header/navigation/Routes.tsx index 0794a61e..4c2eb851 100644 --- a/src/components/header/navigation/Routes.tsx +++ b/src/components/header/navigation/Routes.tsx @@ -1,6 +1,6 @@ import { Navigate, Outlet, Route, Routes as RoutesWrapper } from 'react-router-dom' -import Layout from 'pages/_layout' +import useChainConfig from 'hooks/useChainConfig' import BorrowPage from 'pages/BorrowPage' import ExecuteMessagePage from 'pages/ExecuteMessagePage' import FarmPage from 'pages/FarmPage' @@ -12,10 +12,10 @@ import PerpsPage from 'pages/PerpsPage' import PortfolioAccountPage from 'pages/PortfolioAccountPage' import PortfolioPage from 'pages/PortfolioPage' import TradePage from 'pages/TradePage' -import useStore from 'store' +import Layout from 'pages/_layout' export default function Routes() { - const chainConfig = useStore((s) => s.chainConfig) + const chainConfig = useChainConfig() return ( s.chainConfig.vaults) + const chainConfig = useChainConfig() + const vaults = chainConfig.vaults const mockVaults: Vault[] = vaults .filter((v) => v.isHls) .map((vault) => ({ diff --git a/src/components/trade/TradeModule/AssetSelector/AssetList.tsx b/src/components/trade/TradeModule/AssetSelector/AssetList.tsx index 522d321f..3b80670d 100644 --- a/src/components/trade/TradeModule/AssetSelector/AssetList.tsx +++ b/src/components/trade/TradeModule/AssetSelector/AssetList.tsx @@ -7,8 +7,8 @@ import AssetSelectorItem from 'components/trade/TradeModule/AssetSelector/AssetS import useCurrentAccount from 'hooks/accounts/useCurrentAccount' import useMarketEnabledAssets from 'hooks/assets/useMarketEnabledAssets' import useMarkets from 'hooks/markets/useMarkets' +import useChainConfig from 'hooks/useChainConfig' import usePrices from 'hooks/usePrices' -import useStore from 'store' import { getMergedBalancesForAsset } from 'utils/accounts' import { byDenom } from 'utils/array' import { sortAssetsOrPairs } from 'utils/assets' @@ -22,7 +22,8 @@ interface Props { } export default function AssetList(props: Props) { - const baseDenom = useStore((s) => s.chainConfig.assets[0].denom) + const chainConfig = useChainConfig() + const baseDenom = chainConfig.assets[0].denom const { assets, type, isOpen, toggleOpen, onChangeAsset } = props const account = useCurrentAccount() const markets = useMarkets() diff --git a/src/hooks/assets/useAllAssets.ts b/src/hooks/assets/useAllAssets.ts index f50e50cc..7844a5c8 100644 --- a/src/hooks/assets/useAllAssets.ts +++ b/src/hooks/assets/useAllAssets.ts @@ -1,5 +1,6 @@ -import useStore from 'store' +import useChainConfig from 'hooks/useChainConfig' export default function useAllAssets() { - return useStore((s) => s.chainConfig.assets) + const chainConfig = useChainConfig() + return chainConfig.assets } diff --git a/src/hooks/assets/useBasetAsset.ts b/src/hooks/assets/useBasetAsset.ts index 01b2a270..83176cc3 100644 --- a/src/hooks/assets/useBasetAsset.ts +++ b/src/hooks/assets/useBasetAsset.ts @@ -1,7 +1,8 @@ -import useStore from 'store' +import useChainConfig from 'hooks/useChainConfig' export default function useBaseAsset() { - const assets = useStore((s) => s.chainConfig.assets) + const chainConfig = useChainConfig() + const assets = chainConfig.assets return assets[0] } diff --git a/src/hooks/assets/useBorrowEnabledAssets.ts b/src/hooks/assets/useBorrowEnabledAssets.ts index 8d6fd680..18474b0c 100644 --- a/src/hooks/assets/useBorrowEnabledAssets.ts +++ b/src/hooks/assets/useBorrowEnabledAssets.ts @@ -1,7 +1,7 @@ -import useStore from 'store' +import useAllAssets from 'hooks/assets/useAllAssets' export default function useBorrowEnabledAssets() { - const assets = useStore((s) => s.chainConfig.assets) + const assets = useAllAssets() return assets.filter((asset) => asset.isBorrowEnabled) } diff --git a/src/hooks/assets/useDisplayCurrencyAssets.ts b/src/hooks/assets/useDisplayCurrencyAssets.ts index c3eb2a90..f57bd87b 100644 --- a/src/hooks/assets/useDisplayCurrencyAssets.ts +++ b/src/hooks/assets/useDisplayCurrencyAssets.ts @@ -1,7 +1,7 @@ -import useStore from 'store' +import useAllAssets from 'hooks/assets/useAllAssets' export default function useDisplayCurrencyAssets() { - const assets = useStore((s) => s.chainConfig.assets) + const assets = useAllAssets() return assets.filter((asset) => asset.isDisplayCurrency) } diff --git a/src/hooks/assets/useMarketEnabledAssets.ts b/src/hooks/assets/useMarketEnabledAssets.ts index 152bd05b..971776b3 100644 --- a/src/hooks/assets/useMarketEnabledAssets.ts +++ b/src/hooks/assets/useMarketEnabledAssets.ts @@ -1,8 +1,8 @@ import { useMemo } from 'react' -import useStore from 'store' +import useAllAssets from 'hooks/assets/useAllAssets' export default function useMarketEnabledAssets() { - const assets = useStore((s) => s.chainConfig.assets) + const assets = useAllAssets() return useMemo(() => assets.filter((asset) => asset.isEnabled && asset.isMarket), [assets]) } diff --git a/src/hooks/assets/usePerpsEnabledAssets.ts b/src/hooks/assets/usePerpsEnabledAssets.ts index 984c8c9f..1f2f793a 100644 --- a/src/hooks/assets/usePerpsEnabledAssets.ts +++ b/src/hooks/assets/usePerpsEnabledAssets.ts @@ -1,7 +1,7 @@ -import useStore from 'store' +import useAllAssets from 'hooks/assets/useAllAssets' export default function usePerpsEnabledAssets() { - const assets = useStore((s) => s.chainConfig.assets) + const assets = useAllAssets() return assets.filter((asset) => asset.isPerpsEnabled) } diff --git a/src/pages/LendPage.tsx b/src/pages/LendPage.tsx index 4cb0932e..81a15210 100644 --- a/src/pages/LendPage.tsx +++ b/src/pages/LendPage.tsx @@ -1,12 +1,12 @@ +import MigrationBanner from 'components/common/MigrationBanner' +import Tab from 'components/earn/Tab' import LendIntro from 'components/earn/lend/LendIntro' import Lends from 'components/earn/lend/Lends' -import Tab from 'components/earn/Tab' -import MigrationBanner from 'components/common/MigrationBanner' import { EARN_TABS } from 'constants/pages' -import useStore from 'store' +import useChainConfig from 'hooks/useChainConfig' export default function LendPage() { - const chainConfig = useStore((s) => s.chainConfig) + const chainConfig = useChainConfig() return (
diff --git a/src/pages/PortfolioAccountPage.tsx b/src/pages/PortfolioAccountPage.tsx index 8e2e7275..371d5ba8 100644 --- a/src/pages/PortfolioAccountPage.tsx +++ b/src/pages/PortfolioAccountPage.tsx @@ -7,11 +7,11 @@ import BreadCrumbs from 'components/portfolio/Account/BreadCrumbs' import PerpPositions from 'components/portfolio/Account/PerpPositions' import Summary from 'components/portfolio/Account/Summary' import useAccountId from 'hooks/useAccountId' -import useStore from 'store' +import useChainConfig from 'hooks/useChainConfig' import { getRoute } from 'utils/route' export default function PortfolioAccountPage() { - const chainConfig = useStore((s) => s.chainConfig) + const chainConfig = useChainConfig() const selectedAccountId = useAccountId() const { address, accountId } = useParams() const navigate = useNavigate()