From 1e63e49e1869993a570a4e81019a3cc95efff987 Mon Sep 17 00:00:00 2001 From: namedotget Date: Fri, 10 Jan 2025 14:48:50 -0600 Subject: [PATCH] Migrated Deprize to Thirdweb V5 --- ui/components/nance/CompetitorPreview.tsx | 30 ++++------ ui/components/nance/DePrize.tsx | 73 ++++++++++++++--------- ui/lib/hats/useTeamWearer.tsx | 2 +- ui/lib/thirdweb/chain.ts | 8 ++- ui/pages/deprize.tsx | 44 +++++++------- 5 files changed, 87 insertions(+), 70 deletions(-) diff --git a/ui/components/nance/CompetitorPreview.tsx b/ui/components/nance/CompetitorPreview.tsx index b49488ebc..c23e1a300 100644 --- 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() - - 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 (
- {teamNFT && ( + {teamNFT && teamNFT?.metadata && (
- -
{teamNFT.metadata.name}
+
{teamNFT?.metadata?.name}
)}
diff --git a/ui/components/nance/DePrize.tsx b/ui/components/nance/DePrize.tsx index 3a0dae708..4aca51019 100644 --- 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 index d6e334fbd..7642ad13b 100644 --- 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([]) diff --git a/ui/lib/thirdweb/chain.ts b/ui/lib/thirdweb/chain.ts index 00d15984a..e937e1894 100644 --- 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 index 0be4802c4..1429bc6ee 100644 --- 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, }