0x4b5922ab…6be4sent to0xa0d17658…bc3f·#17,346,723·view on Etherscan
<iframe class="h-1/2" id="render">
</iframe>
<div class="h-1/2 flex">
<div class="flex-1">
<p class="w-full bg-violet-600 text-white">HTML <button id="button_render">render</button></p>
<div id="editor_html" style="height:100%;" class=""></div>
</div>
<div class="flex-1 h-full">
<p class="w-full bg-violet-600 text-white">CSS <button id="button_mint">mint</button></p>
<div id="editor_css" style="height:100%;" class=""></div>
</div>
<div class="flex-1 h-full">
<p class="w-full bg-violet-600 text-white">JS</p>
<div id="editor_js" style="height:100%;" class=""></div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/monaco-editor/0.20.0/min/vs/loader.min.js"></script>
const defaultHTML = ``
const defaultCSS = ``
const defaultJS = ``
$(document).ready(async function () {
let web3Modal;
let provider;
// Address of the selected account
let selectedAccount;
function w3init() {
const providerOptions = {
walletconnect: {
package: window.WalletConnectProvider.default,
options: {
infuraId: "8043bb2cf99347b1bfadfb233c5325c0",
},
},
};
web3Modal = new window.Web3Modal.default({
cacheProvider: false,
providerOptions,
disableInjectedProvider: false,
});
}
const CONTRACT_ADDRESS = "0xA0d17658fFaA895C34F0d19e17b75cEC7e89bc3f"
const CONTRACT_ABI = [
{
"inputs": [
{
"internalType": "uint256",
"name": "_tokenId",
"type": "uint256"
}
],
"name": "tokenURI",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "string",
"name": "_body",
"type": "string"
},
{
"internalType": "string",
"name": "_style",
"type": "string"
},
{
"internalType": "string",
"name": "_script",
"type": "string"
}
],
"name": "concatHTML",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "pure",
"type": "function"
},
{
"inputs": [
{
"internalType": "string",
"name": "_body",
"type": "string"
},
{
"internalType": "string",
"name": "_style",
"type": "string"
},
{
"internalType": "string",
"name": "_script",
"type": "string"
}
],
"name": "craft",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
]
async function w3connect() {
try {
provider = await web3Modal.connect();
window.w3 = new Web3(provider);
window.CONTRACT = new w3.eth.Contract(
CONTRACT_ABI,
CONTRACT_ADDRESS
);
const accounts = await w3.eth.getAccounts();
window.account = accounts[0];
} catch (e) {
console.log("Could not get a wallet connection", e);
return;
}
// Subscribe to accounts change
provider.on("accountsChanged", (accounts) => {
fetchAccountData();
});
// Subscribe to chainId change
provider.on("chainChanged", (chainId) => {
fetchAccountData();
});
// Subscribe to networkId change
provider.on("networkChanged", (networkId) => {
fetchAccountData();
});
// await refreshAccountData();
}
w3init()
w3connect()
})
require.config({ paths: { 'vs': 'https://cdn.bootcdn.net/ajax/libs/monaco-editor/0.20.0/min/vs' } });
require(['vs/editor/editor.main'], function () {
window.editor_js = monaco.editor.create(document.getElementById('editor_js'), {
value: defaultJS,
language: "javascript",
});
window.editor_css = monaco.editor.create(document.getElementById('editor_css'), {
value: defaultJS,
language: "css",
});
window.editor_html = monaco.editor.create(document.getElementById('editor_html'), {
value: defaultJS,
language: "html",
});
})
function render() {
console.log("render")
CONTRACT.methods.tokenURI(1).call().then((res) => {
console.log(res)
});
CONTRACT.methods.concatHTML(
editor_html.getValue(),
editor_css.getValue(),
editor_js.getValue()
).call().then((res) => {
console.log(res)
document.getElementById("render").src = "data:text/html;charset=utf-8," + res
});
}
document.getElementById("button_render").addEventListener("click", render);
function mint() {
CONTRACT.methods.craft(
editor_html.getValue(),
editor_css.getValue(),
editor_js.getValue()
).send({
from: account,
}).then((res) => {
console.log(res)
});
}
document.getElementById("button_mint").addEventListener("click", mint);