web3modal_flutter 1.2.1 web3modal_flutter: ^1.2.1 copied to clipboard
The Web3Modal for WalletConnect built using Flutter.
web3modal_flutter #
WalletConnect Web3Modal implementation in Flutter.
This package is still heavily in testing and is not ready for production use.
Expect large changes to the API and functionality.
Setup #
To get the modal to work properly you need to create two objects.
The first is the Web3ModalTheme
which is used to style the modal.
// Example of Web3ModalTheme
return Web3ModalTheme(
data: Web3ModalThemeData.darkMode,
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Web3Modal Sign Example'),
),
);
The second is the Web3ModalService which is your primary class for opening, closing, disconnecting, etc.
Web3ModalService service = Web3ModalService(
projectId: projectId,
metadata: const PairingMetadata(
name: 'Flutter WalletConnect',
description: 'Flutter Web3Modal Sign Example',
url: 'https://walletconnect.com/',
icons: ['https://walletconnect.com/walletconnect-logo.png'],
),
);
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 Web3ModalConnect widget to open the modal. This is a button that chanages its state based on the modal and connection. This widget requires the web3ModalService to be passed in.
Web3ModalConnect(
web3ModalService: _service,
),
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>
Android Setup #
On android 11+ you must specify 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">
<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>
...
</manifest>
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 #
dart run build_runner build --delete-conflicting-outputs