From 5a43bddbadcaf780b06a443986570acb77cbe89c Mon Sep 17 00:00:00 2001 From: Francesco Ceccon Date: Tue, 29 Oct 2024 15:36:11 +0100 Subject: [PATCH 1/2] core: reduce the number of wallet api calls --- ...e-bd9008d8-3ad5-49ff-a337-7953d7919b14.json | 7 +++++++ docs/components/demo/account.tsx | 3 ++- packages/core/src/connectors/injected.ts | 14 +++++++++----- packages/core/src/context/starknet.tsx | 17 ++++------------- packages/core/src/hooks/use-account.ts | 18 +++++++++++++----- 5 files changed, 35 insertions(+), 24 deletions(-) create mode 100644 change/@starknet-react-core-bd9008d8-3ad5-49ff-a337-7953d7919b14.json diff --git a/change/@starknet-react-core-bd9008d8-3ad5-49ff-a337-7953d7919b14.json b/change/@starknet-react-core-bd9008d8-3ad5-49ff-a337-7953d7919b14.json new file mode 100644 index 00000000..0dbb0b00 --- /dev/null +++ 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": "francesco@ceccon.me", + "dependentChangeType": "patch" +} diff --git a/docs/components/demo/account.tsx b/docs/components/demo/account.tsx index 1f9c860c..d21ef073 100644 --- 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 (
@@ -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/core/src/connectors/injected.ts b/packages/core/src/connectors/injected.ts index ccf20897..f5cd31b0 100644 --- 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 { 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 { + const chainIdHex = await this.request({ type: "wallet_requestChainId" }); + return BigInt(chainIdHex); + } + private ensureWallet() { // biome-ignore lint/suspicious/noExplicitAny: any const global_object: Record = 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 index e76b1661..9c8cb3a1 100644 --- 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 index 6a4fd060..5aad9388 100644 --- 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({ 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(); From 381ee0b6d5fe1e670516afa6c29661145de1d656 Mon Sep 17 00:00:00 2001 From: Francesco Ceccon Date: Tue, 29 Oct 2024 15:45:03 +0100 Subject: [PATCH 2/2] sync published version --- packages/chains/package.json | 14 +++++++++++--- packages/core/package.json | 14 +++++++++++--- packages/create-starknet/package.json | 14 +++++++++++--- packages/kakarot/package.json | 17 +++++++++++++---- pnpm-lock.yaml | 10 +++++----- 5 files changed, 51 insertions(+), 18 deletions(-) diff --git a/packages/chains/package.json b/packages/chains/package.json index 10125854..4373926e 100644 --- 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 index 690c044a..38b4ae19 100644 --- 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/create-starknet/package.json b/packages/create-starknet/package.json index b9495657..45117641 100644 --- 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 index 6ab6b84f..e2404b76 100644 --- 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 index 3fcffa0b..0341e204 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -213,8 +213,8 @@ importers: specifier: ^0.7.7 version: 0.7.7 '@starknet-react/chains': - specifier: ^3.0.2 - version: 3.0.2 + specifier: ^3.0.3 + version: 3.0.3 '@starknet-react/core': specifier: workspace:^ version: link:../core @@ -1593,8 +1593,8 @@ packages: '@starknet-io/types-js@0.7.7': resolution: {integrity: sha512-WLrpK7LIaIb8Ymxu6KF/6JkGW1sso988DweWu7p5QY/3y7waBIiPvzh27D9bX5KIJNRDyOoOVoHVEKYUYWZ/RQ==} - '@starknet-react/chains@3.0.2': - resolution: {integrity: sha512-kVB1GVirfhrZjSSjXJKGPos9cNWmgdErnaDKflZ8R7ffui1oIMqKHdONx3qwynT8q2TGXwL9Vt844bCLXkNZOA==} + '@starknet-react/chains@3.0.3': + resolution: {integrity: sha512-+XuXba6p/5tnFcnmGKxvbUbFD8WwClcyNfZB5HEU4Md45cco9Z5YZLtqc3ZTYG9vWWwe0nRFSRXsaYizu0f21Q==} '@tanstack/query-core@5.53.2': resolution: {integrity: sha512-gCsABpRrYfLsmwcQ0JCE5I3LOQ9KYrDDSnseUDP3T7ukV8E7+lhlHDJS4Gegt1TSZCsxKhc1J5A7TkF5ePjDUQ==} @@ -5676,7 +5676,7 @@ snapshots: '@starknet-io/types-js@0.7.7': {} - '@starknet-react/chains@3.0.2': {} + '@starknet-react/chains@3.0.3': {} '@tanstack/query-core@5.53.2': {}