settpay_sdk

Description:

settpay sdk

{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
copied to clipboard
add dependencies in pubspec.yaml
dependencies:
settpay_sdk: ^1.0.0
copied to clipboard
and install the dependencies.
flutter pub get
copied to clipboard
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:

SettPay.JS: https://github.com/setheum-js/settpay.js

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