Merge pull request #42 from Quantum3-Labs/40-code-formatter

Format code
Scaffold-Stark · Apr 13, 2024 · b8dc760 · b8dc760
2 parents 956ab1c + 8d164cc
commit b8dc760
Show file tree

Hide file tree

Showing 45 changed files with 341 additions and 276 deletions.
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -34,6 +34,9 @@ jobs:
         run: yarn install --immutable
         working-directory: ./packages/nextjs
 
+      - name: Check Code Format
+        run: npm run format:check
+
       - name: Run Next.js lint
         run: yarn next:lint --max-warnings=0
         working-directory: ./packages/nextjs

diff --git a/package.json b/package.json
@@ -17,11 +17,14 @@
     "next:lint": "yarn workspace @ss-2/nextjs lint",
     "next:check-types": "yarn workspace @ss-2/nextjs check-types",
     "vercel": "yarn workspace @ss-2/nextjs vercel",
-    "vercel:yolo": "yarn workspace @ss-2/nextjs vercel:yolo"
+    "vercel:yolo": "yarn workspace @ss-2/nextjs vercel:yolo",
+    "format": "yarn workspace @ss-2/nextjs format && yarn workspace @ss-2/snfoundry format",
+    "format:check": "yarn workspace @ss-2/nextjs format:check"
   },
   "packageManager": "[email protected]",
   "devDependencies": {
-    "daisyui": "^4.7.3"
+    "daisyui": "^4.7.3",
+    "prettier": "^3.2.5"
   },
   "dependencies": {
     "postcss": "^8.4.38"

diff --git a/packages/nextjs/app/debug/_components/DebugContracts.tsx b/packages/nextjs/app/debug/_components/DebugContracts.tsx
@@ -15,7 +15,7 @@ export function DebugContracts() {
   const [selectedContract, setSelectedContract] = useLocalStorage<ContractName>(
     selectedContractStorageKey,
     contractNames[0],
-    { initializeWithValue: false }
+    { initializeWithValue: false },
   );
 
   useEffect(() => {

diff --git a/packages/nextjs/app/debug/_components/contract/ContractUI.tsx b/packages/nextjs/app/debug/_components/contract/ContractUI.tsx
@@ -28,7 +28,7 @@ export const ContractUI = ({
 }: ContractUIProps) => {
   const [refreshDisplayVariables, triggerRefreshDisplayVariables] = useReducer(
     (value) => !value,
-    false
+    false,
   );
   const { targetNetwork } = useTargetNetwork();
   const { data: deployedContractData, isLoading: deployedContractLoading } =

diff --git a/packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx b/packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx
@@ -32,7 +32,7 @@ export const ReadOnlyFunctionForm = ({
   abi,
 }: ReadOnlyFunctionFormProps) => {
   const [form, setForm] = useState<Record<string, any>>(() =>
-    getInitialFormState(abiFunction)
+    getInitialFormState(abiFunction),
   );
   const [result, setResult] = useState<unknown>();
 

diff --git a/packages/nextjs/app/debug/_components/contract/TxReceipt.tsx b/packages/nextjs/app/debug/_components/contract/TxReceipt.tsx
@@ -14,7 +14,7 @@ export const TxReceipt = (
     | bigint
     | Record<string, any>
     | InvokeTransactionReceiptResponse
-    | undefined
+    | undefined,
 ) => {
   const [txResultCopied, setTxResultCopied] = useState(false);
 

diff --git a/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx b/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx
@@ -44,7 +44,7 @@ export const WriteOnlyFunctionForm = ({
 }: //   inheritedFrom,
 WriteOnlyFunctionFormProps) => {
   const [form, setForm] = useState<Record<string, any>>(() =>
-    getInitialFormState(abiFunction)
+    getInitialFormState(abiFunction),
   );
   const { chain } = useNetwork();
   const writeTxn = useTransactor();
@@ -74,7 +74,7 @@ WriteOnlyFunctionFormProps) => {
       } catch (e: any) {
         console.error(
           "⚡️ ~ file: WriteOnlyFunctionForm.tsx:handleWrite ~ error",
-          e
+          e,
         );
       }
     }

diff --git a/packages/nextjs/app/debug/_components/contract/utilsContract.tsx b/packages/nextjs/app/debug/_components/contract/utilsContract.tsx
@@ -6,7 +6,7 @@ import { uint256 } from "starknet";
 const getFunctionInputKey = (
   functionName: string,
   input: AbiParameter,
-  inputIndex: number
+  inputIndex: number,
 ): string => {
   const name = input?.name || `input_${inputIndex}_`;
   return functionName + "_" + name + "_" + input.type;
@@ -113,7 +113,7 @@ const transformAbiFunction = (abiFunction: AbiFunction): AbiFunction => {
   return {
     ...abiFunction,
     inputs: abiFunction.inputs.map((value) =>
-      adjustInput(value as AbiParameter)
+      adjustInput(value as AbiParameter),
     ),
   };
 };

diff --git a/packages/nextjs/app/debug/_components/contract/utilsDisplay.tsx b/packages/nextjs/app/debug/_components/contract/utilsDisplay.tsx
@@ -21,7 +21,7 @@ type DisplayContent =
 export const displayTxResult = (
   displayContent: DisplayContent | DisplayContent[],
   asText: boolean,
-  functionOutputs: readonly AbiOutput[] = []
+  functionOutputs: readonly AbiOutput[] = [],
 ): string | ReactElement | number => {
   if (displayContent == null) {
     return "";
@@ -71,7 +71,7 @@ export const displayTxResult = (
       ["number", "boolean"].includes(typeof v) ? v : displayTxResultAsText(v);
     const displayable = JSON.stringify(
       displayContent.map(mostReadable),
-      replacer
+      replacer,
     );
 
     return asText ? (

diff --git a/packages/nextjs/components/FaucetMenu.tsx b/packages/nextjs/components/FaucetMenu.tsx
@@ -1,6 +1,6 @@
 "use client";
-import { DropdownMenu, Button } from '@radix-ui/themes';
-import { CaretDownIcon } from '@radix-ui/react-icons';
+import { DropdownMenu, Button } from "@radix-ui/themes";
+import { CaretDownIcon } from "@radix-ui/react-icons";
 
 export default function FaucetMenu() {
   return (
@@ -10,14 +10,14 @@ export default function FaucetMenu() {
           Faucet <CaretDownIcon />
         </Button>
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content> 
+      <DropdownMenu.Content>
         <DropdownMenu.Item>
-            <a href="https://faucet.goerli.starknet.io/">Goerli</a>
-                </DropdownMenu.Item>
+          <a href="https://faucet.goerli.starknet.io/">Goerli</a>
+        </DropdownMenu.Item>
         <DropdownMenu.Item>
-            <a href="https://starknet-faucet.vercel.app/">Sepolia</a>
-                </DropdownMenu.Item>
+          <a href="https://starknet-faucet.vercel.app/">Sepolia</a>
+        </DropdownMenu.Item>
       </DropdownMenu.Content>
     </DropdownMenu.Root>
   );
-}
+}
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -4,13 +4,13 @@ import React, { useCallback, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import {Bars3Icon, BugAntIcon} from "@heroicons/react/24/outline";
+import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
 // import {
 //   FaucetButton,
 //   RainbowKitCustomConnectButton,
 // } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-stark";
-import {CustomConnectButton} from "~~/components/scaffold-stark/CustomConnectButton";
+import { CustomConnectButton } from "~~/components/scaffold-stark/CustomConnectButton";
 
 type HeaderMenuLink = {
   label: string;
@@ -64,7 +64,7 @@ export const Header = () => {
   const burgerMenuRef = useRef<HTMLDivElement>(null);
   useOutsideClick(
     burgerMenuRef,
-    useCallback(() => setIsDrawerOpen(false), [])
+    useCallback(() => setIsDrawerOpen(false), []),
   );
 
   return (
@@ -117,7 +117,7 @@ export const Header = () => {
         </ul>
       </div>
       <div className="navbar-end flex-grow mr-4">
-        <CustomConnectButton/>
+        <CustomConnectButton />
       </div>
     </div>
   );

diff --git a/packages/nextjs/components/ScaffoldStarkAppWithProviders.tsx b/packages/nextjs/components/ScaffoldStarkAppWithProviders.tsx
@@ -1,51 +1,62 @@
 "use client";
 
 import React from "react";
-import {useEffect, useState} from "react";
-import {useTheme} from "next-themes";
-import {Toaster} from "react-hot-toast";
+import { useEffect, useState } from "react";
+import { useTheme } from "next-themes";
+import { Toaster } from "react-hot-toast";
 import {
-  StarknetConfig, publicProvider, argent, braavos, useInjectedConnectors, starkscan, jsonRpcProvider, starknetChainId,
+  StarknetConfig,
+  publicProvider,
+  argent,
+  braavos,
+  useInjectedConnectors,
+  starkscan,
+  jsonRpcProvider,
+  starknetChainId,
 } from "@starknet-react/core";
-import {Header} from "~~/components/Header";
-import {Footer} from "~~/components/Footer";
-import {ProgressBar} from "~~/components/scaffold-stark/ProgressBar";
-import {appChains} from "~~/services/web3/connectors";
-import {BurnerConnector} from "~~/services/web3/stark-burner/BurnerConnector";
+import { Header } from "~~/components/Header";
+import { Footer } from "~~/components/Footer";
+import { ProgressBar } from "~~/components/scaffold-stark/ProgressBar";
+import { appChains } from "~~/services/web3/connectors";
+import { BurnerConnector } from "~~/services/web3/stark-burner/BurnerConnector";
 import scaffoldConfig from "~~/scaffold.config";
 
-const ScaffoldStarkApp = ({children}: { children: React.ReactNode }) => {
+const ScaffoldStarkApp = ({ children }: { children: React.ReactNode }) => {
   return (
     <>
       <div className="flex flex-col min-h-screen">
-        <Header/>
+        <Header />
         <main className="relative flex flex-col flex-1">{children}</main>
-        <Footer/>
+        <Footer />
       </div>
-      <Toaster/>
+      <Toaster />
     </>
   );
 };
-export const ScaffoldStarkAppWithProviders = ({children,}: {
+export const ScaffoldStarkAppWithProviders = ({
+  children,
+}: {
   children: React.ReactNode;
 }) => {
-  const {resolvedTheme} = useTheme();
+  const { resolvedTheme } = useTheme();
   const isDarkMode = resolvedTheme === "dark";
   const [mounted, setMounted] = useState(false);
 
-  const provider = scaffoldConfig.rpcProviderUrl == "" ? publicProvider() :
-    jsonRpcProvider({
-      rpc: () => ({
-        nodeUrl: scaffoldConfig.rpcProviderUrl,
-        chainId: starknetChainId(scaffoldConfig.targetNetworks[0].id)
-      })
-    })
+  const provider =
+    scaffoldConfig.rpcProviderUrl == ""
+      ? publicProvider()
+      : jsonRpcProvider({
+          rpc: () => ({
+            nodeUrl: scaffoldConfig.rpcProviderUrl,
+            chainId: starknetChainId(scaffoldConfig.targetNetworks[0].id),
+          }),
+        });
 
   useEffect(() => {
     setMounted(true);
   }, []);
 
-  const {connectors} = useInjectedConnectors({
+  const { connectors } = useInjectedConnectors({
     // Show these connectors if the user has no connector installed.
     recommended: [argent(), braavos(), new BurnerConnector()],
   });
@@ -57,7 +68,7 @@ export const ScaffoldStarkAppWithProviders = ({children,}: {
       connectors={connectors}
       explorer={starkscan}
     >
-      <ProgressBar/>
+      <ProgressBar />
       <ScaffoldStarkApp>{children}</ScaffoldStarkApp>
     </StarknetConfig>
   );

diff --git a/packages/nextjs/components/scaffold-stark/Address.tsx b/packages/nextjs/components/scaffold-stark/Address.tsx
@@ -89,7 +89,7 @@ export const Address = ({
 
   const blockExplorerAddressLink = getBlockExplorerAddressLink(
     targetNetwork,
-    checkSumAddress
+    checkSumAddress,
   );
   let displayAddress =
     checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4);

diff --git a/packages/nextjs/components/scaffold-stark/Balance.tsx b/packages/nextjs/components/scaffold-stark/Balance.tsx
@@ -29,7 +29,7 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
   });
 
   const [displayUsdMode, setDisplayUsdMode] = useState(
-    price > 0 ? Boolean(usdMode) : false
+    price > 0 ? Boolean(usdMode) : false,
   );
 
   const toggleBalanceMode = () => {

diff --git a/packages/nextjs/components/scaffold-stark/BlockieAvatar.tsx b/packages/nextjs/components/scaffold-stark/BlockieAvatar.tsx
@@ -9,7 +9,11 @@ interface BlockieAvatarProps {
 }
 
 // Custom Avatar for RainbowKit
-export const BlockieAvatar = ({ address, ensImage, size }: BlockieAvatarProps) => (
+export const BlockieAvatar = ({
+  address,
+  ensImage,
+  size,
+}: BlockieAvatarProps) => (
   // Don't want to use nextJS Image here (and adding remote patterns for the URL)
   // eslint-disable-next-line @next/next/no-img-element
   <img

diff --git a/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx b/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx
@@ -13,8 +13,8 @@ import {
 import { BlockieAvatar, isENS } from "~~/components/scaffold-stark";
 import { useOutsideClick } from "~~/hooks/scaffold-stark";
 import { getTargetNetworks } from "~~/utils/scaffold-stark";
-import {Address} from "@starknet-react/chains";
-import {useDisconnect} from "@starknet-react/core";
+import { Address } from "@starknet-react/chains";
+import { useDisconnect } from "@starknet-react/core";
 
 const allowedNetworks = getTargetNetworks();
 
@@ -46,10 +46,15 @@ export const AddressInfoDropdown = ({
   return (
     <>
       <details ref={dropdownRef} className="dropdown dropdown-end leading-3">
-        <summary tabIndex={0} className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 !h-auto">
+        <summary
+          tabIndex={0}
+          className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 !h-auto"
+        >
           <BlockieAvatar address={address} size={30} ensImage={ensAvatar} />
           <span className="ml-2 mr-1">
-            {isENS(displayName) ? displayName : address?.slice(0, 6) + "..." + address?.slice(-4)}
+            {isENS(displayName)
+              ? displayName
+              : address?.slice(0, 6) + "..." + address?.slice(-4)}
           </span>
           <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
         </summary>
@@ -88,13 +93,19 @@ export const AddressInfoDropdown = ({
             )}
           </li>
           <li className={selectingNetwork ? "hidden" : ""}>
-            <label htmlFor="qrcode-modal" className="btn-sm !rounded-xl flex gap-3 py-3">
+            <label
+              htmlFor="qrcode-modal"
+              className="btn-sm !rounded-xl flex gap-3 py-3"
+            >
               <QrCodeIcon className="h-6 w-4 ml-2 sm:ml-0" />
               <span className="whitespace-nowrap">View QR Code</span>
             </label>
           </li>
           <li className={selectingNetwork ? "hidden" : ""}>
-            <button className="menu-item btn-sm !rounded-xl flex gap-3 py-3" type="button">
+            <button
+              className="menu-item btn-sm !rounded-xl flex gap-3 py-3"
+              type="button"
+            >
               <ArrowTopRightOnSquareIcon className="h-6 w-4 ml-2 sm:ml-0" />
               <a
                 target="_blank"
@@ -115,7 +126,8 @@ export const AddressInfoDropdown = ({
                   setSelectingNetwork(true);
                 }}
               >
-                <ArrowsRightLeftIcon className="h-6 w-4 ml-2 sm:ml-0" /> <span>Switch Network</span>
+                <ArrowsRightLeftIcon className="h-6 w-4 ml-2 sm:ml-0" />{" "}
+                <span>Switch Network</span>
               </button>
             </li>
           ) : null}
@@ -125,7 +137,8 @@ export const AddressInfoDropdown = ({
               type="button"
               onClick={() => disconnect()}
             >
-              <ArrowLeftEndOnRectangleIcon className="h-6 w-4 ml-2 sm:ml-0" /> <span>Disconnect</span>
+              <ArrowLeftEndOnRectangleIcon className="h-6 w-4 ml-2 sm:ml-0" />{" "}
+              <span>Disconnect</span>
             </button>
           </li>
         </ul>