feat: add default tokens to swap (#84)

ava-labs · Nov 8, 2024 · 46ea86b · 46ea86b
1 parent e6dad16
commit 46ea86b
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 18 deletions.
diff --git a/src/hooks/usePageHistory.ts b/src/hooks/usePageHistory.ts
@@ -13,8 +13,10 @@ import { GetNavigationHistoryDataHandler } from '@src/background/services/naviga
 
 export function usePageHistory() {
   const { request } = useConnectionContext();
-  const [isLoading, setIsLoading] = useState(true);
-  const [historyDataState, setHistoryDataState] = useState({});
+  const [historyDataState, setHistoryDataState] = useState<{
+    isLoading: boolean;
+    [key: string]: any;
+  }>({ isLoading: true });
   const [historyState, setHistoryState] = useState<NavigationHistoryState>({});
 
   const setNavigationHistoryData = useCallback(
@@ -31,7 +33,7 @@ export function usePageHistory() {
     const result = await request<GetNavigationHistoryDataHandler>({
       method: ExtensionRequest.NAVIGATION_HISTORY_DATA_GET,
     });
-    setHistoryDataState(result);
+    setHistoryDataState({ ...result, isLoading: false });
   }, [request]);
 
   const setNavigationHistory = useCallback(
@@ -53,10 +55,8 @@ export function usePageHistory() {
 
   useEffect(() => {
     const getHistory = async () => {
-      setIsLoading(true);
       await getNavigationHistory();
       await getNavigationHistoryData();
-      setIsLoading(false);
     };
     getHistory();
   }, [getNavigationHistory, getNavigationHistoryData]);
@@ -76,6 +76,5 @@ export function usePageHistory() {
     getPageHistoryData,
     setNavigationHistory,
     getNavigationHistoryState,
-    isHistoryLoading: isLoading,
   };
 }
diff --git a/src/pages/Bridge/Bridge.tsx b/src/pages/Bridge/Bridge.tsx
@@ -106,6 +106,7 @@ export function Bridge() {
     selectedToken?: string;
     inputAmount?: Big;
     selectedTokenAddress?: string;
+    isLoading: boolean;
   } = getPageHistoryData();
 
   // derive blockchain/network from network

diff --git a/src/pages/Collectibles/Collectibles.tsx b/src/pages/Collectibles/Collectibles.tsx
@@ -34,11 +34,16 @@ import { useLiveBalance } from '@src/hooks/useLiveBalance';
 interface CollectiblesProps {
   listType: ListType;
   setListType: Dispatch<SetStateAction<ListType | undefined>>;
+  isHistoryLoading: boolean;
 }
 
 const POLLED_BALANCES = [TokenType.ERC721, TokenType.ERC1155];
 
-export function Collectibles({ listType, setListType }: CollectiblesProps) {
+export function Collectibles({
+  listType,
+  setListType,
+  isHistoryLoading,
+}: CollectiblesProps) {
   useLiveBalance(POLLED_BALANCES);
   const { t } = useTranslation();
   const { balances } = useBalancesContext();
@@ -47,7 +52,7 @@ export function Collectibles({ listType, setListType }: CollectiblesProps) {
   const { network } = useNetworkContext();
   const history = useHistory();
   const setCollectibleParams = useSetCollectibleParams();
-  const { setNavigationHistoryData, isHistoryLoading } = usePageHistory();
+  const { setNavigationHistoryData } = usePageHistory();
   const { isFunctionSupported: isManageCollectiblesSupported } =
     useIsFunctionAvailable(FunctionNames.MANAGE_COLLECTIBLES);
   const { getCollectibleVisibility } = useSettingsContext();

diff --git a/src/pages/Home/components/Portfolio/Portfolio.tsx b/src/pages/Home/components/Portfolio/Portfolio.tsx
@@ -60,10 +60,12 @@ export function Portfolio() {
   const { isReady, checkIsFunctionSupported } = useIsFunctionAvailable();
   const [listType, setListType] = useState<ListType>();
   const [hadDefiEnabled, setHadDefiEnabled] = useState(false);
-  const { getPageHistoryData, isHistoryLoading } = usePageHistory();
+  const { getPageHistoryData } = usePageHistory();
 
-  const { listType: historyListType }: { listType?: ListType } =
-    getPageHistoryData();
+  const {
+    listType: historyListType,
+    isLoading: isHistoryLoading,
+  }: { listType?: ListType; isLoading: boolean } = getPageHistoryData();
   const [isScrolling, setIsScrolling] = useState(false);
 
   useEffect(() => {
@@ -178,7 +180,11 @@ export function Portfolio() {
             >
               {shouldShow(PortfolioTabs.COLLECTIBLES) ? (
                 listType ? (
-                  <Collectibles listType={listType} setListType={setListType} />
+                  <Collectibles
+                    listType={listType}
+                    setListType={setListType}
+                    isHistoryLoading={isHistoryLoading}
+                  />
                 ) : (
                   <CircularProgress size={60} />
                 )

diff --git a/src/pages/Swap/Swap.tsx b/src/pages/Swap/Swap.tsx
@@ -66,6 +66,7 @@ export function Swap() {
   const tokensWBalances = useTokensWithBalances({
     disallowedAssets: DISALLOWED_SWAP_ASSETS,
   });
+
   const allTokensOnNetwork = useTokensWithBalances({
     forceShowTokensWithoutBalances: true,
     disallowedAssets: DISALLOWED_SWAP_ASSETS,
@@ -81,6 +82,13 @@ export function Swap() {
     useState(false);
   const [isConfirming, setIsConfirming] = useState(false);
 
+  const AVAX_TOKEN = tokensWBalances.find(
+    (token) => token.symbol === 'AVAX'
+  ) as NetworkTokenWithBalance | TokenWithBalanceERC20;
+  const USDC_TOKEN = allTokensOnNetwork.find(
+    (token) => token.symbol === 'USDC'
+  ) as TokenWithBalanceERC20;
+
   const {
     calculateTokenValueToInput,
     reverseTokens,
@@ -102,7 +110,10 @@ export function Swap() {
     maxFromValue,
     optimalRate,
     destAmount,
-  } = useSwapStateFunctions();
+  } = useSwapStateFunctions({
+    defaultFromToken: AVAX_TOKEN,
+    defaultToToken: USDC_TOKEN,
+  });
 
   const activeAddress = useMemo(
     () =>

diff --git a/src/pages/Swap/hooks/useSwapStateFunctions.ts b/src/pages/Swap/hooks/useSwapStateFunctions.ts
@@ -14,7 +14,13 @@ import {
 import { stringToBigint } from '@src/utils/stringToBigint';
 import { TokenUnit } from '@avalabs/core-utils-sdk';
 
-export function useSwapStateFunctions() {
+export function useSwapStateFunctions({
+  defaultFromToken,
+  defaultToToken,
+}: {
+  defaultFromToken: NetworkTokenWithBalance | TokenWithBalanceERC20;
+  defaultToToken: NetworkTokenWithBalance | TokenWithBalanceERC20;
+}) {
   const tokensWBalances = useTokensWithBalances({
     disallowedAssets: DISALLOWED_SWAP_ASSETS,
   });
@@ -27,6 +33,7 @@ export function useSwapStateFunctions() {
     selectedToToken?: NetworkTokenWithBalance | TokenWithBalanceERC20;
     destinationInputField?: DestinationInput;
     tokenValue?: Amount;
+    isLoading: boolean;
   } = getPageHistoryData();
 
   const [destinationInputField, setDestinationInputField] =
@@ -35,6 +42,7 @@ export function useSwapStateFunctions() {
   const [selectedFromToken, setSelectedFromToken] = useState<
     NetworkTokenWithBalance | TokenWithBalanceERC20
   >();
+
   const [selectedToToken, setSelectedToToken] = useState<
     NetworkTokenWithBalance | TokenWithBalanceERC20
   >();
@@ -84,7 +92,11 @@ export function useSwapStateFunctions() {
 
   // reload and recalculate the data from the history
   useEffect(() => {
-    if (Object.keys(pageHistory).length && !isHistoryLoaded.current) {
+    if (
+      Object.keys(pageHistory).length > 1 &&
+      !pageHistory.isLoading &&
+      !isHistoryLoaded.current
+    ) {
       const historyFromToken = pageHistory.selectedFromToken
         ? {
             ...pageHistory.selectedFromToken,
@@ -129,9 +141,28 @@ export function useSwapStateFunctions() {
         historyFromToken,
         historyToToken
       );
+
+      isHistoryLoaded.current = true;
+    }
+
+    if (
+      !pageHistory.selectedFromToken &&
+      !pageHistory.selectedToToken &&
+      !pageHistory.isLoading &&
+      !isHistoryLoaded.current &&
+      defaultFromToken &&
+      defaultFromToken
+    ) {
+      setSelectedFromToken(defaultFromToken);
+      setSelectedToToken(defaultToToken);
       isHistoryLoaded.current = true;
     }
-  }, [calculateTokenValueToInput, pageHistory]);
+  }, [
+    calculateTokenValueToInput,
+    defaultFromToken,
+    defaultToToken,
+    pageHistory,
+  ]);
 
   const resetValues = () => {
     setFromTokenValue(undefined);
@@ -221,13 +252,14 @@ export function useSwapStateFunctions() {
     if (destination === 'to') {
       setSelectedFromToken(token);
       setMaxFromValue(token?.balance);
+      toToken && setSelectedToToken(toToken);
     } else {
       setSelectedToToken(token);
     }
     const data =
       destination === 'to'
-        ? { fromToken: token, toToken, fromValue }
-        : { fromToken, toToken: token, fromValue };
+        ? { selectedFromToken: token, selectedToToken: toToken, fromValue }
+        : { selectedFromToken: fromToken, selectedToToken: token, fromValue };
     calculateSwapValue(data);
     setNavigationHistoryData({
       ...data,