Improve balance display across all flows on Hubble Bridge (#1746)

tangle-network · Oct 6, 2023 · 2a24dda · 2a24dda
1 parent 0ae283c
commit 2a24dda
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 62 deletions.
diff --git a/apps/bridge-dapp/src/containers/TxInfoContainer/TxInfoContainer.tsx b/apps/bridge-dapp/src/containers/TxInfoContainer/TxInfoContainer.tsx
@@ -4,38 +4,19 @@ import ShieldKeyholeFillIcon from '@webb-tools/icons/ShieldKeyholeFillIcon';
 
 const TxInfoContainer = ({
   hasRefund,
-  receivingAmount,
-  receivingToken,
   refundAmount,
   refundToken,
   remaining,
   remainingToken,
 }: {
   hasRefund?: boolean;
-  receivingAmount?: number;
-  receivingToken?: string;
   refundAmount?: string;
   refundToken?: string;
   remaining?: number;
   remainingToken?: string;
 }) => {
   return (
     <div className="space-y-2">
-      <TxInfoItem
-        leftContent={{
-          title: 'Receiving',
-        }}
-        rightIcon={<WalletFillIcon />}
-        rightText={
-          typeof receivingAmount === 'number'
-            ? receivingAmount < 0
-              ? '< 0'
-              : `${receivingAmount.toString().slice(0, 10)} ${
-                  receivingToken ?? ''
-                }`.trim()
-            : '--'
-        }
-      />
       {refundAmount && hasRefund && (
         <TxInfoItem
           leftContent={{

diff --git a/apps/bridge-dapp/src/pages/Hubble/Bridge/Deposit/index.tsx b/apps/bridge-dapp/src/pages/Hubble/Bridge/Deposit/index.tsx
@@ -1,5 +1,7 @@
 import { ArrowRight, GasStationFill } from '@webb-tools/icons';
+import { formatEther } from 'viem';
 import { useCurrenciesBalances } from '@webb-tools/react-hooks';
+import { useBalancesFromNotes } from '@webb-tools/react-hooks/currency/useBalancesFromNotes';
 import {
   Button,
   ConnectWalletMobileButton,
@@ -39,11 +41,16 @@ const Deposit = () => {
     wrappableCfg,
   } = useWatchSearchParams();
 
-  const { balances } = useCurrenciesBalances(allCurrencies, srcTypedChainId);
+  const { balances: walletBalances } = useCurrenciesBalances(
+    allCurrencies,
+    srcTypedChainId
+  );
+
+  const { balances: shieldedBalances } = useBalancesFromNotes();
 
   const { depositConfirmComponent, ...depositBtnProps } = useDepositButtonProps(
     {
-      balance: wrappableCfg ? balances[wrappableCfg.id] : undefined,
+      balance: wrappableCfg ? walletBalances[wrappableCfg.id] : undefined,
       fungible: fungibleCfg,
     }
   );
@@ -56,6 +63,18 @@ const Deposit = () => {
     [amount, onAmountChange]
   );
 
+  const totalFungibleAmount = useMemo(() => {
+    if (typeof srcTypedChainId !== 'number') {
+      return;
+    }
+
+    if (fungibleCfg && shieldedBalances[fungibleCfg.id]?.[srcTypedChainId]) {
+      return Number(
+        formatEther(shieldedBalances[fungibleCfg.id][srcTypedChainId])
+      );
+    }
+  }, [shieldedBalances, fungibleCfg, srcTypedChainId]);
+
   const lastPath = useMemo(() => pathname.split('/').pop(), [pathname]);
   if (lastPath && !BRIDGE_TABS.find((tab) => lastPath === tab)) {
     return <Outlet />;
@@ -76,7 +95,9 @@ const Deposit = () => {
           <TransactionInputCard.Root
             typedChainId={srcTypedChainId}
             tokenSymbol={wrappableCfg?.symbol}
-            maxAmount={wrappableCfg ? balances[wrappableCfg.id] : undefined}
+            maxAmount={
+              wrappableCfg ? walletBalances[wrappableCfg.id] : undefined
+            }
             {...amountProps}
           >
             <TransactionInputCard.Header>
@@ -98,14 +119,17 @@ const Deposit = () => {
           <TransactionInputCard.Root
             typedChainId={destTypedChainId}
             tokenSymbol={fungibleCfg?.symbol}
-            maxAmount={fungibleCfg ? balances[fungibleCfg.id] : undefined}
+            maxAmount={totalFungibleAmount}
             {...amountProps}
           >
             <TransactionInputCard.Header>
               <TransactionInputCard.ChainSelector
                 onClick={() => navigate(SELECT_DESTINATION_CHAIN_PATH)}
               />
-              <TransactionInputCard.MaxAmountButton />
+              <TransactionInputCard.MaxAmountButton
+                accountType="note"
+                disabled
+              />
             </TransactionInputCard.Header>
 
             <TransactionInputCard.Body

diff --git a/apps/bridge-dapp/src/pages/Hubble/Bridge/Transfer/index.tsx b/apps/bridge-dapp/src/pages/Hubble/Bridge/Transfer/index.tsx
@@ -247,7 +247,7 @@ const Transfer = () => {
               <TransactionInputCard.ChainSelector
                 onClick={() => handleChainClick()}
               />
-              <TransactionInputCard.MaxAmountButton />
+              <TransactionInputCard.MaxAmountButton accountType="note" />
             </TransactionInputCard.Header>
 
             <TransactionInputCard.Body
@@ -263,7 +263,7 @@ const Transfer = () => {
           <TransactionInputCard.Root
             typedChainId={destTypedChainId ?? undefined}
             tokenSymbol={fungibleCfg?.symbol}
-            amount={amount}
+            amount={receivingAmount?.toString().slice(0, 10)}
             onAmountChange={setAmount}
           >
             <TransactionInputCard.Header>
@@ -380,8 +380,6 @@ const Transfer = () => {
               refundToken={destChainCfg?.nativeCurrency.symbol}
               remaining={remainingBalance}
               remainingToken={fungibleCfg?.symbol}
-              receivingAmount={receivingAmount}
-              receivingToken={fungibleCfg?.symbol}
             />
           </div>
 

diff --git a/apps/bridge-dapp/src/pages/Hubble/Bridge/Withdraw/index.tsx b/apps/bridge-dapp/src/pages/Hubble/Bridge/Withdraw/index.tsx
@@ -233,7 +233,10 @@ const Withdraw = () => {
           >
             <TransactionInputCard.Header>
               <TransactionInputCard.ChainSelector onClick={handleChainClick} />
-              <TransactionInputCard.MaxAmountButton />
+              <TransactionInputCard.MaxAmountButton
+                accountType="note"
+                disabled={!isCustom}
+              />
             </TransactionInputCard.Header>
 
             <TransactionInputCard.Body
@@ -260,9 +263,8 @@ const Withdraw = () => {
           <TransactionInputCard.Root
             typedChainId={srcTypedChainId ?? undefined}
             tokenSymbol={wrappableCfg?.symbol}
-            amount={amount}
+            amount={receivingAmount?.toString().slice(0, 10)}
             onAmountChange={setAmount}
-            isFixedAmount={!isCustom}
             onIsFixedAmountChange={() => setCustomAmount(!isCustom)}
           >
             <TransactionInputCard.Header>
@@ -282,10 +284,6 @@ const Withdraw = () => {
               tokenSelectorProps={{
                 onClick: () => handleTokenClick(),
               }}
-              fixedAmountProps={{
-                isDisabled: true,
-                step: 0.01,
-              }}
               customAmountProps={{
                 isDisabled: true,
                 className: 'text-mono-200 dark:text-mono-0 cursor-not-allowed',
@@ -402,8 +400,6 @@ const Withdraw = () => {
               refundToken={activeChain?.nativeCurrency.symbol}
               remaining={remainingBalance}
               remainingToken={fungibleCfg?.symbol}
-              receivingAmount={receivingAmount}
-              receivingToken={wrappableCfg?.symbol}
             />
           </div>
 

diff --git a/libs/webb-ui-components/src/components/TransactionInputCard/TransactionInputCard.tsx b/libs/webb-ui-components/src/components/TransactionInputCard/TransactionInputCard.tsx
@@ -21,6 +21,7 @@ import { Typography } from '../../typography';
 import { getRoundedAmountString, toFixed } from '../../utils';
 import { AdjustAmount } from '../BridgeInputs';
 import { Switcher } from '../Switcher';
+import { Tooltip, TooltipTrigger, TooltipBody } from '../Tooltip';
 import TextField from '../TextField';
 import { TitleWithInfo } from '../TitleWithInfo';
 import TokenSelector from '../TokenSelector';
@@ -177,6 +178,7 @@ const TransactionMaxAmountButton = forwardRef<
       maxAmount: maxAmountProp,
       accountType: accountTypeProp,
       onAmountChange: onAmountChangeProp,
+      disabled: disabledProp,
       ...props
     },
     ref
@@ -197,32 +199,45 @@ const TransactionMaxAmountButton = forwardRef<
       return `${fmtAmount} ${tokenSym}`.trim();
     }, [maxAmount, tokenSymbol]);
 
+    const disabled = useMemo(
+      () => disabledProp ?? typeof maxAmount !== 'number',
+      [disabledProp, maxAmount]
+    );
+
     return (
-      <TransactionButton
-        {...props}
-        ref={ref}
-        disabled={props.disabled ?? typeof maxAmount !== 'number'}
-        onClick={
-          typeof maxAmount === 'number'
-            ? () => onAmountChange?.(`${toFixed(maxAmount, 5)}`)
-            : undefined
-        }
-        Icon={
-          accountType === 'note' ? (
-            <>
-              <ShieldKeyholeLineIcon className="!fill-current group-hover:group-enabled:hidden group-disabled:hidden" />
-              <ShieldKeyholeFillIcon className="!fill-current hidden group-hover:group-enabled:block group-disabled:block" />
-            </>
-          ) : (
-            <>
-              <WalletLineIcon className="!fill-current group-hover:group-enabled:hidden group-disabled:hidden" />
-              <WalletFillIcon className="!fill-current hidden group-hover:group-enabled:block group-disabled:block" />
-            </>
-          )
-        }
-      >
-        {buttonCnt}
-      </TransactionButton>
+      <Tooltip>
+        <TooltipTrigger>
+          <TransactionButton
+            {...props}
+            ref={ref}
+            disabled={disabled}
+            onClick={
+              typeof maxAmount === 'number'
+                ? () => onAmountChange?.(`${toFixed(maxAmount, 5)}`)
+                : undefined
+            }
+            Icon={
+              accountType === 'note' ? (
+                <>
+                  <ShieldKeyholeLineIcon className="!fill-current group-hover:group-enabled:hidden group-disabled:hidden" />
+                  <ShieldKeyholeFillIcon className="!fill-current hidden group-hover:group-enabled:block group-disabled:block" />
+                </>
+              ) : (
+                <>
+                  <WalletLineIcon className="!fill-current group-hover:group-enabled:hidden group-disabled:hidden" />
+                  <WalletFillIcon className="!fill-current hidden group-hover:group-enabled:block group-disabled:block" />
+                </>
+              )
+            }
+            className={disabled ? 'cursor-not-allowed' : ''}
+          >
+            {buttonCnt}
+          </TransactionButton>
+        </TooltipTrigger>
+        <TooltipBody>
+          {accountType === 'note' ? 'Shielded Balance' : 'Wallet Balance'}
+        </TooltipBody>
+      </Tooltip>
     );
   }
 );