Merge pull request #308 from pendulum-chain/305-bug-output-tokens-sho…

…wn-in-input-tokens-selection Keep track of modal type and open states separately
pendulum-chain · Nov 27, 2024 · 72d314d · 72d314d
2 parents 6f852cd + c72d5a7
commit 72d314d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 17 deletions.
diff --git a/src/components/Nabla/useSwapForm.tsx b/src/components/Nabla/useSwapForm.tsx
@@ -18,8 +18,8 @@ const storageSet = debounce(storageService.set, 1000);
 const setStorageForSwapSettings = storageSet.bind(null, storageKeys.SWAP_SETTINGS);
 
 export const useSwapForm = () => {
-  const tokensModal = useState<undefined | 'from' | 'to'>();
-  const setTokenModal = tokensModal[1];
+  const [isTokenSelectModalVisible, setIsTokenSelectModalVisible] = useState(false);
+  const [tokenSelectModalType, setTokenModalType] = useState<'from' | 'to'>('from');
 
   const initialState = useMemo(() => {
     const searchParams = new URLSearchParams(window.location.search);
@@ -67,9 +67,9 @@ export const useSwapForm = () => {
       setStorageForSwapSettings(updated);
       setValue('from', tokenKey as InputTokenType);
 
-      setTokenModal(undefined);
+      setIsTokenSelectModalVisible(false);
     },
-    [getValues, setValue, setTokenModal],
+    [getValues, setValue],
   );
 
   const onToChange = useCallback(
@@ -85,9 +85,9 @@ export const useSwapForm = () => {
       setStorageForSwapSettings(updated);
       setValue('to', tokenKey as OutputTokenType);
 
-      setTokenModal(undefined);
+      setIsTokenSelectModalVisible(false);
     },
-    [getValues, setTokenModal, setValue],
+    [getValues, setValue],
   );
 
   const fromAmountString = useWatch({
@@ -103,11 +103,23 @@ export const useSwapForm = () => {
     // no action required
   }
 
+  const openTokenSelectModal = useCallback((type: 'from' | 'to') => {
+    setTokenModalType(type);
+    setIsTokenSelectModalVisible(true);
+  }, []);
+
+  const closeTokenSelectModal = useCallback(() => {
+    setIsTokenSelectModalVisible(false);
+  }, []);
+
   return {
     form,
     from,
     to,
-    tokensModal,
+    isTokenSelectModalVisible,
+    tokenSelectModalType,
+    openTokenSelectModal,
+    closeTokenSelectModal,
     onFromChange,
     onToChange,
     fromAmount,

diff --git a/src/pages/swap/index.tsx b/src/pages/swap/index.tsx
@@ -98,7 +98,10 @@ export const SwapPage = () => {
   }, [firstSep24ResponseState?.id]);
 
   const {
-    tokensModal: [modalType, setModalType],
+    isTokenSelectModalVisible,
+    tokenSelectModalType,
+    openTokenSelectModal,
+    closeTokenSelectModal,
     onFromChange,
     onToChange,
     form,
@@ -237,14 +240,14 @@ export const SwapPage = () => {
       <AssetNumericInput
         assetIcon={toToken.fiat.assetIcon}
         tokenSymbol={toToken.fiat.symbol}
-        onClick={() => setModalType('to')}
+        onClick={() => openTokenSelectModal('to')}
         registerInput={form.register('toAmount')}
         disabled={tokenOutAmount.isLoading}
         readOnly={true}
         id="toAmount"
       />
     ),
-    [toToken.fiat.symbol, toToken.fiat.assetIcon, form, tokenOutAmount.isLoading, setModalType],
+    [toToken.fiat.assetIcon, toToken.fiat.symbol, form, tokenOutAmount.isLoading, openTokenSelectModal],
   );
 
   const WithdrawNumericInput = useMemo(
@@ -254,7 +257,7 @@ export const SwapPage = () => {
           registerInput={form.register('fromAmount')}
           tokenSymbol={fromToken.assetSymbol}
           assetIcon={fromToken.polygonAssetIcon}
-          onClick={() => setModalType('from')}
+          onClick={() => openTokenSelectModal('from')}
           onChange={(e) => {
             // User interacted with the input field
             trackEvent({ event: 'amount_type' });
@@ -264,7 +267,7 @@ export const SwapPage = () => {
         <UserBalance token={fromToken} onClick={(amount: string) => form.setValue('fromAmount', amount)} />
       </>
     ),
-    [form, fromToken, setModalType],
+    [form, fromToken, openTokenSelectModal, trackEvent],
   );
 
   function getCurrentErrorMessage() {
@@ -303,7 +306,7 @@ export const SwapPage = () => {
   }
 
   const definitions =
-    modalType === 'from'
+    tokenSelectModalType === 'from'
       ? Object.entries(INPUT_TOKEN_CONFIG).map(([key, value]) => ({
           type: key as InputTokenType,
           assetSymbol: value.assetSymbol,
@@ -319,14 +322,14 @@ export const SwapPage = () => {
     <>
       <TermsAndConditions />
       <PoolSelectorModal
-        open={!!modalType}
+        open={isTokenSelectModalVisible}
         onSelect={(token) => {
-          modalType === 'from' ? onFromChange(token) : onToChange(token);
+          tokenSelectModalType === 'from' ? onFromChange(token) : onToChange(token);
           maybeCancelSep24First();
         }}
         definitions={definitions}
-        selected={modalType === 'from' ? from : to}
-        onClose={() => setModalType(undefined)}
+        selected={tokenSelectModalType === 'from' ? from : to}
+        onClose={() => closeTokenSelectModal()}
         isLoading={false}
       />
     </>