Skip to content

offshoredao/theoffshore-map-dapp

Repository files navigation

Offshore Genesis Map

Tools

  • NFT Drop: to create a lazy-minted ERC721 NFT Collection that our users can claim.
  • React SDK: to enable users to connect their wallets with the useMetamask hook, and access hooks such as useNFTDrop to interact with the NFT drop contract.
  • TypeScript SDK: to view the claimed supply, total supply, and mint NFTs from the drop.

Using This Repo

To create your own version of this template, you can use the following steps:

Run this command from the terminal to clone this project:

npx thirdweb create --template nft-drop

1. Deploy Your Own NFT Drop

You can learn how to do that Release an NFT drop.

Be sure to configure a name, description, and image for your NFT drop in the dashboard.

2. Configure the styles

You can fully customize the colors and style of this template by editing the values in the globals.css file.

You can configure:

  • The color of the background with --background-color
  • The color of the text with --text-color
  • The color of the button (is a gradient from primary to secondary color) with --color-primary and --color-secondary
  • The font with --font
  • The border colors with --border-color

3. Plug in your NFT Drop contract address

Replace the value of the myNftDropContractAddress inside index.tsx with your NFT Drop contract address you can find in the dashboard.

4. Configure Your Network

Inside _app.tsx you can configure the network you want to use:

// This is the chainId your dApp will work on.
const activeChainId = ChainId.Mainnet;

Create a .env.local and set as you need.

ALCHEMY_RPC="https://eth-goerli.g.alchemy.com/v2/MY_KEY"