{settpay-sdk}

SettPay Plugin SDK (SP-SDK)

Flutter SDK for building SettPay Plugins (SPs). SDK for integrating blockchain network as a plugin.

Building a settpay_plugin dart package.

1. Create your plugin repo

create a dart package

flutter create --template=package sp_polkadot
cd sp_polkadot

add dependencies in pubspec.yaml

dependencies:
  settpay_sdk: ^1.0.0

and install the dependencies.

flutter pub get

2. Build your polkadot-js wrapper

The App use a polkadot-js/api instance running in a hidden webView to connect to remote node.

Example:

3. Implement your plugin class

Modify the plugin entry file(eg. sp_polkadot.dart), create a PluginFoo class extending SettPayPlugin:

class PluginPolkadot extends SettPayPlugin {
  /// define your own plugin
}

3.1. override SettPayPlugin.basic

  @override
  final basic = PluginBasicData(
    name: 'polkadot',
    ss58: 0,
    primaryColor: Colors.deepPurple,
    gradientColor: Colors.blue,
    // The `bg.png` will be displayed as texture on a block with theme color,
    // so it should have a transparent or dark background color.
    backgroundImage: AssetImage('packages/sp_polkadot/assets/images/bg.png'),
    icon:
        Image.asset('packages/sp_polkadot/assets/images/logo.png'),
    // The `logo_gray.png` should have a gray color `#9e9e9e`.
    iconDisabled: Image.asset(
        'packages/sp_polkadot/assets/images/logo_gray.png'),
    isTestNet: false,
  );

3.2. override SettPayPlugin.tokenIcons

Define the icon widgets so the SettPay App can display tokens of your para-chain with token icons.

  @override
  final Map<String, Widget> tokenIcons = {
    'KSM': Image.asset(
        'packages/sp_polkadot/assets/images/tokens/KSM.png'),
    'DOT': Image.asset(
        'packages/sp_polkadot/assets/images/tokens/DOT.png'),
  };

3.3. override SettPayPlugin.nodeList

const node_list = [
  {
    'name': 'Kusama (Polkadot Canary, hosted by Parity)',
    'ss58': 2,
    'endpoint': 'wss://kusama-rpc.polkadot.io',
  },
];
  @override
  List<NetworkParams> get nodeList {
    return node_list.map((e) => NetworkParams.fromJson(e)).toList();
  }

3.4. override SettPayPlugin.getNavItems(BuildContext, Keyring)

Define your custom navigation-item in BottomNavigationBar of SettPay App. The HomeNavItem.content is the page content widget displayed while your navItem was selected.

  @override
  List<HomeNavItem> getNavItems(BuildContext context, Keyring keyring) {
    return [
      HomeNavItem(
        text: 'Polkadot',
        icon: SvgPicture.asset(
          'packages/sp_polkadot/assets/images/logo.svg',
          color: Theme.of(context).disabledColor,
        ),
        iconActive: SvgPicture.asset(
            'packages/sp_polkadot/assets/images/logo.svg'),
        content: PolkadotEntry(this, keyring),
      )
    ];
  }

3.5. override SettPayPlugin.getRoutes(Keyring)

Define navigation route for your plugin pages.

  @override
  Map<String, WidgetBuilder> getRoutes(Keyring keyring) {
    return {
      TxConfirmPage.route: (_) =>
          TxConfirmPage(this, keyring, _service.getPassword),
      CurrencySelectPage.route: (_) => CurrencySelectPage(this),
      AccountQrCodePage.route: (_) => AccountQrCodePage(this, keyring),

      TokenDetailPage.route: (_) => TokenDetailPage(this, keyring),
      TransferPage.route: (_) => TransferPage(this, keyring),

      // other pages
      // ...
    };
  }

3.6. override SettPayPlugin.loadJSCode() method

Load the polkadot-js/api wrapper you built in step 2.

  @override
  Future<String> loadJSCode() => rootBundle.loadString(
      'packages/sp_polkadot/lib/js_service_polkadot/dist/main.js');

3.7. override plugin life-circle methods

  • onWillStart(), you may want to prepare your plugin state data here.
  • onStarted(), remote node connected, you may fetch data from network.
  • onAccountChanged(), user just changed account, you may clear cache of the prev account and query data for new account.

// TODO: Add Example (Examples): // - sp_polkadot

4. Fetch data and build pages

We use https://pub.dev/packages/mobx as the App state management tool. So the directories in a plugin looks like this:

__ lib
    |__ pages (the UI)
    |__ store (the MobX store)
    |__ service (the Actions fired by UI to mutate the store)
    |__ ...

To query data through SettPayPlugin.sdk.api:

(settpay/sp_polkadot/lib/service/gov.dart)

  Future<List> queryReferendums() async {
    final data = await api.gov.queryReferendums(keyring.current.address);
    store.gov.setReferendums(data);
    return data;
  }

To query data by calling JS directly:

(settpay/sp_polkadot/lib/service/gov.dart)

  Future<void> updateBestNumber() async {
    final int bestNumber = await api.service.webView
        .evalJavascript('api.derive.chain.bestNumber()');
    store.gov.setBestNumber(bestNumber);
  }

While we set data to MobX store, the MobX Observer Flutter Widget will rebuild with new data.

5. Run your pages in example/ app

You may want to run an example app in dev while building your plugin pages.

// TODO: Add Example (Examples): // - sp_polkadot

Updating Submodule

git submodule update --remote updates the submodules from remote origin.

Libraries

account
accountBondedInfo
api
apiAccount
apiGov
apiKeyring
apiRecovery
apiSetting
apiStaking
apiTx
apiUOS
apiWalletConnect
balanceData
balances
councilInfoData
genExternalLinksParams
gov
homeNavItem
i18n
index
index
index
jaguar_flutter_asset
keyPairData
keyring
keyring
localStorage
localStorage
networkParams
networkStateData
ownStashInfo
pairingData
payloadData
proposalInfoData
recovery
recoveryInfo
referendumInfoData
setting
settings
settpay_sdk
signExtrinsicParam
staking
subscan
treasuryOverviewData
treasuryTipData
tx
txData
txInfoData
uos
verifyResult
walletConnect
webViewRunner
webviewWithExtension