docs: update documentation for v3 release (#494)

.github/workflows/build.yml

@@ -27,7 +27,7 @@ jobs:
           node-version: 20
       - uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 9.7
       - name: Install dependencies
         run: pnpm install --strict-peer-dependencies=false --no-frozen-lockfile
       - name: Run check format

.github/workflows/release-documentation.yml

@@ -21,7 +21,7 @@ jobs:
           node-version: 20
       - uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 9.7
       - name: Install dependencies
         run: pnpm install --strict-peer-dependencies=false --no-frozen-lockfile
       - name: Build Project Artifacts

.github/workflows/release.yml

@@ -15,7 +15,7 @@ jobs:
           node-version: 20
       - uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 9.7
       - name: Install dependencies
         run: pnpm install --strict-peer-dependencies=false --no-frozen-lockfile
       - name: Create Release Pull Request or Publish to npm

docs/components/demo/account.tsx

@@ -25,8 +25,6 @@ function AccountInner() {
           2,
         )}
       </pre>
-
-      <i className="text-xs mt-2">* Wallet connection required</i>
     </div>
   );
 }

docs/components/demo/add-chain.tsx

@@ -1,8 +1,4 @@
-import {
-  type UseAddChainArgs,
-  useAccount,
-  useAddChain,
-} from "@starknet-react/core";
+import { type UseAddChainArgs, useAddChain } from "@starknet-react/core";
 import stringify from "safe-stable-stringify";
 import { shortString } from "starknet";
 import { DemoContainer } from "../starknet";
@@ -17,7 +13,6 @@ export function AddChain() {
 }
 
 function AddChainInner() {
-  const { address } = useAccount();
   const chainData: UseAddChainArgs = {
     id: "ZORG",
     chain_id: shortString.encodeShortString("ZORG"),
@@ -58,8 +53,6 @@ function AddChainInner() {
 
       <Button onClick={() => addChain()}>Add Chain</Button>
       <Button onClick={() => addChain(chainData)}>Add Chain (override)</Button>
-
-      <i className="text-xs mt-2">* Wallet connection required</i>
     </div>
   );
 }

docs/components/demo/declare-contract.tsx

@@ -41,8 +41,6 @@ function DeclareContractInner() {
       <Button className="button" onClick={() => declare()}>
         Declare
       </Button>
-
-      <i className="text-xs mt-2">* Wallet connection required</i>
     </div>
   );
 }

docs/components/demo/estimate-fees.tsx

@@ -6,12 +6,11 @@ import {
   useNetwork,
 } from "@starknet-react/core";
 import stringify from "safe-stable-stringify";
