@hanzo/commerce 3.0.0 → 4.0.0

package/components/add-to-cart-widget.tsx

@@ -15,15 +15,16 @@ const AddToCartWidget: React.FC<{
   className?: string
   buttonClx?: string
   isMobile?: boolean
-  wide?: boolean
   size?: ButtonSizes
+  onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
 }> = observer(({
   item,
   ghost=false,
   disabled=false,
   className='',
   buttonClx='',
-  size='xs'
+  size='xs',
+  onQuantityChanged
 }) => {
 
   const iconClx = ghost ? 'h-4 w-4 md:h-3 md:w-3 text-muted-3 hover:text-foreground' : 'h-5 w-7 px-1'
@@ -37,6 +38,22 @@ const AddToCartWidget: React.FC<{
     )
   }
 
+  const inc = () => {
+    const old = item.quantity
+    item.increment()
+    if (onQuantityChanged) {
+      onQuantityChanged(item.sku, old, old + 1) 
+    }
+  }
+
+  const dec = () => {
+    const old = item.quantity
+    item.decrement()
+    if (onQuantityChanged) {
+      onQuantityChanged(item.sku, old, old - 1) 
+    }
+  }
+
   return ( item.isInCart ? (
     <div className={cn('flex flex-row items-stretch justify-center ' + (ghost ? 'bg-transparent  rounded-xl' : 'bg-secondary rounded-xl'), className)}>
       <Button
@@ -46,7 +63,7 @@ const AddToCartWidget: React.FC<{
         rounded={ghost ? 'full' : 'xl'}
         className={cn('px-1 lg:min-w-0 lg:px-2  xs:justify-end', buttonClx)}
         key='left'
-        onClick={item.decrement.bind(item)}
+        onClick={dec}
       >
       {(item.quantity > 1) ? (
         <Icons.minus className={iconClx} aria-hidden='true'/>
@@ -61,7 +78,7 @@ const AddToCartWidget: React.FC<{
         variant={ghost ? 'ghost' : 'secondary'}
         rounded={ghost ? 'full' : 'xl'}
         className={cn('px-1 lg:min-w-0 lg:px-2 xs:justify-start', buttonClx)}
-        onClick={item.increment.bind(item)}
+        onClick={inc}
         key='right'
       >
         <Icons.plus className={iconClx} aria-hidden='true'/>
@@ -74,7 +91,7 @@ const AddToCartWidget: React.FC<{
       variant='secondary'
       rounded='xl'
       className={cn(buttonClx, className)}
-      onClick={item.increment.bind(item)}
+      onClick={inc}
     >
       <Icons.plus className='h-5 w-5 mr-1' aria-hidden='true'/>
       <span className='mr-1'>Add</span>

package/components/buy-item/buy-item-button.tsx

@@ -4,6 +4,8 @@ import React, {type PropsWithChildren} from 'react'
 import { type ButtonVariants, type ButtonSizes, Button } from '@hanzo/ui/primitives'
 
 import BuyItemPopup from './buy-item-popup'
+import BuyItemMobileDrawer from './buy-item-mobile-drawer'
+import { cn } from '@hanzo/ui/util'
 
 const BuyItemButton: React.FC<PropsWithChildren & {
   skuPath: string
@@ -19,10 +21,14 @@ const BuyItemButton: React.FC<PropsWithChildren & {
   children,
   className='',
   popupClx=''
-}) => (
+}) => (<>
   <BuyItemPopup skuPath={skuPath} popupClx={popupClx}>
-    <Button size={size} variant={variant} className={className}>{children}</Button>
+    <Button size={size} variant={variant} className={cn(className, 'hidden md:flex')}>{children}</Button>
   </BuyItemPopup>
+  <BuyItemMobileDrawer skuPath={skuPath} trigger={<Button size={size} variant={variant} className={cn(className, 'md:hidden')}>{children}</Button>} />
+</>
 )
 
+
+
 export default BuyItemButton

package/components/buy-item/buy-item-card.tsx

@@ -14,10 +14,14 @@ import SelectCategoryItemCard from './select-category-item-card'
 
 const BuyItemCard: React.FC<{
   skuPath: string
+  mobile?: boolean
   className?: string
+  onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
 }> = observer(({
   skuPath,
-  className=''
+  mobile=false,
+  className='',
+  onQuantityChanged
 }) => {
 
   const cmmc = useCommerce()
@@ -28,17 +32,17 @@ const BuyItemCard: React.FC<{
 
   useEffect(() => {
 
+    const toks = skuPath.split('-')
+    levelRef.current = toks.length - 1
+    const fsv: FacetsValue = {}
+    for (let level = 1; level <= levelRef.current; level++ ) {
+      fsv[level] = [toks[level]]   
+    } 
     if (facets) {
-      const toks = skuPath.split('-')
-      const levelSpecified = toks.length - 1
-      const fsv: FacetsValue = {}
-      for (let level = 1; level <= levelSpecified; level++ ) {
-        fsv[level] = [toks[level]]   
-      } 
-      fsv[levelSpecified + 1] = [facets[0].value]
-      levelRef.current = levelSpecified
-      cmmc.setFacets(fsv)
+      fsv[levelRef.current + 1] = [facets[0].value]
     }
+    cmmc.setFacets(fsv)
+
     return autorun(() => {
       const cats = cmmc.specifiedCategories
         // Original cat was legit
@@ -55,24 +59,30 @@ const BuyItemCard: React.FC<{
     })
   }, [cat, facets])
 
+  const renderFacetTabs = facets && levelRef.current > 0
+
   return (
     <div className={className} >
-    {facets && levelRef.current > 0 && (
+    {renderFacetTabs && (
       <FacetValuesWidget
-        className={cn('grid gap-0 ' + `grid-cols-${facets.length}` + ' self-start ', 'border-b mb-2 -mr-2 -ml-2')} 
+        className={cn('grid gap-0 ' + `grid-cols-${facets.length}` + ' self-start ', 'border-b-2 border-level-3 mb-2 -mr-2 -ml-2')} 
         isMobile={false}
         mutator={getFacetValuesMutator(levelRef.current + 1, cmmc)} 
         itemClx='flex-col h-auto gap-0 pb-1 pt-3 px-3'
-        buttonClx='h-auto !rounded-bl-none !rounded-br-none !rounded-tl-lg !rounded-tr-lg '
+        buttonClx={'h-full !rounded-bl-none !rounded-br-none !rounded-tl-lg !rounded-tr-lg ' +
+        '!border-r !border-t !border-level-3'}
         facetValues={facets}
       />
     )}
     {cmmc.specifiedCategories[0] && (
       <SelectCategoryItemCard 
         noTitle
+        mobile={mobile}
         category={cmmc.specifiedCategories[0]}
         selectedItemRef={cmmc /* ...conveniently. :) */ }
         selectSku={cmmc.setCurrentItem.bind(cmmc)}
+        className={!renderFacetTabs && mobile ? 'border-t-2 ' : ''}
+        onQuantityChanged={onQuantityChanged}
       />  
     )}
     </div >

package/components/buy-item/buy-item-mobile-drawer.tsx

@@ -0,0 +1,48 @@
+'use client'
+import React, { useState, type ReactNode } from 'react'
+
+import { X as LucideX} from 'lucide-react'
+import { Sheet, SheetContent, SheetTrigger } from '@hanzo/ui/primitives'
+
+import { cn } from '@hanzo/ui/util'
+
+import BuyItemCard from './buy-item-card'
+
+const BuyItemMobileDrawer: React.FC<{
+  skuPath: string
+  trigger: ReactNode
+  triggerClx?: string  
+  drawerClx?: string
+  cardClx?: string
+}> = ({
+  skuPath,
+  trigger,
+  triggerClx='',
+  drawerClx='',
+  cardClx=''
+}) => {
+
+  const [open, setOpen] = useState<boolean>(false)
+
+  const onQuantityChanged = (sku: string, oldV: number, newV: number) => {
+    if (oldV === 0 && newV === 1) {
+      setTimeout(() => {setOpen(false)}, 150)
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen} >
+      <SheetTrigger asChild className={triggerClx}>
+        {trigger}
+      </SheetTrigger>
+      <SheetContent 
+        className={cn('rounded-tl-xl rounded-tr-xl p-0 overflow-hidden border-none', drawerClx)}
+        side="bottom" 
+      >
+        <BuyItemCard skuPath={skuPath} mobile onQuantityChanged={onQuantityChanged} className={cn("w-full relative ", cardClx)}/>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+export default BuyItemMobileDrawer

package/components/buy-item/buy-item-popup.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, {type PropsWithChildren} from 'react'
+import React, {useState, type PropsWithChildren} from 'react'
 
 import { X } from 'lucide-react'
 
@@ -16,23 +16,36 @@ import BuyItemCard from './buy-item-card'
 
 const BuyItemPopup: React.FC<PropsWithChildren & {
   skuPath: string
+  triggerClx?: string  
   popupClx?: string
   cardClx?: string
 }> = ({
   skuPath,
   children,
+  triggerClx='',
   popupClx='',
   cardClx='',
-}) => (
-  <Popover>
-    <PopoverTrigger asChild>
-      {children}
-    </PopoverTrigger>
-    <PopoverContent className={cn('relative flex flex-col p-0 px-4 pb-4 pt-2', popupClx)}>
-      <PopoverClose className='absolute z-20 right-2 top-2 self-end hover:bg-level-3 text-muted hover:text-accent p-1 rounded-full'><X className='w-5 h-5'/></PopoverClose>
-      <BuyItemCard skuPath={skuPath} className={cn("w-full relative ", cardClx)}/>
-    </PopoverContent>
-  </Popover>
-)
+}) => {
+  
+  const [open, setOpen] = useState<boolean>(false)
+
+  const onQuantityChanged = (sku: string, oldV: number, newV: number) => {
+    if (oldV === 0 && newV === 1) {
+      setTimeout(() => {setOpen(false)}, 150)
+    }
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild className={triggerClx}>
+        {children}
+      </PopoverTrigger>
+      <PopoverContent className={cn('relative flex flex-col p-0 px-4 pb-4 pt-2', popupClx)}>
+        <PopoverClose className='absolute z-20 right-2 top-2 self-end hover:bg-level-3 text-muted hover:text-accent p-1 rounded-full'><X className='w-5 h-5'/></PopoverClose>
+        <BuyItemCard skuPath={skuPath} onQuantityChanged={onQuantityChanged} className={cn("w-full relative ", cardClx)}/>
+      </PopoverContent>
+    </Popover>
+  )
+}
 
 export default BuyItemPopup

package/components/buy-item/select-category-item-card.tsx

@@ -16,6 +16,7 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
   isLoading?: boolean
   mobile?: boolean
   noTitle?: boolean
+  onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
 }> = /* NOT observer */({
   category,
   selectedItemRef: selItemRef,
@@ -24,20 +25,25 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
   isLoading = false, 
   mobile = false, 
   noTitle = false,
+  onQuantityChanged,
   ...props
 }) => {
 
   const soleOption = category.products.length === 1
 
-  const SelectProductComp: React.FC<{ className?: string }> = ({ className = '' }) => {
+  const SelectProductComp: React.FC<{ className?: string }> = ({ 
+    className = '' 
+  }) => {
 
+    const mobilePicker = (mobile || category.products.length > 6) 
     if (soleOption) {
       const item = category.products[0] as LineItem
       return (
-        <p >{item.titleAsOption + ', ' + formatPrice(item.price) + (item.quantity > 0 ? `(${item.quantity})` : '')}</p>
+        <div className={cn('flex flex-col justify-center items-center ' + (mobilePicker ? 'h-[180px] ' : 'h-auto min-h-24'), className)}>
+          <p className='text-lg font-semibold'>{item.titleAsOption + ', ' + formatPrice(item.price)}</p>
+        </div>
       )
     }
-    const mobilePicker = (mobile && category.products.length > 6) 
 
     return (
       <div /* id='CV_AVAIL_AMOUNTS' */ className={cn(
@@ -52,7 +58,7 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
             selectSku={selectSku}
             height={180}
             itemHeight={30}
-            outerClx='mb-4'
+            outerClx='w-full'
           />
         ) : (
           <CategoryItemRadioSelector 
@@ -60,6 +66,7 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
             selectedItemRef={selItemRef}  
             selectSku={selectSku}
             groupClx='mt-2'
+            showQuantity={false}
             itemClx='flex flex-row gap-2.5 items-center'
           />
         )}
@@ -70,7 +77,12 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
   const AddToCartComp: React.FC<{ className?: string }> = observer(({ className = '' }) => (
       // TODO disable if nothing selected
     (selItemRef.item && !isLoading) && (
-      <AddToCartWidget size='default' item={selItemRef.item} className={cn('lg:min-w-[160px] lg:mx-auto', className)}/>
+      <AddToCartWidget 
+        size='default' 
+        item={selItemRef.item}
+        onQuantityChanged={onQuantityChanged} 
+        className={cn('lg:min-w-[160px] lg:mx-auto', className)}
+      />
     ) 
   ))
 
@@ -87,15 +99,14 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
   return mobile ? (
     <div /* id='CV_OUTER' */ 
       className={cn(
-        'w-full h-[calc(100svh-96px)] max-h-[700px] flex flex-col justify-between ' + 
-        'items-stretch gap-[4vh] mt-[2vh] pb-[6vh]', 
+        'w-full flex flex-col justify-between items-center gap-5 py-pr-6', 
         className
       )} 
       {...props}
     >
       {!noTitle && (<TitleArea className='grow pt-3 mb-0' />)}
-      <SelectProductComp className='mb-[3vh]' />
-      <AddToCartComp className='w-pr-70 mx-auto' />
+      <SelectProductComp className='w-pr-65' />
+      <AddToCartComp className='w-pr-65' />
     </div>
   ) : (
     <div className={cn('', className)} {...props}>

package/components/cart-panel/index.tsx

@@ -30,7 +30,6 @@ const CartPanel: React.FC<PropsWithChildren & {
     <div className={cn('border p-4 rounded-lg', className)}>
       {children}
       <div className='mt-2 w-full'>
-        {!!children && <div className='h-[1px] w-pr-80 mb-4 mx-auto bg-muted-3'/>}
         {cmmc.cartEmpty ? (
           <p className='text-center mt-4'>No items in cart</p>
         ) : (<>

package/components/category-item-ios-wheel-selector.tsx

@@ -1,6 +1,7 @@
 'use client'
 import React from 'react'
 import Picker from 'react-mobile-picker'
+import { observer } from 'mobx-react-lite'
 
 import type { ItemSelector } from '../types'
 import { formatPrice } from '../util'
@@ -16,7 +17,7 @@ const CategoryItemIOSWheelSelector: React.FC<ItemSelector & {
   itemHeight?: number
   outerClx?: string
   itemClx?: string
-}> = ({
+}> = observer(({
   category,
   selectedItemRef: iRef,
   selectSku,
@@ -28,6 +29,7 @@ const CategoryItemIOSWheelSelector: React.FC<ItemSelector & {
 
     // @ts-ignore
   const onChange = (val, ignore) => {
+    console.log("WHEEL: ", val.item)
     selectSku(val.item)
   }
 
@@ -55,6 +57,6 @@ const CategoryItemIOSWheelSelector: React.FC<ItemSelector & {
       </Picker>
     </div>
   )
-}
+})
 
 export default CategoryItemIOSWheelSelector

package/components/checkout-panel/index.tsx

@@ -32,7 +32,7 @@ const CheckoutPanel: React.FC<{
       setCurrentStep={setCurrentStep}
     />
   ) : (
-    <LoginComponent hideHeader className='max-w-[20rem] mx-auto'/>
+    <LoginComponent hideHeader className='max-w-[20rem] mx-auto' inputClassName='border-muted-4'/>
   )
 
   const step2 = (
@@ -46,27 +46,28 @@ const CheckoutPanel: React.FC<{
   return (
     <div className="fixed top-0 left-0 !max-w-none w-full h-full min-h-screen bg-background z-50">  
       <Toaster/>  
-      <Main className='flex flex-col gap-1 h-full'>
-        <div className='flex justify-between items-center'>
-          <Button
-            variant='ghost'
-            size='icon'
-            onClick={() => {
-              setCurrentStep(0)
-              close()
-            }}
-          >
-            <ChevronLeft/>
-          </Button>
-          <AuthWidget/>
-        </div>    
+      <div className='absolute flex w-full justify-between pt-2 md:pt-5 px-2 md:px-5'>
+        <Button
+          variant='ghost'
+          size='icon'
+          onClick={() => {
+            setCurrentStep(0)
+            close()
+          }}
+          className='w-auto h-auto rounded-full bg-level-1 p-2 md:p-4'
+        >
+          <ChevronLeft className='w-5 h-5'/>
+        </Button>    
+        <AuthWidget/>
+      </div>
 
-        <div className='grid grid-cols-5 justify-center gap-8 h-full'>
-          <div className='col-span-2 hidden md:flex'>
-            <CartPanel noCheckout className='fixed justify-center border-none mt-10 w-1/3 max-w-[40rem]'/>
-          </div>
+      <div className='grid grid-cols-1 md:grid-cols-2 justify-center h-full overflow-y-auto md:overflow-y-hidden'>
+        <div className='flex items-center justify-center py-2'>
+          <CartPanel noCheckout className='border-none mt-10 w-full lg:w-1/2'/>
+        </div>
 
-          <div className='flex flex-col gap-8 sm:gap-14 col-span-5 md:col-span-3 max-w-[30rem] w-full mx-auto overflow-y-auto h-[calc(100%-40px)] sm:h-[calc(100%-48px)] py-4 px-1'>
+        <div className='bg-level-1'>
+          <Main className='flex flex-col h-full md:h-[calc(100vh-48px)] gap-8 sm:gap-14 max-w-[30rem] w-full mx-auto md:overflow-y-auto px-2 pb-6 md:mt-12'>
             <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' : '')}>
                 <div className='relative text-foreground top-4 h-0 whitespace-nowrap'>Payment</div>
@@ -81,9 +82,9 @@ const CheckoutPanel: React.FC<{
               </div>
             </div>
             {steps[currentStep - 1]}
-          </div>
+          </Main>
         </div>
-      </Main>
+      </div>
     </div>
   )
 })

package/components/checkout-panel/payment/contact-info.tsx

@@ -31,7 +31,7 @@ const ContactInfo: React.FC<{
               <FormItem className='space-y-1 w-full'>
                 <FormLabel>Full name</FormLabel>
                 <FormControl>
-                  <Input {...field} />
+                  <Input {...field} className='border-muted-4'/>
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -44,7 +44,7 @@ const ContactInfo: React.FC<{
               <FormItem className='space-y-1 w-full'>
                 <FormLabel>Email</FormLabel>
                 <FormControl>
-                  <Input {...field} />
+                  <Input {...field} className='border-muted-4'/>
                 </FormControl>
                 <FormMessage />
               </FormItem>

package/components/checkout-panel/payment/pay-with-card.tsx

@@ -110,17 +110,15 @@ const PayWithCard: React.FC<{
        */
       locationId={process.env.NEXT_PUBLIC_SQUARE_LOCATION_ID}
     >
-      <div className='flex flex-col gap-2 mt-6'>
-        {transactionStatus === 'confirmed' ? (
-          <ApplyTypography className='flex flex-col gap-4'>
+      <ApplyTypography className='flex flex-col gap-2 mt-6'>
+        {transactionStatus === 'paid' ? (
+          <div className='flex flex-col gap-4'>
             <h5 className='mx-auto font-nav'>Payment confirmed!</h5>
             <p className='mx-auto'>Thank you for your purchase.</p>
             <Button onClick={() => setCurrentStep(2)}>Continue</Button>
-          </ApplyTypography>
-        ) : transactionStatus === 'paid' ? (
-          <ApplyTypography className='flex flex-col gap-4'>
-            <h5 className='mx-auto font-nav'>Processing your payment...</h5>
-          </ApplyTypography>
+          </div>
+        ) : transactionStatus === 'confirmed' ? (
+            <h6 className='mx-auto font-nav'>Processing your payment...</h6>
         ) : (
           <>
             <GooglePay/>
@@ -139,7 +137,7 @@ const PayWithCard: React.FC<{
             <CreditCard
               style={{
                 '.input-container': {
-                  borderColor: '#2D2D2D',
+                  borderColor: '#404040',
                   borderRadius: '6px',
                 },
                 '.input-container.is-focus': {
@@ -161,7 +159,7 @@ const PayWithCard: React.FC<{
                   color: '#ff1600',
                 },
                 input: {
-                  backgroundColor: '#000000',
+                  backgroundColor: '#1f1f1f',
                   color: '#FFFFFF',
                 },
                 'input::placeholder': {
@@ -184,13 +182,11 @@ const PayWithCard: React.FC<{
               }}
             />
             {transactionStatus === 'error' && (
-              <ApplyTypography>
-                <p className='mx-auto text-destructive'>There was an error processing your payment.</p>
-              </ApplyTypography>
+              <p className='mx-auto text-destructive'>There was an error processing your payment.</p>
             )}
           </>
         )}
-      </div>
+      </ApplyTypography>
     </PaymentForm>
   )
 }

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

@@ -1,4 +1,5 @@
 'use client'
+
 import React, { useEffect, useState } from 'react'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react-lite'
@@ -23,7 +24,6 @@ import { Ethereum as EthIconFromAuth }  from '@hanzo/auth/icons'
 import Eth from '../icons/eth'
 import { useCommerce } from '../../../service/context'
 import type { TransactionStatus } from '../../../types'
-import { formatPrice } from '../../../util'
 
 declare global {
   interface Window{
@@ -165,28 +165,34 @@ const PayWithCrypto: React.FC<{
       </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 className='flex flex-col gap-2 w-full'>
+      <div className='flex gap-2 grid grid-cols-3'>
+        <Select onValueChange={(token) => {/*ONLY ETH  setSelectedToken(token) */}} defaultValue='eth'>
+          <SelectTrigger>
+            <SelectValue defaultValue='eth' className='border-muted-4'/>
+          </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 className='col-span-2'>
+          <Input
+            value={amount ? amount/(10**18) : amount}
+            contentEditable={false}
+            className='border-muted-4'
+          />
+          <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>
       </div>
+      <div>Available funds in your wallet: {availableAmount} ETH</div>
+      
       {transactionStatus === 'error' ? (
         <h4 className='text-destructive'>There was an error while confirming the transaction.</h4>
       ) : transactionStatus === 'paid' ? (

package/components/checkout-panel/shipping-info.tsx

@@ -81,7 +81,7 @@ const ShippingInfo: React.FC<{
                 <FormItem className='space-y-1 w-full'>
                   <FormLabel>First name</FormLabel>
                   <FormControl>
-                    <Input {...field} />
+                    <Input {...field} className='border-muted-4'/>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -94,7 +94,7 @@ const ShippingInfo: React.FC<{
                 <FormItem className='space-y-1 w-full'>
                   <FormLabel>Last name</FormLabel>
                   <FormControl>
-                    <Input {...field} />
+                    <Input {...field} className='border-muted-4'/>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -109,7 +109,7 @@ const ShippingInfo: React.FC<{
                 <FormItem className='space-y-1 w-full'>
                   <FormLabel>Address line 1</FormLabel>
                   <FormControl>
-                    <Input {...field} />
+                    <Input {...field} className='border-muted-4'/>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -122,7 +122,7 @@ const ShippingInfo: React.FC<{
                 <FormItem className='space-y-1 w-full'>
                   <FormLabel>Address line 2 (optional)</FormLabel>
                   <FormControl>
-                    <Input {...field} />
+                    <Input {...field} className='border-muted-4'/>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -137,7 +137,7 @@ const ShippingInfo: React.FC<{
                 <FormItem className='space-y-1 w-full'>
                   <FormLabel>Zip code</FormLabel>
                   <FormControl>
-                    <Input {...field} />
+                    <Input {...field} className='border-muted-4'/>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -150,7 +150,7 @@ const ShippingInfo: React.FC<{
                 <FormItem className='space-y-1 w-full'>
                   <FormLabel>City</FormLabel>
                   <FormControl>
-                    <Input {...field} />
+                    <Input {...field} className='border-muted-4'/>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -165,7 +165,7 @@ const ShippingInfo: React.FC<{
                 <FormItem className='space-y-1 w-full'>
                   <FormLabel>State (Optional)</FormLabel>
                   <FormControl>
-                    <Input {...field} />
+                    <Input {...field} className='border-muted-4'/>
                   </FormControl>
                   <FormMessage />
                 </FormItem>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/types/commerce-service.ts

@@ -6,9 +6,9 @@ interface CommerceService extends ObsLineItemRef {
 
     /** Items in cart */
   get cartItems(): LineItem[]
-    /** Total of all quantities of all products in cart */
+    /** Total of all quantities of all items in cart */
   get cartQuantity(): number
-    /** Total of all prices * quantities of products in cart */
+    /** Total of all prices * quantities of items in cart */
   get cartTotal(): number
 
   get cartEmpty(): boolean