chore: update format workflow

.github/workflows/format.yml

@@ -1,9 +1,9 @@
 name: Template Format
 on:
   push:
-    branches: ["main"]
+    branches: ["master"]
   pull_request:
-    branches: ["main"]
+    branches: ["master"]
 jobs:
   build:
     runs-on: ubuntu-latest

.github/workflows/lint.yml

@@ -1,9 +1,9 @@
 name: Template Lint
 on:
   push:
-    branches: ["main"]
+    branches: ["master"]
   pull_request:
-    branches: ["main"]
+    branches: ["master"]
 jobs:
   build:
     runs-on: ubuntu-latest

src/app/layout.tsx

@@ -1,29 +1,29 @@
-import type { Metadata } from "next";
-import { NEXT_PUBLIC_URL } from "../config";
+import type { Metadata } from 'next';
+import { NEXT_PUBLIC_URL } from '../config';
 
-import "./global.css";
-import "@coinbase/onchainkit/styles.css";
-import "@rainbow-me/rainbowkit/styles.css";
-import dynamic from "next/dynamic";
+import './global.css';
+import '@coinbase/onchainkit/styles.css';
+import '@rainbow-me/rainbowkit/styles.css';
+import dynamic from 'next/dynamic';
 
 const OnchainProviders = dynamic(
-  () => import("src/components/OnchainProviders"),
+  () => import('src/components/OnchainProviders'),
   {
     ssr: false,
-  }
+  },
 );
 
 export const viewport = {
-  width: "device-width",
+  width: 'device-width',
   initialScale: 1.0,
 };
 
 export const metadata: Metadata = {
-  title: "Onchain Commerce Template",
-  description: "Built with OnchainKit",
+  title: 'Onchain Commerce Template',
+  description: 'Built with OnchainKit',
   openGraph: {
-    title: "Onchain Commerce Template",
-    description: "Built with OnchainKit",
+    title: 'Onchain Commerce Template',
+    description: 'Built with OnchainKit',
     images: [`${NEXT_PUBLIC_URL}/vibes/vibes-19.png`],
   },
 };

src/app/page.tsx

