Upgrade from Web3Modal to Reown AppKit for Flutter

This document outlines the steps to migrate from the old web3modal_flutter package to the new reown_appkit packages in your Flutter project.

Step 1. Replace the corresponding dependency

Remove web3modal_flutter dependency from pubspec.yaml and add reown_appkit:

web3modal_flutter: ^X.Y.Z
reown_appkit: ^1.0.0

Run flutter clean && flutter pub get after replacing the packages

Then replace the imports...

import 'package:web3modal_flutter/web3modal_flutter.dart';
import 'package:reown_appkit/reown_appkit.dart';

Step 2. Update your AppKit's theme related classes

Old	New
Web3ModalThemeData	ReownAppKitModalThemeData
Web3ModalTheme	ReownAppKitModalTheme
Web3ModalColors	ReownAppKitModalColors
Web3ModalRadiuses	ReownAppKitModalRadiuses

Step 3. Update the main service class

Old	New	Notes
W3MService	ReownAppKitModal	`context` parameter is now required

See more about how to initialize on Initialization section

Step 4. Update main buttons

Old	New	Notes
W3MNetworkSelectButton	AppKitModalNetworkSelectButton	`service` parameter is now `appKit` `context` parameter is not required anymore but still available
W3MConnectWalletButton	AppKitModalConnectButton	`service` parameter is now `appKit` `context` parameter is not required anymore but still available
W3MAccountButton	AppKitModalAccountButton	`service` parameter is now `appKit` `context` parameter is not required anymore but still available

Step 5. Networks presets

The way we used to manipulate the network presets has changed

Old	New	Notes
W3MChainPresets	ReownAppKitModalNetworks
W3MChainInfo	ReownAppKitModalNetworkInfo	`chainName` parameter is now `name` `tokenName` parameter is now `currency` `blockExplorer` parameter is now `explorerUrl` `namespace` parameter is not needed anymore

W3MChainPresets.chains.addAll(W3MChainPresets.extraChains);
W3MChainPresets.chains.addAll(W3MChainPresets.testChains);
final testNetworks = ReownAppKitModalNetworks.test['eip155'] ?? [];
final extraNetworks = ReownAppKitModalNetworks.extra['eip155'] ?? [];
ReownAppKitModalNetworks.addNetworks('eip155', testNetworks);
ReownAppKitModalNetworks.addNetworks('eip155', extraNetworks);

See more on Custom networks section

Step 4. Update your Components usage

Update your web3app instance within the service:

If you use to subscribe to web3App events you should now change it to appKit. Example:

_w3mService.web3App!.getActiveSessions();
_appKitModal.appKit!.getActiveSessions();

Same for anything related to _w3mService.web3App!...

Step 5. Update any exception type

Old	New
W3MServiceException	ReownAppKitModalException

Final notes

• Ensure that you have updated all relevant configurations and imports in your project to reflect the changes from Web3Modal to AppKit.
• Test your application thoroughly to ensure that the migration has been successful and that all functionality is working as expected.
• Check our AppKit example for Flutter to compare with your implementation in case you are having issues