Usage

Import the package:

import 'package:reown_appkit/reown_appkit.dart';

Create your ReownAppKitModal() instance, 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 Reown Cloud and create a new project now!

Get started

Initialization

In order to initialize ReownAppKitModal() instance you must provide a projectId and a metadata.

final _appKitModal = ReownAppKitModal(
  context: context,
  projectId: '{YOUR_PROJECT_ID}',
  metadata: const PairingMetadata(
    name: 'Example App',
    description: 'Example app description',
    url: 'https://example.com/',
    icons: ['https://example.com/logo.png'],
    redirect: Redirect(
      native: 'exampleapp://',
      universal: 'https://reown.com/exampleapp',
    ),
  ),
);

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

await _appKitModal.init();

Alternatively, ReownAppKitModal() allows you to create an instance by passing a ReownAppKit() object as follows:

final appKit = ReownAppKit.createInstance(
  projectId: '{YOUR_PROJECT_ID}',
  metadata: const PairingMetadata(
    name: 'Example App',
    description: 'Example app description',
    url: 'https://example.com/',
    icons: ['https://example.com/logo.png'],
    redirect: Redirect(
      native: 'exampleapp://',
      universal: 'https://reown.com/exampleapp',
    ),
  ),
);

final _appKitModal = ReownAppKitModal(
  context: context,
  appKit: appKit,
);

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

await _appKitModal.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.

redirect: Redirect(
  // your own custom scheme for deep linking
  native: 'exampleapp://',
  // your own universal link for deep linking, required if you are going to use Link Mode
  universal: 'https://reown.com/exampleapp',
),

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

iOS

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>exampleapp</string>
    </array>
  </dict>
</array>

Android

1. Locate your AndroidManifest.xml file under your_project/android/app/src/main/ fodler.
2. Locate the <Activity .MainActivity inside <application /> scope.
3. Add the following intent

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- your own custom scheme. Be mind of removing :// for this step -->
    <data android:scheme="exampleapp" />
</intent-filter>

Connection Buttons

You can use the AppKitModalConnectButton, which will open the AppKit modal with no prior network selected

AppKitModalConnectButton(appKit: _appKitModal)

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

AppKitModalNetworkSelectButton(appKit: _appKitModal)

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

AppKitModalAccountButton(appKit: _appKitModal)

To connect to a wallet you can either use AppKitModalNetworkSelectButton, AppKitModalConnectButton. AppKitModalNetworkSelectButton will allow the user to pre-select a Network before connecting while AppKitModalConnectButton will directly show available wallets.

Once connected, AppKitModalConnectButton will serve as Disconnect button while AppKitModalAccountButton will show basic account data such as balance and address and will we used to open Account screen.

Quick example:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    AppKitModalNetworkSelectButton(appKit: _appKitModal),
    AppKitModalConnectButton(appKit: _appKitModal),
    Visibility(
      visible: _appKitModal.isConnected,
      child: AppKitModalAccountButton(appKit: _appKitModal),
    )
  ],
),

Custom Buttons

If you like you can also override AppKit's button style by using the custom: property as follows

AppKitModalConnectButton(
  appKit: _appKitModal,
  custom: ElevatedButton(
    onPressed: () {
      _appKitModal.openModalView();
    },
    child: const Text('CONNECT WALLET'),
  ),
),

openModalView method can accept a "startWidget" argument that you can leverage to open specifics screens of the modal:

 // Will open QR Code screen for connection.
 // Will work only if not yet connected.
_appKitModal.openModalView(ReownAppKitModalQRCodePage());

 // Will open Network Selection screen
_appKitModal.openModalView(ReownAppKitModalSelectNetworkPage());

// Will open All Wallets screen for selecting.
// Will work only if not yet connected.
_appKitModal.openModalView(ReownAppKitModalAllWalletsPage());