Merge branch 'develop' into PS/tangle-dapp-wallet-connection

.github/workflows/check-build.yml

@@ -2,9 +2,9 @@ name: build 🏗️
 
 on:
   pull_request:
-    branches: [develop, staging, master]
+    branches: [develop, staging, master, feature/**]
   push:
-    branches: [develop, staging, master]
+    branches: [develop, staging, master, feature/**]
 
   workflow_dispatch:
 

.github/workflows/check-lint.yml

@@ -2,7 +2,7 @@ name: clean 🧹
 
 on:
   pull_request:
-    branches: [develop, staging, master]
+    branches: [develop, staging, master, feature/**]
 
   workflow_dispatch:
 

.github/workflows/codeql-analysis.yml

@@ -2,7 +2,7 @@ name: 'scan 🔎'
 
 on:
   pull_request:
-    branches: [develop, staging, master]
+    branches: [develop, staging, master, feature/**]
 
   schedule:
     #        ┌───────────── minute (0 - 59)

.github/workflows/deploy-bridge-dapp-dev.yml

@@ -6,7 +6,7 @@ name: deploy-bridge-dapp 🌐
 on:
   pull_request:
     types: [opened, synchronize, reopened, ready_for_review]
-    branches: [develop]
+    branches: [develop, feature/**]
     paths:
       - 'apps/bridge-dapp/**'
 

.github/workflows/deploy-faucet.yml

@@ -6,7 +6,7 @@ name: deploy-faucet 🌐
 on:
   pull_request:
     types: [opened, synchronize, reopened, ready_for_review]
-    branches: [develop]
+    branches: [develop, feature/**]
     paths:
       - 'apps/faucet/**'
 

.github/workflows/deploy-stats-dapp-dev.yml

@@ -6,7 +6,7 @@ name: deploy-stats-dapp 🌐
 on:
   pull_request:
     types: [opened, synchronize, reopened, ready_for_review]
-    branches: [develop]
+    branches: [develop, feature/**]
     paths:
       - 'apps/stats-dapp/**'
 

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

@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - develop
+      - feature/**
     paths: [
         'libs/webb-ui-components/src/stories/**',
         'libs/webb-ui-components/.storybook/**',

.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, feature/**]
 
   workflow_dispatch:
 

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

@@ -8,11 +8,11 @@ import { FeeDetails } from '@webb-tools/webb-ui-components/components/FeeDetails
 import type { FeeItem } from '@webb-tools/webb-ui-components/components/FeeDetails/types';
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
 import { formatEther } from 'viem';
-import getRelayerFeePercentage from '../utils/getRelayerFeePercentage';
-import { useMemo } from 'react';
+import { getRelayerFeePercentage } from '../utils';
+import { type FC, useMemo } from 'react';
 import { calculateTypedChainId } from '@webb-tools/sdk-core/typed-chain-id';
 
-const RelayerFeeDetails = (props: {
+interface RelayerFeeDetailsProps {
   totalFeeWei: bigint | undefined;
   totalFeeToken: string | undefined;
   gasFeeInfo: bigint | undefined;
@@ -21,18 +21,20 @@ const RelayerFeeDetails = (props: {
   srcChainCfg: ChainConfig | undefined;
   fungibleCfg: CurrencyConfig | undefined;
   activeRelayer: OptionalActiveRelayer;
-}) => {
-  const {
-    activeRelayer,
-    fungibleCfg,
-    gasFeeInfo,
-    isFeeLoading,
-    relayerFeeInfo,
-    srcChainCfg,
-    totalFeeToken,
-    totalFeeWei,
-  } = props;
+  info?: string;
+}
 
+const RelayerFeeDetails: FC<RelayerFeeDetailsProps> = ({
+  activeRelayer,
+  fungibleCfg,
+  gasFeeInfo,
+  isFeeLoading,
+  relayerFeeInfo,
+  srcChainCfg,
+  totalFeeToken,
+  totalFeeWei,
+  info,
+}) => {
   const relayerFeePercentage = useMemo(() => {
     if (!activeRelayer || !srcChainCfg) {
       return;
@@ -48,6 +50,7 @@ const RelayerFeeDetails = (props: {
 
   return (
     <FeeDetails
+      info={info}
       isTotalLoading={isFeeLoading}
       totalFee={
         typeof totalFeeWei === 'bigint'

apps/bridge-dapp/src/components/index.ts

@@ -1,7 +1,6 @@
 export * from './EducationCard';
 export * from './Header';
 export * from './InteractiveFeedbackView';
-export { default as RelayerFeeDetails } from './RelayerFeeDetails';
 export { default as SlideAnimation } from './SlideAnimation';
 export { default as SubmittedTxModal } from './SubmittedTxModal';
 export { default as TxInfoItem } from './TxInfoItem';

apps/bridge-dapp/src/containers/DepositConfirmContainer/DepositConfirmContainer.tsx

@@ -4,14 +4,17 @@ import {
   Transaction,
   TransactionState,
 } from '@webb-tools/abstract-api-provider';
+import { GasStationFill } from '@webb-tools/icons';
+import { chainsConfig } from '@webb-tools/dapp-config/chains/chain-config';
 import { useWebContext } from '@webb-tools/api-provider-environment/webb-context';
-import { downloadString } from '@webb-tools/browser-utils';
+import { getExplorerURI } from '@webb-tools/api-provider-environment/transaction/utils';
+import { useBalancesFromNotes } from '@webb-tools/react-hooks/currency/useBalancesFromNotes';
+import { handleStoreNote } from '../../utils';
 import { useVAnchor } from '@webb-tools/react-hooks';
-import { Note } from '@webb-tools/sdk-core';
 import { isViemError } from '@webb-tools/web3-api-provider';
-import { DepositConfirm } from '@webb-tools/webb-ui-components';
+import { FeeDetails, DepositConfirm } from '@webb-tools/webb-ui-components';
 import { forwardRef, useCallback, useMemo, useState } from 'react';
-import { ContractFunctionRevertedError, formatUnits } from 'viem';
+import { ContractFunctionRevertedError, formatUnits, formatEther } from 'viem';
 import { useEnqueueSubmittedTx } from '../../hooks';
 import useInProgressTxInfo from '../../hooks/useInProgressTxInfo';
 import {
@@ -30,12 +33,12 @@ const DepositConfirmContainer = forwardRef<
   (
     {
       amount,
-      destChain,
       fungibleTokenId,
       note,
       onResetState,
       onClose,
-      sourceChain,
+      sourceTypedChainId: sourceTypedChainIdProp,
+      destTypedChainId: destTypedChainIdProp,
       wrappableTokenId,
     },
     ref
@@ -55,6 +58,8 @@ const DepositConfirmContainer = forwardRef<
 
     const { api: txQueueApi } = txQueue;
 
+    const { balances } = useBalancesFromNotes();
+
     const fungibleToken = useMemo(() => {
       return new Currency(apiConfig.currencies[fungibleTokenId]);
     }, [apiConfig.currencies, fungibleTokenId]);
@@ -83,14 +88,40 @@ const DepositConfirmContainer = forwardRef<
       txStatusMessage,
     } = useInProgressTxInfo(wrappingFlow, onResetState);
 
-    // Download for the deposit confirm
-    const downloadNote = useCallback((note: Note) => {
-      const noteStr = note.serialize();
-      downloadString(
-        JSON.stringify(noteStr),
-        noteStr.slice(-noteStr.length) + '.json'
-      );
-    }, []);
+    const sourceTypedChainId = useMemo(
+      () => sourceTypedChainIdProp ?? +note.note.sourceChainId,
+      [sourceTypedChainIdProp, note.note.sourceChainId]
+    );
+
+    const destTypedChainId = useMemo(
+      () => destTypedChainIdProp ?? +note.note.targetChainId,
+      [destTypedChainIdProp, note.note.targetChainId]
+    );
+
+    const newBalance = useMemo(() => {
+      const balance = balances?.[fungibleTokenId]?.[destTypedChainId];
+      if (!balance) return amount;
+      return Number(formatEther(balance)) + amount;
+    }, [balances, fungibleTokenId, destTypedChainId, note, amount]);
+
+    const poolAddress = useMemo(
+      () => apiConfig.anchors[fungibleTokenId][destTypedChainId],
+      [apiConfig, fungibleTokenId, destTypedChainId]
+    );
+
+    const poolExplorerUrl = useMemo(() => {
+      const blockExplorerUrl =
+        chainsConfig[destTypedChainId]?.blockExplorers?.default.url;
+
+      if (!blockExplorerUrl) return undefined;
+
+      return getExplorerURI(
+        blockExplorerUrl,
+        poolAddress,
+        'address',
+        'web3'
+      ).toString();
+    }, [destTypedChainId, poolAddress]);
 
     const handleExecuteDeposit = useCallback(
       async () => {
@@ -185,8 +216,7 @@ const DepositConfirmContainer = forwardRef<
 
           const transactionHash = await api.transact(...args);
 
-          downloadNote(note);
-          await addNoteToNoteManager(note);
+          await handleStoreNote(note, addNoteToNoteManager);
 
           enqueueSubmittedTx(
             transactionHash,
@@ -236,7 +266,7 @@ const DepositConfirmContainer = forwardRef<
         }
       },
       // prettier-ignore
-      [activeAccount?.address, activeApi, activeChain, addNoteToNoteManager, api, apiConfig, downloadNote, enqueueSubmittedTx, fungibleTokenId, inProgressTxId.length, note, onResetState, removeNoteFromNoteManager, setInProgressTxId, setTotalStep, startNewTransaction, txQueueApi, wrappableToken]
+      [activeAccount?.address, activeApi, activeChain, addNoteToNoteManager, api, apiConfig, enqueueSubmittedTx, fungibleTokenId, inProgressTxId.length, note, onResetState, removeNoteFromNoteManager, setInProgressTxId, setTotalStep, startNewTransaction, txQueueApi, wrappableToken]
     );
 
     return (
@@ -261,12 +291,16 @@ const DepositConfirmContainer = forwardRef<
         }}
         totalProgress={totalStep}
         progress={currentStep}
-        onDownload={() => downloadNote(note)}
         amount={amount}
-        wrappingAmount={String(amount)}
+        wrappingAmount={amount}
         fungibleTokenSymbol={fungibleToken.view.symbol}
-        sourceChain={sourceChain}
-        destChain={destChain}
+        sourceTypedChainId={sourceTypedChainId}
+        destTypedChainId={destTypedChainId}
+        sourceAddress={activeAccount?.address ?? ''}
+        destAddress={note.note.targetIdentifyingData}
+        poolAddress={poolAddress}
+        poolExplorerUrl={poolExplorerUrl}
+        newBalance={newBalance}
         wrappableTokenSymbol={wrappableToken?.view.symbol}
         txStatusColor={
           txStatus === 'completed'
@@ -277,6 +311,17 @@ const DepositConfirmContainer = forwardRef<
         }
         txStatusMessage={txStatusMessage}
         onClose={onClose}
+        feesSection={
+          <FeeDetails
+            info="The fee pays for the transaction to be processed on the network."
+            items={[
+              {
+                name: 'Gas',
+                Icon: <GasStationFill />,
+              },
+            ]}
+          />
+        }
       />
     );
   }

apps/bridge-dapp/src/containers/DepositConfirmContainer/types.ts

@@ -1,4 +1,3 @@
-import { ChainGroup } from '@webb-tools/dapp-config/chains/chain-config.interface';
 import { Note } from '@webb-tools/sdk-core/note';
 import { PropsOf } from '@webb-tools/webb-ui-components/types';
 
@@ -16,18 +15,12 @@ export interface DepositConfirmContainerProps extends PropsOf<'div'> {
   /**
    * The source chain
    */
-  sourceChain?: {
-    type: ChainGroup;
-    name: string;
-  };
+  sourceTypedChainId?: number;
 
   /**
    * The destination chain
    */
-  destChain?: {
-    type: ChainGroup;
-    name: string;
-  };
+  destTypedChainId?: number;
 
   /**
    * The fungible token id