[bug] binance errors

wormhole-connect/src/hooks/useBalanceChecker.ts

@@ -0,0 +1,64 @@
+import { useEffect, useState, useMemo } from 'react';
+import { amount, routes } from '@wormhole-foundation/sdk';
+import { getWalletConnection, TransferWallet } from 'utils/wallet';
+import config from 'config';
+import { useIsMounted } from './useIsMounted';
+
+export const useBalanceChecker = (
+  quote?: routes.Quote<
+    routes.Options,
+    routes.ValidatedTransferParams<routes.Options>
+  >,
+): {
+  feeSymbol?: string;
+  isCheckingBalance: boolean;
+  hasSufficientBalance: boolean;
+  walletBalance?: number;
+  networkCost?: number;
+} => {
+  const [isCheckingBalance, setCheckingBalance] = useState(false);
+  const [state, setState] = useState<{ balance: number; cost: number } | null>(
+    null,
+  );
+  const isMounted = useIsMounted();
+
+  const feeSymbol = useMemo(() => {
+    if (!quote?.relayFee?.token) return;
+
+    return config.sdkConverter.findTokenConfigV1(
+      quote?.relayFee?.token,
+      Object.values(config.tokens),
+    )?.symbol;
+  }, [quote]);
+
+  useEffect(() => {
+    setCheckingBalance(true);
+    (async () => {
+      try {
+        if (!quote?.relayFee?.amount) return;
+
+        const wallet = getWalletConnection(TransferWallet.SENDING);
+        if (!wallet) return;
+
+        const cost = amount.whole(quote.relayFee.amount);
+        const balance = parseFloat(await wallet.getBalance());
+
+        if (isMounted.current) setState({ balance, cost });
+      } catch (e) {
+        console.error(e);
+        if (isMounted.current) setState(null);
+      } finally {
+        if (isMounted.current) setCheckingBalance(false);
+      }
+    })();
+  }, [quote, isMounted]);
+
+  return {
+    feeSymbol,
+    isCheckingBalance,
+    hasSufficientBalance:
+      !quote?.relayFee || (!!state && state?.balance > state?.cost),
+    walletBalance: state?.balance,
+    networkCost: state?.cost,
+  };
+};

wormhole-connect/src/hooks/useIsMounted.ts

@@ -0,0 +1,12 @@
+import { MutableRefObject, useEffect, useRef } from 'react';
+
+export const useIsMounted = (): MutableRefObject<boolean> => {
+  const isMounted = useRef<boolean>(true);
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+  return isMounted;
+};

wormhole-connect/src/views/v2/Bridge/ReviewTransaction/WalletBalanceWarning.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import AlertBanner from 'components/v2/AlertBanner';
+import { Stack, Typography, useTheme } from '@mui/material';
+import { toFixedDecimals } from 'utils/balance';
+import type { useBalanceChecker } from 'hooks/useBalanceChecker';
+
+export default function WalletBalanceWarning({
+  isCheckingBalance,
+  hasSufficientBalance,
+  walletBalance,
+  networkCost,
+  feeSymbol,
+}: ReturnType<typeof useBalanceChecker>) {
+  const theme = useTheme();
+  const content = isCheckingBalance
+    ? ''
+    : `Insufficient ${feeSymbol} to cover network costs.`;
+
+  return (
+    <Stack direction="column" gap="10px">
+      <AlertBanner
+        warning
+        content={content}
+        show={!!isCheckingBalance || !hasSufficientBalance}
+        testId="wallet-balance-warning-message"
+      />
+      {!hasSufficientBalance && !isCheckingBalance && (
+        <Stack>
+          {[
+            { title: 'Wallet balance', balance: walletBalance! },
+            { title: 'Network cost', balance: networkCost! },
+          ].map((item) => (
+            <Stack
+              key={item.title}
+              direction="row"
+              justifyContent="space-between"
+            >
+              <Typography color={theme.palette.text.secondary} fontSize={14}>
+                {item.title}
+              </Typography>
+              <Typography color={theme.palette.text.secondary} fontSize={14}>
+                {!isNaN(item.balance) &&
+                  `${toFixedDecimals(item.balance.toString(), 4)} ${feeSymbol}`}
+              </Typography>
+            </Stack>
+          ))}
+        </Stack>
+      )}
+    </Stack>
+  );
+}

wormhole-connect/src/views/v2/Bridge/ReviewTransaction/index.tsx

@@ -43,6 +43,9 @@ import { toDecimals } from 'utils/balance';
 import { useUSDamountGetter } from 'hooks/useUSDamountGetter';
 import SendError from './SendError';
 import { ERR_USER_REJECTED } from 'telemetry/types';
+import { useBalanceChecker } from 'hooks/useBalanceChecker';
+import WalletBalanceWarning from './WalletBalanceWarning';
+import { QuoteResult } from 'routes/operator';
 
 const useStyles = makeStyles()((theme) => ({
   container: {
@@ -61,7 +64,7 @@ const useStyles = makeStyles()((theme) => ({
 
 type Props = {
   onClose: () => void;
-  quotes: any;
+  quotes: Record<string, QuoteResult | undefined>;
   isFetchingQuotes: boolean;
 };
 
@@ -115,6 +118,14 @@ const ReviewTransaction = (props: Props) => {
     ? sdkAmount.whole(quote.destinationNativeGas)
     : undefined;
 
+  const {
+    isCheckingBalance,
+    feeSymbol,
+    hasSufficientBalance,
+    walletBalance,
+    networkCost,
+  } = useBalanceChecker(quote);
+
   const send = async () => {
     setSendError(undefined);
 
@@ -326,7 +337,11 @@ const ReviewTransaction = (props: Props) => {
 
     return (
       <Button
-        disabled={props.isFetchingQuotes || isTransactionInProgress}
+        disabled={
+          props.isFetchingQuotes ||
+          isTransactionInProgress ||
+          !hasSufficientBalance
+        }
         variant="primary"
         className={classes.confirmTransaction}
         onClick={() => send()}
@@ -368,6 +383,7 @@ const ReviewTransaction = (props: Props) => {
     route,
     amount,
     send,
+    hasSufficientBalance,
   ]);
 
   if (!route || !walletsConnected) {
@@ -395,6 +411,13 @@ const ReviewTransaction = (props: Props) => {
           />
         </Collapse>
       )}
+      <WalletBalanceWarning
+        hasSufficientBalance={hasSufficientBalance}
+        isCheckingBalance={isCheckingBalance}
+        walletBalance={walletBalance}
+        networkCost={networkCost}
+        feeSymbol={feeSymbol}
+      />
       <SendError humanError={sendError} internalError={sendErrorInternal} />
       {confirmTransactionButton}
     </Stack>

wormhole-connect/src/views/v2/Bridge/Routes/index.tsx

@@ -160,7 +160,7 @@ const Routes = ({ ...props }: Props) => {
           Routes
         </Typography>
         {props.isLoading ? (
-          <CircularProgress sx={{ 'align-self': 'flex-end' }} size={20} />
+          <CircularProgress sx={{ alignSelf: 'flex-end' }} size={20} />
         ) : null}
       </Box>