Update demo to sepolia (#425)

- Update sign message demo to work on sepolia - Fix formatting - Update template to not use goerli
apibara · Apr 4, 2024 · 22b6323 · 22b6323
2 parents d67d604 + 076bf45
commit 22b6323
Show file tree

Hide file tree

Showing 15 changed files with 68 additions and 63 deletions.
diff --git a/.changeset/lovely-flies-shake.md b/.changeset/lovely-flies-shake.md
@@ -0,0 +1,5 @@
+---
+"create-starknet": patch
+---
+
+Update template to not use goerli
diff --git a/packages/core/src/connectors/injected.ts b/packages/core/src/connectors/injected.ts
@@ -110,12 +110,9 @@ export class InjectedConnector extends Connector {
       throw new UserRejectedRequestError();
     }
 
-    this._wallet.on(
-      "accountsChanged",
-      async (accounts: string[] | string) => {
-        await this.onAccountsChanged(accounts);
-      },
-    );
+    this._wallet.on("accountsChanged", async (accounts: string[] | string) => {
+      await this.onAccountsChanged(accounts);
+    });
 
     this._wallet.on("networkChanged", (network?: string) => {
       this.onNetworkChanged(network);

diff --git a/packages/core/src/hooks/useBalance.ts b/packages/core/src/hooks/useBalance.ts
@@ -226,7 +226,6 @@ const balanceABIFragment = [
   },
 ];
 
-
 /*
 MIT License
 
@@ -262,18 +261,19 @@ https://github.com/wevm/viem/blob/main/src/utils/unit/formatUnits.ts
  * // '420'
  */
 function formatUnits(value: bigint, decimals: number) {
-  let display = value.toString()
+  let display = value.toString();
 
-  const negative = display.startsWith('-')
-  if (negative) display = display.slice(1)
+  const negative = display.startsWith("-");
+  if (negative) display = display.slice(1);
 
-  display = display.padStart(decimals, '0')
+  display = display.padStart(decimals, "0");
 
   let [integer, fraction] = [
     display.slice(0, display.length - decimals),
     display.slice(display.length - decimals),
-  ]
-  fraction = fraction.replace(/(0+)$/, '')
-  return `${negative ? '-' : ''}${integer || '0'}${fraction ? `.${fraction}` : ''
-    }`
-}
+  ];
+  fraction = fraction.replace(/(0+)$/, "");
+  return `${negative ? "-" : ""}${integer || "0"}${
+    fraction ? `.${fraction}` : ""
+  }`;
+}
diff --git a/packages/core/src/hooks/useEstimateFees.ts b/packages/core/src/hooks/useEstimateFees.ts
@@ -20,7 +20,12 @@ type EstimateFeesArgs = {
 
 /** Options for `useEstimateFees`. */
 export type UseEstimateFeesProps = EstimateFeesArgs &
-  UseQueryProps<EstimateFeeResponse, Error, EstimateFeeResponse, ReturnType<typeof queryKey>> & {
+  UseQueryProps<
+    EstimateFeeResponse,
+    Error,
+    EstimateFeeResponse,
+    ReturnType<typeof queryKey>
+  > & {
     /** Refresh data at every block. */
     watch?: boolean;
   };
@@ -46,14 +51,11 @@ export function useEstimateFees({
 
   const queryKey_ = useMemo(
     () => queryKey({ calls, options }),
-    [calls, options]
+    [calls, options],
   );
 
-  const enabled = useMemo(
-    () => Boolean(enabled_ && calls),
-    [enabled_, calls],
-  );
-
+  const enabled = useMemo(() => Boolean(enabled_ && calls), [enabled_, calls]);
+
   useInvalidateOnBlock({
     enabled: Boolean(enabled && watch),
     queryKey: queryKey_,
@@ -70,10 +72,7 @@ export function useEstimateFees({
   });
 }
 
-function queryKey({
-  calls,
-  options,
-}: EstimateFeesArgs) {
+function queryKey({ calls, options }: EstimateFeesArgs) {
   return [
     {
       entity: "estimateInvokeFee",
@@ -83,7 +82,11 @@ function queryKey({
   ] as const;
 }
 
-function queryFn({ account, calls, options }: { account?: AccountInterface } & EstimateFeesArgs) {
+function queryFn({
+  account,
+  calls,
+  options,
+}: { account?: AccountInterface } & EstimateFeesArgs) {
   return async function () {
     if (!account) throw new Error("account is required");
     if (!calls || calls.length === 0) throw new Error("calls are required");

diff --git a/packages/core/src/hooks/useStarkName.ts b/packages/core/src/hooks/useStarkName.ts
@@ -74,7 +74,7 @@ export function useStarkName({
 
   const enabled = useMemo(
     () => Boolean(enabled_ && address),
-    [enabled_, address]
+    [enabled_, address],
   );
 
   return useQuery({

diff --git a/packages/core/src/hooks/useStarkProfile.ts b/packages/core/src/hooks/useStarkProfile.ts
@@ -120,7 +120,7 @@ export function useStarkProfile({
 
   const enabled = useMemo(
     () => Boolean(enabled_ && address),
-    [enabled_, address]
+    [enabled_, address],
   );
 
   return useQuery({
@@ -251,7 +251,7 @@ function queryFn({
           execution: staticExecution(),
           to: hardcoded(identity),
           selector: hardcoded(
-            hash.getSelectorFromName("get_extended_verifier_data")
+            hash.getSelectorFromName("get_extended_verifier_data"),
           ),
           calldata: [
             reference(1, 0),
@@ -284,7 +284,7 @@ function queryFn({
           ? data[8]
               .slice(1)
               .map((val: BigInt) =>
-                shortString.decodeShortString(val.toString())
+                shortString.decodeShortString(val.toString()),
               )
               .join("")
           : undefined;

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -4,4 +4,3 @@ export * from "./errors";
 export * from "./explorers";
 export * from "./hooks";
 export * from "./providers";
-
diff --git a/packages/create-starknet/public/templates/next/src/components/starknet-provider.tsx b/packages/create-starknet/public/templates/next/src/components/starknet-provider.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { ReactNode } from "react";
 
-import { devnet, goerli, mainnet } from "@starknet-react/chains";
+import { mainnet } from "@starknet-react/chains";
 import {
   StarknetConfig,
   argent,

diff --git a/packages/create-starknet/public/templates/vite/src/main.tsx b/packages/create-starknet/public/templates/vite/src/main.tsx
@@ -1,4 +1,4 @@
-import { devnet, goerli, mainnet } from "@starknet-react/chains";
+import { mainnet } from "@starknet-react/chains";
 import {
   StarknetConfig,
   argent,
@@ -12,7 +12,7 @@ import App from "./App";
 import "./globals.css";
 
 function Root({ children }: { children: React.ReactNode }) {
-  const chains = [goerli, mainnet, devnet];
+  const chains = [mainnet];
   const provider = publicProvider();
   const { connectors } = useInjectedConnectors({
     // Show these connectors if the user has no connector installed.

diff --git a/website/components/demos/contract-read.tsx b/website/components/demos/contract-read.tsx
@@ -47,9 +47,7 @@ function ContractRead() {
   // Cast bigint into string to avoid "TypeError: Do not know how to serialize a BigInt"
   // See https://github.com/GoogleChromeLabs/jsbi/issues/30#issuecomment-521460510
   const callResult = JSON.stringify(data, (_key, value) =>
-    typeof value === 'bigint'
-        ? value.toString()
-        : value
+    typeof value === "bigint" ? value.toString() : value,
   );
 
   return (

diff --git a/website/components/demos/sign-message.tsx b/website/components/demos/sign-message.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { useAccount, useSignTypedData } from "@starknet-react/core";
+import { useAccount, useNetwork, useSignTypedData } from "@starknet-react/core";
 import { Loader2, PenLine } from "lucide-react";
 
 import { StarknetProvider } from "@/components/starknet/provider";
@@ -20,7 +20,9 @@ export function SignMessageDemo() {
 
 function Inner() {
   const { account } = useAccount();
-  const { data, isPending, signTypedData } = useSignTypedData(exampleData);
+  const { chain } = useNetwork();
+  const payload = exampleData(`0x${chain.id.toString(16)}`);
+  const { data, isPending, signTypedData } = useSignTypedData(payload);
 
   return (
     <Card className="max-w-[400px] mx-auto">
@@ -54,7 +56,7 @@ function Inner() {
   );
 }
 
-const exampleData = {
+const exampleData = (chainId: string) => ({
   types: {
     StarkNetDomain: [
       { name: "name", type: "felt" },
@@ -75,7 +77,7 @@ const exampleData = {
   domain: {
     name: "Starknet Mail",
     version: "1",
-    chainId: 1,
+    chainId,
   },
   message: {
     from: {
@@ -88,4 +90,4 @@ const exampleData = {
     },
     contents: "Hello, Bob!",
   },
-};
+});
diff --git a/website/components/demos/starknetid.tsx b/website/components/demos/starknetid.tsx
@@ -161,7 +161,7 @@ function LookupName() {
 
 function LookupProfile() {
   const [address, setAddress] = useState<string>(
-    "0x01FE253BFf450209C148A4b381416837e33e244463553916B982101909111103"
+    "0x01FE253BFf450209C148A4b381416837e33e244463553916B982101909111103",
   );
 
   const debounceAddress = useDebounce(address, 500);

diff --git a/website/components/demos/transaction-manager.tsx b/website/components/demos/transaction-manager.tsx
@@ -112,10 +112,10 @@ function TransactionStatus({ hash }: { hash: string }) {
           {isPending
             ? "Loading..."
             : isError
-              ? error?.message
-              : data?.status === "REJECTED"
-                ? `${data?.status}`
-                : `${data?.execution_status} - ${data?.finality_status}`}
+            ? error?.message
+            : data?.status === "REJECTED"
+            ? `${data?.status}`
+            : `${data?.execution_status} - ${data?.finality_status}`}
         </p>
       </div>
     </div>

diff --git a/website/components/starknet/provider.tsx b/website/components/starknet/provider.tsx
@@ -1,7 +1,7 @@
 "use client";
 import React from "react";
 
-import { goerli, mainnet, sepolia } from "@starknet-react/chains";
+import { mainnet, sepolia } from "@starknet-react/chains";
 import {
   StarknetConfig,
   publicProvider,
@@ -18,7 +18,7 @@ export function StarknetProvider({
   children: React.ReactNode;
   explorer?: ExplorerFactory;
 }) {
-  const chains = [sepolia, goerli, mainnet];
+  const chains = [sepolia, mainnet];
   const provider = publicProvider();
   const { connectors } = useInjectedConnectors({
     // Show these connectors if the user has no connector installed.

diff --git a/website/content/hooks/mutation/useSignTypedData.mdx b/website/content/hooks/mutation/useSignTypedData.mdx
@@ -2,15 +2,15 @@
 title: useSignTypedData
 priority: 36
 hookType: mutation
-
 ---
 
 Request user to sign a piece of data.
 
 You can read more about Starknet signatures and the meaning of the arguments [on the Starknet.js documentation](https://www.starknetjs.com/docs/guides/signature/).
 
-## Usage
+Notice that the `domain.chainId` value must match the currently selected chain or some wallets will refuse to sign data.
 
+## Usage
 
 ```ts
 import { useSignTypedData, useAccount } from "@starknet-react/core";
@@ -20,19 +20,20 @@ export function App() {
   const { account } = useAccount();
   const { data, isPending, signTypedData } = useSignTypedData(exampleData);
 
-	return (
-		<button
-			className="w-full"
-			onClick={() => signTypedData(exampleData)}
-			disabled={!account}
-		>
-			{isPending ? <p>Waiting for wallet...</p> : <p>Sign Message</p>}
-		</button>
-	);
+  return (
+    <button
+      className="w-full"
+      onClick={() => signTypedData(exampleData)}
+      disabled={!account}
+    >
+      {isPending ? <p>Waiting for wallet...</p> : <p>Sign Message</p>}
+    </button>
+  );
 }
 ```
 
 ## Options
+
     * __domain?__`: StarknetDomain`
         - From starknet.js
     * __types?__`: Record<string, StarkNetType[]>`
@@ -43,8 +44,8 @@ export function App() {
         - From starknet.js
 
 ## Returns
+
     * __signTypedData?__`: (args?: Partial<TypedData>) => void`
         - Request user to sign data.
     * __signTypedDataAsync__`: (args?: Partial<TypedData>) => Promise<Signature>`
         - Request user to sign data.
-