Created
December 1, 2022 21:38
-
-
Save pleaseshutup/41691e655cdbf4306f677ec49a15f34d to your computer and use it in GitHub Desktop.
Proton webauth simple example static html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |
<title>Connect your Proton account to LunarCrush using WebAuth.com</title> | |
<link rel="shortcut icon" href="https://lunarcrush.com/apple-touch-icon.png" /> | |
<script src="https://unpkg.com/@proton/web-sdk@4.2.4/dist/bundle.js"></script> | |
</head> | |
<body style="background-color: #0a0d0d; padding: 16px; color: #f5fafa; text-align: center; font-family: faktnormal"> | |
<div style="display: inline-block; max-width: 400px"> | |
<img src="https://protonresources.com/img/logo.475b3e38.svg" alt="" /> | |
<br /> | |
<br /> | |
<span>Proton WebAuth</span> | |
<br /> | |
<br /> | |
<span>... connecting ...</span> | |
<br /> | |
<br /> | |
<span id="open-login" style="cursor: pointer; text-decoration: underline; color: #a4b1b3">Open login again</span> | |
</div> | |
<style> | |
@font-face { | |
font-family: 'faktnormal'; | |
font-style: normal; | |
font-weight: 400; | |
font-display: swap; | |
src: local('faktnormal'), url(/font/fakt-normal.woff2) format('woff2'), url(/font/fakt-normal.ttf) format('ttf'); | |
} | |
@font-face { | |
font-family: 'faktmedium'; | |
font-style: normal; | |
font-weight: 500; | |
font-display: swap; | |
src: local('faktmedium'), url(/font/fakt-medium.woff2) format('woff2'), url(/font/fakt-medium.ttf) format('ttf'); | |
} | |
@font-face { | |
font-family: 'faktsemibold'; | |
font-style: normal; | |
font-weight: 600; | |
font-display: swap; | |
src: local('faktsemibold'), url(/font/fakt-semibold.woff2) format('woff2'), url(/font/fakt-semibold.ttf) format('ttf'); | |
} | |
</style> | |
<script type="module"> | |
let link = undefined | |
let session = undefined | |
let accountData = undefined | |
const appIdentifier = 'LunarCrush' | |
const chainId = '384da888112027f0321850a169f737c33e53b388aad48b5adace4bab97f437e0' | |
const endpoints = ['https://proton.greymass.com'] | |
const updateStatus = async () => { | |
console.log({ | |
link, | |
session, | |
accountData, | |
}) | |
if (session && session.auth) { | |
console.log('sending') | |
await sendTransaction() | |
} else { | |
console.log('ignore') | |
} | |
} | |
const login = async (restoreSession) => { | |
const { link: localLink, session: localSession, } = await ProtonWebSDK({ | |
linkOptions: { | |
endpoints, | |
chainId, | |
restoreSession, | |
}, | |
transportOptions: { | |
requestAccount: appIdentifier, | |
}, | |
selectorOptions: { | |
appName: 'LunarCrush', | |
appLogo: 'https://lunarcrush.com/apple-touch-icon.png', | |
customStyleOptions: { | |
modalBackgroundColor: '#1A1F20', | |
logoBackgroundColor: '', | |
isLogoRound: true, | |
optionBackgroundColor: '', | |
optionFontColor: '#A4B1B3', | |
primaryFontColor: '#F5FAFA', | |
secondaryFontColor: '#F5FAFA', | |
linkColor: '#A4B1B3', | |
}, | |
}, | |
}) | |
link = localLink | |
session = localSession | |
updateStatus() | |
} | |
const sendTransaction = async () => { | |
if (session && session.auth) { | |
const actions = [ | |
{ | |
account: 'xtokens', | |
name: 'transfer', | |
authorization: [session.auth], | |
data: { | |
from: session.auth.actor, | |
to: 'lunarcrush', | |
quantity: '0.000000 XUSDT', | |
memo: 'I am creating a signed message to prove cryptographic ownership of a proton address', | |
}, | |
}, | |
] | |
console.log('step 1', 'actions', actions) | |
try { | |
console.log('trying...') | |
const result = await session.transact({ actions: actions }, { broadcast: false }).then(a => { | |
console.log('then') | |
console.log('a', a) | |
}) | |
console.log('result', result) | |
return result | |
} catch (e) { | |
console.error(e) | |
return e | |
} | |
} else { | |
console.log('cannot send session', session) | |
} | |
} | |
const logout = async () => { | |
if (link && session) { | |
await link.removeSession(appIdentifier, session.auth, chainId) | |
} | |
session = undefined | |
link = undefined | |
updateStatus() | |
} | |
document.querySelector('#open-login').onclick = function () { | |
login(false) | |
} | |
// Restore | |
if (session && session.auth) { | |
login(true) | |
} else { | |
login(false) | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment