Part 2: How to Create an NFT Game Frontend

$
npm install

1
const alchemyApiKey = "<-- ALCHEMY APP API KEY -->";
2
const ownerAddress = "<-- WALLET ADDRESS USED TO DEPLOY CONTRACT IN PART I -->";
3
const contractAddress = "<-- DEPLOYED ALCHEMON CONTRACT ADDRESS FROM PART I -->";
4
5
export { alchemyApiKey, ownerAddress, contractAddress }

1
// Standard Next and CSS imports
2
import Head from 'next/head'
3
import styles from '@/styles/Home.module.css'
4
import { useRouter } from "next/router";
5
import { useState, useEffect, Fragment } from "react";
6
7
// Alchemy SDK imports for NFT API
8
import { Network, Alchemy } from "alchemy-sdk";
9
10
// Imports from the constants.js file
11
import { alchemyApiKey, contractAddress } from "@/data/constants";
12
13
// Wagmi import for connected wallet info
14
import { useAccount } from "wagmi";
15
16
// Contract ABI import
17
import contract from '@/contracts/AlchemonNft.json';
18
19
// Ethers for invoking functions on smart contract
20
import { ethers } from 'ethers';
21
22
// Extract ABI from the ABI JSON file
23
const abi = contract.abi;
24
25
export default function Home() {
26
27
  // Standard Next router definition
28
  const router = useRouter();
29
30
  // Get connected wallet address and connection status
31
  const { address, isConnected } = useAccount();
32
33
  // Page mounting info to prevent hydration errors
34
  const [hasMounted, setHasMounted] = useState(false);
35
36
  // Variable that holds sample Alchemon NFTs
37
  const [samples, setSamples] = useState([]);
38
39
  // Variable that holds contracts created by Owner address
40
  const [contracts, setContracts] = useState([]);
41
42
  // Variable that holds all Alchemons created by connected wallet
43
  const [nfts, setNfts] = useState([]);
44
45
  // Parent Alchemons
46
  const [parent1, setParent1] = useState('none');
47
  const [parent2, setParent2] = useState('none');
48
49
  // Initialize Alchemy SDK
50
  const settings = {
51
    apiKey: alchemyApiKey,
52
    network: Network.ETH_GOERLI,
53
  };
54
55
  const alchemy = new Alchemy(settings);
56
57
  // Mounting fix to avoid hydration errors
58
  useEffect(() => {
59
    setHasMounted(true)
60
  }, []);
61
62
  // Get all Alchemon NFTs owned by the connected wallet
63
  useEffect(() => {
64
    const getNfts = async () => {
65
      const response = await alchemy.nft.getNftsForOwner(address);
66
      const nfts = response.ownedNfts.filter(nft => nft.contract.address.toUpperCase() === contractAddress.toUpperCase());
67
      setNfts(nfts);
68
    }
69
    getNfts();
70
  }, [])
71
72
  // Get sample Alchemon NFTs 
73
  useEffect(() => {
74
    const getSamples = async () => {
75
      const response = await alchemy.nft.getNftsForContract(contractAddress);
76
      const nfts = response.nfts.slice(0, 3);
77
      setSamples(nfts);
78
    }
79
    getSamples();
80
  }, [])
81
82
  // Get all contracts for owner
83
  useEffect(() => {
84
    const options = { method: 'GET', headers: { accept: 'application/json' } };
85
86
    fetch(`https://eth-mainnet.g.alchemy.com/nft/v2/${alchemyApiKey}/getContractsForOwner?owner=${address}`, options)
87
      .then(response => response.json())
88
      .then(response => setContracts(response.contracts))
89
      .catch(err => console.error(err));
90
  }, [])
91
92
  // Do not render until entire UI is mounted  
93
  if (!hasMounted) return null;
94
95
  // Redirect to Connect page if wallet is not connected
96
  if (!isConnected) {
97
    router.replace('/connect');
98
  }
99
100
  // Form handlers
101
  const parent1Handler = (e) => {
102
    setParent1(e.target.value);
103
  }
104
105
  const parent2Handler = (e) => {
106
    setParent2(e.target.value);
107
  }
108
109
  // Function that allows breeding of NFTs using 2 parent NFTs
110
  const mintNft = async (e) => {
111
112
    e.preventDefault();
113
114
    // Only allow breeding if the parents are distinct 
115
    if (parent1 === 'none' || parent2 === 'none' || parent1 === parent2) {
116
      console.log("Incorrect parents");
117
      return;
118
    }
119
120
    // Call the breed function from connected wallet
121
    try {
122
      const { ethereum } = window;
123
124
      if (ethereum) {
125
        const provider = new ethers.providers.Web3Provider(ethereum);
126
        const signer = provider.getSigner();
127
        const nftContract = new ethers.Contract(contractAddress, abi, signer);
128
129
        console.log("Initialize payment");
130
        let nftTxn = await nftContract.breed(parseInt(parent1), parseInt(parent2));
131
132
        console.log("Mining... please wait");
133
        await nftTxn.wait();
134
135
        console.log(`Mined, see transaction: https://goerli.etherscan.io/tx/${nftTxn.hash}`);
136
        router.replace('/dashboard');
137
138
      } else {
139
        console.log("Ethereum object does not exist");
140
      }
141
142
    } catch (err) {
143
      console.log(err);
144
    }
145
  }
146
147
  return (
148
    <Fragment>
149
150
      <Head>
151
        <title>Alchemon</title>
152
        <meta name="description" content="A simple NFT based game" />
153
        <meta name="viewport" content="width=device-width, initial-scale=1" />
154
        <link rel="icon" href="/favicon.ico" />
155
      </Head>
156
157
      <main className={styles.main}>
158
        <h1>Alchemon</h1>
159
160
        <button onClick={() => router.push('/dashboard')}>
161
          Profile Dashboard
162
        </button>
163
164
        <h2>Breed a New Alchemon</h2>
165
166
        <form className={styles.breed_form} onSubmit={mintNft}>
167
          <select name="parent1" id="parent1" value={parent1} onChange={parent1Handler}>
168
            <option value="none">---</option>
169
            {nfts.map(nft => {
170
              return <option value={nft.tokenId} key={nft.tokenId}>{nft.title}</option>
171
            })}
172
          </select>
173
          <select name="parent2" id="parent2" value={parent2} onChange={parent2Handler}>
174
            <option value="none">---</option>
175
            {nfts.map(nft => {
176
              return <option value={nft.tokenId} key={nft.tokenId}>{nft.title}</option>
177
            })}
178
          </select>
179
          <button type='submit'>Breed</button>
180
        </form>
181
182
        <h2>Sample Alchemon NFTs</h2>
183
        <div className={styles.sample_nfts}>
184
          {samples.map(nft => {
185
            return (
186
              <div className={styles.nft} key={nft.tokenId}>
187
                <h3>{nft.title}</h3>
188
                <img src={nft.media[0].raw} />
189
              </div>
190
            )
191
          })}
192
        </div>
193
194
        <h2>Projects by Alchemon Creators</h2>
195
        <ul className={styles.contract_container}>
196
          {contracts.map(contract => {
197
            return (
198
              <li key={contract.address}>
199
                <a href={`https://goerli.etherscan.io/address/${contract.address}`} target="_blank">
200
                  {contract.address}
201
                </a>
202
              </li>
203
            )
204
          })}
205
        </ul>
206
207
      </main>
208
    </Fragment>
209
  )
210
}

