Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Unlock Virtual Assistant </title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/web3@1.3.0/dist/web3.min.js"></script>
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            text-align: center;
            overflow-x: hidden;
        }
        #connectButton, #balance, #accessMessage {
            display: block;
            margin: 20px auto;
        }
        #insulaEmbed {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 80%;
            height: 80%;
            border: none;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            display: none;
            z-index: 1000;
            transform: translate(-50%, -50%);
        }
        #accessMessage {
            color: red;
            font-size: 1.2em;
        }
    </style>
</head>
<body>
    <h1>Unlock Virtual Assistant</h1>
    <button id="connectButton">Connect MetaMask</button>
    <div id="balance">From ISLA 1,000</div>
    <div id="accessMessage"></div>
    <iframe id="insulaEmbed" src="https://insul.ai/virtual-assistant" title="Insula Digital"></iframe>

    <script>
        const connectButton = document.getElementById('connectButton');
        const balanceDiv = document.getElementById('balance');
        const insulaEmbed = document.getElementById('insulaEmbed');
        const accessMessage = document.getElementById('accessMessage');
        let isConnected = false;

        connectButton.addEventListener('click', () => {
            if (!isConnected) {
                connectWallet();
            } else {
                disconnectWallet();
            }
        });

        async function connectWallet() {
            if (window.ethereum) {
                try {
                    const web3 = new Web3(window.ethereum);
                    await window.ethereum.request({ method: 'eth_requestAccounts' });
                    const accounts = await web3.eth.getAccounts();
                    balanceDiv.innerHTML = 'Checking Insula Token balance...';
                    getInsulaBalance(accounts[0]);
                    isConnected = true;
                    connectButton.textContent = 'Disconnect Wallet';
                } catch (error) {
                    console.error("User denied account access or error occurred:", error);
                    balanceDiv.innerHTML = "Error: Could not connect to MetaMask. Please try again.";
                }
            } else {
                console.error("MetaMask not detected");
                balanceDiv.innerHTML = "MetaMask not detected. Please install it.";
            }
        }

        function disconnectWallet() {
            isConnected = false;
            connectButton.textContent = 'Connect MetaMask';
            balanceDiv.innerHTML = 'Click "Connect MetaMask" to display your Insula Token balance.';
            insulaEmbed.style.display = 'none';
            accessMessage.innerHTML = '';
        }

        async function getInsulaBalance(address) {
            const insulaTokenAddress = '0x697eF32B4a3F5a4C39dE1cB7563f24CA7BfC5947';
            const insulaTokenABI =[{"constant":true,"inputs":[],"name":"name","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"spender","type":"address"},{"name":"value","type":"uint256"}],"name":"approve","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"totalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"sender","type":"address"},{"name":"recipient","type":"address"},{"name":"amount","type":"uint256"}],"name":"transferFrom","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"decimals","outputs":[{"name":"","type":"uint8"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"spender","type":"address"},{"name":"addedValue","type":"uint256"}],"name":"increaseAllowance","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"account","type":"address"},{"name":"amount","type":"uint256"}],"name":"mint","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"value","type":"uint256"}],"name":"burn","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"account","type":"address"}],"name":"balanceOf","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"symbol","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"account","type":"address"}],"name":"addMinter","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[],"name":"renounceMinter","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"spender","type":"address"},{"name":"subtractedValue","type":"uint256"}],"name":"decreaseAllowance","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"recipient","type":"address"},{"name":"amount","type":"uint256"}],"name":"transfer","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"account","type":"address"}],"name":"isMinter","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"newMinter","type":"address"}],"name":"transferMinterRole","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"owner","type":"address"},{"name":"spender","type":"address"}],"name":"allowance","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"inputs":[{"name":"name","type":"string"},{"name":"symbol","type":"string"},{"name":"decimals","type":"uint8"},{"name":"initialSupply","type":"uint256"},{"name":"feeReceiver","type":"address"},{"name":"tokenOwnerAddress","type":"address"}],"payable":true,"stateMutability":"payable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"name":"account","type":"address"}],"name":"MinterAdded","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"account","type":"address"}],"name":"MinterRemoved","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"from","type":"address"},{"indexed":true,"name":"to","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Transfer","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"owner","type":"address"},{"indexed":true,"name":"spender","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Approval","type":"event"}];

            const web3 = new Web3(window.ethereum);
            const tokenContract = new web3.eth.Contract(insulaTokenABI, insulaTokenAddress);

            tokenContract.methods.balanceOf(address).call().then((balance) => {
                balanceDiv.innerHTML = `Insula Token Balance: ${balance}`;
                if (parseInt(balance) >= 1000) {
                    insulaEmbed.style.display = 'block';
                    accessMessage.innerHTML = '';
                } else {
                    insulaEmbed.style.display = 'none';
                    accessMessage.innerHTML = 'You need at least 1000 Insula Tokens to access this content.';
                }
            }).catch(error => {
                console.error("Error fetching balance:", error);
                balanceDiv.innerHTML = "Error: Could not fetch token balance.";
            });
        }

        // ... Rest of your code ...

    </script>
</body>
</html>
