Dynamic on-chain tokens #1014

gianfra-t · 2026-01-16T15:46:46Z

No description provided.

netlify · 2026-01-16T15:46:51Z

✅ Deploy Preview for vortex-sandbox ready!

Name	Link
🔨 Latest commit	`5cfae2b`
🔍 Latest deploy log	https://app.netlify.com/projects/vortex-sandbox/deploys/6979dc8b54a05a0008e435d5
😎 Deploy Preview	https://deploy-preview-1014--vortex-sandbox.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-01-16T15:46:51Z

✅ Deploy Preview for vortexfi ready!

Name	Link
🔨 Latest commit	`5cfae2b`
🔍 Latest deploy log	https://app.netlify.com/projects/vortexfi/deploys/6979dc8bdf04880008c2c822
😎 Deploy Preview	https://deploy-preview-1014--vortexfi.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sharqiewicz · 2026-01-16T19:24:16Z

apps/frontend/package.json

    "react-hook-form": "^7.65.0",
    "react-i18next": "^15.4.1",
    "react-toastify": "^11.0.5",
+    "react-window": "^2.2.5",


let's use https://tanstack.com/virtual/latest/docs/framework/react

…rtex into dynamic-onchain-tokens

Copilot

Pull request overview

Adds support for dynamically loaded on-chain (EVM) tokens (logo + USD price) sourced from SquidRouter, and updates the frontend token UX to display those tokens efficiently.

Changes:

Introduces a shared “dynamic EVM tokens” module that fetches tokens/prices from SquidRouter with static-config fallback.
Updates frontend token selection/display to use dynamic token logos, compute/display USD balances, and virtualize long token lists.
Cleans up/adjusts various UI pieces and token icon handling (including removing many bundled token SVG assets).

Reviewed changes

