@aurora-is-near/intents-swap-widget 3.18.3 → 3.19.0

package/src/features/ChainsSelector/index.tsx

@@ -0,0 +1,113 @@
+import { ChainsDropdown } from '../ChainsDropdown';
+
+import { CHAIN_ICONS } from '@/icons';
+import { ChainShortcut } from '@/components/ChainShortcut';
+
+import { cn } from '@/utils/cn';
+import { useChains } from '@/hooks';
+import { useConfig } from '@/config';
+import { noop } from '@/utils/noop';
+import { notReachable } from '@/utils/notReachable';
+import type { Chains, ChainsFilter } from '@/types/chain';
+
+type SelectedChain = 'all' | 'intents' | Chains;
+
+type Msg = { type: 'on_select_chain'; chain: SelectedChain };
+
+type Props = {
+  variant: 'source' | 'target';
+  chainsFilter: ChainsFilter;
+  selectedChain: SelectedChain;
+  className?: string;
+  onMsg: (msg: Msg) => void;
+};
+
+export const ChainsSelector = ({
+  variant,
+  chainsFilter,
+  selectedChain,
+  className,
+  onMsg,
+}: Props) => {
+  const chains = useChains(variant);
+  const {
+    appIcon,
+    appName,
+    topChainShortcuts,
+    intentsAccountType,
+    showIntentTokens,
+  } = useConfig();
+
+  const topChains =
+    topChainShortcuts?.(intentsAccountType) ??
+    (['eth', 'btc', 'sol', 'near'] as const);
+
+  return (
+    <div
+      className={cn('flex items-center justify-between gap-sw-md', className)}>
+      <ChainShortcut.All
+        isSelected={selectedChain === 'all'}
+        onClick={() => onMsg({ type: 'on_select_chain', chain: 'all' })}
+      />
+
+      <ul className="flex items-center gap-sw-md">
+        {showIntentTokens && (
+          <ChainShortcut
+            icon={appIcon}
+            label={appName}
+            isSelected={selectedChain === 'intents'}
+            onClick={() => onMsg({ type: 'on_select_chain', chain: 'intents' })}
+          />
+        )}
+
+        {topChains.map((chain, index) => {
+          // last shortcut reserved for the selected chain
+          if (
+            index === topChains.length - 1 &&
+            ![...topChains, 'all', 'intents'].includes(selectedChain)
+          ) {
+            return (
+              <ChainShortcut
+                isSelected
+                key={selectedChain}
+                icon={CHAIN_ICONS[selectedChain as Chains]}
+                label={chains.find((c) => c.id === selectedChain)?.label ?? ''}
+                onClick={noop}
+              />
+            );
+          }
+
+          // check it here to respect global chain filters
+          if (chains.some((c) => c.id === chain)) {
+            return (
+              <ChainShortcut
+                key={chain}
+                icon={CHAIN_ICONS[chain]}
+                isSelected={selectedChain === chain}
+                label={chains.find((c) => c.id === chain)?.label ?? ''}
+                onClick={() => onMsg({ type: 'on_select_chain', chain })}
+              />
+            );
+          }
+
+          return null;
+        })}
+      </ul>
+
+      <ChainsDropdown
+        variant={variant}
+        selected={selectedChain}
+        chainsFilter={chainsFilter}
+        onMsg={(msg) => {
+          switch (msg.type) {
+            case 'on_click_chain':
+              onMsg({ type: 'on_select_chain', chain: msg.chain });
+              break;
+            default:
+              notReachable(msg.type, { throwError: false });
+          }
+        }}
+      />
+    </div>
+  );
+};

package/src/features/TokensList/TokensList.tsx

