core: add useNonceForAddress, fix useAccount, starknetkit & useAccoun…

…d demo (#479)

biome.json

@@ -1,8 +1,5 @@
 {
   "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
-  "organizeImports": {
-    "enabled": false
-  },
   "linter": {
     "enabled": true,
     "rules": {

docs/components/demo/account.tsx

@@ -0,0 +1,32 @@
+import { useAccount } from "@starknet-react/core";
+import { DemoContainer } from "../starknet";
+
+export function Account() {
+  return (
+    <DemoContainer hasWallet>
+      <AccountInner />
+    </DemoContainer>
+  );
+}
+
+function AccountInner() {
+  const { address, connector } = useAccount();
+
+  return (
+    <div>
+      {address ? (
+        <>
+          <p>
+            <span className="font-bold"> Connected Account: </span> {address}
+          </p>
+          <p>
+            <span className="font-bold"> Connected Connector: </span>{" "}
+            {connector?.id}
+          </p>
+        </>
+      ) : (
+        <p>Connect Wallet first</p>
+      )}
+    </div>
+  );
+}

docs/components/demo/index.ts

@@ -2,15 +2,19 @@ import { AddChain } from "./add-chain";
 import { ConnectWallet } from "./connect-wallet";
 import { DeclareContract } from "./declare-contract";
 import { EstimateFees } from "./estimate-fees";
+import { NonceForAddress } from "./nonce-for-address";
 import { ReadContract } from "./read-contract";
 import { SendTransaction } from "./send-transaction";
 import { SignTypedData } from "./sign-typed-data";
 import { StarkAddress } from "./stark-address";
 import { StarkName } from "./stark-name";
 import { StarkProfile } from "./stark-profile";
+import { StarknetKit } from "./starknetkit";
 import { SwitchChain } from "./switch-chain";
+import { Account } from "./account";
 
 export default {
+  Account,
   ConnectWallet,
   ReadContract,
   SendTransaction,
@@ -22,4 +26,6 @@ export default {
   AddChain,
   SignTypedData,
   DeclareContract,
+  NonceForAddress,
+  StarknetKit,
 };

docs/components/demo/nonce-for-address.tsx

@@ -0,0 +1,40 @@
+import {
+  type Address,
+  useAccount,
+  useNonceForAddress,
+} from "@starknet-react/core";
+import { DemoContainer } from "../starknet";
+
+export function NonceForAddress() {
+  return (
+    <DemoContainer hasWallet>
+      <NonceForAddressInner />
+    </DemoContainer>
+  );
+}
+
+function NonceForAddressInner() {
+  const { account } = useAccount();
+
+  const { data, isLoading, isError, error } = useNonceForAddress({
+    address: account?.address as Address,
+  });
+
+  return (
+    <div className="flex flex-col">
+      <h1 className="font-bold text-lg">Nonce for Address</h1>
+      <div className="flex flex-col mt-2">
+        {account?.address ? (
+          <>
+            <div>nonce: {data} </div>
+            <div>isLoading: {isLoading ? "true" : "false"} </div>
+            <div>isError: {isError ? "true" : "false"} </div>
+            <div>error: {error ? error.message : "null"} </div>
+          </>
+        ) : (
+          "Connect your wallet to start."
+        )}
+      </div>
+    </div>
+  );
+}

docs/components/demo/read-contract.tsx

@@ -29,7 +29,7 @@ export function ReadContractInner() {
     args: [],
     watch: true,
     blockIdentifier:
-      blockIdentifier === "latest" ? BlockTag.latest : BlockTag.pending,
+      blockIdentifier === "latest" ? BlockTag.LATEST : BlockTag.PENDING,
   });
 
   // Cast bigint into string to avoid "TypeError: Do not know how to serialize a BigInt"

docs/components/demo/send-transaction.tsx

@@ -34,7 +34,9 @@ function SendTransactionInner() {
     <div className="flex flex-col">
       {address ? (
         <div>
-          <button onClick={() => send()}>Send Transaction</button>
+          <button className="button" onClick={() => send()}>
+            Send Transaction
+          </button>
           {isError && <p>Error: {error?.message}</p>}
         </div>
       ) : (

docs/components/demo/starknetkit.tsx

@@ -0,0 +1,93 @@
+import {
+  type Connector,
+  useAccount,
+  useConnect,
+  useContract,
+  useNetwork,
+  useSendTransaction,
+} from "@starknet-react/core";
+import { DemoContainer } from "../starknet";
+import {
+  type StarknetkitConnector,
+  useStarknetkitConnectModal,
+} from "starknetkit";
+import type { Abi } from "starknet";
+
+export function StarknetKit() {
+  return (
+    <DemoContainer>
+      <StarknetKitInner />
+    </DemoContainer>
+  );
+}
+
+function StarknetKitInner() {
+  const { connectAsync, connectors } = useConnect();
+  const { starknetkitConnectModal } = useStarknetkitConnectModal({
+    connectors: connectors as StarknetkitConnector[],
+  });
+
+  const connectWallet = async () => {
+    const { connector } = await starknetkitConnectModal();
+    if (!connector) {
+      return;
+    }
+    await connectAsync({ connector: connector as Connector });
+  };
+
+  const { address } = useAccount();
+
+  const { chain } = useNetwork();
+  const { contract } = useContract({
+    abi,
+    address: chain.nativeCurrency.address,
+  });
+
+  const { isError, error, send } = useSendTransaction({
+    calls:
+      contract && address
+        ? [contract.populate("transfer", [address, 1n])]
+        : undefined,
+  });
+
+  return (
+    <div>
+      {address ? (
+        <>
+          <p>
+            <span className="font-bold"> Connected Account: </span> {address}
+          </p>
+          <div>
+            <button onClick={() => send()} className="button">
+              Send Transaction
+            </button>
+            {isError && <p>Error: {error?.message}</p>}
+          </div>
+        </>
+      ) : (
+        <button onClick={connectWallet} className="button">
+          Connect Starknet Wallet (StarknetKit)
+        </button>
+      )}
+    </div>
+  );
+}
+
+const abi = [
+  {
+    type: "function",
+    name: "transfer",
+    state_mutability: "external",
+    inputs: [
+      {
+        name: "recipient",
+        type: "core::starknet::contract_address::ContractAddress",
+      },
+      {
+        name: "amount",
+        type: "core::integer::u256",
+      },
+    ],
+    outputs: [],
+  },
+] as const satisfies Abi;

docs/package.json

@@ -7,18 +7,19 @@
     "build": "vocs build",
     "preview": "vocs preview",
     "lint": "biome lint components",
-    "lint:fix": "biome lint components --apply",
+    "lint:fix": "biome lint components --write",
     "format:check": "biome format components",
     "format": "biome format components --write"
   },
   "dependencies": {
     "@starknet-react/chains": "workspace:*",
     "@starknet-react/core": "workspace:*",
     "react": "^18.2.0",
-    "starknet": "6.9.0",
+    "starknet": "^6.12.1",
+    "starknetkit": "^2.2.16",
     "vocs": "1.0.0-alpha.53"
   },
   "devDependencies": {
     "@starknet-react/typescript-config": "workspace:*"
   }
-}
+}

docs/pages/demo/account.mdx

@@ -0,0 +1,5 @@
+import Demo from "../../components/demo";
+
+# useAccount Demo
+
+<Demo.Account />

docs/pages/demo/index.mdx

@@ -11,3 +11,6 @@
 - [Add Chain](/demo/add-chain)
 - [Sign Typed Data](/demo/sign-typed-data)
 - [Declare Contract (TODO)](/demo/declare-contract)
+- [Nonce for Address](/demo/nonce-for-address)
+- [StarknetKit Integration](/demo/starknetkit)
+- [Account](/demo/account)

docs/pages/demo/nonce-for-address.mdx

@@ -0,0 +1,5 @@
+import Demo from "../../components/demo";
+
+# Nonce for Address
+
+<Demo.NonceForAddress />

docs/pages/demo/starknetkit.mdx

@@ -0,0 +1,5 @@
+import Demo from "../../components/demo";
+
+# StarknetKit Integration
+
+<Demo.StarknetKit />