Skip to content

Instantly share code, notes, and snippets.

@tsukhu

tsukhu/index.html

Created November 3, 2022 05:33
Show Gist options
  • Save tsukhu/c38706ce25b47fef90fa491a7fa2974c to your computer and use it in GitHub Desktop.
Save tsukhu/c38706ce25b47fef90fa491a7fa2974c to your computer and use it in GitHub Desktop.
Download ZIP
pinser tw ethers login
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Pinser + TW + Ethers.js</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="/assets/output.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/5.7.2/ethers.umd.min.js"
integrity="sha512-FDcVY+g7vc5CXANbrTSg1K5qLyriCsGDYCE02Li1tXEYdNQPvLPHNE+rT2Mjei8N7fZbe0WLhw27j2SrGRpdMg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<main class="flex items-center justify-center h-screen w-screen">
<div class="py-6 sm:px-6 lg:px-8 flex w-full h-full">
<template id="template-loading">
<div aria-label="Loading..." role="status">
<svg class="h-6 w-6 animate-spin" viewBox="3 3 18 18">
<path class="fill-gray-200"
d="M12 5C8.13401 5 5 8.13401 5 12c0 3.866 3.13401 7 7 7 3.866.0 7-3.134 7-7 0-3.86599-3.134-7-7-7zM3 12c0-4.97056 4.02944-9 9-9 4.9706.0 9 4.02944 9 9 0 4.9706-4.0294 9-9 9-4.97056.0-9-4.0294-9-9z" />
<path class="fill-gray-800"
d="M16.9497 7.05015c-2.7336-2.73367-7.16578-2.73367-9.89945.0-.39052.39052-1.02369.39052-1.41421.0-.39053-.39053-.39053-1.02369.0-1.41422 3.51472-3.51472 9.21316-3.51472 12.72796.0C18.7545 6.02646 18.7545 6.65962 18.364 7.05015c-.390599999999999.39052-1.0237.39052-1.4143.0z" />
</svg>
</div>
</template>
<template id="template-web3">
<form>
<button type="button" class="btn btn-primary" id="web3">Connect to Wallet</button>
</form>
</template>
<template id="template-login">
<form>
<div class="py-12">
<h2 class="text-2xl font-bold">Welcome to Pinser Metaverse!</h2>
<h4 class="text-1xl">Please login</h4>
<div class="mt-8 max-w-md">
<div class="grid grid-cols-1 gap-6">
<label class="block">
<span class="text-gray-700 font-semibold">User Name</span>
<input type="text" id="username" class="
mt-1
block
w-full
rounded-md
border-gray-300
shadow-sm
focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
" placeholder="Username ..." />
</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary uppercase" id="save-username">Submit</button>
</form>
</template>
<template id="template-avatar">
<div class="w-full h-full ">
<iframe id="frame" class="w-full h-full"
src="https://pinser.readyplayer.me/avatar?frameApi&bodyType=halfbody&hands=false"
allow="camera *; microphone *; clipboard-write"></iframe>
</div>
</template>
<div class="container" id="container">
<div aria-label="Loading..." role="status">
<svg class="h-6 w-6 animate-spin" viewBox="3 3 18 18">
<path class="fill-gray-200"
d="M12 5C8.13401 5 5 8.13401 5 12c0 3.866 3.13401 7 7 7 3.866.0 7-3.134 7-7 0-3.86599-3.134-7-7-7zM3 12c0-4.97056 4.02944-9 9-9 4.9706.0 9 4.02944 9 9 0 4.9706-4.0294 9-9 9-4.97056.0-9-4.0294-9-9z" />
<path class="fill-gray-800"
d="M16.9497 7.05015c-2.7336-2.73367-7.16578-2.73367-9.89945.0-.39052.39052-1.02369.39052-1.41421.0-.39053-.39053-.39053-1.02369.0-1.41422 3.51472-3.51472 9.21316-3.51472 12.72796.0C18.7545 6.02646 18.7545 6.65962 18.364 7.05015c-.390599999999999.39052-1.0237.39052-1.4143.0z" />
</svg>
</div>
</div>
</div>
</main>
<script>
let state = 'web3';
let eth = false;
function web3_check_metamask() {
if (!window.ethereum) {
console.error('It seems that the MetaMask extension is not detected. Please install MetaMask first.');
alert('It seems that the MetaMask extension is not detected. Please install MetaMask first.');
eth = false;
} else {
console.log('MetaMask extension has been detected!!');
eth = true;
}
}
function web3_metamask_hash() {
var hashed_string = '';
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
var total_chars = chars.length;
for (var i = 0; i < 256; i++) {
hashed_string += chars.charAt(Math.floor(Math.random() * total_chars));
}
return hashed_string;
}
async function web3_metamask_login() {
// Check first if the user has the MetaMask installed
document.querySelector('#container').innerHTML = document.querySelector('#template-loading').innerHTML;
console.log('Initate Login Process');
// Get the Ethereum provider
const provider = new ethers.providers.Web3Provider(window.ethereum);
// Get Ethereum accounts
await provider.send("eth_requestAccounts", []);
console.log("Connected!!");
// Get the User Ethereum address
const address = await provider.getSigner().getAddress();
console.log(address);
// Create hashed string
const hashed_string = web3_metamask_hash();
console.log("Hashed string: " + hashed_string);
// Request the user to sign it
const signature = await provider.getSigner().signMessage(hashed_string);
// Got the signature
console.log("The signature: " + signature);
// TODO
// you can then send the signature to the webserver for further processing and verification
state = 'username';
}
async function getPreview() {
document.querySelector('#container').innerHTML = document.querySelector('#template-loading').innerHTML;
if (!localStorage.getItem('preview')) {
const response = await fetch('https://render.readyplayer.me/render', {
method: 'POST',
body: JSON.stringify({
model: localStorage.getItem('avatar'),
scene: 'halfbody-portrait-v1'
})
});
const { renders } = await response.json();
localStorage.setItem('preview', renders[0]);
}
window.location = '/metaverse.html';
}
if (state === 'web3') {
web3_check_metamask();
if (eth) {
document.querySelector('#container').innerHTML = document.querySelector('#template-web3').innerHTML;
const loginButton = document.querySelector('#web3');
console.log(loginButton);
loginButton.addEventListener('click', async () => {
await web3_metamask_login();
if (state === 'username') {
if (!localStorage.getItem('username')) {
document.querySelector('#container').innerHTML = document.querySelector('#template-login').innerHTML;
document.querySelector('#save-username').addEventListener('click', () => {
localStorage.setItem('username', document.querySelector('#username').value);
document.querySelector('#container').innerHTML = document.querySelector('#template-avatar').innerHTML;
});
} else if (!localStorage.getItem('avatar')) {
document.querySelector('#container').innerHTML = document.querySelector('#template-avatar').innerHTML;
} else {
getPreview();
}
}
});
} else {
if (!localStorage.getItem('username')) {
document.querySelector('#container').innerHTML = document.querySelector('#template-login').innerHTML;
document.querySelector('#save-username').addEventListener('click', () => {
localStorage.setItem('username', document.querySelector('#username').value);
document.querySelector('#container').innerHTML = document.querySelector('#template-avatar').innerHTML;
});
} else if (!localStorage.getItem('avatar')) {
document.querySelector('#container').innerHTML = document.querySelector('#template-avatar').innerHTML;
} else {
getPreview();
}
}
}
window.addEventListener('message', subscribe);
document.addEventListener('message', subscribe);
function subscribe(event) {
const json = parse(event);
if (json?.source !== 'readyplayerme') {
return;
}
// Susbribe to all events sent from Ready Player Me once frame is ready
if (json.eventName === 'v1.frame.ready') {
frame.contentWindow.postMessage(
JSON.stringify({
target: 'readyplayerme',
type: 'subscribe',
eventName: 'v1.**',
}),
'*'
);
}
// Get avatar GLB URL
if (json.eventName === 'v1.avatar.exported') {
console.log(`Avatar URL: ${json.data.url}`);
localStorage.setItem('avatar', json.data.url);
getPreview();
}
// Get user id
if (json.eventName === 'v1.user.set') {
console.log(
`User with id ${json.data.id} set: ${JSON.stringify(json)}`
);
}
}
function parse(event) {
try {
return JSON.parse(event.data);
} catch (error) {
return null;
}
}
</script>
</body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment