@hanzo/commerce 1.1.10 → 1.1.12

package/components/cart.tsx

@@ -1,16 +1,15 @@
 'use client'
-import React, { type PropsWithChildren } from 'react'
-import { useRouter } from 'next/navigation'
+import React, { useState, type PropsWithChildren } from 'react'
 import { observer } from 'mobx-react-lite'
 
 import { Button } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
-import { useAuth } from '@hanzo/auth/service'
 
 import { useCommerce } from '../service/context'
 import { formatPrice } from '../util'
 
 import CartLineItem from './cart-line-item'
+import { Checkout } from '.'
 
 const Cart: React.FC<PropsWithChildren & {
   className?: string
@@ -23,31 +22,29 @@ const Cart: React.FC<PropsWithChildren & {
   isMobile=false,
   hideCheckout=false
 }) => {
+  const [isCheckoutOpen, setIsCheckoutOpen] = useState(false)
   const cmmc = useCommerce()
-  const router = useRouter()
-  const auth = useAuth()
-  
+
   return (
     <div className={cn('border p-4 rounded-lg', className)}>
       {children}
-      <div className='mt-2'>
+      <div className='mt-2 w-full'>
         {!!children && <div className='h-[1px] w-pr-80 mb-4 mx-auto bg-muted-3'/>}
-      {cmmc.cartItems.length === 0 ? (
-        <p className='text-center mt-4'>No items in cart</p>
-      ) : (<>
-        {cmmc.cartItems.map((item, i) => (
-          <CartLineItem isMobile={isMobile} item={item} key={item.sku} className='mb-2 md:mb-3'/>
-        ))}
-        <p className='mt-6 text-right border-t pt-1'>TOTAL: <span className='font-semibold'>{cmmc.cartTotal === 0 ? '0' : formatPrice(cmmc.cartTotal)}</span></p>
-      </>)}
+        {cmmc.cartItems.length === 0 ? (
+          <p className='text-center mt-4'>No items in cart</p>
+        ) : (<>
+          {cmmc.cartItems.map((item, i) => (
+            <CartLineItem isMobile={isMobile} item={item} key={item.sku} className='mb-2 md:mb-3'/>
+          ))}
+          <p className='mt-6 text-right border-t pt-1'>TOTAL: <span className='font-semibold'>{cmmc.cartTotal === 0 ? '0' : formatPrice(cmmc.cartTotal)}</span></p>
+        </>)}
       </div>
-      {cmmc.cartItems.length > 0 && !hideCheckout && (
+      {!hideCheckout && (
         <>
-          {!(auth && auth.loggedIn) ? (
-            <Button size='sm' variant='secondary' rounded='lg' className='mt-12 mx-auto' onClick={() => router.push('/login?redirectUrl=checkout')}>Login to checkout</Button>
-          ) : (
-            <Button size='lg' variant='secondary' rounded='lg' className='mt-12 mx-auto' onClick={() => router.push('/checkout')}>Checkout</Button>
+          {cmmc.cartItems.length > 0 && (
+            <Button size='lg' variant='secondary' rounded='lg' className='mt-12 mx-auto' onClick={() => setIsCheckoutOpen(!isCheckoutOpen)}>Checkout</Button>
           )}
+          {isCheckoutOpen && <Checkout toggleCheckout={() => setIsCheckoutOpen(!isCheckoutOpen)}/>}
         </>
       )}
     </div>

package/components/checkout/confirm-order.tsx

@@ -0,0 +1,142 @@
+'use client'
+
+import { ApplyTypography, Button } from '@hanzo/ui/primitives'
+import { BookUser, Lock, User } from 'lucide-react'
+import { EnhHeadingBlockComponent, type EnhHeadingBlock } from '@hanzo/ui/blocks'
+import type { UseFormReturn } from 'react-hook-form'
+ 
+const ConfirmOrder: React.FC<{
+  paymentForm: UseFormReturn<{
+    name: string;
+    email: string;
+    cardName: string;
+    cardNumber: string;
+    cardExpiryDate: string;
+    cardCvc: string;
+  }, any, {
+    name: string;
+    email: string;
+    cardName: string;
+    cardNumber: string;
+    cardExpiryDate: string;
+    cardCvc: string;
+  }>,
+  shippingForm: UseFormReturn<{
+    firstName: string;
+    lastName: string;
+    addressLine1: string;
+    zipCode: string;
+    city: string;
+    country: string;
+    addressLine2?: string | undefined;
+    state?: string | undefined;
+  }, any, {
+    firstName: string;
+    lastName: string;
+    addressLine1: string;
+    zipCode: string;
+    city: string;
+    country: string;
+    addressLine2?: string | undefined;
+    state?: string | undefined;
+  }>,
+  setStep: (step: number) => void,
+  onPayClick: () => void
+}> = ({
+  paymentForm,
+  shippingForm,
+  setStep,
+  onPayClick
+}) => {
+
+  const paymentFormValues = paymentForm.getValues()
+  const shippingFormValues = shippingForm.getValues()
+  
+  return (
+    <div className='flex flex-col gap-6'>
+      <div className='flex gap-4 items-center'>
+        <User />
+        <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
+          heading: { text: `Contact Details`, level: 4 },
+        } as EnhHeadingBlock}/>
+      </div>
+      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
+        heading: { text: 'Contact name', level: 6 },
+        byline: { text: paymentFormValues.name, level: 0 },
+      } as EnhHeadingBlock}/>
+      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
+        heading: { text: 'Contact email', level: 6 },
+        byline: { text: paymentFormValues.email, level: 0 },
+      } as EnhHeadingBlock}/>
+
+      <div className='flex gap-4 items-center'>
+        <ApplyTypography>
+          <h4 className='flex gap-4 items-center'><Lock /> Payment Info</h4>
+          <p>Guaranteed safe & secure checkout.</p>
+        </ApplyTypography>
+      </div>
+      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
+        heading: { text: 'Name on card', level: 6 },
+        byline: { text: paymentFormValues.cardName, level: 0 },
+      } as EnhHeadingBlock}/>
+      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
+        heading: { text: 'Card number', level: 6 },
+        byline: { text: paymentFormValues.cardNumber, level: 0 },
+      } as EnhHeadingBlock}/>
+      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
+        heading: { text: 'Card expiry date', level: 6 },
+        byline: { text: paymentFormValues.cardExpiryDate, level: 0 },
+      } as EnhHeadingBlock}/>
+      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
+        heading: { text: 'Card CVC', level: 6 },
+        byline: { text: paymentFormValues.cardCvc, level: 0 },
+      } as EnhHeadingBlock}/>
+
+      <div className='flex gap-4 items-center'>
+        <BookUser />
+        <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
+          heading: { text: `Shipping address`, level: 4 },
+        } as EnhHeadingBlock}/>
+      </div>
+      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
+        heading: { text: 'First name', level: 6 },
+        byline: { text: shippingFormValues.firstName, level: 0 },
+      } as EnhHeadingBlock}/>
+      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
+        heading: { text: 'Last name', level: 6 },
+        byline: { text: shippingFormValues.lastName, level: 0 },
+      } as EnhHeadingBlock}/>
+      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
+        heading: { text: 'Address line 1', level: 6 },
+        byline: { text: shippingFormValues.addressLine1, level: 0 },
+      } as EnhHeadingBlock}/>
+      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
+        heading: { text: 'Address line 2 (optional)', level: 6 },
+        byline: { text: shippingFormValues.addressLine2, level: 0 },
+      } as EnhHeadingBlock}/>
+      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
+        heading: { text: 'Zip code', level: 6 },
+        byline: { text: shippingFormValues.zipCode, level: 0 },
+      } as EnhHeadingBlock}/>
+      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
+        heading: { text: 'City', level: 6 },
+        byline: { text: shippingFormValues.city, level: 0 },
+      } as EnhHeadingBlock}/>
+      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
+        heading: { text: 'State (optional)', level: 6 },
+        byline: { text: shippingFormValues.state, level: 0 },
+      } as EnhHeadingBlock}/>
+      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
+        heading: { text: 'Country', level: 6 },
+        byline: { text: shippingFormValues.country, level: 0 },
+      } as EnhHeadingBlock}/>
+
+      <div className='flex justify-between mt-8'>
+        <Button variant='outline' onClick={() => setStep(1)}>Back</Button>
+        <Button onClick={onPayClick}>Pay</Button>
+      </div>
+    </div>
+  )
+}
+
+export default ConfirmOrder

