2023-12-28 SteemLife Development Journal: Implementing Steem Signing in Flutter Web

While Android can be distributed through the Google Play Store or, if that's not possible, as an APK file, there is no way for an individual to distribute a cryptocurrency app on the Apple Store. It's possible to set up a legal entity, but that's not straightforward either. Therefore, the web app(PWA) approach adopted by the Etainclub is a realistic alternative for individual developers to offer services on the iPhone using the Steem blockchain.

Etainclub's article helped me a lot in implementing Steem signatures in Flutter Web. (Link: [PLAY STEEM x PWA] Using JS libraries in Flutter)

Currently, we have implemented everything except transaction signing in Dart, but since signing is a very complex and time-consuming task, we are utilizing JavaScript's steem.js SDK to handle transaction signing only.

I have attempted to implement steem signing in Dart in the past, and after about 2 months of work, it remained unfinished - only about 20% of the operation signing was implemented. (See: steemdart_ecc)

The following is the code we need to add to index.html to implement the STEEM signature in Flutter Web.

index.html

<script src="https://cdn.jsdelivr.net/npm/steem/dist/steem.min.js" defer></script>
<script defer>
     steem.signTransaction = function(tx, key) {
      const parsedTx = JSON.parse(tx);
      const signedTx = this.auth.signTransaction(parsedTx, [key]);
      return JSON.stringify(signedTx);
    }
 </script>

To simplify the implementation, tx is passed as a JSON string in Dart and parsed back into a JSON object in JavaScript.

The sign_for_web.dart file that handles the Steem signature over the JS bridge looks like this

@JS('steem')
library steemjs;

import 'package:js/js.dart';

@JS('signTransaction')
external String signTransaction(String tx, String key);

However, you can't use package:js/js.dart in Android app or iOS app environment, and importing it will cause an error, so you need to use conditional import like below.

import 'sign_for_mobile.dart' 
  if (dart.library.html) 'sign_for_web.dart';

Import sign_for_mobile.dart for the mobile app environment and sign_for_web.dart for the web environment.

In the mobile application, we're using the webview_flutter package to handle Steem signing using webview. Note that webview_flutter only supports Android and iOS. You can refer to my last post for this part.
You can see the related article at Processing Steem signatures with WebView in Flutter.

The signature implementation in the mobile (Android) application looks like this

sign_for_mobile.dart

Future<String> signTransaction(String tx, key) async {
    final scripts = 'steem.auth.signTransaction($tx, ["$key"]);';
    final signedTx = await _controller?.runJavaScriptReturningResult(scripts);
    return signedTx;
  }

To summarize, we are using the package:js package to handle steem signing in Flutter Web, and the webview_flutter package to handle steem signing in the mobile app.

---

Hello! If you've enjoyed my content, I'd really appreciate it if you could follow @anpigon and give it an upvote. Your comments and feedback are always welcome, so feel free to reach out with a comment or mention. Let's engage and create better content together. Thank you!

_{Posted using Obsidian Steemit plugin}