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/components/TokenBalanceCard/index.tsx

@@ -8,7 +8,7 @@ import { useToken } from "../../hooks/useToken"
 import { tBTCFillBlack } from "../../static/icons/tBTCFillBlack"
 
 export interface TokenBalanceCardProps {
-  token: Exclude<Token, Token.TBTC>
+  token: Exclude<Token, Token.TBTCV1>
   title?: string
   tokenSymbol?: string
   withSymbol?: boolean
@@ -18,7 +18,7 @@ const tokenToIconMap = {
   [Token.Keep]: KeepCircleBrand,
   [Token.Nu]: NuCircleBrand,
   [Token.T]: T,
-  [Token.TBTCV2]: tBTCFillBlack,
+  [Token.TBTC]: tBTCFillBlack,
 }
 
 const TokenBalanceCard: FC<TokenBalanceCardProps> = ({

src/enums/token.ts

@@ -2,18 +2,18 @@ export enum Token {
   Keep = "KEEP",
   Nu = "NU",
   T = "T",
+  TBTCV1 = "TBTCV1",
   TBTC = "TBTC",
-  TBTCV2 = "TBTCV2",
 }
 
 export enum CoingeckoID {
   KEEP = "keep-network",
   NU = "nucypher",
   T = "threshold-network-token",
   ETH = "ethereum",
-  TBTC = "tbtc",
+  TBTCV1 = "tbtc",
   // TODO: add prope tbtc-v2 id when it lands on coingecko
-  TBTCV2 = "tbtc",
+  TBTC = "tbtc",
 }
 
 export enum TConversionRates {

src/hooks/__tests__/useFetchTvl.test.tsx

@@ -11,8 +11,7 @@ import {
 } from "../../web3/hooks"
 import { useETHData } from "../useETHData"
 import { useFetchTvl } from "../useFetchTvl"
-import * as useTokenModule from "../useToken"
-import { TokenContext } from "../../contexts/TokenContext"
+import { useToken } from "../useToken"
 import * as usdUtils from "../../utils/getUsdBalance"
 
 jest.mock("../../web3/hooks", () => ({
@@ -30,6 +29,11 @@ jest.mock("../useETHData", () => ({
   useETHData: jest.fn(),
 }))
 
+jest.mock("../useToken", () => ({
+  ...(jest.requireActual("../useToken") as {}),
+  useToken: jest.fn(),
+}))
+
 describe("Test `useFetchTvl` hook", () => {
   const keepContext = {
     contract: {} as any,
@@ -56,18 +60,7 @@ describe("Test `useFetchTvl` hook", () => {
   const mockedMultiCallContract = { interface: {}, address: "0x3" }
   const mockedKeepAssetPoolContract = { interface: {}, address: "0x4" }
 
-  const wrapper = ({ children }) => (
-    <TokenContext.Provider
-      value={{
-        [Token.Keep]: keepContext,
-        [Token.TBTC]: tbtcContext,
-        [Token.T]: tContext,
-        [Token.Nu]: nuContext,
-      }}
-    >
-      {children}
-    </TokenContext.Provider>
-  )
+  const wrapper = ({ children }) => <>{children}</>
 
   const multicallRequest = jest.fn()
   const mockedETHData = { usdPrice: 20 }
@@ -88,6 +81,16 @@ describe("Test `useFetchTvl` hook", () => {
     ;(useKeepTokenStakingContract as jest.Mock).mockReturnValue(
       mockedKeepTokenStakingContract
     )
+    ;(useToken as jest.Mock).mockImplementation((token: Token) => {
+      switch (token) {
+        case Token.Keep:
+          return keepContext
+        case Token.T:
+          return tContext
+        case Token.TBTCV1:
+          return tbtcContext
+      }
+    })
   })
 
   test("should fetch tvl data correctly.", async () => {
@@ -110,7 +113,6 @@ describe("Test `useFetchTvl` hook", () => {
 
     const spyOnFormatUnits = jest.spyOn(ethersUnits, "formatUnits")
     const spyOnToUsdBalance = jest.spyOn(usdUtils, "toUsdBalance")
-    const spyOnUseToken = jest.spyOn(useTokenModule, "useToken")
 
     const _expectedResult = {
       ecdsa: ethInKeepBonding.format * mockedETHData.usdPrice,
@@ -144,9 +146,9 @@ describe("Test `useFetchTvl` hook", () => {
 
     // then
     expect(useETHData).toHaveBeenCalled()
-    expect(spyOnUseToken).toHaveBeenCalledWith(Token.Keep)
-    expect(spyOnUseToken).toHaveBeenCalledWith(Token.TBTC)
-    expect(spyOnUseToken).toHaveBeenCalledWith(Token.T)
+    expect(useToken).toHaveBeenCalledWith(Token.Keep)
+    expect(useToken).toHaveBeenCalledWith(Token.TBTCV1)
+    expect(useToken).toHaveBeenCalledWith(Token.T)
     expect(useKeepBondingContract).toHaveBeenCalled()
     expect(useMulticallContract).toHaveBeenCalled()
     expect(useKeepAssetPoolContract).toHaveBeenCalled()

src/hooks/useFetchTvl.ts

@@ -51,7 +51,7 @@ export const useFetchTvl = (): [TVLData, () => Promise<TVLRawData>] => {
 
   const eth = useETHData()
   const keep = useToken(Token.Keep)
-  const tbtc = useToken(Token.TBTC)
+  const tbtc = useToken(Token.TBTCV1)
   const t = useToken(Token.T)
   const keepBonding = useKeepBondingContract()
   const multicall = useMulticallContract()

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 tbtcv1 = useTBTCTokenContract()
+  const tbtc = useTBTCv2TokenContract()
+
+  return {
+    [Token.Keep]: keep,
+    [Token.Nu]: nu,
+    [Token.T]: t,
+    [Token.TBTCV1]: tbtcv1,
+    [Token.TBTC]: tbtc,
+  }
+}
 
 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,
+  }
 }