mintED TOASTS Frontend POC

About this project

The intention of this app is to build a basic frontend to support the creation and management of ERC1155-based NFTs. These NFTs are distributed as tokens of appreciation (TOASTs) by owners of a Toast application.

Note that this app is still a work in progress. Contributions welcome!

The app will have the following components:

• Viewer: User views the Toasts in their wallet
• Explorer: User views NFTs in any wallet/contract combo
• Creator: Admin creates and distributes Toasts

This project is based the Alchemy NFT API, and is generally a fork of their repo here

Key Components

• React: javascript framework for frontend development
• Tailwind: CSS framework
• Alchemy API: library for obtaining NFT data
• Node.js: the project runs on node and requires node.js 16.13.x

Installation

Follow these steps to setup this repo:

Prerequisites

• Node >= 16.13.x

Installation

1. Clone the github repo:

   git clone https://github.com/mint-ED/minted-frontend-poc.git

2. CD into the project's root folder and install the dependencies:

   npm install

3. Setup (free) account on Alchemy.com:

   • The Alchemy API provides access to the GetNFTs API used in our app.
   • Create an account. Then under the Dashboard click Create App.
   • Enter a Name and Description.
   • Environment: Development. Chain: Polygon. Network: Mainnet.
   • After the App is setup, click on View Key and copy the HTTP url. You'll use this in the next step.

4. Create config file

   • Rename the file ".env.example" to ".env.local".
   • In the file's first line, create the following entry: REACT_APP_ALCHEMY_POLYGON_MUMBAI="your-alchemy-key-goes here"

5. Run the application

   npm start

Usage

The Toasts app will contain the following functionality:

• Explorer
  • Desired Fuctionality: provide a Wallet Address and Contract Addresss, and return all NFTs associated with the wallet/contract combo. Wallet Address must be provided, but Contract Address is optional.
  • Current State: Working as expected.
  • Test It Out: sample wallet/contract are provided on the page.
  • Next Steps: make this a more engaging user experience.
• Viewer
  • Desired Fuctionality:Connect your wallet, which then displays the NFTs in your wallet associated with the Toasts smart contract (which is pulled from project config and not provided by the user).
  • Current State: Very clunky and partially complete. Metamask wallet connect works, though this value then needs to be copy/pasted into the textbox.
  • Test It Out: sample wallet is provided on the page.
  • Next Steps: Desired state is to remove the textbox and 'display my toasts' button and just refresh the page with NFTs once the wallet is connected.
• Creator
  • Desired Fuctionality: Ad admin, upon connecting via Metamask, can view existing Toasts, create new Toasts, and airdrop Toasts to wallets.
  • Current State: Not started.
  • Test It Out: n/a.
  • Next Steps: This will require integration into the Toasts smart contract.

Contributing

We welcome contributions to our project!

We follow basic open source best practices for contributing: creating a fork of our project, cloning, creating a new branch, issuing a pull request.

See here for a good explanation of our contribution guidelines.

Please identify an issue from our issues list in this repo, create a new branch, and have fun!

License

Distributed under the MIT License.

Contact

• gotminted.xyz - our website, with contact form
• @gotmintED - twitter

This repo was originally created by the team at Alchemy:

• @VittoStack
• @thatguyintech