tuncatunc/main.js

## main.js
const NETWORKID = "testnet04";
/**
 * Check if is X-Wallet installed
 */
const isXWalletInstalled = () => {
  const { kadena } = window;
  return Boolean(kadena && kadena.isKadena);
};

const initialize = async () => {
  if (isXWalletInstalled()) {
    // You will start here
    kadena
      .request({
        method: "kda_connect",
        networkId: NETWORKID,
      })
      .then((response) => {
        console.log("Connect request", response);
      });

    const NETWORK_ID = "testnet04";
    const CHAIN_ID = "1";
    const API_HOST = `https://api.testnet.chainweb.com/chainweb/0.0/${NETWORK_ID}/chain/${CHAIN_ID}/pact`;
    const creationTime = () => Math.round(new Date().getTime() / 1000);

    kadena
      .request({
        method: "kda_checkStatus",
        networkId: NETWORKID,
      })
      .then((response) => {
        console.log("Connection status", response);
      });
  }
};

async function sign() {
  const xWalletAccount = await kadena.request({
    method: "kda_requestAccount",
    networkId: NETWORKID,
  });

  console.log("xWalletAccount", xWalletAccount);
  // get message from message input
  const message = document.getElementById("message").value;

  const signingCmd = {
    networkId: NETWORKID,
    sender: xWalletAccount.wallet.account,
    chainId: 1,
    gasPrice: 0.0000001,
    gasLimit: 60000,
    ttl: 28000,
    pactCode: message,
    envData: {},
  };

  const signedCmd = await kadena.request({
    method: "kda_requestSign",
    data: {
      networkId: NETWORKID,
      signingCmd,
    },
  });

  console.log("signedCmd", signedCmd);
  // set signature to signature input
  document.getElementById("signature").value = signedCmd.signedCmd.sigs[0].sig;
  return signedCmd;
}

window.addEventListener("load", initialize);

## sign.html
<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Sign Message</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
  <script src='main.js'></script>
  <script src="https://cdn.jsdelivr.net/npm/pact-lang-api@4.1.2/pact-lang-api-global.min.js"></script>
</head>
<body>
  <!-- Create a form with message text field and sign button -->
  <form id="sign-form">
    <div>
      <label for="message">Message to sign</label>
    </div>
    <div>
      <textarea id="message" name="message" placeholder="Message to sign" rows="10" cols="30">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem itaque sequi error asperiores, placeat, sunt vero fuga, tempore minus nisi dolores. Quasi iure doloribus cupiditate, vero asperiores est autem et!
      </textarea>
    </div>
    <!-- Sign button -->
    <div style="margin-top: 1rem; margin-bottom: 1rem;">
      <input type="button" class="button" value="Sign" onclick="sign()">
    </div>
    <!-- Read only text are 10 rows 30 cols -->
    <div>
      <label for="signature">Signature</label>
    </div>
    <div>
      <textarea id="signature" name="signature" placeholder="Signature" rows="10" cols="30" readonly></textarea>
    </div>

  </form>
</body>
</html>
	const NETWORKID = "testnet04";
	/**
	* Check if is X-Wallet installed
	*/
	const isXWalletInstalled = () => {
	const { kadena } = window;
	return Boolean(kadena && kadena.isKadena);
	};

	const initialize = async () => {
	if (isXWalletInstalled()) {
	// You will start here
	kadena
	.request({
	method: "kda_connect",
	networkId: NETWORKID,
	})
	.then((response) => {
	console.log("Connect request", response);
	});

	const NETWORK_ID = "testnet04";
	const CHAIN_ID = "1";
	const API_HOST = `https://api.testnet.chainweb.com/chainweb/0.0/${NETWORK_ID}/chain/${CHAIN_ID}/pact`;
	const creationTime = () => Math.round(new Date().getTime() / 1000);

	kadena
	.request({
	method: "kda_checkStatus",
	networkId: NETWORKID,
	})
	.then((response) => {
	console.log("Connection status", response);
	});
	}
	};

	async function sign() {
	const xWalletAccount = await kadena.request({
	method: "kda_requestAccount",
	networkId: NETWORKID,
	});

	console.log("xWalletAccount", xWalletAccount);
	// get message from message input
	const message = document.getElementById("message").value;

	const signingCmd = {
	networkId: NETWORKID,
	sender: xWalletAccount.wallet.account,
	chainId: 1,
	gasPrice: 0.0000001,
	gasLimit: 60000,
	ttl: 28000,
	pactCode: message,
	envData: {},
	};

	const signedCmd = await kadena.request({
	method: "kda_requestSign",
	data: {
	networkId: NETWORKID,
	signingCmd,
	},
	});

	console.log("signedCmd", signedCmd);
	// set signature to signature input
	document.getElementById("signature").value = signedCmd.signedCmd.sigs[0].sig;
	return signedCmd;
	}

	window.addEventListener("load", initialize);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<meta http-equiv='X-UA-Compatible' content='IE=edge'>
	<title>Sign Message</title>
	<meta name='viewport' content='width=device-width, initial-scale=1'>
	<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
	<script src='main.js'></script>
	<script src="https://cdn.jsdelivr.net/npm/pact-lang-api@4.1.2/pact-lang-api-global.min.js"></script>
	</head>
	<body>
	<!-- Create a form with message text field and sign button -->
	<form id="sign-form">
	<div>
	<label for="message">Message to sign</label>
	</div>
	<div>
	<textarea id="message" name="message" placeholder="Message to sign" rows="10" cols="30">
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem itaque sequi error asperiores, placeat, sunt vero fuga, tempore minus nisi dolores. Quasi iure doloribus cupiditate, vero asperiores est autem et!
	</textarea>
	</div>
	<!-- Sign button -->
	<div style="margin-top: 1rem; margin-bottom: 1rem;">
	<input type="button" class="button" value="Sign" onclick="sign()">
	</div>
	<!-- Read only text are 10 rows 30 cols -->
	<div>
	<label for="signature">Signature</label>
	</div>
	<div>
	<textarea id="signature" name="signature" placeholder="Signature" rows="10" cols="30" readonly></textarea>
	</div>

	</form>
	</body>
	</html>