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

npm@9.8.0

[linear]

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?