413 lines
15 KiB
TypeScript
413 lines
15 KiB
TypeScript
// @ts-ignore
|
||
import lumeLogo from "../../assets/lume-logo.png";
|
||
// @ts-ignore
|
||
import classNames from "classnames";
|
||
import { useEffect, useRef, useState } from "react";
|
||
import * as bip39 from "@scure/bip39";
|
||
import { wordlist } from "@scure/bip39/wordlists/english";
|
||
import { HDKey } from "ed25519-keygen/hdkey";
|
||
import { x25519 } from "@noble/curves/ed25519";
|
||
// @ts-ignore
|
||
import browser from "webextension-polyfill";
|
||
import { bytesToHex, hexToBytes, randomBytes } from "@lumeweb/libweb";
|
||
import { secretbox } from "@noble/ciphers/salsa";
|
||
import "./App.scss";
|
||
import {
|
||
exchangeCommunicationKeys,
|
||
setLoginKey,
|
||
} from "../../../shared/keys.js";
|
||
|
||
const BIP44_PATH = "m/44'/1627'/0'/0'/0'";
|
||
|
||
export default function App() {
|
||
let [currentAction, setCurrentAction] = useState<
|
||
"sign-in" | "create-account" | null
|
||
>(null);
|
||
let [createAccountStep, setCreateAccountStep] = useState<number>(0);
|
||
let [generatedKey, setGeneratedKey] = useState<string[]>([]);
|
||
let [copyKeySuccess, setCopyKeySuccess] = useState<boolean>(false);
|
||
let [copyKeyError, setCopyKeyError] = useState<boolean>(false);
|
||
|
||
let elSwitch = useRef<HTMLDivElement>();
|
||
let elSwitchDefault = useRef<HTMLDivElement>();
|
||
let elSwitchShowKey = useRef<HTMLDivElement>();
|
||
let elContentTextActive = useRef<HTMLDivElement>();
|
||
let elContentTextDefault = useRef<HTMLDivElement>();
|
||
let elContentTextCreateAccount = useRef<HTMLDivElement>();
|
||
let elContentTextWrapper = useRef<HTMLDivElement>();
|
||
let elContentTextShowKey = useRef<HTMLDivElement>();
|
||
let resizeTimeout = useRef<any>();
|
||
let copyKeyTimeout = useRef<any>();
|
||
let copyKeyCallback = useRef<any>();
|
||
let elInputKey = useRef<HTMLInputElement>();
|
||
|
||
function createAccount() {
|
||
setCurrentAction("create-account");
|
||
setCreateAccountStep(1);
|
||
}
|
||
|
||
function createAccountCancel() {
|
||
setCurrentAction(null);
|
||
setCreateAccountStep(0);
|
||
}
|
||
|
||
function signIn() {
|
||
setCurrentAction("sign-in");
|
||
}
|
||
|
||
function inputKeySignIn() {
|
||
if (!bip39.validateMnemonic(elInputKey.current.value, wordlist)) {
|
||
alert("invalid key");
|
||
return;
|
||
}
|
||
|
||
processSignIn(elInputKey.current.value);
|
||
}
|
||
|
||
function createAccountReady() {
|
||
if (createAccountStep !== 1) {
|
||
return;
|
||
}
|
||
|
||
setCreateAccountStep(2);
|
||
}
|
||
|
||
function showKey() {
|
||
if (createAccountStep !== 2) {
|
||
return;
|
||
}
|
||
|
||
// generate key
|
||
setGeneratedKey(bip39.generateMnemonic(wordlist).split(" "));
|
||
|
||
setCreateAccountStep(3);
|
||
elSwitch.current.style.height = elSwitchDefault.current.offsetHeight + "px";
|
||
elSwitchDefault.current.style.position = "absolute";
|
||
|
||
setTimeout(() => {
|
||
setContentTextHeight(elContentTextShowKey);
|
||
elSwitch.current.style.height =
|
||
elSwitchShowKey.current.offsetHeight + "px";
|
||
|
||
elSwitch.current.addEventListener("transitionend", (event) => {
|
||
if (event.target !== elSwitch.current) {
|
||
return;
|
||
}
|
||
|
||
elSwitchShowKey.current.style.position = "static";
|
||
elSwitch.current.style.height = "";
|
||
});
|
||
}, 0);
|
||
}
|
||
|
||
function createAccountBack() {
|
||
setCreateAccountStep(1);
|
||
}
|
||
|
||
function showKeyWarning() {
|
||
if (createAccountStep !== 3) {
|
||
return;
|
||
}
|
||
|
||
setCreateAccountStep(4);
|
||
}
|
||
|
||
function generatedKeySignIn() {
|
||
const seed = generatedKey.join(" ");
|
||
|
||
if (!bip39.validateMnemonic(seed, wordlist)) {
|
||
alert("invalid key");
|
||
return;
|
||
}
|
||
|
||
processSignIn(seed);
|
||
}
|
||
|
||
const processSignIn = async (wordSeed) => {
|
||
const seed = await bip39.mnemonicToSeed(wordSeed);
|
||
const key = HDKey.fromMasterSeed(seed).derive(BIP44_PATH);
|
||
|
||
await setLoginKey(key.privateKey);
|
||
|
||
window.setTimeout(() => {
|
||
window.location.href = "/dashboard.html";
|
||
}, 1000);
|
||
};
|
||
|
||
function setContentTextHeight(element) {
|
||
elContentTextActive.current = element;
|
||
elContentTextWrapper.current.style.height = element.offsetHeight + "px";
|
||
}
|
||
|
||
function copyKey() {
|
||
clearTimeout(copyKeyTimeout.current);
|
||
|
||
navigator.clipboard
|
||
.writeText(generatedKey.join(" "))
|
||
.then(() => {
|
||
copyKeyCallback.current?.();
|
||
|
||
setCopyKeySuccess(true);
|
||
|
||
copyKeyCallback.current = () => {
|
||
copyKeyCallback.current = undefined;
|
||
setCopyKeySuccess(null);
|
||
};
|
||
|
||
copyKeyTimeout.current = setTimeout(copyKeyCallback.current, 750);
|
||
})
|
||
.catch((error) => {
|
||
console.error(error);
|
||
|
||
copyKeyCallback.current?.();
|
||
|
||
setCopyKeyError(true);
|
||
|
||
copyKeyCallback.current = () => {
|
||
copyKeyCallback.current = undefined;
|
||
setCopyKeyError(false);
|
||
};
|
||
|
||
copyKeyTimeout.current = setTimeout(copyKeyCallback.current, 750);
|
||
});
|
||
}
|
||
|
||
useEffect(() => {
|
||
const onResize = () => {
|
||
clearTimeout(resizeTimeout.current);
|
||
|
||
resizeTimeout.current = setTimeout(() => {
|
||
setContentTextHeight(elContentTextActive);
|
||
}, 25);
|
||
};
|
||
|
||
window.addEventListener("resize", onResize);
|
||
});
|
||
|
||
return (
|
||
<>
|
||
<header>
|
||
<img src={lumeLogo} alt="Lume" />
|
||
</header>
|
||
<main
|
||
className={classNames({
|
||
"sign-in": currentAction === "sign-in",
|
||
"create-account": currentAction === "create-account",
|
||
"create-account-step-2": createAccountStep === 2,
|
||
"create-account-step-3": createAccountStep === 3,
|
||
"create-account-step-4": createAccountStep === 4,
|
||
})}>
|
||
<div className="art">
|
||
<div className="gradient-1" />
|
||
<div className="gradient-2" />
|
||
<div className="gradient-3" />
|
||
</div>
|
||
<div className="content">
|
||
<div>
|
||
<div>
|
||
<div id="content-text-wrapper" ref={elContentTextWrapper}>
|
||
<div id="content-text-default" ref={elContentTextDefault}>
|
||
<h1>Access the open web with ease</h1>
|
||
<p>
|
||
Seamless access to the open web with Lume, integrated
|
||
Handshake (HNS) and Ethereum (ENS) Support.
|
||
</p>
|
||
</div>
|
||
<div
|
||
id="content-text-create-account"
|
||
ref={elContentTextCreateAccount}>
|
||
<h1>Set up your account key</h1>
|
||
<p>
|
||
Let’s create your account key or seed phrase. This phrase
|
||
will be used to access your Lume account. Make sure to keep
|
||
it safe at all times.
|
||
</p>
|
||
</div>
|
||
<div id="content-text-show-key" ref={elContentTextShowKey}>
|
||
<h1>Here’s your account key</h1>
|
||
<p>Make sure to keep it safe at all times.</p>
|
||
</div>
|
||
</div>
|
||
<div id="switch" ref={elSwitch}>
|
||
<div id="switch-default" ref={elSwitchDefault}>
|
||
<div className="content-action-wrapper">
|
||
<div className="content-action-sign-in">
|
||
<div className="content-action-inner">
|
||
<div className="btn-wrapper sign-in-btn">
|
||
<button
|
||
className="btn-main btn-black"
|
||
onClick={signIn}>
|
||
Sign in with Account Key
|
||
</button>
|
||
</div>
|
||
<div className="sign-in-form">
|
||
<div className="input-wrapper">
|
||
<input
|
||
type="text"
|
||
placeholder="Insert your 12-word account key here"
|
||
ref={elInputKey}
|
||
/>
|
||
</div>
|
||
<div className="btn-wrapper">
|
||
<button
|
||
className="btn-main btn-green"
|
||
onClick={inputKeySignIn}>
|
||
Login
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="content-action-create-account">
|
||
<div className="content-action-inner">
|
||
<div className="btn-wrapper create-account-ready-btn">
|
||
<button
|
||
className="btn-main btn-green"
|
||
onClick={createAccountReady}>
|
||
I get it, I’ll keep it safe. Let’s see the key.
|
||
</button>
|
||
</div>
|
||
<div className="create-account-ready">
|
||
<div className="warning">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke-width="1.5"
|
||
stroke="currentColor">
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
|
||
/>
|
||
</svg>
|
||
<div>
|
||
Should you lose this key, you will be forced to
|
||
create a new account.
|
||
</div>
|
||
</div>
|
||
<div className="btn-wrapper create-account-show-key-btn">
|
||
<button className="btn-main" onClick={showKey}>
|
||
I’m ready, show me the key
|
||
</button>
|
||
</div>
|
||
<div className="btn-wrapper create-account-back-btn">
|
||
<button onClick={createAccountBack}>
|
||
<span>Go back</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="separator">
|
||
<span>OR</span>
|
||
</div>
|
||
<div className="btn-stack">
|
||
<div className="btn-wrapper create-account-btn">
|
||
<button
|
||
className="btn-main btn-green"
|
||
onClick={createAccount}>
|
||
Create an Account
|
||
</button>
|
||
</div>
|
||
<div className="btn-wrapper create-account-gray-btn">
|
||
<button
|
||
className="btn-main btn-black gray-text"
|
||
onClick={createAccount}>
|
||
Create an Account
|
||
</button>
|
||
</div>
|
||
<div className="btn-wrapper create-account-cancel-btn">
|
||
<button
|
||
className="btn-main btn-black gray-text"
|
||
onClick={createAccountCancel}>
|
||
Go back
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="switch-show-key" ref={elSwitchShowKey}>
|
||
{createAccountStep > 2 && (
|
||
<div className="show-key-wrapper">
|
||
<div className="show-key-grid">
|
||
{generatedKey.map((word, index) => (
|
||
<div>
|
||
<span>{index + 1}</span>
|
||
{word}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="warning">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke-width="1.5"
|
||
stroke="currentColor">
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
|
||
/>
|
||
</svg>
|
||
<div>
|
||
Make sure to write this key down for safe keeping.
|
||
</div>
|
||
</div>
|
||
<div className="btn-wrapper show-key-copy-btn">
|
||
<button
|
||
className={classNames("btn-main btn-black", {
|
||
success: copyKeySuccess,
|
||
error: copyKeyError,
|
||
})}
|
||
onClick={copyKey}>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke-width="1.5"
|
||
stroke="currentColor">
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"
|
||
/>
|
||
</svg>
|
||
{!copyKeySuccess &&
|
||
!copyKeyError &&
|
||
"Copy Account Key"}
|
||
{copyKeySuccess &&
|
||
!copyKeyError &&
|
||
"Account Key Copied"}
|
||
{!copyKeySuccess &&
|
||
copyKeyError &&
|
||
"Account Key Copy Failed"}
|
||
</button>
|
||
</div>
|
||
<div className="btn-stack">
|
||
<div className="btn-wrapper show-key-continue-btn">
|
||
<button className="btn-main" onClick={showKeyWarning}>
|
||
Continue
|
||
</button>
|
||
</div>
|
||
<div className="btn-wrapper show-key-login-btn">
|
||
<button
|
||
className="btn-main btn-green"
|
||
onClick={generatedKeySignIn}>
|
||
Login
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</>
|
||
);
|
||
}
|