Thirdweb V5 Migration : Lock (#312)

* Started upgrading citizen profile to thirdweb v5 * Updated privy and safe deps * Upgraded safe * Upgraded privy provider * Configured PrivyWeb3Button to work with both thirdweb v4 & v5 * Migrated citizen profile to thirdweb v5 * Upgraded privy provider * Configured providers and hooks for thirdweb v5 * Migrated team and project profiles to thirdweb v5" * Migrated jobs page to thirdweb v5 * Migrated marketplace page to thirdweb v5 * Cleanup and finished migrating citizen profile to thirdweb v5 * Cleanup and finished migrating team profile to thirdweb v5 * Cleanup and finished migrating project profile to thirdweb v5 * Removed unused file * Adjusted requiredChain check * Relocated account check * Migrated tests to thirdweb v5 * Migrated citizen and team onboarding to thirdweb v5 * Adjusted abis * Adjusted abi * Added thirdwebV5 support for network selector * Migrated lock to thirdweb v5 * Removed log
Official-MoonDao · Jan 15, 2025 · c531e33 · c531e33
1 parent ab239f0
commit c531e33
Show file tree

Hide file tree

Showing 20 changed files with 1,569 additions and 1,332 deletions.
diff --git a/ui/archive/get-mooney/OnboardingStageManager.tsx b/ui/archive/get-mooney/OnboardingStageManager.tsx
@@ -47,11 +47,11 @@ export function OnboardingStageManager({ usdQuotes }: any) {
 
   const { contract: mooneyContract } = useContract(
     MOONEY_ADDRESSES[selectedChain.slug],
-    ERC20.abi
+    ERC20
   )
   const { contract: vMooneyContract } = useContract(
     VMOONEY_ADDRESSES[selectedChain.slug],
-    VotingEscrow.abi
+    VotingEscrow
   )
 
   const totalMooneyBalance = useTotalMooneyBalance(address)

diff --git a/ui/components/lock/LockData.tsx b/ui/components/lock/LockData.tsx
@@ -3,13 +3,13 @@ import {
   LockClosedIcon,
   MoonIcon,
 } from '@heroicons/react/24/outline'
-import { ethers } from 'ethers'
+import { BigNumber, ethers } from 'ethers'
 import useTranslation from 'next-translate/useTranslation'
 import { bigNumberToDate, dateToReadable } from '../../lib/utils/dates'
 import Balance from '../Balance'
 
 type LockDataProps = {
-  hasLock: boolean
+  hasLock: boolean | undefined
   VMOONEYBalance: any
   VMOONEYBalanceLoading: boolean
   VMOONEYLock: any
@@ -22,10 +22,14 @@ export function LockData({
   VMOONEYBalanceLoading,
   VMOONEYLock,
   VMOONEYLockLoading,
-}: any) {
+}: LockDataProps) {
   const { t } = useTranslation('common')
+
   return (
-    <section id="lock-data" className="mt-6 xl:mt-6 xl:w-3/4 bg-dark-cool rounded-[20px] overflow-hidden">
+    <section
+      id="lock-data"
+      className="mt-6 xl:mt-6 xl:w-3/4 bg-dark-cool rounded-[20px] overflow-hidden"
+    >
       {/*Lock Data*/}
       {hasLock && (
         <>
@@ -43,7 +47,9 @@ export function LockData({
                   loading={VMOONEYBalanceLoading}
                   decimals={
                     VMOONEYBalance &&
-                    VMOONEYBalance?.gt(ethers.utils.parseEther('1'))
+                    BigNumber.from(VMOONEYBalance)?.gt(
+                      ethers.utils.parseEther('1')
+                    )
                       ? 2
                       : 8
                   }
@@ -59,7 +65,7 @@ export function LockData({
               <div className="stat-value text-secondary">
                 <Balance
                   id="lock-data-locked-mooney"
-                  balance={VMOONEYLock && VMOONEYLock[0]}
+                  balance={VMOONEYLock && BigNumber.from(VMOONEYLock[0])}
                   loading={VMOONEYLockLoading}
                   decimals={2}
                 />

diff --git a/ui/components/privy/PrivyConnectWallet.tsx b/ui/components/privy/PrivyConnectWallet.tsx
@@ -265,22 +265,22 @@ export function PrivyConnectWallet({
 
   const { contract: mooneyContract } = useContract(
     MOONEY_ADDRESSES[selectedChain.slug],
-    ERC20.abi
+    ERC20
   )
 
   const { contract: daiContract } = useContract(
     DAI_ADDRESSES[selectedChain.slug],
-    ERC20.abi
+    ERC20
   )
 
   const { contract: usdcContract } = useContract(
     USDC_ADDRESSES[selectedChain.slug],
-    ERC20.abi
+    ERC20
   )
 
   const { contract: usdtContract } = useContract(
     USDT_ADDRESSES[selectedChain.slug],
-    ERC20.abi
+    ERC20
   )
 
   const nativeBalance = useNativeBalance()

diff --git a/ui/components/thirdweb/AllowanceWarning.tsx b/ui/components/thirdweb/AllowanceWarning.tsx
@@ -1,28 +1,21 @@
 import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
-import { useAddress } from '@thirdweb-dev/react'
-import { BigNumber } from 'ethers'
 import useTranslation from 'next-translate/useTranslation'
-import { useTokenAllowance, useTokenApproval } from '../../lib/tokens/approve'
+import toast from 'react-hot-toast'
+import { useActiveAccount } from 'thirdweb/react'
+import { revokeAllowance } from '../../lib/tokens/approve'
 
 interface AllowanceWarningProps {
   tokenContract: any
+  tokenAllowance: number | undefined
   spender: string
 }
 
 export const AllowanceWarning = ({
   tokenContract,
+  tokenAllowance,
   spender,
 }: AllowanceWarningProps) => {
-  const address = useAddress()
-  const { data: tokenAllowance, isLoading: tokenAllowanceLoading } =
-    useTokenAllowance(tokenContract, address, spender)
-
-  const { mutateAsync: revokeAllowance } = useTokenApproval(
-    tokenContract,
-    BigNumber.from('0'),
-    undefined,
-    spender
-  )
+  const account = useActiveAccount()
 
   const { t } = useTranslation('common')
 
@@ -35,11 +28,23 @@ export const AllowanceWarning = ({
       <p className="md:mt-1 text-xs text-center block xl:text-left xl:ml-5 dark:text-white text-slate-900">
         {t('safetyNote')}
       </p>
-      {!tokenAllowanceLoading && tokenAllowance > 0 && (
+      {tokenAllowance && tokenAllowance > 0 && (
         <div className="mt-3 xl:mt-0 xl:ml-3">
           <button
             className=" px-2 py-1 xl:w-[160px] border bg-moon-orange text-white transition-all duration-150 hover:scale-105 font-semibold rounded"
-            onClick={() => revokeAllowance()}
+            onClick={async () => {
+              try {
+                if (!account) throw new Error('No account found')
+                const receipt = await revokeAllowance({
+                  account,
+                  tokenContract,
+                  spender,
+                })
+                if (receipt) toast.success('Allowance revoked')
+              } catch (err) {
+                console.log(err)
+              }
+            }}
           >
             Revoke allowance
           </button>

diff --git a/ui/components/thirdweb/NetworkSelector.tsx b/ui/components/thirdweb/NetworkSelector.tsx
@@ -1,7 +1,6 @@
 import { ChevronDownIcon } from '@heroicons/react/24/outline'
 import {
   Arbitrum,
-  ArbitrumSepolia,
   Chain,
   Ethereum,
   Polygon,
@@ -12,6 +11,8 @@ import {
 import Image from 'next/image'
 import { useContext, useEffect, useState } from 'react'
 import ChainContext from '../../lib/thirdweb/chain-context'
+import { thirdwebV4SlugsToV5Chains } from '@/lib/thirdweb/chain'
+import ChainContextV5 from '@/lib/thirdweb/chain-context-v5'
 
 type NetworkOptionProps = {
   chain: Chain
@@ -42,10 +43,16 @@ type NetworkSelectorProps = {
 
 export default function NetworkSelector({ iconsOnly }: NetworkSelectorProps) {
   const { selectedChain, setSelectedChain } = useContext(ChainContext)
+  const {
+    selectedChain: selectedChainV5,
+    setSelectedChain: setSelectedChainV5,
+  } = useContext(ChainContextV5)
   const [dropdown, setDropdown] = useState(false)
 
   function selectChain(chain: Chain) {
     setSelectedChain(chain)
+    const v5Chain = thirdwebV4SlugsToV5Chains[chain.slug]
+    setSelectedChainV5(v5Chain)
     setDropdown(false)
   }