diff --git a/components/forms/TransactionSigning.tsx b/components/forms/TransactionSigning.tsx index cffdfbc..281f591 100644 --- a/components/forms/TransactionSigning.tsx +++ b/components/forms/TransactionSigning.tsx @@ -7,6 +7,7 @@ import TransportWebUSB from "@ledgerhq/hw-transport-webusb"; import axios from "axios"; import { useState } from "react"; import { useAppContext } from "../../context/AppContext"; +import { getConnectError } from "../../lib/errorHelpers"; import { DbSignature, DbTransaction, WalletAccount } from "../../types"; import HashView from "../dataViews/HashView"; import Button from "../inputs/Button"; @@ -34,6 +35,7 @@ const TransactionSigning = (props: Props) => { const { state } = useAppContext(); const [walletAccount, setWalletAccount] = useState(); const [sigError, setSigError] = useState(""); + const [connectError, setConnectError] = useState(""); const [signing, setSigning] = useState("not_signed"); const [walletType, setWalletType] = useState<"Keplr" | "Ledger">(); const [ledgerSigner, setLedgerSigner] = useState({}); @@ -67,8 +69,10 @@ const TransactionSigning = (props: Props) => { } setWalletType("Keplr"); + setConnectError(""); } catch (e) { - console.log("enable keplr err: ", e); + console.error(e); + setConnectError(getConnectError(e)); } finally { setLoading((newLoading) => ({ ...newLoading, keplr: false })); } @@ -112,8 +116,10 @@ const TransactionSigning = (props: Props) => { setLedgerSigner(offlineSigner); setWalletType("Ledger"); + setConnectError(""); } catch (e) { - console.log("enable ledger err: ", e); + console.error(e); + setConnectError(getConnectError(e)); } finally { setLoading((newLoading) => ({ ...newLoading, ledger: false })); } @@ -231,6 +237,13 @@ const TransactionSigning = (props: Props) => { )} + {connectError && ( + +
+

{connectError}

+
+
+ )}

Current Signers

{props.signatures.map((signature, i) => ( diff --git a/lib/errorHelpers.ts b/lib/errorHelpers.ts new file mode 100644 index 0000000..a844119 --- /dev/null +++ b/lib/errorHelpers.ts @@ -0,0 +1,26 @@ +const getConnectError = (error: unknown): string => { + const rawErrorMsg = + error instanceof Error ? error.message.toLowerCase() : String(error).toLowerCase(); + + // Keplr + if (rawErrorMsg.includes("window.keplr is undefined")) { + return "Keplr needs to be installed"; + } + + // Ledger + if (rawErrorMsg.includes("navigator.usb is undefined")) { + return "Your browser is not compatible with Ledger due to missing WebUSB"; + } + + if (rawErrorMsg.includes("no device selected")) { + return "A Ledger device needs to be selected"; + } + + if (rawErrorMsg.includes("open the cosmos ledger app")) { + return "The Cosmos Ledger app needs to be open"; + } + + return "Error when connecting to wallet"; +}; + +export { getConnectError };