fix: replaces the store with useChainConfig (#755)

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))

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()

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)

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)

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()

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,

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)
 

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 (
     <RoutesWrapper>
       <Route

src/components/hls/Farm/AvailableHLSVaults.tsx

@@ -1,11 +1,11 @@
 import { Suspense, useMemo } from 'react'
 
+import Table from 'components/common/Table'
 import { NAME_META } from 'components/hls/Farm/Table/Columns/Name'
 import useAvailableColumns from 'components/hls/Farm/Table/Columns/useAvailableColumns'
-import Table from 'components/common/Table'
 import { BN_ZERO } from 'constants/math'
+import useChainConfig from 'hooks/useChainConfig'
 import useVaults from 'hooks/useVaults'
-import useStore from 'store'
 
 const title = 'Available HLS Vaults'
 
@@ -34,7 +34,8 @@ export default function AvailableHlsVaults() {
 
 function Fallback() {
   const columns = useAvailableColumns({ isLoading: true })
-  const vaults = useStore((s) => s.chainConfig.vaults)
+  const chainConfig = useChainConfig()
+  const vaults = chainConfig.vaults
   const mockVaults: Vault[] = vaults
     .filter((v) => v.isHls)
     .map((vault) => ({

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()

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
 }

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]
 }

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)
 }

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)
 }

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])
 }

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)
 }

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 (
     <div className='flex flex-wrap w-full gap-6'>

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()