Hubble Bridge V2 UI

.github/workflows/codeql-analysis.yml

@@ -1,8 +1,8 @@
-name: "scan 🔎"
+name: 'scan 🔎'
 
 on:
   pull_request:
-    branches: [ develop, staging, master ]  
+    branches: [develop, staging, master]
 
   schedule:
     #        ┌───────────── minute (0 - 59)
@@ -28,44 +28,44 @@ jobs:
       security-events: write
 
     steps:
-    - name: Cancel Previous Runs
-      uses: styfle/[email protected]
-      with:
-        access_token: ${{ github.token }}
-    - name: Checkout repository
-      uses: actions/[email protected]
-      with:
-        # We must fetch at least the immediate parents so that if this is
-        # a pull request then we can checkout the head.
-        fetch-depth: 2
+      - name: Cancel Previous Runs
+        uses: styfle/[email protected]
+        with:
+          access_token: ${{ github.token }}
+      - name: Checkout repository
+        uses: actions/[email protected]
+        with:
+          # We must fetch at least the immediate parents so that if this is
+          # a pull request then we can checkout the head.
+          fetch-depth: 2
 
-    # If this run was triggered by a pull request event, then checkout
-    # the head of the pull request instead of the merge commit.
-    - run: git checkout HEAD^2
-      if: ${{ github.event_name == 'pull_request' }}
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      # Override language selection by uncommenting this and choosing your languages
-      # with:
-      #   languages: go, javascript, csharp, python, cpp, java
+      # If this run was triggered by a pull request event, then checkout
+      # the head of the pull request instead of the merge commit.
+      - run: git checkout HEAD^2
+        if: ${{ github.event_name == 'pull_request' }}
 
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        # Override language selection by uncommenting this and choosing your languages
+        # with:
+        #   languages: go, javascript, csharp, python, cpp, java
 
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
 
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 https://git.io/JvXDl
 
-    #- run: |
-    #   make bootstrap
-    #   make release
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language
 
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      #- run: |
+      #   make bootstrap
+      #   make release
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2

.github/workflows/deploy-storybook-docs.yml

@@ -1,9 +1,13 @@
 name: publish
-on: 
+on:
   push:
     branches:
       - develop
-    paths: ["libs/webb-ui-components/src/stories/**", "libs/webb-ui-components/.storybook/**", ".storybook" ] # Trigger the action only when files change in the folders defined here
+    paths: [
+        'libs/webb-ui-components/src/stories/**',
+        'libs/webb-ui-components/.storybook/**',
+        '.storybook',
+      ] # Trigger the action only when files change in the folders defined here
 jobs:
   component-docs:
     runs-on: ubuntu-latest
@@ -22,4 +26,4 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           BRANCH: gh-pages # The branch the action should deploy to.
           FOLDER: ~/work/webb-dapp/webb-dapp/dist/storybook/webb-ui-components/ # The folder that the build-storybook script generates files.
-          CLEAN: true # Automatically remove deleted files from the deploy branch
+          CLEAN: true # Automatically remove deleted files from the deploy branch

.github/workflows/ui-review.yml

@@ -6,7 +6,7 @@ name: 'visual ✨'
 on:
   pull_request:
     # types: [opened, synchronize, reopened, ready_for_review]
-    branches: [ develop ]
+    branches: [develop]
 
   workflow_dispatch:
 
@@ -32,4 +32,4 @@ jobs:
           # 👇 Chromatic projectToken, refer to the manage page to obtain it.
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           buildScriptName: 'build:storybook'
-          exitZeroOnChanges: true # 👈 Option to prevent the workflow from failing
+          exitZeroOnChanges: true # 👈 Option to prevent the workflow from failing

.storybook/main.js

