src/demo/index.html

<!DOCTYPE html>
<html>
<head>
    <title>SuiConnect Demo</title>
    <!-- 1. Load SuiConnect -->
    <link rel="stylesheet" href="https://c9bb31a4.polymedia-suiconnect.pages.dev/assets/index-1.1.0.css">
    <script defer src="https://c9bb31a4.polymedia-suiconnect.pages.dev/assets/index-1.1.0.js"
        onload="window.suiconnectInit({
            rpcUrl: 'https://fullnode.mainnet.sui.io',
            autoConnect: true,
        })">
    </script>
</head>
<body>
    <h2>SuiConnect Demo</h2>

    <!-- 2. Add the wallet button container -->
    <div id="suiconnect-root">
        <!-- Contents will be replaced by SuiConnect - but this prevents layout shift -->
        <div id="suiconnect">
            <button disabled class="btn connect">CONNECT WALLET</button>
        </div>
    </div>

    <!-- Example UI -->
    <div style="margin: 10px 0;">
        Status: <span id="status">Disconnected</span>
    </div>

    <div id="actions" style="display: none; margin-top: 20px;">
        <h3>Actions:</h3>
        <button onclick="getSuiBalance()">Get Balance</button>
        <button onclick="signMessage()">Sign Message</button>
        <button onclick="signAndExecuteTx()">Execute Transaction</button>
    </div>

    <!-- 3. Handle wallet connect/disconnect -->
    <script>
        window.addEventListener("suiconnect-wallet-change", yourHandler);

        // === Example handler and Sui wallet / RPC actions ===

        let suiconnect = null;

        function yourHandler(event) {
            suiconnect = event.detail;
            updateUI();
        }

        function updateUI() {
            const status = document.getElementById('status');
            const actions = document.getElementById("actions");

            const address = suiconnect.address;
            status.textContent = address
                ? `Connected as ${address.slice(0,6)}...${address.slice(-4)}`
                : 'Disconnected';
            actions.style.display = address ? "block" : "none";
        }

        async function getSuiBalance() {
            const { client } = suiconnect;
            try {
                const balance = await client.getBalance({
                    owner: suiconnect.address,
                    coinType: "0x2::sui::SUI"
                });
                const totalBalance = Number(balance.totalBalance) / 1_000_000_000;
                alert(`Wallet balance: ${totalBalance.toFixed(2)} SUI`);
            } catch (error) {
                alert(error);
            }
        }

        async function signMessage() {
            const { signPersonalMessage } = suiconnect;
            try {
                const resp = await signPersonalMessage({
                    message: new TextEncoder().encode("Hey hey hey SuiConnect!"),
                });
                alert(`Message signed successfully:\n\n${JSON.stringify(resp, null, 2)}`);
            } catch (error) {
                alert(error);
            }
        }

        async function signAndExecuteTx() {
            const { Transaction, signAndExecuteTransaction } = suiconnect;
            try {
                const tx = new Transaction();
                const resp = await signAndExecuteTransaction({
                    transaction: tx,
                    options: { showEffects: true, showObjectChanges: true },
                });
                alert(`Transaction executed successfully. Digest: ${resp.digest}`);
            } catch (error) {
                alert(error);
            }
        }
    </script>
</body>
</html>