core: reduce the number of wallet api calls (#522)

## Context In some cases, calls to the wallet API can take a long time (>100ms) so the library should make as few of them as possible to minimize the time it takes to connect to a wallet. ## Changes in this Pull Request - Reduce the calls to `wallet_requestAccounts` used to check if the wallet is locked. - Update the `address` property in the `useAccount` hook without waiting for the `account` object to be fully built. ## Test Plan Use the `account` demo to test that less calls are made to the wallet. You can set a breakpoint in the `InjectedConnector.request` function.
apibara · Oct 29, 2024 · 6993533 · 6993533
2 parents 5c0029b + 381ee0b
commit 6993533
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 42 deletions.
diff --git a/change/@starknet-react-core-bd9008d8-3ad5-49ff-a337-7953d7919b14.json b/change/@starknet-react-core-bd9008d8-3ad5-49ff-a337-7953d7919b14.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "core: reduce the number of wallet api calls",
+  "packageName": "@starknet-react/core",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/docs/components/demo/account.tsx b/docs/components/demo/account.tsx
@@ -11,7 +11,7 @@ export function Account() {
 }
 
 function AccountInner() {
-  const { address, connector } = useAccount();
+  const { address, connector, account } = useAccount();
 
   return (
     <div className="flex flex-col gap-4">
@@ -20,6 +20,7 @@ function AccountInner() {
           {
             address: address ?? "Connect wallet first",
             connector: connector?.id ?? "Connect wallet first",
+            account: account ? typeof account : "Connect wallet first",
           },
           null,
           2,

diff --git a/packages/chains/package.json b/packages/chains/package.json
@@ -1,10 +1,14 @@
 {
   "name": "@starknet-react/chains",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "license": "MIT",
   "repository": "apibara/starknet-react",
   "homepage": "https://www.starknet-react.com/",
-  "keywords": ["starknet", "ethereum", "l2"],
+  "keywords": [
+    "starknet",
+    "ethereum",
+    "l2"
+  ],
   "type": "module",
   "main": "./src/index.ts",
   "exports": "./src/index.ts",
@@ -18,7 +22,11 @@
         "default": "./dist/index.js"
       }
     },
-    "files": ["dist", "src", "README.md"]
+    "files": [
+      "dist",
+      "src",
+      "README.md"
+    ]
   },
   "scripts": {
     "build": "tsup",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,10 +1,14 @@
 {
   "name": "@starknet-react/core",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "license": "MIT",
   "repository": "apibara/starknet-react",
   "homepage": "https://www.starknet-react.com",
-  "keywords": ["starknet", "ethereum", "l2"],
+  "keywords": [
+    "starknet",
+    "ethereum",
+    "l2"
+  ],
   "type": "module",
   "main": "./src/index.ts",
   "exports": "./src/index.ts",
@@ -18,7 +22,11 @@
         "default": "./dist/index.js"
       }
     },
-    "files": ["dist", "src", "README.md"]
+    "files": [
+      "dist",
+      "src",
+      "README.md"
+    ]
   },
   "scripts": {
     "build": "tsup",

diff --git a/packages/core/src/connectors/injected.ts b/packages/core/src/connectors/injected.ts
@@ -94,9 +94,7 @@ export class InjectedConnector extends Connector {
     }
 
     try {
-      const chainIdHex = await this.request({ type: "wallet_requestChainId" });
-      const chainId = BigInt(chainIdHex);
-      return chainId;
+      return this.requestChainId();
     } catch {
       throw new ConnectorNotFoundError();
     }
@@ -118,6 +116,7 @@ export class InjectedConnector extends Connector {
     provider: ProviderOptions | ProviderInterface,
   ): Promise<AccountInterface> {
     this.ensureWallet();
+
     const locked = await this.isLocked();
 
     if (locked || !this._wallet) {
@@ -159,7 +158,7 @@ export class InjectedConnector extends Connector {
 
     const [account] = accounts;
 
-    const chainId = await this.chainId();
+    const chainId = await this.requestChainId();
     this.emit("connect", { account, chainId });
 
     return {
@@ -203,6 +202,11 @@ export class InjectedConnector extends Connector {
     return accounts.length === 0;
   }
 
+  private async requestChainId(): Promise<bigint> {
+    const chainIdHex = await this.request({ type: "wallet_requestChainId" });
+    return BigInt(chainIdHex);
+  }
+
   private ensureWallet() {
     // biome-ignore lint/suspicious/noExplicitAny: any
     const global_object: Record<string, any> = globalThis;
@@ -222,7 +226,7 @@ export class InjectedConnector extends Connector {
       const [account] = accounts;
 
       if (account) {
-        const chainId = await this.chainId();
+        const chainId = await this.requestChainId();
         this.emit("change", { account, chainId });
       } else {
         this.emit("disconnect");

diff --git a/packages/core/src/context/starknet.tsx b/packages/core/src/context/starknet.tsx
@@ -91,7 +91,6 @@ interface StarknetManagerState {
   currentChain: Chain;
   connectors: Connector[];
   currentAddress?: Address;
-  currentAccount?: AccountInterface;
   currentProvider: ProviderInterface;
   error?: Error;
 }
@@ -165,17 +164,13 @@ function useStarknetManager({
       }
 
       if (address && connectorRef.current) {
-        const account = await connectorRef.current.account(
-          state.currentProvider,
-        );
         setState((state) => ({
           ...state,
           currentAddress: address as Address,
-          currentAccount: account,
         }));
       }
     },
-    [updateChainAndProvider, state.currentProvider],
+    [updateChainAndProvider],
   );
 
   useEffect(() => {
@@ -203,14 +198,13 @@ function useStarknetManager({
         const { chainId, account: address } = await connector.connect({
           chainIdHint: defaultChain.id,
         });
-        const account = await connector.account(state.currentProvider);
 
-        if (address !== state.currentAccount?.address) {
+        if (address !== state.currentAddress) {
           connectorRef.current = connector;
+
           setState((state) => ({
             ...state,
             currentAddress: address as Address,
-            currentAccount: account,
           }));
         }
 
@@ -233,8 +227,7 @@ function useStarknetManager({
     },
     [
       autoConnect,
-      state.currentAccount,
-      state.currentProvider,
+      state.currentAddress,
       defaultChain.id,
       handleConnectorChange,
       updateChainAndProvider,
@@ -245,7 +238,6 @@ function useStarknetManager({
     setState((state) => ({
       ...state,
       currentAddress: undefined,
-      currentAccount: undefined,
       currentProvider: defaultProvider,
       currentChain: defaultChain,
     }));
@@ -299,7 +291,6 @@ function useStarknetManager({
   }, []);
 
   return {
-    account: state.currentAccount,
     address: state.currentAddress,
     provider: state.currentProvider,
     chain: state.currentChain,

diff --git a/packages/core/src/hooks/use-account.ts b/packages/core/src/hooks/use-account.ts
@@ -7,6 +7,7 @@ import { useStarknetAccount } from "../context/account";
 import { useStarknet } from "../context/starknet";
 import { getAddress } from "../utils";
 import { useConnect } from "./use-connect";
+import { useProvider } from "./use-provider";
 
 /** Account connection status. */
 export type AccountStatus =
@@ -47,25 +48,32 @@ export type UseAccountResult = {
  */
 export function useAccount(): UseAccountResult {
   const { connector, chain } = useStarknet();
-  const { account: connectedAccount, address: connectedAddress } =
-    useStarknetAccount();
+  const { provider } = useProvider();
+  const { address: connectedAddress } = useStarknetAccount();
   const [state, setState] = useState<UseAccountResult>({
     status: "disconnected",
   });
 
   const refreshState = useCallback(async () => {
-    if (connector && connectedAccount && connectedAddress) {
+    if (connector && provider && connectedAddress) {
       setState({
         status: "connected" as const,
         connector,
         chainId: chain.id,
-        account: connectedAccount,
+        account: undefined,
         address: getAddress(connectedAddress),
         isConnected: true,
         isConnecting: false,
         isDisconnected: false,
         isReconnecting: false,
       });
+
+      // Lazily build the account since it makes a wallet call to check if the wallet is locked.
+      connector
+        .account(provider)
+        .then((connectedAccount) =>
+          setState((state) => ({ ...state, account: connectedAccount })),
+        );
     } else {
       return setState({
         status: "disconnected" as const,
@@ -79,7 +87,7 @@ export function useAccount(): UseAccountResult {
         isReconnecting: false,
       });
     }
-  }, [connectedAccount, connector, chain.id, connectedAddress]);
+  }, [provider, connector, chain.id, connectedAddress]);
 
   useEffect(() => {
     refreshState();

diff --git a/packages/create-starknet/package.json b/packages/create-starknet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-starknet",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Create starknet apps with one command",
   "main": "./dist/index.js",
   "type": "module",
@@ -16,7 +16,11 @@
   "bin": {
     "create-starknet": "dist/index.js"
   },
-  "keywords": ["starknet", "ethereum", "l2"],
+  "keywords": [
+    "starknet",
+    "ethereum",
+    "l2"
+  ],
   "author": "Yohan Tancrez",
   "license": "MIT",
   "devDependencies": {
@@ -27,7 +31,11 @@
     "tsup": "^8.0.2",
     "typescript": "^5.5.4"
   },
-  "files": ["dist", "src", "README.md"],
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
   "dependencies": {
     "@starknet-react/typescript-config": "workspace:*",
     "@types/cross-spawn": "^6.0.2",

diff --git a/packages/kakarot/package.json b/packages/kakarot/package.json
@@ -1,10 +1,15 @@
 {
   "name": "@starknet-react/kakarot",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "license": "MIT",
   "repository": "apibara/starknet-react",
   "homepage": "https://www.starknet-react.com/",
-  "keywords": ["starknet", "ethereum", "l2", "kakarot"],
+  "keywords": [
+    "starknet",
+    "ethereum",
+    "l2",
+    "kakarot"
+  ],
   "type": "module",
   "main": "./src/index.ts",
   "exports": "./src/index.ts",
@@ -18,7 +23,11 @@
         "default": "./dist/index.js"
       }
     },
-    "files": ["dist", "src", "README.md"]
+    "files": [
+      "dist",
+      "src",
+      "README.md"
+    ]
   },
   "scripts": {
     "build": "tsup",
@@ -35,7 +44,7 @@
   },
   "dependencies": {
     "@starknet-io/types-js": "^0.7.7",
-    "@starknet-react/chains": "^3.0.2",
+    "@starknet-react/chains": "^3.0.3",
     "@starknet-react/core": "workspace:^",
     "mipd": "^0.0.7",
     "starknet": "^6.11.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml