walletconnect_modal_flutter

Description:

walletconnect modal flutter

WalletConnect Modal Flutter #
WalletConnect Modal implementation in Flutter.
Setup #
To get the modal to work properly you need to create two objects.
The first is the WalletConnectModalTheme which is used to style the modal.
// Example of WalletConnectModalTheme
return WalletConnectModalTheme(
data: WalletConnectModalThemeData.darkMode,
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'WalletConnectModal Sign Example'),
),
);
copied to clipboard
The second is the WalletConnectModalService which is your primary class for opening, closing, disconnecting, etc.
WalletConnectModalService service = WalletConnectModalService(
projectId: projectId,
metadata: const PairingMetadata(
name: 'Flutter WalletConnect',
description: 'Flutter WalletConnectModal Sign Example',
url: 'https://walletconnect.com/',
icons: ['https://walletconnect.com/walletconnect-logo.png'],
redirect: Redirect(
native: 'flutterdapp://',
universal: 'https://www.walletconnect.com',
),
),
);
await service.init();
copied to clipboard
The service must be initialized before it can be used.
Now that those two things are setup in your application, you can call _service.open() to open the modal.
To make things easy, you can use the WalletConnectModalConnect widget to open the modal.
This is a button that chanages its state based on the modal and connection.
This widget requires the WalletConnectModalService to be passed in.
WalletConnectModalConnect(
walletConnectModalService: _service,
),
copied to clipboard
Excluding, Recommending, and Including Wallets #
You can pass a list of wallet IDs into the WalletConnectModalService to exclude, recommend, or include wallets.
All wallet IDs can be found on the explorer, just click on the wallet you want to copy the ID for.
Example 1: Exclude all wallets except MetaMask and Trust
WalletConnectModalService(
web3App: web3App,
recommendedWalletIds: {
'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96', // MetaMask
'4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0', // Trust
},
excludedWalletState: ExcludedWalletState.all, // Exclude all wallets except the two above
);
copied to clipboard
Example 2: Recommend (Sort to the top) MetaMask and Trust
WalletConnectModalService(
web3App: web3App,
recommendedWalletIds: {
'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96', // MetaMask
'4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0', // Trust
},
);
copied to clipboard
Example 3: Exclude MetaMask and Trust
WalletConnectModalService(
web3App: web3App,
excludedWalletIds: {
'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96', // MetaMask
'4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0', // Trust
},
);
copied to clipboard
Notes #
Swapping the required or optional namespaces will not do anything if your dApp has already connected.
For those changes to take effect, you must disconnect and reconnect.
iOS Setup #
For each app you would like to be able to deep link to, you must add that app's link into the ios/Runner/Info.plist file like so:
<key>LSApplicationQueriesSchemes</key>
<array>
<string>metamask</string>
<string>rainbow</string>
<string>trust</string>
</array>
copied to clipboard
To handle deep linking to your app, you will also need to add the following to the plist file:
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>flutterdapp</string> <!-- Change "flutterdapp" to be your deep link -->
</array>
<key>CFBundleURLName</key>
<string>com.walletconnect.flutterdapp</string> <!-- Change this package name to be your package -->
</dict>
</array>
copied to clipboard
Android Setup #
On android 11+ you must specify that use can use the internet, along with the different schemes you would like to be able to deep link to in the android/app/src/main/AndroidManifest.xml file like so:
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Intent so you can deep link to wallets -->
<queries>
<intent>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="https" />
</intent>
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="metamask" />
</intent>
</queries>
<!-- Permission to access the internet -->
<uses-permission android:name="android.permission.INTERNET"/>
<!-- Update your activity to handle the deep linking from other apps -->
<activity
...>
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />

<!-- Accepts URIs that begin with "flutterdapp://”, change this to be your deep link -->
<data android:scheme="flutterdapp" />
</intent-filter>
</activity>
...
</manifest>
copied to clipboard
For some reason, multiple wallets have the metamask intent, and will launch metamask as a result.
This is a bug in the wallets, not this package.
Detailed Usage #
You can launch the currently connected wallet by calling service.launchCurrentWallet().
Commands #
flutter pub run build_runner build --delete-conflicting-outputs