@hanzo/commerce 4.6.0 → 4.8.0

package/components/checkout-panel/{payment → steps/payment}/index.tsx

@@ -12,21 +12,20 @@ import { useAuth } from '@hanzo/auth/service'
 import PayWithCrypto from './pay-with-crypto'
 import PayWithBankTransfer from './pay-with-bank-transfer'
 import PayWithCard from './pay-with-card'
-import { useCommerce } from '../../../service/context'
-import type { TransactionStatus } from '../../../types'
-import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
+
+import { useCommerce } from '../../../../service/context'
+import type { TransactionStatus } from '../../../../types'
+import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
+
+import type { StepComponentProps } from '../types'
 
 const contactFormSchema = z.object({
   name: z.string().min(1, 'Enter your full name.'),
   email: z.string().email(),
 })
 
-const Payment: React.FC<{
-  setStep: (s: number) => void
-  orderId?: string
-  setOrderId: (orderId?: string) => void
-}> = observer(({
-  setStep,
+const Payment: React.FC<StepComponentProps> = observer(({
+  onDone,
   orderId,
   setOrderId
 }) => {
@@ -51,7 +50,7 @@ const Payment: React.FC<{
 
   const storePaymentInfo = async (paymentInfo: any) => {
     const {name, email} = contactForm.getValues()
-    let id
+    let id: string | undefined = undefined
     if (!orderId) {
       id = await cmmc.createOrder(email, name)
       setOrderId(id)
@@ -81,34 +80,41 @@ const Payment: React.FC<{
     }
   }
 
+  const groupClx = 'grid w-full grid-cols-3 mx-auto ' + 
+    'p-0 h-auto overflow-hidden ' + 
+    'border-2 bg-background border-level-2 md:bg-level-1 md:border-level-3 ' 
+
+  const tabClx = 'whitespace-normal h-full text-xs sm:text-base px-1 text-muted ' + 
+    'data-[state=active]:text-accent data-[state=active]:bg-level-2 md:data-[state=active]:bg-level-3'
+
   return (
-    <Tabs defaultValue='card' className='w-full mx-auto max-w-[50rem]'>
-      <TabsList className='grid w-full grid-cols-3 mx-auto bg-level-2 h-auto'>
+    <Tabs defaultValue='card' className='w-full sm:max-w-[500px] sm:mx-auto'>
+      <TabsList className={groupClx}>
         <TabsTrigger
           value='card'
-          className='whitespace-normal h-full text-sm sm:text-base'
+          className={tabClx}
           disabled={transactionStatus === 'paid' || transactionStatus === 'confirmed'}
         >
-          PAY WITH CARD
+          Card
         </TabsTrigger>
         <TabsTrigger
           value='crypto'
-          className='whitespace-normal h-full text-sm sm:text-base'
+          className={tabClx}
           disabled={transactionStatus === 'paid' || transactionStatus === 'confirmed'}
         >
-          PAY WITH CRYPTO
+          Wallet
         </TabsTrigger>
         <TabsTrigger
           value='bank'
-          className='whitespace-normal h-full text-sm sm:text-base'
+          className={tabClx}
           disabled={transactionStatus === 'paid' || transactionStatus === 'confirmed'}
         >
-          BANK TRANSFER
+          Bank Wire
         </TabsTrigger>
       </TabsList>
       <TabsContent value='card'>
         <PayWithCard
-          setStep={setStep}
+          onDone={onDone}
           transactionStatus={transactionStatus}
           setTransactionStatus={setTransactionStatus}
           storePaymentInfo={storePaymentInfo}
@@ -117,7 +123,7 @@ const Payment: React.FC<{
       </TabsContent>
       <TabsContent value='crypto'>
         <PayWithCrypto
-          setStep={setStep}
+          onDone={onDone}
           transactionStatus={transactionStatus}
           setTransactionStatus={setTransactionStatus}
           storePaymentInfo={storePaymentInfo}
@@ -126,7 +132,7 @@ const Payment: React.FC<{
       </TabsContent>
       <TabsContent value='bank'>
         <PayWithBankTransfer
-          setStep={setStep}
+          onDone={onDone}
           storePaymentInfo={storePaymentInfo}
           contactForm={contactForm}
         />

package/components/checkout-panel/{payment → steps/payment}/pay-with-bank-transfer.tsx

@@ -18,13 +18,13 @@ const InfoField: React.FC<{
 }) => {
   const copyToClipboard = (label: string, text: string) => {
     navigator.clipboard.writeText(text)
-    toast(`${label} copied to clipboard`)
+    toast(`${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'>
+      <div className='flex items-center justify-between sm: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'/>
@@ -35,7 +35,7 @@ const InfoField: React.FC<{
 }
 
 const PayWithBankTransfer: React.FC<{
-  setStep: (step: number) => void
+  onDone: () => void
   storePaymentInfo: (paymentInfo: any) => Promise<void>
   contactForm: UseFormReturn<{
     name: string
@@ -45,24 +45,28 @@ const PayWithBankTransfer: React.FC<{
     email: string
   }>
 }> = ({
-  setStep,
+  onDone,
   storePaymentInfo,
   contactForm
 }) => {
+
   const payByBankTransfer = async () => {
-    contactForm.handleSubmit(async () => {
+    contactForm.handleSubmit( async () => {
       await storePaymentInfo({paymentMethod: 'bank-transfer'})
-      setStep(2)
+      onDone()
     })()
   }
 
+  const groupClx = 'border-2 bg-background border-level-2 md:bg-level-1 md:border-level-3 p-0 h-auto overflow-hidden rounded-md'
+  const tabClx = 'text-muted data-[state=active]:text-accent data-[state=active]:bg-level-2 md:data-[state=active]:bg-level-3'
+
   return (
-    <div className='flex flex-col gap-6 mt-6'>
+    <div className='flex flex-col gap-2 mt-6'>
       <ContactInfo form={contactForm}/>
       <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 className={"grid w-full grid-cols-2 max-w-[15rem] mx-auto " + groupClx}>
+          <TabsTrigger className={tabClx} value="usd">USD</TabsTrigger>
+          <TabsTrigger className={tabClx} value="eur">EUR/GBP</TabsTrigger>
         </TabsList>
         <TabsContent value="usd">
           <div className='flex flex-col gap-4 w-full'>

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

@@ -0,0 +1,246 @@
+'use client'
+import React from 'react'
+
+import type { UseFormReturn } from 'react-hook-form'
+// @ts-ignore
+import { ApplePay, GooglePay, CreditCard, PaymentForm } from 'react-square-web-payments-sdk'
+
+import { ChevronRight } from 'lucide-react'
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  ApplyTypography, 
+  Button, 
+  buttonVariants
+} from '@hanzo/ui/primitives'
+
+import { cn } from '@hanzo/ui/util'
+
+import { processSquareCardPayment } from '../../../../util'
+import { useCommerce } from '../../../../service/context'
+import type { TransactionStatus } from '../../../../types'
+
+import ContactInfo from './contact-info'
+import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
+import PaymentMethods from './cards'
+
+const PayWithCard: React.FC<{
+  onDone: () => void
+  transactionStatus: TransactionStatus
+  setTransactionStatus: (status: TransactionStatus) => void
+  storePaymentInfo: (paymentInfo: any) => Promise<void>
+  contactForm: UseFormReturn<{
+    name: string
+    email: string
+  }, any, {
+    name: string
+    email: string
+  }>
+}> = ({
+  onDone,
+  transactionStatus,
+  setTransactionStatus,
+  storePaymentInfo,
+  contactForm,
+}) => {
+  const cmmc = useCommerce()
+
+  const cardTokenizeResponseReceived = async (
+    token: any,
+    verifiedBuyer: any
+  ) => {
+    contactForm.handleSubmit(async () => {
+      setTransactionStatus('paid')
+      const res = await processSquareCardPayment(token.token, cmmc.cartTotal, verifiedBuyer.token)
+      if (res) {
+        console.log(token)
+        await storePaymentInfo({paymentMethod: token.details.method ?? null, processed: res})
+        setTransactionStatus('confirmed')
+        sendGAEvent('purchase', {
+          transaction_id: res.payment?.id,
+          value: res.payment?.amountMoney?.amount,
+          currency: res.payment?.amountMoney?.currency,
+          items: cmmc.cartItems.map((item) => ({
+            item_id: item.sku,
+            item_name: item.title,
+            item_category: item.categoryId,
+            price: item.price,
+            quantity: item.quantity
+          })),
+        })
+        sendFBEvent('Purchase', {
+          content_ids: cmmc.cartItems.map((item) => item.sku),
+          contents: cmmc.cartItems.map(item => ({
+            id: item.sku,
+            quantity: item.quantity
+          })),
+          num_items: cmmc.cartItems.length,
+          value: cmmc.cartTotal,
+          currency: 'USD',
+        })
+      } else {
+        setTransactionStatus('error')
+      }  
+    })() 
+  }
+
+  const createVerificationDetails = () => {
+    const {name, email} = contactForm.getValues()
+    return {
+      amount: cmmc.cartTotal.toFixed(2),
+      billingContact: {
+        givenName: name,
+        email,
+      },
+      currencyCode: 'USD',
+      intent: 'CHARGE',
+    }
+  }
+
+  const createPaymentRequest= () => ({
+    countryCode: "US",
+    currencyCode: "USD",
+    lineItems: cmmc.cartItems.map(item => ({
+      amount: item.price.toFixed(2),
+      label: item.title,
+      id: item.sku,
+    })),
+    requestBillingContact: false,
+    requestShippingContact: false,
+    total: {
+      amount: cmmc.cartTotal.toFixed(2),
+      label: "Total",
+    },
+  })
+
+  return (
+    <PaymentForm
+      /**
+       * Identifies the calling form with a verified application ID generated from
+       * the Square Application Dashboard.
+       */
+      applicationId={process.env.NEXT_PUBLIC_SQUARE_APPLICATION_ID}
+      /**
+       * Invoked when payment form receives the result of a tokenize generation
+       * request. The result will be a valid credit card or wallet token, or an error.
+       */
+      cardTokenizeResponseReceived={cardTokenizeResponseReceived}
+      /**
+        * This function enable the Strong Customer Authentication (SCA) flow
+        *
+        * We strongly recommend use this function to verify the buyer and reduce
+        * the chance of fraudulent transactions.
+        */
+      createVerificationDetails={createVerificationDetails}
+      /**
+        * This function is required for digital wallets (Apple Pay, Google Pay)
+        */
+      createPaymentRequest={createPaymentRequest}
+      /**
+       * Identifies the location of the merchant that is taking the payment.
+       * Obtained from the Square Application Dashboard - Locations tab.
+       */
+      locationId={process.env.NEXT_PUBLIC_SQUARE_LOCATION_ID}
+    >
+      <ApplyTypography className='flex flex-col mt-6 gap-1'>
+        {transactionStatus === 'paid' ? (
+          <h6 className='mx-auto font-nav'>Processing your payment...</h6>
+        ) : transactionStatus === 'confirmed' ? (
+          <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={onDone}>Continue</Button>
+          </div>
+        ) : (
+          <>
+            <GooglePay/>
+            <ApplePay/>
+            
+            <div className='flex gap-2 whitespace-nowrap items-center my-0.5 sm:my-1 text-xs text-muted'>
+              <hr className='grow border'/><div className='shrink-0 mx-1'>or</div><hr className='grow border'/>
+            </div>
+
+            <Accordion type="single" collapsible className={''}>
+              <AccordionItem value="cart" className='w-full border-b-0 data-[state=open]:border data-[state=open]:px-3 rounded '>
+                <AccordionTrigger className={cn(
+                  buttonVariants({variant: 'outline', size: 'lg'}),
+                  '!no-underline group flex justify-between ',
+                  'bg-transparent hover:bg-transparent border-muted-2 hover:border-muted-2',
+                  'data-[state=open]:border-none data-[state=open]:py-0 px-4 data-[state=open]:px-1'
+                )}>
+                  <div className='font-sans text-base mr-2 text-muted'>CC</div>
+                  <PaymentMethods />
+                  <div>
+                    <ChevronRight className="h-5 w-5 -mr-2 text-muted shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90 hidden group-data-[state=open]:block" />
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent className='data-[state=open]:mb-4 data-[state=open]:mt-1'>
+                  <ContactInfo form={contactForm}/>
+                  {/* Imitates hanzo/ui Button and Input styles, I was unable to render the
+                    hanzo/ui button outright and keeping the submit form functionality*/}
+                  <CreditCard
+                    style={{
+                      '.input-container': {
+                        borderColor: '#404040',
+                        borderRadius: '6px',
+                      },
+                      '.input-container.is-focus': {
+                        borderColor: '#ffffff',
+                      },
+                      '.input-container.is-error': {
+                        borderColor: '#ff1600',
+                      },
+                      '.message-text': {
+                        color: '#999999',
+                      },
+                      '.message-icon': {
+                        color: '#999999',
+                      },
+                      '.message-text.is-error': {
+                        color: '#ff1600',
+                      },
+                      '.message-icon.is-error': {
+                        color: '#ff1600',
+                      },
+                      input: {
+                        backgroundColor: '#1f1f1f',
+                        color: '#FFFFFF',
+                        fontSize: '15px',
+                        fontFamily: 'helvetica neue, sans-serif',
+                      },
+                      'input::placeholder': {
+                        color: '#999999',
+                      },
+                      'input.is-error': {
+                        color: '#ff1600',
+                      },
+                    }}
+                    render={(Button: any) => (
+                      <Button className={cn(
+                        'items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2',
+                        'focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
+                        '!bg-primary !text-primary-fg hover:!bg-primary-hover font-nav whitespace-nowrap not-typography h-10 py-2 px-4',
+                        '!text-sm rounded-md lg:min-w-[220px] sm:min-w-[220px] flex'
+                      )}>
+                        Pay
+                      </Button>
+                    )}
+                  />
+                  {transactionStatus === 'error' && (
+                    <p className='mx-auto text-destructive'>There was an error processing your payment.</p>
+                  )}
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+
+          </>
+        )}
+      </ApplyTypography>
+    </PaymentForm>
+  )
+}
+
+export default PayWithCard

package/components/checkout-panel/{payment → steps/payment}/pay-with-crypto.tsx

@@ -20,12 +20,12 @@ import {
 
 import { useAuth } from '@hanzo/auth/service'
 
-import Eth from '../icons/eth'
-import { useCommerce } from '../../../service/context'
-import type { TransactionStatus } from '../../../types'
+import Eth from '../../icons/eth'
+import { useCommerce } from '../../../../service/context'
+import type { TransactionStatus } from '../../../../types'
 import ContactInfo from './contact-info'
 import type { UseFormReturn } from 'react-hook-form'
-import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
+import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
 
 declare global {
   interface Window{
@@ -34,7 +34,7 @@ declare global {
 }
 
 const PayWithCrypto: React.FC<{
-  setStep: (currentStep: number) => void
+  onDone: () => void
   transactionStatus: TransactionStatus
   setTransactionStatus: (status: TransactionStatus) => void
   storePaymentInfo: (paymentInfo: any) => Promise<void>
@@ -46,7 +46,7 @@ const PayWithCrypto: React.FC<{
     email: string
   }>
 }> = observer(({
-  setStep,
+  onDone,
   transactionStatus,
   setTransactionStatus,
   storePaymentInfo,
@@ -57,7 +57,6 @@ const PayWithCrypto: React.FC<{
   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'
@@ -68,11 +67,6 @@ const PayWithCrypto: React.FC<{
     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))
-        })
-      }
     })
   }, [])
 
@@ -109,11 +103,6 @@ const PayWithCrypto: React.FC<{
         })
         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('Please switch your wallet to the Ethereum network.')
         return
@@ -193,7 +182,7 @@ const PayWithCrypto: React.FC<{
     await storePaymentInfo({
       paymentMethod: 'crypto'
     })
-    setStep(2)
+    onDone()
   }
 
   return (
@@ -225,7 +214,6 @@ const PayWithCrypto: React.FC<{
             </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>

package/components/checkout-panel/{shipping-info.tsx → steps/shipping-info.tsx}

@@ -21,10 +21,12 @@ import {
   SelectValue 
 } from '@hanzo/ui/primitives'
 
-import { useCommerce } from '../..'
+import { useCommerce } from '../../..'
 
-import { countries } from './countries'
-import { sendGAEvent } from '../../util/analytics'
+import countries from '../../../util/countries'
+import { sendGAEvent } from '../../../util/analytics'
+
+import type { StepComponentProps } from './types'
 
 const shippingFormSchema = z.object({
   addressLine1: z.string().min(2, 'Address must be at least 2 characters.'),
@@ -35,12 +37,9 @@ const shippingFormSchema = z.object({
   country: z.string().min(2, 'Country is invalid.'),
 })
 
-const ShippingInfo: React.FC<{
-  orderId?: string,
-  setStep: (currentStep: number) => void
-}> = ({
+const ShippingInfo: React.FC<StepComponentProps> = ({
   orderId,
-  setStep
+  onDone
 }) => { 
   const cmmc = useCommerce()
   
@@ -72,7 +71,7 @@ const ShippingInfo: React.FC<{
       value: cmmc.cartTotal,
       currency: 'USD',
     })
-    setStep(3)
+    onDone()
   }
 
   return (
@@ -84,9 +83,8 @@ const ShippingInfo: React.FC<{
             name='addressLine1'
             render={({ field }) => (
               <FormItem className='space-y-1 w-full'>
-                <FormLabel>Address line 1</FormLabel>
                 <FormControl>
-                  <Input {...field} className='border-muted-4'/>
+                  <Input {...field} className='border-muted-4' placeholder='Address line 1'/>
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -97,9 +95,8 @@ const ShippingInfo: React.FC<{
             name='addressLine2'
             render={({ field }) => (
               <FormItem className='space-y-1 w-full'>
-                <FormLabel>Address line 2 (optional)</FormLabel>
                 <FormControl>
-                  <Input {...field} className='border-muted-4'/>
+                  <Input {...field} className='border-muted-4' placeholder='Address line 2 (optional)'/>
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -111,9 +108,8 @@ const ShippingInfo: React.FC<{
               name='zipCode'
               render={({ field }) => (
                 <FormItem className='space-y-1 w-full'>
-                  <FormLabel>Zip code</FormLabel>
                   <FormControl>
-                    <Input {...field} className='border-muted-4'/>
+                    <Input {...field} className='border-muted-4' placeholder='Zip code'/>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -124,9 +120,8 @@ const ShippingInfo: React.FC<{
               name='city'
               render={({ field }) => (
                 <FormItem className='space-y-1 w-full'>
-                  <FormLabel>City</FormLabel>
                   <FormControl>
-                    <Input {...field} className='border-muted-4'/>
+                    <Input {...field} className='border-muted-4' placeholder='City'/>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -139,9 +134,8 @@ const ShippingInfo: React.FC<{
               name='state'
               render={({ field }) => (
                 <FormItem className='space-y-1 w-full'>
-                  <FormLabel>State (Optional)</FormLabel>
                   <FormControl>
-                    <Input {...field} className='border-muted-4'/>
+                    <Input {...field} className='border-muted-4' placeholder='State (optional)'/>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -152,11 +146,10 @@ const ShippingInfo: React.FC<{
               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 className='bg-level-1 border-muted-4'>
+                        <SelectValue placeholder='Country' />
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>

package/components/checkout-panel/{thank-you.tsx → steps/thank-you.tsx}

@@ -1,8 +1,11 @@
 import React from 'react'
 import Link from 'next/link'
+
 import { ApplyTypography } from '@hanzo/ui/primitives'
 
-const ThankYou: React.FC = () =>  (
+import type { StepComponentProps } from './types'
+
+const ThankYou: React.FC<StepComponentProps> = ({}) =>  (
   <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>

package/components/checkout-panel/steps/types.ts

@@ -0,0 +1,14 @@
+import type { ComponentType } from 'react'
+ 
+export interface StepComponentProps {
+  onDone: () => void
+  orderId: string | undefined
+  setOrderId: (orderId: string | undefined) => void
+}
+
+export interface CheckoutStep {
+  name: string  
+  label?: string 
+  Comp: ComponentType<StepComponentProps>
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "4.6.0",
+  "version": "4.8.0",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -31,14 +31,16 @@
     "./types": "./types/index.ts"
   },
   "dependencies": {
+    "@splinetool/react-spline": "^2.2.6",
+    "@splinetool/runtime": "^1.0.75",
     "ethers": "^6.11.1",
     "next-usequerystate": "^1.17.0",
     "react-square-web-payments-sdk": "^3.2.1",
     "square": "^35.0.0"
   },
   "peerDependencies": {
-    "@hanzo/auth": "^2.3.0",
-    "@hanzo/ui": "^3.0.7",
+    "@hanzo/auth": "^2.3.2",
+    "@hanzo/ui": "^3.0.10",
     "@hookform/resolvers": "^3.3.4",
     "firebase": "^10.8.0",
     "lucide-react": "^0.307.0",