Dapps, Ethereum, Blockchain, Ethers

Show and tell
,
1

Hi All,

I know there are many looking to create DApps on Wix using Web3 or Ethereum, I have also been looking into this for a number of months, at present for some reason I am unable to get a website to interact with Metamask however you can engage with the Ethereum Blockchain via Ethers.

I provide the basic page code to get you started, the rest is in the Ethers.js Docs. This I hope will help those who have been trying to do something like this for some time.

Best wishes

Si

const { ethers } = require ( ā€œethersā€ );
const network = ā€œhomesteadā€ ;
const provider = ethers . getDefaultProvider ( network , { infura : {
projectId : 'Your Project ID Here ,
projectSecret : ā€˜Your Project Secret Hereā€™ ,
},});

export async function button1_click ( ) {
console . log ( ethers );
console . log ( provider );
console . log ( await provider . getBlockNumber ());
}

2 Likes
2

The very first line fails, const { ethers }= require ( ā€œethersā€ );

Cannot find module ā€˜ethersā€™ in ā€˜public/pages/sfxat.jsā€™

Did you actually manage to include ethers into Wix somehow?

3

Hi, Yes I have, I have a wallet working that I have built using ethers. It may have failed if you have not included ethers.js in the backend, the code should also be placed in a .jsw module.

4

That line is importing ethers though.

Backend of Wix? Where do I put a web module, I canā€™t see in docs, itā€™s shows how to, thatā€™s all good, but put it where?

5

@sonicswapstu you need to have dev mode switched to on, it will enable you to create JSW modules. I will upload some of the code I have to help you out a bit shortly.

6

@sonicswapstu you need to have dev mode switched to on, it will enable you to create JSW modules. I will upload some of the code I have to help you out a bit shortly.

7

you have to import the web3 module to interact and connect with Metamask. It should work the same as most other implementations you can find online. Here is a simple example.

const Web3 = require("web3")
    
const enableEthConnection = async () => {
    if(window.ethereum) {
        await window.ethereum.request({method:"eth_requestAccounts"})
        
        window.web3 = new Web3(window.ethereum)
        return true
    }
    return false
}

essentially with this code all we are doing is checking if window.ethereum exists. If so we create a new web3 object and send a request to initiate a popup dialogue box. The await window.ethereum.request method is what renders the dialogue box and prompts the user to connect.

8

Thanks. I already have my working code for my payment app Iā€™m building, currently using ethers.js, all good.

Itā€™s the importing ethers into Wix I need to do for someoneā€™s site, Iā€™ll revisit the docs to try find how they make a JSW module and include it - unless you can share that specific info?

Once included I can get to work on wixifying my current code as required :slight_smile:

9

Iā€™ve already built past this part, thanks though. Itā€™s integration into Wix that Iā€™m specifically looking for, but as Simon points out its its a matter of creating a module to get the 3rd party libraries in first.

10

Assuming you have developer mode4 enabled here is how you access and create the JSW files. After creating an export function in the JSW file you will just import it in brackets into whatever page you want to call it in. (usually the home page). Hope this helps.

596Ɨ601 25 KB

11

@amotor Thatā€™s great, thanks for this, looking forward to getting this working inside Wix. Cheers!

12

@amotor very true but then you are having to use a custom element or html box as I believe thatā€™s the only way to get web3 working as wix doesnā€™t allow access to the window element? or it didnā€™t, ethers.js is to me a simpler way of implementing a wallet that you can build and make look how you want. :+1:t2:

13

@sonicswapstu love ā€œwixifyingā€ Iā€˜ve been using that a lot!

14

@simonadams That is true. I had not considered that. You might be able to add some custom code that renders the element if you have upgraded to a premium plan on your site See: Embedding Custom Code to Your Site | Help Center | Wix.com

That gives you access to the DOM

15

@amotor I upgraded to a premium plan, not just for the custom elements but it would require some engineering to get web3 to work I think, with ethers.js you can build your own version of a ethereum wallet, but can also now use BSC as well as there is an ancillary package @ethers-ancillary/bsc :+1:t2:

16

@sonicswapstu you can do it client side but itā€™s safer to use the jsw modules.

17

Another question:

At the moment the user is having to manually send tokens, and put their TX hash into the form, so I have built a ethers.js payment system that I want to integrateā€¦

I expected to be able to (on bookings form page) access the current booking in progress, so I could get itā€™s price value and pass that to my script - where the user will make the payment, it triggers metamask etc) and then complete the booking.

But, it seems there is no way to access any of the data for the booking the user is currently making? Do you know of any way to access this? Or even the service that the user selected so I could use the Wix Ali to even look up the price for the slot on the selected serviceā€¦ Possible?

Iā€™ve read the Api docs top to bottom and cannot for the life of me see how to access the currently selected booking/service.

Other option is I rebuild the entire booking process using the APIsā€¦! Which is obviously a lot more work, but will if I have to. Seems crazy to do that when all I need is the price of the currently selected service!

18

Seems it cut the start of my question off. The client has used the built in bookings app to make the bookings pages, so there is a list of services, the calendar where user chooses a slot, and the confirmation page.

I need access to the service (price of it) of the currently selected service.

19

Hi Stuart,

have you checked out these?

https://www.wix.com/velo/reference/wix-bookings-backend/bookings

https://www.wix.com/velo/reference/wix-billing-backend

https://www.wix.com/velo/reference/wix-bookings

https://www.wix.com/velo/reference/wix-pay/introduction

https://www.wix.com/velo/reference/wix-pay-backend

If this does not help, I would probably need an understanding of the process.

best wishes,

Si

20

@simonadams yes Iā€™ve read all the docs and actively using them now but still I have issues.

The site currently uses the booking system. I have since rebuilt the services list using the Wix API, so I can access the prices and service IDs. I need these so I can pass the price to metamask to make the transaction. All good so far.

But, the booking process uses a calendar (scheduled slots) and a final form - which I need to populate a field - bit you canā€™t when using the booking system.

So my plan now is basically to rebuild the whole calendar/slot chooser and form using the API and my own fields. It feels very over the top, just to get a crypto transaction in between it all!