Add use balance demo (#513)

.github/workflows/build.yml

@@ -22,12 +22,12 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
       - name: Set Node version
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
-          version: 9.7
+          version: 9.10.0
       - name: Install dependencies
         run: pnpm install --strict-peer-dependencies=false --no-frozen-lockfile
       - name: Run check format

.github/workflows/release-documentation.yml

@@ -16,12 +16,12 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
       - name: Set Node version
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
-          version: 9.7
+          version: 9.10.0
       - name: Install dependencies
         run: pnpm install --strict-peer-dependencies=false --no-frozen-lockfile
       - name: Build Project Artifacts

.github/workflows/release.yml

@@ -7,24 +7,27 @@ on:
 
 jobs:
   release:
+    environment: Release
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v2
       - name: Set Node version
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
-          version: 9.7
+          version: 9.10.0
+      - name: Run build
+        run: pnpm build
       - name: Setup git
         run: |
           git config --global user.name "github-actions[bot]"
           git config --global user.email "github-actions[bot]@users.noreply.github.com"
-          git remote set-url origin "https://${GITHUB_TOKEN}@github.com/apibara/starknet-react"
+          git remote set-url origin "https://${GIT_TOKEN}@github.com/apibara/starknet-react"
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GIT_TOKEN: ${{ secrets.GIT_TOKEN }}
       - name: Install dependencies
         run: pnpm install --strict-peer-dependencies=false --no-frozen-lockfile
       - name: Publish package

change/@starknet-react-chains-6d856b0e-b860-43eb-819a-d712fd4c3f3c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Update RPC urls to RPC 0.7",
+  "packageName": "@starknet-react/chains",
+  "email": "francesco@ceccon.me",
+  "dependentChangeType": "patch"
+}

docs/components/demo/balance.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useAccount, useBalance } from "@starknet-react/core";
+import { DemoContainer } from "../starknet";
+
+function AccountBalance({ account }: { account: `0x${string}` }) {
+  const { data, error } = useBalance({
+    address: account,
+  });
+
+  if (data) {
+    return (
+      <div className="flex flex-col space-y-2">
+        <p>
+          <span className="font-semibold">Address: </span>
+          {account.slice(0, 6)}...{account.slice(-4)}
+        </p>
+        <p>
+          <span className="font-semibold">Balance: </span>
+          {`${data.formatted} ${data.symbol}`}
+        </p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-col space-y-2">
+        <p>Error fetching balance</p>
+        <pre>{error.message}</pre>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <p>Loading balance...</p>
+    </div>
+  );
+}
+
+function BalanceInner() {
+  const { address } = useAccount();
+
+  return (
+    <div className="">
+      {address ? (
+        <AccountBalance account={address} />
+      ) : (
+        <p>Connect wallet to display its balance.</p>
+      )}
+    </div>
+  );
+}
+
+export function Balance() {
+  return (
+    <DemoContainer hasWallet>
+      <BalanceInner />
+    </DemoContainer>
+  );
+}

docs/components/demo/index.ts

@@ -1,5 +1,6 @@
+import { Account } from "./account";
 import { AddChain } from "./add-chain";
-import { WalletPermission } from "./wallet-permission";
+import { Balance } from "./balance";
 import { DeclareContract } from "./declare-contract";
 import { EstimateFees } from "./estimate-fees";
 import { NonceForAddress } from "./nonce-for-address";
@@ -11,11 +12,12 @@ import { StarkName } from "./stark-name";
 import { StarkProfile } from "./stark-profile";
 import { StarknetKit } from "./starknetkit";
 import { SwitchChain } from "./switch-chain";
-import { Account } from "./account";
+import { WalletPermission } from "./wallet-permission";
 
 export default {
   Account,
   WalletPermission,
+  Balance,
   ReadContract,
   SendTransaction,
   EstimateFees,

docs/components/starknet/bar.tsx

@@ -1,21 +1,21 @@
 import { useAccount, useConnect } from "@starknet-react/core";
-import type { AccountInterface } from "starknet";
 import { Button } from "../ui/button";
 
 export function WalletBar() {
-  const { account } = useAccount();
+  const { address } = useAccount();
+
   return (
     <div className="w-full py-2 h-24 border-b border-primary">
-      {account ? <ConnectedWallet account={account} /> : <ConnectWallet />}
+      {address ? <ConnectedWallet address={address} /> : <ConnectWallet />}
     </div>
   );
 }
 
-function ConnectedWallet({ account }: { account: AccountInterface }) {
+function ConnectedWallet({ address }: { address: `0x${string}` }) {
   return (
     <div className="h-full flex flex-col justify-center">
       <p className="font-medium">Connected Address: </p>
-      <pre>{account.address}</pre>
+      <pre>{address}</pre>
     </div>
   );
 }

docs/components/ui/button.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
 import { cn } from "../../lib/utils";
 
 const buttonVariants = cva(

docs/pages/demo/balance.mdx

@@ -0,0 +1,6 @@
+import Demo from "../../components/demo";
+
+# Token Balance
+
+<Demo.Balance />
+

docs/pages/demo/index.mdx

@@ -8,6 +8,8 @@ You can find the source code for these demos [on GitHub](https://github.com/apib
 
 **[Account](/demo/account)**: Shows how to access the current account and its address.
 
+**[Balance](/demo/balance)**: Shows how to fetch an ERC-20 token balance.
+
 **[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.

docs/sidebar.ts

@@ -24,12 +24,12 @@ export const sidebar = {
         {
           text: "Explorers",
           link: "/docs/explorers",
-        }
+        },
       ],
     },
     {
-      "text": "Smart Contracts",
-      "items": [
+      text: "Smart Contracts",
+      items: [
         {
           text: "useBalance",
           link: "/docs/hooks/use-balance",
@@ -50,11 +50,11 @@ export const sidebar = {
           text: "useContractFactory",
           link: "/docs/hooks/use-contract-factory",
         },
-      ]
+      ],
     },
     {
-      "text": "Wallet Actions",
-      "items": [
+      text: "Wallet Actions",
+      items: [
         {
           text: "useSendTransaction",
           link: "/docs/hooks/use-send-transaction",
@@ -83,12 +83,15 @@ export const sidebar = {
           text: "useDeployAccount",
           link: "/docs/hooks/use-deploy-account",
         },
-      ]
+      ],
     },
     {
-      "text": "Connectors",
-      "items": [
-        { text: "useInjectedConnectors", link: "/docs/hooks/use-injected-connectors" },
+      text: "Connectors",
+      items: [
+        {
+          text: "useInjectedConnectors",
+          link: "/docs/hooks/use-injected-connectors",
+        },
         { text: "useAccount", link: "/docs/hooks/use-account" },
         {
           text: "useConnect",
@@ -98,11 +101,11 @@ export const sidebar = {
           text: "useDisconnect",
           link: "/docs/hooks/use-disconnect",
         },
-      ]
+      ],
     },
     {
-      "text": "Helpers",
-      "items": [
+      text: "Helpers",
+      items: [
         {
           text: "useNetwork",
           link: "/docs/hooks/use-network",
@@ -119,11 +122,11 @@ export const sidebar = {
           text: "useInvalidateOnBlock",
           link: "/docs/hooks/use-invalidate-on-block",
         },
-      ]
+      ],
     },
     {
-      "text": "RPC Methods",
-      "items": [
+      text: "RPC Methods",
+      items: [
         {
           text: "useBlock",
           link: "/docs/hooks/use-block",
@@ -144,11 +147,11 @@ export const sidebar = {
           text: "useTransactionReceipt",
           link: "/docs/hooks/use-transaction-receipt",
         },
-      ]
+      ],
     },
     {
-      "text": "Starknet.ID",
-      "items": [
+      text: "Starknet.ID",
+      items: [
         {
           text: "useStarkAddress",
           link: "/docs/hooks/use-stark-address",
@@ -161,7 +164,7 @@ export const sidebar = {
           text: "useStarkProfile",
           link: "/docs/hooks/use-stark-profile",
         },
-      ]
-    }
+      ],
+    },
   ],
 } as const satisfies Sidebar;

docs/vercel.json

@@ -6,4 +6,4 @@
       "permanent": true
     }
   ]
-}
+}

package.json

@@ -29,5 +29,5 @@
     "node": ">=20",
     "pnpm": ">=9"
   },
-  "packageManager": "pnpm@9.7.0"
+  "packageManager": "pnpm@9.10.0"
 }

packages/chains/src/starknet.ts

@@ -44,9 +44,9 @@ export const mainnet = {
     },
     public: {
       http: [
-        "https://starknet-mainnet.public.blastapi.io/rpc/v0.5",
+        "https://starknet-mainnet.public.blastapi.io/rpc/v0_7",
         "https://rpc.starknet.lava.build",
-        "https://free-rpc.nethermind.io/mainnet-juno/v0_5",
+        "https://free-rpc.nethermind.io/mainnet-juno/v0_7",
       ],
     },
   },
@@ -71,18 +71,12 @@ export const sepolia = {
   },
   testnet: true,
   rpcUrls: {
-    // alchemy: {
-    //   http: [],
-    // },
     blast: {
       http: ["https://starknet-sepolia.blastapi.io"],
     },
     infura: {
       http: ["https://starknet-sepolia.infura.io/v3"],
     },
-    // lava: {
-    //   http: [],
-    // },
     nethermind: {
       http: ["https://rpc.nethermind.io/sepolia-juno"],
     },