321 lines
7.3 KiB
Svelte
321 lines
7.3 KiB
Svelte
<script lang="ts">
|
|
import Portis from '@portis/web3';
|
|
import { Client } from '@spruceid/siwe-web3modal';
|
|
import Torus from '@toruslabs/torus-embed';
|
|
import WalletConnectProvider from '@walletconnect/web3-provider';
|
|
import Fortmatic from 'fortmatic';
|
|
import { onMount } from 'svelte';
|
|
import WalletLink from 'walletlink';
|
|
|
|
// TODO: REMOVE DEFAULTS:
|
|
// main.ts will parse the params from the server
|
|
export let domain: string;
|
|
export let nonce: string;
|
|
export let redirect: string;
|
|
export let state: string;
|
|
export let oidc_nonce: string;
|
|
export let client_id: string;
|
|
|
|
// Could be exposed in the future.
|
|
export let useENS: boolean = true;
|
|
|
|
$: status = 'Not Logged In';
|
|
|
|
let client = new Client({
|
|
session: {
|
|
domain: window.location.host,
|
|
uri: window.location.origin,
|
|
useENS,
|
|
version: '1',
|
|
// TODO: Vet this as the default statement.
|
|
statement: `You are signing-in to ${domain}.`,
|
|
resources: [redirect],
|
|
},
|
|
modal: {
|
|
theme: 'dark',
|
|
providerOptions: {
|
|
walletconnect: {
|
|
package: WalletConnectProvider,
|
|
options: {
|
|
infuraId: process.env.INFURA_ID,
|
|
pollingInterval: 100000,
|
|
},
|
|
},
|
|
torus: {
|
|
package: Torus,
|
|
},
|
|
portis: {
|
|
package: Portis,
|
|
options: {
|
|
id: process.env.PORTIS_ID,
|
|
},
|
|
},
|
|
fortmatic: {
|
|
package: Fortmatic,
|
|
options: {
|
|
key: process.env.FORTMATIC_KEY,
|
|
},
|
|
},
|
|
'custom-coinbase': {
|
|
display: {
|
|
logo: 'img/coinbase.svg',
|
|
name: 'Coinbase',
|
|
description: 'Scan with WalletLink to connect',
|
|
},
|
|
options: {
|
|
appName: 'Sign-In with Ethereum',
|
|
networkUrl: `https://mainnet.infura.io/v3/${process.env.INFURA_ID}`,
|
|
chainId: 1,
|
|
darkMode: false,
|
|
},
|
|
package: WalletLink,
|
|
connector: async (_, options) => {
|
|
const { appName, networkUrl, chainId, darkMode } = options;
|
|
const walletLink = new WalletLink({
|
|
appName,
|
|
darkMode,
|
|
});
|
|
const provider = walletLink.makeWeb3Provider(networkUrl, chainId);
|
|
await provider.enable();
|
|
return provider;
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
let client_metadata = {};
|
|
onMount(async () => {
|
|
try {
|
|
client_metadata = JSON.parse(await fetch(`${window.location.origin}/client/${client_id}`));
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
});
|
|
|
|
let oidc_nonce_param = '';
|
|
if (oidc_nonce != null && oidc_nonce != '') {
|
|
oidc_nonce_param = `&oidc_nonce=${oidc_nonce}`;
|
|
}
|
|
client.on('signIn', (result) => {
|
|
console.log(result);
|
|
window.location.replace(
|
|
`/sign_in?redirect_uri=${encodeURI(redirect)}&state=${encodeURI(state)}&client_id=${encodeURI(
|
|
client_id,
|
|
)}${encodeURI(oidc_nonce_param)}`,
|
|
);
|
|
});
|
|
</script>
|
|
|
|
<div
|
|
class="bg-no-repeat bg-cover bg-center bg-swe-landing font-satoshi bg-gray flex-grow w-full h-screen items-center flex justify-center flex-wrap flex-col"
|
|
style="background-image: url('img/swe-landing.svg');"
|
|
>
|
|
<div class="w-96 text-center bg-white rounded-20 text-grey flex h-100 flex-col p-12 shadow-lg shadow-white">
|
|
{#if client_metadata.logo_uri}
|
|
<div class="flex justify-evenly items-stretch">
|
|
<img height="72" width="72" class="self-center mb-8" src="img/modal_icon.png" alt="Ethereum logo" />
|
|
<img height="72" width="72" class="self-center mb-8" src={client_metadata.logo_uri} alt="Client logo" />
|
|
</div>
|
|
{:else}
|
|
<img height="72" width="72" class="self-center mb-8" src="img/modal_icon.png" alt="Ethereum logo" />
|
|
{/if}
|
|
<h5>Welcome</h5>
|
|
<span class="text-xs">
|
|
Sign-In with Ethereum to continue to {client_metadata.client_name ? client_metadata.client_name : domain}
|
|
</span>
|
|
|
|
<button
|
|
class="h-12 border hover:scale-105 justify-evenly shadow-xl border-white mt-4 duration-100 ease-in-out transition-all transform flex items-center"
|
|
on:click={() => {
|
|
client.signIn(nonce).catch((e) => {
|
|
console.error(e);
|
|
});
|
|
}}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
clip-rule="evenodd"
|
|
fill-rule="evenodd"
|
|
stroke-linejoin="round"
|
|
stroke-miterlimit="1.41421"
|
|
viewBox="170 30 220 350"
|
|
class="w-6 h-8"
|
|
>
|
|
<g fill-rule="nonzero" transform="matrix(.781253 0 0 .781253 180 37.1453)">
|
|
<path d="m127.961 0-2.795 9.5v275.668l2.795 2.79 127.962-75.638z" fill="#343434" /><path
|
|
d="m127.962 0-127.962 212.32 127.962 75.639v-133.801z"
|
|
fill="#8c8c8c"
|
|
/>
|
|
<path d="m127.961 312.187-1.575 1.92v98.199l1.575 4.601 128.038-180.32z" fill="#3c3c3b" /><path
|
|
d="m127.962 416.905v-104.72l-127.962-75.6z"
|
|
fill="#8c8c8c"
|
|
/>
|
|
<path d="m127.961 287.958 127.96-75.637-127.96-58.162z" fill="#141414" /><path
|
|
d="m.001 212.321 127.96 75.637v-133.799z"
|
|
fill="#393939"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
<p class="font-bold">Sign-In with Ethereum</p>
|
|
</button>
|
|
<div class="self-center mt-auto text-center font-semibold text-xs">
|
|
By using this service you agree to the <a href="/legal/terms-of-use.pdf">Terms of Use</a> and
|
|
<a href="/legal/privacy-policy.pdf">Privacy Policy</a>.
|
|
</div>
|
|
|
|
{#if client_metadata.client_uri}
|
|
<span class="text-xs mt-4">Request linked to {client_metadata.client_uri}</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style global lang="postcss">
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
.tooltip {
|
|
@apply invisible absolute;
|
|
}
|
|
|
|
.has-tooltip:hover .tooltip {
|
|
@apply visible z-50;
|
|
}
|
|
html,
|
|
body {
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
font-size: 18px;
|
|
background: #ecf2fe;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
@apply font-satoshi;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
@apply font-extrabold;
|
|
@apply font-satoshi;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 76px;
|
|
line-height: 129px;
|
|
letter-spacing: -4.5%;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 66px;
|
|
line-height: 101px;
|
|
letter-spacing: -3%;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 52px;
|
|
line-height: 80px;
|
|
letter-spacing: -1.5%;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 48px;
|
|
line-height: 63px;
|
|
letter-spacing: -1%;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 32px;
|
|
line-height: 49px;
|
|
letter-spacing: -0.5%;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 24px;
|
|
line-height: 37px;
|
|
letter-spacing: -0.5%;
|
|
}
|
|
|
|
body {
|
|
color: #222222;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #04d2ca;
|
|
}
|
|
|
|
td,
|
|
th {
|
|
font-family: 'Satoshi';
|
|
font-weight: 400;
|
|
}
|
|
|
|
pre {
|
|
white-space: pre-wrap; /* Since CSS 2.1 */
|
|
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
|
|
white-space: -pre-wrap; /* Opera 4-6 */
|
|
white-space: -o-pre-wrap; /* Opera 7 */
|
|
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
|
}
|
|
|
|
.web3modal-modal-lightbox {
|
|
z-index: 30 !important;
|
|
}
|
|
|
|
.walletconnect-modal__base {
|
|
background-color: #273137 !important;
|
|
}
|
|
|
|
.walletconnect-qrcode__text {
|
|
color: white !important;
|
|
}
|
|
|
|
.walletconnect-modal__mobile__toggle {
|
|
background: rgba(255, 255, 255, 0.1) !important;
|
|
}
|
|
|
|
.walletconnect-qrcode__image {
|
|
border: 24px solid white !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.walletconnect-modal__base__row:hover {
|
|
background: rgba(255, 255, 255, 0.1) !important;
|
|
}
|
|
|
|
.walletconnect-modal__mobile__toggle_selector {
|
|
background: rgba(255, 255, 255, 0.2) !important;
|
|
}
|
|
|
|
/**
|
|
Custom scrollbar settings
|
|
*/
|
|
::-webkit-scrollbar-track {
|
|
border-radius: 8px;
|
|
background-color: #ccc;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 8px;
|
|
background-color: #888;
|
|
}
|
|
::-webkit-scrollbar {
|
|
height: 6px;
|
|
border-radius: 8px;
|
|
width: 6px;
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.grecaptcha-badge {
|
|
visibility: hidden;
|
|
}
|
|
</style>
|