Separate UI Kit + UI Kit Gallery + New Components

.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({