-import {} from "starknet";
 import { DemoContainer } from "../starknet";
 
 export function EstimateFees() {
   return (
-    <DemoContainer hasWallet>
+    <DemoContainer>
       <EstimateFeesInner />
     </DemoContainer>
   );
@@ -49,13 +48,12 @@ function EstimateFeesInner() {
             suggestedMaxFee: `${formatAmount(
               data?.suggestedMaxFee,
               chain.nativeCurrency.decimals,
-            )} ETH`,
+            )} ${chain.nativeCurrency.symbol}`,
           },
           null,
           2,
         )}
       </pre>
-      <i className="text-xs mt-2">* Wallet connection required</i>
     </div>
   );
 }

docs/components/demo/index.ts

@@ -1,5 +1,5 @@
 import { AddChain } from "./add-chain";
-import { ConnectWallet } from "./connect-wallet";
+import { WalletPermission } from "./wallet-permission";
 import { DeclareContract } from "./declare-contract";
 import { EstimateFees } from "./estimate-fees";
 import { NonceForAddress } from "./nonce-for-address";
@@ -15,7 +15,7 @@ import { Account } from "./account";
 
 export default {
   Account,
-  ConnectWallet,
+  WalletPermission,
   ReadContract,
   SendTransaction,
   EstimateFees,

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

@@ -36,8 +36,6 @@ function NonceForAddressInner() {
           2,
         )}
       </pre>
-
-      <i className="text-xs mt-2">* Wallet connection required</i>
     </div>
   );
 }

docs/components/demo/send-transaction.tsx

@@ -48,8 +48,6 @@ function SendTransactionInner() {
         )}
       </pre>
       <Button onClick={() => send()}>Send Transaction</Button>
-
-      <i className="text-xs mt-2">* Wallet connection required</i>
     </div>
   );
 }

docs/components/demo/sign-typed-data.tsx

@@ -45,8 +45,6 @@ function SignTypedDataInner() {
       </pre>
 
       <Button onClick={() => signTypedData()}>Sign</Button>
-
-      <i className="text-xs mt-2">* Wallet connection required</i>
     </div>
   );
 }

docs/components/demo/stark-address.tsx

@@ -48,7 +48,6 @@ function StarkAddressInner() {
           )}
         </pre>
       </div>
-      <i className="text-xs mt-2">* Wallet connection required</i>
     </div>
   );
 }

docs/components/demo/stark-name.tsx

@@ -49,7 +49,6 @@ function StarkNameInner() {
           )}
         </pre>
       </div>
-      <i className="text-xs mt-2">* Wallet connection required</i>
     </div>
   );
 }

docs/components/demo/stark-profile.tsx

@@ -49,7 +49,6 @@ function StarkProfileInner() {
           )}
         </pre>
       </div>
-      <i className="text-xs mt-2">* Wallet connection required</i>
     </div>
   );
 }

docs/components/demo/switch-chain.tsx

@@ -59,8 +59,6 @@ function SwitchChainInner() {
       >
         Switch to Sepolia (Override)
       </Button>
-
-      <i className="text-xs mt-2">* Wallet connection required</i>
     </div>
   );
 }

docs/components/demo/connect-wallet.tsx → docs/components/demo/wallet-permission.tsx

@@ -3,7 +3,7 @@ import stringify from "safe-stable-stringify";
 import { DemoContainer } from "../starknet";
 import { Button } from "../ui/button";
 
-export function ConnectWallet() {
+export function WalletPermission() {
   return (
     <DemoContainer hasWallet>
       <WalletRequest />

docs/components/starknet/index.tsx

@@ -13,6 +13,9 @@ export function DemoContainer({
       <div className="flex flex-col px-4 border border-primary rounded-xl">
         {hasWallet ? <WalletBar /> : null}
         <div className="py-4">{children}</div>
+        {hasWallet ? (
+          <i className="text-xs my-2">* Wallet connection required</i>
+        ) : null}
       </div>
     </StarknetProvider>
   );

docs/pages/demo/index.mdx

@@ -1,16 +1,39 @@
 # Demos
 
-- [Account](/demo/account)
-- [Add Chain](/demo/add-chain)
-- [Connect wallet](/demo/connect-wallet)
-- [Declare Contract (TODO)](/demo/declare-contract)
-- [Esimate Fees](/demo/estimate-fees)
-- [Nonce for Address](/demo/nonce-for-address)
-- [Read contract](/demo/read-contract)
-- [Send transaction](/demo/send-transaction)
-- [Sign Typed Data](/demo/sign-typed-data)
-- [Stark Address](/demo/stark-address)
-- [Stark Name](/demo/stark-name)
-- [Stark Profile](/demo/stark-profile)
-- [StarknetKit Integration](/demo/starknetkit)
-- [Switch Chain](/demo/switch-chain)
+This section contains a list of demos showing how to use Starknet React.
+
+You can find the source code for these demos [on GitHub](https://github.com/apibara/starknet-react/tree/main/docs/components/demo).
+
+## Common Hooks
+
+**[Account](/demo/account)**: Shows how to access the current account and its address.
+
+**[Estimate Fees](/demo/estimate-fees)**: Shows how to estimate fees for smart contract calls.
+
+**[Nonce for Address](/demo/nonce-for-address)**: Shows how to get the nonce for an address.
+
+**[Read contract](/demo/read-contract)**: Shows how to use the `useReadContract` type-safe API to query a Starknet contract.
+
+**[Send transaction](/demo/send-transaction)**: Shows how to use the `useContract` and `useSendTransaction` hooks to send transactions to the network.
+
+**[Sign Typed Data](/demo/sign-typed-data)**: Shows how to request users to sign a piece of data.
+
+## New APIs
+
+**[Request wallet permissions](/demo/wallet-permission)**: Shows how to request wallet permissions.
+
+**[Add Chain](/demo/add-chain)**: Shows how to add a new chain to the wallet.
+
+**[Switch Chain](/demo/switch-chain)**: Shows how to switch between chains.
+
+## Starknet ID
+
+**[Stark Address](/demo/stark-address)**: Shows how to get the address associated to a Starknet ID.
+
+**[Stark Name](/demo/stark-name)**: Shows how to get the Starknet ID associated to an address.
+
+**[Stark Profile](/demo/stark-profile)**: Shows how to get the Starknet ID profile associated to an address.
+
+## Integrations
+
+**[StarknetKit Integration](/demo/starknetkit)**: Shows how to integrate Starknet React with StarknetKit.

docs/pages/demo/wallet-permission.mdx

@@ -0,0 +1,5 @@
+import Demo from "../../components/demo";
+
+# Wallet Permission
+
+<Demo.WalletPermission />

docs/pages/docs/explorers.mdx

@@ -0,0 +1,54 @@
+# Explorers
+
+The `StarknetConfig` provider accepts an optional `explorer` property to
+configure the block explorer used by the `useExplorer` hook.
+
+Starknet React ships with the following block explorers (in alphabetical order):
+
+ - Starkscan
+ - Viewblock
+ - Voyager
+
+## The `Explorer` interface
+
+The `Explorer` interface is used to generate links to the block explorer.
+It provides the following properties and methods.
+
+ - `name: string`: human-friendly explorer name.
+ - `block({ hash?: string, number?: number }): string`: link to the specified
+   block, either by hash or number.
+ - `transaction(hash: string): string`: link to the specified transaction.
+ - `contract(address: string): string`: link to the specified contract.
+ - `class(hash: string): string`: link to the specified class.
+
+## Explorer factory
+
+`StarknetConfig` expects an __explorer factory__, that is a function with the
+following signature:
+
+```ts
+
+type ExplorerFactory<T extends Explorer = Explorer> = (
+  chain: Chain,
+) => T | null;
+```
+
+Starknet React ships with the following explorer factories:
+
+ - `starkscan`
+ - `viewblock`
+ - `voyager`
+
+## `useExplorer` hook
+
+You can get an instance of the current explorer already initialized for the current chain
+using the `useExplorer` hook.
+
+```tsx twoslash
+import { useExplorer } from "@starknet-react/core";
+
+const explorer = useExplorer();
+
+const name = explorer.name
+const link = explorer.block({ number: 123 })
+```

docs/pages/docs/getting-started.mdx

@@ -1,28 +1,38 @@
 import { Callout } from 'vocs/components'
 
+
 # Getting Started
 
+## Overview
+
 <Callout type="warning">
 Starknet React V3 is currently in preview. If you experience any issue, feel
 free to open an issue on GitHub.
 </Callout>
 
+Starknet React is a collection of React hooks for Starknet. It combines the following packages:
+
+- [Tankstack Query](https://tanstack.com/query/latest) for data fetching.
+- [Starknet.js](https://www.starknetjs.com/) for interacting with Starknet.
+- [abi-wan-kanabi](https://github.com/keep-starknet-strange/abi-wan-kanabi) for type-safe contract calls.
+
+
 ## Setup
 
 ::::steps
 
 ### Installation
 
-Start by installing the preview version of Starknet React (tagged `@next`).
+Start by installing Starknet React.
 
 :::code-group
 
 ```bash [npm]
