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.',
+      },
+    },
+  };
+};