WalletConnect / Web3ModalFlutter

The Web3Modal for WalletConnect built using Flutter.
https://pub.dev/packages/web3modal_flutter
Apache License 2.0
27 stars 30 forks source link

Looking to display only three featured wallets #104

Closed jaca420 closed 1 month ago

jaca420 commented 1 month ago

Describe the bug A clear and concise description of what the bug is. Added the plugin to my flutter application, but out of all 300+ wallets, the one that I need (Phantom) is not there and I can't find anything in the documentation that will help. And I don't know how to create featured wallets with featuredWalletIds.

To Reproduce Steps to reproduce the behavior:

  1. Click on connect wallet
  2. Connect wallet modal is displayed
  3. Featured wallets are not displayed only default wallets that are there since the plugin was installed.

Expected behavior A clear and concise description of what you expected to happen.

Smartphone (please complete the following information):

Additional context So this is what I am doing

 void _initializeService() async {
    // See https://docs.walletconnect.com/web3modal/flutter/custom-chains
    // W3MChainPresets.chains.putIfAbsent(_celo.chainId, () => _celo);
    // W3MChainPresets.chains.putIfAbsent(_sepolia.chainId, () => _sepolia);

    _w3mService = W3MService(
      projectId: projectId,
      logLevel: LogLevel.error,
      // enableAnalytics: true,
      metadata:  PairingMetadata(
        name: projectName,
        description: 'Your DApp Description',
        url: projectUrl,
        icons: [
          'https://docs.walletconnect.com/assets/images/web3modalLogo-2cee77e07851ba0a710b56d03d4d09dd.png'
        ],
        redirect: const Redirect(
          native: 'web3modalflutter://',
          universal: 'https://web3modal.com',
        ),
      ),
      // excludedWalletIds: {
      //   'fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa', // Coinbase Wallet
      // },
      // includedWalletIds: {
      //   'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96', // Metamask
      //   '1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369', // Rainbow
      //   'fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa', // Coinbase Wallet
      //   'be49f0a78d6ea1beed3804c3a6b62ea71f568d58d9df8097f3d61c7c9baf273d', // Uniswap
      // },
      featuredWalletIds: {
        'a797aa35c0fadbfc1a53e7f675162ed5226968b44a19ee3d24385c64d1d3c393', // Phantom
        'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96', // Metamask
        '4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0', // Trust Wallet
      },
    );

    _w3mService.addListener(_serviceListener);
    _w3mService.onModalConnect.subscribe(_onModalConnect);
    _w3mService.onModalDisconnect.subscribe(_onModalDisconnect);

    await _w3mService.init();
  }

And the AndroidManifest looks like this:

<queries>

        <package android:name="io.metamask"/>
        <package android:name="io.zerion.android"/>
        <package android:name="im.token.app"/>
        <package android:name="im.argent.contractwalletclient"/>
        <package android:name="com.spot.spot"/>
        <package android:name="fi.steakwallet.app"/>
        <package android:name="com.defi.wallet"/>
        <package android:name="vip.mytokenpocket"/>
        <package android:name="com.frontierwallet"/>
        <package android:name="piuk.blockchain.android"/>
        <package android:name="io.safepal.wallet"/>
        <package android:name="com.zengo.wallet"/>
        ...

Right now I get Trust, Metamask, Safe and Rainbow as well as All wallets.

What I would like to have is Metamask, Trust and Phantom. Shouldn't the featuredWalletIds force these three wallets to be displayed? I would also like to have the Solana network available in the network connections.

quetool commented 1 month ago

Hello @jaca420, you don't see Phantom Wallet because Phantom Wallet does not support our protocol, therefor it can't be used with WalletConnect.

As per featuredWalletIds is pretty simply, the explanation is in the docs but basically you should

  1. Go to https://explorer.walletconnect.com and search the wallet you would want to feature
  2. Copy it's id by clicking on the little copy button
  3. Add the wallet id to the featuredWalletIds set so the wallet can be prioritized in the list (or add the wallet id to the includedWalletIds if you want to show only this wallet or add the wallet id to the excludedWalletIds if you want to exclude this wallet)

Note: You'll see Phantom Wallet listed in the explorer because it can be used on web platforms as injected wallet but that is not the case on native mobile platforms.

jaca420 commented 1 month ago

Hello @quetool and thank you for your reply!

I understand, so maybe I'll use it in a React application that will allow users to connect their wallets. All I'm interested in is getting users to connect their wallets and save their address. No transaction or anything like that.

I installed the package in a React app, and was able to connect my Phantom wallet from my browser, but only on Ethereum, I don't know how to add Solana to the chains


// 5. Create a Web3Modal instance
createWeb3Modal({
  ethersConfig,
  chains: [mainnet],
  projectId,
  enableAnalytics: true, // Optional - defaults to your Cloud configuration
});

How do I set up Solana? The current setup only has Ethereum.

// 2. Set chains
const mainnet = {
  chainId: 1,
  name: "Ethereum",
  currency: "ETH",
  explorerUrl: "https://etherscan.io",
  rpcUrl: "https://cloudflare-eth.com",
};