Architecture
The front-end will extensively use React features, notably context and providers. If you do not understand these features, you will not understand the upcoming front end code. The interactive lessons at react.dev should provide the required background.
The visual design will be simple. A single-page web-app will leverage Next.js router to navigate between 3 routes:
Home
Drops: The collector can list registered tokens and claim them
Market: The token trading marketplace, shows listings
Inventory: Collector's inventory
A Material-UI NavBar will easily allow switching to the different pages, and also provide the Wallet connection button.
To keep our code base clean, we will seperate functionality across the following providers:
| Provider | Role |
|---|---|
WalletProvider | Beacon connection, account address, tz balance |
MetadataProvider | Fetch metadata from IPFS |
TzombiesProvider | Abstract the FA2 smart contract (registered tokens, balances, transfers...) |
MarketProvider | Abstract the marketplace smart contract (list sales, sell, buy...) |
WertProvider | Call the Wert payment widget |
Most of the above will follow a similar concept. On first load, it will fetch data from their relevant source (wallet, contracts...) and they will provide methods to update the data.
Environment variables
A few environment variables will be used in the project. I recommend setting them in .env.local file during development. The following variables will be used (contracts addresses are left blank intentionally, they should be set with the deployed contract addresses, see the smart contract section.
Be sure Completium is pointed at the sandbox endpoint, AND that the sandbox is running. You can switch endpoints with ccli switch endpoint. You can ensure the sandbox is running with ccli start sandbox. If the sandbox is already running, this command will output an error informing you that the container name "/my-sandbox" is already in use.
If you switch to the ghostnet network, use the following variables in .env.local:
Ensure you also connect Completium to the corresponding ghostnet endpoint with ccli switch endpoint.
Last updated