@@ -60,7 +60,7 @@ export const TokensList = ({
 }: Props) => {
   const { t } = useTypedTranslation();
   const { ctx } = useUnsafeSnapshot();
-  const { walletSupportedChains, appName } = useConfig();
+  const { walletSupportedChains, appName, priorityAssets = [] } = useConfig();
   const { mergedBalance } = useMergedBalance();
 
   const filteredTokens = useTokensFiltered({
@@ -69,6 +69,7 @@ export const TokensList = ({
     chainsFilter,
     selectedChain,
     walletSupportedChains,
+    priorityAssets,
   });
 
   const areTokensGrouped = ctx.walletAddress ? groupTokens : false;

package/src/features/TokensModal.tsx

@@ -1,9 +1,10 @@
-import { SearchW700 as Search } from '@material-symbols-svg/react-rounded/icons/search';
 import { useRef, useState } from 'react';
+import { SearchW700 as Search } from '@material-symbols-svg/react-rounded/icons/search';
 
-import { TokensList } from './TokensList';
-import { ChainsDropdown } from './ChainsDropdown';
 import { useChains } from '../hooks';
+import { TokensList } from './TokensList';
+import { ChainsSelector } from './ChainsSelector';
+
 import { Hr } from '@/components/Hr';
 import { Card } from '@/components/Card';
 import { Input } from '@/components/Input';
@@ -96,33 +97,32 @@ export const TokensModal = ({
         <CloseButton onClick={handleClose} />
       </header>
 
-      <div className="gap-sw-xl flex items-center">
-        <Input
-          focusOnMount
-          icon={Search}
-          ref={searchInputRef}
-          defaultValue={search}
-          className="w-full"
-          placeholder="Search or paste address"
-          onChange={(e) => setSearch(e.target.value.trim())}
+      <Input
+        focusOnMount
+        icon={Search}
+        ref={searchInputRef}
+        defaultValue={search}
+        className="w-full"
+        placeholder="Search or paste address"
+        onChange={(e) => setSearch(e.target.value.trim())}
+      />
+
+      {showChainsSelector && (
+        <ChainsSelector
+          variant={variant}
+          chainsFilter={chainsFilter}
+          selectedChain={selectedChain}
+          onMsg={(msg) => {
+            switch (msg.type) {
+              case 'on_select_chain':
+                setSelectedChain(msg.chain);
+                break;
+              default:
+                notReachable(msg.type);
+            }
+          }}
         />
-        {showChainsSelector && (
-          <ChainsDropdown
-            variant={variant}
-            selected={selectedChain}
-            chainsFilter={chainsFilter}
-            onMsg={(msg) => {
-              switch (msg.type) {
-                case 'on_click_chain':
-                  setSelectedChain(msg.chain);
-                  break;
-                default:
-                  notReachable(msg.type, { throwError: false });
-              }
-            }}
-          />
-        )}
-      </div>
+      )}
 
       {chainIsNotSupported && !!ctx.walletAddress && (
         <>

package/src/hooks/useTokensFiltered.ts

@@ -8,6 +8,7 @@ import { createFilterByIntents } from '@/utils/tokens/filterByIntents';
 import { createFilterBySearch } from '@/utils/tokens/filterBySearchString';
 import { createFilterBySelectedChain } from '@/utils/tokens/filterBySelectedChain';
 import type { Chains, ChainsFilter } from '@/types/chain';
+import type { PriorityAssets } from '@/types/config';
 
 export type TokensFilterOptions = {
   variant: 'source' | 'target';
@@ -15,6 +16,7 @@ export type TokensFilterOptions = {
   selectedChain: Chains | 'all' | 'intents';
   chainsFilter: ChainsFilter;
   walletSupportedChains: ReadonlyArray<Chains>;
+  priorityAssets: PriorityAssets;
 };
 
 // TODO: memoize
@@ -24,6 +26,7 @@ export const useTokensFiltered = ({
   selectedChain,
   chainsFilter,
   walletSupportedChains,
+  priorityAssets,
 }: TokensFilterOptions) => {
   const chains = useChains(variant);
   const { tokens } = useTokens(variant);
@@ -35,6 +38,7 @@ export const useTokensFiltered = ({
     mergedBalance,
     walletSupportedChains,
     search,
+    priorityAssets,
   );
 
   const filteredTokens = tokens

package/src/types/config.ts

@@ -9,6 +9,10 @@ export type WalletAddresses = Partial<
 
 export type IntentsAccountType = 'evm' | 'near' | 'sol';
 
+export type PriorityAssets =
+  | ReadonlyArray<string>
+  | ReadonlyArray<readonly [Chains, string]>;
+
 export type WidgetConfig = {
   // Application metadata
   appName: string;
@@ -38,6 +42,7 @@ export type WidgetConfig = {
   allowedTokensList?: string[]; // assetIDs
   allowedSourceTokensList?: string[];
   allowedTargetTokensList?: string[];
+  priorityAssets?: PriorityAssets;
   filterTokens: (token: Token) => boolean;
 
   // Chains filtering
@@ -45,6 +50,9 @@ export type WidgetConfig = {
   allowedChainsList?: Chains[];
   allowedSourceChainsList?: Chains[];
   allowedTargetChainsList?: Chains[];
+  topChainShortcuts?: (
+    intentsAccountType?: IntentsAccountType,
+  ) => [Chains, Chains, Chains, Chains];
   chainsFilter: {
     source: ChainsFilter;
     target: ChainsFilter;

package/src/types/localisation.ts

@@ -1,6 +1,7 @@
 export type LocalisationKeys =
   // chain
   | 'chain.all.label'
+  | 'chain.more.label'
   // wallet
   | 'wallet.recipient.placeholder'
   | 'wallet.recipient.info.selectToken'

package/src/utils/tokens/sort.ts

@@ -2,8 +2,73 @@ import { formatUnits } from 'ethers';
 
 import { getTokenBalanceKey } from '../intents/getTokenBalanceKey';
 import type { Token, TokenBalances } from '@/types/token';
+import type { PriorityAssets } from '@/types/config';
 import type { Chains } from '@/types/chain';
 
+const compareByPriority = (
+  a: Token,
+  b: Token,
+  priorityAssets: PriorityAssets,
+): number | null => {
+  if (a.isIntent || b.isIntent || priorityAssets.length === 0) {
+    return null;
+  }
+
+  const isPriorityToken = (token: Token): boolean => {
+    // by assetId
+    if (typeof priorityAssets[0] === 'string') {
+      return (priorityAssets as ReadonlyArray<string>).includes(token.assetId);
+    }
+
+    // by blockchain and symbol
+    return (priorityAssets as ReadonlyArray<readonly [Chains, string]>).some(
+      ([blockchain, symbol]) =>
+        token.blockchain === blockchain &&
+        token.symbol.toLowerCase() === symbol.toLowerCase(),
+    );
+  };
+
+  const getPriorityIndex = (token: Token): number => {
+    // by assetId
+    if (typeof priorityAssets[0] === 'string') {
+      return (priorityAssets as ReadonlyArray<string>).indexOf(token.assetId);
+    }
+
+    // by blockchain and symbol
+    return (
+      priorityAssets as ReadonlyArray<readonly [Chains, string]>
+    ).findIndex(
+      ([blockchain, symbol]) =>
+        token.blockchain === blockchain &&
+        token.symbol.toLowerCase() === symbol.toLowerCase(),
+    );
+  };
+
+  const aIsPriority = isPriorityToken(a);
+  const bIsPriority = isPriorityToken(b);
+
+  if (aIsPriority && !bIsPriority) {
+    return -1;
+  }
+
+  if (!aIsPriority && bIsPriority) {
+    return 1;
+  }
+
+  // If both are priority tokens, maintain their relative order based on the priority list
+  if (aIsPriority && bIsPriority) {
+    const aIndex = getPriorityIndex(a);
+    const bIndex = getPriorityIndex(b);
+
+    if (aIndex !== bIndex) {
+      return aIndex - bIndex;
+    }
+  }
+
+  // Return null to indicate no priority difference, continue with other sorting criteria
+  return null;
+};
+
 const compareWithSearch = (
   a: Token,
   b: Token,
@@ -73,8 +138,9 @@ const compareWithSearch = (
   return a.chainName.toLowerCase().localeCompare(b.chainName.toLowerCase());
 };
 
-const sortTokensByUsdBalance = (
+const sortTokens = (
   walletSupportedChains: ReadonlyArray<Chains>,
+  priorityAssets: PriorityAssets,
   usdBalanceA: number | undefined,
   usdBalanceB: number | undefined,
   searchStr: string | undefined,
@@ -82,42 +148,61 @@ const sortTokensByUsdBalance = (
   b: Token,
 ): number => {
   const isIntent = a.isIntent || b.isIntent;
+  const hasBalanceA = usdBalanceA !== undefined && usdBalanceA > 0;
+  const hasBalanceB = usdBalanceB !== undefined && usdBalanceB > 0;
 
-  // 0. Sort supported chains first
-  const aSupported = walletSupportedChains.includes(a.blockchain);
-  const bSupported = walletSupportedChains.includes(b.blockchain);
-
-  if (!isIntent && aSupported && !bSupported) {
+  // 1. Tokens with balance always come first
+  if (hasBalanceA && !hasBalanceB) {
     return -1;
   }
 
-  if (!isIntent && !aSupported && bSupported) {
+  if (!hasBalanceA && hasBalanceB) {
     return 1;
   }
 
-  if (!isIntent && !aSupported && !bSupported) {
-    return compareWithSearch(a, b, searchStr);
-  }
+  // 2. If both have balance, sort by balance amount and other criteria
+  if (hasBalanceA && hasBalanceB) {
+    // Sort supported chains first
+    const aSupported = walletSupportedChains.includes(a.blockchain);
+    const bSupported = walletSupportedChains.includes(b.blockchain);
+
+    if (!isIntent && aSupported && !bSupported) {
+      return -1;
+    }
+
+    if (!isIntent && !aSupported && bSupported) {
+      return 1;
+    }
+
+    // Compare non-zero balances
+    if (usdBalanceA !== usdBalanceB) {
+      return (usdBalanceB ?? 0) - (usdBalanceA ?? 0);
+    }
 
-  // 1. Handle zero balances
-  if (!usdBalanceA && !usdBalanceB) {
+    // If balances equal, sort by search/name
     return compareWithSearch(a, b, searchStr);
   }
 
-  if (!usdBalanceA && usdBalanceB) {
-    return 1;
+  // 3. Both have no balance - prioritize by asset IDs or blockchain-symbol pairs (only for non-intent tokens)
+  const priorityComparison = compareByPriority(a, b, priorityAssets);
+
+  if (priorityComparison !== null) {
+    return priorityComparison;
   }
 
-  if (!usdBalanceB && usdBalanceA) {
+  // 4. For tokens without balance and not in priority list, sort by supported chains
+  const aSupported = walletSupportedChains.includes(a.blockchain);
+  const bSupported = walletSupportedChains.includes(b.blockchain);
+
+  if (!isIntent && aSupported && !bSupported) {
     return -1;
   }
 
-  // 3. Compare non-zero balances
-  if (usdBalanceA !== usdBalanceB) {
-    return (usdBalanceB ?? 0) - (usdBalanceA ?? 0);
+  if (!isIntent && !aSupported && bSupported) {
+    return 1;
   }
 
-  // 4. If balances equal, sort by market cap and then name
+  // 5. Finally, sort alphabetically by search/name
   return compareWithSearch(a, b, searchStr);
 };
 
@@ -125,6 +210,7 @@ export const createTokenSorter = (
   tokensBalance: TokenBalances,
   walletSupportedChains: ReadonlyArray<Chains>,
   searchStr?: string | undefined,
+  priorityAssets: PriorityAssets = [],
 ) => {
   return (a: Token, b: Token) => {
     const recordA = tokensBalance[getTokenBalanceKey(a)];
@@ -145,8 +231,9 @@ export const createTokenSorter = (
 
     const searchLower = searchStr?.trim().toLowerCase() ?? undefined;
 
-    return sortTokensByUsdBalance(
+    return sortTokens(
       walletSupportedChains,
+      priorityAssets,
       usdBalanceA,
       usdBalanceB,
       searchLower,