Added updated balance visualization in Connect modal #2680

mfbz · 2025-10-29T21:47:48Z

Enhanced Connect component with multi-token support and improved UX. This PR adds multi-token balance visualization to the Connect component through a new balanceTokens prop, allowing users to view balances for any configured token via a dropdown selector.

changeset-bot · 2025-10-29T21:47:52Z

🦋 Changeset detected

Latest commit: 9f7c956

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@onflow/react-sdk	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-10-29T21:47:55Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
react-sdk-demo	Ready	Preview	Comment	Nov 1, 2025 0:00am

github-actions · 2025-10-29T21:48:00Z

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

Scanned Files

None

jribbink · 2025-10-31T00:01:37Z

packages/demo/src/components/component-cards/connect-card.tsx

+    {
+      symbol: "FLOW",
+      name: "Flow Token",
+      vaultIdentifier: `A.${chainId === "testnet" ? "7e60df042a9c0868" : "1654653399040a61"}.FlowToken.Vault`,


Do we need emulator?

chasefleming

Can we just add commas to the numbers like 1748.261 FLOW otherwise otherwise lgtm?

jribbink · 2025-10-31T00:02:08Z

packages/demo/src/components/component-cards/connect-card.tsx

+    {
+      symbol: "USDC",
+      name: "USD Coin",
+      vaultIdentifier: `A.${chainId === "testnet" ? "b7ace0a920d2c37d" : "1e4aa0b87d10b141"}.USDCFlow.Vault`,


Do we need emulator here support here?

i've hidden them because they don't have default addresses on the emulator and are just there to show some values mainly for testnet/mainnet

Copilot

Pull Request Overview

This PR enhances the Connect component to support multi-token balance visualization. Users can now view balances for multiple configured tokens (like USDC, USDT) through a dropdown selector in the Connect modal, replacing the previous single-token FLOW display.

Key Changes:

Renamed total balance type to combined in the cross-VM token balance hook to better reflect its purpose
Added balanceTokens prop to Connect component enabling multi-token support with dropdown selection
Enhanced Connect modal UI with Flowscan integration, improved balance formatting, and Cadence/EVM breakdown display

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/react-sdk/src/hooks/useCrossVmTokenBalance.ts	Renamed balance property from `total` to `combined`
packages/react-sdk/src/hooks/useCrossVmTokenBalance.test.ts	Updated test to reflect renamed balance property
packages/react-sdk/src/components/Connect.tsx	Added multi-token support with dropdown selector, Flowscan link, and enhanced balance display
packages/demo/src/components/component-cards/connect-card.tsx	Added interactive demo controls for multi-token mode and balance type selection
.changeset/young-terms-agree.md	Added changeset documenting the enhancement

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

Copilot · 2025-10-31T00:02:33Z

packages/react-sdk/src/components/Connect.tsx

+                </div>
              </div>
+
+              {showBreakdown && balanceType !== "combined" && (


The breakdown should be displayed when balanceType === 'combined' rather than hidden. When users select 'combined' balance type, they would expect to see how that total is composed of Cadence and EVM balances.

Suggested change

{showBreakdown && balanceType !== "combined" && (

{showBreakdown && balanceType === "combined" && (

Copilot · 2025-10-31T00:02:33Z

packages/demo/src/components/component-cards/connect-card.tsx

+    {
+      symbol: "USDT",
+      name: "Tether USD",
+      vaultIdentifier: "A.1e4aa0b87d10b141.USDTFlow.Vault",
+      erc20Address: "0x674843C06FF83502ddb4D37c2E09C01cdA38cbc8",
+    },
+  ]


The USDT token configuration is missing the testnet conditional logic that USDC has. This token will fail on testnet since it uses a mainnet-only address and ERC20 contract. Either add testnet support or conditionally exclude it from the list when on testnet.

Suggested change

{

symbol: "USDT",

name: "Tether USD",

vaultIdentifier: "A.1e4aa0b87d10b141.USDTFlow.Vault",

erc20Address: "0x674843C06FF83502ddb4D37c2E09C01cdA38cbc8",

},

]

// Only include USDT on mainnet

...(chainId === "mainnet"

? [

{

symbol: "USDT",

name: "Tether USD",

vaultIdentifier: "A.1e4aa0b87d10b141.USDTFlow.Vault",

erc20Address: "0x674843C06FF83502ddb4D37c2E09C01cdA38cbc8",

},

]

: []),

jribbink · 2025-10-31T00:04:17Z

packages/react-sdk/src/components/Connect.tsx

+    if (!chainId) return [{symbol: "FLOW", name: "Flow Token"}]
+
+    const address =
+      chainId === "testnet" ? "7e60df042a9c0868" : "1654653399040a61"


same q re. networks

jribbink · 2025-10-31T00:10:49Z

packages/demo/src/components/component-cards/connect-card.tsx

+    {
+      symbol: "USDT",
+      name: "Tether USD",
+      vaultIdentifier: "A.1e4aa0b87d10b141.USDTFlow.Vault",


This identifier doesn't exist

jribbink · 2025-10-31T00:11:11Z

packages/demo/src/components/component-cards/connect-card.tsx

+          : "0xF1815bd50389c46847f0Bda824eC8da914045D14",
+    },
+    {
+      symbol: "USDT",


Is USDT canonical? I have not seen it used before

i've replaced it with USDF (PYUSD) 👍

jribbink · 2025-10-31T00:12:00Z

packages/demo/src/components/component-cards/connect-card.tsx

+      symbol: "USDT",
+      name: "Tether USD",
+      vaultIdentifier: "A.1e4aa0b87d10b141.USDTFlow.Vault",
+      erc20Address: "0x674843C06FF83502ddb4D37c2E09C01cdA38cbc8",


what happens on other networks?

They need to put a tokenConfig that is appropriated for the selected network, so in case it's testnet the tokenconfig should have testnet addresses and same for mainnet. consider that usually this data once is set never changes because except for rare cases like the playground or dashboards/explorers you will never change network in a dapp, but even in that case it would still work, i've tried in the playground

jribbink · 2025-10-31T00:14:55Z

packages/react-sdk/src/components/Connect.tsx

+export interface TokenConfig {
+  symbol: string
+  name: string
+  vaultIdentifier?: string
+  erc20Address?: string
+}


I don't think symbol is needed here, it should be implicit (optional override is OK)

What do you mean by implicit? To me having both is useful because the symbol it is a direct property of a token and the actual ticker, while the name is more descriptive friendly label. An example is:

stFlow (Increment Staked FLOW)
symbol: stFlow
name: stFlow (Increment Staked FLOW)

or

USDF (PYUSD)
symbol: USDF
name: USDF (PYUSD)

jribbink · 2025-10-31T00:16:56Z

packages/react-sdk/src/components/Connect.tsx

+  // Get Flowscan URL based on network
+  const getFlowscanUrl = () => {
+    if (!user?.addr || !chainId) return null
+    if (chainId === "emulator" || chainId === "local") return null
+
+    const baseUrl =
+      chainId === "testnet"
+        ? "https://testnet.flowscan.io"
+        : "https://flowscan.io"
+
+    return `${baseUrl}/account/${user.addr}`
+  }


I feel like this already exists somewhere (we have the transaction link component)

i've added a utility file with flowscan utils so that we can reuse it everywhere, and refactored where it was used

jribbink · 2025-10-31T00:20:09Z

packages/demo/src/components/component-cards/connect-card.tsx

+      vaultIdentifier: "A.1e4aa0b87d10b141.USDCFlow.Vault",
+      erc20Address: "0xF1815bd50389c46847f0Bda824eC8da914045D14",


Only one one or the other should be provided, and this should be enforced otherwise it's going to lead to issues (e.g. in the example currently there is a bad token address, but the UI itself seems ostensibly fine)

Yepp, I added a strict typecheck changing the tokenconfig interface so that you are required to provide one or the other and i updated the example 🤝

jribbink · 2025-10-31T20:10:51Z

packages/react-sdk/src/components/Connect.tsx

+    hasData && balanceData[balanceType]
+      ? formatBalance(balanceData[balanceType].formatted)
+      : "0"


Why did this change from the locale string?

mfbz added 2 commits October 29, 2025 16:27

Updated connect component with multiple tokens visualization

02ea61d

Fully refactored balance visualization on connect modal

215c2ce

mfbz requested a review from a team as a code owner October 29, 2025 21:47

Put modal size as before

ae25055

vercel bot deployed to Preview October 29, 2025 21:54 View deployment

Merge branch 'master' into mfbz/connect-balance-type

d6d67aa

vercel bot deployed to Preview October 30, 2025 20:54 View deployment

jribbink reviewed Oct 31, 2025

View reviewed changes

chasefleming approved these changes Oct 31, 2025

View reviewed changes

chasefleming requested a review from Copilot October 31, 2025 00:01

jribbink reviewed Oct 31, 2025

View reviewed changes

Copilot AI reviewed Oct 31, 2025

View reviewed changes

jribbink reviewed Oct 31, 2025

View reviewed changes

Merge branch 'master' into mfbz/connect-balance-type

bece514

vercel bot deployed to Preview October 31, 2025 08:39 View deployment

Added a little bit of emulator support to connect demo card

6451d9d

vercel bot deployed to Preview October 31, 2025 09:04 View deployment

Remove breakdown for cleaner UI

8d53c78

vercel bot deployed to Preview October 31, 2025 09:10 View deployment

Added flow token emulator support to connect button

eee930c

vercel bot deployed to Preview October 31, 2025 09:14 View deployment

Added USDF (PYUSD) as example in connect card

12add8f

vercel bot deployed to Preview October 31, 2025 10:00 View deployment

Added flowscan utils and refactored its usage

0848fbd

vercel bot deployed to Preview October 31, 2025 10:58 View deployment

Enforced vaultidentifier or erc20 address

0b4c774

vercel bot deployed to Preview October 31, 2025 12:29 View deployment

jribbink reviewed Oct 31, 2025

View reviewed changes

Change back displayBalance to localestring

545f405

vercel bot deployed to Preview October 31, 2025 23:21 View deployment

Fixed first load problem

0e0b0a2

vercel bot deployed to Preview October 31, 2025 23:32 View deployment

Improved tolocalestring with params

9f7c956

vercel bot deployed to Preview November 1, 2025 00:00 View deployment

jribbink approved these changes Nov 3, 2025

View reviewed changes

mfbz merged commit b7d73c7 into master Nov 3, 2025
8 checks passed

mfbz deleted the mfbz/connect-balance-type branch November 3, 2025 23:35

github-actions bot mentioned this pull request Nov 3, 2025

Version Packages #2674

Merged

	{showBreakdown && balanceType !== "combined" && (
	{showBreakdown && balanceType === "combined" && (

		vaultIdentifier: "A.1e4aa0b87d10b141.USDCFlow.Vault",
		erc20Address: "0xF1815bd50389c46847f0Bda824eC8da914045D14",

Added updated balance visualization in Connect modal #2680

Added updated balance visualization in Connect modal #2680

Uh oh!

Conversation

mfbz commented Oct 29, 2025

Uh oh!

changeset-bot bot commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Dependency Review

Scanned Files

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chasefleming left a comment

Choose a reason for hiding this comment

Uh oh!

jribbink Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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 Oct 31, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 31, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jribbink Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mfbz Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

changeset-bot bot commented Oct 29, 2025 •

edited

Loading

vercel bot commented Oct 29, 2025 •

edited

Loading

github-actions bot commented Oct 29, 2025 •

edited

Loading

jribbink Oct 31, 2025 •

edited

Loading

jribbink Oct 31, 2025 •

edited

Loading

mfbz Oct 31, 2025 •

edited

Loading