/treasure

Primary LanguageTypeScript

Cryptopunks Viewer Dapp

Using Connectkit - No CryptoPunks

Screen.Recording.2023-05-23.at.3.37.07.PM.mov

Using input field - 2 CryptoPunks in that Wallet / 0x0000000000000000000000000000000000000000

Screen.Recording.2023-05-23.at.3.36.23.PM.mov

Objective

Create a web application that allows a user to view their Cryptopunks inventory

Requirements

The web application should consist of two pages:

Inventory Page

  • Allows a user to connect their wallet to the application or manually input a wallet address in a text input field
  • Displays the Cryptopunk token IDs owned by the provided wallet address
  • Clicking on any of the token IDs directs the user to the Details Page

Details Page

  • Given a Cryptopunks token ID, the Details Page displays the image and attribute associated with that token.

Nice to have

  • Inventory filters (male/female)
  • Animations (preferably using framer-motion)

Local Setup

  1. A boilerplate template is set up for you. Fork this repository and install necessary dependencies:
npm install
  1. Copy the example environment file and fill in with your own variables (see Instructions > Inventory Page below for more info):
cp .env.sample .env
  1. graphql-codegen is set up to generate types from the subgraph. You can use the client in lib/client.ts to query the subgraph after running code generation:
npm run codegen

Instructions

  • Use any front-end framework you want. At Treasure, we use Next.js/Remix and Tailwind CSS.
  • Use any wallet connection/Web3 framework you want. At Treasure, we use ConnectKit/RainbowKit and wagmi.
  • Inventory Page should pull data from the Cryptopunks subgraph. Please create an account at The Graph and obtain your own API key to use in the .env file.
  • Details Page should pull data directly from the Cryptopunks smart contract.
  • Optimize the code for readability and performance.
  • Feel free to add comments to explain your thought process.
  • When done, please send us a link to your repository.