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

@@ -1,6 +1,5 @@
-import { useToken } from "@/hooks/token";
 import { Amount } from "@cartridge/ui-next";
-import { useCountervalue } from "@cartridge/utils";
+import { formatBalance, useCountervalue, useToken } from "@cartridge/utils";
 import { TokenPair } from "@cartridge/utils/api/cartridge";
 import { useCallback } from "react";
 import { useParams } from "react-router-dom";
@@ -15,24 +14,26 @@ export function SendAmount({
   setError: (error: Error | undefined) => void;
 }) {
   const { address: tokenAddress } = useParams<{ address: string }>();
-  const token = useToken({ tokenAddress: tokenAddress! });
+  const { token } = useToken(tokenAddress!);
 
   const handleMax = useCallback(
     (e: React.MouseEvent<HTMLDivElement | HTMLButtonElement>) => {
       e.preventDefault();
       if (!token) return;
-      setAmount(parseFloat(token.balance.formatted.replace("~", "")));
+      setAmount(
+        parseFloat(formatBalance(token.balance ?? 0n).replace("~", "")),
+      );
     },
     [token, setAmount],
   );
 
   const { countervalue } = useCountervalue(
     {
       balance: amount?.toString() ?? "0",
-      pair: `${token?.meta.symbol}_USDC` as TokenPair,
+      pair: `${token.symbol}_USDC` as TokenPair,
     },
     {
-      enabled: token && ["ETH", "STRK"].includes(token.meta.symbol) && !!amount,
+      enabled: token && ["ETH", "STRK"].includes(token.symbol) && !!amount,
     },
   );
 
@@ -52,9 +53,9 @@ export function SendAmount({
     <Amount
       amount={amount}
       conversion={countervalue?.formatted}
-      balance={parseFloat(token.balance.formatted.replace("~", ""))}
-      symbol={token.meta.symbol}
-      decimals={token.meta.decimals ?? 18}
+      balance={parseFloat(formatBalance(token.balance ?? 0n).replace("~", ""))}
+      symbol={token.symbol}
+      decimals={token.decimals ?? 18}
       setError={setError}
       onChange={handleChange}
       onMax={handleMax}

packages/profile/src/components/inventory/token/send/amount.tsx

@@ -1,6 +1,5 @@
 import { useAccount } from "@/hooks/account";
 import { useConnection } from "@/hooks/context";
-import { useToken } from "@/hooks/token";
 import {
   LayoutContainer,
   LayoutContent,
@@ -18,14 +17,15 @@ import { useNavigate, useParams } from "react-router-dom";
 import { Call, uint256 } from "starknet";
 import { SendRecipient } from "@/components/modules/recipient";
 import { SendAmount } from "./amount";
+import { useToken } from "@cartridge/utils";
 
 export function SendToken() {
   const { address: tokenAddress } = useParams<{ address: string }>();
   const { address } = useAccount();
   const { parent } = useConnection();
   const [validated, setValidated] = useState(false);
   const [warning, setWarning] = useState<string>();
-  const token = useToken({ tokenAddress: tokenAddress! });
+  const { token } = useToken(tokenAddress!);
   const navigate = useNavigate();
 
   const [to, setTo] = useState("");
@@ -44,15 +44,13 @@ export function SendToken() {
 
   const onSubmit = useCallback(
     async (to: string, amount: number) => {
-      if (!token) return;
-
       const formattedAmount = uint256.bnToUint256(
-        BigInt(amount * 10 ** token.meta.decimals),
+        BigInt(amount * 10 ** token.decimals),
       );
 
       const calls: Call[] = [
         {
-          contractAddress: token.meta.address,
+          contractAddress: token.address,
           entrypoint: "transfer",
           calldata: [to, formattedAmount],
         },
@@ -70,13 +68,13 @@ export function SendToken() {
   return (
     <LayoutContainer>
       <LayoutHeader
-        title={`Send ${token.meta.symbol}`}
+        title={`Send ${token.symbol}`}
         description={<CopyAddress address={address} size="sm" />}
         icon={
           <div className="rounded-full size-11 bg-foreground-100 flex items-center justify-center">
             <img
               className="w-10 h-10"
-              src={token.meta.logoUrl ?? "/public/placeholder.svg"}
+              src={token.icon ?? "/public/placeholder.svg"}
             />
           </div>
         }