@hanzo/commerce 7.3.0 → 7.3.2

package/components/checkout/payment-step-form/methods/crypto.tsx

@@ -1,227 +1,227 @@
-'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 Eth from '../crypto-icons/eth'
-import { useCommerce } from '../../../../service/context'
-import type { PaymentMethodComponentProps } from '../../../../types'
-import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
-
-import ContactForm from '../contact-form'
-
-declare global {
-  interface Window{
-    ethereum?: any
-  }
-}
-
-const PayWithCrypto: React.FC<PaymentMethodComponentProps> = observer(({
-  onDone,
-  transactionStatus,
-  setTransactionStatus,
-  storePaymentInfo,
-  contactForm
-}) => {
-  const cmmc = useCommerce()
-
-  const [loadingPrice, setLoadingPrice] = useState(false)
-  //const [selectedToken, setSelectedToken] = useState('eth')
-  const [amount, setAmount] = useState<number>()
-  const [provider, setProvider] = useState<ethers.BrowserProvider>()
-
-  //const selectedToken = 'eth'
-
-  useEffect(() => {
-    setTransactionStatus('unpaid')
-      // responding to changes in user.walletAddress
-    return autorun(() => {
-      const newProvider = new ethers.BrowserProvider(window.ethereum)
-      setProvider(newProvider)
-    })
-  }, [])
-
-  // 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 * cmmc.promoAppliedCartTotal 
-          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)
-  }, [cmmc.promoAppliedCartTotal])
-
-  const sendPayment = async (ether: number) => {
-    contactForm.handleSubmit(async () => {
-      // 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)
-      } catch (err) {
-        toast('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 price = ethers.parseEther(ether.toString())
-        const tx = await signer.sendTransaction({
-          to: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS,
-          value: price
-        })
-        console.log({ ether, addr: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS })
-        console.log('tx', tx)
-        setTransactionStatus('paid')
-        await storePaymentInfo({
-          ether,
-          transactionHash: tx.hash,
-          to: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS,
-          paymentMethod: 'crypto'
-        })
-
-        provider.waitForTransaction(tx.hash)
-          .then(async (receipt) => {
-            console.log(receipt)
-            await storePaymentInfo({
-              ether,
-              addr: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS,
-              receipt,
-              paymentMethod: 'crypto'
-            })
-            sendGAEvent('purchase', {
-              transaction_id: tx.hash,
-              value: price,
-              currency: 'ETH',
-              items: cmmc.cartItems.map((item) => ({
-                item_id: item.sku,
-                item_name: item.title,
-                item_category: item.familyId,
-                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: price,
-              currency: 'ETH',
-            })
-            setTransactionStatus('confirmed')
-          })
-          .catch((error) => {
-            console.error(error)
-            setTransactionStatus('error')
-          })
-      } catch (err) {
-        console.log(err)
-        // :aa TODO string table
-        toast('Not enough funds in your wallet')
-      }
-    })()
-  }
-
-  const nextStep = async () => {
-    await storePaymentInfo({
-      paymentMethod: 'crypto'
-    })
-    onDone()
-  }
-
-  return (
-    <div className='flex flex-col gap-6 mt-6'>
-      <div className='flex flex-col w-full'>
-        <ContactForm form={contactForm}/>
-        <div className='flex gap-2 grid grid-cols-3'>
-          <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 className='col-span-2'>
-            <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>
-        </div>
-        
-        {transactionStatus === 'error' ? (
-          <h4 className='text-destructive'>There was an error while confirming the transaction.</h4>
-        ) : transactionStatus === 'paid' ? (
-          <h4>Waiting for transaction to be confirmed on chain.</h4>
-        ) : transactionStatus === 'confirmed' ? (
-          <h4>Transaction confirmed!</h4>
-        ) : null}
-
-        {transactionStatus === 'unpaid' ? (
-          <Button
-            onClick={() => sendPayment(amount ? amount/(10**18) : 0)}
-            className='mx-auto w-full'
-            disabled={loadingPrice}
-          >
-            Pay
-          </Button>
-        ) : (
-          <Button onClick={nextStep} className='mx-auto w-full'>Continue</Button>
-        )}
-      </div>
-    </div>
-  )
-})
-
-export default PayWithCrypto
+'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 Eth from '../crypto-icons/eth'
+import { useCommerce } from '../../../../service/context'
+import type { PaymentMethodComponentProps } from '../../../../types'
+import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
+
+import ContactForm from '../contact-form'
+
+declare global {
+  interface Window{
+    ethereum?: any
+  }
+}
+
+const PayWithCrypto: React.FC<PaymentMethodComponentProps> = observer(({
+  onDone,
+  transactionStatus,
+  setTransactionStatus,
+  storePaymentInfo,
+  contactForm
+}) => {
+  const cmmc = useCommerce()
+
+  const [loadingPrice, setLoadingPrice] = useState(false)
+  //const [selectedToken, setSelectedToken] = useState('eth')
+  const [amount, setAmount] = useState<number>()
+  const [provider, setProvider] = useState<ethers.BrowserProvider>()
+
+  //const selectedToken = 'eth'
+
+  useEffect(() => {
+    setTransactionStatus('unpaid')
+      // responding to changes in user.walletAddress
+    return autorun(() => {
+      const newProvider = new ethers.BrowserProvider(window.ethereum)
+      setProvider(newProvider)
+    })
+  }, [])
+
+  // 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 * cmmc.promoAppliedCartTotal 
+          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)
+  }, [cmmc.promoAppliedCartTotal])
+
+  const sendPayment = async (ether: number) => {
+    contactForm.handleSubmit(async () => {
+      // 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)
+      } catch (err) {
+        toast('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 price = ethers.parseEther(ether.toString())
+        const tx = await signer.sendTransaction({
+          to: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS,
+          value: price
+        })
+        console.log({ ether, addr: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS })
+        console.log('tx', tx)
+        setTransactionStatus('paid')
+        await storePaymentInfo({
+          ether,
+          transactionHash: tx.hash,
+          to: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS,
+          paymentMethod: 'crypto'
+        })
+
+        provider.waitForTransaction(tx.hash)
+          .then(async (receipt) => {
+            console.log(receipt)
+            await storePaymentInfo({
+              ether,
+              addr: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS,
+              receipt,
+              paymentMethod: 'crypto'
+            })
+            sendGAEvent('purchase', {
+              transaction_id: tx.hash,
+              value: price,
+              currency: 'ETH',
+              items: cmmc.cartItems.map((item) => ({
+                item_id: item.sku,
+                item_name: item.title,
+                item_category: item.familyId,
+                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: price,
+              currency: 'ETH',
+            })
+            setTransactionStatus('confirmed')
+          })
+          .catch((error) => {
+            console.error(error)
+            setTransactionStatus('error')
+          })
+      } catch (err) {
+        console.log(err)
+        // :aa TODO string table
+        toast('Not enough funds in your wallet')
+      }
+    })()
+  }
+
+  const nextStep = async () => {
+    await storePaymentInfo({
+      paymentMethod: 'crypto'
+    })
+    onDone()
+  }
+
+  return (
+    <div className='flex flex-col gap-6 mt-6'>
+      <div className='flex flex-col w-full'>
+        <ContactForm form={contactForm}/>
+        <div className='flex gap-2 grid grid-cols-3'>
+          <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 className='col-span-2'>
+            <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>
+        </div>
+        
+        {transactionStatus === 'error' ? (
+          <h4 className='text-destructive'>There was an error while confirming the transaction.</h4>
+        ) : transactionStatus === 'paid' ? (
+          <h4>Waiting for transaction to be confirmed on chain.</h4>
+        ) : transactionStatus === 'confirmed' ? (
+          <h4>Transaction confirmed!</h4>
+        ) : null}
+
+        {transactionStatus === 'unpaid' ? (
+          <Button
+            onClick={() => sendPayment(amount ? amount/(10**18) : 0)}
+            className='mx-auto w-full'
+            disabled={loadingPrice}
+          >
+            Pay
+          </Button>
+        ) : (
+          <Button onClick={nextStep} className='mx-auto w-full'>Continue</Button>
+        )}
+      </div>
+    </div>
+  )
+})
+
+export default PayWithCrypto

package/components/checkout/payment-step-form/methods/index.ts

@@ -1,23 +1,23 @@
-import type { PaymentMethodDesc } from '../../../../types'
-
-import Card from './card'
-import Crypto from './crypto'
-import BankTransfer from './bank-transfer'
-
-export default [
-  {
-    value: 'card',
-    label: 'Card',
-    Comp: Card
-  },
-  {
-    value: 'crypto',
-    label: 'Wallet',
-    Comp: Crypto
-  },
-  {
-    value: 'bank',
-    label: 'Bank Wire',
-    Comp: BankTransfer
-  },
+import type { PaymentMethodDesc } from '../../../../types'
+
+import Card from './card'
+import Crypto from './crypto'
+import BankTransfer from './bank-transfer'
+
+export default [
+  {
+    value: 'card',
+    label: 'Card',
+    Comp: Card
+  },
+  {
+    value: 'crypto',
+    label: 'Wallet',
+    Comp: Crypto
+  },
+  {
+    value: 'bank',
+    label: 'Bank Wire',
+    Comp: BankTransfer
+  },
 ] satisfies PaymentMethodDesc[]