From f1e993726d84965d910983468b6272a7d2f250eb Mon Sep 17 00:00:00 2001 From: adetyaz Date: Tue, 1 Oct 2024 13:56:49 +0100 Subject: [PATCH] feat: fantoken update --- src/app/[id]/page.tsx | 72 ++++---- src/components/claim-nft-modal.tsx | 6 +- src/components/claim-nft.tsx | 85 +-------- src/components/header.tsx | 266 +++++++++++++++-------------- src/utils/queries.ts | 3 +- 5 files changed, 187 insertions(+), 245 deletions(-) diff --git a/src/app/[id]/page.tsx b/src/app/[id]/page.tsx index 42691bf..ab2428c 100644 --- a/src/app/[id]/page.tsx +++ b/src/app/[id]/page.tsx @@ -2,35 +2,26 @@ import { InfoCard } from '@/components/info-card' import Image from 'next/image' import { Avatar } from '@readyplayerme/visage' -import { useAccount } from 'wagmi' -import { ConnectWallet } from '@/components/connect-wallet' +import { useAccount, useChainId } from 'wagmi' import { useEffect, useState } from 'react' -import { ConnectWalletModal } from '@/components/connect-wallet-modal' -import { MintedModal } from '@/components/minted-modal' import { ClaimNft } from '@/components/claim-nft' import { toast } from 'react-toastify' - import { VoiceAssistant } from '@/components/voice-assistant' -import { useQueries, useQuery } from '@tanstack/react-query' -import { - getAvatars, - getPhygital, - getProfileByWallet, - getWebXR, -} from '@/utils/queries' +import { useQueries } from '@tanstack/react-query' +import { getAvatars, getPhygital, getWebXR } from '@/utils/queries' import { AvatarType } from '@/types/types' -import { BadgeInfo } from 'lucide-react' import Header from '@/components/header' +import Moralis from 'moralis' export default function Home({ params }: { params: { id: string } }) { const { id } = params - const [unlockModal, setUnlockModal] = useState(false) const [unlockClaimed, setUnlockClaimed] = useState(false) const [showCard, setShowCard] = useState(false) + const [mintedNFTs, setMintedNFTs] = useState([]) const account = useAccount() - - const profileImage = 'QmcKFdgcuhmAQRniKwkua5aF9iuKSMJUtQekhLDNyTDfE3' + const chainId = useChainId() + const apiKey = process.env.NEXT_PUBLIC_MORALIS_API_KEY const results = useQueries({ queries: [ @@ -55,10 +46,38 @@ export default function Home({ params }: { params: { id: string } }) { const [phygitalResult, webxrResult, avatarResult] = results useEffect(() => { - setTimeout(() => { - setUnlockClaimed(true) - }, 60000) - }, []) + const fetchNFTs = async () => { + try { + await Moralis.start({ apiKey }) + + const assets = await Moralis.EvmApi.nft.getWalletNFTs({ + chain: chainId, + format: 'decimal', + mediaItems: false, + address: account.address!, + }) + + //@ts-ignore + setMintedNFTs(assets?.raw?.result) + console.log('NFTs:', assets.raw.result) + } catch (e) { + console.error(e) + } + } + + if (account.address && chainId) { + fetchNFTs() + } + }, [account]) + + useEffect(() => { + //@ts-ignore + if (account && !mintedNFTs && !mintedNFTs[0]?.token_hash) { + setTimeout(() => { + setUnlockClaimed(true) + }, 60000) + } + }, [mintedNFTs, account]) const closeClaimed = () => { setUnlockClaimed(false) @@ -88,7 +107,7 @@ export default function Home({ params }: { params: { id: string } }) { return (
-
+
setShowCard(!showCard)} /> */} {unlockClaimed && ( -
+
)} @@ -154,8 +169,3 @@ export default function Home({ params }: { params: { id: string } }) {
) } - -// { -// "message": "DelegateMintFanToken transaction sent", -// "txHash": "0x90cac9ae683f738e7a00fb2cefe87f1a4bea1d4420cfbf598b3a9f3fd31aa35c" -// } diff --git a/src/components/claim-nft-modal.tsx b/src/components/claim-nft-modal.tsx index e9d8f0b..d9fbd6a 100644 --- a/src/components/claim-nft-modal.tsx +++ b/src/components/claim-nft-modal.tsx @@ -36,7 +36,7 @@ export const ClaimNftModal = ({ /> -
+
Free NFT Image
-

+

By owning this NFT, you show your support to {brandName} and help them reach higher on the MyriadFlow avatar leaderboard!

-

+

Rewards are distributed to top 3 avatar creators, owners and supporters each week.

diff --git a/src/components/claim-nft.tsx b/src/components/claim-nft.tsx index 1f97d12..6cc51b1 100644 --- a/src/components/claim-nft.tsx +++ b/src/components/claim-nft.tsx @@ -1,105 +1,29 @@ 'use client' -import Link from 'next/link' + import { ClaimNftModal } from './claim-nft-modal' import Image from 'next/image' import { useAccount } from 'wagmi' import { toast } from 'react-toastify' -import { simulateContract, writeContract } from '@wagmi/core' import { useState } from 'react' - import { ConnectWallet } from './connect-wallet' -import { config } from '@/lib/wagmi' -import reward from '@/lib/reward.json' -import mainAbi from '@/lib/mainnetAbi.json' -import { useQuery } from '@tanstack/react-query' -import { getBrands } from '@/utils/queries' -import { BrandType } from '@/types/types' - -const baseUri = process.env.NEXT_PUBLIC_URI || 'https://app.myriadflow.com' +import { baseURI } from '@/utils/queries' export const ClaimNft = ({ onClose, freeNft, brandName, contractAddress, - chainTypeId, - collectionId, - phygitalName, - phygitalId, }: { onClose: (state: boolean) => void freeNft: string brandName: string contractAddress: string - chainTypeId: string - collectionId: string - phygitalName: string - phygitalId: string }) => { const [claimNft, setClaimNft] = useState(false) - const [brandId, setBrandId] = useState('') const account = useAccount() - const brand = useQuery({ - queryKey: ['brand'], - queryFn: async () => { - const brandId = await getBrands() - return brandId.find((brand: BrandType) => brand.name === brandName) - }, - }) - - const brandResult = brand.data - - console.log(contractAddress) - - // const createFanToken = async () => { - // // const abi = reward.abi - // // const { request } = await simulateContract(config, { - // // abi, - // // address: '0x7Bc52aEd144B3262c17442e5223113C2f29a7033', - // // // address: '0x771C15e87272d6A57900f009Cd833b38dd7869e5' - // // functionName: 'createFanToken', - // // args: [String(contractAddress), 1, '0x0', 'www.xyz.com'], - // // }) - // // const hash = await writeContract(config, request) - // // console.log('HASH', hash) - - // const response = await fetch(`${baseUri}/create-fan-token`, { - // method: 'POST', - // body: JSON.stringify({ - // nftContractAddress: contractAddress, - // amount: '1', - // data: '0x0', - // uri: 'www.xyz.com', - // }), - // }) - - // const hash = await response.json() - - // if (hash) { - // const res = await fetch(`${baseUri}/fantoken`, { - // method: 'POST', - // body: JSON.stringify({ - // brand_id: brandResult.id, - // collection_id: collectionId, - // phygital_id: phygitalId, - // phygital_name: phygitalName, - // chaintype_id: chainTypeId, - // fantoken_id: hash.txHash, - // wallet_address: account.address, - // }), - // }) - - // const result = await res.json() - - // if (result) { - // setClaimNft(true) - // } - // } - // } - const mintFanToken = async () => { - const response = await fetch(`${baseUri}/delegate-mint-fantoken`, { + const response = await fetch(`${baseURI}/delegate-mint-fantoken`, { method: 'POST', body: JSON.stringify({ creatorWallet: account.address, @@ -114,8 +38,6 @@ export const ClaimNft = ({ if (hash && hash.txHash) { setClaimNft(true) } - - console.log(hash) } const removePrefix = (uri: string) => { @@ -140,7 +62,6 @@ export const ClaimNft = ({ height={50} width={150} /> - Free NFT Image { +const Header = ({ + home, + onClick, +}: { + home: boolean + onClick: React.ReactEventHandler +}) => { const [isScrolled, setIsScrolled] = useState(false) const [isDropdownOpen, setIsDropdownOpen] = useState(false) const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false) @@ -145,139 +152,142 @@ const Header = ({ home }: { home: boolean }) => { WebXR
-
- {address ? ( - <> -
- - {isProfileMenuOpen && ( -
-
- Profile -
- - {name} - - - View profile - +
+
+ {address ? ( + <> +
+ + {isProfileMenuOpen && ( +
+
+ Profile +
+ + {name} + + + View profile + +
-
- - My assets - - - On sale - - - My brands - - - My collections - - - Activity - - - Rewards - - - Create - - - Profile Settings - -
- -
- {address} + + My assets + + + On sale + + + My brands + + + My collections + + + Activity + + + Rewards + + + Create + + + Profile Settings + +
+
+ {address} + +
-
- )} -
- - ) : ( - - )} + )} +
+ + ) : ( + + )} +
+ +
-
{isDropdownOpen && (
{ const response = await axios.get(`${baseURI}/brands/all`)