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.

NEXT_PUBLIC_FA2_ADDRESS=
NEXT_PUBLIC_MARKET_ADDRESS=
# Use the next.js proxy to avoid CORS errors:
NEXT_PUBLIC_TEZOS_RPC=http://localhost:3000/sandbox
NEXT_PUBLIC_NETWORK=custom
NEXT_PUBLIC_WERT_PARTNER_ID=01H0SP3RFRFZPH7H4NAJM4HZ39

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:

NEXT_PUBLIC_TEZOS_RPC=https://ghostnet.smartpy.io
NEXT_PUBLIC_NETWORK=ghostnet

Ensure you also connect Completium to the corresponding ghostnet endpoint with ccli switch endpoint.