feat: implemented runtime network switching #276

davedumto · 2025-09-30T22:57:28Z

Add Network Picker for Unified Deployment

closes #247

Problem

Previously, we had 2 separate deployments (testnet and mainnet) which created maintenance overhead and limited our ability to test UI changes across networks efficiently. Users couldn't easily switch between networks without separate deployment URLs.

Solution

Implemented a unified deployment approach with runtime network selection:

🎯 Key Changes

Network Picker Component: Added dropdown in navbar for switching between testnet/mainnet
Centralized Configuration: Created utils/networks.ts for all network settings
Dynamic Service Creation: All services (wallet kit, domain SDK, tansu client) now use current network config
CORS Fix: Added development proxy for mainnet RPC endpoints
Footer Integration: Stellar Explorer links now update based on selected network

🔧 Technical Implementation

NetworkPicker Component (src/components/page/network/NetworkPicker.tsx)
- Clean dropdown with network status indicators
- Visual feedback (green dot for mainnet, yellow for testnet)
- Click-outside-to-close functionality
Network Configuration (src/utils/networks.ts)
- Testnet and mainnet settings in one place
- LocalStorage persistence for user choice
- Helper functions for getting current network config
Service Updates
- stellar-wallets-kit.ts: Dynamic wallet configuration
- soroban_domain_sdk.ts: Network-aware domain SDK
- soroban_tansu.ts: Dynamic contract client creation
Development Proxy (astro.config.mjs)
- Solves CORS issues with mainnet RPC endpoints
- Allows x-client-name header from Stellar SDK

🎨 UI/UX Features

Network status indicators (Live/Test badges)
Hover states and smooth transitions
Accessible dropdown with proper focus management
Integrated seamlessly into existing navbar layout

✅ Benefits

Single Deployment: Easier maintenance and CI/CD
Full Flexibility: Users can test both networks in same UI
Better DX: Developers can switch networks without environment changes
Future-Proof: Easy to add more networks if needed

🧪 Testing

Switching networks reloads page with new configuration
All contract calls use selected network
Stellar Explorer links update correctly
LocalStorage preserves user's network choice

##Video

Screen.Recording.2025-09-30.at.23.55.36.mov

netlify · 2025-09-30T22:57:33Z

✅ Deploy Preview for tansu canceled.

Name	Link
🔨 Latest commit	`f71bec1`
🔍 Latest deploy log	https://app.netlify.com/projects/tansu/deploys/68de67d0c44fcf0008485418

netlify · 2025-09-30T22:59:47Z

✅ Deploy Preview for staging-tansu ready!

Name	Link
🔨 Latest commit	`f71bec1`
🔍 Latest deploy log	https://app.netlify.com/projects/staging-tansu/deploys/68de67d0e51dcf0008694348
😎 Deploy Preview	https://deploy-preview-276--staging-tansu.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 62 Accessibility: 89 Best Practices: 83 SEO: 92 PWA: 80 View the detailed breakdown and full score reports

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

- Resolved conflict in Navbar.astro to include NetworkPicker - Updated with latest responsive modal and other improvements from main

tupui

Some review

dapp/src/utils/networks.ts

tupui · 2025-09-30T23:23:09Z

dapp/astro.config.mjs

Seems unrelated no?

network-picker-pr.md

dapp/tsconfig.json

dapp/src/service/TxService.ts

tupui

Starting to look good. A couple of things.

The buttons are now joined which should not be the case.

The background should be with a blur as we have elsewhere when a modal opens.

I tried to do an operation with a xBull wallet on testnet and got this.

tupui · 2025-10-01T16:11:28Z

dapp/src/utils/networks.ts

+export function getNetworkByName(network: NetworkName) {
+  return networks[network];
+}
+
+export function getNetworkConfig() {
+  return networks[getCurrentNetwork()];
+}
+
+export function getNetwork(network: NetworkName) {
+  return networks[network];
+}


We don't need 3 functions doing the same thing.