1
// Standard Next and CSS imports
2
import Head from "next/head";
3
import { Fragment, useState, useEffect } from "react";
4
import styles from "../styles/dashboard.module.css";
5
import { useRouter } from "next/router";
6
7
// Alchemy SDK imports for NFT API
8
import { Network, Alchemy } from "alchemy-sdk";
9
10
// Imports from the constants.js file
11
import { alchemyApiKey, contractAddress } from "@/data/constants";
12
13
// Wagmi import for connected wallet info
14
import { useAccount } from "wagmi";
15
16
export default function Dashboard() {
17
18
    // Standard Next router definition
19
    const router = useRouter();
20
21
    // Get connected wallet address and connection status
22
    const { address, isConnected } = useAccount();
23
24
    // Page mounting info to prevent hydration errors
25
    const [hasMounted, setHasMounted] = useState(false);
26
27
    // Variable that holds all Alchemons created by connected wallet
28
    const [nfts, setNfts] = useState([]);
29
30
    // Initialize Alchemy SDK
31
    const settings = {
32
        apiKey: alchemyApiKey,
33
        network: Network.ETH_GOERLI,
34
    };
35
36
    const alchemy = new Alchemy(settings);
37
38
    // Mounting fix to avoid hydration errors
39
    useEffect(() => {
40
        setHasMounted(true);
41
    }, []);
42
43
    // Get all Alchemon NFTs owned by the connected wallet
44
    useEffect(() => {
45
        const getNfts = async () => {
46
            const response = await alchemy.nft.getNftsForOwner(address);
47
            const nfts = response.ownedNfts.filter(nft => nft.contract.address.toUpperCase() === contractAddress.toUpperCase());
48
            setNfts(nfts);
49
        }
50
51
        getNfts();
52
    }, [])
53
54
    // Do not render until entire UI is mounted  
55
    if (!hasMounted) return null;
56
57
    // Redirect to Connect page if wallet is not connected
58
    if (!isConnected) {
59
        router.replace('/connect');
60
    }
61
62
    return (
63
        <Fragment>
64
            <Head>
65
                <title>Profile Dashboard</title>
66
            </Head>
67
68
            <div className={styles.jumbotron}>
69
70
                <h1>Dashboard</h1>
71
72
                <h2>Contract Address</h2>
73
                <p>{address}</p>
74
75
                <h2 className={styles.nft_heading}>My NFTs</h2>
76
                <div className={styles.nft_container}>
77
                    {nfts.map(nft => {
78
                        return (
79
                            <div className={styles.nft} key={nft.tokenId}>
80
                                <h3>{nft.rawMetadata.name}</h3>
81
                                <img src={nft.media[0].raw} />
82
                            </div>
83
                        )
84
                    })}
85
                </div>
86
87
                <button onClick={() => router.replace('/')}>
88
                    Back to Main Page
89
                </button>
90
91
            </div>
92
        </Fragment>
93
    )
94
}

$
npm run dev