Copilot reviewed 43 out of 68 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
packages/shared/src/tokens/utils/typeGuards.ts	Extends on-chain balance types to include USD balance.
packages/shared/src/tokens/utils/helpers.ts	Adds optional dynamic EVM token config lookup in token detail helpers.
packages/shared/src/tokens/types/evm.ts	Adds `logoURI`/`usdPrice` to EVM token details and USD balance field to balance type.
packages/shared/src/tokens/types/assethub.ts	Adds USD balance field to AssetHub balance type.
packages/shared/src/tokens/index.ts	Exports dynamic EVM token module from shared tokens index.
packages/shared/src/tokens/evm/dynamicEvmTokens.ts	New dynamic token fetch/store layer (SquidRouter) with fallback to static config.
packages/shared/src/tokens/constants/misc.ts	Minor constant string literal change.
packages/shared/src/services/squidrouter/onramp.ts	Adjusts import path.
packages/shared/src/services/pendulum/apiManager.ts	Minor refactor (`let` → `const`).
packages/shared/.prettierignore	Attempts to ignore shared tokens index for Prettier runs.
package.json	Adds `react-window` dependency.
apps/rebalancer/src/rebalance/brla-to-axlusdc/index.ts	Minor TS default param style tweak.
apps/frontend/src/stories/RampFollowUpRedirectStep.stories.tsx	Minor TS default param style tweak.
apps/frontend/src/stories/AveniaLivenessStep.stories.tsx	Minor TS default param style tweak.
apps/frontend/src/services/tokens/index.ts	New frontend re-export wrapper for shared dynamic token APIs.
apps/frontend/src/sections/individuals/PopularTokens/index.tsx	Restricts “popular tokens” display to fiat tokens and updates icon validation.
apps/frontend/src/main.tsx	Initializes dynamic EVM tokens at app startup.
apps/frontend/src/hooks/useTokensSortedByBalance.ts	Simplifies sorting logic to reorder definitions based on computed balance order.
apps/frontend/src/hooks/useOnchainTokenBalancesSorted.ts	Switches sorting metric to USD balance.
apps/frontend/src/hooks/useOnchainTokenBalances.ts	Reworks EVM balance fetching to use Alchemy and adds USD balance computation.
apps/frontend/src/hooks/useGetNetworkIcon.tsx	Adds default icon fallback and constrains typed icon map.
apps/frontend/src/hooks/useGetAssetIcon.tsx	Refactors to fiat-only icon lookup with placeholder fallback.
apps/frontend/src/hooks/ramp/useRampValidation.ts	Uses dynamic EVM token config when resolving token details.
apps/frontend/src/components/widget-steps/SummaryStep/TransactionTokensDisplay.tsx	Uses `logoURI` for on-chain token icons with fiat fallback.
apps/frontend/src/components/buttons/AssetButton/index.tsx	Supports `logoURI` override for token icon rendering.
apps/frontend/src/components/UserBalance/index.tsx	Improves balance formatting and hides zero balances.
apps/frontend/src/components/TokenSelection/TokenSelectionList/hooks/useTokenSelection.tsx	Adds optional `logoURI` to token definitions.
apps/frontend/src/components/TokenSelection/TokenSelectionList/helpers.tsx	Switches token definitions to use dynamic config and external icon URLs.
apps/frontend/src/components/TokenSelection/TokenSelectionList/components/SelectionTokenList.tsx	Virtualizes token list rendering with `@tanstack/react-virtual`.
apps/frontend/src/components/TokenIconWithNetwork/index.tsx	New component to render token icon with optional network overlay.
apps/frontend/src/components/Ramp/Onramp/index.tsx	Passes `logoURI` to asset input for dynamic token icons.
apps/frontend/src/components/Ramp/Offramp/index.tsx	Passes `logoURI` to asset input for dynamic token icons.
apps/frontend/src/components/ListItem/index.tsx	Uses new icon component + memoization; shows balances only for on-chain items.
apps/frontend/src/components/ComparisonSlider/index.tsx	Classname formatting changes only.
apps/frontend/src/components/Avenia/AveniaField/index.tsx	Classname formatting changes only.
apps/frontend/src/components/AssetNumericInput/index.tsx	Threads `logoURI` through to button.
apps/frontend/src/components/Accordion/index.tsx	Classname formatting changes only.
apps/frontend/src/assets/coins/placeholder.svg	Adds placeholder token icon asset.
apps/frontend/src/assets/coins/eurc.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/USDT_POLYGON.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/USDT_ETHEREUM.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/USDT_BSC.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/USDT_BASE.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/USDT_AVALANCHE.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/USDT_ASSETHUB.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/USDT_ARBITRUM.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/USDT.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/USDC_POLYGON.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/USDC_ETHEREUM.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/USDC_BSC.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/USDC_BASE.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/USDC_AVALANCHE.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/USDC_ASSETHUB.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/USDC_ARBITRUM.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/ETH_ETHEREUM.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/ETH_BSC.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/ETH_BASE.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/ETH_ARBITRUM.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/ETH.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/src/assets/coins/DOT_ASSETHUB.svg	Removes bundled token icon (now using new icon approach).
apps/frontend/package.json	Adds `@tanstack/react-virtual` and `react-window`.
apps/api/src/index.ts	Initializes dynamic EVM tokens at API startup.
apps/api/src/api/services/quote/core/squidrouter.ts	Adds a debug `console.log` around token detail lookup.
apps/api/src/api/services/priceFeed.service.ts	Uses dynamic token USD prices (when available) before falling back to CoinGecko.
apps/api/src/api/services/phases/handlers/distribute-fees-handler.ts	Minor string literal tweak.
apps/api/src/api/controllers/metrics.controller.ts	Minor string literal tweak.

Comments suppressed due to low confidence (1)

apps/frontend/src/hooks/useOnchainTokenBalances.ts:121

nativeToken is memoized with dependency [tokensForNetwork.find], which is a stable function reference and won't update when tokensForNetwork changes (e.g., network switch). This can leave nativeToken stale. Depend on tokensForNetwork (or compute inline) instead.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-27T19:43:22Z

apps/frontend/src/components/TokenSelection/TokenSelectionList/helpers.tsx

+const ASSETHUB_ICON_URLS: Record<AssetHubToken, string> = {
+  [AssetHubToken.USDC]: "https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/usdc.svg",
+  [AssetHubToken.USDT]: "https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/usdt.svg",
+  [AssetHubToken.DOT]: "https://raw.githubusercontent.com/0xsquid/assets/main/images/tokens/dot.svg"
+};
+
+import { useMemo, useRef } from "react";
+import { getEvmTokenConfig } from "../../../services/tokens";


import { useMemo, useRef } from "react"; appears after executable code (const ASSETHUB_ICON_URLS ...). In ESM/TypeScript, all import statements must be at the top level before other statements, so this file will fail to compile. Move the ASSETHUB_ICON_URLS constant below the imports (or convert it to a separate module).

Copilot · 2026-01-27T19:43:22Z

