GameFi
  • General Intro
  • 📃R & D
  • 💻Workshop
    • 🏎️NFT Web App Integration
      • 📄Prerequirements
      • Decentralized Storage
      • Smart Contract NFTs
      • Creating the React Dapp
      • Updating Startup File, Wallet Connect & Main Menu
      • Fetching NFTs, Stacks and Hiro API
      • Rendering NFTs owned
      • Selecting an NFT
      • Mapping Scenes
      • Creating the playable game
  • 🪙Trustless Rewards - M1
    • General idea
    • Flow Lobbies
    • Smart Contract
  • 🎨Customizable NFTs - M2
    • General Idea
    • Flow Customizable NFTs
    • Smart Contracts
      • Component
      • Customizable Wrapper
  • 🎁Lootbox on Chain - M3
    • General Idea
    • Tech Explained
    • Smart Contracts
      • Item
      • Lootbox
      • Lootbox Manager
  • 📝Message Signing
    • General Idea
    • GameFi Use Cases
    • App Explained
  • 🪵SFTs
    • General Idea & Base SFTs Static Deployments
    • Metadata Structure
    • Static Flow and Smart Contracts
    • Advanced SFTs Dynamic Deployments
    • Dynamic Flow and Smart Contracts
    • Dapp Integrating SFTs
      • Front End
      • Back End
    • Resources
  • ⚡Subnets
    • Overall for subnets
  • Roadmap
  • 💾Decentralized Storage
    • Gaia
    • Pinata
    • Host SFTs and NFTs into Pinata
    • Gaia integration to host game resources
  • 🔗External Knowledge
    • Getting Started
    • Hiro API
    • Stacks Docs
    • Clarity Book
    • Hiro Tutorials
Powered by GitBook
On this page
  • Update styles for rendered NFTs
  • Change styles based on selected NFT
  • This is the branch with the changes done:

Was this helpful?

  1. Workshop
  2. NFT Web App Integration

Selecting an NFT

The globals.css import will be done in App.js, the rest of the code from this page will be inserted on the MainMenu.js page.

Making it possible for the user to click any of the NFTs means we have to import some styles for the selected NFT’s appearance. Please copy globals.css file into the styles directory. After this, import it into the main App.js file.

import './styles/globals.css';

Update styles for rendered NFTs

After this, please add classNames to the <span> and <img> tags containing the NFT info. The result should be the following:

{NFTsOwned.map((nftId) => (
  <span id={`nft${nftId}`} key={nftId} className="characterContainer">
    <img
      className="characterImg"
      src={`https://stacksgamefi.mypinata.cloud/ipfs/QmNz74TN66hgi9X4wZ1ch9hXKxaywG5soEQPMfDqEMLVsd/${nftId}.png`}
      alt={`character ${nftId}`}
    ></img>
    {`NFT#${nftId}`}
  </span>
))}

In order to memorize the user’s selected NFT, we will need a state to keep track of it, initialized by '' value inside MainMenu. The initial value on the MainMenu component’s load means the user has not selected any NFT.

const [selectedNFT, setSelectedNFT] = useState('');

Change styles based on selected NFT

We want the selection to stand out the other NFTs. For this, we will create a changeSelection constant which will take two parameters: the previous selected NFT and the currently selected one:

const changeSelection = (nft, localSelectedNFT) => {
  document.getElementById(`nft${localSelectedNFT}`)?.classList.remove('card-selected');
  document.getElementById(`nft${nft}`)?.classList.add('card-selected');
};

This constant will make sure that the new clicked NFT will be highlighted, and the previous one not anymore. Next we will need an event handler, for handling the user’s clicks inside the NFTs interface. This handler first calls the changeSelection, making the CSS changes needed for the UI appearance. Let’s make an alert() to see if the clicked NFT’s id is the same to the one the constant uses as a parameter. Least but not last, we have to set the selectedNFT's constant value to the id received as a parameter.

const handleClickNFT = (id) => {
  changeSelection(id, selectedNFT);
  alert(`selected NFT:  ${id}`);
  setSelectedNFT(id);
};

Now that we have created the handler, let’s stick it to the corresponding HTML tag’s onClick function (line 7):

{NFTsOwned.map((nftId) => (
  <span id={`nft${nftId}`} key={nftId} className="characterContainer">
    <img
      className="characterImg"
      src={`https://stacksgamefi.mypinata.cloud/ipfs/QmNz74TN66hgi9X4wZ1ch9hXKxaywG5soEQPMfDqEMLVsd/${nftId}.png`}
      alt={`duck ${nftId}`}
      width="50"
      onClick={() => handleClickNFT(nftId)}
    ></img>
    {`NFT#${nftId}`}
  </span>
))}

This is the branch with the changes done:

You can check the exact changes in this commit referring to them

PreviousRendering NFTs ownedNextMapping Scenes

Last updated 2 years ago

Was this helpful?

💻
🏎️
https://github.com/BowTiedDeployer/workshop-nft-integration/tree/dapp/4-select-nftgithub.com
branch dapp/4-select-nft
https://github.com/BowTiedDeployer/workshop-nft-integration/commit/fd2b56e7e6119882bfe8475a17f9b5cd0a6ceb42github.com
commit fd2b56e7e6119882bfe8475a17f9b5cd0a6ceb42