Flutter

To interact with Keeper Wallet in your iOS or Android app, complete the following steps:

• Step 1. Register your project in WalletConnect Cloud

• Step 2. Install WalletConnect

• Step 3. Initialize WalletConnect client

• Step 4. Get a pairing URI for Keeper Wallet

• Step 5. Connect Keeper Wallet

• Step 6. Sign a transaction/order/message

For more information on using Flutter implementation of WalletConnect, see their docs.

Step 1. Register your project in WalletConnect Cloud

1. Go to WalletConnect Cloud and sign in or sign up.

2. Click + New project.

3. Give your project a name and click Create.

4. On the project page, obtain a Project ID.

Step 2. Install WalletConnect

pubspec.yaml:

walletconnect_flutter_v2: ^1.2.3

Step 3. Initialize WalletConnect client

Describe your app and define its appearance in Keeper Wallet when a user is prompted to connect or sign a transaction/order/message.

static const projectId = 'YOUR_PROJECT_ID';

_wcClient = await Web3App.createInstance(
  relayUrl: 'wss://relay.walletconnect.com',
  projectId: projectId,
  metadata: const PairingMetadata(
    name: 'YOUR_APP_NAME',
    description: 'YOUR_APP_DESC',
    url: 'YOUR_WEBSITE',
    icons: ["YOUR_IMAGE_URLS"],
  ),
);

Step 4. Get a pairing URI for Keeper Wallet

Send a request to WalletConnect to get a pairing URI for Keeper Wallet.

// Set the chain ID: 'W' for Mainnet or 'T' for Testnet
static const testChainId = 'waves:T';
static const mainChainId = 'waves:W';

final resp = await _wcClient?.connect(requiredNamespaces: {
  namespace: const RequiredNamespace(
    chains: [testChainId],
    methods: [
      'waves_signTransaction',
      'waves_signTransactionPackage',
      'waves_signOrder',
      'waves_signMessage',
      'waves_signTypedData',
    ],
    events: [],
  ),
});

final wcUrl = resp?.uri.toString();

Step 5. Connect Keeper Wallet

Here's how it works:

1. Your app calls Keeper, specifying the callback URL in the request.

2. The Keeper Wallet app opens and prompts the user to connect.

3. Once the user confirms or cancels the connection, your app receives a callback.

Deep Links are used to interact with Keeper Wallet. You can use url_launcher plugin to call Keeper. For the callback, the Deep Link must be configured in your app.

static const callback = 'YOUR_LINK_OR_SCHEME';

final parameters = <String>[];
parameters.add('wcurl=${Uri.encodeComponent(wcUrl)}');
parameters.add('callback=$callback');

final query = parameters.join('&');
final url = Uri.parse('https://link.keeper-wallet.app/auth?$query');

//url_launcher
launchUrl(url, mode: LaunchMode.externalApplication);

The result of connecting comes to the listener:

_wcClient?.onSessionConnect.subscribe((SessionConnect? connect) {
  print('onSessionConnect: $connect');
  _topic = connect?.session.topic;
});

Step 6. Sign a transaction/order/message

Here is how it works:

1. Your app sends a signing request via WalletConnect.

2. Your app calls Keeper, specifying the callback URL in the request.

3. The Keeper Wallet app opens and prompts the user to sign the transaction, order, or custom message.

4. Once the user confirms or cancels the request, your app receives a callback.

Transaction

Example:

static const testChainId = 'waves:T';
static const mainChainId = 'waves:W';
static const Map<String, Object> invoke = { YOUR_TX_PARAMS };

_wcClient?.request(
  topic: _topic,
  chainId: testChainId,
  request: SessionRequestParams(
    method: 'waves_signTransaction',
    params: [invoke],
  ),
)
.then((value) => print('request result: $value'))
.onError((error, _) => print('request error: $error'));

Order

static const testChainId = 'waves:T';
static const mainChainId = 'waves:W';
static const Map<String, Object> order = { YOUR_ORDER_PARAMS };

_wcClient?.request(
  topic: _topic,
  chainId: testChainId,
  request: SessionRequestParams(
    method: 'waves_signOrder',
    params: [order],
  ),
)
.then((value) => print('request result: $value'))
.onError((error, _) => print('request error: $error'));

Custom message

static const testChainId = 'waves:T';
static const mainChainId = 'waves:W';
static const message = 'YOUR_MESSAGE';

_wcClient?.request(
  topic: _topic,
  chainId: testChainId,
  request: SessionRequestParams(
    method: 'waves_signMessage',
    params: [message],
  ),
)
.then((value) => print('request result: $value'))
.onError((error, _) => print('request error: $error'));

Call Keeper Wallet

Specify topic and callback in the request.

static const callback = 'YOUR_LINK_OR_SCHEME';

final parameters = <String>[];
parameters.add('topic=$_topic');
parameters.add('callback=$callback');

final query = parameters.join('&');
final url = Uri.parse('https://link.keeper-wallet.app/wakeup?$query');

//url_launcher
launchUrl(url, mode: LaunchMode.externalApplication);