Tokens state refactor

src/App.tsx

@@ -17,7 +17,6 @@ import {
 } from "react-router-dom"
 import { BigNumberish } from "@ethersproject/bignumber"
 import { Event } from "@ethersproject/contracts"
-import { TokenContextProvider } from "./contexts/TokenContext"
 import theme from "./theme"
 import reduxStore, { resetStoreAction } from "./store"
 import ModalRoot from "./components/Modal"
@@ -204,11 +203,9 @@ const App: FC = () => {
         <ThresholdProvider>
           <ReduxProvider store={reduxStore}>
             <ChakraProvider theme={theme}>
-              <TokenContextProvider>
-                <Web3EventHandlerComponent />
-                <ModalRoot />
-                <AppBody />
-              </TokenContextProvider>
+              <Web3EventHandlerComponent />
+              <ModalRoot />
+              <AppBody />
             </ChakraProvider>
           </ReduxProvider>
         </ThresholdProvider>

src/hooks/useToken.ts

@@ -1,9 +1,38 @@
-import { useContext } from "react"
-import { TokenContext } from "../contexts/TokenContext"
 import { Token } from "../enums"
+import { selectTokenByTokenName } from "../store/tokens/selectors"
+import {
+  useKeep,
+  useNu,
+  useT,
+  useTBTCTokenContract,
+  useTBTCv2TokenContract,
+} from "../web3/hooks"
+import { useAppSelector } from "./store"
+
+const useSupportedTokens = () => {
+  const keep = useKeep()
+  const nu = useNu()
+  const t = useT()
+  const tbtc = useTBTCTokenContract()
+  const tbtcv2 = useTBTCv2TokenContract()
+
+  return {
+    [Token.Keep]: keep,
+    [Token.Nu]: nu,
+    [Token.T]: t,
+    [Token.TBTC]: tbtc,
+    [Token.TBTCV2]: tbtcv2,
+  }
+}
 
 export const useToken = (token: Token) => {
-  const tokenContext = useContext(TokenContext)
+  const tokenState = useAppSelector((state) =>
+    selectTokenByTokenName(state, token)
+  )
+  const _token = useSupportedTokens()[token]
 
-  return tokenContext[token]
+  return {
+    ...tokenState,
+    ..._token,
+  }
 }

src/hooks/useTokenState.ts

@@ -1,36 +1,43 @@
-import { useSelector, useDispatch } from "react-redux"
 import {
   setTokenBalance as setTokenBalanceAction,
   setTokenLoading as setTokenLoadingAction,
   fetchTokenPriceUSD as fetchTokenPriceAction,
-  setTokenConversionRate as setTokenConversionRateAction,
+  setTokenBalanceError as setTokenBalanceErrorAction,
 } from "../store/tokens"
-import { RootState } from "../store"
+import { useAppDispatch, useAppSelector } from "./store"
 import { Token } from "../enums"
 import { UseTokenState } from "../types/token"
+import { useCallback } from "react"
 
 export const useTokenState: UseTokenState = () => {
-  const keep = useSelector((state: RootState) => state.token[Token.Keep])
-  const nu = useSelector((state: RootState) => state.token[Token.Nu])
-  const t = useSelector((state: RootState) => state.token[Token.T])
-  const tbtc = useSelector((state: RootState) => state.token[Token.TBTC])
-  const tbtcv2 = useSelector((state: RootState) => state.token[Token.TBTCV2])
+  const keep = useAppSelector((state) => state.token[Token.Keep])
+  const nu = useAppSelector((state) => state.token[Token.Nu])
+  const t = useAppSelector((state) => state.token[Token.T])
+  const tbtc = useAppSelector((state) => state.token[Token.TBTC])
+  const tbtcv2 = useAppSelector((state) => state.token[Token.TBTCV2])
 
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
 
-  const setTokenConversionRate = (
-    token: Token,
-    conversionRate: number | string
-  ) => dispatch(setTokenConversionRateAction({ token, conversionRate }))
+  const setTokenBalance = useCallback(
+    (token: Token, balance: number | string) =>
+      dispatch(setTokenBalanceAction({ token, balance })),
+    [dispatch]
+  )
 
-  const setTokenBalance = (token: Token, balance: number | string) =>
-    dispatch(setTokenBalanceAction({ token, balance }))
+  const setTokenLoading = useCallback(
+    (token: Token) => dispatch(setTokenLoadingAction({ token })),
+    [dispatch]
+  )
 
-  const setTokenLoading = (token: Token, loading: boolean) =>
-    dispatch(setTokenLoadingAction({ token, loading }))
+  const fetchTokenPriceUSD = useCallback(
+    (token: Token) => dispatch(fetchTokenPriceAction({ token })),
+    [dispatch]
+  )
 
-  const fetchTokenPriceUSD = (token: Token) =>
-    dispatch(fetchTokenPriceAction({ token }))
+  const setTokenBalanceError = useCallback(
+    (token: Token) => dispatch(setTokenBalanceErrorAction({ token })),
+    [dispatch]
+  )
 
   return {
     keep,
@@ -41,6 +48,6 @@ export const useTokenState: UseTokenState = () => {
     fetchTokenPriceUSD,
     setTokenBalance,
     setTokenLoading,
-    setTokenConversionRate,
+    setTokenBalanceError,
   }
 }

src/hooks/useTransaction.ts

@@ -3,6 +3,7 @@ import { setTransactionStatus as setTransactionStatusAction } from "../store/tra
 import { RootState } from "../store"
 import { UseTransaction } from "../types/transaction"
 import { TransactionStatus, TransactionType } from "../enums/transactionType"
+import { useCallback } from "react"
 
 export const useTransaction: UseTransaction = () => {
   const keepApproval = useSelector(
@@ -20,10 +21,11 @@ export const useTransaction: UseTransaction = () => {
 
   const dispatch = useDispatch()
 
-  const setTransactionStatus = (
-    type: TransactionType,
-    status: TransactionStatus
-  ) => dispatch(setTransactionStatusAction({ type, status }))
+  const setTransactionStatus = useCallback(
+    (type: TransactionType, status: TransactionStatus) =>
+      dispatch(setTransactionStatusAction({ type, status })),
+    [dispatch]
+  )
 
   return {
     setTransactionStatus,

src/pages/Overview/Network/WalletBalances.tsx

@@ -19,6 +19,7 @@ import InfoBox from "../../../components/InfoBox"
 import Link from "../../../components/Link"
 import useUpgradeHref from "../../../hooks/useUpgradeHref"
 import ButtonLink from "../../../components/ButtonLink"
+import { useTExchangeRate } from "../../../hooks/useTExchangeRate"
 
 const BalanceStat: FC<{
   balance: string | number
@@ -39,7 +40,7 @@ const BalanceStat: FC<{
       />
       {conversionRate && (
         <BodySm color={useColorModeValue("gray.500", "gray.300")}>
-          1 {text} = {conversionRate} T
+          1 {text} = {formatTokenAmount(conversionRate, "0.0000")} T
         </BodySm>
       )}
     </HStack>
@@ -86,6 +87,8 @@ const WalletBalances: FC = () => {
 
   const { amount: keepToT } = useTConvertedAmount(Token.Keep, keep.balance)
   const { amount: nuToT } = useTConvertedAmount(Token.Nu, nu.balance)
+  const { amount: keepToTConversionRate } = useTExchangeRate(Token.Keep)
+  const { amount: nuToTConversionRate } = useTExchangeRate(Token.Nu)
 
   const conversionToTAmount = useMemo(() => {
     return BigNumber.from(keepToT).add(nuToT).toString()
@@ -105,14 +108,14 @@ const WalletBalances: FC = () => {
           <BalanceStat balance={t.balance} icon={t.icon} text={t.text} />
         )}
         <BalanceStat
-          conversionRate={keep.conversionRate}
+          conversionRate={keepToTConversionRate}
           balance={keep.balance}
           icon={keep.icon}
           text={keep.text}
           tokenDecimals={keep.decimals}
         />
         <BalanceStat
-          conversionRate={nu.conversionRate}
+          conversionRate={nuToTConversionRate}
           balance={nu.balance}
           icon={nu.icon}
           text={nu.text}

src/store/index.ts

@@ -5,7 +5,7 @@ import {
   Reducer,
 } from "@reduxjs/toolkit"
 import { modalSlice } from "./modal"
-import { tokenSlice } from "./tokens"
+import { registerTokensListeners, tokenSlice } from "./tokens"
 import { sidebarSlice } from "./sidebar"
 import { transactionSlice } from "./transactions"
 import { registerStakingListeners, stakingSlice } from "./staking"
@@ -44,6 +44,7 @@ const rootReducer: Reducer = (state: RootState, action: AnyAction) => {
     registerStakingListeners()
     registerStakingAppsListeners()
     registerAccountListeners()
+    registerTokensListeners()
     state = {
       eth: { ...state.eth },
       token: {