feat: mnemonic

doc/CONTRIBUTION.md

@@ -4,7 +4,7 @@ We welcome and appreciate new contributions.
 
 ### Testnet/testing-accounts for development use Alby testnet
 
-We set up our own internal testnet, which can be used for your development.
+We have setup some testnet nodes, which can be used for your development.
 If this is not reachable please let us know.
 
 - [Test-setup](https://github.com/getAlby/lightning-browser-extension/wiki/Test-setup) for different connectors (i.e. LND)

package.json

@@ -39,6 +39,9 @@
  "@headlessui/react": "^1.7.14",
  "@lightninglabs/lnc-web": "^0.2.4-alpha",
  "@noble/secp256k1": "^1.7.1",
+ "@scure/bip32": "^1.3.0",
+ "@scure/bip39": "^1.2.0",
+ "@scure/btc-signer": "^0.5.1",
  "@tailwindcss/forms": "^0.5.3",
  "@vespaiach/axios-fetch-adapter": "^0.3.0",
  "axios": "^0.27.2",

src/app/components/Alert/index.tsx

@@ -0,0 +1,22 @@
+import { classNames } from "~/app/utils";
+
+type Props = {
+ type: "warn" | "info";
+ children: React.ReactNode;
+};
+
+export default function Alert({ type, children }: Props) {
+ return (
+ <div
+ className={classNames(
+ "rounded-md font-medium p-4",
+ type == "warn" &&
+ "text-orange-700 bg-orange-50 dark:text-orange-200 dark:bg-orange-900",
+ type == "info" &&
+ "text-blue-700 bg-blue-50 dark:text-blue-200 dark:bg-blue-900"
+ )}
+ >
+ <p>{children}</p>
+ </div>
+ );
+}

src/app/components/Badge/index.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
 
 type Props = {
- label: "active" | "auth";
+ label: "active" | "auth" | "imported";
  color: string;
  textColor: string;
  small?: boolean;

src/app/components/Button/index.tsx

@@ -9,6 +9,7 @@ export type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  label: string;
  icon?: React.ReactNode;
  primary?: boolean;
+ error?: boolean;
  outline?: boolean;
  loading?: boolean;
  disabled?: boolean;
@@ -30,13 +31,16 @@ const Button = forwardRef(
  primary = false,
  outline = false,
  loading = false,
+ error = false,
  flex = false,
  className,
+ ...otherProps
  }: Props,
  ref: Ref<HTMLButtonElement>
  ) => {
  return (
  <button
+ {...otherProps}
  ref={ref}
  type={type}
  className={classNames(
@@ -48,6 +52,8 @@ const Button = forwardRef(
  ? "bg-primary-gradient border-2 border-transparent text-black"
  : outline
  ? "bg-white text-gray-700 border-2 border-primary dark:text-primary dark:bg-surface-02dp"
+ : error
+ ? "bg-white text-gray-700 border-2 border-red-500 dark:text-red-500 dark:bg-surface-02dp"
  : `bg-white text-gray-700 dark:bg-surface-02dp dark:text-neutral-200 dark:border-neutral-800`,
  primary && !disabled && "hover:bg-primary-gradient-hover",
  !primary &&

src/app/components/ContentBox/index.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export function ContentBox({ children }: React.PropsWithChildren<object>) {
+ return (
+ <div className="mt-12 shadow bg-white rounded-md p-10 divide-black/10 dark:divide-white/10 dark:bg-surface-02dp flex flex-col gap-4">
+ {children}
+ </div>
+ );
+}

src/app/components/InputCopyButton/index.tsx

@@ -0,0 +1,41 @@
+import { CopyIcon as CopyFilledIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import { CopyIcon } from "@bitcoin-design/bitcoin-icons-react/outline";
+import { useState } from "react";
+import { toast } from "react-toastify";
+import { classNames } from "~/app/utils";
+
+type Props = {
+ value: string;
+ className?: string;
+};
+
+function InputCopyButton({ value, className }: Props) {
+ const [copied, setCopied] = useState(false);
+ const CurrentIcon = copied ? CopyFilledIcon : CopyIcon;
+ return (
+ <button
+ type="button"
+ tabIndex={-1}
+ className={classNames(
+ "flex justify-center items-center h-8 w-10",
+ !!className && className
+ )}
+ onClick={async () => {
+ try {
+ navigator.clipboard.writeText(value);
+ setCopied(true);
+ setTimeout(() => {
+ setCopied(false);
+ }, 1000);
+ } catch (e) {
+ if (e instanceof Error) {
+ toast.error(e.message);
+ }
+ }
+ }}
+ >
+ <CurrentIcon className="w-6 h-6" />
+ </button>
+ );
+}
+export default InputCopyButton;

src/app/components/PasswordForm/index.tsx

@@ -99,7 +99,6 @@ export default function PasswordForm<
  type={passwordView ? "text" : "password"}
  required
  onChange={handleChange}
- tabIndex={0}
  minLength={minLength}
  pattern={minLength ? `.{${minLength},}` : undefined}
  title={
@@ -140,7 +139,6 @@ export default function PasswordForm<
  required
  onChange={handleChange}
  onBlur={validate}
- tabIndex={1}
  endAdornment={
  <button
  type="button"

src/app/components/ScrollToTop/index.tsx

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+function ScrollToTop() {
+ const location = useLocation();
+ // Scroll to top if path changes
+ useEffect(() => {
+ window.scrollTo(0, 0);
+ }, [location.pathname]);
+
+ return null;
+}
+
+export default ScrollToTop;

src/app/components/Tips/index.tsx

@@ -43,7 +43,7 @@ export default function Tips() {
  border: "border-purple-500",
  arrow: "text-purple-500",
  backgroundIcon: <MnemonicTipCardIcon />,
- link: `/accounts/${accountId}`,
+ link: `/accounts/${accountId}/secret-key/generate`,
  },
  } as const),
  [accountId]

src/app/components/form/Input/index.tsx

@@ -5,6 +5,7 @@ import { classNames } from "../../../utils";
 type Props = {
  suffix?: string;
  endAdornment?: React.ReactNode;
+ block?: boolean;
 };
 
 export default function Input({
@@ -26,25 +27,31 @@ export default function Input({
  max,
  suffix,
  endAdornment,
+ block = true,
+ className,
+ ...otherProps
 }: React.InputHTMLAttributes<HTMLInputElement> & Props) {
  const inputEl = useRef<HTMLInputElement>(null);
  const outerStyles =
- "rounded-md border border-gray-300 dark:border-neutral-800 transition duration-300";
+ "rounded-md border border-gray-300 dark:border-neutral-800 transition duration-300 flex-1";
 
  const inputNode = (
  <input
+ {...otherProps}
  ref={inputEl}
  type={type}
  name={name}
  id={id}
  className={classNames(
- "block w-full placeholder-gray-500 dark:placeholder-neutral-600",
+ "placeholder-gray-500 dark:placeholder-neutral-600",
+ block && "block w-full",
  !suffix && !endAdornment
  ? `${outerStyles} focus:ring-primary focus:border-primary focus:ring-1`
  : "pr-0 border-0 focus:ring-0",
  disabled
  ? "bg-gray-50 dark:bg-surface-01dp text-gray-500 dark:text-neutral-500"
- : "bg-white dark:bg-black dark:text-white"
+ : "bg-white dark:bg-black dark:text-white",
+ !!className && className
  )}
  placeholder={placeholder}
  required={required}
@@ -68,7 +75,8 @@ export default function Input({
  <div
  className={classNames(
  "flex items-stretch overflow-hidden",
- "focus-within:ring-primary focus-within:border-primary focus-within:dark:border-primary focus-within:ring-1",
+ !disabled &&
+ "focus-within:ring-primary focus-within:border-primary focus-within:dark:border-primary focus-within:ring-1",
  outerStyles
  )}
  >
@@ -84,7 +92,12 @@ export default function Input({
  </span>
  )}
  {endAdornment && (
- <span className="flex items-center bg-white dark:bg-black dark:text-neutral-400">
+ <span
+ className={classNames(
+ "flex items-center bg-white dark:bg-black dark:text-neutral-400",
+ !!disabled && "bg-gray-50 dark:bg-surface-01dp"
+ )}
+ >
  {endAdornment}
  </span>
  )}

src/app/components/form/TextField/index.tsx

@@ -36,7 +36,7 @@ const TextField = ({
  {label}
  </label>
 
- <div className="mt-1">
+ <div className="mt-1 flex flex-col flex-1">
  <Input
  autoComplete={autoComplete}
  autoFocus={autoFocus}

src/app/components/mnemonic/MnemonicInputs/index.tsx

@@ -0,0 +1,99 @@
+import {
+ HiddenIcon,
+ VisibleIcon,
+} from "@bitcoin-design/bitcoin-icons-react/filled";
+import { wordlist } from "@scure/bip39/wordlists/english";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import Input from "~/app/components/form/Input";
+
+type MnemonicInputsProps = {
+ mnemonic?: string;
+ setMnemonic?(mnemonic: string): void;
+ readOnly?: boolean;
+};
+
+export default function MnemonicInputs({
+ mnemonic,
+ setMnemonic,
+ readOnly,
+ children,
+}: React.PropsWithChildren<MnemonicInputsProps>) {
+ const { t } = useTranslation("translation", {
+ keyPrefix: "accounts.account_view.mnemonic",
+ });
+ const [revealedIndex, setRevealedIndex] = useState<number | undefined>(
+ undefined
+ );
+
+ const words = mnemonic?.split(" ") || [];
+ while (words.length < 12) {
+ words.push("");
+ }
+
+ return (
+ <div className="border-[1px] border-gray-200 rounded-lg py-8 px-4 flex flex-col gap-8 items-center justify-center w-[580px] self-center">
+ <h3 className="font-semibold dark:text-white">{t("inputs.title")}</h3>
+ <div className="flex flex-wrap gap-4 justify-center items-center">
+ {words.map((word, i) => {
+ const isRevealed = revealedIndex === i;
+ const inputId = `mnemonic-word-${i}`;
+ return (
+ <div key={i} className="flex justify-center items-center">
+ <span className="w-7 text-gray-500 slashed-zero dark:text-neutral-500">
+ {i + 1}.
+ </span>
+ <div className="relative">
+ <Input
+ id={inputId}
+ autoFocus={!readOnly && i === 0}
+ onFocus={() => setRevealedIndex(i)}
+ onBlur={() => setRevealedIndex(undefined)}
+ readOnly={readOnly}
+ block={false}
+ className="w-24 text-center"
+ list={readOnly ? undefined : "wordlist"}
+ value={isRevealed ? word : word.length ? "•••••" : ""}
+ onChange={(e) => {
+ if (revealedIndex !== i) {
+ return;
+ }
+ words[i] = e.target.value;
+ setMnemonic?.(
+ words
+ .map((word) => word.trim())
+ .join(" ")
+ .trim()
+ );
+ }}
+ endAdornment={
+ <button
+ type="button"
+ tabIndex={-1}
+ className="mr-2"
+ onClick={() => document.getElementById(inputId)?.focus()}
+ >
+ {isRevealed ? (
+ <VisibleIcon className="h-6 w-6" />
+ ) : (
+ <HiddenIcon className="h-6 w-6" />
+ )}
+ </button>
+ }
+ />
+ </div>
+ </div>
+ );
+ })}
+ </div>
+ {!readOnly && (
+ <datalist id="wordlist">
+ {wordlist.map((word) => (
+ <option key={word} value={word} />
+ ))}
+ </datalist>
+ )}
+ {children}
+ </div>
+ );
+}

src/app/components/mnemonic/SecretKeyDescription/index.tsx

@@ -0,0 +1,39 @@
+import { useTranslation } from "react-i18next";
+import NostrIcon from "~/app/icons/NostrIcon";
+
+function SecretKeyDescription() {
+ const { t } = useTranslation("translation", {
+ keyPrefix: "accounts.account_view.mnemonic",
+ });
+
+ return (
+ <>
+ <p className="text-gray-500 dark:text-neutral-500">
+ {t("backup.description1")}
+ </p>
+ <div className="flex flex-col gap-4">
+ <ProtocolListItem
+ icon={<NostrIcon className="text-gray-500 dark:text-neutral-500" />}
+ title={t("backup.protocols.nostr")}
+ />
+ </div>
+
+ <p className="mb-8 text-gray-500 dark:text-neutral-500">
+ {t("backup.description2")}
+ </p>
+ </>
+ );
+}
+
+export default SecretKeyDescription;
+
+type ProtocolListItemProps = { icon: React.ReactNode; title: string };
+
+function ProtocolListItem({ icon, title }: ProtocolListItemProps) {
+ return (
+ <div className="flex gap-2">
+ {icon}
+ <span className="text-gray-500 dark:text-neutral-500">{title}</span>
+ </div>
+ );
+}