search

herumi / bls-wasm

BLS signature for Node.js by WebAssembly
47 stars 26 forks source link

Facing issues while using bls-wasm in a React App. #5

Closed adyvaishnav closed 4 years ago

adyvaishnav commented 4 years ago

When I try to initialize the bls-wasm library via the react app, it throws an error which can be seen on the browser console: failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0 Please guide me through the issue and how can this be resolved.

herumi commented 4 years ago

Could you show me the code having a problem? I think that bls_c.js can't find the path of bls-wasm.

Is this page useful?

adyvaishnav commented 4 years ago

Right now, we are using mainly 2 applications:

  1. block-explorer: A UI app to show blockchain transactions built in react js.
  2. js-client-sdk: A javacript backend application that behaves like a medium between the blockchain and the react app(block-explorer).

We are thinking of integrating some of the functionalities of the chain into the block-explorer like creating wallet or uploading/downloading files. In the react app, we basically initialize the js-client-sdk and then do the block-chain specific operations (getting balance, blocks, transactions etc) and show the result on the UI (block-explorer). In this scenario, I initialise the js-client-sdk in the react app. Once the initialization is completed, I call the specific functions of the block-chain, let's say we are creating a new wallet on the chain hence calling create_wallet function of the sdk. In the create wallet function, I initialize the bls-wasm library and then call the required functions of it to create a wallet. See the code below.

const bls = require('bls-wasm');


    const seed = bip39.mnemonicToSeed(mnemonic).slice(32);

    bls.init(bls.BN254).then(() => {

        const blsSecret = new bls.SecretKey();
        blsSecret.setByCSPRNG()
        const privateKey = blsSecret.serializeToHexStr()
        const publicKey = blsSecret.getPublicKey()

        const key = utils.byteToHexString(publicKey);
        const id = sha3.sha3_256(publicKey);
        const sKey = privateKey;
        var data = {};
        data.public_key = key;
        data.id = id;

        return new Promise(function (resolve, reject) {
            utils.doParallelPostReqToAllMiners(miners, Endpoints.REGISTER_CLIENT, data)
                .then((response) => {
                    const myaccount = response;
                    myaccount.entity.secretKey = sKey;
                    myaccount.entity.mnemonic = mnemonic;
                    var ae = new models.Wallet(myaccount.entity);
                    resolve(ae);
                })
                .catch((error) => {
                    reject(error);
                })
        });
    }).catch((err) => {
        return 'Error while creating wallet'
    })

But this is not happening, it is not going in the then() of the bls init function. Above function gets called from the react app and then on the browser, it shows me these errors: Attaching the screenshots. bls-wasm_1 bls-wasm_2 bls-wasm_3 bls-wasm_4 bls-wasm_5 bls-wasm_6

herumi commented 4 years ago

I don't be familiar to React, but I insert two script tags for my library to public/index.html without require, then I can use bls.init() in src/index.js. Could you try this?

public/index.html

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script type='text/javascript' src="https://herumi.github.io/bls-wasm/bls_c.js"></script>
    <script type='text/javascript' src="https://herumi.github.io/bls-wasm/bls.js"></script>

In src/index.js

{
  // somewhere
  const bls = window.bls
  bls.init().then(()=>{
    console.log('ok')
    const sec = new bls.SecretKey()
    sec.setByCSPRNG()
    sec.dump()
  })
}
adyvaishnav commented 4 years ago

I tried adding the script tags in the react index.js file but getting the same error. Right now, I am initialising bls in a function of a node app and then using that function in the react app. But when I invoke the node function from the react app where the bls has been initialized, it gives me the error:


