Merge branch 'dev' into 'master'

Merge dev into master branch See merge request ergo/rosen-bridge/ui!428
rosen-bridge · Jan 15, 2025 · c5a34f6 · c5a34f6
2 parents f515cbc + f0cc22b
commit c5a34f6
Show file tree

Hide file tree

Showing 20 changed files with 181 additions and 84 deletions.
diff --git a/.changeset/sixty-eagles-shave.md → .changeset/fluffy-dingos-juggle.md b/.changeset/sixty-eagles-shave.md → .changeset/fluffy-dingos-juggle.md
diff --git a/apps/guard/CHANGELOG.md b/apps/guard/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @rosen-bridge/guard-app
 
+## 1.10.0
+
+### Minor Changes
+
+- Add Chain and Addresses columns to the table on the Events and History pages
+
+### Patch Changes
+
+- Enhance the React components by using the `PropsWithChildren` type instead of creating a custom type definition for scenarios that only require children props
+- Update the Lodash version to the latest release to enhance consistency
+- Updated dependencies
+  - @rosen-bridge/ui-kit@1.7.2
+  - @rosen-ui/utils@0.4.3
+
 ## 1.9.2
 
 ### Patch Changes

diff --git a/apps/guard/app/App.tsx b/apps/guard/app/App.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { ReactNode } from 'react';
+import React, { PropsWithChildren } from 'react';
 
 import { NoSsr } from '@mui/material';
 import { ApiKeyContextProvider } from '@rosen-bridge/shared-contexts';
@@ -13,7 +13,7 @@ import { mockedData } from './_mock/mockedData';
 import { SideBar } from './SideBar';
 import { Toolbar } from './Toolbar';
 
