From 979b13e9fa0a8b10abd089ed9109178e09f18a9b Mon Sep 17 00:00:00 2001
From: Corban Riley <corbanbrook@gmail.com>
Date: Thu, 25 Apr 2024 11:31:10 -0400
Subject: [PATCH] Removing ethers from react example

---
 examples/react/package.json                |  1 -
 examples/react/src/components/Homepage.tsx | 14 +++++++-------
 pnpm-lock.yaml                             |  7 ++++---
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/examples/react/package.json b/examples/react/package.json
index 79623b19..2958a030 100644
--- a/examples/react/package.json
+++ b/examples/react/package.json
@@ -18,7 +18,6 @@
     "@0xsequence/network": "^1.9.19",
     "@tanstack/react-query": "^5.32.0",
     "@vanilla-extract/css": "^1.14.2",
-    "ethers": "^5.7.2",
     "framer-motion": "^8.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/examples/react/src/components/Homepage.tsx b/examples/react/src/components/Homepage.tsx
index e77c46bb..8a45a9f2 100644
--- a/examples/react/src/components/Homepage.tsx
+++ b/examples/react/src/components/Homepage.tsx
@@ -43,9 +43,9 @@ import { Footer } from './Footer'
 import { messageToSign } from '../constants'
 import { delay, formatAddress, getCheckoutSettings } from '../utils'
 import { abi } from '../constants/nft-abi'
-import { ethers } from 'ethers'
 import { Alert, AlertProps } from './Alert'
 import { ConnectionMode } from '../config'
+import { formatUnits, parseUnits } from 'viem'
 
 // append ?debug to url to enable debug mode
 const searchParams = new URLSearchParams(location.search)
@@ -465,13 +465,13 @@ export const Homepage = () => {
                         <Box alignItems="flex-start" flexDirection="column" fontSize="xsmall">
                           <Box flexDirection="row">
                             <Text>Fee (in {option.token.name}): </Text>{' '}
-                            <Text>{ethers.utils.formatUnits(option.value, option.token.decimals)}</Text>
+                            <Text>{formatUnits(BigInt(option.value), option.token.decimals)}</Text>
                           </Box>
                           <Box flexDirection="row">
                             <Text>Wallet balance for {option.token.name}: </Text>{' '}
                             <Text>
-                              {ethers.utils.formatUnits(
-                                feeOptionBalances.find(b => b.tokenName === option.token.name)?.balance,
+                              {formatUnits(
+                                BigInt(feeOptionBalances.find(b => b.tokenName === option.token.name)?.balance || '0'),
                                 option.token.decimals
                               )}
                             </Text>
@@ -491,12 +491,12 @@ export const Homepage = () => {
 
                       if (selected.token.contractAddress !== undefined) {
                         // check if wallet has enough balance, should be balance > feeOption.value
-                        const balance = ethers.utils.parseUnits(
+                        const balance = parseUnits(
                           feeOptionBalances.find(b => b.tokenName === selected.token.name)?.balance,
                           selected.token.decimals
                         )
-                        const feeOptionValue = ethers.utils.parseUnits(selected.value, selected.token.decimals)
-                        if (balance && balance.lt(feeOptionValue)) {
+                        const feeOptionValue = parseUnits(selected.value, selected.token.decimals)
+                        if (balance && balance < feeOptionValue) {
                           setFeeOptionAlert({
                             title: 'Insufficient balance',
                             description: `You do not have enough balance to pay the fee with ${selected.token.name}, please make sure you have enough balance in your wallet for the selected fee option.`,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 18494671..c3ae2e77 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -119,9 +119,6 @@ importers:
       '@vanilla-extract/css':
         specifier: ^1.14.2
         version: 1.14.2
-      ethers:
-        specifier: ^5.7.2
-        version: 5.7.2
       framer-motion:
         specifier: ^8.5.2
         version: 8.5.2(react-dom@18.2.0)(react@18.2.0)
@@ -4333,6 +4330,7 @@ packages:
     dependencies:
       is-glob: 4.0.3
       micromatch: 4.0.5
+      napi-wasm: 1.1.0
     bundledDependencies:
       - napi-wasm
 
@@ -11445,6 +11443,9 @@ packages:
     hasBin: true
     dev: true
 
+  /napi-wasm@1.1.0:
+    resolution: {integrity: sha512-lHwIAJbmLSjF9VDRm9GoVOy9AGp3aIvkjv+Kvz9h16QR3uSVYH78PNQUnT2U4X53mhlnV2M7wrhibQ3GHicDmg==}
+
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true