Customization Guide

This guide explains how to customize key UI and metadata elements of the NFT Collection App, including:

• Updating the logo
• Editing website metadata (title, description, etc.)
• Adding or removing NFT categories

All of this is managed from one file:

client/src/config/app.config.js

1. Updating the Logo

In the appConfig.UIOptions section, you’ll find the logo paths:

logoDark: '/logo.svg',
logoWhite: '/logo_white.svg',

To change the logo:

• Replace the existing SVG files in public/ with your own.
• Or update the file paths to point to your custom logo files:

logoDark: '/my_custom_logo.svg',
logoWhite: '/my_custom_logo_white.svg',

Make sure your logo files are placed in the client/public/ directory.

2. Editing Website Metadata

This metadata is used for SEO, browser titles, and social previews.

metadata: {
  title: 'ArtVault',
  description: 'ArtVault is a modern Web3 application...',
},

To customize:

Just replace the title and description values:

metadata: {
  title: 'My NFT Marketplace',
  description: 'A unique NFT platform for creators and collectors.',
},

4. Wallet Configuration

The app uses Thirdweb's wallet system to define which wallets are supported and which ones are recommended in the UI.

Inside client/src/config/app.config.js, you’ll find this configuration:

web3Options: {
  supportedWallets: [
    createWallet('io.metamask'),
    createWallet('com.binance'),
    createWallet('com.coinbase.wallet'),
    createWallet('me.rainbow'),
    createWallet('io.zerion.wallet'),
    createWallet('com.trustwallet.app'),
  ],
  recommendedWallets: [createWallet('io.metamask')],
},

supportedWallets

This is a list of all wallets that users can use to connect to your dApp. These identifiers come from the Thirdweb Wallet SDK

You can customize this list by:

• Removing any wallet you don’t want to support

• Adding new ones (if supported by Thirdweb)

Example:

supportedWallets: [
  createWallet('io.metamask'),
  createWallet('com.coinbase.wallet'),
],

recommendedWallets

These wallets are highlighted or prioritized in the connect UI. You can choose one or more wallets to recommend:

recommendedWallets: [
  createWallet('io.metamask'),
  createWallet('com.coinbase.wallet'),
],

If no wallet is "recommended", all supported wallets will be shown equally.

Tip

Use only wallets that are commonly used by your target audience. MetaMask is often a safe default.

4. Adding or Removing NFT Categories

Categories are defined under nftCategories:

nftCategories: [
  { title: 'Art', key: 'art', icon: <FaPaintBrush /> },
  { title: 'Music', key: 'music', icon: <FaMusic /> },
  ...
],

To add a new category:

1. Import the desired icon from react-icons.
2. Add a new object to the array:

import { FaLeaf } from 'react-icons/fa'; // example icon

nftCategories: [
  ...,
  { title: 'Nature', key: 'nature', icon: <FaLeaf /> },
],

To remove a category:

Simply delete the object you don’t want:

// Remove 'Sports' category
// { title: 'Sports', key: 'sports', icon: <FaFootballBall /> },

Each category must have a unique key and an icon from react-icons.

Done

Once you make these changes and save the file, the UI will update automatically with your custom branding and categories.