Merge branch 'dev' into 'master'

chore: Enhance the Guard and Watcher app to incorporate the latest updates in...

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

.changeset/silent-cups-trade.md

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

.changeset/unlucky-hairs-decide.md

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

.github/workflows/ci.yml

@@ -0,0 +1,65 @@
+name: CI
+
+on:
+  pull_request:
+    branches: ['master', 'dev']
+
+concurrency:
+  group: ci-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  type-lint:
+    name: type-check and lint
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - run: npm ci
+      - run: npm run build:mono-packages
+      - run: npm run type-check --workspaces --if-present
+      - run: npm run lint --workspaces --if-present
+
+  test:
+    name: 'build and test'
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: [18, 20]
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Build and test using Node.js v${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - run: npm ci
+      - run: npm run build:mono-packages
+      - run: npm run coverage
+
+  changeset:
+    name: 'changeset'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          # check out full history
+          fetch-depth: 0
+
+      - name: Run changeset to check versions
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'npm'
+      - run: npx @changesets/[email protected] status --since=origin/dev

.gitlab-ci.yml

@@ -35,24 +35,7 @@ build:
         - wallets/*/node_modules
         - wallets/*/dist
   script:
-    # FIXME: This needs to be removed when a monorepo build mechanism is added
-    # local:ergo/rosen-bridge/ui#24
-    - npm run build --workspace packages/utils
-    - npm run build --workspace packages/constants
-    - npm run build --workspace packages/types
-    - npm run build --workspace packages/shared-contexts
-    - npm run build --workspace packages --if-present
-    - npm run build --workspace wallets/wallet-api
-    - npm run build --workspace networks/bitcoin
-    - npm run build --workspace networks/cardano
-    - npm run build --workspace networks/ergo
-    - npm run build --workspace wallets/nami-wallet
-    - npm run build --workspace wallets/lace-wallet
-    - npm run build --workspace wallets/eternl-wallet
-    - npm run build --workspace wallets/flint-wallet
-    - npm run build --workspace wallets/vespr-wallet
-    - npm run build --workspace wallets/nautilus-wallet
-    - npm run build --workspace wallets/xdefi-wallet
+    - npm run build:mono-packages
 
 type_check:
   stage: type_check

README.md

@@ -0,0 +1,20 @@
+# Rosen Bridge Frontend Monorepo
+
+This monorepo contains all Rosen Bridge frontend applications:
+
+1. [Rosen App](./apps/rosen/README.md)
+2. [Guard App](./apps/guard/README.md)
+3. [Watcher App](./apps/watcher/README.md)
+4. [Rosen Service](./apps/rosen-service/README.md)
+
+## Quick Start
+
+For setup instructions, refer to each app's README file linked above.
+
+## Contributing
+
+We welcome contributions! Please see our [Contributing Guidelines](CONTRIBUTING.md) for more information.
+
+## Support
+
+For technical support or feature requests, please open an issue in the respective app's repository.

apps/guard/.gitignore

@@ -26,6 +26,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

apps/guard/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @rosen-bridge/guard-app
 
+## 1.5.0
+
+### Minor Changes
+
+- Revise the theme provider code to incorporate the latest updates from the design system
+- Update the ApiInfoResponse interface to incorporate the latest API enhancements.
+- Enhance the app to incorporate the latest updates in API functionality and design
+- Integrate a token list for the Ethereum network into the dashboard.
+
+### Patch Changes
+
+- Strengthen type safety and enforce robust typing for Chain and Network types
+- Address the issue related to retrieving the app version property from the API
+- The .env files are included in the .gitignore file for all UI applications to ensure sensitive information remains secure
+- Fix the bug that prevents the Clear button from working correctly in the text field of the API key modal. Ensure that submitting the form does not trigger the parent forms, which would subsequently open a dialog that relies on them.
+
 ## 1.4.1
 
 ### Patch Changes

apps/guard/README.md

@@ -1 +1,27 @@
-# Rosen Bridge guard app
+# Guard App
+
+## Setup Guide
+
+Follow these steps to set up and run your local version of Guard App:
+
+1. **Run a Guard Service**
+
+   - Guard App requires a running Guard Service.
+   - Refer to the Guard Service documentation for setup instructions.
+   - Important: Set `allowedOrigin` in the service config to enable API requests from localhost.
+
+2. **Configure API URL**
+
+   - Open the `fetcher.ts` file.
+   - Set `axios.defaults.baseURL` to your Guard Service API URL.
+
+3. **Install Dependencies and Build Packages**
+   ```bash
+   npm install
+   ./build.sh
+   cd apps/guard
+   ```
+4. **Launch the App**
+   ```bash
+   npm run dev
+   ```

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

@@ -23,13 +23,15 @@ import { useApiKey } from '@rosen-bridge/shared-contexts';
 
 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,
 }));
 
 interface Form {
-  chain: string;
+  chain: Network;
   txJson: string;
   requiredSign: number;
   overwrite?: boolean;
@@ -57,7 +59,7 @@ const SendForSigningForm = () => {
   const { handleSubmit, register, reset, formState } = useForm({
     defaultValues: {
       txJson: '',
-      chain: '',
+      chain: '' as Network,
       requiredSign: 10,
       overwrite: undefined,
     },
@@ -130,9 +132,11 @@ const SendForSigningForm = () => {
           sx={{ mb: 2 }}
           fullWidth
         >
-          <MenuItem value="ergo">Ergo</MenuItem>
-          <MenuItem value="cardano">Cardano</MenuItem>
-          <MenuItem value="bitcoin">Bitcoin</MenuItem>
+          {Object.keys(NETWORKS).map((key) => (
+            <MenuItem key={key} value={NETWORKS[key as keyof typeof NETWORKS]}>
+              {NETWORK_LABELS[key as keyof typeof NETWORKS]}
+            </MenuItem>
+          ))}
         </TextField>
         <TextField
           label="Transaction"

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

@@ -1,8 +1,14 @@
 import React from 'react';
 import useSWR from 'swr';
 
-import { ShieldCheck } from '@rosen-bridge/icons';
-import { Card, CircularProgress, SvgIcon, styled } from '@rosen-bridge/ui-kit';
+import { Alert, ShieldCheck } from '@rosen-bridge/icons';
+import {
+  Card,
+  CircularProgress,
+  SvgIcon,
+  Tooltip,
+  styled,
+} from '@rosen-bridge/ui-kit';
 import { healthStatusColorMap } from '@rosen-ui/constants';
 import { fetcher } from '@rosen-ui/swr-helpers';
 import { AugmentedPalette } from '@rosen-ui/types';
@@ -34,6 +40,9 @@ const HealthWidgetBase = styled(Card)<HealthWidgetBaseProps>(
       marginLeft: theme.spacing(2),
       marginRight: theme.spacing(1),
     },
+    '& strong': {
+      flexGrow: 1,
+    },
   }),
 );
 
@@ -47,7 +56,7 @@ const HealthWidget = () => {
     <HealthWidgetBase
       widgetColor={
         info?.health
-          ? (healthStatusColorMap[info.health] as keyof AugmentedPalette)
+          ? (healthStatusColorMap[info.health.status] as keyof AugmentedPalette)
           : 'secondary'
       }
     >
@@ -60,7 +69,20 @@ const HealthWidget = () => {
               <ShieldCheck />
             </SvgIcon>
             <span>Health is</span>
-            <strong>{info.health}</strong>
+            <strong>{info.health.status}</strong>
+            {!!info.health.trialErrors.length && (
+              <Tooltip
+                title={
+                  <div style={{ whiteSpace: 'pre' }}>
+                    {info.health.trialErrors.join('\n')}
+                  </div>
+                }
+              >
+                <SvgIcon>
+                  <Alert />
+                </SvgIcon>
+              </Tooltip>
+            )}
           </>
         )
       )}

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

@@ -6,33 +6,50 @@ import { Grid, TokensCard } from '@rosen-bridge/ui-kit';
 import { fetcher } from '@rosen-ui/swr-helpers';
 
 import { ApiAddressAssetsResponse } from '@/_types/api';
+import { NETWORKS } from '@rosen-ui/constants';
 
 const Tokens = () => {
   const { data: ergoTokens, isLoading: isErogTokensLoading } =
-    useSWR<ApiAddressAssetsResponse>(['/assets', { chain: 'ergo' }], fetcher);
+    useSWR<ApiAddressAssetsResponse>(
+      ['/assets', { chain: NETWORKS.ERGO }],
+      fetcher,
+    );
 
   const { data: cardanoTokens, isLoading: isCardanoTokensLoading } =
     useSWR<ApiAddressAssetsResponse>(
-      ['/assets', { chain: 'cardano' }],
+      ['/assets', { chain: NETWORKS.CARDANO }],
+      fetcher,
+    );
+
+  const { data: ethereumTokens, isLoading: isEthereumTokensLoading } =
+    useSWR<ApiAddressAssetsResponse>(
+      ['/assets', { chain: NETWORKS.ETHEREUM }],
       fetcher,
     );
 
   return (
     <>
-      <Grid item mobile={12} tablet={6}>
+      <Grid item mobile={12} tablet={6} desktop={4}>
         <TokensCard
           tokens={ergoTokens?.items ?? []}
           isLoading={isErogTokensLoading}
           title="Ergo Tokens"
         />
       </Grid>
-      <Grid item mobile={12} tablet={6}>
+      <Grid item mobile={12} tablet={6} desktop={4}>
         <TokensCard
           tokens={cardanoTokens?.items ?? []}
           isLoading={isCardanoTokensLoading}
           title="Cardano Tokens"
         />
       </Grid>
+      <Grid item mobile={12} tablet={6} desktop={4}>
+        <TokensCard
+          tokens={ethereumTokens?.items ?? []}
+          isLoading={isEthereumTokensLoading}
+          title="Ethereum Tokens"
+        />
+      </Grid>
     </>
   );
 };