docs: improve demos with shadcn ui (#493)

- add `shadcn/ui`
- improve demos
- remove `docs` from biome config ignore
- replace `starknet@next` with `starknet@latest`
- fix test for `useAccount` and `useContract`

biome.json

@@ -43,7 +43,6 @@
       ".contentlayer",
       ".next",
       "out",
-      "docs",
       "generated"
     ]
   }

docs/components/demo/account.tsx

@@ -1,4 +1,5 @@
 import { useAccount } from "@starknet-react/core";
+import stringify from "safe-stable-stringify";
 import { DemoContainer } from "../starknet";
 
 export function Account() {
@@ -13,20 +14,19 @@ 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 className="flex flex-col gap-4">
+      <pre>
+        {stringify(
+          {
+            address: address ?? "Connect wallet first",
+            connector: connector?.id ?? "Connect wallet first",
+          },
+          null,
+          2,
+        )}
+      </pre>
+
+      <i className="text-xs mt-2">* Wallet connection required</i>
     </div>
   );
 }

docs/components/demo/add-chain.tsx

@@ -3,8 +3,10 @@ import {
   useAccount,
   useAddChain,
 } from "@starknet-react/core";
+import stringify from "safe-stable-stringify";
 import { shortString } from "starknet";
 import { DemoContainer } from "../starknet";
