diff --git a/examples/starknet-react-next/src/components/TransferEth.tsx b/examples/starknet-react-next/src/components/TransferEth.tsx index 9924a0c93..77180c43a 100644 --- a/examples/starknet-react-next/src/components/TransferEth.tsx +++ b/examples/starknet-react-next/src/components/TransferEth.tsx @@ -25,12 +25,12 @@ export const TransferEth = () => { { contractAddress: ETH_CONTRACT, entrypoint: "approve", - calldata: [account?.address, "0x11C37937E08000", "0x0"], + calldata: [account?.address, "0x1C6BF52634000", "0x0"], }, { contractAddress: ETH_CONTRACT, entrypoint: "transfer", - calldata: [account?.address, "0x11C37937E08000", "0x0"], + calldata: [account?.address, "0x1C6BF52634000", "0x0"], }, ]) .then(({ transaction_hash }) => setTxnHash(transaction_hash)) diff --git a/examples/starknet-react-next/src/components/providers/StarknetProvider.tsx b/examples/starknet-react-next/src/components/providers/StarknetProvider.tsx index ca8268c0e..913f10ec1 100644 --- a/examples/starknet-react-next/src/components/providers/StarknetProvider.tsx +++ b/examples/starknet-react-next/src/components/providers/StarknetProvider.tsx @@ -25,8 +25,8 @@ const ETH_TOKEN_ADDRESS = // const PAPER_TOKEN_ADDRESS = // "0x0410466536b5ae074f7fea81e5533b8134a9fa08b3dd077dd9db08f64997d113"; -const cartridge = new CartridgeConnector( - [ +const cartridge = new CartridgeConnector({ + policies: [ { target: ETH_TOKEN_ADDRESS, method: "approve", @@ -50,35 +50,33 @@ const cartridge = new CartridgeConnector( method: "allowance", }, ], - { - url: - !process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL || - process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL.split(".")[0] === - "cartridge-starknet-react-next" - ? process.env.XFRAME_URL - : "https://" + - (process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL ?? "").replace( - "cartridge-starknet-react-next", - "keychain", - ), - rpc: process.env.NEXT_PUBLIC_RPC_SEPOLIA, - paymaster: { - caller: shortString.encodeShortString("ANY_CALLER"), - }, - // theme: "dope-wars", - // colorMode: "light" - // prefunds: [ - // { - // address: ETH_TOKEN_ADDRESS, - // min: "300000000000000", - // }, - // { - // address: PAPER_TOKEN_ADDRESS, - // min: "100", - // }, - // ], + url: + !process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL || + process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL.split(".")[0] === + "cartridge-starknet-react-next" + ? process.env.XFRAME_URL + : "https://" + + (process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL ?? "").replace( + "cartridge-starknet-react-next", + "keychain", + ), + rpc: process.env.NEXT_PUBLIC_RPC_SEPOLIA, + paymaster: { + caller: shortString.encodeShortString("ANY_CALLER"), }, -); + // theme: "dope-wars", + // colorMode: "light" + // prefunds: [ + // { + // address: ETH_TOKEN_ADDRESS, + // min: "300000000000000", + // }, + // { + // address: PAPER_TOKEN_ADDRESS, + // min: "100", + // }, + // ], +}); function provider(chain: Chain) { switch (chain) { diff --git a/packages/connector/src/index.ts b/packages/connector/src/index.ts index e0693ea89..f9c54984a 100644 --- a/packages/connector/src/index.ts +++ b/packages/connector/src/index.ts @@ -1,14 +1,14 @@ import { Connector } from "@starknet-react/core"; -import Controller, { Policy, ControllerOptions } from "@cartridge/controller"; +import Controller, { ControllerOptions } from "@cartridge/controller"; import { AccountInterface } from "starknet"; class ControllerConnector extends Connector { public controller: Controller; private _account: AccountInterface | undefined; - constructor(policies?: Policy[], options?: ControllerOptions) { + constructor(options?: ControllerOptions) { super(); - this.controller = new Controller(policies, options); + this.controller = new Controller(options); } readonly id = "cartridge"; diff --git a/packages/controller/src/index.ts b/packages/controller/src/index.ts index 9afc97f27..10f808fe7 100644 --- a/packages/controller/src/index.ts +++ b/packages/controller/src/index.ts @@ -30,7 +30,7 @@ import { KEYCHAIN_URL, RPC_SEPOLIA } from "./constants"; class Controller { private url: URL; - private policies: Policy[]; + private policies?: Policy[]; private paymaster?: PaymasterOptions; private connection?: Connection; private modal?: Modal; @@ -38,21 +38,33 @@ class Controller { public rpc: URL; public account?: AccountInterface; - constructor(policies: Policy[] = [], options: ControllerOptions = {}) { - this.url = new URL(options?.url || KEYCHAIN_URL); - this.rpc = new URL(options?.rpc || RPC_SEPOLIA); - this.paymaster = options.paymaster; - this.policies = policies.map((policy) => ({ - ...policy, - target: addAddressPadding(policy.target), - })); + constructor({ + policies, + url, + rpc, + paymaster, + theme, + config, + colorMode, + prefunds, + }: ControllerOptions = {}) { + this.url = new URL(url || KEYCHAIN_URL); + this.rpc = new URL(rpc || RPC_SEPOLIA); + this.paymaster = paymaster; + + if (policies?.length) { + this.policies = policies.map((policy) => ({ + ...policy, + target: addAddressPadding(policy.target), + })); + } - this.setTheme(options?.theme, options?.config?.presets); - if (options?.colorMode) { - this.setColorMode(options.colorMode); + this.setTheme(theme, config?.presets); + if (colorMode) { + this.setColorMode(colorMode); } - if (options?.prefunds?.length) { - this.setPrefunds(options.prefunds); + if (prefunds?.length) { + this.setPrefunds(prefunds); } this.initModal(); @@ -177,10 +189,10 @@ class Controller { this.modal.open(); try { - let response = await this.keychain.connect( - this.policies, - this.rpc.toString(), - ); + let response = await this.keychain.connect({ + rpcUrl: this.rpc.toString(), + policies: this.policies, + }); if (response.code !== ResponseCodes.SUCCESS) { throw new Error(response.message); } diff --git a/packages/controller/src/types.ts b/packages/controller/src/types.ts index af13f5d32..1f9c6dcb1 100644 --- a/packages/controller/src/types.ts +++ b/packages/controller/src/types.ts @@ -61,10 +61,10 @@ export type ProbeReply = { export interface Keychain { probe(rpcUrl?: string): Promise; - connect( - policies: Policy[], - rpcUrl: string, - ): Promise; + connect(args: { + rpcUrl: string; + policies?: Policy[]; + }): Promise; disconnect(): void; reset(): void; @@ -119,6 +119,7 @@ export interface Modal { * Options for configuring the controller */ export type ControllerOptions = { + policies?: Policy[]; /** The URL of keychain */ url?: string; /** The URL of the RPC */ diff --git a/packages/keychain/src/Policies.tsx b/packages/keychain/src/Policies.tsx index 3f4bfe1ed..29037ff98 100644 --- a/packages/keychain/src/Policies.tsx +++ b/packages/keychain/src/Policies.tsx @@ -48,7 +48,7 @@ export function Policies({ // The container already set border radius (for top & bottom), but we // set the bottom radius for the last item here because for certain // browsers' scrolling behaviour (eg Firefox) just to make it look nicer. - borderBottomRadius={i === policies.length - 1 ? "base" : "none"} + borderBottomRadius={i === policies?.length - 1 ? "base" : "none"} > {({ isExpanded }) => ( <> diff --git a/packages/keychain/src/components/connect/Login.tsx b/packages/keychain/src/components/connect/Login.tsx index a47d163e3..b37095a41 100644 --- a/packages/keychain/src/components/connect/Login.tsx +++ b/packages/keychain/src/components/connect/Login.tsx @@ -81,17 +81,10 @@ function Form({ credentialId, }); - switch (mode) { - case LoginMode.Webauthn: - await doLogin(usernameField.value, credentialId); - break; - case LoginMode.Controller: - if (policies.length === 0) { - throw new Error("Policies required for controller "); - } - - await controller.approve(origin, expiresAt, policies); - break; + if (mode === LoginMode.Controller && policies.length > 0) { + await controller.approve(origin, expiresAt, policies); + } else { + await doLogin(usernameField.value, credentialId); } controller.store(); @@ -100,18 +93,8 @@ function Form({ if (onSuccess) { onSuccess(); } - - log({ type: "webauthn_login", address }); } catch (e) { setError(e); - - log({ - type: "webauthn_login_error", - payload: { - error: e?.message, - }, - address, - }); } setIsLoading(false); diff --git a/packages/keychain/src/components/layout/Footer/index.tsx b/packages/keychain/src/components/layout/Footer/index.tsx index abb049401..dd0a11ccf 100644 --- a/packages/keychain/src/components/layout/Footer/index.tsx +++ b/packages/keychain/src/components/layout/Footer/index.tsx @@ -32,7 +32,7 @@ export function Footer({ const isExpandable = useMemo( () => !!origin && - !!policies.length && + !!policies?.length && variant === "connect" && !isSignup && !hideTxSummary, @@ -100,7 +100,7 @@ export function Footer({ onClick={footer.onToggle} _hover={{ cursor: "pointer" }} > - {!hideTxSummary && !!policies.length && ( + {!hideTxSummary && !!policies?.length && ( void; }) { return (origin: string) => - (policies: Policy[], rpcUrl: string): Promise => { + ({ + rpcUrl, + policies, + }: { + rpcUrl: string; + policies?: Policy[]; + }): Promise => { setOrigin(origin); setRpcUrl(rpcUrl); - setPolicies(policies); + + if (policies?.length) { + setPolicies(policies); + } return new Promise((resolve, reject) => { setContext({ diff --git a/packages/keychain/src/utils/connection/types.ts b/packages/keychain/src/utils/connection/types.ts index 14736619e..4e820133f 100644 --- a/packages/keychain/src/utils/connection/types.ts +++ b/packages/keychain/src/utils/connection/types.ts @@ -26,7 +26,7 @@ export type ConnectionCtx = export type ConnectCtx = { origin: string; type: "connect"; - policies: Policy[]; + policies?: Policy[]; resolve: (res: ConnectReply | ConnectError) => void; reject: (reason?: unknown) => void; };