From f478067bac4dc856d876b5d1e2bf93900fbec7de Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Thu, 10 Oct 2024 13:50:49 -0700 Subject: [PATCH 1/9] update readme --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index 82635cd..5a0ec0a 100644 --- a/README.md +++ b/README.md @@ -9,8 +9,6 @@ An Onchain Commerce Template build with [OnchainKit](https://onchainkit.xyz), and ready to be deployed to Vercel. -Play with it live on https://onchain-commerce-template.vercel.app - Have fun! ⛵️
From 3a77c49cab812a718548b69171adb1f503508e28 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Thu, 10 Oct 2024 14:08:11 -0700 Subject: [PATCH 2/9] update readme --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 5a0ec0a..58ef383 100644 --- a/README.md +++ b/README.md @@ -27,6 +27,9 @@ NEXT_PUBLIC_CDP_API_KEY="GET_FROM_COINBASE_DEVELOPER_PLATFORM" # See https://cloud.walletconnect.com NEXT_PUBLIC_WC_PROJECT_ID="GET_FROM_WALLET_CONNECT" + +# See https://beta.commerce.coinbase.com/ +COINBASE_COMMERCE_API_KEY="GET_FROM_COINBASE_COMMERCE" ```
From 79e9ea12a30345009b67f126807b13e929f0850a Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Fri, 11 Oct 2024 12:21:11 -0700 Subject: [PATCH 3/9] adjust styles and navbar --- README.md | 2 ++ src/components/Navbar.tsx | 20 ++++++++++++-------- src/components/OnchainStore.tsx | 2 +- src/components/OnchainStoreCart.tsx | 4 ++-- src/components/OnchainStoreItems.tsx | 2 +- src/components/OnchainStoreSummary.tsx | 2 +- src/svg/ExternalLinkSvg.tsx | 13 +++++++++++++ src/svg/MenuSvg.tsx | 13 +++++++++++++ 8 files changed, 45 insertions(+), 13 deletions(-) create mode 100644 src/svg/ExternalLinkSvg.tsx create mode 100644 src/svg/MenuSvg.tsx diff --git a/README.md b/README.md index 58ef383..3fd9bd3 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,8 @@ COINBASE_COMMERCE_API_KEY="GET_FROM_COINBASE_COMMERCE" ## Locally run + + ```sh # Install bun in case you don't have it bun curl -fsSL | bash diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 1378ad9..40bc3db 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,22 +1,25 @@ -import { useState } from "react"; +import { useCallback, useState } from "react"; import { GITHUB_LINK, ONCHAINKIT_LINK, TEMPLATE_LINK, TWITTER_LINK, } from "src/links"; +import { ExternalLinkSvg } from "src/svg/ExternalLinkSvg"; +import { MenuSvg } from "src/svg/MenuSvg"; import OnchainKitShopSvg from "src/svg/OnchainKitShopSvg"; import { NavbarLinkReact } from "src/types"; function NavbarLink({ link, label }: NavbarLinkReact) { return ( -
  • +
  • {label} +
    • ); } @@ -24,9 +27,9 @@ function NavbarLink({ link, label }: NavbarLinkReact) { export default function Navbar() { const [isMenuOpen, setIsMenuOpen] = useState(false); - const toggleMenu = () => { - setIsMenuOpen(!isMenuOpen); - }; + const toggleMenu = useCallback(() => { + setIsMenuOpen((prev) => !prev); + }, []); return (
    @@ -46,9 +49,10 @@ export default function Navbar() { - {/* */} + {isMenuOpen && ( diff --git a/src/components/OnchainStore.tsx b/src/components/OnchainStore.tsx index fed1b13..b2bee06 100644 --- a/src/components/OnchainStore.tsx +++ b/src/components/OnchainStore.tsx @@ -10,7 +10,7 @@ export default function OnchainStore() {
    -
    +
    diff --git a/src/components/OnchainStoreCart.tsx b/src/components/OnchainStoreCart.tsx index 0d8d621..2d55963 100644 --- a/src/components/OnchainStoreCart.tsx +++ b/src/components/OnchainStoreCart.tsx @@ -43,11 +43,11 @@ export default function OnchainStoreCart() { return (
    -
    +
    Built with OnchainKit -
    +

    TOTAL {totalSum.toFixed(2)} USDC

    diff --git a/src/components/OnchainStoreItems.tsx b/src/components/OnchainStoreItems.tsx index d72ef7c..79b8e5e 100644 --- a/src/components/OnchainStoreItems.tsx +++ b/src/components/OnchainStoreItems.tsx @@ -5,7 +5,7 @@ export default function OnchainStoreItems() { const { products } = useOnchainStoreContext(); return ( -
    +
    {products?.map((item) => )}
    diff --git a/src/components/OnchainStoreSummary.tsx b/src/components/OnchainStoreSummary.tsx index ffa72c0..517b4b4 100644 --- a/src/components/OnchainStoreSummary.tsx +++ b/src/components/OnchainStoreSummary.tsx @@ -1,6 +1,6 @@ export default function OnchainStoreSummary() { return ( -
    +

    + + + ); +} diff --git a/src/svg/MenuSvg.tsx b/src/svg/MenuSvg.tsx new file mode 100644 index 0000000..d57326a --- /dev/null +++ b/src/svg/MenuSvg.tsx @@ -0,0 +1,13 @@ + +export function MenuSvg() { + return ( + + + + ); +} From b60900326d6a39e1b74777ea1e51e2dbe1458d6f Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Fri, 11 Oct 2024 13:07:23 -0700 Subject: [PATCH 4/9] fix merge conflict --- src/config.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/config.ts b/src/config.ts index ff12438..f3e2451 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,6 +1,7 @@ // 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" From 711413f6fe2e5a1a5c56e8baf97671241fae12eb Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Fri, 11 Oct 2024 13:07:36 -0700 Subject: [PATCH 5/9] lint --- src/config.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/config.ts b/src/config.ts index f3e2451..6d5801c 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,7 +1,6 @@ // 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" From 6c02f5ca33149f13d3928229fa567f2118fa6bc3 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Fri, 11 Oct 2024 13:12:35 -0700 Subject: [PATCH 6/9] fix lint --- src/components/Navbar.tsx | 2 +- src/svg/MenuSvg.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 2a9cd2d..8fff32b 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,4 +1,4 @@ -import { useCallback, useState } from "react"; +import { useCallback, useState } from 'react'; import { GITHUB_LINK, ONCHAINKIT_LINK, diff --git a/src/svg/MenuSvg.tsx b/src/svg/MenuSvg.tsx index d57326a..47e591f 100644 --- a/src/svg/MenuSvg.tsx +++ b/src/svg/MenuSvg.tsx @@ -7,6 +7,7 @@ export function MenuSvg() { height="16" viewBox="0 0 24 24" > + MenuSvg ); From 6c7210d3e08411552bf4795c80f7c672ee4e2d87 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 14 Oct 2024 08:51:07 -0700 Subject: [PATCH 7/9] simplify wagmi and remove env var --- .env.local.default | 2 - .env.local.example | 3 +- .env.test | 2 - README.md | 5 +-- src/components/OnchainProviders.tsx | 9 +--- src/svg/MenuSvg.tsx | 1 - src/wagmi.ts | 65 +++++++---------------------- 7 files changed, 19 insertions(+), 68 deletions(-) diff --git a/.env.local.default b/.env.local.default index 1817fff..abd488c 100644 --- a/.env.local.default +++ b/.env.local.default @@ -7,5 +7,3 @@ NEXT_PUBLIC_CDP_API_KEY="CDP_API_KEY_1234567890" # ~~~ NEXT_PUBLIC_ENVIRONMENT=localhost -# See https://cloud.walletconnect.com/ -NEXT_PUBLIC_WC_PROJECT_ID="TEST_1234567890" diff --git a/.env.local.example b/.env.local.example index 846e244..74c2034 100644 --- a/.env.local.example +++ b/.env.local.example @@ -1,3 +1,4 @@ +COINBASE_COMMERCE_API_KEY="GET_FROM_COINBASE_COMMERCE_PLATFORM" # ~~~ NEXT_PUBLIC_GOOGLE_ANALYTICS_ID= @@ -7,5 +8,3 @@ NEXT_PUBLIC_CDP_API_KEY="GET_FROM_COINBASE_DEVELOPER_PLATFORM" # ~~~ NEXT_PUBLIC_ENVIRONMENT=localhost -# See https://cloud.walletconnect.com/ -NEXT_PUBLIC_WC_PROJECT_ID="GET_FROM_WALLET_CONNECT" diff --git a/.env.test b/.env.test index 1817fff..abd488c 100644 --- a/.env.test +++ b/.env.test @@ -7,5 +7,3 @@ NEXT_PUBLIC_CDP_API_KEY="CDP_API_KEY_1234567890" # ~~~ NEXT_PUBLIC_ENVIRONMENT=localhost -# See https://cloud.walletconnect.com/ -NEXT_PUBLIC_WC_PROJECT_ID="TEST_1234567890" diff --git a/README.md b/README.md index 3fd9bd3..94b14ff 100644 --- a/README.md +++ b/README.md @@ -19,15 +19,12 @@ To ensure all components work seamlessly, set the following environment variable You can find the API key on the [Coinbase Developer Portal's OnchainKit page](https://portal.cdp.coinbase.com/products/onchainkit). If you don't have an account, you will need to create one. -You can find your Wallet Connector project ID at [Wallet Connect](https://cloud.walletconnect.com). +You can find your Coinbase Commerce API key after creating an account on [Coinbase Commerce](https://beta.commerce.coinbase.com/). ```sh # See https://portal.cdp.coinbase.com/products/onchainkit NEXT_PUBLIC_CDP_API_KEY="GET_FROM_COINBASE_DEVELOPER_PLATFORM" -# See https://cloud.walletconnect.com -NEXT_PUBLIC_WC_PROJECT_ID="GET_FROM_WALLET_CONNECT" - # See https://beta.commerce.coinbase.com/ COINBASE_COMMERCE_API_KEY="GET_FROM_COINBASE_COMMERCE" ``` diff --git a/src/components/OnchainProviders.tsx b/src/components/OnchainProviders.tsx index faff83d..6ee651f 100644 --- a/src/components/OnchainProviders.tsx +++ b/src/components/OnchainProviders.tsx @@ -1,27 +1,22 @@ 'use client'; import { OnchainKitProvider } from '@coinbase/onchainkit'; -import { RainbowKitProvider } from '@rainbow-me/rainbowkit'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import type { ReactNode } from 'react'; import { base } from 'viem/chains'; import { WagmiProvider } from 'wagmi'; import { NEXT_PUBLIC_CDP_API_KEY } from '../config'; -import { useWamigConfig } from '../wagmi'; +import { wagmiConfig } from '../wagmi'; type Props = { children: ReactNode }; const queryClient = new QueryClient(); function OnchainProviders({ children }: Props) { - const wagmiConfig = useWamigConfig(); - return ( - - {children} - + {children} diff --git a/src/svg/MenuSvg.tsx b/src/svg/MenuSvg.tsx index 47e591f..9f4efc0 100644 --- a/src/svg/MenuSvg.tsx +++ b/src/svg/MenuSvg.tsx @@ -1,4 +1,3 @@ - export function MenuSvg() { return ( { - const connectors = connectorsForWallets( - [ - { - groupName: 'Recommended Wallet', - wallets: [coinbaseWallet], - }, - { - groupName: 'Other Wallets', - wallets: [rainbowWallet, metaMaskWallet], - }, - ], - { - appName: 'onchainkit', - projectId, - }, - ); - - const wagmiConfig = createConfig({ - chains: [base, baseSepolia], - // turn off injected provider discovery - multiInjectedProviderDiscovery: false, - connectors, - ssr: true, - transports: { - [base.id]: http(), - [baseSepolia.id]: http(), - }, - }); +import { http, createConfig } from 'wagmi'; +import { base } from 'wagmi/chains'; +import { coinbaseWallet } from 'wagmi/connectors'; - return wagmiConfig; - }, [projectId]); -} +export const wagmiConfig = createConfig({ + chains: [base], + connectors: [ + coinbaseWallet({ + appName: 'onchain-commerce-template', + }), + ], + ssr: true, + transports: { + [base.id]: http(), + }, +}); From 2414aa9145cac9fd35244454bbb5c651d31b9dc0 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 14 Oct 2024 09:01:37 -0700 Subject: [PATCH 8/9] fix lint --- src/components/Navbar.tsx | 4 ++-- src/components/OnchainStore.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 8fff32b..833bfdf 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -12,7 +12,7 @@ import type { NavbarLinkReact } from 'src/types'; function NavbarLink({ link, label }: NavbarLinkReact) { return ( -
  • +
  • -

    • diff --git a/src/components/OnchainStore.tsx b/src/components/OnchainStore.tsx index 397a7af..cc6e581 100644 --- a/src/components/OnchainStore.tsx +++ b/src/components/OnchainStore.tsx @@ -10,7 +10,7 @@ export default function OnchainStore() {
    -
    +
    From 5415687dc751666b4757e5014ceeac4b743e43c9 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 14 Oct 2024 09:02:59 -0700 Subject: [PATCH 9/9] add title --- src/svg/ExternalLinkSvg.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/svg/ExternalLinkSvg.tsx b/src/svg/ExternalLinkSvg.tsx index d4053b2..1e956a2 100644 --- a/src/svg/ExternalLinkSvg.tsx +++ b/src/svg/ExternalLinkSvg.tsx @@ -7,6 +7,7 @@ export function ExternalLinkSvg() { viewBox="0 0 24 24" className="pb-1 md:pb-0" > + ExternalLinkSvg );