Metamask <> Wix Demo
Try it out 👇 (Real network, don't "confirm" the transaction!)
Error goes here :)
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>