-export const App = ({ children }: { children?: ReactNode }) => {
+export const App = ({ children }: PropsWithChildren) => {
   return (
     <NoSsr>
       <ApiKeyContextProvider>

diff --git a/apps/guard/app/events/TableRow.tsx b/apps/guard/app/events/TableRow.tsx
@@ -1,9 +1,16 @@
 import { useState, FC, useMemo } from 'react';
 
 import { AngleDown, AngleUp } from '@rosen-bridge/icons';
-import { Button, EnhancedTableCell, TableRow, Id } from '@rosen-bridge/ui-kit';
+import {
+  Button,
+  EnhancedTableCell,
+  TableRow,
+  Id,
+  Connector,
+} from '@rosen-bridge/ui-kit';
 import { NETWORKS } from '@rosen-ui/constants';
 import { getDecimalString, getTxURL } from '@rosen-ui/utils';
+import { upperFirst } from 'lodash-es';
 
 import { OngoingEvent } from '@/_types/api';
 
@@ -30,61 +37,63 @@ export const tabletHeader = [
   {
     title: 'Event Id',
     cellProps: {
-      width: 150,
+      width: 120,
     },
   },
   {
     title: 'Lock TX Id',
     cellProps: {
-      width: 150,
+      width: 120,
     },
   },
   {
     title: 'Trigger TX Id',
     cellProps: {
-      width: 150,
+      width: 120,
     },
   },
   {
-    title: 'From Address',
+    title: 'Chain',
     cellProps: {
-      width: 150,
+      width: 175,
+      align: 'center' as const,
     },
   },
   {
-    title: 'To Address',
+    title: 'Addresses',
     cellProps: {
-      width: 150,
+      width: 250,
+      align: 'center' as const,
     },
   },
   {
     title: 'Token',
     cellProps: {
-      width: 150,
+      width: 120,
     },
   },
   {
     title: 'Amount',
     cellProps: {
-      width: 150,
+      width: 120,
     },
   },
   {
     title: 'Bridge Fee',
     cellProps: {
-      width: 150,
+      width: 120,
     },
   },
   {
     title: 'Network Fee',
     cellProps: {
-      width: 150,
+      width: 120,
     },
   },
   {
     title: 'Status',
     cellProps: {
-      width: 150,
+      width: 120,
     },
   },
 ];
@@ -128,15 +137,21 @@ export const MobileRow: FC<RowProps> = (props) => {
             </EnhancedTableCell>
           </TableRow>
           <TableRow sx={isLoading ? { opacity: 0.3 } : {}}>
-            <EnhancedTableCell>From Address</EnhancedTableCell>
+            <EnhancedTableCell>Chain</EnhancedTableCell>
             <EnhancedTableCell>
-              <Id id={row.fromAddress} />
+              <Connector
+                start={upperFirst(row.fromChain)}
+                end={upperFirst(row.toChain)}
+              />
             </EnhancedTableCell>
           </TableRow>
           <TableRow sx={isLoading ? { opacity: 0.3 } : {}}>
-            <EnhancedTableCell>To Address</EnhancedTableCell>
+            <EnhancedTableCell>Addresses</EnhancedTableCell>
             <EnhancedTableCell>
-              <Id id={row.toAddress} />
+              <Connector
+                start={<Id id={row.fromAddress} />}
+                end={<Id id={row.toAddress} />}
+              />
             </EnhancedTableCell>
           </TableRow>
           <TableRow sx={isLoading ? { opacity: 0.3 } : {}}>
@@ -204,11 +219,17 @@ export const TabletRow: FC<RowProps> = (props) => {
       <EnhancedTableCell>
         <Id id={row.txId} href={getTxURL(NETWORKS.ERGO, row.txId)!} />
       </EnhancedTableCell>
-      <EnhancedTableCell>
-        <Id id={row.fromAddress} />
+      <EnhancedTableCell align="center">
+        <Connector
+          start={upperFirst(row.fromChain)}
+          end={upperFirst(row.toChain)}
+        />
       </EnhancedTableCell>
-      <EnhancedTableCell>
-        <Id id={row.toAddress} />
+      <EnhancedTableCell align="center">
+        <Connector
+          start={<Id id={row.fromAddress} />}
+          end={<Id id={row.toAddress} />}
+        />
       </EnhancedTableCell>
       <EnhancedTableCell>{row.sourceChainToken.name}</EnhancedTableCell>
       <EnhancedTableCell>

diff --git a/apps/guard/app/history/TableRow.tsx b/apps/guard/app/history/TableRow.tsx
@@ -1,9 +1,16 @@
 import { useState, FC, useMemo } from 'react';
 
 import { AngleDown, AngleUp } from '@rosen-bridge/icons';
-import { Button, EnhancedTableCell, TableRow, Id } from '@rosen-bridge/ui-kit';
+import {
+  Button,
+  EnhancedTableCell,
+  TableRow,
+  Id,
+  Connector,
+} from '@rosen-bridge/ui-kit';
 import { NETWORKS } from '@rosen-ui/constants';
 import { getDecimalString, getTxURL } from '@rosen-ui/utils';
+import { upperFirst } from 'lodash-es';
 
 import { HistoryEvent } from '@/_types/api';
 
@@ -30,61 +37,63 @@ export const tabletHeader = [
   {
     title: 'Event Id',
     cellProps: {
-      width: 150,
+      width: 120,
     },
   },
   {
     title: 'Lock TX Id',
     cellProps: {
-      width: 150,
+      width: 120,
     },
   },
   {
     title: 'Reward TX Id',
     cellProps: {
-      width: 150,
+      width: 120,
     },
   },
   {
-    title: 'From Address',
+    title: 'Chain',
     cellProps: {
-      width: 150,
+      width: 175,
+      align: 'center' as const,
     },
   },
   {
-    title: 'To Address',
+    title: 'Addresses',
     cellProps: {
-      width: 150,
+      width: 250,
+      align: 'center' as const,
     },
   },
   {
     title: 'Token',
     cellProps: {
-      width: 150,
+      width: 120,
     },
   },
   {
     title: 'Amount',
     cellProps: {
-      width: 150,
+      width: 120,
     },
   },
   {
     title: 'Bridge Fee',
     cellProps: {
-      width: 150,
+      width: 120,
     },
   },
   {
     title: 'Network Fee',
     cellProps: {
-      width: 150,
+      width: 120,
     },
   },
   {
     title: 'Status',
     cellProps: {
-      width: 150,
+      width: 120,
     },
   },
 ];
@@ -131,15 +140,21 @@ export const MobileRow: FC<RowProps> = (props) => {
             </EnhancedTableCell>
           </TableRow>
           <TableRow sx={isLoading ? { opacity: 0.3 } : {}}>
-            <EnhancedTableCell>From Address</EnhancedTableCell>
+            <EnhancedTableCell>Chain</EnhancedTableCell>
             <EnhancedTableCell>
-              <Id id={row.fromAddress} />
+              <Connector
+                start={upperFirst(row.fromChain)}
+                end={upperFirst(row.toChain)}
+              />
             </EnhancedTableCell>
           </TableRow>
           <TableRow sx={isLoading ? { opacity: 0.3 } : {}}>
-            <EnhancedTableCell>To Address</EnhancedTableCell>
+            <EnhancedTableCell>Addresses</EnhancedTableCell>
             <EnhancedTableCell>
-              <Id id={row.toAddress} />
+              <Connector
+                start={<Id id={row.fromAddress} />}
+                end={<Id id={row.toAddress} />}
+              />
             </EnhancedTableCell>
           </TableRow>
           <TableRow sx={isLoading ? { opacity: 0.3 } : {}}>
@@ -210,11 +225,17 @@ export const TabletRow: FC<RowProps> = (props) => {
           href={getTxURL(NETWORKS.ERGO, row.rewardTxId)!}
         />
       </EnhancedTableCell>
-      <EnhancedTableCell>
-        <Id id={row.fromAddress} />
+      <EnhancedTableCell align="center">
+        <Connector
+          start={upperFirst(row.fromChain)}
+          end={upperFirst(row.toChain)}
+        />
       </EnhancedTableCell>
-      <EnhancedTableCell>
-        <Id id={row.toAddress} />
+      <EnhancedTableCell align="center">
+        <Connector
+          start={<Id id={row.fromAddress} />}
+          end={<Id id={row.toAddress} />}
+        />
       </EnhancedTableCell>
       <EnhancedTableCell>{row.sourceChainToken.name}</EnhancedTableCell>
       <EnhancedTableCell>

diff --git a/apps/guard/app/layout.tsx b/apps/guard/app/layout.tsx
@@ -1,13 +1,13 @@
 import { Metadata } from 'next';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 
 import { App } from './App';
 
 export const metadata: Metadata = {
   title: 'Rosen Guard',
 };
 
-const RootLayout = ({ children }: { children: React.ReactNode }) => {
+const RootLayout = ({ children }: PropsWithChildren) => {
   return (
     /**
      * TODO: get `lang` from url language path segment

diff --git a/apps/guard/package.json b/apps/guard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rosen-bridge/guard-app",
-  "version": "1.9.2",
+  "version": "1.10.0",
   "private": true,
   "scripts": {
     "prettify": "prettier --write . --ignore-path ../../.gitignore",
@@ -16,10 +16,11 @@
     "@emotion/styled": "^11.11.0",
     "@rosen-bridge/icons": "^1.0.0",
     "@rosen-bridge/shared-contexts": "^0.0.2",
-    "@rosen-bridge/ui-kit": "^1.7.1",
+    "@rosen-bridge/ui-kit": "^1.7.2",
     "@rosen-ui/constants": "^0.0.5",
     "@rosen-ui/swr-helpers": "^0.2.0",
-    "@rosen-ui/utils": "^0.4.2",
+    "@rosen-ui/utils": "^0.4.3",
+    "lodash-es": "^4.17.21",
     "moment": "^2.29.4",
     "next": "14.1.0",
     "react": "^18.2.0",
@@ -34,6 +35,7 @@
     "@rosen-ui/swr-mock": "^0.0.3",
     "@rosen-ui/types": "^0.3.2",
     "@tauri-apps/cli": "^1.4.0",
+    "@types/lodash-es": "^4.17.12",
     "@types/moment": "^2.13.0",
     "@types/node": "^20.17.10",
     "@types/react": "18.2.12",

diff --git a/apps/rosen/CHANGELOG.md b/apps/rosen/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @rosen-bridge/rosen-app
 
+## 4.0.2
+
+### Patch Changes
+
+- Update the Lodash version to the latest release to enhance consistency
+- Updated dependencies
+  - @rosen-bridge/ui-kit@1.7.2
+  - @rosen-ui/utils@0.4.3
+
 ## 4.0.1
 
 ### Patch Changes