Move tokens context to utils

Author: JunichiSugiura

packages/keychain/src/components/DeployController.tsx

@@ -25,8 +25,7 @@ import { Fees } from "./Fees";
 import { ControllerError } from "@/utils/connection";
 import { TransactionSummary } from "@/components/transaction/TransactionSummary";
 import { Link } from "react-router-dom";
-import { useFeeToken } from "@/hooks/tokens";
-import { getChainName } from "@cartridge/utils";
+import { getChainName, useFeeToken } from "@cartridge/utils";
 
 export function DeployController({
   onClose,
@@ -51,28 +50,28 @@ export function DeployController({
   const feeEstimate: FeeEstimate | undefined = ctrlError?.data?.fee_estimate;
   const estimateFee: EstimateFee | undefined = feeEstimate
     ? {
-        gas_consumed: BigInt(feeEstimate.gas_consumed),
-        overall_fee: BigInt(feeEstimate.overall_fee),
-        gas_price: BigInt(feeEstimate.gas_price),
-        unit: feeEstimate.unit,
-        suggestedMaxFee: BigInt(feeEstimate.overall_fee),
-        data_gas_consumed: BigInt(
-          feeEstimate.data_gas_consumed ? feeEstimate.data_gas_consumed : "0x0",
-        ),
-        data_gas_price: BigInt(
-          feeEstimate.data_gas_price ? feeEstimate.data_gas_price : "0x0",
-        ),
-        resourceBounds: {
-          l1_gas: {
-            max_amount: feeEstimate.overall_fee,
-            max_price_per_unit: feeEstimate.gas_price,
-          },
-          l2_gas: {
-            max_amount: feeEstimate.overall_fee,
-            max_price_per_unit: feeEstimate.gas_price,
-          },
+      gas_consumed: BigInt(feeEstimate.gas_consumed),
+      overall_fee: BigInt(feeEstimate.overall_fee),
+      gas_price: BigInt(feeEstimate.gas_price),
+      unit: feeEstimate.unit,
+      suggestedMaxFee: BigInt(feeEstimate.overall_fee),
+      data_gas_consumed: BigInt(
+        feeEstimate.data_gas_consumed ? feeEstimate.data_gas_consumed : "0x0",
+      ),
+      data_gas_price: BigInt(
+        feeEstimate.data_gas_price ? feeEstimate.data_gas_price : "0x0",
+      ),
+      resourceBounds: {
+        l1_gas: {
+          max_amount: feeEstimate.overall_fee,
+          max_price_per_unit: feeEstimate.gas_price,
         },
-      }
+        l2_gas: {
+          max_amount: feeEstimate.overall_fee,
+          max_price_per_unit: feeEstimate.gas_price,
+        },
+      },
+    }
     : undefined;
 
   useEffect(() => {
@@ -273,9 +272,8 @@ function ExplorerLink({
 
   return (
     <Link
-      to={`https://${
-        chainId === constants.StarknetChainId.SN_SEPOLIA ? "sepolia." : ""
-      }starkscan.co/tx/${txHash}`}
+      to={`https://${chainId === constants.StarknetChainId.SN_SEPOLIA ? "sepolia." : ""
+        }starkscan.co/tx/${txHash}`}
       target="_blank"
       className="flex items-center gap-1 text-sm text-foreground-400 underline"
     >

packages/keychain/src/components/Fees.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useState } from "react";
 import { Spinner } from "@cartridge/ui-next";
+import { ERC20, useFeeToken } from "@cartridge/utils";
 import { EstimateFee } from "starknet";
-
-import { convertTokenAmountToUSD, useFeeToken } from "@/hooks/tokens";
+import { convertTokenAmountToUSD } from "@/hooks/tokens";
 import { ErrorAlert } from "./ErrorAlert";
-import { ERC20 } from "./provider/tokens";
 
 export function Fees({
   isLoading: isEstimating,

packages/keychain/src/components/funding/Balance.tsx

@@ -6,12 +6,11 @@ import {
   CardTitle,
   CoinsIcon,
 } from "@cartridge/ui-next";
-import { useCreditBalance } from "@cartridge/utils";
+import { useCreditBalance, useFeeToken, } from "@cartridge/utils";
 import { useController } from "@/hooks/controller";
 import {
   formatBalance,
   convertTokenAmountToUSD,
-  useFeeToken,
 } from "@/hooks/tokens";
 
 export enum BalanceType {

packages/keychain/src/components/funding/Deposit.tsx

@@ -29,13 +29,14 @@ import {
   Separator,
   LayoutHeader,
 } from "@cartridge/ui-next";
+import { useFeeToken } from "@cartridge/utils";
 import { useConnection } from "@/hooks/connection";
 import { ErrorAlert } from "../ErrorAlert";
 import { AmountSelection } from "./AmountSelection";
 import { Balance, BalanceType } from "./Balance";
 import { toast } from "sonner";
 import { DEFAULT_AMOUNT } from "./constants";
-import { convertUSDToTokenAmount, useFeeToken } from "@/hooks/tokens";
+import { convertUSDToTokenAmount } from "@/hooks/tokens";
 
 type DepositProps = {
   onComplete?: (deployHash?: string) => void;

packages/keychain/src/components/provider/index.tsx

@@ -1,6 +1,7 @@
 import { PropsWithChildren, useCallback, useMemo } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { useConnectionValue } from "@/hooks/connection";
+import { TokensProvider } from "@cartridge/utils";
 import { CartridgeAPIProvider } from "@cartridge/utils/api/cartridge";
 import { ENDPOINT } from "@/utils/graphql";
 import { PostHogProvider } from "./posthog";
@@ -11,7 +12,6 @@ import { sepolia, mainnet } from "@starknet-react/chains";
 import { constants, num } from "starknet";
 import { BrowserRouter } from "react-router-dom";
 import { ConnectionContext } from "./connection";
-import { TokensProvider } from "./tokens";
 
 export function Provider({ children }: PropsWithChildren) {
   const connection = useConnectionValue();
@@ -47,7 +47,7 @@ export function Provider({ children }: PropsWithChildren) {
                   defaultChainId={defaultChainId}
                   provider={jsonRpcProvider({ rpc })}
                 >
-                  <TokensProvider>
+                  <TokensProvider provider={connection.controller?.provider}>
                     <PostHogProvider>{children}</PostHogProvider>
                   </TokensProvider>
                 </StarknetConfig>

packages/keychain/src/hooks/tokens.tsx

@@ -1,38 +1,3 @@
-import { useContext } from "react";
-import {
-  TokensContext,
-  TokensContextValue,
-} from "@/components/provider/tokens";
-import { getChecksumAddress } from "starknet";
-
-export function useTokens(): TokensContextValue {
-  const context = useContext(TokensContext);
-  if (!context) {
-    throw new Error("useTokens must be used within a TokensProvider");
-  }
-
-  return context;
-}
-
-export function useToken(address: string) {
-  const { tokens, isLoading, error } = useTokens();
-  const token = tokens[getChecksumAddress(address)];
-  return {
-    token,
-    isLoading,
-    error,
-  };
-}
-
-export function useFeeToken() {
-  const { feeToken, isLoading, error } = useTokens();
-  return {
-    token: feeToken,
-    isLoading,
-    error,
-  };
-}
-
 export function formatBalance(
   amount: bigint,
   decimals = 18,

packages/utils/src/context/index.ts

@@ -1 +1,2 @@
 export * from "./posthog";
+export * from "./tokens";

packages/keychain/src/components/provider/tokens.tsx packages/utils/src/context/tokens.tsx

@@ -6,15 +6,14 @@ import {
   useEffect,
   useCallback,
 } from "react";
-import { useConnection } from "@/hooks/connection";
-import { ERC20 as ERC20Contract } from "@cartridge/utils";
+import { ERC20Contract } from "@cartridge/utils";
 import {
   Price,
   TokenPair,
   usePriceByAddressesQuery,
 } from "@cartridge/utils/api/cartridge";
 import { useQuery } from "react-query";
-import { getChecksumAddress } from "starknet";
+import { getChecksumAddress, Provider } from "starknet";
 
 const DEFAULT_TOKENS = [
   {
@@ -68,27 +67,30 @@ export interface TokensContextValue {
 export const TokensContext = createContext<TokensContextValue>({
   tokens: {},
   isLoading: false,
-  registerPair: () => {},
+  registerPair: () => { },
 });
 
 interface TokensProviderProps extends PropsWithChildren {
   tokens?: ERC20Metadata[];
   refetchInterval?: number;
   feeToken?: string;
+  provider?: Provider;
+  address?: string;
 }
 
 export function TokensProvider({
   children,
   tokens: tokensArg = DEFAULT_TOKENS,
   feeToken = DEFAULT_FEE_TOKEN,
   refetchInterval = 30000,
+  provider,
+  address,
 }: TokensProviderProps) {
-  const { controller } = useConnection();
   const [tokens, setTokens] = useState<Record<string, ERC20>>({});
   const [initialLoadComplete, setInitialLoadComplete] = useState(false);
 
   useEffect(() => {
-    if (!controller) {
+    if (!provider || !address) {
       return;
     }
 
@@ -104,7 +106,7 @@ export function TokensProvider({
         const normalizedAddress = getChecksumAddress(address);
         const contract = new ERC20Contract({
           address: normalizedAddress,
-          provider: controller.provider,
+          provider,
         });
 
         acc[normalizedAddress] = {
@@ -126,7 +128,7 @@ export function TokensProvider({
     Object.keys(initialTokens).forEach(async (address) => {
       try {
         const balance = await initialTokens[address].contract.balanceOf(
-          controller.address(),
+          address,
         );
 
         setTokens((prev) => ({
@@ -140,17 +142,17 @@ export function TokensProvider({
         console.error("Error getting balance for:", address, error);
       }
     });
-  }, [controller, tokensArg]);
+  }, [address, tokensArg, provider]);
 
   const { error: balanceError, isLoading: isLoadingBalances } = useQuery(
-    ["token-balances", controller?.address(), Object.keys(tokens)],
+    ["token-balances", address, Object.keys(tokens)],
     async () => {
-      if (!controller) return;
+      if (!address) return;
 
       const updatedTokens = { ...tokens };
       await Promise.all(
         Object.values(updatedTokens).map(async (token) => {
-          const balance = await token.contract.balanceOf(controller.address());
+          const balance = await token.contract.balanceOf(address);
           updatedTokens[token.address] = {
             ...token,
             balance,
@@ -164,7 +166,7 @@ export function TokensProvider({
       }
     },
     {
-      enabled: !!controller && Object.keys(tokens).length > 0,
+      enabled: !!address && Object.keys(tokens).length > 0,
       refetchInterval,
       retry: false,
     },
@@ -202,19 +204,19 @@ export function TokensProvider({
 
   const registerPair = useCallback(
     async (address: string) => {
-      if (!controller) return;
+      if (!provider) return;
 
       const normalizedAddress = getChecksumAddress(address);
       if (tokens[normalizedAddress]) return;
 
       const newTokens = { ...tokens };
       const contract = new ERC20Contract({
         address: normalizedAddress,
-        provider: controller.provider,
+        provider,
       });
 
       try {
-        const balance = await contract.balanceOf(controller.address());
+        const balance = await contract.balanceOf(address);
         await contract.init();
         const metadata = contract.metadata();
 
@@ -233,7 +235,7 @@ export function TokensProvider({
         console.error(`Failed to load token ${normalizedAddress}:`, error);
       }
     },
-    [controller, tokens],
+    [address, tokens, provider],
   );
 
   const value = useMemo(

packages/utils/src/erc20.ts

@@ -8,13 +8,12 @@ import {
   uint256,
 } from "starknet";
 
-export type ERC20Metadata = {
+type ERC20Metadata = {
   name: string;
   logoUrl?: string;
   symbol: string;
   decimals: number;
   address: string;
-  instance: ERC20;
 };
 
 export const ETH_CONTRACT_ADDRESS = getChecksumAddress(
@@ -24,7 +23,7 @@ export const STRK_CONTRACT_ADDRESS = getChecksumAddress(
   "0x04718f5a0Fc34cC1AF16A1cdee98fFB20C31f5cD61D6Ab07201858f4287c938D",
 );
 
-export class ERC20 {
+export class ERC20Contract {
   private address: string;
   private logoUrl?: string;
   private provider: Provider;
@@ -77,7 +76,6 @@ export class ERC20 {
       symbol: this.symbol,
       decimals: this.decimals,
       logoUrl: this.logoUrl,
-      instance: this,
     };
   }
 

packages/utils/src/hooks/index.ts

@@ -2,3 +2,4 @@ export * from "./api";
 export * from "./balance";
 export * from "./countervalue";
 export * from "./posthog";
+export * from "./tokens";

packages/utils/src/hooks/tokens.ts

@@ -0,0 +1,31 @@
+import { useContext } from "react";
+import { TokensContext, TokensContextValue } from "../context/tokens";
+import { getChecksumAddress } from "starknet";
+
+export function useTokens(): TokensContextValue {
+  const context = useContext(TokensContext);
+  if (!context) {
+    throw new Error("useTokens must be used within a TokensProvider");
+  }
+
+  return context;
+}
+
+export function useToken(address: string) {
+  const { tokens, isLoading, error } = useTokens();
+  const token = tokens[getChecksumAddress(address)];
+  return {
+    token,
+    isLoading,
+    error,
+  };
+}
+
+export function useFeeToken() {
+  const { feeToken, isLoading, error } = useTokens();
+  return {
+    token: feeToken,
+    isLoading,
+    error,
+  };
+}