ok

.github/workflows/check.yml

@@ -19,7 +19,7 @@ jobs:
         uses: oven-sh/setup-bun@v2
 
       - name: Template Install dependencies
-        run: bun install
+        run: yarn install
 
       - name: Template Check
-        run: bun run ci:check
+        run: yarn run ci:check

app/buy-me-coffee/_components/ContractDemo.tsx

@@ -15,11 +15,11 @@ export default function BuyMeCoffeeContractDemo() {
     >
       <section
         className={clsx([
-          'rounded-lg border border-solid border-boat-color-palette-line',
+          'rounded-lg border border-boat-color-palette-line border-solid',
           'bg-boat-color-palette-backgroundalternate p-10',
         ])}
       >
-        <h2 className="mb-5 w-fit text-2xl font-semibold text-white">
+        <h2 className="mb-5 w-fit font-semibold text-2xl text-white">
           Messages from supporters
         </h2>
 
@@ -28,7 +28,7 @@ export default function BuyMeCoffeeContractDemo() {
       <aside>
         <div
           className={clsx([
-            'mt-10 rounded-lg border border-solid border-boat-color-palette-line',
+            'mt-10 rounded-lg border border-boat-color-palette-line border-solid',
             'bg-boat-color-palette-backgroundalternate p-10 md:mt-0',
           ])}
         >

app/buy-me-coffee/_components/FormBuyCoffee.tsx

@@ -75,13 +75,13 @@ function FormBuyCoffee({ refetchMemos }: FormBuyCoffeeProps) {
 
   return (
     <>
-      <h2 className="mb-5 w-full text-center text-2xl font-semibold text-white lg:text-left">
+      <h2 className="mb-5 w-full text-center font-semibold text-2xl text-white lg:text-left">
         Buy Me a Coffee!
       </h2>
       <form onSubmit={onSubmitTransaction} className="w-full">
         <div className="my-4 items-center lg:flex lg:gap-4">
           <div className="text-center text-4xl lg:text-left">☕</div>
-          <div className="mb-4 mt-2 text-center font-sans text-xl lg:my-0 lg:text-left">
+          <div className="mt-2 mb-4 text-center font-sans text-xl lg:my-0 lg:text-left">
             X
           </div>
           <div className="mx-auto flex max-w-[300px] gap-3 lg:max-w-max">

app/buy-me-coffee/_components/Label.tsx

@@ -8,7 +8,7 @@ export default function Label({
   return (
     <label
       htmlFor={htmlFor}
-      className="mb-2 block text-sm font-medium text-white"
+      className="mb-2 block font-medium text-sm text-white"
     >
       {children}
     </label>

app/buy-me-coffee/_components/MemoCard.tsx

@@ -26,32 +26,32 @@ function MemoCard({
         <div className="flex items-center gap-3">
           <Avatar address={userAddress} />
           <div className="inline-flex items-start gap-1 md:flex">
-            <span className="text-3 text-bold truncate text-wrap font-bold text-boat-color-palette-foreground">
+            <span className="truncate text-wrap font-bold text-3 text-boat-color-palette-foreground text-bold">
               <Name address={userAddress} />
             </span>
-            <span className="text-3 line-clamp-1 flex-1 truncate text-wrap break-all font-normal text-boat-color-palette-foregroundmuted">
+            <span className="line-clamp-1 flex-1 truncate text-wrap break-all font-normal text-3 text-boat-color-palette-foregroundmuted">
               {twitterHandle ? ` (@${twitterHandle})` : null}
             </span>
-            <span className="text-3 whitespace-nowrap font-normal text-boat-color-palette-foregroundmuted">
+            <span className="whitespace-nowrap font-normal text-3 text-boat-color-palette-foregroundmuted">
               bought {numCoffeesInt} coffee{numCoffeesInt > 1 ? 's' : null}
             </span>
           </div>
         </div>
-        <div className="text-3 ml-[43px] whitespace-nowrap font-normal text-boat-color-palette-foregroundmuted">
+        <div className="ml-[43px] whitespace-nowrap font-normal text-3 text-boat-color-palette-foregroundmuted">
           {convertedTimestamp.toDateString()}
         </div>
       </div>
       <div
         className={clsx([
           'flex w-full items-center rounded-2xl border-2',
-          'border-solid border-[color:var(--boat-color-foregroundMuted,#8A919E)] p-6 backdrop-blur-[20px]',
+          'border-[color:var(--boat-color-foregroundMuted,#8A919E)] border-solid p-6 backdrop-blur-[20px]',
         ])}
       >
         <p className="flex w-[0px] shrink grow items-start gap-1">
           <span
             className={clsx([
               'truncate whitespace-nowrap text-wrap text-base ',
-              'font-normal not-italic leading-6 text-boat-color-palette-foreground',
+              'font-normal text-boat-color-palette-foreground not-italic leading-6',
             ])}
           >
             {message}

app/buy-me-coffee/_components/TransactionStep.tsx

@@ -8,11 +8,11 @@ type StepProps = {
 export default function Step({ status, icon, helpText, children }: StepProps) {
   return (
     <>
-      <h2 className="mb-5 w-full text-center text-2xl font-semibold text-white">
+      <h2 className="mb-5 w-full text-center font-semibold text-2xl text-white">
         {status}
       </h2>
       <div className="text-center text-6xl">{icon}</div>
-      <div className="my-4 text-center text-sm text-gray-400">{helpText}</div>
+      <div className="my-4 text-center text-gray-400 text-sm">{helpText}</div>
       {children}
     </>
   );

app/buy-me-coffee/_components/useSmartContractForms.ts

@@ -90,7 +90,9 @@ export default function useSmartContractForms({
 
   useEffect(() => {
     async function onTransactionReceiptStatus() {
-      if ((dataHash as string) === '') return;
+      if ((dataHash as string) === '') {
+        return;
+      }
 
       if (transactionReceiptStatus === 'error') {
         if (

app/home/_components/WhyUseIt.tsx

@@ -5,7 +5,7 @@ function ListItem({ children }: { children: React.ReactNode }) {
   return (
     <li className="inline-flex items-center justify-start gap-4">
       <CheckIcon width="24" height="24" />
-      <span className="font-inter text-xl font-normal leading-7 text-white">
+      <span className="font-inter font-normal text-white text-xl leading-7">
         {children}
       </span>
     </li>
@@ -16,7 +16,7 @@ export default function HomeMain() {
   return (
     <section className="mb-12 flex flex-col items-center justify-center">
       <div className="w-full md:w-4/5">
-        <h2 className="mb-10 text-center text-xl font-medium text-white md:text-2xl lg:text-3xl">
+        <h2 className="mb-10 text-center font-medium text-white text-xl md:text-2xl lg:text-3xl">
           Save weeks of initial app setup and the hassle of integrating onchain
           components with web2 infrastructure.
         </h2>

app/mint/_components/ContractDemo.tsx

@@ -100,8 +100,8 @@ export default function MintContractDemo() {
         )}
       </div>
 
-      <div className="flex-shrink-1 mt-10 w-full flex-grow-0 lg:mt-0">
-        <h1 className="text-4xl font-bold">{collectionNameOrAddress}</h1>
+      <div className="mt-10 w-full flex-shrink-1 flex-grow-0 lg:mt-0">
+        <h1 className="font-bold text-4xl">{collectionNameOrAddress}</h1>
 
         {isConnected && (
           <h2 className="my-5">
@@ -121,7 +121,7 @@ export default function MintContractDemo() {
           </h2>
         )}
 
-        <p className="mb-6 mt-4 text-sm text-boat-footer-light-gray">
+        <p className="mt-4 mb-6 text-boat-footer-light-gray text-sm">
           {description}
         </p>
 

app/mint/_components/StepMintComplete.tsx

@@ -23,11 +23,11 @@ export default function StepMintComplete({
         'mb-8 bg-boat-footer-dark-gray p-8',
       )}
     >
-      <h2 className="mb-5 w-full text-center text-2xl font-semibold text-white">
+      <h2 className="mb-5 w-full text-center font-semibold text-2xl text-white">
         Congrats! You minted {collectionName}
       </h2>
       <div className="text-center text-6xl">🎉</div>
-      <div className="my-4 text-center text-sm text-gray-400">
+      <div className="my-4 text-center text-gray-400 text-sm">
         It will take ~ 5 minutes to show up in your wallet
       </div>
       <Button buttonContent="Mint another NFT" onClick={handleMintAnother} />

app/mint/_components/StepMintProcessing.tsx

@@ -10,13 +10,13 @@ export default function StepMintProcessing() {
         'mb-8 bg-boat-footer-dark-gray p-8',
       )}
     >
-      <h2 className="mb-5 w-full text-center text-2xl font-semibold text-white">
+      <h2 className="mb-5 w-full text-center font-semibold text-2xl text-white">
         Painting some pixels...
       </h2>
 
       <div className="text-center text-6xl">🎨</div>
 
-      <div className="my-4 text-center text-sm text-gray-400">
+      <div className="my-4 text-center text-gray-400 text-sm">
         Please confirm transaction in your wallet
       </div>
 

app/mint/_components/StepOutOfGas.tsx

@@ -19,13 +19,13 @@ export default function StepOutOfGas({ setMintStep }: OutOfGasStepProps) {
         'mb-8 bg-boat-footer-dark-gray p-8',
       )}
     >
-      <h2 className="mb-5 w-full text-center text-2xl font-semibold text-white">
+      <h2 className="mb-5 w-full text-center font-semibold text-2xl text-white">
         You&apos;re out of gas
       </h2>
 
       <div className="text-center text-6xl">⛽</div>
 
-      <div className="my-4 text-center text-sm text-gray-400">
+      <div className="my-4 text-center text-gray-400 text-sm">
         Please fund your wallet and try minting the NFT again.
       </div>
 

app/paymaster-bundler/_components/PaymasterBundlerDemo.tsx

@@ -55,7 +55,7 @@ export default function PaymasterBundlerDemo() {
         <header>
           <h2
             className={clsx(
-              'border-b-2 border-gray-700 pb-2 text-xl font-semibold',
+              'border-gray-700 border-b-2 pb-2 font-semibold text-xl',
             )}
           >
             Account Details
@@ -75,7 +75,7 @@ export default function PaymasterBundlerDemo() {
         <header>
           <h1
             className={clsx(
-              'border-b-2 border-gray-700 pb-2 text-center text-2xl font-bold',
+              'border-gray-700 border-b-2 pb-2 text-center font-bold text-2xl',
             )}
           >
             Mint NFTs with Coinbase Paymaster
@@ -89,7 +89,7 @@ export default function PaymasterBundlerDemo() {
         <button
           type="button"
           className={clsx(
-            'mt-4 block w-full rounded-full py-3.5 text-lg font-bold text-white transition duration-300',
+            'mt-4 block w-full rounded-full py-3.5 font-bold text-lg text-white transition duration-300',
             address
               ? 'cursor-pointer bg-blue-600 hover:bg-blue-700'
               : 'cursor-not-allowed bg-gray-600',

biome.json

@@ -61,6 +61,6 @@
     }
   },
   "files": {
-    "ignore": ["contracts/**", "coverage/**", ".next/**"]
+    "ignore": ["contracts/**", "coverage/**", ".next/**", "public/**"]
   }
 }

jest.setup.ts

@@ -6,7 +6,7 @@ import 'jest-extended';
 // Enable jest-dom functions
 import '@testing-library/jest-dom';
 
-import { TextDecoder, TextEncoder } from 'util';
+import { TextDecoder, TextEncoder } from 'node:util';
 
 global.TextEncoder = TextEncoder;
 global.TextDecoder = TextDecoder as typeof global.TextDecoder;

src/actions/get-collection-metadata.ts

@@ -42,16 +42,15 @@ export const getCollectionMetadataAction = async ({
   const jsonParsedMetadata = tryParseMetadataJson(metadataURI, gatewayHostname);
   if (jsonParsedMetadata) {
     return jsonParsedMetadata;
-  } else {
-    const response = await fetch(ipfsToHTTP(metadataURI, gatewayHostname));
-    if (!response.ok) {
-      throw new Error(`Error: ${response.status}`);
-    }
-    const json = (await response.json()) as JsonMetadata;
-    return {
-      name: json.name,
-      description: json.description,
-      image: ipfsToHTTP(json.image ?? '', gatewayHostname),
-    };
   }
+  const response = await fetch(ipfsToHTTP(metadataURI, gatewayHostname));
+  if (!response.ok) {
+    throw new Error(`Error: ${response.status}`);
+  }
+  const json = (await response.json()) as JsonMetadata;
+  return {
+    name: json.name,
+    description: json.description,
+    image: ipfsToHTTP(json.image ?? '', gatewayHostname),
+  };
 };

src/components/FallbackImage/FallbackImage.tsx

@@ -3,7 +3,7 @@ import { ImageIcon } from '@radix-ui/react-icons';
 export function FallbackImage() {
   return (
     <div className="flex size-full items-center justify-center bg-slate-100 ">
-      <ImageIcon className="font-robotoMono h-6/12 w-6/12 fill-slate-400 stroke-slate-400" />
+      <ImageIcon className="h-6/12 w-6/12 fill-slate-400 stroke-slate-400 font-robotoMono" />
     </div>
   );
 }

src/components/ProgressBar/ProgressBar.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import ProgressBar from './ProgressBar';
 
 const PERCENT = 20; // required prop to render the <ProgressBar />
-const PROGRESS_BAR_TEST_ID = `progress-bar`;
+const PROGRESS_BAR_TEST_ID = 'progress-bar';
 
 describe('ProgressBar', () => {
   it('should accept `percent` prop to render the bar', () => {
@@ -15,14 +15,14 @@ describe('ProgressBar', () => {
   });
 
   it('should apply backgroundClass to the ProgressBar', () => {
-    const bgClass = `bg-gray-800`;
+    const bgClass = 'bg-gray-800';
 
     render(<ProgressBar percent={PERCENT} backgroundClass={bgClass} />);
     expect(screen.getByTestId(PROGRESS_BAR_TEST_ID)).toHaveClass(bgClass);
   });
 
   it('should apply bar class to the ProgressBar', () => {
-    const barClass = `bg-gradient-2`;
+    const barClass = 'bg-gradient-2';
 
     render(<ProgressBar percent={PERCENT} barClass={barClass} />);
     expect(screen.getByTestId(PROGRESS_BAR_TEST_ID).firstChild).toHaveClass(

src/components/layout/banner/banner.tsx

@@ -13,7 +13,7 @@ export default function Banner({ pageName, pageUrl, wip }: BannerProps) {
     <section
       className={clsx(
         'flex flex-col items-center justify-between gap-6 p-6 md:flex-row md:gap-0',
-        `rounded-lg border border-zinc-400 border-opacity-10 bg-neutral-900  ${
+        `rounded-lg border border-zinc-400 border-opacity-10 bg-neutral-900 ${
           wip ? 'text-boat-color-yellow-70' : 'text-white'
         }`,
       )}
@@ -29,16 +29,16 @@ export default function Banner({ pageName, pageUrl, wip }: BannerProps) {
           />
         </div>
         <div className="inline-flex flex-col items-start justify-start gap-2">
-          <h1 className="font-inter text-base font-semibold leading-normal ">
+          <h1 className="font-inter font-semibold text-base leading-normal ">
             Step into the {pageName} experience.
           </h1>
           {wip ? (
-            <div className="font-inter text-base font-normal leading-normal ">
+            <div className="font-inter font-normal text-base leading-normal ">
               Just a quick heads up: this experience is a work in progress, keep
               an eye out for updates as we work on making it even better!
             </div>
           ) : (
-            <div className="font-inter text-base font-normal leading-normal">
+            <div className="font-inter font-normal text-base leading-normal">
               Take a dive into our fully functional demo page. Explore how the
               Smart Contract works, connect with it using Wagmi, and master a
               seamless user experience with React and Tailwind.
@@ -50,8 +50,8 @@ export default function Banner({ pageName, pageUrl, wip }: BannerProps) {
         <NextLink
           href={`/${pageUrl}#guide`}
           className={clsx(
-            'font-inter w-full rounded-3xl bg-white px-4 py-2',
-            'text-center text-sm font-medium leading-normal text-black no-underline',
+            'w-full rounded-3xl bg-white px-4 py-2 font-inter',
+            'text-center font-medium text-black text-sm leading-normal no-underline',
           )}
         >
           Read the Guide

src/components/layout/footer/Footer.tsx

@@ -23,7 +23,7 @@ export default function Footer() {
               <NextLink
                 href="/"
                 passHref={true}
-                className="font-robotoMono text-center text-xl font-medium text-white no-underline"
+                className="text-center font-medium font-robotoMono text-white text-xl no-underline"
               >
                 BUILD ONCHAIN APPS
               </NextLink>
@@ -40,7 +40,7 @@ export default function Footer() {
             </div>
 
             <div className="mt-8 flex flex-col items-center justify-center">
-              <p className="text-base font-normal leading-7 text-boat-footer-light-gray">
+              <p className="font-normal text-base text-boat-footer-light-gray leading-7">
                 This project is licensed under the MIT License - see the{' '}
                 <NextLink
                   href="https://github.com/coinbase/build-onchain-apps/blob/main/LICENSE.md"
@@ -54,7 +54,7 @@ export default function Footer() {
             </div>
           </div>
 
-          <div className="font-robotoMono flex flex-col items-start justify-center gap-4 text-center text-xl font-medium text-white">
+          <div className="flex flex-col items-start justify-center gap-4 text-center font-medium font-robotoMono text-white text-xl">
             EXPERIENCES
             <NavbarLink href="/buy-me-coffee">
               <span className="flex items-center gap-1 px-2">

src/components/layout/guide/H3.tsx

@@ -3,7 +3,7 @@ export default function H3({
   children,
 }: { id?: string; children: string }) {
   return (
-    <h3 id={id} className="mt-8 scroll-mt-28 text-4xl font-medium text-white">
+    <h3 id={id} className="mt-8 scroll-mt-28 font-medium text-4xl text-white">
       {children}
     </h3>
   );

src/components/layout/guide/H4.tsx

@@ -3,7 +3,7 @@ import Hr from './Hr';
 export default function H4({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <h4 className="text-xl font-normal text-white">{children}</h4>
+      <h4 className="font-normal text-white text-xl">{children}</h4>
       <Hr />
     </>
   );