feat(frontend): ui

frontend/README.md

@@ -16,7 +16,7 @@ bun dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `app/layout.tsx`. The page auto-updates as you edit the file.
 
 This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 

frontend/cspell.json

@@ -2,12 +2,20 @@
   "version": "0.1",
   "language": "en",
   "words": [
-    "utxo"
+    "utxo",
+    "rgbpp",
+    "nervos",
+    "nums"
   ],
   "ignoreWords": [
     "lingui",
     "pandacss",
-    "outdir"
+    "outdir",
+    "txns",
+    "svgr",
+    "deepmerge",
+    "usehooks",
+    "hstack"
   ],
   "ignorePaths": [
     "pnpm-lock.yaml",
@@ -20,6 +28,7 @@
     ".next/**",
     "public/**",
     "src/locales/**",
-    "styled-system"
+    "styled-system",
+    "src/assets/**"
   ]
 }

frontend/lingui.config.mjs

@@ -1,6 +1,6 @@
 /** @type {import('@lingui/conf').LinguiConfig} */
 const linguiConfig = {
-  locales: ["en", "zh-cn", "zh-tw"],
+  locales: ["en"],
   sourceLocale: "en",
   catalogs: [
     {

frontend/next.config.mjs

@@ -2,7 +2,49 @@
 const nextConfig = {
   reactStrictMode: true,
   experimental: {
-    swcPlugins: [["@lingui/swc-plugin", {}]]
+    swcPlugins: [["@lingui/swc-plugin", {}]],
+    esmExternals: true,
+    gzipSize: true,
+  },
+  webpack(config) {
+    const fileLoaderRule = config.module.rules.find((rule) =>
+        rule.test?.test?.('.svg'),
+    )
+    config.module.rules.push(
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/,
+      },
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
+        use: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              dimensions: false,
+              template(variables, { tpl }) {
+                return tpl`
+                ${variables.imports};
+                import { styled } from 'styled-system/jsx';
+                
+                ${variables.interfaces};
+                
+                const ${variables.componentName} = styled((${variables.props}) => (
+                  ${variables.jsx}
+                ));
+                
+                ${variables.exports};`
+              }
+            }
+          },
+        ],
+      },
+    )
+    fileLoaderRule.exclude = /\.svg$/i
+    return config
   },
 };
 

frontend/package.json

@@ -19,23 +19,29 @@
     "@lingui/core": "^4.11.2",
     "@lingui/macro": "^4.11.2",
     "@lingui/react": "^4.11.2",
+    "@tanstack/react-query": "^5.51.11",
+    "dayjs": "^1.11.12",
     "negotiator": "^0.6.3",
     "next": "14.2.4",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
     "@lingui/cli": "^4.11.2",
     "@lingui/conf": "^4.11.2",
     "@lingui/swc-plugin": "^4.0.8",
     "@pandacss/dev": "^0.42.0",
     "@park-ui/panda-preset": "^0.38.1",
+    "@svgr/core": "^8.1.0",
+    "@svgr/webpack": "^8.1.0",
     "@types/negotiator": "^0.6.3",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.5.0",
+    "cspell": "^8.10.4",
     "eslint": "^8",
     "eslint-config-next": "14.2.4",
     "eslint-plugin-import": "^2.29.0",
@@ -46,7 +52,6 @@
     "eslint-plugin-unicorn": "^49.0.0",
     "eslint-plugin-unused-imports": "^3.0.0",
     "prettier": "^3.1.0",
-    "typescript": "^5",
-    "cspell": "^8.10.4"
+    "typescript": "^5"
   }
 }

frontend/panda.config.ts

@@ -1,48 +1,124 @@
 import { defineConfig, defineGlobalStyles } from '@pandacss/dev'
