fix(unlock-app,unlock-js): post ethers6 migration bug fixes (#14026)

packages/unlock-js/src/Unlock/v10/upgradeLock.js

@@ -6,8 +6,8 @@
  * @param {function} callback invoked with the upgrade transaction hash
  */
 export default async function (lockAddress, lockVersion, callback) {
-  if (typeof lockVersion !== 'number')
-    throw Error('lockVersion should be a number')
+  if (typeof lockVersion !== 'bigint')
+    throw Error('lockVersion should be a bigint')
 
   const unlockContract = await this.getUnlockContract()
 
@@ -25,13 +25,14 @@ export default async function (lockAddress, lockVersion, callback) {
   // Let's now wait for the lock to be upgraded
   const receipt = await this.provider.waitForTransaction(hash)
   const parser = unlockContract.interface
-  const upgradeLockEvent = receipt.logs
-    .map((log) => {
-      if (log.address.toLowerCase() !== unlockContract.address.toLowerCase())
-        return
-      return parser.parseLog(log)
-    })
-    .find(({ fragment }) => fragment && fragment.name === 'LockUpgraded')
+  const unlockAddress = await unlockContract.getAddress()
+  const logs = receipt.logs.map((log) => {
+    if (log.address.toLowerCase() !== unlockAddress.toLowerCase()) return
+    return parser.parseLog(log)
+  })
+  const upgradeLockEvent = logs.find(
+    (event) => event?.fragment && event.fragment.name === 'LockUpgraded'
+  )
 
   if (upgradeLockEvent) {
     return upgradeLockEvent.args.version

packages/unlock-js/src/walletService.ts

@@ -948,7 +948,7 @@ export default class WalletService extends UnlockService {
   async upgradeLock(
     params: {
       lockAddress: string
-      lockVersion: number
+      lockVersion: bigint
     },
     transactionOptions?: TransactionOptions,
     callback?: WalletServiceCallback

packages/unlock-js/src/web3Service.ts

@@ -692,7 +692,7 @@ export default class Web3Service extends UnlockService {
     )
     const totalKeys = await lockContract.totalKeys(owner)
     if (totalKeys > 0) {
-      const id = await lockContract.tokenOfOwnerByIndex(owner, totalKeys - 1)
+      const id = await lockContract.tokenOfOwnerByIndex(owner, totalKeys - 1n)
       return id
     }
     return null

unlock-app/src/components/interface/locks/Manage/elements/TotalBar.tsx

@@ -76,7 +76,7 @@ export const TotalBar = ({ lockAddress, network }: TotalsProps) => {
         <div className="grid w-full grid-cols-1 divide-y md:gap-0 md:grid-cols-3 md:divide-y-0 md:divide-x divide-x-gray-500">
           <div className={wrapperClass}>
             <Detail label="Total members" loading={loading} valueSize="large">
-              {numberOfOwners}
+              {numberOfOwners?.toString()}
             </Detail>
           </div>
           <div className={wrapperClass}>

unlock-app/src/components/interface/locks/Settings/elements/SettingMisc.tsx

@@ -9,8 +9,8 @@ interface SettingMiscProps {
   network: number
   isManager: boolean
   isLoading: boolean
-  publicLockVersion?: number
-  publicLockLatestVersion?: number
+  publicLockVersion?: bigint
+  publicLockLatestVersion?: bigint
 }
 
 const UpgradeCard = ({ isLastVersion }: { isLastVersion: boolean }) => {
@@ -103,7 +103,7 @@ export const SettingMisc = ({
             network={network}
             isManager={isManager}
             disabled={!isManager}
-            version={updatedVersion ?? 0}
+            version={updatedVersion ?? BigInt(0)}
             isLastVersion={isLastVersion}
             onUpdatedVersion={setUpdatedVersion}
           />

unlock-app/src/components/interface/locks/Settings/forms/CancellationForm.tsx

@@ -6,6 +6,7 @@ import { ToastHelper } from '~/components/helpers/toast.helper'
 import { useWeb3Service } from '~/utils/withWeb3Service'
 import { SettingCardDetail } from '../elements/SettingCard'
 import { useAuth } from '~/contexts/AuthenticationContext'
+import { ethers } from 'ethers'
 
 interface CancellationFormProps {
   lockAddress: string
@@ -148,7 +149,8 @@ export const CancellationForm = ({
 
   useEffect(() => {
     const cancelPenalty = refundPenaltyBasisPoints > 0
-    const refundPenaltyPercentage = (refundPenaltyBasisPoints ?? 0) / 100 // convert basis points to percentage
+    const refundPenaltyPercentage =
+      ethers.toNumber(refundPenaltyBasisPoints ?? 0) / 100 // convert basis points to percentage
     setCancelPenalty(cancelPenalty)
 
     setValue(

unlock-app/src/components/interface/locks/Settings/forms/UpdateHooksForm.tsx

@@ -20,7 +20,7 @@ interface UpdateHooksFormProps {
   network: number
   isManager: boolean
   disabled: boolean
-  version?: number
+  version?: bigint
 }
 
 interface FormProps {

unlock-app/src/components/interface/locks/Settings/forms/UpdateTransferFee.tsx

@@ -1,5 +1,6 @@
 import { useMutation, useQuery } from '@tanstack/react-query'
 import { Button, Input, ToggleSwitch } from '@unlock-protocol/ui'
+import { ethers } from 'ethers'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { ToastHelper } from '~/components/helpers/toast.helper'
@@ -71,7 +72,8 @@ export const UpdateTransferFee = ({
     async () => getTransferFeeBasisPoints()
   )
 
-  const transferFeePercentage = (transferFeeBasisPoints ?? 0) / 100
+  const transferFeePercentage =
+    ethers.toNumber(transferFeeBasisPoints ?? 0) / 100
   const isTransferAllowed = transferFeePercentage < 100
 
   useEffect(() => {

unlock-app/src/components/interface/locks/Settings/forms/UpdateVersionForm.tsx

@@ -9,9 +9,9 @@ interface UpdateVersionFormProps {
   network: number
   isManager: boolean
   disabled: boolean
-  version: number
+  version: bigint
   isLastVersion: boolean
-  onUpdatedVersion: (version: number) => void
+  onUpdatedVersion: (version: bigint) => void
 }
 
 const UpgradeHooksAlert = () => {
@@ -37,7 +37,7 @@ export const UpdateVersionForm = ({
   network,
   onUpdatedVersion,
 }: UpdateVersionFormProps) => {
-  const nextVersion = version + 1
+  const nextVersion = version + BigInt(1)
   const { getWalletService } = useAuth()
   const upgradeLockVersion = async () => {
     const walletService = await getWalletService(network)

unlock-app/src/hooks/useCustomHooks.ts

@@ -6,7 +6,7 @@ import { useWeb3Service } from '~/utils/withWeb3Service'
 interface GetHookValuesProps {
   lockAddress: string
   network: number
-  version?: number
+  version?: bigint
 }
 
 export function useCustomHook({

unlock-app/src/utils/theBox.ts

@@ -74,15 +74,12 @@ export const getCrossChainRoutes = async ({
 
       cost: {
         isNative: true,
-        amount: prices
-          .reduce(
-            (acc, current) =>
-              acc.add(
-                ethers.parseUnits(current.amount.toString(), current.decimals)
-              ),
-            BigInt('0')
-          )
-          .toBigInt(),
+        amount: prices.reduce(
+          (acc, current) =>
+            acc +
+            ethers.parseUnits(current.amount.toString(), current.decimals),
+          BigInt('0')
+        ),
       },
 
       signature: encodeURIComponent(