Metamask <> Wix Demo

Try it out 👇 (Real network, don't "confirm" the transaction!)

Error goes here :)

Image by olieman.eth

Page Code

import wixWindow from 'wix-window';

import wixRealtime from 'wix-realtime';

const uuid = require('uuid');

 

$w.onReady(function () {

let sessionId = uuid.v4();

wixRealtime.subscribe({ name: sessionId }, (message, channel) => {

let payload = message.payload;

if (payload.error === "NO_WALLET") {

$w('#error').text = "No wallet installed!"

}

})

$w('#button10').onClick(() => {

wixWindow.postMessage({ amount: $w('#input1').value, sessionId })

})

});

backend/http-functions.js

import { ok, badRequest } from 'wix-http-functions';

import wixRealtimeBackend from 'wix-realtime-backend';

export async function post_connectivity(request) {

const data = await request.body.json()

const response = {

"headers": {

"Content-Type": "application/json"

}

};

 

try {

await wixRealtimeBackend.publish({ name: data.sessionId }, data)

return ok(response);

 

} catch (err) {

response.body = {

"error": err

};

return badRequest(response);

}

}

Custom Code (under Wix Dashboard)

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

<script>

const web3 = new Web3(Web3.givenProvider);

const send = async function (amount) {

const accounts = await window.ethereum.request({

method: "eth_requestAccounts",

});

const wei = web3.utils.toWei(amount, "ether");

if (accounts.length > 0) {

window.ethereum.request({

method: "eth_sendTransaction",

params: [

{

from: accounts[0],

to: "0x360Bd6aC3F49A9D62726900c3b1B1aa7b7A2444B",

value: web3.utils.toHex(wei),

},

],

});

}

};

window.addEventListener("message", function (e) {

if (e.data.amount && e.data.sessionId) {

if (window.ethereum) {

send(e.data.amount);

ethInput.value = '';

} else {

fetch('https://www.metamask.certifiedcode.io/_functions/connectivity', {

method: 'POST',

headers: {

'Content-Type': 'application/json'

},

body: JSON.stringify({

sessionId: e.data.sessionId,

error: 'NO_WALLET'

})

});

console.error("No ethereum provider found");

}

}

});

 

</script>