https://github.com/walletconnect/walletconnectmodalflutter
The WalletConnectModal for WalletConnect built using Flutter.
https://github.com/walletconnect/walletconnectmodalflutter
dart flutter walletconnectv2
Last synced: 26 days ago
JSON representation
The WalletConnectModal for WalletConnect built using Flutter.
- Host: GitHub
- URL: https://github.com/walletconnect/walletconnectmodalflutter
- Owner: WalletConnect
- License: apache-2.0
- Created: 2023-06-27T16:38:57.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-08-07T15:47:12.000Z (10 months ago)
- Last Synced: 2025-05-09T00:08:28.230Z (26 days ago)
- Topics: dart, flutter, walletconnectv2
- Language: Dart
- Homepage: https://pub.dev/packages/walletconnect_modal_flutter
- Size: 846 KB
- Stars: 32
- Watchers: 12
- Forks: 19
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
```dart
// 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'),
),
);
```
The second is the WalletConnectModalService which is your primary class for opening, closing, disconnecting, etc.
```dart
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();
```
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.
```dart
WalletConnectModalConnect(
walletConnectModalService: _service,
),
```
### 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](https://walletconnect.com/explorer?type=wallet), just click on the wallet you want to copy the ID for.
Example 1: Exclude all wallets except MetaMask and Trust
```dart
WalletConnectModalService(
web3App: web3App,
recommendedWalletIds: {
'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96', // MetaMask
'4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0', // Trust
},
excludedWalletState: ExcludedWalletState.all, // Exclude all wallets except the two above
);
```
Example 2: Recommend (Sort to the top) MetaMask and Trust
```dart
WalletConnectModalService(
web3App: web3App,
recommendedWalletIds: {
'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96', // MetaMask
'4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0', // Trust
},
);
```
Example 3: Exclude MetaMask and Trust
```dart
WalletConnectModalService(
web3App: web3App,
excludedWalletIds: {
'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96', // MetaMask
'4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0', // Trust
},
);
```
## 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:
```xml
LSApplicationQueriesSchemes
metamask
rainbow
trust
```
To handle deep linking to your app, you will also need to add the following to the plist file:
```xml
CFBundleURLTypes
CFBundleURLSchemes
flutterdapp
CFBundleURLName
com.walletconnect.flutterdapp
```
## 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:
```xml
...
```
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`