feat: hardware wallet support

jest.config.js

@@ -9,6 +9,9 @@ module.exports = {
         "^.+\\.css": "<rootDir>/tests/mocks/StylesMock.tsx",
         "^.+\\.scss": "<rootDir>/tests/mocks/StylesMock.tsx",
         "boltz-bolt12": "<rootDir>/tests/mocks/bolt12.ts",
+        "@ledgerhq/hw-app-eth": "<rootDir>/tests/mocks/LedgerMock.ts",
+        "@ledgerhq/hw-transport-webhid": "<rootDir>/tests/mocks/LedgerMock.ts",
+        "@trezor/connect-web": "<rootDir>/tests/mocks/TrezorMock.ts",
     },
     globals: {
         Buffer: Buffer,

package.json

@@ -56,10 +56,13 @@
         "@bitcoinerlab/secp256k1": "^1.1.1",
         "@fontsource/noto-mono": "^5.0.11",
         "@fontsource/noto-sans": "^5.0.22",
+        "@ledgerhq/hw-app-eth": "^6.38.2",
+        "@ledgerhq/hw-transport-webhid": "^6.29.4",
         "@scure/base": "^1.1.7",
         "@solid-primitives/i18n": "^2.1.1",
         "@solid-primitives/storage": "^4.0.0",
         "@solidjs/router": "^0.14.3",
+        "@trezor/connect-web": "^9.4.2",
         "@vulpemventures/secp256k1-zkp": "^3.2.1",
         "bignumber.js": "^9.1.2 ",
         "bitcoinjs-lib": "^6.1.6",

src/components/ConnectWallet.tsx

@@ -10,27 +10,14 @@ import {
     createSignal,
 } from "solid-js";
 
+import type { EIP6963ProviderInfo } from "../consts/Types";
 import { useCreateContext } from "../context/Create";
 import { useGlobalContext } from "../context/Global";
-import { EIP6963ProviderInfo, useWeb3Signer } from "../context/Web3";
+import { useWeb3Signer } from "../context/Web3";
 import "../style/web3.scss";
 import { formatError } from "../utils/errors";
 import { cropString, isMobile } from "../utils/helper";
-
-const connect = async (
-    notify: (type: string, message: string) => void,
-    connectProvider: (rdns: string) => Promise<void>,
-    provider: EIP6963ProviderInfo,
-) => {
-    try {
-        await connectProvider(provider.rdns);
-    } catch (e) {
-        log.error(
-            `Provider connect to ${provider.rdns} failed: ${formatError(e)}`,
-        );
-        notify("error", `Wallet connection failed: ${formatError(e)}`);
-    }
-};
+import HardwareDerivationPaths, { connect } from "./HardwareDerivationPaths";
 
 const Modal = ({
     show,
@@ -42,18 +29,45 @@ const Modal = ({
     const { t, notify } = useGlobalContext();
     const { providers, connectProvider } = useWeb3Signer();
 
+    const [showDerivationPaths, setShowDerivationPaths] =
+        createSignal<boolean>(false);
+    const [hardwareProvider, setHardwareProvider] =
+        createSignal<EIP6963ProviderInfo>(undefined);
+
     const Provider = ({ provider }: { provider: EIP6963ProviderInfo }) => {
         return (
             <div
                 class="provider-modal-entry-wrapper"
-                onClick={() => connect(notify, connectProvider, provider)}>
+                onClick={async () => {
+                    if (provider.disabled) {
+                        return;
+                    }
+
+                    if (provider.isHardware) {
+                        setHardwareProvider(provider);
+                        setShowDerivationPaths(true);
+                        return;
+                    }
+
+                    await connect(notify, connectProvider, provider);
+                }}>
                 <hr />
-                <div class="provider-modal-entry">
-                    <img
-                        class="provider-modal-icon"
-                        src={provider.icon}
-                        alt={`${provider.name} icon`}
-                    />
+                <div
+                    class="provider-modal-entry"
+                    data-disabled={provider.disabled}
+                    title={
+                        provider.disabled
+                            ? t("not_supported_in_browser")
+                            : undefined
+                    }>
+                    <Show when={provider.icon !== undefined}>
+                        <img
+                            class="provider-modal-icon"
+                            src={provider.icon}
+                            alt={`${provider.name} icon`}
+                        />
+                    </Show>
+
                     <h4>{provider.name}</h4>
                 </div>
             </div>
@@ -62,7 +76,6 @@ const Modal = ({
 
     return (
         <div
-            id="settings-menu"
             class="frame assets-select"
             onClick={() => setShow(false)}
             style={show() ? "display: block;" : "display: none;"}>
@@ -81,6 +94,11 @@ const Modal = ({
                     {(item) => <Provider provider={item.info} />}
                 </For>
             </div>
+            <HardwareDerivationPaths
+                show={showDerivationPaths}
+                provider={hardwareProvider}
+                setShow={setShowDerivationPaths}
+            />
         </div>
     );
 };

src/components/CreateButton.tsx

@@ -302,8 +302,13 @@ export const CreateButton = () => {
 
             await setSwapStorage({
                 ...data,
-                signer: signer()?.address,
+                signer:
+                    // We do not have to commit to a signer when creating submarine swaps
+                    swapType() !== SwapType.Submarine
+                        ? signer()?.address
+                        : undefined,
             });
+
             setInvoice("");
             setInvoiceValid(false);
             setOnchainAddress("");

src/components/HardwareDerivationPaths.tsx

@@ -0,0 +1,196 @@
+import log from "loglevel";
+import { IoClose } from "solid-icons/io";
+import { Accessor, For, Setter, Show, createSignal } from "solid-js";
+
+import type {
+    EIP6963ProviderDetail,
+    EIP6963ProviderInfo,
+} from "../consts/Types";
+import { useGlobalContext } from "../context/Global";
+import { useWeb3Signer } from "../context/Web3";
+import { formatError } from "../utils/errors";
+import {
+    HardwareSigner,
+    derivationPaths,
+} from "../utils/hardware/HadwareSigner";
+import LoadingSpinner from "./LoadingSpinner";
+
+export const connect = async (
+    notify: (type: string, message: string) => void,
+    connectProvider: (rdns: string) => Promise<void>,
+    provider: EIP6963ProviderInfo,
+) => {
+    try {
+        await connectProvider(provider.rdns);
+    } catch (e) {
+        log.error(
+            `Provider connect to ${provider.rdns} failed: ${formatError(e)}`,
+        );
+        notify("error", `Wallet connection failed: ${formatError(e)}`);
+    }
+};
+
+const connectHardware = async (
+    notify: (type: string, message: string) => void,
+    connectProvider: (rdns: string) => Promise<void>,
+    provider: Accessor<EIP6963ProviderInfo>,
+    providers: Accessor<Record<string, EIP6963ProviderDetail>>,
+    path: string,
+    setLoading: Setter<boolean>,
+) => {
+    try {
+        setLoading(true);
+
+        const hardwareProvider = provider();
+        const prov = providers()[hardwareProvider.rdns]
+            .provider as unknown as HardwareSigner;
+        prov.setDerivationPath(path);
+
+        await connect(notify, connectProvider, hardwareProvider);
+    } finally {
+        setLoading(false);
+    }
+};
+
+const DerivationPath = ({
+    name,
+    path,
+    provider,
+    setLoading,
+}: {
+    name: string;
+    path: string;
+    provider: Accessor<EIP6963ProviderInfo>;
+    setLoading: Setter<boolean>;
+}) => {
+    const { notify } = useGlobalContext();
+    const { connectProvider, providers } = useWeb3Signer();
+
+    return (
+        <div
+            class="provider-modal-entry-wrapper"
+            onClick={async () => {
+                await connectHardware(
+                    notify,
+                    connectProvider,
+                    provider,
+                    providers,
+                    path,
+                    setLoading,
+                );
+            }}>
+            <hr />
+            <div class="provider-modal-entry">
+                <h4>{name}</h4>
+                <span>{path}</span>
+            </div>
+        </div>
+    );
+};
+
+const CustomPath = ({
+    provider,
+    setLoading,
+}: {
+    provider: Accessor<EIP6963ProviderInfo>;
+    setLoading: Setter<boolean>;
+}) => {
+    const { t, notify, hardwareDerivationPath, setHardwareDerivationPath } =
+        useGlobalContext();
+    const { connectProvider, providers } = useWeb3Signer();
+
+    const [path, setPath] = createSignal<string>(hardwareDerivationPath());
+
+    const updatePath = (input: HTMLInputElement) => {
+        setPath(input.value);
+    };
+
+    return (
+        <div>
+            <div
+                class="provider-modal-entry"
+                style={"cursor: default; padding-top: 0;"}>
+                <h4>Custom</h4>
+                <input
+                    type="text"
+                    value={path()}
+                    data-testid="derivation-path"
+                    placeholder={derivationPaths.Ethereum}
+                    onInput={(e) => updatePath(e.currentTarget)}
+                    onKeyUp={(e) => updatePath(e.currentTarget)}
+                    onPaste={(e) => updatePath(e.currentTarget)}
+                />
+            </div>
+
+            <div
+                class="provider-modal-entry"
+                style={"cursor: default; padding-top: 0;"}>
+                <button
+                    class="btn"
+                    style={"margin-top: 0;"}
+                    disabled={path() === undefined || path() === ""}
+                    onClick={async () => {
+                        setHardwareDerivationPath(path());
+                        await connectHardware(
+                            notify,
+                            connectProvider,
+                            provider,
+                            providers,
+                            path(),
+                            setLoading,
+                        );
+                    }}>
+                    {t("submit_derivation_path")}
+                </button>
+            </div>
+        </div>
+    );
+};
+
+const HardwareDerivationPaths = ({
+    show,
+    setShow,
+    provider,
+}: {
+    show: Accessor<boolean>;
+    setShow: Setter<boolean>;
+    provider: Accessor<EIP6963ProviderInfo>;
+}) => {
+    const { t } = useGlobalContext();
+
+    const [loading, setLoading] = createSignal<boolean>(false);
+
+    return (
+        <div
+            class="frame assets-select"
+            onClick={() => setShow(false)}
+            style={show() ? "display: block;" : "display: none;"}>
+            <div onClick={(e) => e.stopPropagation()}>
+                <h2>{t("select_derivation_path")}</h2>
+                <span class="close" onClick={() => setShow(false)}>
+                    <IoClose />
+                </span>
+                <hr class="spacer" />
+                <Show when={!loading()} fallback={<LoadingSpinner />}>
+                    <For
+                        each={Object.entries(derivationPaths).sort(([a], [b]) =>
+                            a.toLowerCase().localeCompare(b.toLowerCase()),
+                        )}>
+                        {([name, path]) => (
+                            <DerivationPath
+                                name={name}
+                                path={path}
+                                provider={provider}
+                                setLoading={setLoading}
+                            />
+                        )}
+                    </For>
+                    <hr style={"margin-top: 0;"} />
+                    <CustomPath provider={provider} setLoading={setLoading} />
+                </Show>
+            </div>
+        </div>
+    );
+};
+
+export default HardwareDerivationPaths;

src/components/LockupEvm.tsx

@@ -69,6 +69,7 @@ const LockupEvm = ({
                     );
                     const currentSwap = await getSwap(swapId);
                     currentSwap.lockupTx = tx.hash;
+                    currentSwap.signer = signer().address;
                     await setSwapStorage(currentSwap);
                 }}
                 children={<ConnectWallet />}

src/consts/Types.ts

@@ -4,3 +4,37 @@ export type ButtonLabelParams = {
     key: DictKey;
     params?: Record<string, string>;
 };
+
+export type EIP6963ProviderInfo = {
+    rdns: string;
+    uuid: string;
+    name: string;
+    icon?: string;
+    disabled?: boolean;
+    isHardware?: boolean;
+};
+
+export type EIP1193Provider = {
+    isStatus?: boolean;
+    host?: string;
+    path?: string;
+    sendAsync?: (
+        request: { method: string; params?: Array<unknown> },
+        callback: (error: Error | null, response: unknown) => void,
+    ) => void;
+    send?: (
+        request: { method: string; params?: Array<unknown> },
+        callback: (error: Error | null, response: unknown) => void,
+    ) => void;
+    request: (request: {
+        method: string;
+        params?: Array<unknown>;
+    }) => Promise<unknown>;
+    on: (event: "chainChanged", cb: () => void) => void;
+    removeAllListeners: (event: "chainChanged") => void;
+};
+
+export type EIP6963ProviderDetail = {
+    info: EIP6963ProviderInfo;
+    provider: EIP1193Provider;
+};