+import { Button } from "../ui/button";
 
 export function AddChain() {
   return (
@@ -36,28 +38,28 @@ function AddChainInner() {
     params: chainData,
   });
   return (
-    <div className="flex flex-col">
-      {address ? (
-        <div className="flex flex-col gap-4">
-          <p className="font-bold">Chain to Add:</p>
-          <pre className="font-bold break-words whitespace-break-spaces">
-            {JSON.stringify(chainData)}
-          </pre>
-          <button className="button" onClick={() => addChain()}>
-            Add Chain
-          </button>
-          <button className="button" onClick={() => addChain(chainData)}>
-            Add Chain (override)
-          </button>
-        </div>
-      ) : (
-        <p className="font-bold mb-4">Connect wallet first</p>
-      )}
+    <div className="flex flex-col gap-4">
+      <p>Chain to Add</p>
+      <pre>{stringify(chainData, null, 2)}</pre>
 
-      <div>isPending: {isPending ? "true" : "false"} </div>
-      <div>isError: {isError ? "true" : "false"} </div>
-      <div>error: {error ? error.message : "null"} </div>
-      <div>data: {data ? JSON.stringify(data) : "null"} </div>
+      <p>Response</p>
+      <pre>
+        {stringify(
+          {
+            data,
+            isPending,
+            isError,
+            error: error?.message,
+          },
+          null,
+          2,
+        )}
+      </pre>
+
+      <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/connect-wallet.tsx

@@ -1,5 +1,7 @@
 import { useWalletRequest } from "@starknet-react/core";
+import stringify from "safe-stable-stringify";
 import { DemoContainer } from "../starknet";
+import { Button } from "../ui/button";
 
 export function ConnectWallet() {
   return (
@@ -15,16 +17,23 @@ function WalletRequest() {
   });
 
   return (
-    <>
-      <div>Permissions: {isPending ? "Wait..." : JSON.stringify(data)}</div>
-      <div>isError: {isError ? "True" : "False"}</div>
-      <div>Error: {isError ? error?.message : "Null"}</div>
-      <button
-        onClick={() => request()}
-        className="bg-red-500 rounded px-2 py-1 text-white"
-      >
-        Get Wallet Permissions
-      </button>
-    </>
+    <div className="flex flex-col gap-4">
+      <p>Response</p>
+      <pre>
+        {stringify(
+          {
+            data,
+            isPending,
+            isError,
+            error: error?.message,
+          },
+          null,
+          2,
+        )}
+      </pre>
+
+      <Button onClick={() => request()}>Request Wallet Permissions</Button>
+      <i className="text-xs mt-2">* Wallet connection required</i>
+    </div>
   );
 }

docs/components/demo/declare-contract.tsx

@@ -3,7 +3,9 @@ import {
   useAccount,
   useDeclareContract,
 } from "@starknet-react/core";
+import stringify from "safe-stable-stringify";
 import { DemoContainer } from "../starknet";
+import { Button } from "../ui/button";
 
 export function DeclareContract() {
   return (
@@ -14,29 +16,33 @@ export function DeclareContract() {
 }
 
 function DeclareContractInner() {
-  const { address } = useAccount();
   const { isError, isPending, data, error, declare } = useDeclareContract({
     params,
   });
   return (
-    <div className="flex flex-col">
-      {address ? (
-        <div className="flex flex-col gap-4">
-          <button className="button" onClick={() => declare()}>
-            Sign
-          </button>
-          <pre className="whitespace-pre-wrap break-words">
-            <code>{JSON.stringify(params)}</code>
-          </pre>
-        </div>
-      ) : (
-        <p className="font-bold mb-4">Connect wallet first</p>
-      )}
+    <div className="flex flex-col gap-4">
+      <p>Params</p>
+      <pre>{stringify(params, null, 2)}</pre>
 
-      <div>isPending: {isPending ? "true" : "false"} </div>
-      <div>isError: {isError ? "true" : "false"} </div>
-      <div>error: {error ? error.message : "null"} </div>
-      <div>data: {data ? JSON.stringify(data) : "null"} </div>
+      <p>Response</p>
+      <pre>
+        {stringify(
+          {
+            data,
+            isPending,
+            isError,
+            error: error?.message,
+          },
+          null,
+          2,
+        )}
+      </pre>
+
+      <Button className="button" onClick={() => declare()}>
+        Declare
+      </Button>
+
+      <i className="text-xs mt-2">* Wallet connection required</i>
     </div>
   );
 }

docs/components/demo/estimate-fees.tsx

@@ -5,6 +5,7 @@ import {
   useEstimateFees,
   useNetwork,
 } from "@starknet-react/core";
+import stringify from "safe-stable-stringify";
 import {} from "starknet";
 import { DemoContainer } from "../starknet";
 
@@ -24,23 +25,37 @@ function EstimateFeesInner() {
     address: chain.nativeCurrency.address,
   });
 
-  const { data, isError, isLoading, error } = useEstimateFees({
+  const { data, isError, isLoading, isPending, error } = useEstimateFees({
     calls:
       contract && address
         ? [contract.populate("transfer", [address, 1n])]
         : undefined,
   });
 
   return (
-    <div className="flex flex-col">
-      <h1 className="font-bold text-lg">Estimate Fees</h1>
-      <div>isLoading: {isLoading ? "true" : "false"} </div>
-      <div>isError: {isError ? "true" : "false"} </div>
-      <div>error: {error ? error.message : "null"} </div>
-      <div>
-        Suggested Max Fee:{" "}
-        {formatAmount(data?.suggestedMaxFee, chain.nativeCurrency.decimals)} ETH
-      </div>
+    <div className="flex flex-col gap-4">
+      <p>Calls</p>
+      <pre>[contract.populate("transfer", [address, 1n])]</pre>
+
+      <p>Response</p>
+      <pre>
+        {stringify(
+          {
+            data,
+            isLoading,
+            isPending,
+            isError,
+            error: error?.message,
+            suggestedMaxFee: `${formatAmount(
+              data?.suggestedMaxFee,
+              chain.nativeCurrency.decimals,
+            )} ETH`,
+          },
+          null,
+          2,
+        )}
+      </pre>
+      <i className="text-xs mt-2">* Wallet connection required</i>
     </div>
   );
 }

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

@@ -3,6 +3,7 @@ import {
   useAccount,
   useNonceForAddress,
 } from "@starknet-react/core";
+import stringify from "safe-stable-stringify";
 import { DemoContainer } from "../starknet";
 
 export function NonceForAddress() {
@@ -16,25 +17,27 @@ export function NonceForAddress() {
 function NonceForAddressInner() {
   const { account } = useAccount();
 
-  const { data, isLoading, isError, error } = useNonceForAddress({
+  const { data, isLoading, isError, error, isPending } = 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 className="flex flex-col gap-4">
+      <pre>
+        {stringify(
+          {
+            data,
+            isLoading,
+            isPending,
+            isError,
+            error: error?.message,
+          },
+          null,
+          2,
         )}
-      </div>
+      </pre>
+
+      <i className="text-xs mt-2">* Wallet connection required</i>
     </div>
   );
 }