diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 64fe6d4d5..8046d0213 100644 --- 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 index 8013d3022..d8b1b085c 100644 --- 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": "yarn@3.2.3", "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 index f4f3caa84..a6880dcb2 100644 --- 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( 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 index 680b36347..0740be525 100644 --- 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 index 7288533b3..4aca56779 100644 --- 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>(() => - getInitialFormState(abiFunction) + getInitialFormState(abiFunction), ); const [result, setResult] = useState(); diff --git a/packages/nextjs/app/debug/_components/contract/TxReceipt.tsx b/packages/nextjs/app/debug/_components/contract/TxReceipt.tsx index 68d0846f5..35d08a853 100644 --- 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 | 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 index 5777bb957..71d093cfb 100644 --- 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>(() => - 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 index fd4316ae6..4f0a2959c 100644 --- 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 index 9eb4b5a26..25e70c737 100644 --- 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 index 9d8d200cc..afab5db88 100644 --- 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 - + - Goerli - + Goerli + - Sepolia - + Sepolia + ); -} \ No newline at end of file +} diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx index 66007487a..7d5e11382 100644 --- 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(null); useOutsideClick( burgerMenuRef, - useCallback(() => setIsDrawerOpen(false), []) + useCallback(() => setIsDrawerOpen(false), []), ); return ( @@ -117,7 +117,7 @@ export const Header = () => {
- +
); diff --git a/packages/nextjs/components/ScaffoldStarkAppWithProviders.tsx b/packages/nextjs/components/ScaffoldStarkAppWithProviders.tsx index e04cc12f2..4cee39ec6 100644 --- 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 ( <>
-
+
{children}
-
+
- + ); }; -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} > - + {children} ); diff --git a/packages/nextjs/components/scaffold-stark/Address.tsx b/packages/nextjs/components/scaffold-stark/Address.tsx index 070c84f69..6a16f4470 100644 --- 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 index 67dc2017c..f5fa9eef6 100644 --- 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 index cc7018778..673bd7719 100644 --- 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
- + - {isENS(displayName) ? displayName : address?.slice(0, 6) + "..." + address?.slice(-4)} + {isENS(displayName) + ? displayName + : address?.slice(0, 6) + "..." + address?.slice(-4)} @@ -88,13 +93,19 @@ export const AddressInfoDropdown = ({ )}
  • -
  • -
    • ) : null} @@ -125,7 +137,8 @@ export const AddressInfoDropdown = ({ type="button" onClick={() => disconnect()} > - Disconnect + {" "} + Disconnect diff --git a/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressQRCodeModal.tsx b/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressQRCodeModal.tsx index a7a082a00..2695205d8 100644 --- a/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressQRCodeModal.tsx +++ b/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressQRCodeModal.tsx @@ -7,7 +7,10 @@ type AddressQRCodeModalProps = { modalId: string; }; -export const AddressQRCodeModal = ({ address, modalId }: AddressQRCodeModalProps) => { +export const AddressQRCodeModal = ({ + address, + modalId, +}: AddressQRCodeModalProps) => { return ( <>
    @@ -16,7 +19,10 @@ export const AddressQRCodeModal = ({ address, modalId }: AddressQRCodeModalProps