Separate UI Kit + UI Kit Gallery + New Components (#126)

This commit does three things:

- Separate the UI kit from the app as a separate package.
- Add a UI Kit Gallery [1], which is based on React Cosmos [2].
- Add new components, listed in the full list of changes below.

[1] https://liquity2-uikit.vercel.app/
[2] https://reactcosmos.org/

Changes:

- [x] Move the frontend app to `frontend/app`.
- [x] Extract the UI components to `frontend/uikit`.
- [x] Add a components gallery `frontend/uikit-gallery`.
- [x] Name consistency: use `@liquity2/<name>` for all packages.
- [x] GitHub Actions: auto deployment for the gallery.
- [x] Theme: various updates.
- [x] Component: `<PillButton />`.
- [x] Component: `<InputField />`.
- [x] Component: `<Tabs />`.
- [x] Component: `<TokenIcon />` + `<TokenIcon.Group />`

.github/workflows/testnet-deployment.yml

@@ -1,8 +1,9 @@
 name: Testnet Deployment
 
 # This workflow:
-# - Deploys the contracts to the Liquity v2 Testnet (currently disabled)
-# - Deploys the app to Vercel (only for the main branch, not PRs)
+# - Deploys the contracts to the Liquity v2 Testnet
+# - Deploys the app to Vercel (main branch only, not PRs)
+# - Deploys the gallery to Vercel (main branch only, not PRs)
 
 on:
  push:
@@ -18,7 +19,6 @@ on:
 
 env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
- VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
  FOUNDRY_VERSION: nightly-f625d0fa7c51e65b4bf1e8f7931cd1c6e2e285e9
 
 concurrency:
@@ -73,6 +73,8 @@ jobs:
  runs-on: ubuntu-latest
  needs: deploy-contracts
  if: ${{ github.event_name != 'pull_request' }}
+ env:
+ VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
  steps:
  - name: Git checkout
  uses: actions/checkout@v4
@@ -95,9 +97,9 @@ jobs:
  path: ./contracts
 
  - name: Prepare Environment from Latest Deployment Context
- working-directory: contracts
+ working-directory: ./contracts
  env:
- APP_ENV_FILE: ../frontend/.env.local
+ APP_ENV_FILE: ../frontend/app/.env.local
  DEPLOYMENT_CONTEXT_FILE: ./deployment-context-latest.json
  run: |
  echo 'NEXT_PUBLIC_CHAIN_ID=1337' >> $APP_ENV_FILE
@@ -118,3 +120,34 @@ jobs:
 
  - name: Deploy Project Artifacts to Vercel
  run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
+
+ deploy-gallery:
+ name: Deploy gallery
+ runs-on: ubuntu-latest
+ needs: deploy-contracts
+ if: ${{ github.event_name != 'pull_request' }}
+ env:
+ VERCEL_PROJECT_ID: ${{ secrets.VERCEL_GALLERY_PROJECT_ID }}
+ steps:
+ - name: Git checkout
+ uses: actions/checkout@v4
+
+ - name: Install pnpm
+ uses: pnpm/action-setup@v3.0.0
+ with:
+ version: 8
+
+ - name: Install dependencies
+ run: pnpm install
+
+ - name: Install Vercel CLI
+ run: pnpm install --global vercel@canary
+
+ - name: Pull Vercel Environment Information
+ run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+
+ - name: Build Project Artifacts
+ run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+
+ - name: Deploy Project Artifacts to Vercel
+ run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

contracts/package.json

@@ -1,5 +1,5 @@
 {
- "name": "bold-contracts",
+ "name": "@liquity2/contracts",
  "version": "1.0.0",
  "description": "Bold decentralized stablecoin",
  "main": "index.js",
@@ -39,8 +39,8 @@
  "ts-node": ">=8.0.0",
  "tsx": "^4.7.1",
  "typechain": "^8.1.0",
- "typescript": ">=4.5.0",
- "zod": "^3.22.4",
+ "typescript": "^5.4.5",
+ "zod": "^3.23.0",
  "zx": "^7.2.3"
  }
 }

frontend/.gitignore → frontend/app/.gitignore

@@ -28,3 +28,6 @@ next-env.d.ts
 # panda
 /styled-system/
 /styled-system-static/
+
+# cosmos
+/cosmos.imports.ts

frontend/app/.tool-versions

@@ -0,0 +1 @@
+nodejs 20.11.1

frontend/README.md → frontend/app/README.md

@@ -13,7 +13,7 @@
 
 ```sh
 git clone git@github.com:liquity/bold.git
-cd bold/frontend
+cd bold
 pnpm install
 ```
 
@@ -38,7 +38,8 @@ Copy the addresses of the deployed contracts to the `.env.local` file.
 Run the development server:
 
 ```sh
-cd bold/frontend
+cd bold/frontend/app
+pnpm build-uikit # only needed once
 pnpm dev
 ```
 
