Processing Steem signatures with WebView in Flutter

In the previous post, we covered both signing and broadcast processing in webview,
this time, we only handled the steem signing in the webview and implemented all the rest in flutter.

Create Comment Operation Transaction

Three additional values are required to create the transaction needed for the comment operation: ref_block_num, ref_block_prefix, and expiration. These values are obtained using the get_dynamic_global_properties and get_block_header APIs.

// getDynamicGlobalProperties from server
final properties = await steem.getDynamicGlobalProperties();

// getBlockHeader from server
final blockHeader = await steem.getBlockHeader(properties['last_irreversible_block_num']);

// tx values
final expiration = DateTime.parse(properties['time'] + 'Z').add(const Duration(minutes: 10));
final refBlockNum = (properties['last_irreversible_block_num'] - 1) & 0xFFFF;
final refBlockPrefix = ByteData.sublistView(Uint8List.fromList(hex.decode(blockHeader['previous']))).getUint32(4, Endian.little);

// transaction
final tx = {
  "ref_block_num": refBlockNum,
  "ref_block_prefix": refBlockPrefix,
  "expiration": expiration.toIso8601String().split('.')[0],
  "extensions": [],
  "operations": [
     [
        'comment',
        {
          "parent_author": parent_author,
          "parent_permlink": parent_permlink,
          "author": username,
          "permlink": permlink,
          "title": title,
          "body": body,
          "json_metadata": jsonEncode({
             "tags": tags,
             "app": app
          }),
        }
     ]
  ],
};

Sign Transaction

Implementing ecc signatures in Dart is one of the most challenging tasks, but it can be simplified by handling signatures in webviews.

// Signing tx using the steem.js SDK in webview
final signedTx = await webviewController.runJavaScriptReturningResult("steem.auth.signTransaction(${jsonEncode(tx)}, ['$postingKey'])");

Broadcasting a Signed Transaction

Simply send the JSON string value you received from the webview back to the Steem Node server.

// Broadcast the signed transaction
final result = await steem.broadcastTransactionSynchronous(jsonDecode(signedTx.toString()));

Conclusion:

In this article, we've seen how to use Flutter to handle Steem signing via webview. We've covered how to get the values needed for signing and how to implement signing in Dart. Web views can make complex signing processes simple, and by utilizing Flutter and web views together, you can develop efficient apps.