Initialise React frontend for `web3-test-game`

[Gizmotronn]

Here's the current index.js file:

import React, { useEffect, useState } from 'react';
import './App.css';
import twitterLogo from './assets/twitter-logo.svg';

// Components (Character)
import SelectCharacter from './Components/SelectCharacter';

// Constants
const TWITTER_HANDLE = 'TheMrScrooby';
const TWITTER_LINK = `https://twitter.com/${TWITTER_HANDLE}`;

const App = () => {
  /*
   * Just a state variable we use to store our user's public wallet. Don't forget to import useState.
   */
  const [currentAccount, setCurrentAccount] = useState(null);
  const [characterNFT, setCharacterNFT] = useState(null);

  /*
   * Since this method will take some time, make sure to declare it as async
   */
  const checkIfWalletIsConnected = async () => {
    try {
      const { ethereum } = window;

      if (!ethereum) {
        console.log('Make sure you have MetaMask!');
        return;
      } else {
        console.log('We have the ethereum object', ethereum);

        /*
         * Check if we're authorized to access the user's wallet
         */
        const accounts = await ethereum.request({ method: 'eth_accounts' });

        /*
         * User can have multiple authorized accounts, we grab the first one if its there!
         */
        if (accounts.length !== 0) {
          const account = accounts[0];
          console.log('Found an authorized account:', account);
          setCurrentAccount(account);
        } else {
          console.log('No authorized account found');
        }
      }
    } catch (error) {
      console.log(error);
    }
  };

  // Check if user has connected AND if they've minted their character, based on this render certain components
  const renderContent = () => {
    if (!currentAccount) { // If user has not connected their account/wallet to here
      return (
        <div className="connect-wallet-container">
          <img
            src="https://64.media.tumblr.com/tumblr_mbia5vdmRd1r1mkubo1_500.gifv"
            alt="Monty Python Gif"
          />
          <button
            className="cta-button connect-wallet-button"
            onClick={connectWalletAction}
          >
            Connect Wallet (Metamask) to get started
          </button>
      </div>
      );
    } else if (currentAccount && !characterNFT) { // If the user has connected their account but doesn't have an NFT minted for their character yet
      return <SelectCharacter setCharacterNFT={setCharacterNFT} />;
    }
  }

  const connectWalletAction = async () => {
    try {
      const { ethereum } = window;

      if (!ethereum) {
        alert('Get Metamask!'); // Ethereum wallet (specifically metamask) was not detected
        return;
      }

      // Request access to account
      const accounts = await ethereum.request({
        method: 'eth_requestAccounts',
      });

      // Get the first account & print its public address to console
      console.log('Connected', accounts[0]);
      setCurrentAccount(accounts[0]);
    } catch (error) {
      console.log(error);
    }
  }

  /*
   * This runs our function when the page loads.
   */
  useEffect(() => {
    checkIfWalletIsConnected();
  }, []);

  return (
    <div className="App">
      <div className="container">
        <div className="header-container">
          <p className="header gradient-text">⚔️ Metaverse Slayer ⚔️</p>
          <p className="sub-text">Team up to protect the Metaverse!</p>
          {

          }
          {renderContent()}
        </div>
        <div className="footer-container">
          <img alt="Twitter Logo" className="twitter-logo" src={twitterLogo} />
          <a
            className="footer-text"
            href={TWITTER_LINK}
            target="_blank"
            rel="noreferrer"
          >{`built with @${TWITTER_HANDLE}`}</a>
        </div>
      </div>
    </div>
  );
};

export default App;

Here's what we need to do:

• [x] Initialise Keybase repo for the frontend
• [x] Connect keybase repo to github/signal-k/marketplace
• [x] Get frontend interacting with the smart contract ABI
• [x] Get frontend talking to Metamask
• [ ] Get frontend talking to backend of the game (hardhat/alchemy.com)
• [ ] Enable backing up/retrieval and migration of user data in the event of a smart contract update:

1. Deploy again using npx hardhat run scripts/deploy.js --network rinkeby
2. Change contractAddress in constants.js to be the new contract address we got from the step above in the terminal
3. Get the updated abi file from artifacts and copy-paste it into your web app just like we did above.

[Gizmotronn]

The next push, from Github will contain the GameContract.json file that was generated in the game's repository (located in marketplace-games/web3-test-game by hardhat when running the command npx hardhat run scripts/deploy.js. We've moved this over to the other keybase repository, which contains the React webapp. This allows for the webapp to talk to the contract, which has been deployed already on the Rinkeby test network.

[Gizmotronn]

We also need a way to backup existing data and reimport it in the game in case of a need to update the smart contract. I'll add this as a subtask on this issue for now.

[Gizmotronn]

• [x] Update keybase submodule name/directory in THIS repo

[Gizmotronn]

Big problem -> React frontend not displaying the NFTs (I think it's because of the GameContract JSON file)...

Might have to start from the beginning again

15

Right now, in the newContract branch on the react frontend submodule, we're experiencing another #17

[Gizmotronn]

16 https://github.com/Signal-K/marketplace/settings/secrets/actions https://github.com/signal-k/quartz/issues/3