jeff1010-web/nance-interface

An Interface of Nance platform

Nance Interface

Build

yarn install && yarn build && yarn export

Environment Variable

You should set these env variables accordingly for the app to work.

cp exmaple.env .env.local
vim .env.local

Nance API

Specify url of Nance backend as NEXT_PUBLIC_NANCE_API_URL, and your space id as NEXT_PUBLIC_OVERRIDE_SPACE.

Nance Auto API

Some tasks need to run at specific times, this is done by querying Nance-auto. We need a shared secret, NANCE_AUTO_KEY, to verify requests.

Ethereum

We need Infura RPC to interact with Ethereum. Please specify NEXT_PUBLIC_INFURA_KEY.

Juicebox Subgraph

To get infomation of Juicebox projects, we need to specify the subgraph url of Juicebox: JUICEBOX_SUBGRAPH_KEY.

Snapshot Subgraph

To find delegations, we need to specify the subgraph url of Snapshot: NEXT_PUBLIC_SNAPSHOT_SUBGRAPH_ID

NextAuth SIWE

To support session, you need to implement backend for NextAuth and set two env variables: NEXTAUTH_DOMAINS (a comma separated list of approved domains, no https://) and NEXTAUTH_SECRET

Etherscan API

NEXT_PUBLIC_ETHERSCAN_KEY Etherscan API Key, used to retrieve contract ABI when adding custom transaction action to proposal.

WalletConnect V2 ProjectId

NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID

Tenderly Simulation

TENDERLY_ACCESS_KEY, this will be used to run simulation.

Discord

We use the Discord API to fetch a user's guilds (serves) and guild channels when creating a Nance space. To do this you need to gather the following from the Discord Developer Portal:

• NEXT_PUBLIC_DISCORD_CLIENT_ID
• NEXT_PUBLIC_DISCORD_REDIRECT_URI_BASE (need to add this in your Discord Developer Portal as well)
• DISCORD_CLIENT_SECRET
• DISCORD_NANCE_BOT_KEY

We use a Discord webhook to alert us when someone fills out a contact form. To do this you need to set:

• DISCORD_CONTACT_WEBHOOK

Redis

We use a hosted Redis instance on Upstash to store a user's Discord session and link it to their wallet. To do this you need to set:

• REDIS_HOST
• REDIS_PORT
• REDIS_PASSWORD

Framework & Library

• react
• next.js
• recharts, render charts
• graphql-hooks, query with graphql
• wagmi & ethers, interact with chains
• react-vertical-timeline
• react-markdown
• tailwindcss, a utility-first CSS framework
• tailwindui
• snapshot.js
• flowbite, components on top of Tailwind CSS
• react-hook-form