Implementing Frontend V - HTML/CSS Walkthrough

Using Hooks to Display Token Data from Moralis

In this video, we review how to use the custom hooks we've built to interact with Moralis and display relevant token data. The focus here is on functionality, so we’ll briefly touch on HTML/CSS but won’t go into detail.

1. Index Page Overview

The index page is the entry point of the application. It includes a "Connect Wallet" button that uses our useAuthentication hook.

• When clicked, it triggers handleConnect.
• If the wallet is not connected, only the connect button is shown.
• Once connected, the user can navigate to:
• Balances
• Mint (Meet)
• Fun Tokens

2. Balances Page

On the Balances page:

• We use a TokenCard component to display individual token data such as:
• Symbol
• Balance
• Address
• Logo

Token data is fetched through our useBalances hook, which returns:

• tokenBalances
• message (in case of errors)

A loading message is shown until data is available. Once fetched, each token is rendered with a card, and the native token balance is displayed as plain text.

3. Meet (Mint) Page

The Meet page acts as a simple token-gated area. We check if the user’s native token balance is a number greater than zero:

• If eligible, a countdown is shown as placeholder content.
• If not, access is restricted.

This can later be extended to include actual gated features such as video access or exclusive content.

4. Fun Tokens Page

In the Fun Tokens section, we use the useTokenMetadata hook to fetch metadata for all available tokens.

Each token is displayed with:

• Symbol, address, decimals
• Logo
• Boolean flags like possibleScam, verifiedCollection
• Created date (formatted properly)

This is a more detailed version of the TokenCard used in the Balances section, handling cases where data might be null or malformed.

5. App Component and Context Integration

In the App component:

• We wrap everything with the Wagmi Config and Context Provider to ensure all components have access to shared wallet and blockchain state.
• Without this setup, hooks like useAddress or useBalances wouldn't work as expected.

This global context is essential for maintaining a seamless user experience across pages.

Summary

This video demonstrated how to:

• Use custom hooks to fetch and display token data.
• Apply token gating to restrict access based on user balance.
• Handle real-time UI updates using React state and Wagmi integration.
• Organize logic cleanly across multiple pages.