pleaseshutup/proton-webauth.html

## proton-webauth.html
<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>
	<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>