2023-10-18 SteemLife Development Journal

anpigon (71)in Steem Dev • 3 years ago (edited)

I'm a full-stack developer, working on various apps and projects.
And I'm constantly sharing articles related to development.
If you're curious about the project, you can learn more about it through the following links: [Steemlife] Dreaming of a free life on Steem

I'm developing a mobile app utilizing the Flutter framework. Utilizing the steem blockchain API is a big advantage of not having to build a server independently.

Currently, all functions are implemented in Dart language, but the transaction signing function is difficult to implement with Dart, so I am using steem-js, the official javascript library of steem. For reference, there are also @upvu/dsteem and Lightweight JavaScript library steem-tx-js maintained by the upvu team. However, I'm more comfortable using the official steem javascript library steem-js.

The index.html file used by the Flutter webview is simple.

<html>
  <head>
    <script src="./steem.min.js"></script>
  </head>
</html>

All this index.html file does is load steem.min.js.

And you can load index.html in your webview controller.

import 'package:webview_flutter/webview_flutter.dart';

final controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..loadFlutterAsset('assets/html/index.html');

Next, write a common function to execute JavaScript in the webview.

Future<T> runReturningResult<T extends dynamic>(
      String javascriptString) async {
    final result =
        await controller.runJavaScriptReturningResult(javascriptString);
    return jsonDecode(result.toString());
  }

And the function to sign the TX is written like this

Future<Map<String, dynamic>> signTransaction(
    Map tx, 
    String key,
) async {
    final scripts = 'window.steem.auth.signTransaction(${jsonEncode(tx)}, ["$postingKey"]);';
    final signedTx = await runReturningResult<Map<String, dynamic>>(scripts);
    return signedTx;
  }

You will sign the tx in the webview using the steem.js library, which takes a transaction (tx) of type Map and a post secret as arguments.

You'll get the information needed to create a TX from the STEEM API, and you'll write the TX to request a signature as follows.

final comment = {
    "parent_author": parent_author, 
    "parent_permlink": parent_permlink, 
    "permlink": permlink
    "author": username,
    "title": title
    "body": body, 
    "json_metadata": { "tags":tags, "app":"steemlife/0.0.1" }, 
}

final operations = [
    ["comment", comment],
    if (commentOptions != null) ['comment_options', commentOptions]
];

final tx = {
    "ref_block_num": refBlockNum,
    "ref_block_prefix": refBlockPrefix,
    "expiration": expiration.toIso8601String().split('.')[0],
    "extensions": extensions,
    "operations": operations,
 };

final signedTx = await signTransaction(tx, postingKey);

Finally, when the signature is complete and returned, the signedTx will have a value of the form

{expiration: 2023-10-17T11:42:30, extensions: [], operations: [[comment, {author: anpigon.dev, body: test, json_metadata: {"tags":["test"],"app":"steemlife/0.0.1"}, parent_author: , parent_permlink: test, permlink: 20231017t203231635881, title: test}]], ref_block_num: 36862, ref_block_prefix: 1902393388, signatures: [Signed TX value]}

This signed signedTx can then be broadcast to the steam server using the condenser_api.broadcast_transaction_synchronous API and the job is done.

So far, I've developed the functionality to sign and broadcast posts.

Additionally, you can select a reward option.

The code for the three options can be defined as follows.

// Decline Payout
const RewardOptions declinePayout = RewardOptions(
  percentSteemDollars: 0,
  allowVotes: true,
  allowCurationRewards: true,
  maxAcceptedPayout: "0.000 SBD",
);

// Power Up 100%
const RewardOptions powerUp100Payout = RewardOptions(
  percentSteemDollars: 0,
  allowVotes: true,
  allowCurationRewards: true,
  maxAcceptedPayout: "1000000.000 SBD",
);

// 50% SBD / 50% SP
const RewardOptions powerUp50Payout = RewardOptions(
  percentSteemDollars: 5000,
  allowVotes: true,
  allowCurationRewards: true,
  maxAcceptedPayout: "1000000.000 SBD",
);

Your interest and support can make a significant contribution to the growth and revitalization of the Steemit community and services on the Steam blockchain. Your active participation and interest play an important role in enriching and developing the Steemit ecosystem. The success of Steemit is highly dependent on your participation, and it is only through your interest that this community can thrive.

We encourage all developers on Steemit to show their support. As new dapps are created, new users are attracted, and the Steem marketplace becomes more active, the value of Steem will increase, and we hope you'll contribute to that.

#krsuccess #kr-dev #kr

3 years ago in Steem Dev by anpigon (71)

$23.57

Sort:

Trending

[-]

kr-dev.cu1 (49) 3 years ago

[광고] STEEM 개발자 커뮤니티에 참여 하시면, 다양한 혜택을 받을 수 있습니다.

$0.00

[-]

ayogom (79) 3 years ago

안녕하세요.
SteemitKorea팀에서 제공하는 'steemit-enhancer'를 사용해 주셔서 감사합니다. 개선 사항이 있으면 언제나 저에게 연락을 주시면 되고, 관심이 있으신 분들은 https://cafe.naver.com/steemitkorea/425 에서 받아보실 수 있습니다. 사용시 @응원해 가 포함이 되며, 악용시에는 모든 서비스에서 제외될 수 있음을 알려드립니다.

$0.00

[-]

steemit.kor (67) 3 years ago

안녕하세요.
이 글은 SteemitKorea팀(@ayogom)님께서 저자이신 @anpigon님을 응원하는 글입니다.
소정의 보팅을 해드렸습니다 ^^ 항상 좋은글 부탁드립니다
SteemitKorea팀에서는 보다 즐거운 steemit 생활을 위해 노력하고 있습니다.
이 글은 다음날 다시 한번 포스팅을 통해 소개 될 예정입니다. 감사합니다!

$0.00

[-]