Move token utils and apply tokens context to profile

Author: JunichiSugiura

.github/workflows/test.yml

@@ -69,7 +69,7 @@ jobs:
           run_install: |
             - args: [--frozen-lockfile]
       - run: pnpm build
-      - run: pnpm test:ci --coverage
+      - run: pnpm test:ci -- --coverage
       - uses: codecov/codecov-action@v3
         with:
           token: ${{ secrets.CODECOV_TOKEN }}

package.json

@@ -25,8 +25,8 @@
     "utils": "pnpm --filter @cartridge/utils",
     "example:next": "pnpm --filter @cartridge/controller-example-next",
     "example:svelte": "pnpm --filter @cartridge/controller-example-svelte",
-    "test": "pnpm keychain test",
-    "test:ci": "pnpm keychain test:ci",
+    "test": "turbo test",
+    "test:ci": "turbo test:ci",
     "test:storybook": "pnpm turbo build:deps test:storybook",
     "test:storybook:update": "pnpm turbo build:deps test:storybook:update"
   },

packages/keychain/package.json

@@ -64,7 +64,7 @@
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "@vitejs/plugin-react-swc": "catalog:",
-    "@vitest/coverage-v8": "2.1.8",
+    "@vitest/coverage-v8": "catalog:",
     "autoprefixer": "catalog:",
     "eslint": "catalog:",
     "http-server": "catalog:",
@@ -83,7 +83,7 @@
     "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-top-level-await": "catalog:",
     "vite-plugin-wasm": "catalog:",
-    "vitest": "^2.1.8"
+    "vitest": "catalog:"
   },
   "peerDependencies": {
     "@starknet-react/chains": "catalog:",

packages/keychain/src/components/Fees.tsx

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

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

@@ -6,9 +6,13 @@ import {
   CardTitle,
   CoinsIcon,
 } from "@cartridge/ui-next";
-import { useCreditBalance, useFeeToken } from "@cartridge/utils";
+import {
+  useCreditBalance,
+  useFeeToken,
+  formatBalance,
+  convertTokenAmountToUSD,
+} from "@cartridge/utils";
 import { useController } from "@/hooks/controller";
-import { formatBalance, convertTokenAmountToUSD } from "@/hooks/tokens";
 
 export enum BalanceType {
   CREDITS = "credits",
@@ -52,7 +56,7 @@ export function Balance({ types }: BalanceProps) {
               <span className="text-foreground-400">{token.symbol}</span>
             </div>
 
-            {token && token.balance !== undefined && token.price ? (
+            {token.balance !== undefined && token.price ? (
               <div className="text-foreground-400">
                 {convertTokenAmountToUSD(token.balance, 18, token.price)}
               </div>

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

@@ -29,14 +29,13 @@ import {
   Separator,
   LayoutHeader,
 } from "@cartridge/ui-next";
-import { useFeeToken } from "@cartridge/utils";
+import { useFeeToken, convertUSDToTokenAmount } 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 } from "@/hooks/tokens";
 
 type DepositProps = {
   onComplete?: (deployHash?: string) => void;

packages/keychain/src/hooks/tokens.tsx

@@ -25,18 +25,15 @@ import {
   isIframe,
   isPublicChain,
   StarkscanUrl,
-  useCountervalue,
   useCreditBalance,
+  useToken,
+  formatBalance,
+  convertTokenAmountToUSD,
 } from "@cartridge/utils";
-import { constants, getChecksumAddress } from "starknet";
-import { formatEther } from "viem";
+import { constants } from "starknet";
 import { useAccount } from "@/hooks/account";
-import { useBalance } from "@/hooks/token";
-import { TokenPair } from "@cartridge/utils/api/cartridge";
 import { useMemo } from "react";
 import { compare } from "compare-versions";
-import { formatBalance } from "./helper";
-import { erc20Metadata } from "@cartridge/presets";
 
 export function Token() {
   const { address } = useParams<{ address: string }>();
@@ -98,49 +95,37 @@ function ERC20() {
   const navigate = useNavigate();
   const { address } = useParams<{ address: string }>();
   const { chainId, version } = useConnection();
-  const balance = useBalance({ tokenAddress: address! });
-  const { countervalue } = useCountervalue(
-    {
-      balance: formatEther(BigInt(balance?.raw ?? 0)),
-      pair: `${balance?.meta.symbol}_USDC` as TokenPair,
-    },
-    { enabled: balance && ["ETH", "STRK"].includes(balance.meta.symbol) },
-  );
-  const ekuboMeta = balance
-    ? erc20Metadata.find(
-        (m) =>
-          getChecksumAddress(m.l2_token_address) ===
-          getChecksumAddress(balance.meta.contractAddress),
-      )
-    : undefined;
+  const { token } = useToken(address!);
 
   const compatibility = useMemo(() => {
     if (!version) return false;
     return compare(version, "0.5.6", ">=");
   }, [version]);
 
-  if (!balance) {
-    return;
-  }
-
   return (
     <LayoutContainer>
       <LayoutHeader
         title={`${
-          balance === undefined ? (
+          token.balance === undefined ? (
             <Skeleton className="h-[20px] w-[120px] rounded" />
           ) : (
-            formatBalance(balance.amount.toString(), ["~"])
+            formatBalance(token.balance)
           )
-        } ${balance.meta.symbol}`}
+        } ${token.symbol}`}
         description={
-          countervalue && `${formatBalance(countervalue.formatted, ["~"])}`
+          token.balance && token.price
+            ? convertTokenAmountToUSD(
+                token.balance,
+                token.decimals,
+                token.price,
+              )
+            : undefined
         }
         icon={
           <div className="rounded-full size-11 bg-background-300 flex items-center justify-center">
             <img
               className="w-10 h-10"
-              src={ekuboMeta?.logo_url ?? "/public/placeholder.svg"}
+              src={token.icon ?? "/public/placeholder.svg"}
             />
           </div>
         }
@@ -160,17 +145,17 @@ function ERC20() {
               <Link
                 to={`${StarkscanUrl(
                   chainId as constants.StarknetChainId,
-                ).contract(balance.meta.contractAddress)} `}
+                ).contract(token.address)} `}
                 className="flex items-center gap-1 text-sm"
                 target="_blank"
               >
                 <div className="font-medium">
-                  {formatAddress(balance.meta.contractAddress, { size: "sm" })}
+                  {formatAddress(token.address, { size: "sm" })}
                 </div>
                 <ExternalIcon size="sm" />
               </Link>
             ) : (
-              <div>{formatAddress(balance.meta.contractAddress)}</div>
+              <div>{formatAddress(token.address)}</div>
             )}
           </CardContent>