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 = () => { Fee (in {option.token.name}): {' '} - {ethers.utils.formatUnits(option.value, option.token.decimals)} + {formatUnits(BigInt(option.value), option.token.decimals)} Wallet balance for {option.token.name}: {' '} - {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 )} @@ -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