Frontend scaffolding

frontend/.env

@@ -0,0 +1,15 @@
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=1
+NEXT_PUBLIC_CHAIN_ID=1
+
+NEXT_PUBLIC_CONTRACT_PRICE_FEED_TESTNET=0x0000000000000000000000000000000000000000
+NEXT_PUBLIC_CONTRACT_BOLD_TOKEN=0x0000000000000000000000000000000000000000
+NEXT_PUBLIC_CONTRACT_SORTED_TROVES=0x0000000000000000000000000000000000000000
+NEXT_PUBLIC_CONTRACT_TROVE_MANAGER=0x0000000000000000000000000000000000000000
+NEXT_PUBLIC_CONTRACT_ACTIVE_POOL=0x0000000000000000000000000000000000000000
+NEXT_PUBLIC_CONTRACT_STABILITY_POOL=0x0000000000000000000000000000000000000000
+NEXT_PUBLIC_CONTRACT_GAS_POOL=0x0000000000000000000000000000000000000000
+NEXT_PUBLIC_CONTRACT_DEFAULT_POOL=0x0000000000000000000000000000000000000000
+NEXT_PUBLIC_CONTRACT_COLL_SURPLUS_POOL=0x0000000000000000000000000000000000000000
+NEXT_PUBLIC_CONTRACT_FUNCTION_CALLER=0x0000000000000000000000000000000000000000
+NEXT_PUBLIC_CONTRACT_BORROWER_OPERATIONS=0x0000000000000000000000000000000000000000
+NEXT_PUBLIC_CONTRACT_HINT_HELPERS=0x0000000000000000000000000000000000000000

frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next"
+}

frontend/.gitignore

@@ -0,0 +1,30 @@
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# panda
+/styled-system/
+/styled-system-static/

frontend/README.md

@@ -0,0 +1,87 @@
+# BOLD App
+
+## Preview
+
+<https://liquity2.vercel.app/>
+
+## Requirements
+
+- [Node.js](https://nodejs.org/)
+- [pnpm](https://pnpm.io/)
+
+## Setup
+
+```sh
+git clone git@github.com:liquity/bold.git
+cd bold/frontend
+pnpm install
+```
+
+## How to develop
+
+Run the Hardhat Network local node:
+
+```sh
+cd bold/contracts
+ACCOUNTS_BALANCE=1000 pnpm hardhat node # ACCOUNTS_BALANCE=1000 is optional but nicer than the default values in the UI
+```
+
+Deploy the contracts:
+
+```sh
+cd bold/contracts
+pnpm hardhat run --network localhost utils/deploymentDev.js
+```
+
+Copy the addresses of the deployed contracts to the `.env.local` file.
+
+Run the development server:
+
+```sh
+cd bold/frontend
+pnpm dev
+```
+
+You can now open <http://localhost:3000/> in your browser.
+
+See also `contracts/hardhatAccountsList2k.js` to import the accounts into MetaMask (the deployment script opens troves for the first six accounts).
+
+## Scripts
+
+```sh
+pnpm dev                    # run the development server
+pnpm build                  # build the static app in out/
+pnpm fmt                    # format the code
+pnpm lint                   # lint the code
+pnpm test                   # run the tests
+pnpm update-liquity-abis    # build the contracts and update the ABIs
+```
+
+## Environment
+
+Create `.env.local` from the `.env` file and fill in the required values (see the description of each variable below).
+
+```sh
+cp .env .env.local
+```
+
+See [./src/env.ts](./src/env.ts) for details about how the environment variables are being imported by the app.
+
+### `NEXT_PUBLIC_CHAIN_ID`
+
+The Ethereum network to connect to.
+
+Supports the following IDs:
+
+- `1` (mainnet)
+- `31337` (hardhat)
+
+Defaults to `1` (mainnet) if the chain ID is not supported.
+
+### `NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID`
+
+A WalletConnect project ID which can be obtained by [creating a WalletConnect project](https://cloud.walletconnect.com/app).
+
+### `NEXT_PUBLIC_CONTRACT_…`
+
+Addresses of the Liquity contracts.

frontend/dprint.json

@@ -0,0 +1,20 @@
+{
+  "typescript": {
+    "useBraces": "always"
+  },
+  "json": {
+  },
+  "markdown": {
+  },
+  "includes": ["**/*.{ts,tsx,js,jsx,mjs,json,md,html,css}"],
+  "excludes": [
+    "**/node_modules",
+    "**/*-lock.json"
+  ],
+  "plugins": [
+    "https://plugins.dprint.dev/typescript-0.89.3.wasm",
+    "https://plugins.dprint.dev/json-0.19.2.wasm",
+    "https://plugins.dprint.dev/markdown-0.16.4.wasm",
+    "https://plugins.dprint.dev/g-plane/malva-v0.1.5.wasm"
+  ]
+}

frontend/next.config.js

@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+  output: "export",
+  reactStrictMode: false,
+  webpack: (config) => {
+    // RainbowKit related dependencies
+    config.externals.push("pino-pretty", "lokijs", "encoding");
+    return config;
+  },
+};

frontend/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "frontend",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "rm -rf ./.next && next dev",
+    "fmt": "dprint fmt **/*.{ts,tsx,js,json,html,md}",
+    "lint": "next lint",
+    "prepare": "panda codegen",
+    "test": "vitest",
+    "update-liquity-abis": "ts-node ./scripts/update-liquity-abis.ts"
+  },
+  "dependencies": {
+    "@react-spring/web": "^9.7.3",
+    "@tanstack/react-query": "^5.28.6",
+    "connectkit": "^1.7.2",
+    "dnum": "^2.11.0",
+    "dprint": "^0.45.0",
+    "focus-trap-react": "^10.2.3",
+    "next": "14.1.4",
+    "react": "^18",
+    "react-dom": "^18",
+    "ts-pattern": "^5.0.8",
+    "viem": "^2.8.18",
+    "wagmi": "^2.5.12",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-private-methods": "^7.24.1",
+    "@pandacss/dev": "^0.36.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.2.68",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "dax-sh": "^0.39.2",
+    "dprint": "^0.45.0",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "14.1.4",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "jsdom": "^24.0.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.3",
+    "vitest": "^1.4.0"
+  }
+}

frontend/panda.config.ts

@@ -0,0 +1,35 @@
+import { defineConfig } from "@pandacss/dev";
+import { colors, theme } from "./src/theme";
+
+const tokenColors = Object.fromEntries(
+  Object.entries(colors).map(([key, value]) => [
+    key,
+    { value },
+  ]),
+);
+
+const semanticTokenColors = Object.fromEntries(
+  Object.entries(theme.colors).map(([key, value]) => [
+    key,
+    { value: `{colors.${value}}` },
+  ]),
+);
+
+export default defineConfig({
+  preflight: true, // CSS reset
+  presets: ["@pandacss/preset-base"],
+  include: ["./src/**/*.{ts,tsx}"],
+  exclude: [],
+  theme: {
+    tokens: {
+      colors: tokenColors,
+      fonts: {
+        body: { value: "Inter, sans-serif" },
+      },
+    },
+    semanticTokens: {
+      colors: semanticTokenColors,
+    },
+  },
+  outdir: "styled-system",
+});