nft page

.eslintrc.js

@@ -24,7 +24,7 @@ module.exports = {
  plugins: ['prettier'],
  rules: {
  // Include .prettierrc.js rules
- 'prettier/prettier': ['error', {}, { usePrettierrc: true }],
+ 'prettier/prettier': ['error', { usePrettierrc: true, endOfLine: auto}],
  'react/prop-types': 'off',
  'react/react-in-jsx-scope': 'off',
  'react/no-unescaped-entities': 'off',

components/pages/home/homepage-teasers.tsx

@@ -5,6 +5,10 @@ const TEASERS = {
  href: '/giftdrop',
  alt: 'GiftDrop is a series of free commemorative mint drops for the EDGizens!',
  },
+ nft: {
+ href: '/nft',
+ alt: 'Your NFT Page!',
+ },
  csp: {
  href: '/csp',
  alt: 'Support the ongoing community contributions through the monthly editions of limited NFTs and get exclusive perks.',

package.json

@@ -23,10 +23,13 @@
  "@polkadot/util": "10.1.12",
  "@polkadot/util-crypto": "10.1.12",
  "@tailwindcss/typography": "^0.5.2",
+ "@thirdweb-dev/react": "^4.1.2",
+ "@thirdweb-dev/sdk": "^4.0.11",
  "autoprefixer": "^10.4.4",
  "bignumber.js": "^9.1.1",
  "classnames": "^2.3.1",
  "eslint-config-prettier": "^8.3.0",
+ "ethers": "^5",
  "gh-pages": "^3.2.3",
  "next": "12.1.6",
  "next-sitemap": "^1.6.192",

pages/_app.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { AppProps } from 'next/app';
 import { useRouter } from 'next/router';
+import { ThirdwebProvider, localWallet, metamaskWallet } from '@thirdweb-dev/react';
+import { EdgewareEdgeevm } from '@thirdweb-dev/chains';
 import { QueryClient, QueryClientProvider } from 'react-query';
 
 import * as gtag from '../utils/gtag';
@@ -28,7 +30,9 @@ function MyApp({ Component, pageProps }: AppProps) {
  return (
  <Layout meta={pageProps.meta} {...pageProps.layout} currentPath={router.pathname}>
  <QueryClientProvider client={queryClient}>
- <Component {...pageProps} />
+ <ThirdwebProvider activeChain={{...EdgewareEdgeevm, rpc: ['https://edgeware-evm.jelliedowl.net']}} clientId='a768a5d757fbd7a552b1a6c5749039ee' supportedWallets={[metamaskWallet(), localWallet()]}>
+ <Component {...pageProps} />
+ </ThirdwebProvider>
  </QueryClientProvider>
  </Layout>
  );

pages/nft.tsx

@@ -0,0 +1,75 @@
+import { useAddress, useDisconnect, useConnectionStatus, useMetamask, useContract, useOwnedNFTs, MediaRenderer } from "@thirdweb-dev/react";
+import { useState } from "react";
+
+const contractAddresses = [
+ "0x6B7508b491b907B2C6d86737516F3786Ddc75063", 
+ "0x9DD893814e0934C038EeD71eD0591DB201674747",
+ "0x4d08e6e1c7607906Cd87Ef189a39aF7A68f677A3",
+ "0x405355C2613B516812eA4d2159Ca8798AEdb97D5",
+ "0xcBD6701C3313aC76c529468957Fc2137484A4A51",
+];
+
+export default function NFTsPage() {
+
+ const [ nfts, setNfts ] = useState<[]>([]);
+
+ const connectionStatus = useConnectionStatus();
+ const address = useAddress();
+ const connect = useMetamask();
+ const disconnect = useDisconnect();
+ const isConnected = (connectionStatus === "connected") ? true : false;
+
+ const getNftMetadata = (address: string) => {
+ contractAddresses.forEach((contractAddress) => {
+ const { contract } = useContract(contractAddress);
+ const { data, isLoading, error } = useOwnedNFTs(contract, address);
+ if (!isLoading && data.length){
+ console.log("inside loop:", data);
+ const metadata = data?.[0].metadata;
+ console.log("nft metadata: ", metadata);
+ }
+
+ })
+ }
+
+ getNftMetadata(address);
+
+ const { contract } = useContract("0xcBD6701C3313aC76c529468957Fc2137484A4A51");
+ const { data, isLoading, error } = useOwnedNFTs(contract, address);
+ const metadata = data?.[0].metadata;
+
+ return (
+ <>
+ <section id="nft" className="mt-24 px-4 text-center">
+ <h1 className="my-8 text-6xl">Minted NFTs</h1>
+ <p className="my-4 mx-auto max-w-prose text-lg leading-relaxed">
+ {isConnected ? (`Connected wallet address: ${address}`): ("Connect wallet to view the minted NFTs:")}
+ </p>
+ {isConnected ? (
+ <button className="py-2.5 px-5 mb-2.5 rounded-md font-semibold text-white bg-primary-500 hover:bg-primary-600" onClick={disconnect}>Disconnect</button>
+ ) : (
+ <button className="py-2.5 px-5 mb-2.5 rounded-md font-semibold bg-primary-500 text-white hover:bg-primary-600" onClick={() => connect()}>Connect</button>
+ )}
+ </section>
+ <section id="nft-cards" className="flex flex-wrap md:place-content-between place-content-center sm:mx-auto max-w-5xl px-8 gap-8 py-8 pb-24">
+ {!isLoading && (<div className="flex flex-col group hover:cursor-pointer">
+ <MediaRenderer src={metadata?.animation_url} />
+ <h3 className="my-2 mx-auto max-w-prose text-md leading-relaxed group-hover:text-green-500">{metadata?.name}</h3>
+ </div>
+ )}
+ </section>
+ </>
+ );
+};
+
+export async function getStaticProps() {
+ return {
+ props: {
+ meta: {
+ title: 'NFT Page',
+ description:
+ 'View your NFTs here.',
+ },
+ },
+ };
+};