fix: change approve instantly and bridge swap (#468)

* fix: change approve instantly * fix: added in dependency array * fix: reset inputs when change selection
pangolindex · Jul 11, 2023 · 37fa2f5 · 37fa2f5
1 parent b7b9c43
commit 37fa2f5
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/src/components/Bridge/BridgeInputsWidget/index.tsx b/src/components/Bridge/BridgeInputsWidget/index.tsx
@@ -81,7 +81,7 @@ const BridgeInputsWidget: React.FC<BridgeInputsWidgetProps> = (props) => {
       </Tooltip>
       <TextInput
         isNumeric={true}
-        value={amount?.toExact()}
+        value={amount?.toExact() ?? ''}
         onChange={(value: any) => {
           handleInput(value);
         }}

diff --git a/src/hooks/useApproveCallback/evm.ts b/src/hooks/useApproveCallback/evm.ts
@@ -24,6 +24,7 @@ export function useApproveCallback(
 ): [ApprovalState, () => Promise<void>] {
   const { account } = usePangolinWeb3();
   const [isPendingApprove, setIsPendingApprove] = useState(false);
+  const [isApproved, setIsApproved] = useState(false);
 
   const token = amountToApprove instanceof TokenAmount ? amountToApprove.token : undefined;
   const currentAllowance = useTokenAllowance(token, account ?? undefined, spender);
@@ -37,7 +38,7 @@ export function useApproveCallback(
     if (!currentAllowance) return ApprovalState.UNKNOWN;
 
     // amountToApprove will be defined if currentAllowance is
-    if (currentAllowance.lessThan(amountToApprove)) {
+    if (currentAllowance.lessThan(amountToApprove) || !isApproved) {
       if (pendingApproval || isPendingApprove) {
         return ApprovalState.PENDING;
       } else {
@@ -46,7 +47,7 @@ export function useApproveCallback(
     } else {
       return ApprovalState.APPROVED;
     }
-  }, [amountToApprove, currentAllowance, pendingApproval, isPendingApprove, spender]);
+  }, [amountToApprove, currentAllowance, pendingApproval, isPendingApprove, isApproved, spender]);
 
   const tokenContract = useTokenContract(token?.address);
   const addTransaction = useTransactionAdder();
@@ -95,6 +96,7 @@ export function useApproveCallback(
         summary: 'Approved ' + amountToApprove.currency.symbol,
         approval: { tokenAddress: token.address, spender: spender },
       });
+      setIsApproved(true);
     } catch (error) {
       console.debug('Failed to approve token', error);
       throw error;

diff --git a/src/hooks/useApproveCallback/hedera.ts b/src/hooks/useApproveCallback/hedera.ts
@@ -24,6 +24,7 @@ export function useHederaApproveCallback(
 ): [ApprovalState, () => Promise<void>] {
   const { account } = usePangolinWeb3();
   const [isPendingApprove, setIsPendingApprove] = useState(false);
+  const [isApproved, setIsApproved] = useState(false);
 
   const amountToken = amountToApprove instanceof TokenAmount ? amountToApprove.token : undefined;
 
@@ -51,7 +52,7 @@ export function useHederaApproveCallback(
     if (!currentAllowance) return ApprovalState.UNKNOWN;
 
     // amountToApprove will be defined if currentAllowance is
-    if (currentAllowance.lessThan(amountToApprove)) {
+    if (currentAllowance.lessThan(amountToApprove) || !isApproved) {
       if (pendingApproval || isPendingApprove) {
         return ApprovalState.PENDING;
       } else {
@@ -60,7 +61,7 @@ export function useHederaApproveCallback(
     } else {
       return ApprovalState.APPROVED;
     }
-  }, [amountToApprove, currentAllowance, pendingApproval, isPendingApprove, spender]);
+  }, [amountToApprove, currentAllowance, pendingApproval, isPendingApprove, isApproved, spender]);
 
   const addTransaction = useTransactionAdder();
 
@@ -108,6 +109,7 @@ export function useHederaApproveCallback(
           summary: 'Approved ' + amountToApprove.currency.symbol,
           approval: { tokenAddress: token.address, spender: spender },
         });
+        setIsApproved(true);
       }
     } catch (error) {
       console.debug('Failed to approve token', error);

diff --git a/src/state/pbridge/hooks.ts b/src/state/pbridge/hooks.ts
@@ -68,22 +68,29 @@ export function useBridgeActionHandlers(): {
 
   const onCurrencySelection = useCallback(
     (field: CurrencyField, currency: BridgeCurrency) => {
+      typeAmount({ field, typedValue: '0' });
+
       selectCurrency({
         field,
         currencyId: currency?.symbol || '',
       });
     },
-    [selectCurrency],
+    [selectCurrency, typeAmount],
   );
 
   const onChainSelection = useCallback(
     (field: ChainField, chain: Chain) => {
+      selectCurrency({
+        currencyId: '',
+        field,
+      });
+
       selectChain({
         field,
         chainId: chain ? chain.id : '',
       });
     },
-    [selectChain],
+    [selectChain, selectCurrency],
   );
 
   const onSwitchTokens = useCallback(() => {