Issue with multi chain config for my use case

[Mouneeswar-Medepally]

Link to minimal reproducible example

n/a

Summary

Hi Team,

I’m unable to create two separate Web3 modals in the same application for different networks, such as Ethereum and Solana.

Could you please assist with this?

Thanks

List of related npm package versions

"@reown/appkit": "^1.5.3",
"@reown/appkit-adapter-solana": "^1.5.3",
"@reown/appkit-adapter-wagmi": "^1.5.3",

Node.js Version

v20.5.1

Package Manager

[email protected]

[linear[bot]]

APKT-1704 Issue with Creating Multiple Web3 Modals

[rtomas]

Hi @Mouneeswar-Medepally
please share a Minimal reproducible example of your issue

[Mouneeswar-Medepally]

Hi @rtomas,
I’ve provided the details below. Please let me know if you need any additional information to debug this issue.
When I import both these below configuration files, only one modal is being created with a single configuration.

My Use Case:

• When the network is Solana, the application should use the Solana Config.
• When the network is Ethereum or Polygon, it should use the Wagmi Config.

Currently, this behavior is not happening. Can you help me resolve this issue?

Solana config:
`import { createAppKit } from '@reown/appkit/react';
import { SolanaAdapter } from '@reown/appkit-adapter-solana/react';
import { solana, solanaTestnet, solanaDevnet } from '@reown/appkit/networks';
import { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets';

export const solanaWeb3JsAdapter = new SolanaAdapter({
wallets: [new PhantomWalletAdapter(), new SolflareWalletAdapter()],
});

const projectId = import.meta.env.VITE_WEB3_WALLET_ID;

export const solanaNetworks = [solana, solanaTestnet, solanaDevnet];

const metadata = {
name: 'AppKit',
description: 'AppKit Solana Example',
url: 'https://example.com',
icons: ['https://avatars.githubusercontent.com/u/179229932'],
};

createAppKit({
adapters: [solanaWeb3JsAdapter],
networks: [solana, solanaTestnet, solanaDevnet],
metadata,
projectId,
features: {
analytics: false,
socials: [],
email: false,
},
themeMode: 'dark',
themeVariables: {
'--w3m-z-index': 1999,
},
});`

Wagmi config:

`import { createAppKit } from '@reown/appkit/react';
import { mainnet, polygon } from '@reown/appkit/networks';
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi';

const projectId = import.meta.env.VITE_WEB3_WALLET_ID;

const metadata = {
name: 'Multi-chain Web3 Modals',
description: 'Multi-chain Web3 Modals',
url: import.meta.env.VITE_PUBLIC_URL,
icons: ['icon_link'],
};

export const wagmiNetworks = [mainnet, polygon];

export const wagmiAdapter = new WagmiAdapter({
networks: wagmiNetworks,
projectId,
ssr: true,
});

createAppKit({
adapters: [wagmiAdapter],
networks: wagmiNetworks,
projectId,
metadata,
features: {
analytics: false,
socials: [],
email: false,
},
themeMode: 'dark',
themeVariables: {
'--w3m-z-index': 1999,
},
});`

[rtomas]

hi @Mouneeswar-Medepally

I don't think that your way is possible. Can I know what are you building ?

Is this example suitable for you https://github.com/reown-com/appkit-web-examples/tree/main/react/react-multichain ?
demo: https://appkit-web-examples-react-multichain.vercel.app/

[Mouneeswar-Medepally]

hi @rtomas ,

In the example above, both network wallets are displayed at the same time. However, I want to load them separately. For instance, when you configure Solana with Reown, it only shows wallets supported by Solana. I want to do the same for Ethereum, so each network displays only its related wallets.

I’m working on a proof-of-ownership feature where users need to prove ownership of their address. If a user selects the Ethereum network, I want to show only Ethereum-compatible wallets—not both Solana and Ethereum.

To achieve this, I used createAppKit twice to create modals with different configurations for Ethereum and Solana. However, only the first loaded modal configuration is being displayed right now.

Is there any way to load differently configured modals within the same app?

[arein]

I’m working on a proof-of-ownership feature where users need to prove ownership of their address. If a user selects the Ethereum network, I want to show only Ethereum-compatible wallets—not both Solana and Ethereum.

Does the user need to verify ownership of both a Solana and EVM wallet? Or do they click Ethereum first? Please explain better the desired experience so we can assess what the best solution would be

[Mouneeswar-Medepally]

@arein

There are 2 steps:

In the first step, the user will enter an address and choose a network.
In the second step, only wallets linked to the selected network need to be loaded

So, If the user selects Solana, the appkit should load only Solana-supported wallets.
If the user selects Ethereum, the appkit should load only EVM-supported wallets.

[arein]

Why would the user "enter an address"?

[Mouneeswar-Medepally]

@arein

We are maintaining address book of users
if it's his self account, he will sign the message to prove ownership

[Mouneeswar-Medepally]

Hi,
Could you please provide an update on the progress of this feature request?

Thank you!

[arein]

@Mouneeswar-Medepally we've received a few feature requests for this - let me circle back after catching up internally

[liuyun3640]

let me circle back after catching up internally
I have the same feature, after init AppKit to update its adapters and network

[Hicbik]

I also need this feature

[Mouneeswar-Medepally]

Hello, are there any plans to release this feature?

[enesozturk]

Hey all, we've introduced functionalities to add/remove chain adapters and add/remove networks programmatically to AppKit as we needed them in demo.reown.com. So these are not official API yet as they are not included in the docs, but you can do a conditional things or dynamically update networks as we do in the Demo

See example implementation here : https://github.com/reown-com/appkit/blob/main/apps/builder/providers/appkit-context-provider.tsx#L87-L158

We are calling appKit.removeChain, appKit.addChain, appKit.addNetwork, and appKit.removeNetwork functions as they are doing things under.

Remind again this is not official API, so we don't guarantee that it'll be best suit for your needs. Also, it's up to your implementation to make it work great.

cc @Mouneeswar-Medepally @Hicbik , @liuyun3640 @rtomas @arein

[Mouneeswar-Medepally]

Thanks for sharing this! It's great to see the option to manage chain adapters and networks dynamically. We'll check how this works for our use case.

Thanks for letting us know this isn’t an official API yet. We'll keep that in mind while implementing it.