+import { createPreset } from '@park-ui/panda-preset'
+
+import { button } from '@/configs/ui-preset/button'
+import { hoverCard } from '@/configs/ui-preset/hover-card'
+import { iconButton } from '@/configs/ui-preset/icon-button'
+import { pagination } from '@/configs/ui-preset/pagination'
+import { table } from '@/configs/ui-preset/table'
+import { tabs } from '@/configs/ui-preset/tabs'
+import { tooltip } from '@/configs/ui-preset/tooltip'
 
 const globalCss = defineGlobalStyles({
   body: {
-    color: 'textPrimary',
-    background: 'bgPrimary',
+    color: 'text.primary',
+    background: 'bg.default',
+    '--colors-bg-default': 'var(--colors-bg-primary)',
+    minW: '1280px',
+    fontFamily: 'var(--font-montserrat)',
+    fontWeight: 'medium',
+    minH: '100svh',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
   },
 })
 
 export default defineConfig({
   jsxFramework: 'react',
   preflight: true,
-  presets: ['@pandacss/preset-base', '@park-ui/panda-preset'],
+  presets: [
+    '@pandacss/preset-base',
+    createPreset({
+      accentColor: 'blue',
+      grayColor: 'slate',
+      borderRadius: 'sm',
+    }),
+  ],
   include: ['./src/**/*.{js,jsx,ts,tsx}', './app/**/*.{js,jsx,ts,tsx}'],
   exclude: [],
   theme: {
     extend: {
+      recipes: {
+        button,
+        iconButton,
+      },
+      slotRecipes: {
+        table,
+        tooltip,
+        pagination,
+        tabs,
+        hoverCard,
+      },
       tokens: {
+        sizes: {
+          content: {
+            value: '1280px',
+          },
+        },
         colors: {
           brand: {
             value: '#3483FF',
-          },
-          textPrimary: {
-            value: '#fff',
-          },
-          textSecondary: {
-            value: '#9A9CA6',
-          },
-          textLink: {
-            value: '#319CFF',
+            a10: {
+              value: 'rgba(52,131,255,0.1)',
+            },
           },
           danger: {
             value: '#FF4144',
+            a10: {
+              value: 'rgba(255,65,68,0.1)',
+            },
           },
           warning: {
             value: '#FF8744',
+            a10: {
+              value: 'rgba(255,135,68,0.1)',
+            },
           },
           success: {
             value: '#0FF082',
+            a10: {
+              value: 'rgba(15,240,130,0.1)',
+            },
+          },
+          border: {
+            primary: {
+              value: '#272A42',
+            },
+            light: {
+              value: '#4C546D',
+            },
           },
-          borderPrimary: {
-            value: '#272A42',
+          text: {
+            primary: {
+              value: '#fff',
+            },
+            secondary: {
+              value: '#cecece',
+            },
+            third: {
+              value: '#9A9CA6',
+            },
+            disabled: {
+              value: 'rgba(255, 255, 255, 0.6)',
+            },
+            link: {
+              value: '#319CFF',
+            },
           },
-          bgPrimary: {
-            value: '#11131F',
+          bg: {
+            primary: {
+              value: '#11131F',
+            },
+            card: {
+              value: '#1D1F31',
+              hover: {
+                value: '#181A29',
+              },
+            },
+            input: {
+              value: '#292C44',
+            },
           },
         },
       },

frontend/park-ui.json

@@ -1,10 +1,9 @@
 {
-  "$schema": "https://park-ui.com/schema.json",
-  "cssFramework": "panda",
+  "$schema": "https://park-ui.com/registry/latest/schema.json",
+  "importAlias": "@/*",
   "jsFramework": "react",
-  "importAliases": {
-    "components": "@/components/ui",
-    "utils": "@/lib"
-  },
-  "useReactServerComponents": true
-}
+  "outputPaths": {
+    "componentsDir": "@/components/ui",
+    "libDir": "@/lib"
+  }
+}

frontend/src/app/[lang]/LinguiClientProvider.tsx

@@ -2,10 +2,9 @@
 
 import { type Messages, setupI18n } from '@lingui/core'
 import { I18nProvider } from '@lingui/react'
-import { ReactNode, useState } from 'react'
+import { type PropsWithChildren, useState } from 'react'
 
-interface Props {
-  children: ReactNode
+interface Props extends PropsWithChildren {
   initialLocale: string
   initialMessages: Messages
 }

frontend/src/app/[lang]/address/[address]/assets/page.tsx

@@ -0,0 +1,5 @@
+import { Box } from 'styled-system/jsx'
+
+export default function Page() {
+  return <Box>Assets</Box>
+}

frontend/src/app/[lang]/address/[address]/layout.tsx

@@ -0,0 +1,37 @@
+import { i18n } from '@lingui/core'
+import { t } from '@lingui/macro'
+import type { PropsWithChildren } from 'react'
+import { HStack, VStack } from 'styled-system/jsx'
+
+import { Overflow } from '@/app/[lang]/address/[address]/overflow'
+import { Copier } from '@/components/copier'
+import { LinkTabs } from '@/components/link-tabs'
+import { Heading } from '@/components/ui'
+
+export default function Layout({ children, params: { address } }: PropsWithChildren & { params: { address: string } }) {
+  return (
+    <VStack w="100%" maxW="content" p="30px" gap="30px">
+      <HStack w="100%" gap="24px" p="30px" bg="bg.card" rounded="8px">
+        <Heading fontSize="20px" fontWeight="semibold">
+          {t(i18n)`Address`}
+        </Heading>
+        <Copier value={address}>{address}</Copier>
+      </HStack>
+      <Overflow />
+      <LinkTabs
+        w="100%"
+        links={[
+          {
+            href: `/address/${address}/transactions`,
+            label: t(i18n)`Transactions`,
+          },
+          {
+            href: `/address/${address}/assets`,
+            label: t(i18n)`RGB++ Assets`,
+          },
+        ]}
+      />
+      {children}
+    </VStack>
+  )
+}