himanshuchawla009 · May 30, 2022 15:07
diff --git a/web3auth-default.html b/web3auth-default.html
  <html>
          <head>
            <title>Ethereum Web3Auth Getting Started</title>
            <meta charset="UTF-8" />
          </head>

          <body>
            <div">
              <h1><a target="_blank" href="http://web3auth.io/">Web3Auth</a> ETH & JS Integration Example</h1>
              <!-- Logged In -->
              <div>
                <button id="get-user-info">Get User Info</button>
                <button id="get-accounts">Get Accounts</button>
                <button id="get-balance">Get Balance</button>
                <button id="sign-message">Sign Message</button>
                <button id="sign-tx">Sign Transaction</button>
                <button id="send-tx">Send Transaction</button>

                <button id="logout">Logout</button>

                <div id="console">
                  <p id="code" ></p>
                </div>
              </div>

              <!-- Logged Logout -->
              <div >
                <button id="login">Login</button>
              </div>
              <footer>
                <a href="https://github.com/Web3Auth/Web3Auth/tree/master/examples/getting-started" target="_blank" rel="noopener noreferrer">
                  Source code
                  <img  src="/github-logo.png" />
                </a>
              </footer>
            </div>

            <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
            <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1/dist/web3.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/@web3auth/web3auth@0/dist/web3auth.umd.min.js"></script>
            <script>
              const web3authSdk = window.Web3auth;
              let web3AuthInstance = null;

              (async function init() {
                $(".btn-logged-in").hide();
                $("#sign-tx").hide();

                web3AuthInstance = new web3authSdk.Web3Auth({
                  chainConfig: { chainNamespace: "eip155" },
                  clientId: "YOUR_CLIENT_ID_HERE", // get your clientId from https://developer.web3auth.io
                });

                subscribeAuthEvents(web3AuthInstance);

                await web3AuthInstance.initModal();
                console.log("web3AuthInstance", web3AuthInstance, web3AuthInstance.provider);
                if (web3AuthInstance.provider) {
                  $(".btn-logged-in").show();
                  $(".btn-logged-out").hide();
                  if (web3AuthInstance.connectedAdapterName === "openlogin") {
                    $("#sign-tx").show();
                  }
                } else {
                  $(".btn-logged-out").show();
                  $(".btn-logged-in").hide();
                }
              })();

              function subscribeAuthEvents(web3auth) {
                web3auth.on("connected", (data) => {
                  console.log("Yeah!, you are successfully logged in", data);
                });

                web3auth.on("connecting", () => {
                  console.log("connecting");
                });

                web3auth.on("disconnected", () => {
                  console.log("disconnected");
                });

                web3auth.on("errored", (error) => {
                  console.log("some error or user have cancelled login request", error);
                });

                web3auth.on("MODAL_VISIBILITY", (isVisible) => {
                  console.log("modal visibility", isVisible);
                });
              }

              $("#login").click(async function (event) {
                try {
                  const provider = await web3AuthInstance.connect();
                  console.log("provider after login", provider);
                  $(".btn-logged-out").hide();
                  $(".btn-logged-in").show();
                } catch (error) {
                  console.error(error.message);
                }
              });

              $("#logout").click(async function (event) {
                try {
                  await web3AuthInstance.logout();
                  $(".btn-logged-in").hide();
                  $(".btn-logged-out").show();
                } catch (error) {
                  console.error(error.message);
                }
              });

              $("#get-user-info").click(async function (event) {
                try {
                  const user = await web3AuthInstance.getUserInfo();
                  $("#code").text(JSON.stringify(user || {}, null, 2));
                } catch (error) {
                  console.error(error.message);
                }
              });

              $("#get-accounts").click(async function (event) {
                try {
                  const web3 = new Web3(web3AuthInstance.provider);
                  const accounts = await web3.eth.getAccounts();
                  $("#code").text(JSON.stringify(["Eth accounts", accounts], null, 2));
                } catch (error) {
                  console.error(error.message);
                }
              });

              $("#get-balance").click(async function (event) {
                try {
                  const web3 = new Web3(web3AuthInstance.provider);
                  const accounts = await web3.eth.getAccounts();
                  const balance = await web3.eth.getBalance(accounts[0]);
                  $("#code").text(JSON.stringify(["Eth balance", balance], null, 2));
                } catch (error) {
                  console.error(error.message);
                }
              });

              $("#sign-message").click(async function (event) {
                try {
                  const provider = web3AuthInstance.provider;
                  const web3 = new Web3(provider);
                  const accounts = await web3.eth.getAccounts();
                  const message = "0x47173285a8d7341e5e972fc677286384f802f8ef42a5ec5f03bbfa254cb01fad";
                  web3.currentProvider?.send(
                    {
                      method: "eth_sign",
                      params: [accounts[0], message],
                      from: accounts[0],
                    },
                    (err, result) => {
                      if (err) {
                        return console.error(err);
                      }
                      $("#code").text(JSON.stringify(["Eth sign message => true", result], null, 2));
                    }
                  );
                } catch (error) {
                  console.error(error.message);
                }
              });

              $("#sign-tx").click(async function (event) {
                try {
                  const provider = web3AuthInstance.provider;
                  const web3 = new Web3(provider);
                  const accounts = await web3.eth.getAccounts();
                  const txRes = await web3.eth.signTransaction({
                    from: accounts[0],
                    to: accounts[0],
                    value: web3.utils.toWei("0.01"),
                  });
                  $("#code").text(JSON.stringify(txRes));
                } catch (error) {
                  console.error(error.message);
                }
              });

              $("#send-tx").click(async function (event) {
                try {
                  const provider = web3AuthInstance.provider;
                  const web3 = new Web3(provider);
                  const accounts = await web3.eth.getAccounts();

                  const message = "0x47173285a8d7341e5e972fc677286384f802f8ef42a5ec5f03bbfa254cb01fad";
                  const txRes = await web3.eth.sendTransaction({
                    from: accounts[0],
                    to: accounts[0],
                    value: web3.utils.toWei("0.01"),
                  });
                  $("#code").text(JSON.stringify(txRes));
                } catch (error) {
                  console.error(error.message);
                }
              });
            </script>
          </body>
        </html>
	<html>
	<head>
	<title>Ethereum Web3Auth Getting Started</title>
	<meta charset="UTF-8" />
	</head>

	<body>
	<div">
	<h1><a target="_blank" href="http://web3auth.io/">Web3Auth</a> ETH & JS Integration Example</h1>
	<!-- Logged In -->
	<div>
	<button id="get-user-info">Get User Info</button>
	<button id="get-accounts">Get Accounts</button>
	<button id="get-balance">Get Balance</button>
	<button id="sign-message">Sign Message</button>
	<button id="sign-tx">Sign Transaction</button>
	<button id="send-tx">Send Transaction</button>

	<button id="logout">Logout</button>

	<div id="console">
	<p id="code" ></p>
	</div>
	</div>

	<!-- Logged Logout -->
	<div >
	<button id="login">Login</button>
	</div>
	<footer>
	<a href="https://github.com/Web3Auth/Web3Auth/tree/master/examples/getting-started" target="_blank" rel="noopener noreferrer">
	Source code
	<img src="/github-logo.png" />
	</a>
	</footer>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1/dist/web3.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@web3auth/web3auth@0/dist/web3auth.umd.min.js"></script>
	<script>
	const web3authSdk = window.Web3auth;
	let web3AuthInstance = null;

	(async function init() {
	$(".btn-logged-in").hide();
	$("#sign-tx").hide();

	web3AuthInstance = new web3authSdk.Web3Auth({
	chainConfig: { chainNamespace: "eip155" },
	clientId: "YOUR_CLIENT_ID_HERE", // get your clientId from https://developer.web3auth.io
	});

	subscribeAuthEvents(web3AuthInstance);

	await web3AuthInstance.initModal();
	console.log("web3AuthInstance", web3AuthInstance, web3AuthInstance.provider);
	if (web3AuthInstance.provider) {
	$(".btn-logged-in").show();
	$(".btn-logged-out").hide();
	if (web3AuthInstance.connectedAdapterName === "openlogin") {
	$("#sign-tx").show();
	}
	} else {
	$(".btn-logged-out").show();
	$(".btn-logged-in").hide();
	}
	})();

	function subscribeAuthEvents(web3auth) {
	web3auth.on("connected", (data) => {
	console.log("Yeah!, you are successfully logged in", data);
	});

	web3auth.on("connecting", () => {
	console.log("connecting");
	});

	web3auth.on("disconnected", () => {
	console.log("disconnected");
	});

	web3auth.on("errored", (error) => {
	console.log("some error or user have cancelled login request", error);
	});

	web3auth.on("MODAL_VISIBILITY", (isVisible) => {
	console.log("modal visibility", isVisible);
	});
	}

	$("#login").click(async function (event) {
	try {
	const provider = await web3AuthInstance.connect();
	console.log("provider after login", provider);
	$(".btn-logged-out").hide();
	$(".btn-logged-in").show();
	} catch (error) {
	console.error(error.message);
	}
	});

	$("#logout").click(async function (event) {
	try {
	await web3AuthInstance.logout();
	$(".btn-logged-in").hide();
	$(".btn-logged-out").show();
	} catch (error) {
	console.error(error.message);
	}
	});

	$("#get-user-info").click(async function (event) {
	try {
	const user = await web3AuthInstance.getUserInfo();
	$("#code").text(JSON.stringify(user \|\| {}, null, 2));
	} catch (error) {
	console.error(error.message);
	}
	});

	$("#get-accounts").click(async function (event) {
	try {
	const web3 = new Web3(web3AuthInstance.provider);
	const accounts = await web3.eth.getAccounts();
	$("#code").text(JSON.stringify(["Eth accounts", accounts], null, 2));
	} catch (error) {
	console.error(error.message);
	}
	});

	$("#get-balance").click(async function (event) {
	try {
	const web3 = new Web3(web3AuthInstance.provider);
	const accounts = await web3.eth.getAccounts();
	const balance = await web3.eth.getBalance(accounts[0]);
	$("#code").text(JSON.stringify(["Eth balance", balance], null, 2));
	} catch (error) {
	console.error(error.message);
	}
	});

	$("#sign-message").click(async function (event) {
	try {
	const provider = web3AuthInstance.provider;
	const web3 = new Web3(provider);
	const accounts = await web3.eth.getAccounts();
	const message = "0x47173285a8d7341e5e972fc677286384f802f8ef42a5ec5f03bbfa254cb01fad";
	web3.currentProvider?.send(
	{
	method: "eth_sign",
	params: [accounts[0], message],
	from: accounts[0],
	},
	(err, result) => {
	if (err) {
	return console.error(err);
	}
	$("#code").text(JSON.stringify(["Eth sign message => true", result], null, 2));
	}
	);
	} catch (error) {
	console.error(error.message);
	}
	});

	$("#sign-tx").click(async function (event) {
	try {
	const provider = web3AuthInstance.provider;
	const web3 = new Web3(provider);
	const accounts = await web3.eth.getAccounts();
	const txRes = await web3.eth.signTransaction({
	from: accounts[0],
	to: accounts[0],
	value: web3.utils.toWei("0.01"),
	});
	$("#code").text(JSON.stringify(txRes));
	} catch (error) {
	console.error(error.message);
	}
	});

	$("#send-tx").click(async function (event) {
	try {
	const provider = web3AuthInstance.provider;
	const web3 = new Web3(provider);
	const accounts = await web3.eth.getAccounts();

	const message = "0x47173285a8d7341e5e972fc677286384f802f8ef42a5ec5f03bbfa254cb01fad";
	const txRes = await web3.eth.sendTransaction({
	from: accounts[0],
	to: accounts[0],
	value: web3.utils.toWei("0.01"),
	});
	$("#code").text(JSON.stringify(txRes));
	} catch (error) {
	console.error(error.message);
	}
	});
	</script>
	</body>
	</html>