fix: default settings (#88)

* fix: default values setting

* v1.3.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@socket.tech/plugin",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",

src/components/Input.tsx

@@ -1,6 +1,6 @@
 import { ethers } from "ethers";
 import { useDispatch, useSelector } from "react-redux";
-import { useContext, useEffect, useState, useRef } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Currency, Network, onNetworkChange, onTokenChange } from "../types";
 import { NATIVE_TOKEN_ADDRESS } from "../consts";
 
@@ -96,7 +96,9 @@ export const Input = ({
   const sameChainSwapsEnabled = useSelector(
     (state: any) => state.customSettings.sameChainSwapsEnabled
   );
-  const initialAmount = useSelector((state:any)=> state.customSettings.initialAmount);
+  const initialAmount = useSelector(
+    (state: any) => state.customSettings.initialAmount
+  );
 
   function updateNetwork(network: Network) {
     dispatch(setSourceChain(network?.chainId));
@@ -142,7 +144,7 @@ export const Input = ({
         ) ?? _supportedNetworks?.[0]
       );
     }
-  }, [allNetworks]);
+  }, [allNetworks, defaultSourceNetwork]);
 
   // For Input & tokens
   const inputAmountFromReduxState = useSelector(
@@ -233,6 +235,18 @@ export const Input = ({
     }
   }, [allSourceTokens]);
 
+  // to set default source token when changed
+  useEffect(() => {
+    if (defaultSourceTokenAddress && allSourceTokens) {
+      const _token =
+        allSourceTokens?.filter(
+          (x: Currency) =>
+            x.address.toLowerCase() === defaultSourceTokenAddress.toLowerCase()
+        )?.[0] ?? fallbackToUSDC();
+      _setSourceToken(_token);
+    }
+  }, [defaultSourceTokenAddress, allSourceTokens]);
+
   const [_sourceToken, _setSourceToken] = useState<Currency>();
   useDebounce(
     () => {
@@ -305,21 +319,10 @@ export const Input = ({
     } else formateAndParseAmount(balance);
   }
 
-  // to set the initialAmount if any. To be executed only on first render
-  const firstRender = useRef(true);
+  // to set the initialAmount if any
   useEffect(() => {
-    if (initialAmount && sourceToken && firstRender.current) {
-      const truncatedValue = truncateDecimalValue(
-        initialAmount,
-        sourceToken?.decimals
-      );
-      onChangeInput(truncatedValue);
-      firstRender.current = false;
-    } else if (!firstRender.current) {
-      // Reset source amount on mount
-      inputAmountFromReduxState && dispatch(setSourceAmount(null));
-    }
-  }, [initialAmount, sourceToken]);
+    if (initialAmount) onChangeInput(initialAmount);
+  }, [initialAmount]);
 
   useEffect(() => {
     // resetting the source chain on unmount

src/components/Output.tsx

@@ -1,5 +1,5 @@
 import { useDispatch, useSelector } from "react-redux";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState, useRef } from "react";
 import { Currency, Network, onNetworkChange, onTokenChange } from "../types";
 
 // component
@@ -95,7 +95,7 @@ export const Output = ({
     // on toggle, the dest chain state would retain causing issues in setting token on the first render
     return () => {
       dispatch(setDestChain(null));
-    }
+    };
   }, []);
 
   function updateNetwork(network: Network) {
@@ -171,7 +171,7 @@ export const Output = ({
         updateNetwork(
           supportedNetworks?.find(
             (x: Network) => x.chainId === defaultDestNetwork
-          )
+          ) ?? supportedNetworks?.[0]
         );
       }
     }
@@ -199,7 +199,7 @@ export const Output = ({
     )?.[0];
 
     // If same chains are selected, and if the source token is same as usdc, set the dest token to the first token from the list
-    // todo - if usdc is not found, should show native token. 
+    // todo - if usdc is not found, should show native token.
     if (
       sourceChainId === destChainId &&
       usdc?.address === sourceToken?.address
@@ -261,6 +261,18 @@ export const Output = ({
     }
   }, [allDestTokens, sourceToken]);
 
+  // to set default dest token when changed
+  useEffect(() => {
+    if (defaultDestTokenAddress && allDestTokens) {
+      const _token =
+        allDestTokens?.filter(
+          (x: Currency) =>
+            x.address.toLowerCase() === defaultDestTokenAddress.toLowerCase()
+        )?.[0] ?? fallbackToUSDC();
+      _setDestToken(_token);
+    }
+  }, [defaultDestTokenAddress, allDestTokens]);
+
   const [_destToken, _setDestToken] = useState<Currency>();
   useDebounce(
     () => {

src/hooks/apis.ts

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext } from "react";
 import {
   Balances,
   ChainId,
@@ -31,17 +31,15 @@ export const initSocket = (apiKey: string, _singleTxOnly: boolean) => {
 // Function to get the chains supported by socket apis.
 export const useChains = () => {
   const dispatch = useDispatch();
-  const [allChains, setAllChains] = useState(null);
-  useEffect(() => {
-    async function fetchSupportedNetworks() {
-      const supportedNetworks = await Supported.getAllSupportedChains();
-      setAllChains(supportedNetworks);
-      dispatch(setNetworks(supportedNetworks?.result));
-    }
-    fetchSupportedNetworks();
-  }, []);
 
-  return allChains;
+  async function fetchSupportedNetworks() {
+    const supportedNetworks = await Supported.getAllSupportedChains();
+    dispatch(setNetworks(supportedNetworks?.result));
+    return supportedNetworks;
+  }
+
+  const { data } = useSWR("fetching chains", fetchSupportedNetworks);
+  return data;
 };
 
 import { useRoutes } from "./apis/useRoutes";
@@ -81,13 +79,13 @@ export const useBalance = (
 
   const { data, error, isValidating, mutate } = useSWR(
     shouldFetch ? [tokenAddress, chainId, userAddress, "token-balance"] : null,
-    fetchBalance,
+    fetchBalance
   );
 
   return {
     data: data?.result,
     isBalanceLoading: userAddress && !error && !data,
-    mutate
+    mutate,
   };
 };