Migrated Deprize to Thirdweb V5

Official-MoonDao · Jan 10, 2025 · 1e63e49 · 1e63e49
1 parent 1251e8b
commit 1e63e49
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 70 deletions.
diff --git a/ui/components/nance/CompetitorPreview.tsx b/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>

diff --git a/ui/components/nance/DePrize.tsx b/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,
       })

diff --git a/ui/lib/hats/useTeamWearer.tsx b/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>([])

diff --git a/ui/lib/thirdweb/chain.ts b/ui/lib/thirdweb/chain.ts
@@ -1,5 +1,11 @@
 import { Chain } from 'thirdweb/chains'
 
 export function getChainSlug(chain: Chain) {
-  return chain.name?.toLowerCase().replace(/\s+/g, '-')
+  let slug
+  if (chain.name === 'Arbitrum One') {
+    slug = 'arbitrum'
+  } else {
+    slug = chain.name?.toLowerCase().replace(/\s+/g, '-') ?? ''
+  }
+  return slug
 }
diff --git a/ui/pages/deprize.tsx b/ui/pages/deprize.tsx
@@ -1,4 +1,3 @@
-import { Arbitrum, Sepolia } from '@thirdweb-dev/chains'
 import CompetitorABI from 'const/abis/Competitor.json'
 import {
   COMPETITOR_TABLE_ADDRESSES,
@@ -7,13 +6,10 @@ import {
   TABLELAND_ENDPOINT,
 } from 'const/config'
 import { useRouter } from 'next/router'
-import { useContext } from 'react'
-import { getContract } from 'thirdweb'
-import { arbitrum, arbitrumSepolia } from 'thirdweb/chains'
-import ChainContext from '@/lib/thirdweb/chain-context'
+import { getContract, readContract } from 'thirdweb'
+import { getChainSlug } from '@/lib/thirdweb/chain'
 import { serverClient } from '@/lib/thirdweb/client'
 import { useChainDefault } from '@/lib/thirdweb/hooks/useChainDefault'
-import { initSDK } from '@/lib/thirdweb/thirdweb'
 import { DePrize, DePrizeProps } from '../components/nance/DePrize'
 
 export default function DePrizePage({ competitors }: DePrizeProps) {
@@ -26,27 +22,31 @@ export default function DePrizePage({ competitors }: DePrizeProps) {
 
 export async function getStaticProps() {
   // TODO enable mainnet
-  const chain = arbitrum
+  const chain = DEFAULT_CHAIN_V5
+  const chainSlug = getChainSlug(chain)
 
-  console.log(chain)
+  const competitorTableContract = getContract({
+    client: serverClient,
+    address: COMPETITOR_TABLE_ADDRESSES[chainSlug],
+    chain: chain,
+    abi: CompetitorABI as any,
+  })
+
+  const competitorBoardTableName = await readContract({
+    contract: competitorTableContract,
+    method: 'getTableName',
+  })
+
+  const competitorStatement = `SELECT * FROM ${competitorBoardTableName} WHERE deprize = ${DEPRIZE_ID}`
+  const competitorsRes = await fetch(
+    `${TABLELAND_ENDPOINT}?statement=${competitorStatement}`
+  )
+  const competitors = await competitorsRes.json()
 
-  // const competitorTabelContract = getContract({
-  //   client: serverClient,
-  //   address: COMPETITOR_TABLE_ADDRESSES[chain.chainId],
-  //   chain: chain,
-  // });
-  //   const competitorBoardTableName = await competitorTableContract.call(
-  //     'getTableName'
-  //   )
-  //   const competitorStatement = `SELECT * FROM ${competitorBoardTableName} WHERE deprize = ${DEPRIZE_ID}`
-  //   const competitorsRes = await fetch(
-  //     `${TABLELAND_ENDPOINT}?statement=${competitorStatement}`
-  //   )
-  //   const competitors = await competitorsRes.json()
 
   return {
     props: {
-      competitors: [],
+      competitors,
     },
     revalidate: 60,
   }