From e19de4f21c2db3e5d138d7c0da377a5d3c1a6270 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Fri, 11 Oct 2024 12:31:51 -0700 Subject: [PATCH 1/9] update format workflow --- .github/workflows/format.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml index 5de39f1..5b4d544 100644 --- a/.github/workflows/format.yml +++ b/.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 From bb090203aa6247a7540a321558a18c316c7a0a43 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Fri, 11 Oct 2024 12:42:37 -0700 Subject: [PATCH 2/9] fix formatting --- src/app/layout.tsx | 26 +++++----- src/app/page.tsx | 4 +- src/components/Navbar.tsx | 8 +-- src/components/OnchainStore.tsx | 10 ++-- src/components/OnchainStoreCart.tsx | 21 ++++---- src/components/OnchainStoreItem.tsx | 8 +-- src/components/OnchainStoreItems.tsx | 8 +-- src/components/OnchainStoreProvider.tsx | 24 ++++----- src/components/OnchainStoreSummary.tsx | 2 +- src/components/QuantityInput.tsx | 10 ++-- src/config.ts | 8 +-- src/hooks/useCreateCharge.ts | 14 ++--- src/links.ts | 12 ++--- src/types.ts | 6 +-- tailwind.config.ts | 68 ++++++++++++------------- tsconfig.json | 17 ++----- 16 files changed, 118 insertions(+), 128 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b1dc80c..86b8c60 100644 --- a/src/app/layout.tsx +++ b/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`], }, }; diff --git a/src/app/page.tsx b/src/app/page.tsx index 719b001..1db0ad7 100644 --- a/src/app/page.tsx +++ b/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 ; diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 1378ad9..c086c9c 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,12 +1,12 @@ -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 { NavbarLinkReact } from 'src/types'; function NavbarLink({ link, label }: NavbarLinkReact) { return ( diff --git a/src/components/OnchainStore.tsx b/src/components/OnchainStore.tsx index fed1b13..9883393 100644 --- a/src/components/OnchainStore.tsx +++ b/src/components/OnchainStore.tsx @@ -1,8 +1,8 @@ -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 ( diff --git a/src/components/OnchainStoreCart.tsx b/src/components/OnchainStoreCart.tsx index 0d8d621..f403883 100644 --- a/src/components/OnchainStoreCart.tsx +++ b/src/components/OnchainStoreCart.tsx @@ -1,8 +1,7 @@ -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 { LifecycleStatus, Pay, PayButton } from '@coinbase/onchainkit/pay'; +import useCreateCharge from 'src/hooks/useCreateCharge'; export default function OnchainStoreCart() { const { quantities, products } = useOnchainStoreContext(); @@ -13,13 +12,13 @@ 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(() => { @@ -27,14 +26,14 @@ export default function OnchainStoreCart() { .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); diff --git a/src/components/OnchainStoreItem.tsx b/src/components/OnchainStoreItem.tsx index e6bd983..2f19589 100644 --- a/src/components/OnchainStoreItem.tsx +++ b/src/components/OnchainStoreItem.tsx @@ -1,7 +1,7 @@ -import { Product } from "src/types"; -import jacketImage from "../images/jacket.png"; -import Image from "next/image"; -import QuantityInput from "./QuantityInput"; +import { Product } from 'src/types'; +import jacketImage from '../images/jacket.png'; +import Image from 'next/image'; +import QuantityInput from './QuantityInput'; export default function OnchainStoreItem({ id, name, price, image }: Product) { return ( diff --git a/src/components/OnchainStoreItems.tsx b/src/components/OnchainStoreItems.tsx index d72ef7c..fa088aa 100644 --- a/src/components/OnchainStoreItems.tsx +++ b/src/components/OnchainStoreItems.tsx @@ -1,5 +1,5 @@ -import OnchainStoreItem from "./OnchainStoreItem"; -import { useOnchainStoreContext } from "./OnchainStoreProvider"; +import OnchainStoreItem from './OnchainStoreItem'; +import { useOnchainStoreContext } from './OnchainStoreProvider'; export default function OnchainStoreItems() { const { products } = useOnchainStoreContext(); @@ -7,7 +7,9 @@ export default function OnchainStoreItems() { return (
- {products?.map((item) => )} + {products?.map((item) => ( + + ))}
); diff --git a/src/components/OnchainStoreProvider.tsx b/src/components/OnchainStoreProvider.tsx index 015b3bc..dbbfe2d 100644 --- a/src/components/OnchainStoreProvider.tsx +++ b/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 { 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, }, diff --git a/src/components/OnchainStoreSummary.tsx b/src/components/OnchainStoreSummary.tsx index ffa72c0..8829ddb 100644 --- a/src/components/OnchainStoreSummary.tsx +++ b/src/components/OnchainStoreSummary.tsx @@ -7,7 +7,7 @@ export default function OnchainStoreSummary() { style={{ fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif", fontWeight: 700, - fontStretch: "condensed", + fontStretch: 'condensed', }} > The future of commerce is less fee. More creativity. diff --git a/src/components/QuantityInput.tsx b/src/components/QuantityInput.tsx index fe0c8ea..916fc05 100644 --- a/src/components/QuantityInput.tsx +++ b/src/components/QuantityInput.tsx @@ -1,12 +1,12 @@ -import { useCallback, useMemo } from "react"; +import { useCallback, useMemo } from 'react'; import { Quantities, QuantityInputButtonReact, QuantityInputReact, -} from "src/types"; -import { useOnchainStoreContext } from "./OnchainStoreProvider"; -import PlusSvg from "src/svg/PlusSvg"; -import MinusSvg from "src/svg/MinusSvg"; +} from 'src/types'; +import { useOnchainStoreContext } from './OnchainStoreProvider'; +import PlusSvg from 'src/svg/PlusSvg'; +import MinusSvg from 'src/svg/MinusSvg'; function QuantityInputButton({ onClick, diff --git a/src/config.ts b/src/config.ts index ff12438..a52f456 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,11 +1,11 @@ // Add your API key from Coinbase Commerce export const COINBASE_COMMERCE_API_KEY = - process.env.COINBASE_COMMERCE_API_KEY || ""; + process.env.COINBASE_COMMERCE_API_KEY || ''; // use NODE_ENV to not have to change config based on where it's deployed export const NEXT_PUBLIC_URL = - process.env.NODE_ENV === "development" - ? "http://localhost:3000" - : "https://onchain-commerce-template.vercel.app"; + process.env.NODE_ENV === 'development' + ? 'http://localhost:3000' + : 'https://onchain-commerce-template.vercel.app'; // Add your API KEY from the Coinbase Developer Portal export const NEXT_PUBLIC_CDP_API_KEY = process.env.NEXT_PUBLIC_CDP_API_KEY; export const NEXT_PUBLIC_WC_PROJECT_ID = process.env.NEXT_PUBLIC_WC_PROJECT_ID; diff --git a/src/hooks/useCreateCharge.ts b/src/hooks/useCreateCharge.ts index 213ad1d..bac10ef 100644 --- a/src/hooks/useCreateCharge.ts +++ b/src/hooks/useCreateCharge.ts @@ -1,7 +1,7 @@ -import { useCallback } from "react"; -import { COINBASE_COMMERCE_API_KEY } from "src/config"; +import { useCallback } from 'react'; +import { COINBASE_COMMERCE_API_KEY } from 'src/config'; -const COMMERCE_API_URL = "https://api.commerce.coinbase.com"; +const COMMERCE_API_URL = 'https://api.commerce.coinbase.com'; type Price = { amount: string; @@ -19,17 +19,17 @@ const useCreateCharge = () => { console.log({ chargeDetails }); try { const res = await fetch(`${COMMERCE_API_URL}/charges`, { - method: "POST", + method: 'POST', body: JSON.stringify(chargeDetails), headers: { - "Content-Type": "application/json", - "X-CC-Api-Key": COINBASE_COMMERCE_API_KEY, + 'Content-Type': 'application/json', + 'X-CC-Api-Key': COINBASE_COMMERCE_API_KEY, }, }); const { data } = await res.json(); return data.id; } catch (error) { - console.error("Error creating charge:", error); + console.error('Error creating charge:', error); throw error; } }, []); diff --git a/src/links.ts b/src/links.ts index b800c96..b0e13ee 100644 --- a/src/links.ts +++ b/src/links.ts @@ -1,7 +1,7 @@ -export const DISCORD_LINK = "https://discord.gg/wTJ7besU"; +export const DISCORD_LINK = 'https://discord.gg/wTJ7besU'; export const FIGMA_LINK = - "https://www.figma.com/community/file/1370194397345450683/onchainkit"; -export const GITHUB_LINK = "https://github.com/coinbase/onchainkit"; -export const ONCHAINKIT_LINK = "https://onchainkit.xyz"; -export const TEMPLATE_LINK = ""; -export const TWITTER_LINK = "https://x.com/Onchainkit"; + 'https://www.figma.com/community/file/1370194397345450683/onchainkit'; +export const GITHUB_LINK = 'https://github.com/coinbase/onchainkit'; +export const ONCHAINKIT_LINK = 'https://onchainkit.xyz'; +export const TEMPLATE_LINK = ''; +export const TWITTER_LINK = 'https://x.com/Onchainkit'; diff --git a/src/types.ts b/src/types.ts index 212b28f..be98278 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,5 +1,5 @@ -import { StaticImageData } from "next/image"; -import { ReactNode } from "react"; +import { StaticImageData } from 'next/image'; +import { ReactNode } from 'react'; export type NavbarLinkReact = { link: string; @@ -22,7 +22,7 @@ export type QuantityInputReact = { export type OnchainStoreContextType = { quantities: Quantities; setQuantities: ( - quantities: Quantities | ((prev: Quantities) => Quantities) + quantities: Quantities | ((prev: Quantities) => Quantities), ) => void; products?: Product[]; }; diff --git a/tailwind.config.ts b/tailwind.config.ts index 0b62d6c..9e3fe2b 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,67 +1,67 @@ -import type { Config } from "tailwindcss"; +import type { Config } from 'tailwindcss'; const config: Config = { - content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"], + content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'], theme: { container: { center: true, screens: { - sm: "640px", - md: "768px", - lg: "1024px", - xl: "1280px", + sm: '640px', + md: '768px', + lg: '1024px', + xl: '1280px', }, }, extend: { colors: { - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))", + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))', }, popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))", + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))', }, primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))", + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))', }, secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))", + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))', }, muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))", + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))', }, accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))", + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))', }, destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))", + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))', }, - border: "hsl(var(--border))", - input: "hsl(var(--input))", - ring: "hsl(var(--ring))", + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', chart: { - "1": "hsl(var(--chart-1))", - "2": "hsl(var(--chart-2))", - "3": "hsl(var(--chart-3))", - "4": "hsl(var(--chart-4))", - "5": "hsl(var(--chart-5))", + '1': 'hsl(var(--chart-1))', + '2': 'hsl(var(--chart-2))', + '3': 'hsl(var(--chart-3))', + '4': 'hsl(var(--chart-4))', + '5': 'hsl(var(--chart-5))', }, }, borderRadius: { - lg: "var(--radius)", - md: "calc(var(--radius) - 2px)", - sm: "calc(var(--radius) - 4px)", + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)', }, fontFamily: { - mono: ["IBM Plex Mono", "monospace"], + mono: ['IBM Plex Mono', 'monospace'], }, }, }, diff --git a/tsconfig.json b/tsconfig.json index 3835058..672fd3a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "es2020", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, @@ -24,13 +20,6 @@ ], "baseUrl": "." }, - "include": [ - "next-env.d.ts", - "**/*.ts", - "**/*.tsx", - ".next/types/**/*.ts" - ], - "exclude": [ - "node_modules" - ] + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] } From 109143c3ea06636f713d699ed8a3fad9b46a5dd5 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Fri, 11 Oct 2024 12:43:44 -0700 Subject: [PATCH 3/9] update lint workflow --- .github/workflows/lint.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index e7d29cf..e0a918b 100644 --- a/.github/workflows/lint.yml +++ b/.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 From 8f63de49c279cf2c54e57a0752394893e999fb33 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Fri, 11 Oct 2024 12:46:47 -0700 Subject: [PATCH 4/9] fix lint --- src/svg/MinusSvg.tsx | 1 + src/svg/OnchainKitShopSvg.tsx | 2 +- src/svg/PlusSvg.tsx | 1 + src/types.ts | 4 ++-- 4 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/svg/MinusSvg.tsx b/src/svg/MinusSvg.tsx index 3dedd77..b0a0b3c 100644 --- a/src/svg/MinusSvg.tsx +++ b/src/svg/MinusSvg.tsx @@ -7,6 +7,7 @@ export default function MinusSvg() { fill="none" xmlns="http://www.w3.org/2000/svg" > + MinusSvg - {/* SVG path data */} + OnchainKitShopSvg + PlusSvg Date: Fri, 11 Oct 2024 12:51:25 -0700 Subject: [PATCH 5/9] fix lint --- src/components/Navbar.tsx | 11 ++--------- src/components/OnchainStoreCart.tsx | 7 ++++--- src/components/OnchainStoreItem.tsx | 1 - src/components/OnchainStoreProvider.tsx | 4 ++-- src/components/QuantityInput.tsx | 9 +++++---- 5 files changed, 13 insertions(+), 19 deletions(-) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index c086c9c..4fde44c 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -6,7 +6,7 @@ import { TWITTER_LINK, } from 'src/links'; import OnchainKitShopSvg from 'src/svg/OnchainKitShopSvg'; -import { NavbarLinkReact } from 'src/types'; +import type { NavbarLinkReact } from 'src/types'; function NavbarLink({ link, label }: NavbarLinkReact) { return ( @@ -22,11 +22,7 @@ function NavbarLink({ link, label }: NavbarLinkReact) { } export default function Navbar() { - const [isMenuOpen, setIsMenuOpen] = useState(false); - - const toggleMenu = () => { - setIsMenuOpen(!isMenuOpen); - }; + const [isMenuOpen, _] = useState(false); return (
@@ -46,9 +42,6 @@ export default function Navbar() { - {/* */} {isMenuOpen && ( diff --git a/src/components/OnchainStoreCart.tsx b/src/components/OnchainStoreCart.tsx index f403883..e83c93c 100644 --- a/src/components/OnchainStoreCart.tsx +++ b/src/components/OnchainStoreCart.tsx @@ -1,6 +1,7 @@ import { useCallback, useMemo } from 'react'; import { useOnchainStoreContext } from './OnchainStoreProvider'; -import { LifecycleStatus, Pay, PayButton } from '@coinbase/onchainkit/pay'; +import { Pay, PayButton } from '@coinbase/onchainkit/pay'; +import type { LifecycleStatus } from '@coinbase/onchainkit/pay'; import useCreateCharge from 'src/hooks/useCreateCharge'; export default function OnchainStoreCart() { @@ -37,7 +38,7 @@ export default function OnchainStoreCart() { }, }; return createCharge(chargeDetails); - }, [quantities, totalSum]); + }, [createCharge, quantities, totalSum]); return (
@@ -53,7 +54,7 @@ export default function OnchainStoreCart() {
diff --git a/src/components/OnchainStoreItem.tsx b/src/components/OnchainStoreItem.tsx index 2f19589..d172e4a 100644 --- a/src/components/OnchainStoreItem.tsx +++ b/src/components/OnchainStoreItem.tsx @@ -1,5 +1,4 @@ import { Product } from 'src/types'; -import jacketImage from '../images/jacket.png'; import Image from 'next/image'; import QuantityInput from './QuantityInput'; diff --git a/src/components/OnchainStoreProvider.tsx b/src/components/OnchainStoreProvider.tsx index dbbfe2d..7f5dbe3 100644 --- a/src/components/OnchainStoreProvider.tsx +++ b/src/components/OnchainStoreProvider.tsx @@ -2,7 +2,7 @@ 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 type { Product } from 'src/types'; const emptyContext = {} as OnchainStoreContextType; @@ -43,7 +43,7 @@ export function OnchainStoreProvider({ children }: OnchainStoreProviderReact) { setQuantities, products, }; - }, [quantities, setQuantities]); + }, [quantities, setQuantities, products]); return ( diff --git a/src/components/QuantityInput.tsx b/src/components/QuantityInput.tsx index 916fc05..ab67435 100644 --- a/src/components/QuantityInput.tsx +++ b/src/components/QuantityInput.tsx @@ -1,5 +1,5 @@ import { useCallback, useMemo } from 'react'; -import { +import type { Quantities, QuantityInputButtonReact, QuantityInputReact, @@ -15,8 +15,9 @@ function QuantityInputButton({ }: QuantityInputButtonReact) { return (