display defi balances by default

Author: pixelis0x

widget/src/components/RouteIndication.tsx

@@ -21,7 +21,7 @@ const TokenBadge = ({
   address: Address;
   chainId: number;
 }) => {
-  const token = useTokenFromList(address);
+  const [token] = useTokenFromList(address);
   const {
     tokens: [ensoToken],
   } = useEnsoToken({

widget/src/components/TokenSelector.tsx

@@ -119,6 +119,23 @@ const TokenSelector = ({
     setSelectionChainId(chainId);
   }, [chainId]);
 
+  const balanceDefiAddresses = useMemo(() => {
+    return balances
+      ?.filter(
+        (balance) =>
+          !currentChainTokenList?.find(
+            (token) => token.address === balance.token
+          ) && +balance.price > 0
+      )
+      .map((b) => b.token);
+  }, [currentChainTokenList, balances]);
+
+  const { tokens: balanceDefiTokens } = useEnsoToken({
+    address: balanceDefiAddresses,
+    priorityChainId: selectionChainId,
+    enabled: balanceDefiAddresses?.length > 0,
+  });
+
   const currentTokenList = selectedProject
     ? protocolTokens
     : currentChainTokenList;
@@ -171,24 +188,29 @@ const TokenSelector = ({
       tokens.unshift(valueToken);
     }
 
-    const balancesWithTotals = tokens?.map((token) => {
-      let balanceValue = balances?.find?.((b) => b.token === token.address);
-
-      // cut scientific notation
-      const balance = Number(balanceValue?.amount).toLocaleString("fullwide", {
-        useGrouping: false,
-      });
-
-      return balanceValue
-        ? {
-            ...token,
-            balance,
-            costUsd:
-              +normalizeValue(balance, balanceValue?.decimals) *
-              +balanceValue?.price,
+    const balancesWithTotals = [...balanceDefiTokens, ...tokens]?.map(
+      (token) => {
+        let balanceValue = balances?.find?.((b) => b.token === token.address);
+
+        // cut scientific notation
+        const balance = Number(balanceValue?.amount).toLocaleString(
+          "fullwide",
+          {
+            useGrouping: false,
           }
-        : token;
-    });
+        );
+
+        return balanceValue
+          ? {
+              ...token,
+              balance,
+              costUsd:
+                +normalizeValue(balance, balanceValue?.decimals) *
+                +balanceValue?.price,
+            }
+          : token;
+      }
+    );
 
     //sort by costUsd
     balancesWithTotals.sort((a: TokenWithBalance, b: TokenWithBalance) => {
@@ -198,6 +220,7 @@ const TokenSelector = ({
     return balancesWithTotals;
   }, [
     balances,
+    balanceDefiTokens,
     currentTokenList,
     searchedToken,
     valueToken,

widget/src/util/common.tsx

@@ -238,12 +238,15 @@ export const useOneInchTokenList = () => {
 };
 
 export const useTokenFromList = (
-  tokenAddress: Address,
+  tokenAddress: Address | Address[],
   priorityChainId?: SupportedChainId
 ) => {
   const { data } = useCurrentChainList(priorityChainId);
+  const arrayData = Array.isArray(tokenAddress) ? tokenAddress : [tokenAddress];
 
-  return data?.find?.((token) => token.address == tokenAddress);
+  return arrayData.map((address) =>
+    data?.find((token) => token.address == address)
+  );
 };
 
 export const useOutChainId = () => {

widget/src/util/enso.tsx

@@ -424,7 +424,7 @@ const useEnsoTokenDetails = ({
   protocolSlug,
   enabled = true,
 }: {
-  address: Address;
+  address: Address | Address[];
   priorityChainId?: SupportedChainId;
   project?: string;
   protocolSlug?: string;
@@ -454,7 +454,7 @@ export const useEnsoToken = ({
   protocolSlug,
   enabled,
 }: {
-  address?: Address;
+  address?: Address | Address[];
   priorityChainId?: SupportedChainId;
   protocolSlug?: string;
   project?: string;
@@ -477,7 +477,9 @@ export const useEnsoToken = ({
     return data.data.map((token) => ({
       ...token,
       address: token?.address.toLowerCase() as Address,
-      logoURI: tokenFromList?.logoURI ?? token?.logosUri[0],
+      logoURI:
+        tokenFromList?.find((t) => t?.address == token?.address)?.logoURI ??
+        token?.logosUri[0],
       underlyingTokens: token?.underlyingTokens?.map((token) => ({
         ...token,
         address: token?.address.toLowerCase() as Address,