Add prettier to example

cartridge-gg · Jun 15, 2024 · 9829bcf · 9829bcf
1 parent 3490bbd
commit 9829bcf
Show file tree

Hide file tree

Showing 9 changed files with 12,087 additions and 15,495 deletions.
diff --git a/examples/starknet-react-next/CHANGELOG.md b/examples/starknet-react-next/CHANGELOG.md
@@ -4,12 +4,14 @@
 
 ### Patch Changes
 
-- Updated dependencies [[`8171dae`](https://github.com/auclantis/starknet-react/commit/8171daecb58fc642627b96772a5c99e6b240d067)]:
+- Updated dependencies
+  [[`8171dae`](https://github.com/auclantis/starknet-react/commit/8171daecb58fc642627b96772a5c99e6b240d067)]:
   - @starknet-react/core@0.6.0
 
 ## 0.0.1
 
 ### Patch Changes
 
-- Updated dependencies [[`a09a87b`](https://github.com/auclantis/starknet-react/commit/a09a87b87e1afddb23a766a5990903c599b5e603)]:
+- Updated dependencies
+  [[`a09a87b`](https://github.com/auclantis/starknet-react/commit/a09a87b87e1afddb23a766a5990903c599b5e603)]:
   - @starknet-react/core@0.5.0
diff --git a/examples/starknet-react-next/README.md b/examples/starknet-react-next/README.md
@@ -8,25 +8,38 @@ First, run the development server:
 pnpm example:next dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the
+result.
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `pages/index.tsx`. The page
+auto-updates as you edit the file.
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on
+[http://localhost:3000/api/hello](http://localhost:3000/api/hello). This
+endpoint can be edited in `pages/api/hello.ts`.
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are
+treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead
+of React pages.
 
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
+  features and API.
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+You can check out
+[the Next.js GitHub repository](https://github.com/vercel/next.js/) - your
+feedback and contributions are welcome!
 
 ## Deploy on Vercel
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+The easiest way to deploy your Next.js app is to use the
+[Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme)
+from the creators of Next.js.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Check out our
+[Next.js deployment documentation](https://nextjs.org/docs/deployment) for more
+details.
diff --git a/examples/starknet-react-next/next.config.js b/examples/starknet-react-next/next.config.js
@@ -7,8 +7,8 @@ const nextConfig = {
     externalDir: true,
   },
   env: {
-    XFRAME_URL: process.env.XFRAME_URL
-  }
-}
+    XFRAME_URL: process.env.XFRAME_URL,
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/examples/starknet-react-next/package.json b/examples/starknet-react-next/package.json
@@ -6,13 +6,15 @@
     "dev": "next dev -p 3002",
     "build": "next build",
     "start": "next start -p 3002",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format": "prettier --write ."
   },
   "dependencies": {
     "@cartridge/connector": "workspace:^",
     "@starknet-react/chains": "^0.1.3",
     "@starknet-react/core": "^2.1.5",
     "next": "^13.4.19",
+    "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "starknet": "^6.6.0"

diff --git a/examples/starknet-react-next/src/components/ConnectWallet.tsx b/examples/starknet-react-next/src/components/ConnectWallet.tsx
@@ -1,5 +1,5 @@
 import { useAccount, useConnect, useDisconnect } from "@starknet-react/core";
-import CartridgeConnector from "@cartridge/connector"
+import CartridgeConnector from "@cartridge/connector";
 import { useEffect, useState } from "react";
 
 export function ConnectWallet() {
@@ -11,9 +11,9 @@ export function ConnectWallet() {
 
   const [username, setUsername] = useState<string>();
   useEffect(() => {
-    if (!address) return
-    connector.username()?.then(n => setUsername(n))
-  }, [address, connector])
+    if (!address) return;
+    connector.username()?.then((n) => setUsername(n));
+  }, [address, connector]);
 
   return (
     <>
@@ -32,7 +32,6 @@ export function ConnectWallet() {
         >
           {address ? "Disconnect" : "Connect"}
         </button>
-
       </div>
     </>
   );

diff --git a/examples/starknet-react-next/src/components/SignMessage.tsx b/examples/starknet-react-next/src/components/SignMessage.tsx
@@ -1,10 +1,11 @@
-import {
-  useAccount,
-  // useContract,
-  useSignTypedData,
-} from "@starknet-react/core";
+import { useAccount, useSignTypedData } from "@starknet-react/core";
 import { useCallback, useState } from "react";
-import { ArraySignatureType, TypedData, shortString, typedData } from "starknet";
+import {
+  ArraySignatureType,
+  TypedData,
+  shortString,
+  typedData,
+} from "starknet";
 
 const MESSAGE: TypedData = {
   types: {
@@ -45,15 +46,12 @@ const MESSAGE: TypedData = {
 };
 
 export function SignMessage() {
-  const {
-    address,
-    account,
-  } = useAccount();
+  const { address, account } = useAccount();
   const [message, setMessage] = useState(MESSAGE);
   const [isValid, setIsValid] = useState<boolean | null>(null);
   const { signTypedData, data: signature } = useSignTypedData(message);
 
-  const validateSig = useCallback(async ()=>{
+  const onValidateSig = useCallback(async () => {
     if (!account || !address) {
       return;
     }
@@ -64,9 +62,9 @@ export function SignMessage() {
         contractAddress: address,
         entrypoint: "is_valid_signature",
         calldata: [
-          typedData.getMessageHash(message, address), 
-          (signature as ArraySignatureType).length, 
-          ...(signature as ArraySignatureType)
+          typedData.getMessageHash(message, address),
+          (signature as ArraySignatureType).length,
+          ...(signature as ArraySignatureType),
         ],
       },
       "pending",
@@ -75,8 +73,7 @@ export function SignMessage() {
     setIsValid(res[0] === shortString.encodeShortString("VALID"));
   }, [address, message, signature, account]);
 
-  if (!account || !address) 
-    return <></>;
+  if (!account || !address) return <></>;
 
   return (
     <div style={{ marginTop: "10px" }}>
@@ -87,25 +84,32 @@ export function SignMessage() {
         onChange={(e) => setMessage(JSON.parse(e.target.value))}
       />
       <div style={{ display: "flex", flexDirection: "row", gap: "10px" }}>
-        <button onClick={() => {
-          setIsValid(null);
-          signTypedData(message);
-        }}>Sign Message</button>
-
+        <button
+          onClick={() => {
+            setIsValid(null);
+            signTypedData(message);
+          }}
+        >
+          Sign Message
+        </button>
+
         {signature && (
-          <button
-            style={{ paddingLeft: "8px" }}
-            onClick={validateSig}
-          >
+          <button style={{ paddingLeft: "8px" }} onClick={onValidateSig}>
             Validate Signature
           </button>
         )}
       </div>
-
 
       {signature && (
         <div>
-          <p>Signature {isValid === null ? "not validated" : isValid ? "is valid" : "is invalid"}</p>
+          <p>
+            Signature{" "}
+            {isValid === null
+              ? "not validated"
+              : isValid
+              ? "is valid"
+              : "is invalid"}
+          </p>
           <pre>
             <code>{JSON.stringify(signature, null, 2)}</code>
           </pre>

diff --git a/examples/starknet-react-next/src/components/StarknetProvider.tsx b/examples/starknet-react-next/src/components/StarknetProvider.tsx
@@ -27,14 +27,14 @@ export function StarknetProvider({ children }: PropsWithChildren) {
 
 const url =
   !process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL ||
-    process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL.split(".")[0] ===
+  process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL.split(".")[0] ===
     "cartridge-starknet-react-next"
     ? process.env.XFRAME_URL
     : "https://" +
-    (process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL ?? "").replace(
-      "cartridge-starknet-react-next",
-      "keychain",
-    );
+      (process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL ?? "").replace(
+        "cartridge-starknet-react-next",
+        "keychain",
+      );
 
 const connectors = [
   new CartridgeConnector(

diff --git a/examples/starknet-react-next/tsconfig.json b/examples/starknet-react-next/tsconfig.json
@@ -5,12 +5,6 @@
     "baseUrl": "./src",
     "noEmit": true
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }