On-Chain Tiers

A simple component that shows a users progression through different tiers based on the amount of on-chain points they have.

Features

• 🎯 Configurable tier levels via tiers.json
• 📊 Visual progress tracking via OpenFormat's API
• 🌓 Dark/Light mode support
• 🔐 Wallet authentication via Privy
• 🎨 Clean UI with Shadcn
• ⚡️ Built with Next.js 14

Getting Started

Prerequisites

Before you begin, you'll need to set up accounts and configure the following:

1. Open Format Dashboard

• Create an account at Open Format Dashboard
• Create a new dApp to get your OPENFORMAT_DAPP_ID
• Generate an API key to get your OPENFORMAT_API_KEY

2. Privy Dashboard

• Create an account at Privy Dashboard
• Create a new app to get your NEXT_PUBLIC_PRIVY_APP_ID from the Settings section of your Privy app
• In the Login Methods section of your Privy app, enable:
  • Discord
  • Google
  • Email

Deploy

Instantly deploy your own copy of the template using Vercel or Netlify, using the template tiers.json file:

Local Development

1. Clone the repository:

git clone https://github.com/open-format/on-chain-tiers.git
cd on-chain-tiers

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Create a .env.local file in the root directory and add the following:

OPENFORMAT_API_KEY=your_openformat_api_key_here
OPENFORMAT_APP_ID=your_openformat_app_id_here
NEXT_PUBLIC_PRIVY_APP_ID=your_privy_app_id_here

4. Edit tiers.json as needed, this can be found in the components/tier-progression.tsx file. To do this you can use the tiers.json generator here. It is used to configure the tiers and their respective points required to progress to the next tier, it uses this structure:

const tiers = [
  {
    name: "Amateur",
    pointsRequired: 1000,
    color: "bg-orange-500"
  },
  {
    name: "Pro",
    pointsRequired: 2500,
    color: "bg-green-500"
  },
  {
    name: "Expert",
    pointsRequired: 5000,
    color: "bg-sky-500"
  },
  {
    name: "Legend",
    pointsRequired: 10000,
    color: "bg-pink-500"
  }
]

5. Start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

6. Open http://localhost:3000 in your browser.

Environment Variables

Variable	Required	Example	Description
NEXT_PUBLIC_PRIVY_APP_ID	Yes	cgg24234jq2373ryehutpc	Your Privy application ID
OPENFORMAT_API_KEY	Yes	b315346c-d43b-4b37-aee9-6dg415b8e	Your Open Format API Key
OPENFORMAT_DAPP_ID	Yes	0x0747d8a6e968422a4e506e820f757956c	Your Open Format dApp ID

Contributing

Contributions are welcome! Please open an issue or submit a pull request. If you have any questions, feel free to reach out at [email protected]