package/components/checkout/contact-info.tsx

@@ -0,0 +1,89 @@
+'use client'
+ 
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@hanzo/ui/primitives/form'
+import { Input, Button } from '@hanzo/ui/primitives'
+import { User } from 'lucide-react'
+import { EnhHeadingBlockComponent, type EnhHeadingBlock } from '@hanzo/ui/blocks'
+import type { UseFormReturn } from 'react-hook-form'
+ 
+const ContactInfo: React.FC<{
+  form: UseFormReturn<{
+    name: string;
+    email: string;
+  }, any, {
+    name: string;
+    email: string;
+  }>,
+  selectPaymentMethod: (method: 'crypto' | 'bank') => Promise<void>,
+}> = ({
+  form,
+  selectPaymentMethod,
+}) => {
+  return (
+    <Form {...form}>
+      <form className='text-left'>
+        <div className='flex flex-col gap-4'>
+          <div className='flex gap-4 items-center'>
+            <User />
+            <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
+              heading: { text: `Contact Info`, level: 4 },
+            } as EnhHeadingBlock}/>
+          </div>
+          <div className='flex flex-col sm:flex-row gap-4'>
+            <FormField
+              control={form.control}
+              name='name'
+              render={({ field }) => (
+                <FormItem className='space-y-1 w-full'>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='email'
+              render={({ field }) => (
+                <FormItem className='space-y-1 w-full'>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <div className='flex flex-col sm:flex-row gap-4 items-center'>
+            <Button
+              type='button'
+              onClick={() => selectPaymentMethod('crypto')}
+              className='mx-auto w-full'
+            >
+              Pay with crypto
+            </Button>
+            <Button
+              type='button'
+              onClick={() => selectPaymentMethod('bank')}
+              className='mx-auto w-full'
+            >
+              Bank transfer
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Form>
+  )
+}
+
+export default ContactInfo

package/components/checkout/countries.ts

@@ -0,0 +1,196 @@
+//https://stefangabos.github.io/world_countries/
+export const countries = [ 
+  {"id":4,"alpha2":"af","alpha3":"afg","name":"Afghanistan"},
+  {"id":8,"alpha2":"al","alpha3":"alb","name":"Albania"},
+  {"id":12,"alpha2":"dz","alpha3":"dza","name":"Algeria"},
+  {"id":20,"alpha2":"ad","alpha3":"and","name":"Andorra"},
+  {"id":24,"alpha2":"ao","alpha3":"ago","name":"Angola"},
+  {"id":28,"alpha2":"ag","alpha3":"atg","name":"Antigua and Barbuda"},
+  {"id":32,"alpha2":"ar","alpha3":"arg","name":"Argentina"},
+  {"id":51,"alpha2":"am","alpha3":"arm","name":"Armenia"},
+  {"id":36,"alpha2":"au","alpha3":"aus","name":"Australia"},
+  {"id":40,"alpha2":"at","alpha3":"aut","name":"Austria"},
+  {"id":31,"alpha2":"az","alpha3":"aze","name":"Azerbaijan"},
+  {"id":44,"alpha2":"bs","alpha3":"bhs","name":"Bahamas"},
+  {"id":48,"alpha2":"bh","alpha3":"bhr","name":"Bahrain"},
+  {"id":50,"alpha2":"bd","alpha3":"bgd","name":"Bangladesh"},
+  {"id":52,"alpha2":"bb","alpha3":"brb","name":"Barbados"},
+  {"id":112,"alpha2":"by","alpha3":"blr","name":"Belarus"},
+  {"id":56,"alpha2":"be","alpha3":"bel","name":"Belgium"},
+  {"id":84,"alpha2":"bz","alpha3":"blz","name":"Belize"},
+  {"id":204,"alpha2":"bj","alpha3":"ben","name":"Benin"},
+  {"id":64,"alpha2":"bt","alpha3":"btn","name":"Bhutan"},
+  {"id":68,"alpha2":"bo","alpha3":"bol","name":"Bolivia"},
+  {"id":70,"alpha2":"ba","alpha3":"bih","name":"Bosnia and Herzegovina"},
+  {"id":72,"alpha2":"bw","alpha3":"bwa","name":"Botswana"},
+  {"id":76,"alpha2":"br","alpha3":"bra","name":"Brazil"},
+  {"id":96,"alpha2":"bn","alpha3":"brn","name":"Brunei Darussalam"},
+  {"id":100,"alpha2":"bg","alpha3":"bgr","name":"Bulgaria"},
+  {"id":854,"alpha2":"bf","alpha3":"bfa","name":"Burkina Faso"},
+  {"id":108,"alpha2":"bi","alpha3":"bdi","name":"Burundi"},
+  {"id":132,"alpha2":"cv","alpha3":"cpv","name":"Cabo Verde"},
+  {"id":116,"alpha2":"kh","alpha3":"khm","name":"Cambodia"},
+  {"id":120,"alpha2":"cm","alpha3":"cmr","name":"Cameroon"},
+  {"id":124,"alpha2":"ca","alpha3":"can","name":"Canada"},
+  {"id":140,"alpha2":"cf","alpha3":"caf","name":"Central African Republic"},
+  {"id":148,"alpha2":"td","alpha3":"tcd","name":"Chad"},
+  {"id":152,"alpha2":"cl","alpha3":"chl","name":"Chile"},
+  {"id":156,"alpha2":"cn","alpha3":"chn","name":"China"},
+  {"id":170,"alpha2":"co","alpha3":"col","name":"Colombia"},
+  {"id":174,"alpha2":"km","alpha3":"com","name":"Comoros"},
+  {"id":178,"alpha2":"cg","alpha3":"cog","name":"Congo"},
+  {"id":188,"alpha2":"cr","alpha3":"cri","name":"Costa Rica"},
+  {"id":384,"alpha2":"ci","alpha3":"civ","name":"Côte d'Ivoire"},
+  {"id":191,"alpha2":"hr","alpha3":"hrv","name":"Croatia"},
+  {"id":192,"alpha2":"cu","alpha3":"cub","name":"Cuba"},
+  {"id":196,"alpha2":"cy","alpha3":"cyp","name":"Cyprus"},
+  {"id":203,"alpha2":"cz","alpha3":"cze","name":"Czechia"},
+  {"id":180,"alpha2":"cd","alpha3":"cod","name":"Democratic Republic of the Congo"},
+  {"id":208,"alpha2":"dk","alpha3":"dnk","name":"Denmark"},
+  {"id":262,"alpha2":"dj","alpha3":"dji","name":"Djibouti"},
+  {"id":212,"alpha2":"dm","alpha3":"dma","name":"Dominica"},
+  {"id":214,"alpha2":"do","alpha3":"dom","name":"Dominican Republic"},
+  {"id":218,"alpha2":"ec","alpha3":"ecu","name":"Ecuador"},
+  {"id":818,"alpha2":"eg","alpha3":"egy","name":"Egypt"},
+  {"id":222,"alpha2":"sv","alpha3":"slv","name":"El Salvador"},
+  {"id":226,"alpha2":"gq","alpha3":"gnq","name":"Equatorial Guinea"},
+  {"id":232,"alpha2":"er","alpha3":"eri","name":"Eritrea"},
+  {"id":233,"alpha2":"ee","alpha3":"est","name":"Estonia"},
+  {"id":748,"alpha2":"sz","alpha3":"swz","name":"Eswatini"},
+  {"id":231,"alpha2":"et","alpha3":"eth","name":"Ethiopia"},
+  {"id":242,"alpha2":"fj","alpha3":"fji","name":"Fiji"},
+  {"id":246,"alpha2":"fi","alpha3":"fin","name":"Finland"},
+  {"id":250,"alpha2":"fr","alpha3":"fra","name":"France"},
+  {"id":266,"alpha2":"ga","alpha3":"gab","name":"Gabon"},
+  {"id":270,"alpha2":"gm","alpha3":"gmb","name":"Gambia"},
+  {"id":268,"alpha2":"ge","alpha3":"geo","name":"Georgia"},
+  {"id":276,"alpha2":"de","alpha3":"deu","name":"Germany"},
+  {"id":288,"alpha2":"gh","alpha3":"gha","name":"Ghana"},
+  {"id":300,"alpha2":"gr","alpha3":"grc","name":"Greece"},
+  {"id":308,"alpha2":"gd","alpha3":"grd","name":"Grenada"},
+  {"id":320,"alpha2":"gt","alpha3":"gtm","name":"Guatemala"},
+  {"id":324,"alpha2":"gn","alpha3":"gin","name":"Guinea"},
+  {"id":624,"alpha2":"gw","alpha3":"gnb","name":"Guinea-Bissau"},
+  {"id":328,"alpha2":"gy","alpha3":"guy","name":"Guyana"},
+  {"id":332,"alpha2":"ht","alpha3":"hti","name":"Haiti"},
+  {"id":340,"alpha2":"hn","alpha3":"hnd","name":"Honduras"},
+  {"id":348,"alpha2":"hu","alpha3":"hun","name":"Hungary"},
+  {"id":352,"alpha2":"is","alpha3":"isl","name":"Iceland"},
+  {"id":356,"alpha2":"in","alpha3":"ind","name":"India"},
+  {"id":360,"alpha2":"id","alpha3":"idn","name":"Indonesia"},
+  {"id":364,"alpha2":"ir","alpha3":"irn","name":"Iran"},
+  {"id":368,"alpha2":"iq","alpha3":"irq","name":"Iraq"},
+  {"id":372,"alpha2":"ie","alpha3":"irl","name":"Ireland"},
+  {"id":376,"alpha2":"il","alpha3":"isr","name":"Israel"},
+  {"id":380,"alpha2":"it","alpha3":"ita","name":"Italy"},
+  {"id":388,"alpha2":"jm","alpha3":"jam","name":"Jamaica"},
+  {"id":392,"alpha2":"jp","alpha3":"jpn","name":"Japan"},
+  {"id":400,"alpha2":"jo","alpha3":"jor","name":"Jordan"},
+  {"id":398,"alpha2":"kz","alpha3":"kaz","name":"Kazakhstan"},
+  {"id":404,"alpha2":"ke","alpha3":"ken","name":"Kenya"},
+  {"id":296,"alpha2":"ki","alpha3":"kir","name":"Kiribati"},
+  {"id":414,"alpha2":"kw","alpha3":"kwt","name":"Kuwait"},
+  {"id":417,"alpha2":"kg","alpha3":"kgz","name":"Kyrgyzstan"},
+  {"id":418,"alpha2":"la","alpha3":"lao","name":"Lao People's Democratic Republic"},
+  {"id":428,"alpha2":"lv","alpha3":"lva","name":"Latvia"},
+  {"id":422,"alpha2":"lb","alpha3":"lbn","name":"Lebanon"},
+  {"id":426,"alpha2":"ls","alpha3":"lso","name":"Lesotho"},
+  {"id":430,"alpha2":"lr","alpha3":"lbr","name":"Liberia"},
+  {"id":434,"alpha2":"ly","alpha3":"lby","name":"Libya"},
+  {"id":438,"alpha2":"li","alpha3":"lie","name":"Liechtenstein"},
+  {"id":440,"alpha2":"lt","alpha3":"ltu","name":"Lithuania"},
+  {"id":442,"alpha2":"lu","alpha3":"lux","name":"Luxembourg"},
+  {"id":450,"alpha2":"mg","alpha3":"mdg","name":"Madagascar"},
+  {"id":454,"alpha2":"mw","alpha3":"mwi","name":"Malawi"},
+  {"id":458,"alpha2":"my","alpha3":"mys","name":"Malaysia"},
+  {"id":462,"alpha2":"mv","alpha3":"mdv","name":"Maldives"},
+  {"id":466,"alpha2":"ml","alpha3":"mli","name":"Mali"},
+  {"id":470,"alpha2":"mt","alpha3":"mlt","name":"Malta"},
+  {"id":584,"alpha2":"mh","alpha3":"mhl","name":"Marshall Islands"},
+  {"id":478,"alpha2":"mr","alpha3":"mrt","name":"Mauritania"},
+  {"id":480,"alpha2":"mu","alpha3":"mus","name":"Mauritius"},
+  {"id":484,"alpha2":"mx","alpha3":"mex","name":"Mexico"},
+  {"id":583,"alpha2":"fm","alpha3":"fsm","name":"Micronesia"},
+  {"id":498,"alpha2":"md","alpha3":"mda","name":"Moldova"},
+  {"id":492,"alpha2":"mc","alpha3":"mco","name":"Monaco"},
+  {"id":496,"alpha2":"mn","alpha3":"mng","name":"Mongolia"},
+  {"id":499,"alpha2":"me","alpha3":"mne","name":"Montenegro"},
+  {"id":504,"alpha2":"ma","alpha3":"mar","name":"Morocco"},
+  {"id":508,"alpha2":"mz","alpha3":"moz","name":"Mozambique"},
+  {"id":104,"alpha2":"mm","alpha3":"mmr","name":"Myanmar"},
+  {"id":516,"alpha2":"na","alpha3":"nam","name":"Namibia"},
+  {"id":520,"alpha2":"nr","alpha3":"nru","name":"Nauru"},
+  {"id":524,"alpha2":"np","alpha3":"npl","name":"Nepal"},
+  {"id":528,"alpha2":"nl","alpha3":"nld","name":"Netherlands"},
+  {"id":554,"alpha2":"nz","alpha3":"nzl","name":"New Zealand"},
+  {"id":558,"alpha2":"ni","alpha3":"nic","name":"Nicaragua"},
+  {"id":562,"alpha2":"ne","alpha3":"ner","name":"Niger"},
+  {"id":566,"alpha2":"ng","alpha3":"nga","name":"Nigeria"},
+  {"id":408,"alpha2":"kp","alpha3":"prk","name":"North Korea"},
+  {"id":807,"alpha2":"mk","alpha3":"mkd","name":"North Macedonia"},
+  {"id":578,"alpha2":"no","alpha3":"nor","name":"Norway"},
+  {"id":512,"alpha2":"om","alpha3":"omn","name":"Oman"},
+  {"id":586,"alpha2":"pk","alpha3":"pak","name":"Pakistan"},
+  {"id":585,"alpha2":"pw","alpha3":"plw","name":"Palau"},
+  {"id":591,"alpha2":"pa","alpha3":"pan","name":"Panama"},
+  {"id":598,"alpha2":"pg","alpha3":"png","name":"Papua New Guinea"},
+  {"id":600,"alpha2":"py","alpha3":"pry","name":"Paraguay"},
+  {"id":604,"alpha2":"pe","alpha3":"per","name":"Peru"},
+  {"id":608,"alpha2":"ph","alpha3":"phl","name":"Philippines"},
+  {"id":616,"alpha2":"pl","alpha3":"pol","name":"Poland"},
+  {"id":620,"alpha2":"pt","alpha3":"prt","name":"Portugal"},
+  {"id":634,"alpha2":"qa","alpha3":"qat","name":"Qatar"},
+  {"id":642,"alpha2":"ro","alpha3":"rou","name":"Romania"},
+  {"id":643,"alpha2":"ru","alpha3":"rus","name":"Russian Federation"},
+  {"id":646,"alpha2":"rw","alpha3":"rwa","name":"Rwanda"},
+  {"id":659,"alpha2":"kn","alpha3":"kna","name":"Saint Kitts and Nevis"},
+  {"id":662,"alpha2":"lc","alpha3":"lca","name":"Saint Lucia"},
+  {"id":670,"alpha2":"vc","alpha3":"vct","name":"Saint Vincent and the Grenadines"},
+  {"id":882,"alpha2":"ws","alpha3":"wsm","name":"Samoa"},
+  {"id":674,"alpha2":"sm","alpha3":"smr","name":"San Marino"},
+  {"id":678,"alpha2":"st","alpha3":"stp","name":"Sao Tome and Principe"},
+  {"id":682,"alpha2":"sa","alpha3":"sau","name":"Saudi Arabia"},
+  {"id":686,"alpha2":"sn","alpha3":"sen","name":"Senegal"},
+  {"id":688,"alpha2":"rs","alpha3":"srb","name":"Serbia"},
+  {"id":690,"alpha2":"sc","alpha3":"syc","name":"Seychelles"},
+  {"id":694,"alpha2":"sl","alpha3":"sle","name":"Sierra Leone"},
+  {"id":702,"alpha2":"sg","alpha3":"sgp","name":"Singapore"},
+  {"id":703,"alpha2":"sk","alpha3":"svk","name":"Slovakia"},
+  {"id":705,"alpha2":"si","alpha3":"svn","name":"Slovenia"},
+  {"id":90,"alpha2":"sb","alpha3":"slb","name":"Solomon Islands"},
+  {"id":706,"alpha2":"so","alpha3":"som","name":"Somalia"},
+  {"id":710,"alpha2":"za","alpha3":"zaf","name":"South Africa"},
+  {"id":410,"alpha2":"kr","alpha3":"kor","name":"South Korea"},
+  {"id":728,"alpha2":"ss","alpha3":"ssd","name":"South Sudan"},
+  {"id":724,"alpha2":"es","alpha3":"esp","name":"Spain"},
+  {"id":144,"alpha2":"lk","alpha3":"lka","name":"Sri Lanka"},
+  {"id":729,"alpha2":"sd","alpha3":"sdn","name":"Sudan"},
+  {"id":740,"alpha2":"sr","alpha3":"sur","name":"Suriname"},
+  {"id":752,"alpha2":"se","alpha3":"swe","name":"Sweden"},
+  {"id":756,"alpha2":"ch","alpha3":"che","name":"Switzerland"},
+  {"id":760,"alpha2":"sy","alpha3":"syr","name":"Syria"},
+  {"id":762,"alpha2":"tj","alpha3":"tjk","name":"Tajikistan"},
+  {"id":834,"alpha2":"tz","alpha3":"tza","name":"Tanzania"},
+  {"id":764,"alpha2":"th","alpha3":"tha","name":"Thailand"},
+  {"id":626,"alpha2":"tl","alpha3":"tls","name":"Timor-Leste"},
+  {"id":768,"alpha2":"tg","alpha3":"tgo","name":"Togo"},
+  {"id":776,"alpha2":"to","alpha3":"ton","name":"Tonga"},
+  {"id":780,"alpha2":"tt","alpha3":"tto","name":"Trinidad and Tobago"},
+  {"id":788,"alpha2":"tn","alpha3":"tun","name":"Tunisia"},
+  {"id":792,"alpha2":"tr","alpha3":"tur","name":"Türkiye"},
+  {"id":795,"alpha2":"tm","alpha3":"tkm","name":"Turkmenistan"},
+  {"id":798,"alpha2":"tv","alpha3":"tuv","name":"Tuvalu"},
+  {"id":800,"alpha2":"ug","alpha3":"uga","name":"Uganda"},
+  {"id":804,"alpha2":"ua","alpha3":"ukr","name":"Ukraine"},
+  {"id":784,"alpha2":"ae","alpha3":"are","name":"United Arab Emirates"},
+  {"id":826,"alpha2":"gb","alpha3":"gbr","name":"United Kingdom"},
+  {"id":840,"alpha2":"us","alpha3":"usa","name":"United States of America"},
+  {"id":858,"alpha2":"uy","alpha3":"ury","name":"Uruguay"},
+  {"id":860,"alpha2":"uz","alpha3":"uzb","name":"Uzbekistan"},
+  {"id":548,"alpha2":"vu","alpha3":"vut","name":"Vanuatu"},
+  {"id":862,"alpha2":"ve","alpha3":"ven","name":"Venezuela"},
+  {"id":704,"alpha2":"vn","alpha3":"vnm","name":"Viet Nam"},
+  {"id":887,"alpha2":"ye","alpha3":"yem","name":"Yemen"},
+  {"id":894,"alpha2":"zm","alpha3":"zmb","name":"Zambia"},
+  {"id":716,"alpha2":"zw","alpha3":"zwe","name":"Zimbabwe"}
+]

package/components/checkout/icons/btc.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Btc: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg viewBox="0.004 0 64 64" {...props}>
+		<path d="M63.04 39.741c-4.274 17.143-21.638 27.575-38.783 23.301C7.12 58.768-3.313 41.404.962 24.262 5.234 7.117 22.597-3.317 39.737.957c17.144 4.274 27.576 21.64 23.302 38.784z" fill="#f7931a"/>
+		<path d="M46.11 27.441c.636-4.258-2.606-6.547-7.039-8.074l1.438-5.768-3.512-.875-1.4 5.616c-.922-.23-1.87-.447-2.812-.662l1.41-5.653-3.509-.875-1.439 5.766c-.764-.174-1.514-.346-2.242-.527l.004-.018-4.842-1.209-.934 3.75s2.605.597 2.55.634c1.422.355 1.68 1.296 1.636 2.042l-1.638 6.571c.098.025.225.061.365.117l-.37-.092-2.297 9.205c-.174.432-.615 1.08-1.609.834.035.051-2.552-.637-2.552-.637l-1.743 4.02 4.57 1.139c.85.213 1.683.436 2.502.646l-1.453 5.835 3.507.875 1.44-5.772c.957.26 1.887.5 2.797.726L27.504 50.8l3.511.875 1.453-5.823c5.987 1.133 10.49.676 12.383-4.738 1.527-4.36-.075-6.875-3.225-8.516 2.294-.531 4.022-2.04 4.483-5.157zM38.087 38.69c-1.086 4.36-8.426 2.004-10.807 1.412l1.928-7.729c2.38.594 10.011 1.77 8.88 6.317zm1.085-11.312c-.99 3.966-7.1 1.951-9.083 1.457l1.748-7.01c1.983.494 8.367 1.416 7.335 5.553z" fill="#ffffff"/>
+	</svg>
+)
+
+export default Btc

package/components/checkout/icons/eth.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Eth: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg viewBox="0 0 32 32" {...props}>
+		<g fill="none" fillRule="evenodd">
+			<circle cx="16" cy="16" r="16" fill="#627EEA"/>
+			<g fill="#FFF" fillRule="nonzero">
+				<path fillOpacity=".602" d="M16.498 4v8.87l7.497 3.35z"/>
+				<path d="M16.498 4L9 16.22l7.498-3.35z"/>
+				<path fillOpacity=".602" d="M16.498 21.968v6.027L24 17.616z"/>
+				<path d="M16.498 27.995v-6.028L9 17.616z"/>
+				<path fillOpacity=".2" d="M16.498 20.573l7.497-4.353-7.497-3.348z"/>
+				<path fillOpacity=".602" d="M9 16.22l7.498 4.353v-7.701z"/>
+			</g>
+		</g>
+	</svg>
+)
+
+export default Eth

