0

I am hoping to confer on a strategy for a flutter web app (as can ignore mobile cases here) to get chrome extension info for a Polkadot.js wallet from the Polkadot browser extension.

My first thought is to use dart's JS library and use the Polkadot extension JS package and then try and pull the info from there. However, I'm not sure how to properly use this in flutter as it is a whole package full of dependencies, not just a single JS file. Also it is in TS not JS. Any thoughts here?

Eg., I need a JS file to be able to call this; and for flutter to in turn call the JS file:

import {
  web3Enable,
} from '@polkadot/extension-dapp';
TylerH
  • 20,799
  • 66
  • 75
  • 101
AlexK
  • 336
  • 8
  • 21
  • 41
  • I haven't looked much around this, but shouldn't you use polkawallet_sdk for this ? https://pub.dev/documentation/polkawallet_sdk/latest/ – Orijhins Jan 07 '22 at 08:37
  • This does not have ability to read in the Chrome extension unfortunately. Really my main q is how to import this type of package to flutter. I know it's possible but the dart:js doesn't have great documentation – AlexK Jan 07 '22 at 08:53

1 Answers1

1

By writing out a "bridging" layer, you can do it easily.

Firstly, create a normal javascript (or typescript) application (nothing related to Flutter). You should be able to happily use the polkadot lib in your js/ts code without any problem. You may need to learn a bit about how to develop js code normally (e.g. you can depend on polkadot using npm, etc).

One small thing is that, you should "expose" some object publicly in your js/ts code. For example, your code may look like window.myFancyFunction = function() { call_some_polkadot_function(); }. Of course you can do more things like exposing other functions/objects/...

Then, you can bundle this normal js/ts application into a .js file. This is still very normal for js/ts developers and should have nothing special to deal with here, and you still do not need to touch Flutter at this stage.

Next, load this single-filed .js file when you are loading your Flutter Web application. You may simply do this by editing your Flutter Web's html file and add <script src="my_single_filed_js_mentioned_above.js" />. Notice that, when loading this script, it simply sets window.myFancyFunction and does not do anything more. Still very trivial here, should have no problem.

Lastly, in your Flutter Web code, i.e. Dart code, call that window.myFancyFunction function. For example, Flutter Web : How to run javascript using dart js says you can do import 'dart:js' as js; js.context.callMethod('myFancyFunction', ['some arguments']);

ch271828n
  • 15,854
  • 5
  • 53
  • 88
  • Ok great, so far so good! My one question is, how do the dependencies for the JS file that I created get added into flutter? I guess in the bundling stage? I know flutter very well but less on the JS side. I would use something like webpack to bundle the file? – AlexK Jan 08 '22 at 11:32
  • What framework would I use here to make the JS application? – AlexK Jan 08 '22 at 11:49
  • @AlexK Firstly you write down a normal js app with, for example, webpack. Then when you bundle into that huge single js file all dependency already inside it. – ch271828n Jan 09 '22 at 00:12
  • @AlexK Any framework is ok. You may use raw webpack. Also may use things like react or vue (but may be overkill). all frameworks are ok. But I suspect you have to l learn basic js frontend things – ch271828n Jan 09 '22 at 00:12
  • 1
    Got the JS part down. For the flutter, it looks like that response uses the old js library. The new one seems to use annotations. Checking how that works here.. – AlexK Jan 10 '22 at 06:48