fix: random bug fixes

wormhole-foundation · Sep 8, 2023 · fac9709 · fac9709
1 parent f583f1e
commit fac9709
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 46 deletions.
diff --git a/wormhole-connect/src/views/Bridge/Inputs/AmountInput.tsx b/wormhole-connect/src/views/Bridge/Inputs/AmountInput.tsx
@@ -12,6 +12,7 @@ import Input from './Input';
 type Props = {
   handleAmountChange: (value: number | string) => void;
   value: string;
+  disabled?: boolean;
 };
 function AmountInput(props: Props) {
   const dispatch = useDispatch();
@@ -51,6 +52,7 @@ function AmountInput(props: Props) {
       error={!!(showErrors && validations.amount)}
       editable
       onClick={focus}
+      cursor="text"
     >
       {token ? (
         <InputTransparent
@@ -61,7 +63,7 @@ function AmountInput(props: Props) {
           step={0.1}
           onChange={handleAmountChange}
           onPause={validateAmount}
-          disabled={isTransactionInProgress}
+          disabled={isTransactionInProgress || props.disabled}
           value={props.value}
         />
       ) : (

diff --git a/wormhole-connect/src/views/Bridge/Inputs/From.tsx b/wormhole-connect/src/views/Bridge/Inputs/From.tsx
@@ -24,7 +24,9 @@ function FromInputs() {
   const [showTokensModal, setShowTokensModal] = useState(false);
   const [showChainsModal, setShowChainsModal] = useState(false);
 
-  const { toNativeToken } = useSelector((state: RootState) => state.relay);
+  const { toNativeToken, relayerFee } = useSelector(
+    (state: RootState) => state.relay,
+  );
   const wallet = useSelector((state: RootState) => state.wallet.sending);
   const {
     validate: showErrors,
@@ -90,6 +92,7 @@ function FromInputs() {
       number,
       {
         toNativeToken,
+        relayerFee,
       },
     );
     dispatch(setReceiveAmount(`${receiveAmount}`));
@@ -99,6 +102,7 @@ function FromInputs() {
   const handleAmountChange = useCallback(computeReceiveAmount, [
     route,
     toNativeToken,
+    relayerFee,
     dispatch,
   ]);
   // if route changes, re-calculate the amount

diff --git a/wormhole-connect/src/views/Bridge/Inputs/Input.tsx b/wormhole-connect/src/views/Bridge/Inputs/Input.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { ERROR_BORDER, joinClass } from 'utils/style';
 
-const useStyles = makeStyles()((theme: any) => ({
+type StyleProps = { cursorStyle?: string };
+const useStyles = makeStyles<StyleProps>()((theme: any, { cursorStyle }) => ({
   inputField: {
     display: 'flex',
     flexDirection: 'column',
@@ -13,7 +14,7 @@ const useStyles = makeStyles()((theme: any) => ({
   },
   editable: {
     backgroundColor: theme.palette.card.secondary,
-    cursor: 'pointer',
+    cursor: cursorStyle || 'pointer',
   },
   label: {
     fontSize: '14px',
@@ -32,10 +33,11 @@ type Props = {
   editable?: boolean;
   onClick?: any;
   children: any;
+  cursor?: string;
 };
 
 function Input(props: Props) {
-  const { classes } = useStyles();
+  const { classes } = useStyles({ cursorStyle: props.cursor });
 
   const inputClasses = [
     classes.inputField,

diff --git a/wormhole-connect/src/views/Bridge/Inputs/To.tsx b/wormhole-connect/src/views/Bridge/Inputs/To.tsx
@@ -1,17 +1,11 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { ChainName } from '@wormhole-foundation/wormhole-connect-sdk';
 
 import { RootState } from 'store';
-import {
-  selectToChain,
-  setAmount,
-  setDestToken,
-  setReceiveAmount,
-} from 'store/transferInput';
+import { selectToChain, setDestToken } from 'store/transferInput';
 import { TransferWallet, walletAcceptedChains } from 'utils/wallet';
 import { getWrappedToken } from 'utils';
-import RouteOperator from 'utils/routes/operator';
 import { CHAINS, CHAINS_ARR, TOKENS } from 'config';
 
 import Inputs from './Inputs';
@@ -29,15 +23,14 @@ function ToInputs() {
   const {
     validate: showErrors,
     validations,
-    route,
+    // route,
     fromChain,
     toChain,
     destBalances,
     destToken,
     receiveAmount,
     isTransactionInProgress,
   } = useSelector((state: RootState) => state.transferInput);
-  const { toNativeToken } = useSelector((state: RootState) => state.relay);
   const { receiving } = useSelector((state: RootState) => state.wallet);
   const balance = destBalances[destToken] || undefined;
 
@@ -78,38 +71,41 @@ function ToInputs() {
     />
   );
 
-  const computeSendAmount = async (value: number | string) => {
-    if (typeof value === 'number') {
-      dispatch(setReceiveAmount(`${value}`));
-    } else {
-      dispatch(setReceiveAmount(value));
-    }
-    const number = typeof value === 'number' ? value : Number.parseFloat(value);
-    dispatch(setReceiveAmount(`${number}`));
-    if (!route) {
-      dispatch(setReceiveAmount(`${value}`));
-      return;
-    }
-    const sendAmount = await RouteOperator.computeSendAmount(route, number, {
-      toNativeToken,
-    });
-    dispatch(setAmount(`${sendAmount}`));
-  };
+  // const computeSendAmount = async (value: number | string) => {
+  //   if (typeof value === 'number') {
+  //     dispatch(setReceiveAmount(`${value}`));
+  //   } else {
+  //     dispatch(setReceiveAmount(value));
+  //   }
+  //   const number = typeof value === 'number' ? value : Number.parseFloat(value);
+  //   dispatch(setReceiveAmount(`${number}`));
+  //   if (!route) {
+  //     dispatch(setReceiveAmount(`${value}`));
+  //     return;
+  //   }
+  //   const sendAmount = await RouteOperator.computeSendAmount(route, number, {
+  //     toNativeToken,
+  //   });
+  //   dispatch(setAmount(`${sendAmount}`));
+  // };
 
-  const handleAmountChange = useCallback(computeSendAmount, [
-    route,
-    toNativeToken,
-    dispatch,
-  ]);
-  // if route changes, re-calculate the amount
-  useEffect(() => {
-    if (!route) return;
-    computeSendAmount(receiveAmount);
-  }, [route, receiveAmount]);
+  // const handleAmountChange = useCallback(computeSendAmount, [
+  //   route,
+  //   toNativeToken,
+  //   dispatch,
+  // ]);
+  // // if route changes, re-calculate the amount
+  // useEffect(() => {
+  //   if (!route) return;
+  //   computeSendAmount(receiveAmount);
+  // }, [route, receiveAmount]);
+  // TODO: get compute send amount working correctly again
+  const handleAmountChange = () => {};
   const amountInput = (
     <AmountInput
       handleAmountChange={handleAmountChange}
       value={receiveAmount}
+      disabled
     />
   );
 

diff --git a/wormhole-connect/src/views/Bridge/NativeGasSlider.tsx b/wormhole-connect/src/views/Bridge/NativeGasSlider.tsx
@@ -100,10 +100,12 @@ function GasSlider(props: { disabled: boolean }) {
   const { token, toChain, amount, route, destToken } = useSelector(
     (state: RootState) => state.transferInput,
   );
-  const amountNum = useMemo(() => Number.parseFloat(amount), [amount]);
-  const { maxSwapAmt, relayerFee } = useSelector(
+  const { maxSwapAmt, relayerFee, toNativeToken } = useSelector(
     (state: RootState) => state.relay,
   );
+  const amountNum = useMemo(() => {
+    return Number.parseFloat(amount) - (toNativeToken || 0) - (relayerFee || 0);
+  }, [amount]);
   const { receiving: receivingWallet } = useSelector(
     (state: RootState) => state.wallet,
   );
@@ -134,7 +136,7 @@ function GasSlider(props: { disabled: boolean }) {
       maxSwapAmt &&
       Math.max(Math.min(maxSwapAmt, amountWithoutRelayerFee), 0);
 
-    const newTokenAmount = amountNum - state.swapAmt;
+    const newTokenAmount = amountNum - state.swapAmt - (relayerFee || 0);
 
     setState((prevState) => ({
       ...prevState,

diff --git a/wormhole-connect/src/views/Bridge/Preview.tsx b/wormhole-connect/src/views/Bridge/Preview.tsx
@@ -84,6 +84,9 @@ function Preview(props: { collapsed: boolean }) {
   useEffect(() => {
     const computeRelayerFee = async () => {
       if (!token || !fromChain || !toChain || !route) return;
+      // don't bother if it's not an automatic route
+      const r = RouteOperator.getRoute(route);
+      if (!r.AUTOMATIC_DEPOSIT) return;
 
       try {
         const tokenConfig = token && TOKENS[token];

diff --git a/wormhole-connect/src/views/Bridge/RouteOptions.tsx b/wormhole-connect/src/views/Bridge/RouteOptions.tsx
@@ -274,7 +274,6 @@ function RouteOptions() {
     toChain,
     validate,
     validations,
-    route,
   ]);
 
   const onCollapseChange = (collapsed: boolean) => {