tupui · 2025-10-01T16:16:35Z

dapp/src/contracts/soroban_domain_sdk.ts

+  const config = getNetworkConfig();
+  const defaultFee = "100";
+  const defaultTimeout = 30;
+  const simulationAccount = "GCMFQP44AR32S7IRIUKNOEJW5PNWOCLRHLQWSHUCSV4QZOMUXZOVA7Q2"; // From tansu.toml


Why changing from import.meta.env.PUBLIC_TANSU_OWNER_ID? We need this address. This is helpful for fees, etc.

tupui · 2025-10-02T15:07:43Z

dapp/src/utils/networks.ts

+    tansu_contract: import.meta.env.PUBLIC_TANSU_CONTRACT_ID,
+    domain_contract: import.meta.env.PUBLIC_SOROBAN_DOMAIN_CONTRACT_ID,


We need to make new env variables for these otherwise that does not make sense. Contracts have diff addresses on mainnet and testnet.

tupui · 2025-10-02T15:10:38Z

dapp/src/components/stellar-wallets-kit.ts

+  return createWalletKit();
+}
+
+export const kit = getKit();


Is this really dynamic then?

dapp/src/components/ConnectWallet.astro

tupui

I made another pass. Please answer the conversations as well. Let me close the threads myself.

tupui · 2025-11-30T18:03:57Z

Hey @davedumto do you want to continue?

davedumto · 2025-12-01T08:13:04Z

Hi there, I could but is it paid now?

…

On Sun, Nov 30, 2025 at 7:04 PM Pamphile Roy ***@***.***> wrote: *tupui* left a comment (tupui/soroban-versioning#276) <#276 (comment)> Hey @davedumto <https://github.com/davedumto> do you want to continue? — Reply to this email directly, view it on GitHub <#276 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A25EILX4OTMDG7F7QULG66T37MWSHAVCNFSM6AAAAACH6JK246VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTKOJSHE4DEMBXGI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

feat: implemented runtime network switching

b70b5dc

Merge main into network-picker branch

0139756

- Resolved conflict in Navbar.astro to include NetworkPicker - Updated with latest responsive modal and other improvements from main

tupui reviewed Sep 30, 2025

View reviewed changes

chore: replicated the stellar stratum implementation as requested

b341969

tupui requested changes Oct 1, 2025

View reviewed changes

chore: fixed review comments and formated the code

f71bec1

tupui reviewed Oct 2, 2025

View reviewed changes

dapp/src/components/stellar-wallets-kit.ts

return createWalletKit();

}

export const kit = getKit();

Copy link

Owner

tupui Oct 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this really dynamic then?

tupui reviewed Oct 2, 2025

View reviewed changes

dapp/src/components/ConnectWallet.astro Show resolved Hide resolved

tupui requested changes Oct 2, 2025

View reviewed changes

		tansu_contract: import.meta.env.PUBLIC_TANSU_CONTRACT_ID,
		domain_contract: import.meta.env.PUBLIC_SOROBAN_DOMAIN_CONTRACT_ID,

feat: implemented runtime network switching #276

Are you sure you want to change the base?

feat: implemented runtime network switching #276

Uh oh!

Conversation

davedumto commented Sep 30, 2025

Add Network Picker for Unified Deployment

Problem

Solution

🎯 Key Changes

🔧 Technical Implementation

🎨 UI/UX Features

✅ Benefits

🧪 Testing

Uh oh!

netlify bot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for tansu canceled.

Uh oh!

netlify bot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for staging-tansu ready!

Uh oh!

tupui left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tupui Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tupui left a comment

Choose a reason for hiding this comment

Uh oh!

tupui Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

tupui Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

tupui Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

tupui Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tupui left a comment

Choose a reason for hiding this comment

Uh oh!

tupui commented Nov 30, 2025

Uh oh!

davedumto commented Dec 1, 2025 via email

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify bot commented Sep 30, 2025 •

edited

Loading

netlify bot commented Sep 30, 2025 •

edited

Loading