walletconnect_qrcode_modal_dart 0.1.2

Provides UI for DApps to easily connect to a supported Wallet apps through open WalletConnect protocol.

Wallet Connect

WalletConnect is an open-source protocol for connecting decentralised applications to mobile wallets with QR code scanning or deep linking. A user can interact securely with any Dapp from their mobile phone, making WalletConnect wallets a safer choice compared to desktop or browser extension wallets.

Introduction

This package provides UX for dApp to seamlessly connect to a wallet app. On iOS list of wallet apps is provided for the user to select from, on Android there is one click connect. QR code option is also provided.

The package uses walletconnect-dart package for underlying WalletConnect communication.

Usage

Once installed, you can simply connect your application to a wallet.

Initiate connection - show QR code modal

// Create a connector
final qrCodeModal = WalletConnectQrCodeModal(
   connector: WalletConnect(
     bridge: 'https://bridge.walletconnect.org',
     clientMeta: const PeerMeta( // <-- Meta data of your app appearing in the wallet when connecting
       name: 'QRCodeModalExampleApp',
       description: 'WalletConnect Developer App',
       url: 'https://walletconnect.org',
       icons: [
         'https://gblobscdn.gitbook.com/spaces%2F-LJJeCjcLrr53DcT1Ml7%2Favatar.png?alt=media'
       ],
     ),
   ),
 );

// Subscribe to events
qrCodeModal.registerListeners(
  onConnect: (session) => print('Connected: $session'),
  onSessionUpdate: (response) => print('Session updated: $response'),
  onDisconnect: () => print('Disconnected'),
);

// Create QR code modal and connect to a wallet, connector returns WalletConnect
// session which can be saved and restored.
final session = await qrCodeModal.connect(context, chainId: 2)
    // Errors can also be caught from connector, eg. session cancelled
    .catchError((error) {
        // Handle error here
        debugPrint(error);
        return null;
    });

Send transaction

Example of Ethereum transaction:

final provider = EthereumWalletConnectProvider(connector);
final ethereum = Web3Client('https://ropsten.infura.io/', Client());
final sender = EthereumAddress.fromHex(session.accounts[0]);

final transaction = Transaction(
  to: sender,
  from: sender,
  gasPrice: EtherAmount.inWei(BigInt.one),
  maxGas: 100000,
  value: EtherAmount.fromUnitAndValue(EtherUnit.finney, 1),
);

final credentials = WalletConnectEthereumCredentials(provider: provider);

// Send the transaction
final txBytes = await ethereum.sendTransaction(credentials, transaction);

Kill session

await qrCodeModal.killSession();

Customizations

The library UI is completely customizable through its modalBuilder builder. It lets you either customize existing UI elements or replace them with your own.

Each builder needs to return a Widget to be used by the package. For convenience defaultWidget is always provided in the builder to either be customised using its copyWith method or replaced completely with another widget.

For example, if you want to change the card color of the modal:

WalletConnectQrCodeModal(
  connector: WalletConnect(
    ...
  ),
  modalBuilder: (context, uri, callback, defaultModalWidget) {
    return defaultModalWidget.copyWith(
      cardColor: Colors.pink,
    );
  });

You could also return your custom widget in the builder rather than the defaultModalWidget if the level of customization is not sufficient. All the necessary data to build your own widget are either passed in through the builder arguments or can be obtained from the default...Widget.

For example, the main modalBuilder passes through the uri which is the WalletConnect URI and walletCallback which should be called when the Wallet is selected.

Various UI elements are accessible through different builders which allows you to mix and match which bits you want to customize or which to replace.

Builders

• modalBuilder - the main builder representing the whole modal, provides default ModalWidget

ModalWidget builders:

• walletSegmentThumbBuilder - represents the Wallet/Desktop segmented control thumb
• qrSegmentThumbBuilder - represents the QR Code segmented control thumb
• walletButtonBuilder - represents Android modal content (single button with 'Connect')
• walletListBuilder - represents iOS/Desktop modal content (list of wallets)
• qrCodeBuilder - represents QR Code content

ModalWalletListWidget builders:

• rowBuilder - represents a Wallet row in the Wallet list

Properties

List of customisable widgets:

• ModalWidget - represents the whole modal
• ModalSegmentThumbWidget - represents a segment in the main segmented control widget
• ModalWalletButtonWidget - represents the single button widget (for Android)
• ModalWalletListWidget - represents the list of wallets (for iOS and desktop)
• ModalQrCodeWidget - represents the QR code widget

Example

The aim of the example app is to demonstrate simple transaction using QR code modal. The connected wallet has to be configured for Ethereum (Ropsten) or Algorand test network with at least 0.001 tokens available (plus fee amount for the transaction). After connecting to the wallet the app would try to transfer 0.001 Eth/Algo from the wallet account to the same account (you should see some fee being deducted as well).

Changelog

Please see CHANGELOG for more information on what has changed recently.

Credits

• Tom Friml
• elliotsayes
• All Contributors

License

The MIT License (MIT). Please see License File for more information.