Cryptopunks Viewer Dapp

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

2. Copy the example environment file and fill in with your own variables (see Instructions > Inventory Page below for more info):

cp .env.sample .env

3. 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.