Merge branch 'dev' into 'master'

Merge dev into master branch

See merge request ergo/rosen-bridge/ui!368

.changeset/late-fans-join.md

@@ -0,0 +1,2 @@
+---
+---

.github/workflows/docker-dev-release.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        os: [ ubuntu-latest ]
+        os: [ubuntu-latest]
         apps:
           - watcher
           - guard

.github/workflows/docker-release.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        os: [ ubuntu-latest ]
+        os: [ubuntu-latest]
 
     steps:
       - name: Checkout the Code

.gitignore

@@ -19,3 +19,13 @@ coverage
 yarn.lock
 *.sqlite
 *.tsbuildinfo
+
+.bin
+.env
+.next
+out
+build
+config
+configs
+next-env.d.ts 
+!config/default.yaml

.lintstagedrc.mjs

@@ -1,4 +1,27 @@
+import fs from 'fs';
+import path from 'path';
+
 export default {
   '*': 'prettier --ignore-unknown --write',
+  '**/{networks,packages,wallets}/**/*.{js,jsx,ts,tsx}': 'eslint --fix',
+  '**/{networks,packages,wallets}/**/*.{ts,tsx}': (files) => {
+    const packages = new Set();
+
+    files.forEach((file) => {
+      let directory = path.dirname(file);
+
+      while (directory !== process.cwd()) {
+        if (fs.existsSync(path.join(directory, 'package.json'))) {
+          packages.add(
+            `npm run type-check --workspace ${path.relative(process.cwd(), directory)}`,
+          );
+          break;
+        }
+        directory = path.dirname(directory);
+      }
+    });
+
+    return Array.from(packages);
+  },
   '*.{js,jsx,ts,tsx}': 'npm run test:related',
 };

.prettierrc

@@ -1,3 +1,20 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "quoteProps": "consistent",
+  "importOrder": [
+    "^(@?react|@?next)",
+    "<THIRD_PARTY_MODULES>",
+    "^@/(.*)$",
+    "^[.](.*)"
+  ],
+  "importOrderCaseInsensitive": true,
+  "importOrderParserPlugins": [
+    "typescript",
+    "jsx",
+    "classProperties",
+    "[\"decorators\", { \"decoratorsBeforeExport\": true }]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": false,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
 }

apps/guard/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @rosen-bridge/guard-app
 
+## 1.8.0
+
+### Minor Changes
+
+- Add a meta tag title to ensure an appropriate title is displayed in browsers
+- Add a favicon to enhance browser visibility
+
+### Patch Changes
+
+- Restructure modules to use named exports, enhancing clarity and consistency
+- Cleaned up duplicate ApiKeyModal files, moved to the design system, and updated the related imports
+- Updated the @rosen-bridge/ui-kit@1.5.3 dependency
+
 ## 1.7.0
 
 ### Minor Changes

apps/guard/app/(dashboard)/@actions/SendForSigningForm.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import useSWRMutation from 'swr/mutation';
 
+import { Alert } from '@rosen-bridge/icons';
+import { useApiKey } from '@rosen-bridge/shared-contexts';
 import {
   AlertCard,
   AlertProps,
@@ -15,16 +16,13 @@ import {
   Typography,
   styled,
 } from '@rosen-bridge/ui-kit';
+import { ApiKeyModal } from '@rosen-bridge/ui-kit';
+import { NETWORK_LABELS, NETWORKS } from '@rosen-ui/constants';
 import { mutatorWithHeaders } from '@rosen-ui/swr-helpers';
-
-import { Alert } from '@rosen-bridge/icons';
-
-import { useApiKey } from '@rosen-bridge/shared-contexts';
+import { Network } from '@rosen-ui/types';
+import useSWRMutation from 'swr/mutation';
 
 import { ApiSignRequestBody, ApiSignResponse } from '@/_types/api';
-import ApiKeyModal from '@/_modals/ApiKeyModal';
-import { NETWORK_LABELS, NETWORKS } from '@rosen-ui/constants';
-import { Network } from '@rosen-ui/types';
 
 const AlertIcon = styled(Alert)((theme) => ({
   fill: theme.palette.primary.main,
@@ -39,7 +37,7 @@ interface Form {
 /**
  * render a form for signing a tx
  */
-const SendForSigningForm = () => {
+export const SendForSigningForm = () => {
   const { apiKey } = useApiKey();
 
   const {
@@ -198,5 +196,3 @@ const SendForSigningForm = () => {
     </FullCard>
   );
 };
-
-export default SendForSigningForm;

apps/guard/app/(dashboard)/@actions/TabPanel.tsx

@@ -12,7 +12,7 @@ interface TabPanelProps {
  * @param in
  * @param children
  */
-const TabPanel = ({ in: isIn, children }: TabPanelProps) => {
+export const TabPanel = ({ in: isIn, children }: TabPanelProps) => {
   return (
     <Slide
       direction="up"
@@ -28,5 +28,3 @@ const TabPanel = ({ in: isIn, children }: TabPanelProps) => {
     </Slide>
   );
 };
-
-export default TabPanel;

apps/guard/app/(dashboard)/@actions/page.tsx

@@ -20,8 +20,8 @@ import {
   useResponsiveValue,
 } from '@rosen-bridge/ui-kit';
 
-import SendForSigningForm from './SendForSigningForm';
-import TabPanel from './TabPanel';
+import { SendForSigningForm } from './SendForSigningForm';
+import { TabPanel } from './TabPanel';
 
 /**
  * render root of page
@@ -50,15 +50,15 @@ const Root = styled(Box)(({ theme }) => ({
  * render a container for tabs
  */
 const TabsContainer = styled(Box)(({ theme }) => ({
-  position: 'relative',
-  height: 'calc(100% + 32px)',
-  margin: theme.spacing(-2, 0),
+  'position': 'relative',
+  'height': 'calc(100% + 32px)',
+  'margin': theme.spacing(-2, 0),
   [theme.breakpoints.down('tablet')]: {
     margin: theme.spacing(-3, -2),
   },
   '& .MuiTabs-root': {
-    paddingTop: theme.spacing(5),
-    paddingBottom: theme.spacing(5),
+    'paddingTop': theme.spacing(5),
+    'paddingBottom': theme.spacing(5),
     [theme.breakpoints.down('tablet')]: {
       padding: theme.spacing(1, 2, 0, 2),
       backgroundColor: theme.palette.info.dark,
@@ -91,11 +91,11 @@ const TabsContainer = styled(Box)(({ theme }) => ({
     },
   },
   '& .card': {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
+    'position': 'absolute',
+    'width': '100%',
+    'height': '100%',
+    'display': 'flex',
+    'flexDirection': 'column',
     [theme.breakpoints.down('tablet')]: {
       display: 'none',
     },

apps/guard/app/(dashboard)/@infoWidgets/HealthWidget.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import useSWR from 'swr';
 
 import { Alert, ShieldCheck } from '@rosen-bridge/icons';
 import {
@@ -12,6 +11,7 @@ import {
 import { healthStatusColorMap } from '@rosen-ui/constants';
 import { fetcher } from '@rosen-ui/swr-helpers';
 import { AugmentedPalette } from '@rosen-ui/types';
+import useSWR from 'swr';
 
 import { ApiInfoResponse } from '@/_types/api';
 
@@ -25,17 +25,17 @@ interface HealthWidgetBaseProps {
  */
 const HealthWidgetBase = styled(Card)<HealthWidgetBaseProps>(
   ({ theme, ...props }) => ({
-    padding: theme.spacing(2),
-    backgroundColor: theme.palette[props.widgetColor].main,
-    color: theme.palette[props.widgetColor].contrastText,
-    backgroundImage:
+    'padding': theme.spacing(2),
+    'backgroundColor': theme.palette[props.widgetColor].main,
+    'color': theme.palette[props.widgetColor].contrastText,
+    'backgroundImage':
       theme.palette.mode === 'light'
         ? `linear-gradient(180deg, ${
             theme.palette[props.widgetColor].main
           } 0%, ${theme.palette[props.widgetColor].dark} 100%)`
         : 'none',
-    display: 'flex',
-    alignItems: 'center',
+    'display': 'flex',
+    'alignItems': 'center',
     '& span': {
       marginLeft: theme.spacing(2),
       marginRight: theme.spacing(1),
@@ -49,7 +49,7 @@ const HealthWidgetBase = styled(Card)<HealthWidgetBaseProps>(
 /**
  * render a widget showing health status or a pending indicator
  */
-const HealthWidget = () => {
+export const HealthWidget = () => {
   const { data: info, isLoading } = useSWR<ApiInfoResponse>('/info', fetcher);
 
   return (
@@ -89,5 +89,3 @@ const HealthWidget = () => {
     </HealthWidgetBase>
   );
 };
-
-export default HealthWidget;

apps/guard/app/(dashboard)/@infoWidgets/WalletWidget.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 import { Copy, QrcodeScan } from '@rosen-bridge/icons';
@@ -30,24 +30,24 @@ interface WidgetCardProps {
  */
 const WalletWidgetBase = styled(Card)<WidgetCardProps>(
   ({ theme, ...props }) => ({
-    padding: theme.spacing(2),
-    backgroundColor: theme.palette[props.widgetColor].main,
-    backgroundImage:
+    'padding': theme.spacing(2),
+    'backgroundColor': theme.palette[props.widgetColor].main,
+    'backgroundImage':
       theme.palette.mode === 'light'
         ? `linear-gradient(180deg, ${
             theme.palette[props.widgetColor].main
           } 0%, ${theme.palette[props.widgetColor].dark} 100%)`
         : 'none',
-    color: theme.palette.success.contrastText,
-    flexGrow: 1,
+    'color': theme.palette.success.contrastText,
+    'flexGrow': 1,
     '& .title': {
       fontSize: theme.typography.h5.fontSize,
       fontWeight: 'bold',
     },
     '& .value': {
-      fontSize: theme.typography.h2.fontSize,
-      fontWeight: 'bold',
-      textAlign: 'right',
+      'fontSize': theme.typography.h2.fontSize,
+      'fontWeight': 'bold',
+      'textAlign': 'right',
       '& span': {
         fontSize: '50%',
         fontWeight: 'normal',
@@ -92,7 +92,7 @@ interface WalletWidgetProps {
  * @param color
  * @param isLoading
  */
-const WalletWidget = ({
+export const WalletWidget = ({
   title,
   tokenInfoWithAddresses,
   color,
@@ -194,5 +194,3 @@ const WalletWidget = ({
     </WalletWidgetBase>
   );
 };
-
-export default WalletWidget;