Improve UI and code

README.md

@@ -16,3 +16,17 @@
 
 - mainnet: https://helix-dev-main.vercel.app/
 - testnet: https://helix-dev-test.vercel.app/
+
+### Local development
+
+```shell
+$ npm install
+$ npm run dev:apps
+```
+
+### How to add a new chain
+
+1. Define `ChainID` and `Network` in `packages/apps/src/types/chain.ts`
+2. Configure the chain file in the `packages/apps/src/config/chains` directory
+3. Export the configuration file in the `packages/apps/src/config/chains/index.ts`
+4. Add new chain to `packages/apps/src/utils/chain.ts`

packages/apps/next.config.js

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   webpack: (config) => {
-    config.resolve.fallback = { fs: false, net: false, tls: false };
+    config.externals.push("lokijs", "encoding", "pino-pretty");
     return config;
   },
 };

packages/apps/package.json

@@ -15,32 +15,29 @@
   "dependencies": {
     "@apollo/client": "^3.8.2",
     "@floating-ui/react": "^0.25.2",
-    "@polkadot/api": "^10.9.1",
-    "@rainbow-me/rainbowkit": "^1.0.9",
+    "@polkadot/api": "^10.11.1",
+    "@rainbow-me/rainbowkit": "^1.3.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
     "graphql": "^16.8.0",
-    "next": "13.4.16",
+    "next": "14.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-transition-group": "^4.4.5",
     "sharp": "^0.32.6",
-    "viem": "^1.8.1",
-    "wagmi": "^1.3.10"
+    "viem": "^1.19.9",
+    "wagmi": "^1.4.7"
   },
   "devDependencies": {
     "@types/node": "^20.5.0",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@types/react-transition-group": "^4.4.6",
     "autoprefixer": "^10.4.15",
-    "encoding": "^0.1.13",
     "eslint": "^8.47.0",
     "eslint-config-next": "^13.4.16",
     "eslint-config-prettier": "^9.0.0",
     "jest": "^29.7.0",
-    "lokijs": "^1.5.12",
-    "pino-pretty": "^10.2.0",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.1.6"

packages/apps/src/__tests__/cross-config.spec.ts

@@ -1,7 +1,7 @@
-import { getChainsConfig, getChainConfig } from "../utils/chain";
+import { getChainConfigs, getChainConfig } from "../utils/chain";
 import type { ChainConfig } from "../types/chain";
 
-describe.each(getChainsConfig("all") as ChainConfig[])(
+describe.each(getChainConfigs(true) as ChainConfig[])(
   "Should configure price for HelixLpBridge to cross native token",
   ({ network, tokens }) => {
     if (tokens.length) {
@@ -18,7 +18,7 @@ describe.each(getChainsConfig("all") as ChainConfig[])(
   },
 );
 
-describe.each(getChainsConfig("all") as ChainConfig[])("Should configure target token", ({ network, tokens }) => {
+describe.each(getChainConfigs(true) as ChainConfig[])("Should configure target token", ({ network, tokens }) => {
   if (tokens.length) {
     describe.each(tokens)(`Cross $symbol from ${network}`, (token) => {
       if (token.cross.length) {

packages/apps/src/__tests__/native-token-config.spec.ts

@@ -1,7 +1,7 @@
-import { getChainsConfig } from "../utils/chain";
+import { getChainConfigs } from "../utils/chain";
 import type { ChainConfig } from "../types/chain";
 
-describe.each(getChainsConfig("all") as ChainConfig[])("Should configure native token", ({ network, tokens }) => {
+describe.each(getChainConfigs(true) as ChainConfig[])("Should configure native token", ({ network, tokens }) => {
   it(`${network}`, () => {
     if (tokens.length) {
       expect(tokens.some((t) => t.type === "native")).not.toBeFalsy();

packages/apps/src/app/globals.css

@@ -27,63 +27,51 @@ body {
 } */
 
 @layer components {
-  .token-select-dropdown {
-    width: calc(100vw - 3rem);
-    @apply lg:w-[36rem];
-  }
-
+  /* Layout */
   .app-header {
     @apply h-[64px];
   }
-
   .app-footer {
     @apply h-[58px];
   }
-
   .app-main {
     min-height: calc(100vh - 64px - 58px);
-    @apply mt-[64px] py-5;
+    @apply mt-[64px];
   }
 
-  .user-connect-wallet {
-    @apply bg-primary gap-middle px-large flex h-9 shrink-0 items-center rounded transition hover:opacity-80 lg:h-8 lg:hover:opacity-80 lg:active:translate-y-1;
+  /* Page */
+  .page-container {
+    @apply px-middle container mx-auto py-5;
   }
 
+  /* User */
+  .user-connect-wallet {
+    @apply bg-primary gap-middle rounded-middle px-large lg:hover:bg-primary/80 flex h-9 shrink-0 items-center transition lg:h-8 lg:active:translate-y-1;
+  }
   .user-dropdown-item {
     @apply gap-middle px-large py-small inline-flex items-center text-start transition hover:bg-white/10 lg:active:translate-y-1;
   }
 
-  .tooltip-text {
-    @apply text-xs font-normal text-white;
-  }
-
   .button {
-    @apply flex h-8 items-center justify-center text-sm lg:h-9;
+    @apply flex h-8 items-center justify-center lg:h-9;
   }
 
+  /* Input */
   .normal-input-wrap {
-    @apply rounded border transition-colors duration-300;
+    @apply border transition-colors duration-300;
   }
-
   .valid-input-wrap {
-    @apply hover:border-primary focus-within:border-primary;
   }
-
   .invalid-input-wrap {
     @apply hover:border-app-red focus-within:border-app-red border-app-red;
   }
 
   .select {
-    @apply hover:border-primary focus-within:border-primary rounded border transition duration-300 disabled:cursor-not-allowed disabled:opacity-60 lg:active:translate-y-1 lg:disabled:translate-y-0;
-  }
-}
-
-@layer utilities {
-  .page-bg {
-    background: linear-gradient(180deg, #02061f 0%, #1c1837 100%);
+    @apply hover:border-primary focus-within:border-primary border transition duration-300 disabled:cursor-not-allowed disabled:opacity-60 lg:active:translate-y-1 lg:disabled:translate-y-0;
   }
 }
 
+/* Page header loading bar */
 .loading-bar {
   background: linear-gradient(90deg, #ffffff 35%, #00b2ff 50%, #ffffff 65%);
   background-position: 100% 50%;
@@ -112,7 +100,7 @@ body {
   }
 }
 
-/* drawer */
+/* Drawer */
 .drawer-fade-enter {
   opacity: 0;
 }
@@ -142,7 +130,7 @@ body {
   transition: transform 300ms;
 }
 
-/* tabs */
+/* Tabs */
 .tabs-fade-enter {
   opacity: 0;
 }
@@ -158,7 +146,7 @@ body {
   transition: opacity 200ms;
 }
 
-/* component loading */
+/* Component loading */
 .component-loading-appear,
 .component-loading-enter {
   background-color: transparent;
@@ -180,17 +168,21 @@ body {
   transition: background-color 300ms;
 }
 
-/* modal */
+/* Modal */
+.modal-fade-appear,
 .modal-fade-enter {
   opacity: 0;
 }
+.modal-fade-appear > div,
 .modal-fade-enter > div {
   transform: scale(0.5);
 }
+.modal-fade-appear-active,
 .modal-fade-enter-active {
   opacity: 1;
   transition: opacity 300ms;
 }
+.modal-fade-appear-active > div,
 .modal-fade-enter-active > div {
   transform: scale(1);
   transition: transform 300ms;

packages/apps/src/app/layout.tsx

@@ -19,8 +19,8 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" style={{ backgroundColor: "#000421" }}>
-      <body className={`${ibm_plex_sans.className} page-bg text-white`}>
+    <html lang="en">
+      <body className={`${ibm_plex_sans.className} bg-app-bg text-base font-normal text-white`}>
         <GraphqlProvider>
           <RainbowProvider>
             <AppProvider>

packages/apps/src/app/page.tsx

@@ -1,22 +1,21 @@
+import PageWrap from "@/ui/page-wrap";
 import TransferProvider from "@/providers/transfer-provider";
 import { Metadata } from "next";
 import dynamic from "next/dynamic";
 
 export const metadata: Metadata = {
-  title: "Transfer | Helix Bridge",
+  title: "Helix Bridge - Cross-chain for tokens",
   description: "Perform cross-chain transfers through Helix Bridge",
 };
 
 const Transfer = dynamic(() => import("@/components/transfer"), { ssr: false });
 
-export default function Home() {
+export default function HomePage() {
   return (
-    <main className="app-main">
-      <div className="px-middle container mx-auto lg:py-12">
-        <TransferProvider>
-          <Transfer />
-        </TransferProvider>
-      </div>
-    </main>
+    <PageWrap>
+      <TransferProvider>
+        <Transfer />
+      </TransferProvider>
+    </PageWrap>
   );
 }

packages/apps/src/app/records/[id]/page.tsx

@@ -1,8 +1,9 @@
 import RecordDetail from "@/components/record-detail";
+import PageWrap from "@/ui/page-wrap";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "Detail | Helix Bridge",
+  title: "Detail - Helix Bridge",
   description: "View Helix Bridge transfer details",
 };
 
@@ -12,12 +13,10 @@ interface Props {
   };
 }
 
-export default function Record({ params }: Props) {
+export default function RecordPage({ params }: Props) {
   return (
-    <main className="app-main">
-      <div className="px-middle container mx-auto">
-        <RecordDetail id={params.id} />
-      </div>
-    </main>
+    <PageWrap>
+      <RecordDetail id={params.id} />
+    </PageWrap>
   );
 }

packages/apps/src/app/records/page.tsx

@@ -1,17 +1,18 @@
-import HistoryRecords from "@/components/history-records";
+import PageWrap from "@/ui/page-wrap";
 import { Metadata } from "next";
+import dynamic from "next/dynamic";
 
 export const metadata: Metadata = {
-  title: "Records | Helix Bridge",
+  title: "History Records - Helix Bridge",
   description: "View the history of transfers via the Helix Bridge",
 };
 
-export default function Records() {
+const HistoryRecords = dynamic(() => import("@/components/history-records"));
+
+export default function RecordsPage() {
   return (
-    <main className="app-main">
-      <div className="px-middle container mx-auto">
-        <HistoryRecords />
-      </div>
-    </main>
+    <PageWrap>
+      <HistoryRecords />
+    </PageWrap>
   );
 }

packages/apps/src/app/_relayer/dashboard/page.tsx → packages/apps/src/app/relayer/_dashboard/page.tsx

@@ -1,19 +1,18 @@
+import PageWrap from "@/ui/page-wrap";
 import { Metadata } from "next";
 import dynamic from "next/dynamic";
 
 const RelayerRegisterManage = dynamic(() => import("@/components/relayer-register-manage"), { ssr: false });
 
 export const metadata: Metadata = {
-  title: "Relayer Dashboard | Helix Bridge",
+  title: "Relayer Dashboard - Helix Bridge",
   description: "Register a relayer on Helix Bridge or manage my relayers registered on Helix Bridge",
 };
 
-export default function MyRelayers() {
+export default function RelayerDashboardPage() {
   return (
-    <main className="app-main">
-      <div className="px-middle container mx-auto">
-        <RelayerRegisterManage />
-      </div>
-    </main>
+    <PageWrap>
+      <RelayerRegisterManage />
+    </PageWrap>
   );
 }