@@ -164,4 +165,5 @@ A WalletConnect project ID which can be obtained by [creating a WalletConnect pr
 ### `NEXT_PUBLIC_CONTRACT_…`
 
 Addresses of the Liquity contracts.
+
 </details>

frontend/next.config.js → frontend/app/next.config.js

@@ -1,12 +1,14 @@
-const pkg = require("./package.json");
+import { execSync } from "node:child_process";
+import { readFileSync } from "node:fs";
 
-const commitHash = require("child_process")
- .execSync("git log --pretty=format:\"%h\" -n1")
+const commitHash = execSync("git log --pretty=format:\"%h\" -n1")
  .toString()
  .trim();
 
+const pkg = JSON.parse(readFileSync("./package.json", "utf-8"));
+
 /** @type {import('next').NextConfig} */
-module.exports = {
+export default {
  output: "export",
  reactStrictMode: false,
  env: {

frontend/package.json → frontend/app/package.json

@@ -1,28 +1,33 @@
 {
- "name": "frontend",
+ "name": "@liquity2/app",
+ "private": true,
  "version": "0.0.0",
+ "type": "module",
  "scripts": {
- "build": "next build",
+ "build": "pnpm build-uikit && pnpm panda-codegen && next build",
+ "build-uikit": "cd ../uikit && pnpm build && pnpm panda-codegen",
  "dev": "rm -rf ./.next && next dev",
  "fmt": "dprint fmt **/*.{ts,tsx,js,json,html,md}",
  "lint": "next lint",
- "prepare": "panda codegen --silent",
+ "panda-codegen": "panda codegen --silent",
  "test": "vitest",
  "update-liquity-abis": "ts-node ./scripts/update-liquity-abis.ts"
  },
  "dependencies": {
+ "@liquity2/uikit": "workspace:*",
  "@rainbow-me/rainbowkit": "^2.0.5",
  "@react-spring/web": "^9.7.3",
- "@tanstack/react-query": "^5.29.2",
+ "@tanstack/react-query": "^5.31.0",
  "dnum": "^2.11.0",
  "focus-trap-react": "^10.2.3",
- "next": "14.2.1",
+ "geist": "^1.3.0",
+ "next": "14.2.2",
  "react": "^18",
  "react-dom": "^18",
  "ts-pattern": "^5.0.8",
- "viem": "^2.9.18",
+ "viem": "^2.9.25",
  "wagmi": "^2.5.12",
- "zod": "^3.22.4"
+ "zod": "^3.23.0"
  },
  "devDependencies": {
  "@babel/plugin-transform-private-methods": "^7.24.1",
@@ -37,12 +42,12 @@
  "@typescript-eslint/parser": "^7.3.1",
  "dax-sh": "^0.39.2",
  "eslint": "^8.57.0",
- "eslint-config-next": "14.1.4",
+ "eslint-config-next": "14.2.2",
  "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",
+ "typescript": "^5.4.5",
  "vitest": "^1.4.0"
  }
 }

frontend/app/panda.config.ts

@@ -0,0 +1,13 @@
+import { liquityUiKitPreset } from "@liquity2/uikit/panda.config";
+import { defineConfig } from "@pandacss/dev";
+
+export default defineConfig({
+ preflight: true, // CSS reset
+ presets: [liquityUiKitPreset],
+ exclude: [],
+ outdir: "styled-system",
+ include: [
+ "../uikit/src/**/*.tsx",
+ "./src/**/*.{ts,tsx}",
+ ],
+});

frontend/src/app/contracts/ContractAction.tsx → frontend/app/src/app/contracts/ContractAction.tsx

@@ -1,8 +1,7 @@
 import type { ReactNode } from "react";
 
-import { Button } from "@/src/comps/Button/Button";
-import { TextButton } from "@/src/comps/Button/TextButton";
 import { css } from "@/styled-system/css";
+import { Button, TextButton } from "@liquity2/uikit";
 
 export function ContractAction({
  buttonLabel,
@@ -75,7 +74,10 @@ export function ContractAction({
  paddingTop: 16,
  })}
  >
- <Button label={buttonLabel ?? title} />
+ <Button
+ label={buttonLabel ?? title}
+ size="large"
+ />
  </div>
  {error && (
  <div

frontend/src/app/contracts/ContractBorrowerOperations.tsx → frontend/app/src/app/contracts/ContractBorrowerOperations.tsx

@@ -1,8 +1,7 @@
-import { FormField } from "@/src/comps/FormField/FormField";
-import { TextInput } from "@/src/comps/Input/TextInput";
 import { BorrowerOperationsContract } from "@/src/contracts";
 import { formValue, parseInputInt, parseInputPercentage, parseInputValue, useForm } from "@/src/form-utils";
 import { getTroveId, useCollTokenAllowance } from "@/src/liquity-utils";
+import { FormField, TextInput } from "@liquity2/uikit";
 import * as dn from "dnum";
 import { useAccount, useWriteContract } from "wagmi";
 import { Contract } from "./Contract";

frontend/src/app/contracts/ContractStabilityPool.tsx → frontend/app/src/app/contracts/ContractStabilityPool.tsx

@@ -1,8 +1,7 @@
-import { FormField } from "@/src/comps/FormField/FormField";
-import { TextInput } from "@/src/comps/Input/TextInput";
 import { StabilityPoolContract } from "@/src/contracts";
 import { formValue, parseInputInt, parseInputValue, useForm } from "@/src/form-utils";
 import { getTroveId } from "@/src/liquity-utils";
+import { FormField, TextInput } from "@liquity2/uikit";
 import * as dn from "dnum";
 import { useAccount, useWriteContract } from "wagmi";
 import { Contract } from "./Contract";

frontend/src/app/contracts/page.tsx → frontend/app/src/app/contracts/page.tsx

@@ -16,6 +16,7 @@ import {
  useTrovesStats,
 } from "@/src/liquity-utils";
 import { css } from "@/styled-system/css";
+import { Button } from "@liquity2/uikit";
 import { useConnectModal } from "@rainbow-me/rainbowkit";
 import * as dn from "dnum";
 import { match, P } from "ts-pattern";
@@ -480,34 +481,13 @@ function Card({
  })}
  >
  {actions.map((action, i) => (
- <button
+ <Button
  key={i}
- type="button"
+ disabled={Boolean(action.disabled)}
+ label={action.label}
  onClick={action.disabled ? undefined : action.onClick}
  title={action.disabled ?? action.title}
- disabled={Boolean(action.disabled)}
- className={css({
- height: 40,
- padding: "8px 16px",
- color: "white",
- fontSize: 14,
- background: "blue",
- borderRadius: 20,
- cursor: "pointer",
- whiteSpace: "nowrap",
- _disabled: {
- background: "rain",
- cursor: "not-allowed",
- },
- _active: {
- _enabled: {
- translate: "0 1px",
- },
- },
- })}
- >
- {action.label}
- </button>
+ />
  ))}
  </div>
  )}

frontend/src/app/layout.tsx → frontend/app/src/app/layout.tsx

@@ -1,5 +1,5 @@
-// All global CSS should be imported from here for easier maintenance
-import "@/src/index.css";
+// All global styles should be imported here for easier maintenance
+import "@liquity2/uikit/index.css";
 
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
@@ -9,25 +9,23 @@ import { AppLayout } from "@/src/comps/AppLayout/AppLayout";
 import { Config } from "@/src/comps/Config/Config";
 import { ConfigModal } from "@/src/comps/ConfigModal/ConfigModal";
 import { Ethereum } from "@/src/comps/Ethereum/Ethereum";
-import { RootEntryPoint } from "@/src/comps/Root/Root";
-import { Inter } from "next/font/google";
-
-const inter = Inter({ subsets: ["latin"] });
+import { UiKit } from "@liquity2/uikit";
+import { GeistSans } from "geist/font/sans";
 
 export const metadata: Metadata = {
- title: "Bold",
+ title: "Liquity v2",
  icons: "/favicon.svg",
 };
 
 export default function Layout({
  children,
-}: Readonly<{
+}: {
  children: ReactNode;
-}>) {
+}) {
  return (
  <html lang="en">
- <body className={inter.className}>
- <RootEntryPoint>
+ <body className={GeistSans.className}>
+ <UiKit>
  <Config>
  <Ethereum>
  <ConfigModal>
@@ -39,7 +37,7 @@ export default function Layout({
  </ConfigModal>
  </Ethereum>
  </Config>
- </RootEntryPoint>
+ </UiKit>
  </body>
  </html>
  );

frontend/src/app/page.tsx → frontend/app/src/app/page.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { AppLauncher } from "@/src/comps/AppLauncher/AppLauncher";
 import { css } from "@/styled-system/css";
 

frontend/src/comps/AboutModal/AboutModal.tsx → frontend/app/src/comps/AboutModal/AboutModal.tsx

@@ -2,10 +2,10 @@
 
 import type { ReactNode } from "react";
 
-import { Modal } from "@/src/comps/Modal/Modal";
 import { APP_VERSION, COMMIT_HASH } from "@/src/env";
 import * as env from "@/src/env";
 import { css } from "@/styled-system/css";
+import { Modal } from "@liquity2/uikit";
 import { createContext, useContext, useState } from "react";
 
 const AboutModalContext = createContext({

frontend/src/comps/AppLayout/AppLayout.tsx → frontend/app/src/comps/AppLayout/AppLayout.tsx

@@ -14,9 +14,8 @@ export function AppLayout({
  className={css({
  display: "flex",
  flexDirection: "column",
- width: "100%",
+ width: 1160,
  minHeight: "100vh",
- maxWidth: 1160,
  margin: "0 auto",
  })}
  >

frontend/src/comps/ConfigModal/ConfigModal.tsx → frontend/app/src/comps/ConfigModal/ConfigModal.tsx

@@ -2,7 +2,7 @@
 
 import type { ReactNode } from "react";
 
-import { Modal } from "@/src/comps/Modal/Modal";
+import { Modal } from "@liquity2/uikit";
 import { createContext, useContext, useState } from "react";
 
 const ConfigModalContext = createContext({