@@ -7,7 +7,6 @@ module.exports = {
     'storybook-addon-react-router-v6',
     '@storybook/theming',
     '@storybook/addon-a11y',
-    'storybook-tailwind-dark-mode',
   ],
   features: {
     interactionsDebugger: true,

apps/bridge-dapp/.eslintrc.json

@@ -1,6 +1,11 @@
 {
-  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "extends": [
+    "plugin:@nx/react",
+    "../../.eslintrc.json",
+    "plugin:react-hooks/recommended"
+  ],
   "ignorePatterns": ["!**/*", "node_modules/**", "build/**"],
+  "plugins": ["unused-imports"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
@@ -14,5 +19,9 @@
       "files": ["*.js", "*.jsx"],
       "rules": {}
     }
-  ]
+  ],
+  "rules": {
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error"
+  }
 }

apps/bridge-dapp/src/App.tsx

@@ -1,14 +1,8 @@
-import {
-  AppEvent,
-  RouterProvider,
-  WebbProvider,
-} from '@webb-tools/api-provider-environment';
-import { FC } from 'react';
-
-import { WebbUIProvider } from '@webb-tools/webb-ui-components';
-import { config as routerConfig } from './routes';
-
 import * as Sentry from '@sentry/react';
+import { AppEvent, WebbProvider } from '@webb-tools/api-provider-environment';
+import { WebbUIProvider } from '@webb-tools/webb-ui-components';
+import { FC } from 'react';
+import BridgeRoutes from './routes';
 
 // Singleton app event instance
 export const appEvent = new AppEvent();
@@ -17,7 +11,7 @@ const App: FC = () => {
   return (
     <WebbUIProvider hasErrorBoudary>
       <WebbProvider appEvent={appEvent} applicationName={'Webb DApp'}>
-        <RouterProvider config={routerConfig} />
+        <BridgeRoutes />
       </WebbProvider>
     </WebbUIProvider>
   );

apps/bridge-dapp/src/components/ChainListCardWrapper/ChainListCardWrapper.tsx

@@ -1,12 +1,11 @@
 import { useWebContext } from '@webb-tools/api-provider-environment';
 import { calculateTypedChainId } from '@webb-tools/sdk-core';
 import { ChainListCard, useWebbUI } from '@webb-tools/webb-ui-components';
+import { ChainType } from '@webb-tools/webb-ui-components/components/ListCard/types';
 import { FC, useCallback, useMemo } from 'react';
 import { useConnectWallet } from '../../hooks';
-import { ChainListCardWrapperProps } from './types';
-import { getNativeCurrencyFromConfig } from '@webb-tools/dapp-config';
 import { getActiveSourceChains } from '../../utils/getActiveSourceChains';
-import { Bridge } from '@webb-tools/abstract-api-provider';
+import { ChainListCardWrapperProps } from './types';
 
 /**
  * The wrapper component for the ChainListCard component
@@ -53,16 +52,10 @@ export const ChainListCardWrapper: FC<ChainListCardWrapperProps> = ({
     if (chainsProps) return chainsProps;
 
     return getActiveSourceChains(apiConfig.chains).map((val) => {
-      const currency = getNativeCurrencyFromConfig(
-        apiConfig.currencies,
-        calculateTypedChainId(val.chainType, val.id)
-      );
-
       return {
         name: val.name,
         tag: val.tag,
-        symbol: currency?.symbol ?? 'Unknown',
-      };
+      } satisfies ChainType;
     });
   }, [apiConfig, chainsProps]);
 
@@ -87,13 +80,6 @@ export const ChainListCardWrapper: FC<ChainListCardWrapperProps> = ({
           calculateTypedChainId(chain.chainType, chain.id)
         );
 
-      let bridge: Bridge | undefined;
-      const bridgeConfig =
-        fungibleCurrency && apiConfig.bridgeByAsset[fungibleCurrency.id];
-      if (bridgeConfig) {
-        bridge = new Bridge(fungibleCurrency, bridgeConfig.anchors);
-      }
-
       // If the selected chain is supported by the active wallet
       if (isSupported) {
         await switchChain(chain, activeWallet);
@@ -105,9 +91,7 @@ export const ChainListCardWrapper: FC<ChainListCardWrapperProps> = ({
     },
     [
       activeWallet,
-      apiConfig.bridgeByAsset,
       chainsConfig,
-      fungibleCurrency,
       onChange,
       setMainComponent,
       switchChain,