Skip to main content

Usage

Import the package:​

import 'package:web3modal_flutter/web3modal_flutter.dart';

Create your W3MService which is your primary class for opening, closing, disconnecting, etc.

Be sure to update the project ID and metadata with your own.

Don't have a project ID?

Head over to WalletConnect Cloud and create a new project now!

Get startedcloud illustration

W3MService initialization​

In order to initialize a W3MService instance you must provide a projectId and a metadata.

final _w3mService = W3MService(
  projectId: '{YOUR_PROJECT_ID}',
  metadata: const PairingMetadata(
    name: 'Web3Modal Flutter Example',
    description: 'Web3Modal Flutter Example',
    url: 'https://www.walletconnect.com/',
    icons: ['https://walletconnect.com/walletconnect-logo.png'],
    redirect: Redirect(
      native: 'flutterdapp://',
      universal: 'https://www.walletconnect.com',
    ),
  ),
);

// Register callbacks on the Web3App you'd like to use. See `Events` section.

await _w3mServices.init();

The metadata object should contain your dApp's name, description, url and icon. Redirect object is optional but highly recommended. See next session why.

Redirect to your dApp​

The service's metadata object contains a redirect option that serves to the purpose of redirecting back to your dapp from the connected wallet. Please see mobileLinking docs for a bit more of context.

redirect: Redirect(
  native: 'flutterdapp://', // your own custom scheme for deep linking
  universal: 'https://www.walletconnect.com', // your own universal link for deep linking
),

But in order for the redirect mechanism to work you would also need to add the following in the iOS and Android native sides:

  1. Locate your Info.plist file under your_project/ios/Runner/ folder.
  2. Locate the <key>CFBundleURLTypes</key> section.
  3. Add your schema as <dict> entry within the <array> object as follows.
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>com.example.yourBundleId</string> <!-- Bundle ID of your app -->
    <key>CFBundleURLSchemes</key>
    <array>
      <!-- your own custom scheme. Be mind of removing :// for this step -->
      <string>flutterdapp</string>
    </array>
  </dict>
</array>

Connection Buttons​

You can use the W3MConnectWalletButton, which will open the Web3Modal with no prior network selected

W3MConnectWalletButton(service: _w3mService)

Or you can use W3MNetworkSelectButton which will first show a network selection prompt:

W3MNetworkSelectButton(service: _w3mService)

Once session is approved you can use W3MAccountButton widget to show basic account data and to open Account data modal:

W3MAccountButton(service: _w3mService)

Network selection or direct wallet connection​

You can choose either to enable Connect Wallet button only after selecting a network (default behaviour) or to not display a Select Network button and directly navigate users to connect a wallet.

If you decide to take first approach of showing a W3MNetworkSelectButton and W3MConnectWalletButton (which is enabled only after selecting a Network) you simple have to add these two buttons on your code:

For instance:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    W3MNetworkSelectButton(service: _w3mService),
    W3MConnectWalletButton(service: _w3mService),
  ],
),

and W3MConnectWalletButton will handle it's state automatically.

But, as mentioned before, you can decide to just show the Connect Wallet button alone, in this case you would need to set it's state to ConnectButtonState.none like so:

W3MConnectWalletButton(
  service: _w3mService,
  state: ConnectButtonState.none,
),

this way W3MConnectWalletButton will be always enabled.