Port token context to utils

.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,13 +25,13 @@
     "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"
   },
   "dependencies": {
-    "@cartridge/presets": "github:cartridge-gg/presets#c7e6fb7"
+    "@cartridge/presets": "catalog:"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.2",

packages/keychain/.storybook/main.ts

@@ -1,13 +1,13 @@
 import type { StorybookConfig } from "@storybook/react-vite";
-import { join, dirname, resolve } from "path";
+import path from "path";
 import { mergeConfig } from "vite";
 
 /**
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.
  */
 function getAbsolutePath(value: string) {
-  return dirname(require.resolve(join(value, "package.json")));
+  return path.dirname(require.resolve(path.join(value, "package.json")));
 }
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(ts|tsx)"],
@@ -19,21 +19,14 @@ const config: StorybookConfig = {
     name: getAbsolutePath("@storybook/react-vite"),
     options: {},
   },
-  viteFinal: async (config) => {
-    return mergeConfig(config, {
+  viteFinal: (config) =>
+    mergeConfig(config, {
       build: {
         rollupOptions: {
           external: ["vite-plugin-node-polyfills/shims/global"],
         },
       },
-      resolve: {
-        alias: {
-          react: resolve(__dirname, "../node_modules/react"),
-          "react-dom": resolve(__dirname, "../node_modules/react-dom"),
-        },
-      },
-    });
-  },
+    }),
   staticDirs: ["../public"],
   previewHead: process.env.SNAPSHOT
     ? (head) => `${head}<style>*{animation:none!important;}</style>`

packages/keychain/.storybook/mock.ts

@@ -1,12 +1,12 @@
 import { constants, RpcProvider } from "starknet";
-import Controller from "@cartridge/controller";
 import { controllerConfigs, SessionPolicies } from "@cartridge/presets";
 import { Parameters } from "@storybook/react";
 import { ConnectionContextValue } from "../src/components/provider/connection";
 import { UpgradeInterface } from "../src/hooks/upgrade";
 import { ConnectCtx, ConnectionCtx } from "../src/utils/connection/types";
 import { defaultTheme } from "@cartridge/presets";
 import { useThemeEffect } from "@cartridge/ui-next";
+import Controller from "../src/utils/controller";
 
 export interface StoryParameters extends Parameters {
   connection?: {

packages/keychain/.storybook/provider.tsx

@@ -3,10 +3,10 @@ import { QueryClient, QueryClientProvider } from "react-query";
 import { mainnet } from "@starknet-react/chains";
 import { StarknetConfig, publicProvider, voyager } from "@starknet-react/core";
 import { BrowserRouter } from "react-router-dom";
+import { TokensProvider } from "@cartridge/utils";
 import { ConnectionContext } from "../src/components/provider/connection";
 import { UIProvider } from "../src/components/provider/ui";
 import { StoryParameters, useMockedConnection } from "./mock";
-import { TokensProvider } from "../src/components/provider/tokens";
 
 export function Provider({
   children,
@@ -23,7 +23,10 @@ export function Provider({
       <QueryClientProvider client={queryClient}>
         <ConnectionContext.Provider value={connection}>
           <UIProvider>
-            <TokensProvider>
+            <TokensProvider
+              address={parameters.connection?.controller?.address()}
+              provider={parameters.connection?.controller?.provider}
+            >
               <BrowserRouter>{children}</BrowserRouter>
             </TokensProvider>
           </UIProvider>

packages/keychain/package.json

@@ -20,6 +20,15 @@
     "test:storybook:update": "start-server-and-test 'SNAPSHOT=1 pnpm storybook:serve' 6001 'pnpm test-storybook --url http://127.0.0.1:6001 -u'",
     "test:storybook": "start-server-and-test 'pnpm storybook:serve' 6001 'pnpm test-storybook -u'"
   },
+  "imports": {
+    "#*": [
+      "./src/*",
+      "./src/*.ts",
+      "./src/*.tsx",
+      "./src/*/index.ts",
+      "./src/*/index.tsx"
+    ]
+  },
   "dependencies": {
     "@cartridge/account-wasm": "workspace:*",
     "@cartridge/controller": "workspace:*",
@@ -64,7 +73,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 +92,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/ControllerErrorAlert.stories.tsx

@@ -4,7 +4,7 @@ import { ErrorCode } from "@cartridge/account-wasm/controller";
 import {
   starknetTransactionExecutionErrorTestCases,
   starknetTransactionValidationErrorTestCases,
-} from "@/utils/errors";
+} from "#utils/errors";
 
 const meta = {
   component: ControllerErrorAlert,

packages/keychain/src/components/DeployController.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { DeployController } from "./DeployController";
 import { constants, num } from "starknet";
 import { JsControllerError } from "@cartridge/account-wasm/controller";
-import Controller from "@/utils/controller";
+import Controller from "#utils/controller";
 
 const meta = {
   component: DeployController,

packages/keychain/src/components/DeployController.tsx

@@ -18,15 +18,14 @@
   ControllerIcon,
 } from "@cartridge/ui-next";
 import { Funding } from "./funding";
-import { useConnection } from "@/hooks/connection";
+import { useConnection } from "#hooks/connection";
 import { ControllerErrorAlert, ErrorAlert } from "./ErrorAlert";
-import { useDeploy } from "@/hooks/deploy";
+import { useDeploy } from "#hooks/deploy";
 import { Fees } from "./Fees";
-import { ControllerError } from "@/utils/connection";
-import { TransactionSummary } from "@/components/transaction/TransactionSummary";
+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,
@@ -49,7 +48,7 @@
 
   // What is this cancer
   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),

packages/keychain/src/components/ErrorAlert.tsx

@@ -19,8 +19,8 @@
   useState,
 } from "react";
 import { ErrorCode } from "@cartridge/account-wasm/controller";
-import { ControllerError } from "@/utils/connection";
-import { parseExecutionError, parseValidationError } from "@/utils/errors";
+import { ControllerError } from "#utils/connection";
+import { parseExecutionError, parseValidationError } from "#utils/errors";
 import { formatAddress } from "@cartridge/utils";
 import { Link } from "react-router-dom";
 import { useExplorer } from "@starknet-react/core";
@@ -404,13 +404,13 @@
   );
 }
 
 export function isControllerError(
   error: ControllerError | Error,
 ): error is ControllerError {
   return !!(error as ControllerError).code;
 }
 
 export function humanizeString(str: string): string {
   return (
     str
       // Convert from camelCase or snake_case

packages/keychain/src/components/ErrorBoundary.tsx

@@ -8,8 +8,8 @@ import {
   Button,
   LayoutHeader,
 } from "@cartridge/ui-next";
-import { useConnection } from "@/hooks/connection";
-import { CARTRIDGE_DISCORD_LINK } from "@/const";
+import { useConnection } from "#hooks/connection";
+import { CARTRIDGE_DISCORD_LINK } from "#const";
 import { Link } from "react-router-dom";
 import { useEffect } from "react";
 import { usePostHog } from "./provider/posthog";

packages/keychain/src/components/ErrorBoundry.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { ErrorPage } from "./ErrorBoundary";
 
 const meta: Meta<typeof ErrorPage> = {
-  title: "@/components/ErrorPage",
+  title: "#components/ErrorPage",
   component: ErrorPage,
   parameters: {
     layout: "centered",

packages/keychain/src/components/ExecutionContainer.test.tsx

@@ -1,8 +1,8 @@
 import { screen, fireEvent, waitFor } from "@testing-library/react";
 import { ExecutionContainer } from "./ExecutionContainer";
 import { describe, expect, beforeEach, it, vi } from "vitest";
-import { renderWithConnection } from "@/test/mocks/connection";
-import { renderWithProviders } from "@/test/mocks/providers";
+import { renderWithConnection } from "#test/mocks/connection";
+import { renderWithProviders } from "#test/mocks/providers";
 
 describe("ExecutionContainer", () => {
   const defaultProps = {

packages/keychain/src/components/ExecutionContainer.tsx

@@ -1,7 +1,7 @@
-import { ControllerErrorAlert, ErrorAlert } from "@/components/ErrorAlert";
-import { useConnection } from "@/hooks/connection";
-import type { ControllerError } from "@/utils/connection";
-import { parseControllerError } from "@/utils/connection/execute";
+import { ControllerErrorAlert, ErrorAlert } from "#components/ErrorAlert";
+import { useConnection } from "#hooks/connection";
+import type { ControllerError } from "#utils/connection";
+import { parseControllerError } from "#utils/connection/execute";
 import { ErrorCode } from "@cartridge/account-wasm/controller";
 import {
   Button,
@@ -17,7 +17,7 @@
 import { DeployController } from "./DeployController";
 import { Fees } from "./Fees";
 import { Funding } from "./funding";
-import { OcclusionDetector } from "@/components/OcclusionDetector";
+import { OcclusionDetector } from "#components/OcclusionDetector";
 
 interface ExecutionContainerProps {
   transactions: Call[];
@@ -111,7 +111,7 @@
     };
 
     estimateFeesAsync();
   }, [transactions, estimateFees]);
 
   useEffect(() => {
     setCtrlError(executionError);

packages/keychain/src/components/Fees.tsx

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

packages/keychain/src/components/OcclusionDetector.tsx

@@ -1,4 +1,4 @@
-import { useConnection } from "@/hooks/connection";
+import { useConnection } from "#hooks/connection";
 import { useEffect, useRef, useState, useCallback } from "react";
 
 export function OcclusionDetector() {

packages/keychain/src/components/SignMessage.tsx

@@ -12,8 +12,8 @@ import {
   CardListItem,
   LayoutHeader,
 } from "@cartridge/ui-next";
-import { useConnection } from "@/hooks/connection";
-import { OcclusionDetector } from "@/components/OcclusionDetector";
+import { useConnection } from "#hooks/connection";
+import { OcclusionDetector } from "#components/OcclusionDetector";
 
 export function SignMessage({
   typedData,

packages/keychain/src/components/Transaction.tsx

@@ -6,8 +6,8 @@ import {
   Spinner,
   StarknetIcon,
 } from "@cartridge/ui-next";
-import { useController } from "@/hooks/controller";
-import { useChainName } from "@/hooks/chain";
+import { useController } from "#hooks/controller";
+import { useChainName } from "#hooks/chain";
 import { StarkscanUrl } from "@cartridge/utils";
 import { Link } from "react-router-dom";
 

packages/keychain/src/components/authenticate.tsx

@@ -1,4 +1,4 @@
-import { Authenticate as AuthComponent } from "@/components/connect";
+import { Authenticate as AuthComponent } from "#components/connect";
 import { constants } from "starknet";
 import { useEffect, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";

packages/keychain/src/components/connect/CreateSession.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { CreateSession } from "./CreateSession";
 import { ETH_CONTRACT_ADDRESS } from "@cartridge/utils";
-import { parseSessionPolicies } from "@/hooks/session";
+import { parseSessionPolicies } from "#hooks/session";
 import { controllerConfigs } from "@cartridge/presets";
 
 const meta: Meta<typeof CreateSession> = {

packages/keychain/src/components/connect/CreateSession.tsx

@@ -1,17 +1,17 @@
-import { ControllerErrorAlert } from "@/components/ErrorAlert";
-import { SessionConsent } from "@/components/connect";
-import { Upgrade } from "./Upgrade";
-import { UnverifiedSessionSummary } from "@/components/session/UnverifiedSessionSummary";
-import { VerifiedSessionSummary } from "@/components/session/VerifiedSessionSummary";
-import { NOW } from "@/const";
-import { CreateSessionProvider } from "@/context/session";
-import { useConnection } from "@/hooks/connection";
+import { ControllerErrorAlert } from "#components/ErrorAlert";
+import { SessionConsent } from "#components/connect";
+import { Upgrade } from "#components/connect/Upgrade";
+import { UnverifiedSessionSummary } from "#components/session/UnverifiedSessionSummary";
+import { VerifiedSessionSummary } from "#components/session/VerifiedSessionSummary";
+import { NOW } from "#const";
+import { CreateSessionProvider } from "#context/session";
+import { useConnection } from "#hooks/connection";
 import {
   type ContractType,
   type ParsedSessionPolicies,
   useCreateSession,
-} from "@/hooks/session";
-import type { ControllerError } from "@/utils/connection";
+} from "#hooks/session";
+import type { ControllerError } from "#utils/connection";
 import {
   Button,
   Checkbox,
@@ -23,7 +23,7 @@ import {
 } from "@cartridge/ui-next";
 import { useCallback, useMemo, useState } from "react";
 import { type BigNumberish } from "starknet";
-import { OcclusionDetector } from "../OcclusionDetector";
+import { OcclusionDetector } from "#components/OcclusionDetector";
 import { useUpgrade } from "../provider/upgrade";
 
 const requiredPolicies: Array<ContractType> = ["VRF"];

packages/keychain/src/components/connect/RegisterSession.tsx

@@ -1,15 +1,15 @@
-import { ExecutionContainer } from "@/components/ExecutionContainer";
-import { SessionConsent } from "@/components/connect";
-import { UnverifiedSessionSummary } from "@/components/session/UnverifiedSessionSummary";
-import { VerifiedSessionSummary } from "@/components/session/VerifiedSessionSummary";
-import { NOW } from "@/const";
-import { CreateSessionProvider } from "@/context/session";
-import { useConnection } from "@/hooks/connection";
+import { ExecutionContainer } from "#components/ExecutionContainer";
+import { SessionConsent } from "#components/connect";
+import { UnverifiedSessionSummary } from "#components/session/UnverifiedSessionSummary";
+import { VerifiedSessionSummary } from "#components/session/VerifiedSessionSummary";
+import { NOW } from "#const";
+import { CreateSessionProvider } from "#context/session";
+import { useConnection } from "#hooks/connection";
 import {
   type ContractType,
   type ParsedSessionPolicies,
   useCreateSession,
-} from "@/hooks/session";
+} from "#hooks/session";
 import { Button, LayoutContent, SliderIcon } from "@cartridge/ui-next";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import {

packages/keychain/src/components/connect/SessionConsent.tsx

@@ -1,4 +1,4 @@
-import { useConnection } from "@/hooks/connection";
+import { useConnection } from "#hooks/connection";
 import { LockIcon, VerifiedIcon } from "@cartridge/ui-next";
 import { useMemo } from "react";
 import { Link } from "react-router-dom";

packages/keychain/src/components/connect/Upgrade.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Upgrade } from "./Upgrade";
-import Controller from "@/utils/controller";
+import Controller from "#utils/controller";
 import { constants } from "starknet";
 
 const meta = {

packages/keychain/src/components/connect/Upgrade.tsx

@@ -1,6 +1,6 @@
 import { LayoutContent, BoltIcon, CircleIcon } from "@cartridge/ui-next";
-import { ExecutionContainer } from "@/components/ExecutionContainer";
-import { useConnection } from "@/hooks/connection";
+import { ExecutionContainer } from "#components/ExecutionContainer";
+import { useConnection } from "#hooks/connection";
 import { useUpgrade } from "../provider/upgrade";
 
 export const Upgrade = () => {