Flutter

With Web3Modal Flutter, you can easily let people interact with multiple EVM compatible wallets and blockchains.

Let's get started with the installation and configuration!

Installation

1. • Add web3modal_flutter as dependency in your /pubspec.yaml and run flutter pub get (check out the latest version)
   • Or simply run flutter pub add web3modal_flutter
2. • Locate your /ios/Podfile file and add the following as the first line:

platform :ios, '13.0'

3. • Run $ pod install inside /ios folder.
4. • You should now be able to run your app with flutter run --dart-define=PROJECT_ID={your_project_id}

Enable Installed Wallet Detection

To enable Web3Modal to detect wallets installed on the device, you need to make specific changes to the native sides of the project.

iOS

1. Open your Info.plist file.
2. Locate the <key>LSApplicationQueriesSchemes</key> section.
3. Add the desired wallet schemes as string entries within the <array>. These schemes represent the wallets you want to detect.
4. Refer to our Info.plist example file for a detailed illustration.

Example:

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>metamask</string>
  <string>trust</string>
  <string>safe</string>
  <string>rainbow</string>
  <!-- Add other wallet schemes names here -->
</array>

Android

1. Open your AndroidManifest.xml file.
2. Add your <queries>...</queries> schemes outside of <application /> scope.
3. Refer to Android Specs for more information.

Example:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <queries>
        <package android:name="io.metamask"/>
        <package android:name="com.wallet.crypto.trustapp"/>
        <package android:name="io.gnosis.safe"/>
        <package android:name="me.rainbow"/>
        <!-- Add other wallet schemes names here -->
    </queries>

    <application>
        ...
    </application>
</manifest>

Enable Coinbase Wallet

VERSION DEPENDENCY

Coinbase Wallet is available from Web3Modal version 3.1.0 and higher

Since Coinbase Wallet uses it's own SDK there are a few extra but simply steps to do if you are planning to include and support it

IMPORTANT

There is currently a bug in Coinbase's MobileWalletProtocol which fix is still under review in the following PR https://github.com/MobileWalletProtocol/wallet-mobile-sdk/pull/327 so, until this PR is merged (or the bug is fixed in any way) and a new version of their SDK is published, you will need to override coinbase_wallet_sdk in your pubspec.yaml as follows if you want to support their wallet:

dependency_overrides:
  coinbase_wallet_sdk:
    git:
      url: https://github.com/WalletConnect/wallet-mobile-sdk.git
      path: flutter
      ref: 9194f04dbaf41c12b8121f0a5f146cc7faf6b847

Alternatively, you can disable Coinbase Wallet support as explained in the Disable Coinbase Wallet section.

iOS

1. Open your Info.plist file.
2. Locate the <key>LSApplicationQueriesSchemes</key> section.
3. Include <string>cbwallet</string> scheme as mentioned above in previous section

Example:

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>cbwallet</string>
  <!-- Any other scheme previously added -->
</array>

4. Make sure pods are installed, otherwise run pod install inside your /ios folder.
5. Open your /ios/Runner.xcworkspace file with Xcode and add the following code in AppDelegate.swift file:

import CoinbaseWalletSDK

override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    if #available(iOS 13.0, *) {
      if (CoinbaseWalletSDK.isConfigured == true) {
        if (try? CoinbaseWalletSDK.shared.handleResponse(url)) == true {
            return true
        }
      }
    }

    return super.application(app, open: url, options: options)
}

override func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
    if #available(iOS 13.0, *) {
      if (CoinbaseWalletSDK.isConfigured == true) {
        if let url = userActivity.webpageURL,
            (try? CoinbaseWalletSDK.shared.handleResponse(url)) == true {
            return true
        }
      }
    }

    return super.application(application, continue: userActivity, restorationHandler: restorationHandler)
}

Checkout out the AppDelegate.swift file from our sample dapp for reference.

Android

1. Open your AndroidManifest.xml file.
2. Add <package android:name="org.toshi"/> scheme inside <queries>...</queries> as mentioned above in previous section

Example:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <queries>
        <package android:name="org.toshi"/>
        <!-- Any other scheme previously added -->
    </queries>

    <application>
        ...
    </application>
</manifest>

Disable Coinbase Wallet

Coinbase Wallet is enabled by default even if, in order to function properly, a few steps has to be done as described in the previous section. However, if you don't want to include/support Coinbase Wallet on your app you just need to pass Coinbase Wallet id fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa to excludedWalletIds options Array.