core: add useDeployAccount hook and demo

.changeset/thirty-paws-dance.md

@@ -0,0 +1,5 @@
+---
+"@starknet-react/core": patch
+---
+
+Add useDeployAccount hook

package.json

@@ -12,7 +12,6 @@
     "lint": "turbo run lint --parallel",
     "lint:fix": "turbo run lint:fix --parallel",
     "format": "turbo run format --parallel",
-    "typedoc": "turbo run typedoc --filter @starknet-react/*",
     "clean": "turbo run clean --parallel",
     "release": "pnpm build && pnpm changeset publish",
     "postinstall": "pnpm run prepare",
@@ -33,7 +32,7 @@
     "pretty-quick": "^3.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "starknet": "5.18.0",
+    "starknet": "5.19.0",
     "turbo": "^1.10.14",
     "typescript": "^4.9.5"
   },

packages/core/package.json

@@ -28,19 +28,18 @@
     "README.md"
   ],
   "scripts": {
-    "build": "tsup && typedoc",
+    "build": "tsup",
     "clean": "rimraf dist",
     "lint": "biome check .",
     "lint:fix": "pnpm lint --apply",
     "format": "biome format . --write",
-    "typedoc": "typedoc",
     "test": "vitest",
     "test:typecheck": "vitest typecheck"
   },
   "peerDependencies": {
     "get-starknet-core": "^3.2.0",
     "react": "^18.0",
-    "starknet": "^5.18.0"
+    "starknet": "^5.19.0"
   },
   "dependencies": {
     "@starknet-react/chains": "workspace:^",

packages/core/src/context/account.tsx

@@ -0,0 +1,26 @@
+import React, { useContext } from "react";
+
+import { AccountInterface } from "starknet";
+
+const AccountContext = React.createContext<AccountInterface | undefined>(
+  undefined,
+);
+
+export function useStarknetAccount() {
+  const account = useContext(AccountContext);
+  return { account };
+}
+
+export function AccountProvider({
+  account,
+  children,
+}: {
+  account?: AccountInterface;
+  children: React.ReactNode;
+}) {
+  return (
+    <AccountContext.Provider value={account}>
+      {children}
+    </AccountContext.Provider>
+  );
+}

packages/core/src/context/index.tsx

@@ -2,6 +2,8 @@ import React from "react";
 
 import { StarknetProvider, StarknetProviderProps } from "./starknet";
 
+export { AccountProvider as OverrideAccount } from "./account";
+
 export type StarknetConfigProps = StarknetProviderProps;
 
 export function StarknetConfig({ children, ...config }: StarknetConfigProps) {

packages/core/src/context/starknet.test.tsx

@@ -1,6 +1,6 @@
 import { devnet } from "@starknet-react/chains";
 import { describe, expect, it } from "vitest";
-import { address, connector } from "../../test/devnet";
+import { connector } from "../../test/devnet";
 import { act, renderHook } from "../../test/react";
 
 import { useStarknet } from "./starknet";
@@ -18,12 +18,12 @@ describe("StarknetProvider", () => {
   it("connects to a connector", async () => {
     const { result } = renderHook(() => useStarknet());
 
-    expect(result.current.account).toBeUndefined();
+    expect(result.current.connector).toBeUndefined();
 
     await act(async () => {
       await result.current.connect({ connector: connector });
     });
 
-    expect(result.current.account?.address).toEqual(address);
+    expect(result.current.connector).toBeDefined();
   });
 });

packages/core/src/context/starknet.tsx

@@ -12,11 +12,10 @@ import { AccountInterface, ProviderInterface, RpcProvider } from "starknet";
 import { Connector } from "~/connectors";
 import { ConnectorNotFoundError } from "~/errors";
 import { ChainProviderFactory } from "~/providers";
+import { AccountProvider } from "./account";
 
 /** State of the Starknet context. */
 export interface StarknetState {
-  /** Connected account. */
-  account?: AccountInterface;
   /** Connected connector. */
   connector?: Connector;
   /** Connect the given connector. */
@@ -138,7 +137,7 @@ function useStarknetManager({
   providers,
   connectors = [],
   autoConnect = false,
-}: UseStarknetManagerProps): StarknetState {
+}: UseStarknetManagerProps): StarknetState & { account?: AccountInterface } {
   const initialChain = chains[0];
   if (initialChain === undefined) {
     throw new Error("Must provide at least one chain.");
@@ -241,9 +240,9 @@ function useStarknetManager({
   }, []);
 
   return {
+    account: state.currentAccount,
     provider: state.currentProvider,
     chain: state.currentChain,
-    account: state.currentAccount,
     connector: state.currentConnector,
     connect,
     disconnect,
@@ -277,7 +276,7 @@ export function StarknetProvider({
   queryClient,
   children,
 }: StarknetProviderProps): JSX.Element {
-  const state = useStarknetManager({
+  const { account, ...state } = useStarknetManager({
     chains,
     providers,
     connectors,
@@ -287,7 +286,7 @@ export function StarknetProvider({
   return (
     <QueryClientProvider client={queryClient ?? new QueryClient()}>
       <StarknetContext.Provider value={state}>
-        {children}
+        <AccountProvider account={account}>{children}</AccountProvider>
       </StarknetContext.Provider>
     </QueryClientProvider>
   );

packages/core/src/hooks/index.ts

@@ -7,6 +7,7 @@ export * from "./useContract";
 export * from "./useContractFactory";
 export * from "./useContractRead";
 export * from "./useContractWrite";
+export * from "./useDeployAccount";
 export * from "./useDisconnect";
 export * from "./useInvalidateOnBlock";
 export * from "./useNetwork";

packages/core/src/hooks/useAccount.ts

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from "react";
 import { AccountInterface } from "starknet";
 
 import { Connector } from "~/connectors";
+import { useStarknetAccount } from "~/context/account";
 import { useStarknet } from "~/context/starknet";
 
 import { useConnect } from "./useConnect";
@@ -68,7 +69,7 @@ export function useAccount({
   onConnect,
   onDisconnect,
 }: UseAccountProps = {}): UseAccountResult {
-  const { account: connectedAccount } = useStarknet();
+  const { account: connectedAccount } = useStarknetAccount();
   const { connectors } = useConnect();
   const [state, setState] = useState<UseAccountResult>({
     status: "disconnected",
@@ -87,6 +88,7 @@ export function useAccount({
         isReconnecting: false,
       });
     }
+
     for (const connector of connectors) {
       if (!connector.available()) continue;
       const connAccount = await connector.account();
@@ -107,6 +109,19 @@ export function useAccount({
         });
       }
     }
+
+    // If we get here, we're not connected to any connector.
+    // This can happen if it's an arcade account.
+    setState({
+      connector: undefined,
+      account: connectedAccount,
+      address: connectedAccount.address,
+      status: "connected",
+      isConnected: true,
+      isConnecting: false,
+      isDisconnected: false,
+      isReconnecting: false,
+    });
   }, [
     setState,
     connectedAccount,

packages/core/src/hooks/useBalance.ts

@@ -42,6 +42,7 @@ export function useBalance({
   token,
   address,
   watch = false,
+  enabled: enabled_ = true,
   ...props
 }: UseBalanceProps) {
   const { chain } = useNetwork();
@@ -56,8 +57,8 @@ export function useBalance({
   );
 
   const enabled = useMemo(
-    () => Boolean(props.enabled && contract && address),
-    [chain, contract, address],
+    () => Boolean(enabled_ && contract && address),
+    [enabled_, contract, address],
   );
 
   useInvalidateOnBlock({

packages/core/src/hooks/useContractWrite.ts

@@ -1,22 +1,32 @@
-import { AccountInterface, Call, InvokeFunctionResponse } from "starknet";
+import {
+  Abi,
+  AccountInterface,
+  Call,
+  InvocationsDetails,
+  InvokeFunctionResponse,
+} from "starknet";
 
 import { UseMutationProps, UseMutationResult, useMutation } from "~/query";
 
 import { useAccount } from "./useAccount";
 
 /** Arguments for `useContractWrite`. */
-export type Variables = {
+export type ContractWriteVariables = {
   /** List of smart contract calls to execute. */
   calls?: Call[];
+  /** Contract ABIs for better displaying. */
+  abis?: Abi[];
+  /** Transaction options. */
+  options?: InvocationsDetails;
 };
 
-export type UseContractWriteProps = Variables &
-  UseMutationProps<InvokeFunctionResponse, Error, Variables>;
+export type UseContractWriteProps = ContractWriteVariables &
+  UseMutationProps<InvokeFunctionResponse, Error, ContractWriteVariables>;
 
 type MutationResult = UseMutationResult<
   InvokeFunctionResponse,
   Error,
-  Variables
+  ContractWriteVariables
 >;
 
 export type UseContractWriteResult = Omit<
@@ -39,6 +49,8 @@ export type UseContractWriteResult = Omit<
  */
 export function useContractWrite({
   calls,
+  abis,
+  options,
   ...props
 }: UseContractWriteProps): UseContractWriteResult {
   const { account } = useAccount();
@@ -56,8 +68,8 @@ export function useContractWrite({
     status,
     variables,
   } = useMutation({
-    mutationKey: mutationKey({ account, calls }),
-    mutationFn: mutationFn({ account, calls }),
+    mutationKey: mutationKey({ account, calls, abis, options }),
+    mutationFn: mutationFn({ account, calls, abis, options }),
     ...props,
   });
 
@@ -80,17 +92,31 @@ export function useContractWrite({
 function mutationKey({
   account,
   calls,
-}: { account?: AccountInterface; calls?: Call[] }) {
-  return [{ entity: "contractWrite", account, calls }] as const;
+  abis,
+  options,
+}: {
+  account?: AccountInterface;
+  calls?: Call[];
+  abis?: Abi[];
+  options?: InvocationsDetails;
+}) {
+  return [{ entity: "contractWrite", account, calls, abis, options }] as const;
 }
 
 function mutationFn({
   account,
   calls,
-}: { account?: AccountInterface; calls?: Call[] }) {
+  abis,
+  options,
+}: {
+  account?: AccountInterface;
+  calls?: Call[];
+  abis?: Abi[];
+  options?: InvocationsDetails;
+}) {
   return async function () {
     if (!account) throw new Error("account is required");
     if (!calls || calls.length === 0) throw new Error("calls are required");
-    return account?.execute(calls);
+    return await account?.execute(calls, abis, options);
   };
 }