@@ -1,5 +1,5 @@
-"use client";
-import OnchainStore from "src/components/OnchainStore";
+'use client';
+import OnchainStore from 'src/components/OnchainStore';
 
 export default function Page() {
   return <OnchainStore />;

src/components/Navbar.tsx

@@ -1,19 +1,19 @@
-import { useState } from "react";
+import { useState } from 'react';
 import {
   GITHUB_LINK,
   ONCHAINKIT_LINK,
   TEMPLATE_LINK,
   TWITTER_LINK,
-} from "src/links";
-import OnchainKitShopSvg from "src/svg/OnchainKitShopSvg";
-import { NavbarLinkReact } from "src/types";
+} from 'src/links';
+import OnchainKitShopSvg from 'src/svg/OnchainKitShopSvg';
+import type { NavbarLinkReact } from 'src/types';
 
 function NavbarLink({ link, label }: NavbarLinkReact) {
   return (
     <li>
       <a
         href={link}
-        className="text-xs text-gray-600 hover:text-gray-900 flex items-center"
+        className="flex items-center text-gray-600 text-xs hover:text-gray-900"
       >
         {label}
       </a>
@@ -22,19 +22,15 @@ function NavbarLink({ link, label }: NavbarLinkReact) {
 }
 
 export default function Navbar() {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-
-  const toggleMenu = () => {
-    setIsMenuOpen(!isMenuOpen);
-  };
+  const [isMenuOpen, _] = useState(false);
 
   return (
-    <header className="border-b border-gray-200 w-screen fixed top-0 left-1/2 right-1/2 -mx-[50vw] bg-white">
-      <div className="max-w-7xl mx-auto py-3 px-4 sm:px-6 lg:px-8">
-        <div className="flex justify-between items-center">
+    <header className="-mx-[50vw] fixed top-0 right-1/2 left-1/2 w-screen border-gray-200 border-b bg-white">
+      <div className="mx-auto max-w-7xl px-4 py-3 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between">
           <div className="flex items-center space-x-3">
             <OnchainKitShopSvg />
-            <span className="bg-gray-100 text-gray-700 text-xs font-regular px-2 py-0.5 rounded-sm">
+            <span className="rounded-sm bg-gray-100 px-2 py-0.5 font-regular text-gray-700 text-xs">
               Template
             </span>
           </div>
@@ -46,14 +42,11 @@ export default function Navbar() {
               <NavbarLink link={TWITTER_LINK} label="X" />
             </ul>
           </nav>
-          {/* <button className="md:hidden" onClick={toggleMenu}>
-            {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
-          </button> */}
         </div>
       </div>
       {isMenuOpen && (
         <div className="md:hidden">
-          <ul className="px-4 py-2 space-y-2">
+          <ul className="space-y-2 px-4 py-2">
             <NavbarLink link={TEMPLATE_LINK} label="FORK THIS TEMPLATE" />
             <NavbarLink link={ONCHAINKIT_LINK} label="ONCHAINKIT" />
             <NavbarLink link={GITHUB_LINK} label="GITHUB" />

src/components/OnchainStore.tsx

@@ -1,16 +1,16 @@
-import Navbar from "./Navbar";
-import OnchainStoreCart from "./OnchainStoreCart";
-import OnchainStoreItems from "./OnchainStoreItems";
-import { OnchainStoreProvider } from "./OnchainStoreProvider";
-import OnchainStoreSummary from "./OnchainStoreSummary";
+import Navbar from './Navbar';
+import OnchainStoreCart from './OnchainStoreCart';
+import OnchainStoreItems from './OnchainStoreItems';
+import { OnchainStoreProvider } from './OnchainStoreProvider';
+import OnchainStoreSummary from './OnchainStoreSummary';
 
 export default function OnchainStore() {
   return (
     <OnchainStoreProvider>
-      <div className="flex h-full max-w-full flex-col px-1 max-h-screen">
+      <div className="flex h-full max-h-screen max-w-full flex-col px-1">
         <Navbar />
-        <main className="max-w-7xl mx-auto flex flex-col grow py-10">
-          <div className="flex flex-col md:flex-row">
+        <main className="mx-auto flex max-w-7xl grow flex-col py-10">
+          <div className="flex grow flex-col md:flex-row">
             <OnchainStoreSummary />
             <OnchainStoreItems />
           </div>

src/components/OnchainStoreCart.tsx

@@ -1,8 +1,8 @@
-import { useCallback, useMemo } from "react";
-import { useOnchainStoreContext } from "./OnchainStoreProvider";
-import { LifecycleStatus, Pay, PayButton } from "@coinbase/onchainkit/pay";
-import useCreateCharge from "src/hooks/useCreateCharge";
-
+import { useCallback, useMemo } from 'react';
+import { useOnchainStoreContext } from './OnchainStoreProvider';
+import { Pay, PayButton } from '@coinbase/onchainkit/pay';
+import type { LifecycleStatus } from '@coinbase/onchainkit/pay';
+import useCreateCharge from 'src/hooks/useCreateCharge';
 
 export default function OnchainStoreCart() {
   const { quantities, products } = useOnchainStoreContext();
@@ -13,48 +13,48 @@ export default function OnchainStoreCart() {
     return (
       products?.reduce(
         (sum, product) => sum + (quantities[product.id] || 0) * product.price,
-        0
+        0,
       ) || 0
     );
   }, [products, quantities]);
 
   const handleStatusChange = useCallback((status: LifecycleStatus) => {
-    console.log("onStatus", status);
+    console.log('onStatus', status);
   }, []);
 
   const chargeHandler = useCallback(() => {
     const description = Object.keys(quantities)
       .map((productId) => {
         return `${productId}(${quantities[productId]})`;
       })
-      .join(",");
+      .join(',');
     const chargeDetails = {
-      name: "commerce template charge",
+      name: 'commerce template charge',
       description,
-      pricing_type: "fixed_price",
+      pricing_type: 'fixed_price',
       local_price: {
         amount: totalSum.toString(),
-        currency: "USD",
+        currency: 'USD',
       },
     };
     return createCharge(chargeDetails);
-  }, [quantities, totalSum]);
+  }, [createCharge, quantities, totalSum]);
 
   return (
-    <div className="fixed bottom-0 bg-white border-t border-gray-200 w-screen left-1/2 right-1/2 -mx-[50vw]">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-0">
-        <div className="flex flex-col md:flex-row justify-between items-start md:items-center py-4">
-          <span className="text-xs text-gray-500 mb-2 md:mb-0 md:w-1/3 lg:pl-8">
+    <div className="-mx-[50vw] fixed right-1/2 bottom-0 left-1/2 w-screen border-gray-200 border-t bg-white">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-0">
+        <div className="flex flex-col items-start justify-between py-4 md:flex-row md:items-center">
+          <span className="mb-2 text-gray-500 text-xs md:mb-0 md:w-1/3 lg:pl-8">
             Built with OnchainKit
           </span>
-          <div className="w-full md:w-2/3 flex justify-between items-center md:pl-5 xl:pr-0 pr-8">
-            <h2 className="text-lg md:w-11/12 font-bold ">
+          <div className="flex w-full items-center justify-between pr-8 md:w-2/3 md:pl-5 xl:pr-0">
+            <h2 className="font-bold text-lg md:w-11/12 ">
               TOTAL {totalSum.toFixed(2)} USDC
             </h2>
             <div className="w-64">
               <Pay onStatus={handleStatusChange} chargeHandler={chargeHandler}>
                 <PayButton
-                  coinbaseBranded
+                  coinbaseBranded={true}
                   text="Pay with Crypto"
                   disabled={!totalSum}
                 />

src/components/OnchainStoreItem.tsx

@@ -1,14 +1,13 @@
-import { Product } from "src/types";
-import jacketImage from "../images/jacket.png";
-import Image from "next/image";
-import QuantityInput from "./QuantityInput";
+import type { Product } from 'src/types';
+import Image from 'next/image';
+import QuantityInput from './QuantityInput';
 
 export default function OnchainStoreItem({ id, name, price, image }: Product) {
   return (
     <div className="flex flex-col">
-      <div className="flex justify-between items-start mb-1">
-        <h2 className="text-xs font-regular">{name}</h2>
-        <p className="text-xs font-regular">{price.toFixed(2)} USDC</p>
+      <div className="mb-1 flex items-start justify-between">
+        <h2 className="font-regular text-xs">{name}</h2>
+        <p className="font-regular text-xs">{price.toFixed(2)} USDC</p>
       </div>
       <Image src={image} alt="123" width={400} height={400} />
       <QuantityInput productId={id} />

src/components/OnchainStoreItems.tsx

@@ -1,13 +1,15 @@
-import OnchainStoreItem from "./OnchainStoreItem";
-import { useOnchainStoreContext } from "./OnchainStoreProvider";
+import OnchainStoreItem from './OnchainStoreItem';
+import { useOnchainStoreContext } from './OnchainStoreProvider';
 
 export default function OnchainStoreItems() {
   const { products } = useOnchainStoreContext();
 
   return (
-    <div className="p-8 mb-8 md:mb-0 scroll">
-      <div className="grid sm:grid-cols-2 gap-8 grid-cols-1">
-        {products?.map((item) => <OnchainStoreItem {...item} />)}
+    <div className="scroll mb-8 p-8 md:mb-0">
+      <div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
+        {products?.map((item) => (
+          <OnchainStoreItem {...item} key={item.id} />
+        ))}
       </div>
     </div>
   );

src/components/OnchainStoreProvider.tsx

@@ -1,8 +1,8 @@
-import { createContext, useContext, useMemo, useState } from "react";
-import type { ReactNode } from "react";
-import type { OnchainStoreContextType } from "../types";
-import jacketImage from "../images/jacket.png";
-import { Product } from "src/types";
+import { createContext, useContext, useMemo, useState } from 'react';
+import type { ReactNode } from 'react';
+import type { OnchainStoreContextType } from '../types';
+import jacketImage from '../images/jacket.png';
+import type { Product } from 'src/types';
 
 const emptyContext = {} as OnchainStoreContextType;
 
@@ -14,22 +14,22 @@ type OnchainStoreProviderReact = {
 };
 
 const products: Product[] = [
-  { id: "product1", name: "BUILDER JACKET", price: 0.04, image: jacketImage },
+  { id: 'product1', name: 'BUILDER JACKET', price: 0.04, image: jacketImage },
   {
-    id: "product2",
-    name: "DO NOT DISTURB AIRPODS",
+    id: 'product2',
+    name: 'DO NOT DISTURB AIRPODS',
     price: 0.01,
     image: jacketImage,
   },
   {
-    id: "product3",
-    name: "CAFFEINATED TO BUILD MUG",
+    id: 'product3',
+    name: 'CAFFEINATED TO BUILD MUG',
     price: 0.02,
     image: jacketImage,
   },
   {
-    id: "product4",
-    name: "OCK BUILDER JACKET",
+    id: 'product4',
+    name: 'OCK BUILDER JACKET',
     price: 0.01,
     image: jacketImage,
   },
@@ -43,7 +43,7 @@ export function OnchainStoreProvider({ children }: OnchainStoreProviderReact) {
       setQuantities,
       products,
     };
-  }, [quantities, setQuantities]);
+  }, [quantities]);
 
   return (
     <OnchainStoreContext.Provider value={value}>

src/components/OnchainStoreSummary.tsx

@@ -1,18 +1,18 @@
 export default function OnchainStoreSummary() {
   return (
-    <div className="md:w-1/3 p-8 mb-8 md:mb-0 flex flex-col justify-center border-gray-200 border-r">
-      <div className="text-left space-y-4">
+    <div className="mb-8 flex flex-col justify-center border-gray-200 border-r p-8 md:mb-0 md:w-1/3">
+      <div className="space-y-4 text-left">
         <h2
-          className="text-3xl font-bold leading-tight"
+          className="font-bold text-3xl leading-tight"
           style={{
             fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
             fontWeight: 700,
-            fontStretch: "condensed",
+            fontStretch: 'condensed',
           }}
         >
           The future of commerce is less fee. More creativity.
         </h2>
-        <p className="text-sm leading-relaxed mt-4">
+        <p className="mt-4 text-sm leading-relaxed">
           Frustration over fees and delays are the top reasons why nearly 9 in
           10 Americans want an updated financial system.
         </p>