Thirdweb V5 Migration : Initial Setup and Deprize (#301)

* Setup thirdweb v5 provider

* Config provider and chains for thirdwebV5

* Migrated Deprize to Thirdweb V5

* Removed log

* Updated env var

.github/workflows/ci.yml

@@ -26,7 +26,7 @@ jobs:
       NEXT_PUBLIC_ASSETS_URL: ${{ secrets.NEXT_PUBLIC_ASSETS_URL }}
       NEXT_PUBLIC_SWEEPSTAKES_OWNER: "0x0724d0eb7b6d32AEDE6F9e492a5B1436b537262b"
       NEXT_PUBLIC_THIRDWEB_CLIENT_ID: ${{ secrets.NEXT_PUBLIC_THIRDWEB_CLIENT_ID }}
-      NEXT_PUBLIC_THIRDWEB_SECRET_KEY: ${{ secrets.NEXT_PUBLIC_THIRDWEB_SECRET_KEY }}
+      NEXT_PUBLIC_THIRDWEB_CLIENT_SECRET: ${{ secrets.NEXT_PUBLIC_THIRDWEB_SECRET_KEY }}
       NEXT_PUBLIC_PRIVY_APP_ID: ${{secrets.NEXT_PUBLIC_PRIVY_APP_ID}}
       NEXT_PUBLIC_MONGO_MOONDAO_API_KEY: ${{secrets.NEXT_PUBLIC_MONGO_MOONDAO_API_KEY}}
       ALLOWED_ORIGIN: "http://localhost:3000"

ui/components/nance/CompetitorPreview.tsx

@@ -1,5 +1,6 @@
-import { NFT, ThirdwebNftMedia } from '@thirdweb-dev/react'
-import { useEffect, useState } from 'react'
+import { getNFT } from 'thirdweb/extensions/erc721'
+import { MediaRenderer, useReadContract } from 'thirdweb/react'
+import client from '@/lib/thirdweb/client'
 
 type CompetitorPreviewProps = {
   teamId: any
@@ -10,30 +11,23 @@ export function CompetitorPreview({
   teamId,
   teamContract,
 }: CompetitorPreviewProps) {
-  const [teamNFT, setTeamNFT] = useState<NFT>()
-
-  useEffect(() => {
-    async function getTeamNFT() {
-      const nft = await teamContract.erc721.get(teamId)
-      setTeamNFT(nft)
-    }
-
-    if (teamContract?.erc721?.get && teamId) {
-      getTeamNFT()
-    }
-  }, [teamId, teamContract])
+  const { data: teamNFT } = useReadContract(getNFT, {
+    contract: teamContract,
+    tokenId: BigInt(teamId),
+  })
 
   return (
     <div className="flex items-center gap-5">
-      {teamNFT && (
+      {teamNFT && teamNFT?.metadata && (
         <div className="flex items-center">
-          <ThirdwebNftMedia
-            metadata={teamNFT.metadata}
+          <MediaRenderer
+            client={client}
+            src={teamNFT?.metadata?.image}
             width="66px"
             height="66px"
             style={{ borderRadius: '50%' }}
           />
-          <div>{teamNFT.metadata.name}</div>
+          <div>{teamNFT?.metadata?.name}</div>
         </div>
       )}
     </div>

ui/components/nance/DePrize.tsx

@@ -1,23 +1,20 @@
-import { Arbitrum, Sepolia } from '@thirdweb-dev/chains'
-import { useAddress, useContract } from '@thirdweb-dev/react'
 import CompetitorABI from 'const/abis/Competitor.json'
-import ERC20 from 'const/abis/ERC20.json'
-import REVDeployer from 'const/abis/REVDeployer.json'
-import {
-  DEPRIZE_ID,
-  COMPETITOR_TABLE_ADDRESSES,
-  REVNET_ADDRESSES,
-} from 'const/config'
+import TeamABI from 'const/abis/Team.json'
+import { DEPRIZE_ID, COMPETITOR_TABLE_ADDRESSES } from 'const/config'
 import { TEAM_ADDRESSES } from 'const/config'
 import { useState, useContext } from 'react'
 import toast from 'react-hot-toast'
+import {
+  getContract,
+  prepareContractCall,
+  sendAndConfirmTransaction,
+} from 'thirdweb'
+import { useActiveAccount, useActiveWallet } from 'thirdweb/react'
 import { useTeamWearer } from '@/lib/hats/useTeamWearer'
 import toastStyle from '@/lib/marketplace/marketplace-utils/toastConfig'
-import useWindowSize from '@/lib/team/use-window-size'
-import ChainContext from '@/lib/thirdweb/chain-context'
-import useTokenSupply from '@/lib/tokens/hooks/useTokenSupply'
-import useWatchTokenBalance from '@/lib/tokens/hooks/useWatchTokenBalance'
-import Asset from '@/components/dashboard/treasury/balance/Asset'
+import { getChainSlug } from '@/lib/thirdweb/chain'
+import ChainContextV5 from '@/lib/thirdweb/chain-context-v5'
+import client from '@/lib/thirdweb/client'
 import Container from '@/components/layout/Container'
 import ContentLayout from '@/components/layout/ContentLayout'
 import Head from '@/components/layout/Head'
@@ -40,17 +37,29 @@ export type DePrizeProps = {
 }
 
 export function DePrize({ competitors, refreshRewards }: DePrizeProps) {
-  const { selectedChain } = useContext(ChainContext)
+  const account = useActiveAccount()
+
+  const { selectedChain } = useContext(ChainContextV5)
+  const chainSlug = getChainSlug(selectedChain)
+
   const [joinModalOpen, setJoinModalOpen] = useState(false)
-  const userAddress = useAddress()
 
-  const { contract: competitorContract } = useContract(
-    COMPETITOR_TABLE_ADDRESSES[selectedChain.slug],
-    CompetitorABI
-  )
-  const { contract: teamContract } = useContract(
-    TEAM_ADDRESSES[selectedChain.slug]
-  )
+  const wallet = useActiveWallet()
+  const userAddress = wallet?.getAccount()?.address
+
+  const competitorContract = getContract({
+    client,
+    chain: selectedChain,
+    address: COMPETITOR_TABLE_ADDRESSES[chainSlug],
+    abi: CompetitorABI as any,
+  })
+
+  const teamContract = getContract({
+    client,
+    chain: selectedChain,
+    address: TEAM_ADDRESSES[chainSlug],
+    abi: TeamABI as any,
+  })
 
   const userTeams = useTeamWearer(teamContract, selectedChain, userAddress)
 
@@ -61,11 +70,19 @@ export function DePrize({ competitors, refreshRewards }: DePrizeProps) {
   )
   const handleJoinWithTeam = async (teamId: string) => {
     try {
-      await competitorContract?.call('insertIntoTable', [
-        DEPRIZE_ID,
-        teamId,
-        '{}',
-      ])
+      if (!account) throw new Error('No account found')
+
+      const transaction = prepareContractCall({
+        contract: competitorContract,
+        method: 'insertIntoTable',
+        params: [DEPRIZE_ID, teamId, '{}'],
+      })
+
+      const receipt = await sendAndConfirmTransaction({
+        transaction,
+        account,
+      })
+
       toast.success('Joined as a competitor!', {
         style: toastStyle,
       })

ui/const/config.ts

@@ -1,4 +1,5 @@
 import { Arbitrum, Sepolia } from '@thirdweb-dev/chains'
+import { arbitrum, sepolia } from 'thirdweb/chains'
 
 export const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
 
@@ -45,6 +46,9 @@ const baseSepoliaConfig =
 export const DEFAULT_CHAIN =
   process.env.NEXT_PUBLIC_CHAIN === 'mainnet' ? Arbitrum : Sepolia
 
+export const DEFAULT_CHAIN_V5 =
+  process.env.NEXT_PUBLIC_CHAIN === 'mainnet' ? arbitrum : sepolia
+
 export const MOONEY_ADDRESSES: Index = {
   ethereum: ethConfig.MOONEYToken,
   polygon: polygonConfig.MOONEYToken,

ui/lib/hats/useTeamWearer.tsx

@@ -6,7 +6,7 @@ import hatsSubgraphClient from './hatsSubgraphClient'
 
 export function useTeamWearer(
   teamContract: any,
-  selectedChain: Chain,
+  selectedChain: any,
   address: any
 ) {
   const [wornMoondaoHats, setWornMoondaoHats] = useState<any>([])

ui/lib/privy/PrivyThirdwebV5Provider.tsx

@@ -0,0 +1,87 @@
+import { usePrivy, useWallets } from '@privy-io/react-auth'
+import { signIn, signOut } from 'next-auth/react'
+import { useEffect, useState } from 'react'
+import { defineChain } from 'thirdweb'
+import { ethers5Adapter } from 'thirdweb/adapters/ethers5'
+import { useSetActiveWallet } from 'thirdweb/react'
+import { createWalletAdapter } from 'thirdweb/wallets'
+import client from '@/lib/thirdweb/client'
+import PrivyWalletContext from './privy-wallet-context'
+
+export function PrivyThirdwebV5Provider({ selectedChain, children }: any) {
+  const { user, ready, authenticated, getAccessToken } = usePrivy()
+  const [selectedWallet, setSelectedWallet] = useState<number>(0)
+  const { wallets } = useWallets()
+  const setActiveWallet = useSetActiveWallet()
+
+  useEffect(() => {
+    async function setActive() {
+      try {
+        const wallet = wallets[selectedWallet]
+        const provider = await wallet?.getEthersProvider()
+        const signer = provider?.getSigner()
+
+        const walletClientType = wallet?.walletClientType
+        if (
+          walletClientType === 'coinbase_wallet' ||
+          walletClientType === 'privy'
+        )
+          await wallet?.switchChain(selectedChain.chainId)
+
+        const adaptedAccount = await ethers5Adapter.signer.fromEthers({
+          signer,
+        })
+
+        const thirdwebWallet = createWalletAdapter({
+          adaptedAccount,
+          chain: defineChain(selectedChain.chainId),
+          client,
+          onDisconnect: () => {},
+          switchChain: () => {},
+        })
+
+        await thirdwebWallet.connect({ client })
+        setActiveWallet(thirdwebWallet)
+      } catch (err: any) {
+        console.log(err.message)
+      }
+    }
+
+    setActive()
+  }, [wallets, selectedWallet, selectedChain])
+
+  useEffect(() => {
+    async function handleAuth() {
+      if (ready && authenticated && user) {
+        try {
+          // Sign in to NextAuth with the Privy token
+          const accessToken = await getAccessToken()
+          const result = await signIn('credentials', {
+            accessToken: accessToken,
+            redirect: false, // Prevent automatic redirect
+          })
+
+          if (result?.error) {
+            console.error('NextAuth sign in failed:', result.error)
+          }
+        } catch (error) {
+          console.error('Auth error:', error)
+        }
+      }
+    }
+
+    handleAuth()
+  }, [ready, authenticated, user, getAccessToken])
+
+  useEffect(() => {
+    if (ready && !authenticated) {
+      signOut({ redirect: false })
+    }
+  }, [ready, authenticated, user])
+
+  return (
+    <PrivyWalletContext.Provider value={{ selectedWallet, setSelectedWallet }}>
+      {children}
+    </PrivyWalletContext.Provider>
+  )
+}

ui/lib/thirdweb/chain-context-v5.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react'
+import { arbitrum, sepolia, Chain } from 'thirdweb/chains'
+
+const ChainContextV5 = createContext({
+  selectedChain:
+    process.env.NEXT_PUBLIC_CHAIN === 'mainnet' ? arbitrum : sepolia,
+  setSelectedChain: (chain: Chain) => {},
+})
+
+export default ChainContextV5

ui/lib/thirdweb/chain.ts

@@ -0,0 +1,11 @@
+import { Chain } from 'thirdweb/chains'
+
+export function getChainSlug(chain: Chain) {
+  let slug
+  if (chain.name === 'Arbitrum One') {
+    slug = 'arbitrum'
+  } else {
+    slug = chain.name?.toLowerCase().replace(/\s+/g, '-') ?? ''
+  }
+  return slug
+}

ui/lib/thirdweb/client.ts

@@ -0,0 +1,11 @@
+import { createThirdwebClient } from 'thirdweb'
+
+const client = createThirdwebClient({
+  clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID as string,
+})
+
+export const serverClient = createThirdwebClient({
+  secretKey: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_SECRET as string,
+})
+
+export default client

ui/package.json

@@ -96,6 +96,7 @@
     "shopify-buy": "^2.18.0",
     "swr": "^2.2.5",
     "tailwind-scrollbar-hide": "^1.1.7",
+    "thirdweb": "^5.81.0",
     "three": "^0.156.1",
     "typescript": "^5.1.6",
     "urql": "^4.0.4",