27 | {displaySteps ? (
28 | <>
29 | -
30 |
31 | 1 y
32 |
33 | 2 y
34 |
35 | 3 y
36 |
37 | ) : (
38 | <>
39 | {' '}
40 | {new Date(min).toISOString().substring(0, 10)}
41 |
42 |
43 |
44 |
45 | )}
46 |
47 | 4 y
48 |
49 |
50 | )
51 | }
52 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Nation3 Citizen App
2 |
3 | [](https://vercel.com/nation3dao/citizen-app/deployments)
4 | 
5 | 
6 |
7 | ---
8 |
9 | [](https://app.nation3.org)
10 |
11 | The Nation3 Citizen App at https://app.nation3.org is where people can connect their Ethereum wallet and interact with the [foundational](https://github.com/nation3/foundations) Nation3 smart contracts.
12 |
13 | > [](https://app.nation3.org)
14 |
15 |
16 | ## File Structure
17 |
18 | The code in this repository is structured into two main parts:
19 |
20 | ```
21 | .
22 | ├── contracts # The smart contracts
23 | └── ui # The user interface (UI) for interacting with the smart contracts
24 | ```
25 |
26 | ## Run the UI locally
27 |
28 | See [ui/README.md](ui/README.md)
29 |
--------------------------------------------------------------------------------
/ui/components/MainCard.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default function MainCard({
4 | children,
5 | title,
6 | loading,
7 | gradientBg,
8 | maxWidthClassNames,
9 | }: any) {
10 | return (
11 | <>
12 | {!loading ? (
13 |
18 |
35 | ) : (
36 |
37 | )}
38 |
39 | )
40 | }
41 |
--------------------------------------------------------------------------------
/.github/workflows/ui_sepolia.yml:
--------------------------------------------------------------------------------
1 | name: /ui (Sepolia) CI
2 |
3 | on:
4 | push:
5 | branches: [ "main" ]
6 | pull_request:
7 | branches: [ "main" ]
8 |
9 | jobs:
10 | build:
11 |
12 | runs-on: ubuntu-latest
13 |
14 | defaults:
15 | run:
16 | working-directory: ui
17 |
18 | strategy:
19 | matrix:
20 | node-version: [18.x, 20.x]
21 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
22 |
23 | steps:
24 | - uses: actions/checkout@v3
25 | - name: Use Node.js ${{ matrix.node-version }}
26 | uses: actions/setup-node@v3
27 | with:
28 | node-version: ${{ matrix.node-version }}
29 | cache: 'npm'
30 | cache-dependency-path: ui/yarn.lock
31 | - run: npm install --global yarn
32 | - run: echo $(yarn --version)
33 | - run: cp .env.sepolia .env.local
34 | - run: yarn install
35 | - run: yarn build
36 | - run: yarn lint
37 | - run: yarn e2e:headless
38 | - run: yarn test
39 | - run: yarn test:coverage
40 | - name: Upload coverage reports to Codecov
41 | uses: codecov/codecov-action@v4.0.1
42 | with:
43 | token: ${{ secrets.CODECOV_TOKEN }}
44 | slug: nation3/citizen-app
45 |
--------------------------------------------------------------------------------
/ui/README.md:
--------------------------------------------------------------------------------
1 | # Nation3 Citizen App UI
2 |
3 | https://app.nation3.org
4 |
5 | ## Run the UI locally
6 |
7 | Navigate to the folder of the UI app:
8 | ```
9 | cd ui/
10 | ```
11 |
12 | Install the dependencies:
13 | ```
14 | yarn install
15 | ```
16 |
17 | Add variables to your local development environment:
18 | ```
19 | cp .env.mainnet .env.local
20 | ```
21 | or
22 | ```
23 | cp .env.sepolia .env.local
24 | ```
25 |
26 |
27 | Build:
28 | ```
29 | yarn build
30 | ```
31 |
32 | Lint:
33 | ```
34 | yarn lint
35 | ```
36 |
37 | Start the development server:
38 | ```
39 | yarn dev
40 | ```
41 |
42 | Then open http://localhost:3000 in a browser.
43 |
44 | ## Integration Testing
45 |
46 | Run the integration tests:
47 | ```
48 | yarn cypress
49 | ```
50 |
51 | Run the integration tests headlessly:
52 | ```
53 | yarn cypress:headless
54 | ```
55 |
56 | ## Unit Testing
57 |
58 | Run unit tests:
59 | ```
60 | yarn test
61 | ```
62 |
63 | ## Code Coverage
64 |
65 | [](https://codecov.io/gh/nation3/citizen-app)
66 |
67 | [](https://codecov.io/gh/nation3/citizen-app)
68 |
69 | Run code coverage:
70 | ```
71 | yarn test:coverage
72 | ```
73 |
--------------------------------------------------------------------------------
/ui/lib/sign-agreement.ts:
--------------------------------------------------------------------------------
1 | import {
2 | nationPassportNFTIssuer,
3 | nationPassportAgreementStatement,
4 | nationPassportAgreementURI
5 | } from './config'
6 | import { networkToId } from './network-id'
7 | import { useSignTypedData } from './use-wagmi'
8 |
9 | export const domain = {
10 | name: 'PassportIssuer',
11 | version: '1',
12 | chainId: networkToId(process.env.NEXT_PUBLIC_CHAIN),
13 | verifyingContract: nationPassportNFTIssuer,
14 | }
15 |
16 | export const types = {
17 | Agreement: [
18 | { name: 'statement', type: 'string' },
19 | { name: 'termsURI', type: 'string' },
20 | ],
21 | }
22 |
23 | export const value = {
24 | statement: `${nationPassportAgreementStatement}`,
25 | termsURI: `${nationPassportAgreementURI}`,
26 | }
27 |
28 | export function useSignAgreement({ onSuccess }: { onSuccess: Function }) {
29 | return useSignTypedData({
30 | domain,
31 | types,
32 | value,
33 | onSuccess,
34 | })
35 | }
36 |
37 | export async function storeSignature(signature: string, tx: string) {
38 | const response = await fetch('/api/store-signature', {
39 | method: 'POST',
40 | headers: {
41 | 'Content-Type': 'application/json',
42 | },
43 | body: JSON.stringify({ signature, tx }),
44 | })
45 | return response.json()
46 | }
47 |
--------------------------------------------------------------------------------
/ui/public/passport/ballot.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/ui/components/SwitchNetworkBanner.tsx:
--------------------------------------------------------------------------------
1 | import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
2 | import React from 'react'
3 | import { useNetwork } from '../lib/use-wagmi'
4 |
5 | const chainIds = {
6 | mainnet: 1,
7 | sepolia: 11155111
8 | }
9 |
10 | type Indexable = {
11 | [key: string]: any
12 | }
13 |
14 | export default function SwitchNetworkBanner({ newNetwork }: any) {
15 | const { switchNetwork } = useNetwork()
16 |
17 | const capitalized = (network: any) =>
18 | network.charAt(0).toUpperCase() + network.slice(1)
19 |
20 | return (
21 |
23 |
34 |
24 |
33 | 29 | {title} 30 |
31 | {children} 32 |
22 |
38 | )
39 | }
40 |
--------------------------------------------------------------------------------
/ui/lib/numbers.test.ts:
--------------------------------------------------------------------------------
1 | import { describe, expect, test } from '@jest/globals'
2 | import { BigNumber } from 'ethers'
3 | import { NumberType, transformNumber, isFixedDecimalsNumber } from './numbers'
4 |
5 | describe('transformNumber', () => {
6 | test("transformNumber to Number", () => {
7 | const actual = transformNumber(333, NumberType.number)
8 | expect(actual).toBe(Number(333))
9 | })
10 |
11 | test("transformNumber to BigNumber", () => {
12 | const actual = transformNumber(333, NumberType.bignumber)
13 | expect(actual).toBeInstanceOf(BigNumber)
14 | })
15 |
16 | test("transformNumber to String", () => {
17 | const actual = transformNumber(333, NumberType.string)
18 | expect(actual).toBe("333.000000000000000000")
19 | })
20 |
21 | test("transformNumber to String (2 decimals)", () => {
22 | const actual = transformNumber(333, NumberType.string, 2)
23 | expect(actual).toBe("333.00")
24 | })
25 | })
26 |
27 | describe('isFixedDecimalsNumber', () => {
28 | test('Is working for integers', () => {
29 | const isValid = isFixedDecimalsNumber(12345);
30 | expect(isValid).toBe(true)
31 | })
32 |
33 | test('Fails for too long decimals', () => {
34 | const isValid = isFixedDecimalsNumber('1.111111111111111111111111111111');
35 | expect(isValid).toBe(false)
36 | })
37 |
38 | test('Check "decimals" param is working properly', ()=> {
39 | const isValid = isFixedDecimalsNumber(1.12345, 2);
40 | expect(isValid).toBe(false)
41 | })
42 | })
--------------------------------------------------------------------------------
/ui/pages/api/store-signature.ts:
--------------------------------------------------------------------------------
1 | import { ethers } from 'ethers'
2 | import type { NextApiRequest, NextApiResponse } from 'next'
3 | import { NFTStorage, Blob } from 'nft.storage'
4 | import { nationPassportNFTIssuer } from '../../lib/config'
5 | import { provider } from '../../lib/connectors'
6 | import { domain, types, value } from '../../lib/sign-agreement'
7 |
8 | const client = new NFTStorage({
9 | token: process.env.NFTSTORAGE_KEY || '',
10 | })
11 |
12 | export default async function storeSignature(
13 | req: NextApiRequest,
14 | res: NextApiResponse
15 | ) {
16 | try {
17 | const prov = provider()
18 |
19 | const sender = ethers.utils.verifyTypedData(
20 | domain,
21 | types,
22 | value,
23 | req.body.signature
24 | )
25 | const { from, to, confirmations } = await prov.getTransaction(req.body.tx)
26 | // To prevent spam attacks: Check that the sender of the transaction is the same as the uploader,
27 | // the receiver is the passport issuer and the transaction is not very old
28 | if (
29 | sender === from &&
30 | to === nationPassportNFTIssuer &&
31 | confirmations < 14 * 60
32 | ) {
33 | const data = new Blob([
34 | JSON.stringify({ v: 1, sig: req.body.signature, tx: req.body.tx }),
35 | ])
36 | const cid = await client.storeBlob(data)
37 | res.status(200).json({ cid })
38 | }
39 | } catch (e) {
40 | console.error(e)
41 | res.status(500).json({
42 | error: `Storing your signature failed. This is your signature: ${req.body.signature}`,
43 | })
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/ui/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "citizen-app",
3 | "private": true,
4 | "scripts": {
5 | "dev": "next dev",
6 | "build": "next build",
7 | "start": "next start",
8 | "lint": "next lint",
9 | "cypress": "cypress open",
10 | "cypress:headless": "cypress run",
11 | "e2e": "start-server-and-test dev http://localhost:3000 cypress",
12 | "e2e:headless": "start-server-and-test dev http://localhost:3000 cypress:headless",
13 | "test": "jest",
14 | "test:coverage": "jest --coverage --collectCoverageFrom=./lib/**"
15 | },
16 | "dependencies": {
17 | "@heroicons/react": "^2.0.11",
18 | "@metamask/eth-sig-util": "^7.0.1",
19 | "@trivago/prettier-plugin-sort-imports": "^4.3.0",
20 | "@types/jest": "^29.5.12",
21 | "@types/node": "^20.12.11",
22 | "@types/react": "18.0.1",
23 | "@types/react-dom": "^18.0.4",
24 | "autoprefixer": "^10.4.0",
25 | "cypress": "^13.13.3",
26 | "daisyui": "^2.13.5",
27 | "eslint": "8.57.0",
28 | "eslint-config-next": "13",
29 | "eslint-config-prettier": "^9.1.0",
30 | "ethers": "^5.7.1",
31 | "jest": "^29.7.0",
32 | "next": "14",
33 | "nft.storage": "^7.1.1",
34 | "postcss": "^8.4.38",
35 | "prettier": "^3.3.3",
36 | "react": "^18.3.1",
37 | "react-animated-3d-card": "^1.0.2",
38 | "react-blockies": "^1.4.1",
39 | "react-confetti": "^6.0.1",
40 | "react-dom": "^18.3.1",
41 | "react-use": "^17.5.0",
42 | "start-server-and-test": "^2.0.5",
43 | "tailwindcss": "^3.4.10",
44 | "ts-jest": "^28.0.8",
45 | "typescript": "^4.7.4",
46 | "use-nft": "^0.12.0",
47 | "wagmi": "0.12.8"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/ui/lib/use-wagmi.ts:
--------------------------------------------------------------------------------
1 | import {
2 | useConnect as _useConnect,
3 | useAccount as _useAccount,
4 | useBalance as _useBalance,
5 | useNetwork as _useNetwork,
6 | useContractRead as _useContractRead,
7 | useContractWrite as _useContractWrite,
8 | useSignTypedData as _useSignTypedData,
9 | } from 'wagmi'
10 | import { useStaticCall as _useStaticCall } from './static-call'
11 | import { useHandleError } from './use-handle-error'
12 |
13 | export function useConnect() {
14 | return useHandleError(_useConnect())
15 | }
16 |
17 | // custom extension of wagmi
18 | export function useStaticCall(params: any) {
19 | return useHandleError(_useStaticCall(params))
20 | }
21 |
22 | export function useAccount(params?: any) {
23 | return useHandleError(_useAccount(params))
24 | }
25 |
26 | export function useNetwork() {
27 | return useHandleError(_useNetwork())
28 | }
29 |
30 | export function useBalance(params: any) {
31 | return useHandleError(_useBalance(params))
32 | }
33 |
34 | export function useContractRead(
35 | config: any,
36 | functionName: any,
37 | args?: any,
38 | overrides?: any,
39 | throwOnRevert?: any
40 | ) {
41 | return useHandleError(
42 | _useContractRead({ ...config, functionName, args, overrides }),
43 | throwOnRevert
44 | )
45 | }
46 |
47 | export function useContractWrite(
48 | config: any,
49 | functionName: any,
50 | args: any,
51 | overrides?: any,
52 | throwOnRevert?: any
53 | ) {
54 | return useHandleError(
55 | _useContractWrite({ ...config, functionName, args, overrides }),
56 | throwOnRevert
57 | )
58 | }
59 |
60 | export function useSignTypedData(params: any) {
61 | return useHandleError(_useSignTypedData(params))
62 | }
63 |
--------------------------------------------------------------------------------
/ui/public/fonts/stylesheet.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Bossa';
3 | src: url('Bossa-Black.woff2') format('woff2'),
4 | url('Bossa-Black.woff') format('woff');
5 | font-weight: 900;
6 | font-style: normal;
7 | font-display: swap;
8 | }
9 |
10 | @font-face {
11 | font-family: 'Bossa';
12 | src: url('Bossa-Regular.woff2') format('woff2'),
13 | url('Bossa-Regular.woff') format('woff');
14 | font-weight: normal;
15 | font-style: normal;
16 | font-display: swap;
17 | }
18 |
19 | @font-face {
20 | font-family: 'Bossa';
21 | src: url('Bossa-Light.woff2') format('woff2'),
22 | url('Bossa-Light.woff') format('woff');
23 | font-weight: 300;
24 | font-style: normal;
25 | font-display: swap;
26 | }
27 |
28 | @font-face {
29 | font-family: 'Bossa';
30 | src: url('Bossa-Medium.woff2') format('woff2'),
31 | url('Bossa-Medium.woff') format('woff');
32 | font-weight: 500;
33 | font-style: normal;
34 | font-display: swap;
35 | }
36 |
37 | @font-face {
38 | font-family: 'Bossa';
39 | src: url('Bossa-Bold.woff2') format('woff2'),
40 | url('Bossa-Bold.woff') format('woff');
41 | font-weight: bold;
42 | font-style: normal;
43 | font-display: swap;
44 | }
45 |
46 | @font-face {
47 | font-family: 'UniversalSans';
48 | src: url('UniversalSans-Italic.woff2') format('woff2'),
49 | url('UniversalSans-Italic.woff') format('woff');
50 | font-weight: normal;
51 | font-style: italic;
52 | font-display: swap;
53 | }
54 |
55 | @font-face {
56 | font-family: 'UniversalSans';
57 | src: url('UniversalSans-Regular.woff2') format('woff2'),
58 | url('UniversalSans-Regular.woff') format('woff');
59 | font-weight: normal;
60 | font-style: normal;
61 | font-display: swap;
62 | }
63 |
--------------------------------------------------------------------------------
/ui/lib/numbers.ts:
--------------------------------------------------------------------------------
1 | import { BigNumber, ethers } from 'ethers'
2 |
3 | function stringToNumber(string: any, decimals: any) {
4 | return Number(string).toFixed(decimals)
5 | }
6 |
7 | export enum NumberType {
8 | number = 'number',
9 | bignumber = 'bignumber',
10 | string = 'string',
11 | }
12 |
13 | export function transformNumber(
14 | num: number | BigNumber | string,
15 | to: NumberType,
16 | decimals = 18
17 | ): BigNumber | string | number {
18 | if (!num) {
19 | return to === NumberType.bignumber ? ethers.BigNumber.from('0') : 0
20 | }
21 |
22 | if (to === NumberType.bignumber) {
23 | if (num instanceof ethers.BigNumber) return num
24 |
25 | return ethers.utils.parseUnits(
26 | typeof num === 'string' ? num : num.toString(),
27 | decimals
28 | )
29 | } else if (to === NumberType.number) {
30 | if (typeof num === 'number') return num
31 |
32 | if (num instanceof ethers.BigNumber) {
33 | return stringToNumber(ethers.utils.formatUnits(num, 18), decimals)
34 | } else if (typeof num === 'string') {
35 | return parseFloat(num).toFixed(decimals)
36 | }
37 | } else if (to === NumberType.string) {
38 | if (typeof num === 'string') return num
39 |
40 | if (num instanceof ethers.BigNumber) {
41 | return stringToNumber(
42 | ethers.utils.formatUnits(num, 18),
43 | decimals
44 | ).toString()
45 | } else if (typeof num === 'number') {
46 | return num.toFixed(decimals).toString()
47 | }
48 | }
49 | return 0
50 | }
51 |
52 | export function isFixedDecimalsNumber(value: any, decimals = 18) {
53 | const NUMBER_REGEX = RegExp(`^(\\d*\\.{0,1}\\d{0,${decimals}}$)`)
54 | const isValid = value.toString().match(NUMBER_REGEX)
55 |
56 | return Boolean(isValid);
57 | }
58 |
--------------------------------------------------------------------------------
/ui/cypress/e2e/liquidity.cy.ts:
--------------------------------------------------------------------------------
1 | describe('Liquidity', () => {
2 | beforeEach(() => {
3 | cy.visit('/liquidity')
4 |
5 | cy.intercept("GET", "https://api.coingecko.com/api/v3/simple/price?ids=nation3,ethereum&vs_currencies=usd", {
6 | body: {
7 | "ethereum": {
8 | "usd": 2672.05
9 | },
10 | "nation3": {
11 | "usd": 30.75
12 | }
13 | },
14 | });
15 | });
16 |
17 | it('stake: type a deposit amount', () => {
18 |
19 | // Expect default value to be '0'
20 | cy.get('#depositValue')
21 | .invoke('val')
22 | .then(val => {
23 | expect(val).to.equal('0')
24 | })
25 |
26 | // Clear the default '0' value before typing a number
27 | cy.get('#depositValue').clear()
28 |
29 | // Type a number
30 | cy.get('#depositValue').type('3.3333')
31 |
32 | // Expect the value to no longer be '0'
33 | cy.get('#depositValue')
34 | .invoke('val')
35 | .then(val => {
36 | expect(val).to.equal('3.3333')
37 | })
38 | })
39 |
40 | it('unstake: type a withdrawal amount', () => {
41 |
42 | // Click the "Unstake" tab
43 | cy.get("#unstakeTab").click()
44 |
45 | // Expect default value to be '0'
46 | cy.get('#withdrawalValue')
47 | .invoke('val')
48 | .then(val => {
49 | expect(val).to.equal('0')
50 | })
51 |
52 | // Clear the default '0' value before typing a number
53 | cy.get('#withdrawalValue').clear()
54 |
55 | // Type a number
56 | cy.get('#withdrawalValue').type('0.3333')
57 |
58 | // Expect the value to no longer be '0'
59 | cy.get('#withdrawalValue')
60 | .invoke('val')
61 | .then(val => {
62 | expect(val).to.equal('0.3333')
63 | })
64 | })
65 | })
66 |
67 | export {}
68 |
--------------------------------------------------------------------------------
/ui/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import { ethers } from 'ethers'
2 | import { useEffect, useState } from 'react'
3 | import React from 'react'
4 | import { NftProvider } from 'use-nft'
5 | import { WagmiConfig, createClient } from 'wagmi'
6 | import { connectors, provider as externalProvider } from '../lib/connectors'
7 | import { ErrorProvider } from '../components/ErrorProvider'
8 | import Layout from '../components/Layout'
9 | import '../styles/globals.css'
10 |
11 | function App({ Component, pageProps }: any) {
12 | const [client, setClient] = useState
23 |
26 |
27 | {/* There's a small chance the wallet used won't support switchNetwork, in which case the user needs to manually switch */}
28 | {/* Also check if we have specified a chain ID for the network */}
29 | {switchNetwork && (chainIds as Indexable)[newNetwork] && (
30 | switchNetwork((chainIds as Indexable)[newNetwork])}
33 | >
34 | Switch to {capitalized(newNetwork)}
35 |
36 | )}
37 |
58 |
59 |
60 | ) : approval ? (
61 |
71 | {children}
72 |
73 | )}
74 |
75 | )
76 | }
77 |
--------------------------------------------------------------------------------
/ui/lib/config.ts:
--------------------------------------------------------------------------------
1 | const zeroAddress = '0x0000000000000000000000000000000000000000'
2 |
3 | interface DeploymentConfig {
4 | nationToken: string,
5 | veNationToken: string,
6 | balancerVault: string,
7 | balancerPoolId: string,
8 | balancerLPToken: string,
9 | lpRewardsContract: string,
10 | nationPassportNFT: string,
11 | nationPassportNFTIssuer: string,
12 | nationPassportAgreementStatement: string,
13 | nationPassportAgreementURI: string,
14 | }
15 |
16 | interface Config {
17 | nationToken: string,
18 | veNationToken: string,
19 | balancerDomain: string,
20 | balancerVault: string,
21 | balancerPoolId: string,
22 | balancerLPToken: string,
23 | etherscanDomain: string,
24 | lpRewardsContract: string,
25 | mobilePassportDomain: string,
26 | nationPassportNFT: string,
27 | nationPassportNFTIssuer: string,
28 | nationPassportAgreementStatement: string,
29 | nationPassportAgreementURI: string,
30 | }
31 |
32 |
33 | const chain = process.env.NEXT_PUBLIC_CHAIN || 'sepolia';
34 | const defaultConfig = require(`../../contracts/deployments/${chain}.json`) as DeploymentConfig
35 | const config: Config = {
36 | nationToken: defaultConfig.nationToken || zeroAddress,
37 | veNationToken: defaultConfig.veNationToken || zeroAddress,
38 | balancerDomain: chain === 'mainnet' ? 'https://app.balancer.fi/#/ethereum' : `https://app.balancer.fi/#/${chain}`,
39 | balancerVault: defaultConfig.balancerVault || zeroAddress,
40 | balancerPoolId: defaultConfig.balancerPoolId || zeroAddress,
41 | balancerLPToken: defaultConfig.balancerLPToken || zeroAddress,
42 | etherscanDomain: chain === 'mainnet' ? 'https://etherscan.io' : `https://${chain}.etherscan.io`,
43 | lpRewardsContract: defaultConfig.lpRewardsContract || zeroAddress,
44 | mobilePassportDomain: chain === 'mainnet' ? 'https://passports.nation3.org' : `https://mobile-passport-${chain}.vercel.app`,
45 | nationPassportNFT: defaultConfig.nationPassportNFT || zeroAddress,
46 | nationPassportNFTIssuer: defaultConfig.nationPassportNFTIssuer || zeroAddress,
47 | nationPassportAgreementStatement: defaultConfig.nationPassportAgreementStatement || "",
48 | nationPassportAgreementURI: defaultConfig.nationPassportAgreementURI || "",
49 | }
50 |
51 | console.log(config)
52 |
53 | export const {
54 | nationToken,
55 | veNationToken,
56 | balancerDomain,
57 | balancerVault,
58 | balancerPoolId,
59 | balancerLPToken,
60 | etherscanDomain,
61 | lpRewardsContract,
62 | mobilePassportDomain,
63 | nationPassportNFT,
64 | nationPassportNFTIssuer,
65 | nationPassportAgreementStatement,
66 | nationPassportAgreementURI,
67 | } = config
68 |
--------------------------------------------------------------------------------
/ui/lib/ve-token.ts:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react'
2 | import VotingEscrow from '../abis/VotingEscrow.json'
3 | import { veNationToken } from '../lib/config'
4 | import { useBalance, useContractRead, useContractWrite } from './use-wagmi'
5 |
6 | const contractParams = {
7 | address: veNationToken,
8 | abi: VotingEscrow.abi,
9 | }
10 |
11 | export function useVeNationBalance(address: any) {
12 | return useBalance({
13 | address,
14 | token: veNationToken,
15 | watch: true,
16 | enabled: !!address,
17 | })
18 | }
19 |
20 | let gasLimits = {
21 | locked: 330000,
22 | create_lock: 600000,
23 | increase_amount: 600000,
24 | increase_unlock_time: 600000,
25 | withdraw: 480000,
26 | }
27 |
28 | export function useVeNationLock(address: any) {
29 | return useContractRead(
30 | {
31 | ...contractParams,
32 | watch: true,
33 | enabled: !!address,
34 | },
35 | 'locked',
36 | [address]
37 | )
38 | }
39 |
40 | export function useVeNationCreateLock(amount: any, time: any) {
41 | return useContractWrite(
42 | contractParams,
43 | 'create_lock',
44 | [amount, time],
45 | { gasLimit: gasLimits.create_lock },
46 | )
47 | }
48 |
49 | export function useVeNationIncreaseLock({
50 | newAmount,
51 | currentTime,
52 | newTime,
53 | }: any) {
54 | const { writeAsync: increaseLockAmount, data: lockAmountData } =
55 | useVeNationIncreaseLockAmount(newAmount)
56 | const { writeAsync: increaseLockTime, data: lockTimeData } =
57 | useVeNationIncreaseLockTime(newTime)
58 | return useMemo(() => {
59 | if (newAmount && newAmount.gt(0)) {
60 | return { writeAsync: increaseLockAmount, data: lockAmountData }
61 | }
62 | if (newTime && currentTime && newTime.gt(currentTime)) {
63 | return { writeAsync: increaseLockTime, data: lockTimeData }
64 | }
65 | return {}
66 | }, [newAmount, currentTime, newTime, increaseLockAmount, increaseLockTime, lockAmountData, lockTimeData])
67 | }
68 |
69 | export function useVeNationIncreaseLockAmount(amount: any) {
70 | return useContractWrite(
71 | contractParams,
72 | 'increase_amount',
73 | [amount],
74 | { gasLimit: gasLimits.increase_amount }
75 | )
76 | }
77 |
78 | export function useVeNationIncreaseLockTime(time: any) {
79 | return useContractWrite(
80 | contractParams,
81 | 'increase_unlock_time',
82 | [time],
83 | { gasLimit: gasLimits.increase_unlock_time }
84 | )
85 | }
86 |
87 | export function useVeNationWithdrawLock() {
88 | return useContractWrite(
89 | contractParams,
90 | 'withdraw',
91 | [],
92 | { gasLimit: gasLimits.withdraw }
93 | )
94 | }
95 |
96 | export function useVeNationSupply() {
97 | return useContractRead(contractParams, 'totalSupply')
98 | }
99 |
--------------------------------------------------------------------------------
/ui/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | UserPlusIcon,
3 | LockClosedIcon,
4 | PlusIcon,
5 | } from '@heroicons/react/24/outline'
6 | import Image from 'next/image'
7 | import Link from 'next/link'
8 | import React from 'react'
9 | import { balancerDomain, nationToken } from '../lib/config'
10 | import GradientLink from '../components/GradientLink'
11 | import Head from '../components/Head'
12 | import HomeCard from '../components/HomeCard'
13 | import flag from '../public/flag.svg'
14 |
15 | export default function Index() {
16 | return (
17 | <>
18 |
20 |
21 | Welcome to Nation3
22 |
24 |
25 |
79 |
80 | )
81 | }
82 |
--------------------------------------------------------------------------------
/ui/components/ActionNeedsTokenApproval.tsx:
--------------------------------------------------------------------------------
1 | import { InformationCircleIcon } from '@heroicons/react/24/outline'
2 | import { BigNumber } from 'ethers'
3 | import { useEffect, useState } from 'react'
4 | import { useTokenAllowance, useTokenApproval } from '../lib/approve'
5 | import { NumberType, transformNumber } from '../lib/numbers'
6 | import { useAccount } from '../lib/use-wagmi'
7 | import ActionButton from './ActionButton'
8 |
9 | export default function ActionNeedsTokenApproval({
10 | className,
11 | children,
12 | amountNeeded,
13 | token,
14 | spender,
15 | approveText,
16 | action,
17 | preAction,
18 | allowUnlimited = true,
19 | }: any) {
20 | const { address } = useAccount()
21 | const { data: tokenAllowance, isLoading: tokenAllowanceLoading } =
22 | useTokenAllowance({ token, address, spender })
23 | const [approveUnlimited, setApproveUnlimited] = useState(allowUnlimited)
24 | const [weiAmountNeeded, setWeiAmountNeeded] = useState
21 | Welcome to Nation3
22 |
24 |
25 |
26 | Nation3 is a sovereign cloud nation. We are building a community of
27 | like-minded people creating a nation on the cloud.{' '}
28 |
30 |
31 | Here you can perform on-chain operations related to the Nation3
32 | community, such as...
33 |
36 |
78 | 45 | Lock your $NATION to obtain $veNATION and help govern the Nation3 46 | DAO. $veNATION will be required to mint the upcoming passport NFTs 47 | to become a citizen. 48 |
49 | 50 | 51 |60 | Once you have $veNATION, you can claim a passport. Only 420 61 | Genesis passports will be launched in the beginning. 62 |
63 | 64 | 65 |72 | You can buy more $NATION and participate in liquidity rewards. You 73 | can also lock your $NATION to get $veNATION to boost your rewards, 74 | get a passport NFT, and govern the DAO. 75 |
76 | 77 |
58 | {allowUnlimited && (
59 |
76 | )}
77 |
78 | {approveText}
79 |
80 |
81 | )
82 | ) : (
83 |
84 |
85 |
86 | )}
87 |
88 | )
89 | }
90 |
--------------------------------------------------------------------------------
/ui/public/logo.svg:
--------------------------------------------------------------------------------
1 |
13 |
--------------------------------------------------------------------------------
/ui/public/passport/logo-plain.svg:
--------------------------------------------------------------------------------
1 |
13 |
--------------------------------------------------------------------------------
/ui/pages/citizen.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image'
2 | import { useState } from 'react'
3 | // @ts-ignore
4 | import Card from 'react-animated-3d-card'
5 | import { useSignMessage } from 'wagmi'
6 | import { mobilePassportDomain } from '../lib/config'
7 | import { usePassportExpirationDate } from '../lib/passport-expiration-hook'
8 | import { usePassport } from '../lib/passport-nft'
9 | import { useAccount } from '../lib/use-wagmi'
10 | import Confetti from '../components/Confetti'
11 | import Head from '../components/Head'
12 | import PassportExpiration from '../components/PassportExpiration'
13 | import BallotIcon from '../public/passport/ballot.svg'
14 | import DiscordIcon from '../public/passport/discord.svg'
15 | import AddToWallet from '../public/passport/wallet.svg'
16 |
17 | export default function Citizen() {
18 | const { address } = useAccount()
19 | const { data: passportData } = usePassport(address)
20 | const [confettiNumber, setConfettiNumber] = useState
49 |
102 | ) : (
103 |
50 |
101 | 51 | Welcome, citizen 52 |
53 |
54 |
100 |
55 | 420 ? '390px' : '340px',
58 | height: window.innerWidth > 420 ? '450px' : '400px',
59 | cursor: 'pointer',
60 | position: 'relative',
61 | }}
62 | onClick={() => addConfetti()}
63 | >
64 |
66 |
67 |
68 |
69 |
99 |
70 |
76 |
82 |
97 |
104 |
105 |
106 | )}
107 |
108 | )
109 | }
110 |
--------------------------------------------------------------------------------
/ui/public/icons/connectors/metamask.svg:
--------------------------------------------------------------------------------
1 |
32 |
--------------------------------------------------------------------------------
/ui/public/passport/art.svg:
--------------------------------------------------------------------------------
1 |
75 |
--------------------------------------------------------------------------------
/ui/lib/liquidity-rewards.ts:
--------------------------------------------------------------------------------
1 | import { BigNumber } from 'ethers'
2 | import { useState, useEffect } from 'react'
3 | import { lpRewardsContract, balancerLPToken } from '../lib/config'
4 | import LiquidityRewardsDistributor from '../abis/BoostedLiquidityDistributor.json'
5 | import ERC20 from '../abis/ERC20.json'
6 | import { NumberType, transformNumber } from './numbers'
7 | import {
8 | useBalance,
9 | useStaticCall,
10 | useContractRead,
11 | useContractWrite,
12 | } from './use-wagmi'
13 |
14 | const contractParams = {
15 | address: lpRewardsContract,
16 | abi: LiquidityRewardsDistributor.abi,
17 | }
18 |
19 | export function useLiquidityRewards({ nationPrice, poolValue, address }: any) {
20 | const { data: totalRewards, isLoading: totalRewardsLoading } =
21 | useContractRead(contractParams, 'totalRewards', undefined, undefined, false)
22 | const months = 6
23 |
24 | const { data: unclaimedRewards, loading: unclaimedRewardsLoading } =
25 | useStaticCall({
26 | ...contractParams,
27 | methodName: 'claimRewards',
28 | defaultData: transformNumber(0, NumberType.bignumber),
29 | throwOnRevert: false, // assumes a reverted transaction means no claimable rewards
30 | skip: !address,
31 | })
32 |
33 | const { data: userDeposit, isLoading: userDepositLoading } = useContractRead(
34 | {
35 | ...contractParams,
36 | watch: true,
37 | enabled: Boolean(address),
38 | },
39 | 'userDeposit',
40 | [address]
41 | )
42 |
43 | const { data: totalDeposit, isLoading: totalDepositLoading } =
44 | useContractRead(contractParams, 'totalDeposit', undefined, undefined, false)
45 |
46 | const { data: lpTokensSupply, isLoading: lpTokensSupplyLoading } =
47 | useContractRead(
48 | { address: balancerLPToken, abi: ERC20.abi },
49 | 'totalSupply',
50 | undefined,
51 | undefined,
52 | false
53 | )
54 |
55 | const { data: userBalance, isLoading: userBalanceLoading } = useContractRead(
56 | {
57 | ...contractParams,
58 | watch: true,
59 | enabled: Boolean(address),
60 | },
61 | 'userBalance',
62 | [address]
63 | )
64 |
65 | const [liquidityRewardsAPY, setLiquidityRewardsAPY] = useState-
115 |
- 118 | Lock $NATION 119 | 120 |
- 125 | Claim passport 126 | 127 |
- 130 | Adore your passport 131 | 132 |
137 | To become a citizen, you need to mint a passport NFT by holding at
138 | least{' '}
139 |
140 | {requiredBalance == -1 ? '...' : requiredBalance} $veNATION
141 |
142 | . This is to make sure all citizens are economically aligned.
143 |
144 |
145 | Your $NATION won't be taken away from you. As your lock matures,
146 | you can either withdraw your tokens or increase the lock time to
147 | keep citizenship. Passport NFTs represent membership and are
148 | currently not transferable.
149 |
150 |
151 | {nationPassportAgreementStatement}:{' '}
152 |
159 |
189 |
190 | {action.mint ? (
191 |
160 |
171 |
172 |
161 |
163 |
164 | Needed balance
165 |
166 |
167 | {requiredBalance == -1 ? '...' : requiredBalance}
168 |
169 | $veNATION
170 |
173 |
188 |
174 |
176 |
177 | Your balance
178 |
179 |
180 |
186 | $veNATION
187 | 220 | We are delighted to welcome you to Nation3 as a fellow citizen. 221 | You will be taken to your passport in a few seconds ✨ 222 |
223 |
224 |
225 |
226 |
227 | )}
228 |
100 | Provide liquidity in the pool and then deposit the pool token here.{' '}
101 |
107 | {/* Get up to {veNationRewardsMultiplier}x more rewards with $veNATION.{' '}
108 |
112 |
152 |
153 |
113 |
134 |
135 |
114 |
116 |
117 |
118 | Total liquidity
119 |
120 |
121 |
122 |
133 |
136 |
151 |
137 |
139 |
140 | Rewards APY
141 |
142 |
143 |
150 |
154 |
188 | {canBoost && (
189 |
155 |
169 |
170 |
156 |
158 |
159 | Your veNATION
160 |
161 |
162 |
168 |
171 |
187 |
172 |
174 |
175 |
176 | Your boosted APY
177 |
178 |
179 |
180 |
186 |
190 |
213 | )}
214 |
215 |
191 |
212 |
194 | You can boost your APY to{' '}
195 |
196 | {transformNumber(
197 | (
198 | ((transformNumber(
199 | liquidityRewardsAPY ?? 0,
200 | NumberType.number,
201 | ) as number) /
202 | 10 ** 18) *
203 | potentialBoost
204 | ).toString(),
205 | NumberType.number,
206 | 2,
207 | ) + '%'}
208 |
209 | . To do so, claim your current rewards.
210 |
211 |
216 |
235 |
236 |
217 |
234 |
218 |
222 | Claim
223 |
224 |
225 |
226 | Your rewards
227 |
228 |
229 |
231 |
232 | NATION tokens
233 |
237 |
374 |
238 |
373 |
239 | setActiveTab(0)}
242 | id="stakeTab"
243 | >
244 | Stake
245 |
246 |
247 | setActiveTab(1)}
250 | id="unstakeTab"
251 | >
252 | Unstake
253 |
254 |
255 |
256 |
257 | {activeTab === 0 ? (
258 | <>
259 |
372 |
260 | Available to deposit:{' '}
261 |
269 |
288 |
289 |
290 |
300 | Deposit
301 |
302 |
303 |
304 | ) : (
305 | <>
306 |
307 | Available to withdraw:{' '}
308 |
312 | {
319 | setWithdrawalValue(value)
320 | }}
321 | />
322 |
323 |
337 |
338 |
339 |
340 |
344 | Withdraw
345 |
346 |
347 |
351 | userDeposit &&
352 | setWithdrawalValue(
353 | transformNumber(
354 | userDeposit,
355 | NumberType.string,
356 | ) as string,
357 | )
358 | }
359 | >
360 | Withdraw all and claim
361 |
368 |
369 |
370 | )}
371 |
365 |
367 |
120 |
378 | )
379 |
380 | if (address) {
381 | return (
382 |
121 |
241 |
242 |
243 |
244 |
366 | {errorContext?.errors ? (
367 |
122 |
142 |
143 |
123 |
141 |
124 |
140 |
125 |
139 |
126 |
127 |
130 |
131 |
137 |
138 |
144 |
145 |
240 |
146 |
154 |
147 |
148 |
152 |
153 |
149 |
151 | {children}
150 |
155 |
159 |
239 |
160 |
238 |
161 |
173 |
162 |
163 |
164 |
172 | -
174 | {nav.map((item: any) => (
175 |
-
178 | // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
179 | (document.getElementById('side-drawer').checked = false)
180 | }
181 | key={item.href}
182 | >
183 | {item.href.charAt(0) === '/' ? (
184 |
188 | {item.icon}
189 | {item.name}
190 |
191 | 192 | ) : ( 193 | 201 | {item.icon} 202 | {item.name} 203 | 204 | 205 | )} 206 |
207 | ))}
208 |
-
210 | {address ? (
211 |
- 212 | 225 | 226 | ) : ( 227 |
- 228 | 234 | 235 | )} 236 |
368 |
374 | ) : (
375 | ''
376 | )}
377 |
369 | {errorContext.errors.map((error: any) => (
370 |
373 |