package/components/checkout/icons/usdt.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Usdt: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg viewBox="0 0 32 32" {...props}>
+		<g fill="none" fill-rule="evenodd">
+		<circle cx="16" cy="16" r="16" fill="#26A17B"/>
+		<path fill="#FFF" d="M17.922 17.383v-.002c-.11.008-.677.042-1.942.042-1.01 0-1.721-.03-1.971-.042v.003c-3.888-.171-6.79-.848-6.79-1.658 0-.809 2.902-1.486 6.79-1.66v2.644c.254.018.982.061 1.988.061 1.207 0 1.812-.05 1.925-.06v-2.643c3.88.173 6.775.85 6.775 1.658 0 .81-2.895 1.485-6.775 1.657m0-3.59v-2.366h5.414V7.819H8.595v3.608h5.414v2.365c-4.4.202-7.709 1.074-7.709 2.118 0 1.044 3.309 1.915 7.709 2.118v7.582h3.913v-7.584c4.393-.202 7.694-1.073 7.694-2.116 0-1.043-3.301-1.914-7.694-2.117"/>
+		</g>
+	</svg>
+)
+
+export default Usdt

package/components/checkout/index.tsx

@@ -0,0 +1,134 @@
+'use client'
+
+import { useEffect, useState }  from 'react'
+import { ChevronLeft } from 'lucide-react'
+import { observer } from 'mobx-react-lite'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import * as z from 'zod'
+import { useForm } from 'react-hook-form'
+
+import { ApplyTypography, Button, Main, Separator } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+import { useAuth } from '@hanzo/auth/service'
+import { LoginComponent } from '@hanzo/auth/components'
+
+import ShippingInfo from './shipping-info'
+import ThankYou from './thank-you'
+import PayWithCrypto from './pay-with-crypto'
+import PayByBankTransfer from './pay-by-bank-transfer'
+import ContactInfo from './contact-info'
+import { Cart } from '..'
+import { useCommerce } from '../../service/context'
+
+const contactFormSchema = z.object({
+  name: z.string().min(2, 'Name must be at least 2 characters.'),
+  email: z.string().email(),
+})
+
+const Checkout: React.FC<{toggleCheckout: () => void}> = observer(({toggleCheckout}) => {
+  const auth = useAuth()
+  const cmmc = useCommerce()
+  
+  const [currentStep, setCurrentStep] = useState(1)
+  const [paymentMethod, setPaymentMethod] = useState<'crypto' | 'bank' | undefined>()
+  const [orderId, setOrderId] = useState<string>()
+
+  const contactForm = useForm<z.infer<typeof contactFormSchema>>({
+    resolver: zodResolver(contactFormSchema),  
+    defaultValues: {
+      name: auth.user?.displayName ?? '',
+      email: auth.user?.email ?? '',
+    },
+  })
+
+  useEffect(() => {
+    if (auth.loggedIn) {
+      contactForm.setValue('name', auth.user?.displayName ?? '')
+      contactForm.setValue('email', auth.user?.email ?? '')
+    }
+  }, [auth.loggedIn])
+
+  const selectPaymentMethod = async (method: 'crypto' | 'bank') => {
+    contactForm.handleSubmit(async () => {
+      if (auth.user) {
+        if (!!orderId) {
+          await cmmc.updateOrder(orderId, auth.user.email, method)
+        } else {
+          const id = await cmmc.createOrder(auth.user.email, method)
+          setOrderId(id)
+        }
+      }
+      setPaymentMethod(method)
+      setCurrentStep(2)
+    })()    
+  }
+
+
+  const step1 = auth.loggedIn ? (
+    <ContactInfo form={contactForm} selectPaymentMethod={selectPaymentMethod}/>
+  ) : (
+    <LoginComponent hideHeader className='max-w-[20rem] mx-auto'/>
+  )
+
+  const step2 = paymentMethod === 'crypto' ? (
+    <PayWithCrypto setCurrentStep={setCurrentStep}/>
+  ) : (
+    <PayByBankTransfer setCurrentStep={setCurrentStep}/>
+  )
+
+  const step3 = (
+    <ShippingInfo orderId={orderId} paymentMethod={paymentMethod} setCurrentStep={setCurrentStep}/>
+  )
+
+  const step4 = <ThankYou/>
+
+  const steps = [step1, step2, step3, step4]
+
+  return (
+    <div className="fixed top-0 left-0 !max-w-none w-full h-full min-h-screen bg-background z-[51]">        
+      <Main className='grid grid-cols-5 justify-center gap-8 overflow-y-auto h-full'>
+        <Button
+          variant='ghost'
+          size='icon'
+          className='absolute sm:ml-2 sm:mt-2'
+          onClick={() => {
+            setCurrentStep(0)
+            toggleCheckout()
+          }}
+        >
+          <ChevronLeft/>
+        </Button>
+
+        <div className='col-span-2 hidden md:flex'>
+          <Cart hideCheckout className='fixed justify-center border-none mt-10 w-1/3 max-w-[40rem]'/>
+        </div>
+
+        <div className='flex flex-col gap-8 sm:gap-14 col-span-5 md:col-span-3 max-w-[40rem] mx-auto'>
+          <ApplyTypography className='w-full'>
+            <h3 className='!text-center w-1/2 mx-auto sm:w-full sm:mt-5'>FINALIZE PAYMENT</h3>
+          </ApplyTypography>
+          <div className='flex gap-2 mx-auto items-center text-xxs sm:text-base'>
+            <div className={cn('w-6 h-6 rounded-full border border-foreground flex flex-col justify-center items-center', currentStep === 1 ? 'bg-foreground text-muted-4' : '')}>
+              1
+              <div className='relative text-foreground top-2 h-0 whitespace-nowrap'>Contact info</div>
+            </div>
+            <Separator className='w-[4rem] sm:w-[6rem]'/>
+            <div className={cn('w-6 h-6 rounded-full border border-foreground flex flex-col justify-center items-center', currentStep === 2 ? 'bg-foreground text-muted-4' : '')}>
+              2
+              <div className='relative text-foreground top-2 h-0 whitespace-nowrap'>Payment</div>
+            </div>
+            <Separator className='w-[4rem] sm:w-[6rem]'/>
+            <div className={cn('w-6 h-6 rounded-full border border-foreground flex flex-col justify-center items-center', currentStep === 3 ? 'bg-foreground text-muted-4' : '')}>
+              3
+              <div className='relative text-foreground top-2 h-0 whitespace-nowrap'>Shipping info</div>
+            </div>
+          </div>
+          {steps[currentStep - 1]}
+        </div>
+      </Main>
+    </div>
+  )
+})
+
+export default Checkout

