Merge pull request #6 from coinbase/alissa.crane/bun

chore: upgrade onchainkit version

package.json

@@ -17,7 +17,7 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@coinbase/onchainkit": "^0.33.4",
+    "@coinbase/onchainkit": "^0.34.0",
     "next": "^14.2.5",
     "permissionless": "^0.1.26",
     "react": "^18",

src/app/global.css

@@ -51,7 +51,6 @@ a {
 svg {
   display: block;
   overflow: visible;
-  vertical-align: middle;
 }
 
 ul {
@@ -64,22 +63,6 @@ ul {
   z-index: 0;
 }
 
-.ockConnectWallet_Container span {
-  color: #030712;
-}
-
-/* i believe this is necessary because 
-of a div added by rainbowkit provider */
-body > div {
-  height: 100%;
-  max-width: 100vw;
-  box-sizing: border-box;
-}
-
 a {
   text-decoration: none;
 }
-
-.templateSection > div {
-  max-width: 100%;;
-}

src/components/Banner.tsx

@@ -0,0 +1,9 @@
+export function Banner() {
+  return (
+    <div className="fixed top-0 left-0 flex h-14 xs:h-12 w-full flex-wrap items-center justify-center bg-black text-white">
+      <div className="flex h-full flex-wrap items-center justify-center text-center text-sm xs:text-lg">
+        This is a demo site. These products are not for sale.
+      </div>
+    </div>
+  );
+}

src/components/Navbar.tsx

@@ -32,7 +32,7 @@ export default function Navbar() {
   }, []);
 
   return (
-    <header className="-mx-[50vw] fixed top-0 right-1/2 left-1/2 w-screen border-gray-200 border-b bg-white">
+    <header className="-mx-[50vw] fixed top-14 xs:top-12 right-1/2 left-1/2 h-11 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">
@@ -55,7 +55,7 @@ export default function Navbar() {
         </div>
       </div>
       {isMenuOpen && (
-        <div className="md:hidden">
+        <div className="bg-white md:hidden">
           <ul className="space-y-2 px-4 py-2">
             <NavbarLink link={TEMPLATE_LINK} label="FORK THIS TEMPLATE" />
             <NavbarLink link={ONCHAINKIT_LINK} label="ONCHAINKIT" />

src/components/OnchainStore.tsx

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

src/components/OnchainStoreCart.tsx

@@ -33,8 +33,8 @@ export default function OnchainStoreCart() {
       description,
       pricing_type: 'fixed_price',
       local_price: {
-        // NOTE: set to 0 for simulation purposes,
-        // replace with totalSum.toString() in real app
+        // NOTE: The values are set to zero on the template as we're not actually looking to sell anything here.
+        // To test with real values, replace with totalSum.toString() in real app
         amount: '0',
         currency: 'USD',
       },
@@ -58,7 +58,7 @@ export default function OnchainStoreCart() {
                 <PayButton
                   coinbaseBranded={true}
                   text="Pay with Crypto"
-                  // NOTE: comment back in to disable 0 amount in real app
+                  // NOTE: comment back in to disable $0 amount in real app
                   // disabled={!totalSum}
                 />
               </Pay>

src/components/OnchainStoreItem.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import OnchainStoreItem from './OnchainStoreItem';
+
+const mockProduct = {
+  id: '1',
+  name: 'Sample Product',
+  price: 19.99,
+  image: 'https://example.com/image.jpg',
+};
+
+vi.mock('./QuantityInput', () => {
+  return {
+    default: ({ productId }: { productId: string }) => (
+      <input data-testid={`quantity-input-${productId}`} />
+    ),
+  };
+});
+
+vi.mock('next/image', () => {
+  return {
+    default: ({
+      src,
+      alt,
+      width,
+      height,
+    }: {
+      src: string;
+      alt: string;
+      width: number;
+      height: number;
+    }) => <img src={src} alt={alt} width={width} height={height} />,
+  };
+});
+
+describe('OnchainStoreItem', () => {
+  it('should render product information correctly', () => {
+    render(<OnchainStoreItem {...mockProduct} />);
+
+    expect(screen.getByText('Sample Product')).toBeInTheDocument();
+    expect(screen.getByText('19.99 USDC')).toBeInTheDocument();
+    const imageElement = screen.getByAltText('123');
+    expect(imageElement).toBeInTheDocument();
+    expect(imageElement).toHaveAttribute('src', mockProduct.image);
+    expect(imageElement).toHaveAttribute('width', '400');
+    expect(imageElement).toHaveAttribute('height', '400');
+    expect(screen.getByTestId('quantity-input-1')).toBeInTheDocument();
+  });
+});

src/components/OnchainStoreItem.tsx

@@ -4,12 +4,12 @@ import QuantityInput from './QuantityInput';
 
 export default function OnchainStoreItem({ id, name, price, image }: Product) {
   return (
-    <div className="flex flex-col">
+    <div className="mx-auto flex max-w-[300px] flex-col sm:mx-0">
       <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} />
+      <Image src={image} alt="123" width={280} height={280} />
       <QuantityInput productId={id} />
     </div>
   );

src/components/OnchainStoreItems.tsx

@@ -6,7 +6,7 @@ export default function OnchainStoreItems() {
 
   return (
     <div className="scroll mb-16 p-8 md:mb-0">
-      <div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
+      <div className="grid grid-cols-1 gap-10 sm:grid-cols-2">
         {products?.map((item) => (
           <OnchainStoreItem {...item} key={item.id} />
         ))}

src/components/OnchainStoreProvider.tsx

@@ -2,6 +2,9 @@ import { createContext, useContext, useMemo, useState } from 'react';
 import type { ReactNode } from 'react';
 import type { OnchainStoreContextType } from '../types';
 import jacketImage from '../images/jacket.png';
+import airpodsImage from '../images/airpods.png';
+import mugImage from '../images/mug.png';
+import bottleImage from '../images/bottle.png';
 import type { Product } from 'src/types';
 
 const emptyContext = {} as OnchainStoreContextType;
@@ -14,24 +17,24 @@ 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',
+    name: `'DND, I'M BUILDING' AIRPODS`,
     price: 0.01,
-    image: jacketImage,
+    image: airpodsImage,
   },
   {
     id: 'product3',
-    name: 'CAFFEINATED TO BUILD MUG',
+    name: `'CAFFEINATED TO BUILD' MUG`,
     price: 0.02,
-    image: jacketImage,
+    image: mugImage,
   },
   {
     id: 'product4',
-    name: 'OCK BUILDER JACKET',
+    name: `'HYDRATED TO BUILD' BOTTLE`,
     price: 0.01,
-    image: jacketImage,
+    image: bottleImage,
   },
 ];
 

tailwind.config.ts

@@ -6,6 +6,7 @@ const config: Config = {
     container: {
       center: true,
       screens: {
+        xs: '510px',
         sm: '640px',
         md: '768px',
         lg: '1024px',
@@ -62,6 +63,7 @@ const config: Config = {
       },
       fontFamily: {
         mono: ['IBM Plex Mono', 'monospace'],
+        sansMono: ['Noto Sans Mono', 'monospace'],
       },
     },
   },