apps/frontend/src/hooks/useOnchainTokenBalances.ts

+// Global cache to persist balances across hook instances and app lifecycle
+const globalBalanceCache = new Map<string, Map<string, string>>();
+
 import { useBalance, useReadContracts } from "wagmi";
 import { useNetwork } from "../contexts/network";
 import { useAssetHubNode } from "../contexts/polkadotNode";
 import erc20ABI from "../contracts/ERC20";
 import { multiplyByPowerOfTen } from "../helpers/contracts";
+import { getEvmTokensForNetwork } from "../services/tokens";
 import { useVortexAccount } from "./useVortexAccount";


This file declares globalBalanceCache before importing from wagmi, and also has an import statement after code. ESM requires imports to come before other statements, so this will be a syntax/compile error. Move the globalBalanceCache declaration below all imports (or move it to a separate module).

Copilot · 2026-01-27T19:43:22Z

apps/frontend/src/hooks/useOnchainTokenBalances.ts

 import { useEffect, useMemo, useState } from "react";
-import { Abi } from "viem";
+import { Abi, hexToBigInt } from "viem";
+
+// Global cache to persist balances across hook instances and app lifecycle
+const globalBalanceCache = new Map<string, Map<string, string>>();
+
 import { useBalance, useReadContracts } from "wagmi";
 import { useNetwork } from "../contexts/network";
 import { useAssetHubNode } from "../contexts/polkadotNode";
 import erc20ABI from "../contracts/ERC20";
 import { multiplyByPowerOfTen } from "../helpers/contracts";


useReadContracts, erc20ABI, and Abi are imported but no longer referenced in this file. This will fail lint/typecheck in many setups; please remove unused imports (or reintroduce usage if intended).

Copilot · 2026-01-27T19:43:22Z

apps/api/src/api/services/quote/core/squidrouter.ts

    });
  }

+  console.log("Getting token details for:", finalOutputCurrency, "on network:", network);


Remove the console.log in this server-side path. It will spam production logs and bypasses the configured logger (which also controls log levels/format). Use logger.debug(...) (or remove entirely) instead.

Suggested change

console.log("Getting token details for:", finalOutputCurrency, "on network:", network);

logger.debug("Getting token details for EVM destination", {

finalOutputCurrency,

network

});

Copilot · 2026-01-27T19:43:23Z

packages/shared/.prettierignore

@@ -0,0 +1 @@
+./packages/shared/src/tokens/index.ts


The ignore entry ./packages/shared/src/tokens/index.ts is unlikely to match when running prettier . from within packages/shared (paths are relative to that directory). Use src/tokens/index.ts (or verify the configured Prettier ignore path base) so the file is actually ignored.

Copilot · 2026-01-27T19:43:23Z

packages/shared/src/tokens/evm/dynamicEvmTokens.ts