package/components/checkout/pay-by-bank-transfer.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { Copy } from 'lucide-react'
+
+import { Button, Tabs, TabsContent, TabsList, TabsTrigger, toast } from '@hanzo/ui/primitives'
+import { EnhHeadingBlockComponent, type EnhHeadingBlock, type Block } from '@hanzo/ui/blocks'
+
+const InfoField: React.FC<{label: string, value: ReactNode, copyValue: string}> = ({label, value, copyValue}) => {
+  const copyToClipboard = (label: string, text: string) => {
+    navigator.clipboard.writeText(text)
+    toast({title: `${label} copied to clipboard`})
+  }
+
+  return (
+    <div className='flex flex-col gap-1'>
+      <p className='text-xs'>{label}</p>
+      <div className='flex items-center justify-between text-lg border rounded-lg py-2 px-4'>
+        {value}
+        <Button variant='ghost' size='icon' onClick={() => copyToClipboard(label, copyValue)}>
+          <Copy className='h-4 w-4'/>
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+const PayByBankTransfer: React.FC<{setCurrentStep: (step: number) => void}> = ({setCurrentStep}) => {
+  return (<>
+    <EnhHeadingBlockComponent 
+      block={{blockType: 'enh-heading',
+        specifiers: 'center byline-center',
+        heading: { text: `WIRE INFO`, level: 3 },
+        byline: { text: 'Click the copy icon to copy text to your clipboard.', level: 6}
+      } satisfies EnhHeadingBlock as Block}
+    />
+    <Tabs defaultValue="usd" className='w-full mx-auto max-w-[50rem]'>
+      <TabsList className="grid w-full grid-cols-2 max-w-[15rem] mx-auto bg-level-2">
+        <TabsTrigger value="usd">USD</TabsTrigger>
+        <TabsTrigger value="eur">EUR/GBP</TabsTrigger>
+      </TabsList>
+      <TabsContent value="usd">
+        <div className='flex flex-col gap-4 w-full'>
+          <InfoField
+            label='Beneficiary Bank'
+            value={<div>Bank of America<br/>NA 222 Broadway<br/>New York, New York. 10038</div>}
+            copyValue='Bank of America, NA 222 Broadway, New York, New York. 10038'
+          />
+          <InfoField
+            label='Beneficiary'
+            value={<div>Hanzo, Inc<br/>4811 Mastin Street<br/>Merriam, KS 66203</div>}
+            copyValue='Hanzo, Inc, 4811 Mastin Street, Merriam, KS 66203'
+          />
+          <InfoField label='Routing Number - ACH' value='113000023 / 111000025' copyValue='113000023 / 111000025'/>
+          <InfoField label='Routing Number - Wire' value='026009593' copyValue='026009593'/>
+          <InfoField label='Routing Number - SWIFT' value='BOFAUS3N' copyValue='BOFAUS3N'/>
+          <InfoField label='Reference' value='Lux' copyValue='Lux'/>
+        </div>
+      </TabsContent>
+      <TabsContent value="eur">
+        <div className='flex flex-col gap-4 w-full'>
+          <InfoField
+            label='Beneficiary Bank'
+            value={<div>Clear Junction Limited<br/>4th floor<br/>Imperial House</div>}
+            copyValue='Clear Junction Limited, 4th floor, Imperial House'
+          />
+          <InfoField label='Account Number (GBP)' value='33781813' copyValue='33781813'/>
+          <InfoField label='Account Name' value='AiDLT Global Ltd.' copyValue='AiDLT Global Ltd.'/>
+          <InfoField label='SWIFT/BIC' value='CLJUGB21' copyValue='CLJUGB21'/>
+          <InfoField label='Sort Code (GBP)' value='041307' copyValue='041307'/>
+          <InfoField label='IBAN' value='GB75 CLJU 0413 0733 78181 3' copyValue='GB75 CLJU 0413 0733 78181 3'/>
+          <InfoField label='Reference' value='Lux' copyValue='Lux'/>
+        </div>
+      </TabsContent>
+    </Tabs>
+    <div className='flex gap-4 items-center mt-6'>
+      <Button variant='outline' onClick={() => setCurrentStep(1)} className='mx-auto w-full'>Back</Button>
+      <Button onClick={() => setCurrentStep(3)} className='mx-auto w-full'>Continue</Button>
+    </div>
+  </>)
+}
+
+export default PayByBankTransfer

package/components/checkout/pay-with-crypto.tsx

@@ -0,0 +1,178 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+
+import { autorun } from 'mobx'
+import { observer } from 'mobx-react-lite'
+
+import { ethers } from 'ethers'
+
+import { 
+  Button, 
+  Input, 
+  Select, 
+  SelectContent, 
+  SelectGroup, 
+  SelectItem, 
+  SelectTrigger, 
+  SelectValue, 
+  toast 
+} from '@hanzo/ui/primitives'
+
+import { useAuth } from '@hanzo/auth/service'
+import { Ethereum as EthIconFromAuth }  from '@hanzo/auth/icons'
+
+import Eth from './icons/eth'
+import Btc from './icons/btc'
+import Usdt from './icons/usdt'
+import { useCommerce } from '../..'
+import { formatPrice } from '../../util'
+
+declare global {
+  interface Window{
+    ethereum?: any
+  }
+}
+
+const PayWithCrypto: React.FC<{
+  setCurrentStep: (currentStep: number) => void
+}> = observer(({
+  setCurrentStep
+}) => {
+
+  const c = useCommerce()
+  const auth = useAuth()
+  const [loadingPrice, setLoadingPrice] = useState(false)
+  //const [selectedToken, setSelectedToken] = useState('eth')
+  const [amount, setAmount] = useState<number>()
+  const [availableAmount, setAvailableAmount] = useState<number>()
+  const [provider, setProvider] = useState<ethers.BrowserProvider>()
+
+  //const selectedToken = 'eth'
+
+  useEffect(() => {
+      // responding to changes in user.walletAddress
+    return autorun(() => {
+      const newProvider = new ethers.BrowserProvider(window.ethereum)
+      setProvider(newProvider)
+      if (auth.user?.walletAddress) {
+        newProvider.getBalance(auth.user?.walletAddress).then((balance: any) => {
+          setAvailableAmount(Number(balance)/(10**18))
+        })
+      }
+    })
+  }, [])
+
+  // Get latest USD -> ETH exchange rate
+  useEffect(() => {
+    const fetchPrice = () => {
+      setLoadingPrice(true)
+      fetch(process.env.NEXT_PUBLIC_ETH_EXCHANGE_RATE_API ?? '')
+        .then(res => res.json())
+        .then((exchangeRate) => {
+          const oneUsdInWei = (10**18) / exchangeRate.data.amount
+          const usdAmountInWei = oneUsdInWei * c.cartTotal 
+          setAmount(usdAmountInWei)
+          setLoadingPrice(false)
+        })
+    }
+
+    // Call immediately on load
+    fetchPrice()
+
+    // Then set interval to call every 30 seconds
+    const interval = setInterval(fetchPrice, 30000)
+
+    return () => clearInterval(interval)
+  }, [c.cartTotal])
+
+  const sendPayment = async (ether: number) => {
+    // Check that we are on ethereum network
+    try {
+      await window.ethereum.request({
+        method: 'wallet_switchEthereumChain',
+        params: [{ chainId: "0x1"}],
+      })
+      const newProvider = new ethers.BrowserProvider(window.ethereum)
+      setProvider(newProvider)
+      if (auth.user?.walletAddress) {
+        newProvider.getBalance(auth.user?.walletAddress).then((balance: any) => {
+          setAvailableAmount(Number(balance)/(10**18))
+        })
+      }
+    } catch (err) {
+      toast({title: 'Please switch your wallet to the Ethereum network.'})
+      return
+    }
+
+    try {
+      if (!provider) {
+        // :aa TODO string table
+        throw new Error('No crypto wallet found. Please install it.')
+      }
+  
+      await window.ethereum.send('eth_requestAccounts')
+
+      const signer = await provider.getSigner()
+      ethers.getAddress(process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS ?? '')
+      const tx = await signer.sendTransaction({
+        to: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS,
+        value: ethers.parseEther(ether.toString())
+      })
+      console.log({ ether, addr: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS })
+      console.log('tx', tx)
+      setCurrentStep(3)
+    } catch (err) {
+      console.log(err)
+      // :aa TODO string table
+      toast({title: 'Not enough funds in your wallet'})
+    }
+  }
+
+  const payWidget = !!!(auth.user?.walletAddress) ? (
+    <div className='w-full mx-auto max-w-[20rem]'>
+      <Button variant='outline' className='w-full flex items-center gap-2' onClick={auth.associateWallet.bind(auth)}>
+        <EthIconFromAuth height={20}/>Connect your wallet
+      </Button>
+    </div>
+  ) : (
+    <div className='flex flex-col gap-2 w-full mx-auto max-w-[20rem]'>
+      <div>Cart value: {formatPrice(c.cartTotal)}</div>
+      <Select onValueChange={(token) => {/*ONLY ETH  setSelectedToken(token) */}} defaultValue='eth'>
+        <SelectTrigger>
+          <SelectValue defaultValue='eth' />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem value='eth'><div className='flex items-center gap-2'><Eth height={14}/>ETH</div></SelectItem>
+            {/* <SelectItem value='btc' ><div className='flex items-center gap-2'><Btc height={14}/>BTC</div></SelectItem>
+            <SelectItem value='usdt' ><div className='flex items-center gap-2'><Usdt height={14}/>USDT</div></SelectItem> */}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <div>Available funds in your wallet: {availableAmount} ETH</div>
+      <div>
+        <Input value={amount ? amount/(10**18) : amount} contentEditable={false}/>
+        <div className='relative flex items-center gap-2 -top-[32px] justify-end px-2 py-1 rounded-lg bg-muted-4 w-fit text-xs float-right mr-3'><Eth height={10}/>ETH</div>
+      </div>
+      <Button
+        onClick={() => sendPayment(amount ? amount/(10**18) : 0)}
+        disabled={!amount || loadingPrice}
+      >
+        Pay now
+      </Button>
+    </div>
+  )
+
+  return (
+    <div className='flex flex-col gap-6'>
+      {payWidget}
+      <div className='flex gap-4 items-center mt-6'>
+        <Button variant='outline' onClick={() => setCurrentStep(1)} className='mx-auto w-full'>Back</Button>
+        <Button onClick={() => setCurrentStep(3)} className='mx-auto w-full'>Continue (Pay later)</Button>
+      </div>
+    </div>
+  )
+})
+
+export default PayWithCrypto

package/components/checkout/shipping-info.tsx

@@ -0,0 +1,208 @@
+'use client'
+ 
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@hanzo/ui/primitives/form'
+import { Input, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@hanzo/ui/primitives'
+import { BookUser } from 'lucide-react'
+import { EnhHeadingBlockComponent, type EnhHeadingBlock } from '@hanzo/ui/blocks'
+import { useAuth } from '@hanzo/auth/service'
+import * as z from 'zod'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useCommerce } from '../..'
+import { countries } from './countries'
+
+const shippingFormSchema = z.object({
+  firstName: z.string().min(2, 'First name must be at least 2 characters.'),
+  lastName: z.string().min(2, 'Last name must be at least 2 characters.'),
+  addressLine1: z.string().min(2, 'Address must be at least 2 characters.'),
+  addressLine2: z.string().optional(),
+  zipCode: z.string().min(2, 'Zip code is invalid.'),
+  city: z.string().min(2, 'City is invalid.'),
+  state: z.string().optional(),
+  country: z.string().min(2, 'Country is invalid.'),
+})
+
+const ShippingInfo: React.FC<{
+  orderId?: string,
+  paymentMethod?: string,
+  setCurrentStep: (currentStep: number) => void
+}> = ({
+  orderId,
+  paymentMethod,
+  setCurrentStep
+}) => { 
+  const auth = useAuth()
+  const cmmc = useCommerce()
+  
+  const shippingForm = useForm<z.infer<typeof shippingFormSchema>>({
+    resolver: zodResolver(shippingFormSchema),
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+      addressLine1: '',
+      addressLine2: '',
+      zipCode: '',
+      city: '',
+      state: '',
+      country: '',
+    },
+  })
+
+  const onSubmit = async (values: z.infer<typeof shippingFormSchema>) => {
+    if (auth.user && orderId && paymentMethod) {
+      await cmmc.updateOrder(orderId, auth.user.email, paymentMethod, values)
+    }
+    setCurrentStep(4)
+  }
+
+  return (
+    <Form {...shippingForm}>
+      <form onSubmit={shippingForm.handleSubmit(onSubmit)} className='text-left'>
+        <div className='flex flex-col gap-4'>
+          <div className='flex gap-4 items-center'>
+            <BookUser />
+            <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
+              heading: { text: `Shipping address`, level: 4 },
+            } as EnhHeadingBlock}/>
+          </div>
+          <div className='flex gap-4 items-end'>
+            <FormField
+              control={shippingForm.control}
+              name='firstName'
+              render={({ field }) => (
+                <FormItem className='space-y-1 w-full'>
+                  <FormLabel>First name</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={shippingForm.control}
+              name='lastName'
+              render={({ field }) => (
+                <FormItem className='space-y-1 w-full'>
+                  <FormLabel>Last name</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <div className='flex gap-4 items-end'>
+            <FormField
+              control={shippingForm.control}
+              name='addressLine1'
+              render={({ field }) => (
+                <FormItem className='space-y-1 w-full'>
+                  <FormLabel>Address line 1</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={shippingForm.control}
+              name='addressLine2'
+              render={({ field }) => (
+                <FormItem className='space-y-1 w-full'>
+                  <FormLabel>Address line 2 (optional)</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <div className='flex gap-4 items-end'>
+            <FormField
+              control={shippingForm.control}
+              name='zipCode'
+              render={({ field }) => (
+                <FormItem className='space-y-1 w-full'>
+                  <FormLabel>Zip code</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={shippingForm.control}
+              name='city'
+              render={({ field }) => (
+                <FormItem className='space-y-1 w-full'>
+                  <FormLabel>City</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <div className='flex gap-4 items-start'>
+            <FormField
+              control={shippingForm.control}
+              name='state'
+              render={({ field }) => (
+                <FormItem className='space-y-1 w-full'>
+                  <FormLabel>State (Optional)</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={shippingForm.control}
+              name='country'
+              render={({ field }) => (
+                <FormItem className='space-y-1 w-full'>
+                  <FormLabel>Country</FormLabel>
+                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder='Select a country' />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {countries.map((country) => (
+                        <SelectItem key={country.id} value={country.name}>
+                          {country.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormItem>
+              )}
+            />
+          </div>
+        </div>
+
+        <div className='flex gap-4 items-center mt-6'>
+          <Button variant='outline' onClick={() => setCurrentStep(2)} className='mx-auto w-full'>Back</Button>
+          <Button type='submit' className='mx-auto w-full'>Confirm order</Button>
+        </div>
+      </form>
+    </Form>
+  )
+}
+
+export default ShippingInfo

package/components/checkout/thank-you.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import Link from 'next/link'
+import { ApplyTypography } from '@hanzo/ui/primitives'
+
+const ThankYou: React.FC = () =>  (
+  <ApplyTypography className='flex flex-col gap-4 text-center mt-10'>
+    <h3>Thank you for your order!</h3>
+    <h6>Once your payment has been confirmed we will send additional information to your email.</h6>
+    <p>
+      While you wait, we cordially invite you to join the <Link href='https://warpcast.com/~/channel/lux'>Lux Channel</Link> on <Link href='https://warpcast.com/~/invite-page/227706?id=fbc9ca91'>Warpcast</Link>.
+    </p>
+  </ApplyTypography>
+)
+
+export default ThankYou

package/components/index.ts

@@ -8,4 +8,5 @@ export { default as ProductSelectionMobilePicker } from './product-selection-mob
 export { default as ProductSelectionRadioGroup } from './product-selection-radio-group'
 export { default as SelectCategoryAndItemWidget } from './select-category-and-item-widget'
 export { default as SelectItemInCategoryView } from './select-item-in-category-view'
+export { default as Checkout } from './checkout'
 export { Icons } from './Icons'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "1.1.10",
+  "version": "1.1.12",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -27,10 +27,13 @@
     "clean": "rm -rf dist && rm -rf node_modules"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.3.2",
+    "@hookform/resolvers": "^3.3.4",
+    "ethers": "^6.11.1",
     "lucide-react": "^0.307.0",
     "next-usequerystate": "^1.17.0",
-    "react-mobile-picker": "^1.0.0"
+    "react-hook-form": "7.50.1",
+    "react-mobile-picker": "^1.0.0",
+    "zod": "3.21.4"
   },
   "peerDependencies": {
     "@hanzo/auth": "^1.0.12",