-npm add @starknet-react/chains@next @starknet-react/core@next
+npm add @starknet-react/chains @starknet-react/core
 ```
 
 ```bash [pnpm]
-pnpm add @starknet-react/chains@next @starknet-react/core@next
+pnpm add @starknet-react/chains @starknet-react/core
 ```
 
 :::

docs/pages/docs/hooks/use-call.mdx

@@ -2,7 +2,9 @@
 
 Perform a read-only contract call.
 
-This hook expects the arguments to be "compiled" call data, use [`useReadContract`](/docs/hooks/use-read-contract) if you'd like abi encoding and decoding to be automatically handled.
+This hook expects the arguments to be "compiled" call data, use
+[`useReadContract`](/docs/hooks/use-read-contract) if you'd like abi encoding
+and decoding to be automatically handled.
 
 ## Usage
 

docs/pages/docs/hooks/use-contract-factory.mdx

@@ -4,7 +4,7 @@ Hook to create a `ContractFactory`
 
 ## Usage
 
-```ts twoslash
+```tsx
 import { useContractFactory } from "@starknet-react/core";
 
 const { contractFactory } = useContractFactory({

docs/pages/docs/hooks/use-contract.mdx

@@ -1,6 +1,9 @@
 # useContract
 
-Get a contract.
+Get a typed contract.
+
+This hook is equivalent to creating a new `Contract` instance with the
+current provider and then calling `typedv2` with the provided ABI.
 
 ## Usage
 

docs/pages/docs/hooks/use-declare-contract.mdx

@@ -4,7 +4,7 @@ Hook to declare a new class in the current network.
 
 ## Usage
 
-```ts twoslash
+```tsx
 import { useDeclareContract } from "@starknet-react/core";
 
 const { addChain, error } = useDeclareContract({