+  for (const token of tokens) {
+    if (isNetworkEVM(token.network)) {
+      const network = token.network as EvmNetworks;
+      if (!grouped[network]) {
+        grouped[network] = {};
+      }
+      grouped[network][token.assetSymbol] = token;
+    }


Dynamic tokens are keyed by token.assetSymbol only. On many EVM chains there are multiple distinct tokens sharing a symbol (e.g., multiple USDC variants), so this will silently overwrite entries and can return incorrect token details. Consider keying by a stable identifier (address) and/or storing a list per symbol with explicit disambiguation logic.

Copilot · 2026-01-27T19:43:24Z

packages/shared/src/tokens/types/evm.ts

 export interface EvmTokenDetailsWithBalance extends EvmTokenDetails {
  balance: string;
+  balanceUsd?: string;
 }


balanceUsd is required on OnChainTokenDetailsWithBalance, but EvmTokenDetailsWithBalance defines balanceUsd as optional. This creates inconsistent typing for EVM balances (and forces extra casting). Align the types by making balanceUsd consistently required or consistently optional across balance-bearing token types.

Copilot · 2026-01-27T19:43:24Z

package.json

  "dependencies": {
    "big.js": "^7.0.1",
    "husky": "^9.1.7",
-    "lint-staged": "^16.1.0"
+    "lint-staged": "^16.1.0",
+    "react-window": "^2.2.5"
  },


react-window was added as a dependency but there are no imports/usages in the repo (search shows none). If virtualization is now handled by @tanstack/react-virtual, please remove react-window to avoid extra bundle/dependency surface.

Copilot · 2026-01-27T19:43:24Z

apps/frontend/package.json

    "react-hook-form": "^7.65.0",
    "react-i18next": "^15.4.1",
    "react-toastify": "^11.0.5",
+    "react-window": "^2.2.5",


react-window is listed in dependencies, but the code uses @tanstack/react-virtual and there are no react-window imports. Consider removing react-window here to keep dependencies minimal.

Suggested change

"react-window": "^2.2.5",

Copilot · 2026-01-27T19:43:25Z

packages/shared/src/tokens/utils/helpers.ts

 import { stellarTokenConfig } from "../stellar/config";
 import { AssetHubToken, FiatToken, OnChainToken, RampCurrency } from "../types/base";
-import { EvmToken } from "../types/evm";
+import { EvmToken, EvmTokenDetails } from "../types/evm";


Unused import EvmToken.

ebma · 2026-01-28T10:43:09Z

@copilot please create a separate PR and address all the changes requested here.

Copilot · 2026-01-28T10:43:19Z

@ebma I've opened a new pull request, #1046, to work on those changes. Once the pull request is ready, I'll request review from you.

gianfra-t added 3 commits January 15, 2026 15:24

add first draft

8f96dac

move dynamic token config to shared, adjust checks and getters

16885b4

test react window

9edce1e

Sharqiewicz reviewed Jan 16, 2026

View reviewed changes

gianfra-t and others added 17 commits January 19, 2026 09:09

solve cyclic import issue

e75470c

use balances from alchemy endpoint

d0d9564

Merge branch 'dynamic-onchain-tokens' of github.com:pendulum-chain/vo…

c30b3de

…rtex into dynamic-onchain-tokens

fetch balances from portfolio endpoint

8c0d7f3

order balance by usd value

02dda7c

replace react-window with react-virtual

2eeded6

improve list ordering, performance

b1b5d5b

add proper logo to Onramp selected token

0ba8c1c

re-arrange import

42960cf

remove unused coins imgs

40dd15a

implement TokenIconWithNetwork

13ca8a7

fix lint issues

41a8c11

refactor getting asset icons

a2eaa7d

refactor PopularTokens tokens definition

0c43f6b

remove unused tokens from useGetAssetIcon

33a0b90

refactor tanstack virtualizer definition

f7febd3

optimize sorting tokens by balance

9f98bf0

ebma marked this pull request as ready for review January 27, 2026 19:36

ebma requested a review from Copilot January 27, 2026 19:36

Copilot started reviewing on behalf of ebma January 27, 2026 19:37 View session

Copilot AI reviewed Jan 27, 2026

View reviewed changes

Sharqiewicz added 3 commits January 28, 2026 07:51

fix: normalize token keys to uppercase to prevent duplicates

c5b5bdc

feat: add fallbackLogoURI property to EVM tokens

eeb5d24

feat: implement fallback image handling in token selection

71e0c5a

Sharqiewicz added 10 commits January 28, 2026 07:54

feat: implement fallback image handling in ramp inputs

e1606f1

feat: implement fallback image handling in transaction summary

0f25c6a

Add loading placeholder for token images

8075f76

feat: add TokenImage component with loading and fallback support

e28930a

feat: add getTokenLogoURIs helper function

2c07cb0

refactor: use TokenImage component for token icons

98f5d33

fix type issues

1cf91f7

change hex colors to oklch

c5f9581

fix token filtering to only our present chains

471088c

change isOnChainToken type guard

5cfae2b

Copilot AI mentioned this pull request Jan 28, 2026

Fix code quality issues in dynamic token implementation #1046

Draft

ebma merged commit e4b05e7 into staging Jan 28, 2026
5 checks passed

ebma deleted the dynamic-onchain-tokens branch January 28, 2026 12:04

		@@ -0,0 +1 @@
		./packages/shared/src/tokens/index.ts No newline at end of file

Dynamic on-chain tokens #1014

Dynamic on-chain tokens #1014

Uh oh!

Conversation

gianfra-t commented Jan 16, 2026

Uh oh!

netlify bot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for vortex-sandbox ready!

Uh oh!

netlify bot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for vortexfi ready!

Uh oh!

Sharqiewicz Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

ebma commented Jan 28, 2026

Uh oh!

Copilot AI commented Jan 28, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

netlify bot commented Jan 16, 2026 •

edited

Loading

netlify bot commented Jan 16, 2026 •

edited

Loading