r @ backend.js:6
(anonymous) @ bls_c.js:447
Promise.then (async)
createWasm @ bls_c.js:446
Module.asm @ bls_c.js:467
(anonymous) @ bls_c.js:503
(anonymous) @ bls.js:814
exports.init @ bls.js:802
_callee7$ @ index.js:673
tryCatch @ runtime.js:63
invoke @ runtime.js:282
prototype.<computed> @ runtime.js:116
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_submitTransaction @ index.js:703
submitTransaction @ index.js:648
executeSmartContract @ index.js:319
executeFaucetSmartContract @ index.js:521
RestApiManager.getZCNTestToken @ restapimanager.js:366
runCallEffect @ proc.js:579
runEffect @ proc.js:496
next @ proc.js:366
currCb @ proc.js:449
runSelectEffect @ proc.js:784
runEffect @ proc.js:496
next @ proc.js:366
proc @ proc.js:314
runForkEffect @ proc.js:625
runEffect @ proc.js:496
next @ proc.js:366
currCb @ proc.js:449
takeCb @ proc.js:531
put @ channel.js:88
(anonymous) @ channel.js:190
(anonymous) @ channel.js:216
exec @ scheduler.js:20
flush @ scheduler.js:63
asap @ scheduler.js:35
(anonymous) @ channel.js:215
emit @ channel.js:39
(anonymous) @ middleware.js:74
sendFaucetRequest @ FaucetForm.js:60
onClick @ reactstrap.es.js:1115
callCallback @ react-dom.development.js:337
invokeGuardedCallbackDev @ react-dom.development.js:386
invokeGuardedCallback @ react-dom.development.js:439
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:454
executeDispatch @ react-dom.development.js:585
executeDispatchesInOrder @ react-dom.development.js:610
executeDispatchesAndRelease @ react-dom.development.js:713
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:722
forEachAccumulated @ react-dom.development.js:694
runEventsInBatch @ react-dom.development.js:739
runExtractedPluginEventsInBatch @ react-dom.development.js:881
handleTopLevel @ react-dom.development.js:5832
batchedEventUpdates$1 @ react-dom.development.js:24387
batchedEventUpdates @ react-dom.development.js:1414
dispatchEventForPluginEventSystem @ react-dom.development.js:5928
attemptToDispatchEvent @ react-dom.development.js:6045
dispatchEvent @ react-dom.development.js:5948
unstable_runWithPriority @ scheduler.development.js:704
runWithPriority$2 @ react-dom.development.js:12232
discreteUpdates$1 @ react-dom.development.js:24404
discreteUpdates @ react-dom.development.js:1439
dispatchDiscreteEvent @ react-dom.development.js:5915
Show 38 more frames
backend.js:6 falling back to ArrayBuffer instantiation
r @ backend.js:6
(anonymous) @ bls_c.js:448
Promise.then (async)
createWasm @ bls_c.js:446
Module.asm @ bls_c.js:467
(anonymous) @ bls_c.js:503
(anonymous) @ bls.js:814
exports.init @ bls.js:802
_callee7$ @ index.js:673
tryCatch @ runtime.js:63
invoke @ runtime.js:282
prototype.<computed> @ runtime.js:116
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_submitTransaction @ index.js:703
submitTransaction @ index.js:648
executeSmartContract @ index.js:319
executeFaucetSmartContract @ index.js:521
RestApiManager.getZCNTestToken @ restapimanager.js:366
runCallEffect @ proc.js:579
runEffect @ proc.js:496
next @ proc.js:366
currCb @ proc.js:449
runSelectEffect @ proc.js:784
runEffect @ proc.js:496
next @ proc.js:366
proc @ proc.js:314
runForkEffect @ proc.js:625
runEffect @ proc.js:496
next @ proc.js:366
currCb @ proc.js:449
takeCb @ proc.js:531
put @ channel.js:88
(anonymous) @ channel.js:190
(anonymous) @ channel.js:216
exec @ scheduler.js:20
flush @ scheduler.js:63
asap @ scheduler.js:35
(anonymous) @ channel.js:215
emit @ channel.js:39
(anonymous) @ middleware.js:74
sendFaucetRequest @ FaucetForm.js:60
onClick @ reactstrap.es.js:1115
callCallback @ react-dom.development.js:337
invokeGuardedCallbackDev @ react-dom.development.js:386
invokeGuardedCallback @ react-dom.development.js:439
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:454
executeDispatch @ react-dom.development.js:585
executeDispatchesInOrder @ react-dom.development.js:610
executeDispatchesAndRelease @ react-dom.development.js:713
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:722
forEachAccumulated @ react-dom.development.js:694
runEventsInBatch @ react-dom.development.js:739
runExtractedPluginEventsInBatch @ react-dom.development.js:881
handleTopLevel @ react-dom.development.js:5832
batchedEventUpdates$1 @ react-dom.development.js:24387
batchedEventUpdates @ react-dom.development.js:1414
dispatchEventForPluginEventSystem @ react-dom.development.js:5928
attemptToDispatchEvent @ react-dom.development.js:6045
dispatchEvent @ react-dom.development.js:5948
unstable_runWithPriority @ scheduler.development.js:704
runWithPriority$2 @ react-dom.development.js:12232
discreteUpdates$1 @ react-dom.development.js:24404
discreteUpdates @ react-dom.development.js:1439
dispatchDiscreteEvent @ react-dom.development.js:5915
Show 38 more frames
backend.js:6 failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0
r @ backend.js:6
(anonymous) @ bls_c.js:438
Promise.then (async)
instantiateArrayBuffer @ bls_c.js:437
(anonymous) @ bls_c.js:449
Promise.then (async)
createWasm @ bls_c.js:446
Module.asm @ bls_c.js:467
(anonymous) @ bls_c.js:503
(anonymous) @ bls.js:814
exports.init @ bls.js:802
_callee7$ @ index.js:673
tryCatch @ runtime.js:63
invoke @ runtime.js:282
prototype.<computed> @ runtime.js:116
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
(anonymous) @ asyncToGenerator.js:32
(anonymous) @ asyncToGenerator.js:21
_submitTransaction @ index.js:703
submitTransaction @ index.js:648
executeSmartContract @ index.js:319
executeFaucetSmartContract @ index.js:521
RestApiManager.getZCNTestToken @ restapimanager.js:366
runCallEffect @ proc.js:579
runEffect @ proc.js:496
next @ proc.js:366
currCb @ proc.js:449
runSelectEffect @ proc.js:784
runEffect @ proc.js:496
next @ proc.js:366
proc @ proc.js:314
runForkEffect @ proc.js:625
runEffect @ proc.js:496
next @ proc.js:366
currCb @ proc.js:449
takeCb @ proc.js:531
put @ channel.js:88
(anonymous) @ channel.js:190
(anonymous) @ channel.js:216
exec @ scheduler.js:20
flush @ scheduler.js:63
asap @ scheduler.js:35
(anonymous) @ channel.js:215
emit @ channel.js:39
(anonymous) @ middleware.js:74
sendFaucetRequest @ FaucetForm.js:60
onClick @ reactstrap.es.js:1115
callCallback @ react-dom.development.js:337
invokeGuardedCallbackDev @ react-dom.development.js:386
invokeGuardedCallback @ react-dom.development.js:439
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:454
executeDispatch @ react-dom.development.js:585
executeDispatchesInOrder @ react-dom.development.js:610
executeDispatchesAndRelease @ react-dom.development.js:713
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:722
forEachAccumulated @ react-dom.development.js:694
runEventsInBatch @ react-dom.development.js:739
runExtractedPluginEventsInBatch @ react-dom.development.js:881
handleTopLevel @ react-dom.development.js:5832
batchedEventUpdates$1 @ react-dom.development.js:24387
batchedEventUpdates @ react-dom.development.js:1414
dispatchEventForPluginEventSystem @ react-dom.development.js:5928
attemptToDispatchEvent @ react-dom.development.js:6045
dispatchEvent @ react-dom.development.js:5948
unstable_runWithPriority @ scheduler.development.js:704
runWithPriority$2 @ react-dom.development.js:12232
discreteUpdates$1 @ react-dom.development.js:24404
discreteUpdates @ react-dom.development.js:1439
dispatchDiscreteEvent @ react-dom.development.js:5915
Show 40 more frames
bls_c.js:871 CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0
backend.js:6 CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c ```
herumi commented 4 years ago

Could you try my sample?

  1. npx create-react-app app1
  2. copy index.html to app1/public/
  3. copy index.js to app1/src/.
  4. npm start in app1 and open http://localhost:3000/

It runs well on my environments (OS : Ubuntu 18.04.4, npx : 6.13.4).

adyvaishnav commented 4 years ago

Thank you Herumi. It is working for me now :+1: