diff --git a/package.json b/package.json index 318fb65..1bdbe27 100644 --- a/package.json +++ b/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", diff --git a/src/components/Input.tsx b/src/components/Input.tsx index e54c8b4..da2b57b 100644 --- a/src/components/Input.tsx +++ b/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(); 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 diff --git a/src/components/Output.tsx b/src/components/Output.tsx index 72a9cfa..9a6a371 100644 --- a/src/components/Output.tsx +++ b/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(); useDebounce( () => { diff --git a/src/hooks/apis.ts b/src/hooks/apis.ts index 44651b7..0b43f50 100644 --- a/src/hooks/apis.ts +++ b/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, }; };