Register Session connector

cartridge-gg · Jan 14, 2025 · 9e4e20d · 9e4e20d
1 parent cec808a
commit 9e4e20d
Show file tree

Hide file tree

Showing 17 changed files with 182 additions and 133 deletions.
diff --git a/examples/next/next.config.js b/examples/next/next.config.js
@@ -14,9 +14,21 @@ const nextConfig = {
         : "static/wasm/[modulehash].wasm";
 
     // Since Webpack 5 doesn't enable WebAssembly by default, we should do it manually
-    config.experiments = { ...config.experiments, asyncWebAssembly: true };
+    config.experiments = {
+      ...config.experiments,
+      asyncWebAssembly: true,
+      layers: true,
+    };
+
+    // Add WASM file handling
+    config.module.rules.push({
+      test: /\.wasm$/,
+      type: "webassembly/async",
+    });
+
     return config;
   },
+  output: "standalone",
 };
 
 module.exports = nextConfig;
diff --git a/examples/next/package.json b/examples/next/package.json
@@ -4,7 +4,7 @@
   "version": "0.5.8",
   "scripts": {
     "dev": "next dev -p 3002",
-    "build": "next build",
+    "build": "NEXT_TELEMETRY_DISABLED=1 next build",
     "e2e": "playwright test",
     "e2e:ui": "playwright test --ui",
     "start": "next start -p 3002",
@@ -18,7 +18,7 @@
     "@cartridge/ui-next": "workspace:*",
     "@starknet-react/chains": "^0.1.3",
     "@starknet-react/core": "^3.0.2",
-    "next": "^14.2.5",
+    "next": "^14.2.15",
     "next-themes": "^0.3.0",
     "prettier": "^2.7.1",
     "react": "^18.3.1",
@@ -33,10 +33,10 @@
     "@types/react-dom": "^18.3.1",
     "autoprefixer": "^10.4.18",
     "eslint": "^8.23.0",
-    "eslint-config-next": "^12.2.5",
+    "eslint-config-next": "^14.2.15",
     "postcss": "^8.4.35",
     "postcss-import": "^16.1.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5"
   }
-}
+}
diff --git a/examples/next/src/app/token/page.tsx b/examples/next/src/app/token/page.tsx
@@ -3,15 +3,15 @@
 import {
   useAccount,
   useReadContract,
-  useSendTransaction,
+  // useSendTransaction,
 } from "@starknet-react/core";
-import { useCallback, useMemo, useState } from "react";
+import { useMemo } from "react";
 import { cairo, uint256 } from "starknet";
 import { ConnectWallet } from "components/ConnectWallet";
-import { useTokenContract } from "hooks/token";
+// import { useTokenContract } from "hooks/token";
 import { Abi } from "starknet";
 import Erc20Abi from "abi/erc20.json";
-import { Button, Input } from "@cartridge/ui-next";
+// import { Button, Input } from "@cartridge/ui-next";
 
 function UserBalance() {
   const { account } = useAccount();
@@ -46,72 +46,72 @@ function UserBalance() {
   );
 }
 
-function MintToken() {
-  const { account, address } = useAccount();
-  const [amount, setAmount] = useState("");
-  const [amountError, setAmountError] = useState<string | undefined>();
-
-  const { contract } = useTokenContract();
-
-  const calls = useMemo(() => {
-    if (!address || !contract) return [];
-
-    const amountBn = cairo.uint256(amount);
-    return contract.populateTransaction["mint"]!(address, [address, amountBn]);
-  }, [address, contract, amount]);
-
-  const { sendAsync, isPending, error, reset } = useSendTransaction({
-    calls,
-  });
-
-  const updateAmount = useCallback(
-    (newAmount: string) => {
-      // soft-validate amount
-      setAmount(newAmount);
-      try {
-        BigInt(newAmount);
-        setAmountError(undefined);
-      } catch (err) {
-        console.error(err);
-        setAmountError("Please input a valid number");
-      }
-    },
-    [setAmount],
-  );
-
-  const onMint = useCallback(() => {
-    reset();
-    if (account && !amountError) {
-      sendAsync();
-    }
-  }, [account, amountError, reset, sendAsync]);
-
-  const mintButtonDisabled = useMemo(() => {
-    if (isPending) return true;
-    return !account || !!amountError;
-  }, [isPending, account, amountError]);
-
-  return (
-    <div>
-      <h2>Mint token</h2>
-      <p>
-        <span>Amount: </span>
-        <Input
-          type="number"
-          onChange={(evt) => updateAmount(evt.target.value)}
-        />
-      </p>
-      <Button disabled={mintButtonDisabled} onClick={onMint}>
-        {isPending ? "Submitting" : "Mint"}
-      </Button>
-      {error && (
-        <p>
-          <>Error: {error}</>
-        </p>
-      )}
-    </div>
-  );
-}
+// function MintToken() {
+//   const { account, address } = useAccount();
+//   const [amount, setAmount] = useState("");
+//   const [amountError, setAmountError] = useState<string | undefined>();
+
+//   const { contract } = useTokenContract();
+
+//   const calls = useMemo(() => {
+//     if (!address || !contract) return [];
+
+//     const amountBn = cairo.uint256(amount);
+//     return [contract.populateTransaction["mint"](address, [address, amountBn])];
+//   }, [address, contract, amount]);
+
+//   const { sendAsync, isPending, error, reset } = useSendTransaction({
+//     calls,
+//   });
+
+//   const updateAmount = useCallback(
+//     (newAmount: string) => {
+//       // soft-validate amount
+//       setAmount(newAmount);
+//       try {
+//         BigInt(newAmount);
+//         setAmountError(undefined);
+//       } catch (err) {
+//         console.error(err);
+//         setAmountError("Please input a valid number");
+//       }
+//     },
+//     [setAmount],
+//   );
+
+//   const onMint = useCallback(() => {
+//     reset();
+//     if (account && !amountError) {
+//       sendAsync();
+//     }
+//   }, [account, amountError, reset, sendAsync]);
+
+//   const mintButtonDisabled = useMemo(() => {
+//     if (isPending) return true;
+//     return !account || !!amountError;
+//   }, [isPending, account, amountError]);
+
+//   return (
+//     <div>
+//       <h2>Mint token</h2>
+//       <p>
+//         <span>Amount: </span>
+//         <Input
+//           type="number"
+//           onChange={(evt) => updateAmount(evt.target.value)}
+//         />
+//       </p>
+//       <Button disabled={mintButtonDisabled} onClick={onMint}>
+//         {isPending ? "Submitting" : "Mint"}
+//       </Button>
+//       {error && (
+//         <p>
+//           <>Error: {error}</>
+//         </p>
+//       )}
+//     </div>
+//   );
+// }
 
 export default function TokenPage() {
   const { address } = useAccount();
@@ -128,7 +128,7 @@ export default function TokenPage() {
     <div>
       <p>Connected: {address}</p>
       <UserBalance />
-      <MintToken />
+      {/* <MintToken /> */}
     </div>
   );
 }
diff --git a/examples/next/src/components/ConnectWallet.tsx b/examples/next/src/components/ConnectWallet.tsx
@@ -50,13 +50,6 @@ export function ConnectWallet() {
     dragRef.current = undefined;
   };
 
-  const registerSessionUrl =
-    "http://localhost:3001/session?public_key=0x2cb057c18198ae4555a144bfdace051433b9a545dc88224de58fa04e323f269&redirect_uri=http://localhost:3002&policies=%5B%7B%22target%22:%220x03661Ea5946211b312e8eC71B94550928e8Fd3D3806e43c6d60F41a6c5203645%22,%22method%22:%22attack%22,%22description%22:%22Attack%20the%20beast%22%7D,%7B%22target%22:%220x03661Ea5946211b312e8eC71B94550928e8Fd3D3806e43c6d60F41a6c5203645%22,%22method%22:%22claim%22,%22description%22:%22Claim%20your%20tokens%22%7D%5D&rpc_url=http://localhost:8001/x/starknet/sepolia";
-
-  const openRegisterSessionUrl = () => {
-    window.open(registerSessionUrl, "_blank", "noopener,noreferrer");
-  };
-
   return (
     <div
       style={{ position: "relative" }}
@@ -77,10 +70,6 @@ export function ConnectWallet() {
           <Button onClick={() => connect({ connector: controller })}>
             Connect
           </Button>
-          {/* <Button onClick={() => connect({ connector: session })}>
-            Create Session
-          </Button> */}
-          <Button onClick={openRegisterSessionUrl}>Register Session</Button>
         </div>
       )}
 

diff --git a/examples/next/src/components/Header.tsx b/examples/next/src/components/Header.tsx
@@ -29,6 +29,10 @@ const Header = () => {
   const networkRef = useRef<HTMLDivElement>(null);
   const profileRef = useRef<HTMLDivElement>(null);
 
+  const sessionConnector = connectors.find(
+    (c) => c.id === "controller_session",
+  );
+
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -132,13 +136,20 @@ const Header = () => {
           )}
         </div>
       ) : (
-        <Button
-          onClick={() => {
-            connect({ connector: connectors[0] });
-          }}
-        >
-          Connect
-        </Button>
+        <div className="flex gap-2">
+          <Button
+            onClick={() => {
+              connect({ connector: connectors[0] });
+            }}
+          >
+            Connect
+          </Button>
+          {sessionConnector && (
+            <Button onClick={() => connect({ connector: sessionConnector })}>
+              Register Session
+            </Button>
+          )}
+        </div>
       )}
     </div>
   );

diff --git a/examples/next/src/components/providers/StarknetProvider.tsx b/examples/next/src/components/providers/StarknetProvider.tsx
@@ -10,6 +10,7 @@ import { PropsWithChildren } from "react";
 import ControllerConnector from "@cartridge/connector/controller";
 import { SessionPolicies } from "@cartridge/controller";
 import { constants } from "starknet";
+import SessionConnector from "@cartridge/connector/session";
 
 export const ETH_CONTRACT_ADDRESS =
   "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7";
@@ -103,7 +104,7 @@ export function StarknetProvider({ children }: PropsWithChildren) {
     <StarknetConfig
       autoConnect
       chains={[mainnet, sepolia]}
-      connectors={[controller]}
+      connectors={[controller, session]}
       explorer={starkscan}
       provider={provider}
     >
@@ -137,3 +138,10 @@ const controller = new ControllerConnector({
     ],
   },
 });
+
+const session = new SessionConnector({
+  policies,
+  rpc: process.env.NEXT_PUBLIC_RPC_SEPOLIA!,
+  chainId: constants.StarknetChainId.SN_SEPOLIA,
+  redirectUrl: typeof window !== "undefined" ? window.location.origin : "",
+});
diff --git a/examples/next/tsconfig.json b/examples/next/tsconfig.json
@@ -2,23 +2,21 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "extends": "@cartridge/tsconfig/react.json",
   "compilerOptions": {
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
     "baseUrl": "./src",
+    "allowJs": true,
+    "strict": true,
     "noEmit": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
+    "incremental": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
     "jsx": "preserve"
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules",
-    "tests"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "tsup": "^8.0.1",
     "turbo": "^2.0.12",
     "vercel": "^37.4.2",
-    "@types/react": "^18.3.12"
+    "@types/react": "^18.3.12",
+    "typescript": "^5.4.5"
   }
 }
diff --git a/packages/account_sdk/src/signers/mod.rs b/packages/account_sdk/src/signers/mod.rs
@@ -137,7 +137,7 @@ pub enum SignError {
     #[error("No allowed session methods error")]
     NoAllowedSessionMethods,
 
-    #[error("Session policy not allowed error{0}")]
+    #[error("Session policy not allowed error: {0}")]
     SessionPolicyNotAllowed(SessionPolicyError),
 
     #[error("Invalid message provided: {0}")]

diff --git a/packages/connector/package.json b/packages/connector/package.json
@@ -34,6 +34,7 @@
   "tsup": {
     "entry": [
       "src/controller.ts",
+      "src/session.ts",
       "src/index.ts"
     ],
     "format": [
@@ -53,4 +54,4 @@
     "@cartridge/tsconfig": "workspace:*",
     "typescript": "^5.4.5"
   }
-}
+}