8-sided Bridge with DKG Deployment (#1048)

tangle-network · Apr 21, 2023 · 53c5cbc · 53c5cbc
1 parent 9537a37
commit 53c5cbc
Show file tree

Hide file tree

Showing 46 changed files with 1,328 additions and 478 deletions.
diff --git a/apps/bridge-dapp/src/components/ChainListCardWrapper/ChainListCardWrapper.tsx b/apps/bridge-dapp/src/components/ChainListCardWrapper/ChainListCardWrapper.tsx
@@ -108,7 +108,7 @@ export const ChainListCardWrapper: FC<ChainListCardWrapperProps> = ({
     <ChainListCard
       chainType={chainType}
       chains={chains}
-      className="min-w-[550px] w-full h-[700px]"
+      className="min-w-[550px] w-full h-[710px]"
       currentActiveChain={currentActiveChain}
       defaultCategory={activeChain?.tag}
       onChange={handleChainChange}

diff --git a/apps/bridge-dapp/src/containers/DepositContainer/DepositContainer.tsx b/apps/bridge-dapp/src/containers/DepositContainer/DepositContainer.tsx
@@ -114,6 +114,7 @@ export const DepositContainer = forwardRef<
       feeInfo,
       fetchMaxFeeInfo,
       isLoading: isFetchingMaxFeeInfo,
+      resetMaxFeeInfo,
     } = useMaxFeeInfo(maxFeeArgs);
 
     const allTokens = useMemo(
@@ -374,7 +375,8 @@ export const DepositContainer = forwardRef<
       setAmount(0);
       setDestChain(undefined);
       setMainComponentName(undefined);
-    }, []);
+      resetMaxFeeInfo();
+    }, [resetMaxFeeInfo]);
 
     // Main action on click
     const handleDepositButtonClick = useCallback(async () => {
@@ -577,7 +579,7 @@ export const DepositContainer = forwardRef<
 
     const tokenListDepositProps = useMemo<TokenListCardProps>(() => {
       return {
-        className: 'min-w-[550px] h-[700px]',
+        className: 'min-w-[550px] h-[710px]',
         title: `Select a token from ${selectedSourceChain?.name}`,
         popularTokens: [],
         selectTokens: populatedSelectableWebbTokens,
@@ -612,7 +614,7 @@ export const DepositContainer = forwardRef<
       );
 
       return {
-        className: 'min-w-[550px] h-[700px]',
+        className: 'min-w-[550px] h-[710px]',
         selectTokens: tokens,
         value: destChainInputValue,
         title: 'Select a token to Deposit',

diff --git a/apps/bridge-dapp/src/containers/TransferContainer/TransferConfirmContainer.tsx b/apps/bridge-dapp/src/containers/TransferContainer/TransferConfirmContainer.tsx
@@ -10,7 +10,12 @@ import { downloadString } from '@webb-tools/browser-utils';
 import { chainsPopulated } from '@webb-tools/dapp-config';
 import { useRelayers, useTxQueue, useVAnchor } from '@webb-tools/react-hooks';
 import { ChainType, Note, calculateTypedChainId } from '@webb-tools/sdk-core';
-import { TransferConfirm, useWebbUI } from '@webb-tools/webb-ui-components';
+import {
+  getRoundedAmountString,
+  TransferConfirm,
+  useWebbUI,
+} from '@webb-tools/webb-ui-components';
+import { BigNumber, ethers } from 'ethers';
 import { forwardRef, useCallback, useMemo, useState } from 'react';
 import {
   useLatestTransactionStage,
@@ -43,7 +48,7 @@ export const TransferConfirmContainer = forwardRef<
       transferUtxo,
       inputNotes,
       onResetState,
-      feeAmount,
+      feeInWei: feeAmount,
       feeToken,
       ...props
     },
@@ -188,6 +193,7 @@ export const TransferConfirmContainer = forwardRef<
           notes: inputNotes,
           changeUtxo,
           transferUtxo,
+          feeAmount: feeAmount ?? BigNumber.from(0),
         };
 
         const args = await vAnchorApi.prepareTransaction(tx, txPayload, '');
@@ -236,6 +242,7 @@ export const TransferConfirmContainer = forwardRef<
       setMainComponent,
       changeUtxo,
       transferUtxo,
+      feeAmount,
       activeRelayer,
       noteManager,
       onResetState,
@@ -250,6 +257,16 @@ export const TransferConfirmContainer = forwardRef<
       return txPayload ? txPayload.txStatus.message?.replace('...', '') : '';
     }, [txId, txPayloads]);
 
+    const formattedFee = useMemo(() => {
+      if (!feeAmount) {
+        return undefined;
+      }
+
+      const amountNum = Number(ethers.utils.formatEther(feeAmount));
+
+      return getRoundedAmountString(amountNum, 3, Math.round);
+    }, [feeAmount]);
+
     return (
       <TransferConfirm
         {...props}
@@ -275,7 +292,7 @@ export const TransferConfirmContainer = forwardRef<
         relayerAvatarTheme={
           activeChain?.chainType === ChainType.EVM ? 'ethereum' : 'polkadot'
         }
-        fee={feeAmount}
+        fee={formattedFee}
         feeToken={feeToken}
         onClose={() => setMainComponent(undefined)}
         checkboxProps={{