fix: no default token on supply modal

src/components/element/participate/Interact.client.tsx

@@ -70,6 +70,7 @@ export default function Interact({
     else if (!user) return <WalletButton {...commonProps} />;
     else if (chainId !== opportunity.chainId)
       createProps({ children: `Switch to ${opportunity.chain.name}`, onClick: () => switchChain(opportunity.chainId) });
+    else if (!inputToken) createProps({ disabled: true, children: "Select a token" });
     else if (!amount || amount === 0n) createProps({ disabled: true, children: "Enter an amount" });
     else if (amount > inputToken.balance) createProps({ disabled: true, children: "Exceeds balance" });
     else if (!transaction && !txLoading)

src/components/element/participate/Participate.tsx

@@ -4,11 +4,12 @@ import { Button, Group, Icon, Input, PrimitiveTag, Text, Value } from "dappkit";
 import { Box, Collapsible } from "dappkit";
 import { useWalletContext } from "dappkit";
 import { Fmt } from "dappkit";
-import { Suspense, useMemo, useState } from "react";
+import { Suspense, useEffect, useMemo, useState } from "react";
 import { I18n } from "../../../I18n";
 import merklConfig from "../../../config";
 import useOpportunity from "../../../hooks/resources/useOpportunity";
 import useParticipate from "../../../hooks/useParticipate";
+import { TokenService } from "../../../modules/token/token.service";
 import OpportunityShortCard from "../opportunity/OpportunityShortCard";
 import TokenSelect from "../token/TokenSelect";
 import Interact from "./Interact.client";
@@ -40,6 +41,7 @@ export default function Participate({
     token: inputToken,
     loading,
   } = useParticipate(opportunity.chainId, opportunity.protocol?.id, opportunity.identifier, tokenAddress);
+
   const { link } = useOpportunity(opportunity);
   const location = useLocation();
   const isOnOpportunityPage = location.pathname.includes("/opportunities/");
@@ -178,6 +180,10 @@ export default function Participate({
     connected,
   ]);
 
+  useEffect(() => {
+    if (!tokenAddress || tokenAddress === "") setTokenAddress(TokenService.sortForUser(balance)?.[0]?.address);
+  }, [balance, tokenAddress]);
+
   return (
     <>
       {displayOpportunity && <OpportunityShortCard opportunity={opportunity} displayLinks={displayLinks} />}

src/components/element/token/TokenSelect.tsx

@@ -1,38 +1,18 @@
+import type { Token as TokenType } from "@merkl/api";
 import { Group, Icon, Select, type SelectProps, Text, Title, Value } from "dappkit";
 import { Fmt } from "dappkit";
 import { useMemo } from "react";
 import merklConfig from "../../../config";
-import Token from "./Token";
+import { TokenService } from "../../../modules/token/token.service";
+import Token from "../../element/token/Token";
 
 export type TokenSelectProps = {
-  tokens: (Token & { balance: bigint })[];
+  tokens: (TokenType & { balance: bigint })[];
   balances?: boolean;
 } & SelectProps<string>;
 
 export default function TokenSelect({ tokens, balances, ...props }: TokenSelectProps) {
-  const sortedTokens = useMemo(() => {
-    if (!tokens) return [];
-    const tokensWithBalance = tokens
-      .filter(({ balance }) => balance > 0)
-      .sort((a, b) => {
-        if (a.price && b.price) return Fmt.toPrice(b.balance, b) - Fmt.toPrice(a.balance, a);
-        if (a.price && a.balance && Fmt.toPrice(a.balance, a)) return -1;
-        if (b.price && b.balance && Fmt.toPrice(b.balance, b)) return 1;
-
-        return b.balance - a.balance;
-      });
-    const tokensWithNoBalance = tokens.filter(({ balance }) => balance === "0" || !balance || balance <= 0n);
-
-    const tokensInPriority = !merklConfig?.tokenSymbolPriority?.length
-      ? tokensWithNoBalance
-      : merklConfig?.tokenSymbolPriority
-          .map(s => tokensWithNoBalance.find(({ symbol }) => symbol === s))
-          .filter(t => t !== undefined);
-
-    const otherTokens = tokensWithNoBalance.filter(s => merklConfig?.tokenSymbolPriority?.includes(s));
-
-    return [...tokensWithBalance, ...tokensInPriority, ...otherTokens];
-  }, [tokens]);
+  const sortedTokens = useMemo(() => TokenService.sortForUser(tokens), [tokens]);
 
   const options = useMemo(
     () =>

src/modules/token/token.service.ts

@@ -1,6 +1,8 @@
 import type { Token } from "@merkl/api";
+import { Fmt } from "dappkit";
 import { api } from "../../api";
 import { fetchWithLogs } from "../../api/utils";
+import merklConfig from "../../config";
 
 export abstract class TokenService {
   static async #fetch<R, T extends { data: R; status: number; response: Response }>(
@@ -71,4 +73,33 @@ export abstract class TokenService {
     if (tokens.length === 0) throw new Response("Token not found", { status: 404 });
     return tokens;
   }
+
+  /**
+   * Sorts tokens based on dollar value & token priority
+   * @returns
+   */
+  static sortForUser(tokens?: (Token & { balance: bigint })[]) {
+    if (!tokens) return [];
+
+    const tokensWithBalance = tokens
+      .filter(({ balance }) => balance > 0)
+      .sort((a, b) => {
+        if (a.price && b.price) return Fmt.toPrice(b.balance, b) - Fmt.toPrice(a.balance, a);
+        if (a.price && a.balance && Fmt.toPrice(a.balance, a)) return -1;
+        if (b.price && b.balance && Fmt.toPrice(b.balance, b)) return 1;
+
+        return b.balance - a.balance;
+      });
+    const tokensWithNoBalance = tokens.filter(({ balance }) => !balance || BigInt(balance) <= 0n);
+
+    const tokensInPriority = !merklConfig?.tokenSymbolPriority?.length
+      ? tokensWithNoBalance
+      : merklConfig?.tokenSymbolPriority
+          .map(s => tokensWithNoBalance.find(({ symbol }) => symbol === s))
+          .filter(t => t !== undefined);
+
+    const otherTokens = tokensWithNoBalance.filter(s => merklConfig?.tokenSymbolPriority?.includes(s));
+
+    return [...tokensWithBalance, ...tokensInPriority, ...otherTokens];
+  }
 }