Web3 Ethereum npm integration

Ask the community
,
1

Hello,
I want to integrate an Metamask Ethereum interface to my website using Web3.npm but it seems to not work. I wrote the code in “backend/metamask.jsw” and called the functions from the frontend coding panel of the website.
Anyone already got the following code working?

const Web3 = require('web3');
const Window = require('window');

const window = new Window();

const ethEnabled = () => {
 if (window.ethereum) {
    window.web3 = new Web3(window.ethereum);
    window.ethereum.enable();
 return true;
  }
 return false;
}
2 Likes
2

Hello, I am growing tired of not finding an answer to this question. Dapps are a huge part of a new market, how is it possible no one can provide help clarify this issue?

3

“Tired of not finding an answer to this question”? You just joined the forum today.

Please add your own issue into a new post instead of bumping up an old post. Explain what you are trying to do, what works, and what doesn’t. Also, add any code in a code block as stated in the Forum Guidelines .

4

I am trying to do the same exact thing as stated in the OP. Not sure why I would need to open an identical post instead of using an existing one. Also, yes I joined today but I searched the whole forum and this question has never been addressed.

5

@administrator48935 The mechanism and interface is provided for NPM third party libraries. However, for support on how to use, you will need to refer to the library’s documentation.

Maybe someone here on the forum can help. Explain what you are trying to do, what works, and what doesn’t. Also, add any code in a code block as stated in the Forum Guidelines .

You may want to check out the Wix Marketplace - it’s a place where you can look for Corvid experts for hire.

6

Have been trying some corvid experts, so far no one seem to know web3 and blockchain. So I am trying to figure this out myself.

So I am trying to use this code on the backend file:

import Web3 from 'web3'
const Window = require('window');

const window = new Window();

const ethEnabled = () => {
 if (window.ethereum) {
    window.web3 = new Web3(window.ethereum);
    window.ethereum.enable();
 return true;
  }
 return false;
}

I am getting this error on the editor “require is not defined”

And what code should I use on the front end?

I am using import instead of require here. This is something that is specific for corvid, yet not mentioned anywhere. Is this right?

7

@yisrael-wix

8

See here is the issue. You say “for support on how to use, you will need to refer to the library’s documentation” as if you can simply copy paste the code from the standard library documentation and it will work, but this is not the case. You need to use specific commands on corvid that are not mentioned in the standard library but are specific to corvid that are not mentioned anywhere.

For instance, this is what is reported in the documentation, which does not seem to work on corvid.

const Web3 = require('web3');

let web3 = new Web3('ws://localhost:8546');
console.log(web3);
> {
    eth: ... ,
    shh: ... ,
    utils: ...,
    ...
}
9

I understand your pain, wix moderators always send you back to documentation if it’s not their code but don’t realise that to implement code from documentation to wix isn’t straight forwards because of wix’s IDE. I got to the point of building a blockchain because they couldn’t answer some of the questions that should have been easy for them to advise on regarding a six implementation method. Anyway as you say dApps are growing and should be supported to build. I understand what your looking for as I’ve looked for ways to achieve also but no luck yet.

10

Finally someone who understands. Why don’t they add a pre built in Dapp where you can just paste the smart contract address and then it will automatically allow you to directly add buttons calling smart contract functions? That would be something killer. But, even just getting the web3 package to actually working would be enough. If not, we have no choice but to leave WIX for another provider, given that Dapps are vital for our business.

Juat going to share if I find a solution.

11

Hi, I have just been looking in to this I believe there is a work around, wix enables the NPM repository to be utilised, within the module list is @wordpress/plugins if you use this as per the documentation and import this, you should be able to use the ethereum Wordpress plugin that they currently have for their blockchain that enables what you are looking for it is just a process of getting the first to work then all should be achievable.

12

@simonadams Yes, WIX enables NPM repository to be utilised, and I have installed both the web3 and web3-eth packages without being able to make them work. Those should be the packages we should use for the Dapps. I am afraid the plug in you mention is very limited and only allows you to access ETH wallets for sending ETH and tokens, but not to interact with smart contracts and call functions as the purpose of the plugin seems to be to make payments not build Dapps.

13

Ok I’ll look into it further. I will see if I can make it work and will get back to you.

14

Any update? Is the only way to solve this to migrate to another provider? We may be forced to do this given that Dapps are central and vital part for our business.

15

Some update on the issue. It seems like corvid doesn’t provide access to window object, and we need window.ethereum to get accounts. Metamask doesn’t expose user accounts unless prompted (window.ethereum.enable()) but corvid doesn’t allow this.

16

Is there a way it can be used in an embedded html?

17

Would this help at all?

/* * * * * * * * * * * * * * * * * * * * * * *

  • Code for the inner site to post a message *
                                            • */
                                              import wixWindow from ‘wix-window’;

// …

wixWindow.postMessage(dataObj);

/* * * * * * * * * * * * * * * * * * * * * * * * *

  • Code for the outer site to receive a message *
  • $w(“#myHtmlComponent”).onMessage( (event, $x) => {
  • let message = event.data;
  • } );
    */
18

From wix page to HTML Element
$w(‘#html’).postMessage(msg)

wixWindow.postMessage is used from the wix to the parent.

19

Can someone advise if WIx can intergrade with Web 3?

20

any update on if we found a way to make it work ??