From 84b54dc059cd11b71a36a099fbfef137c9dc41e9 Mon Sep 17 00:00:00 2001 From: abefernan <44572727+abefernan@users.noreply.github.com> Date: Tue, 2 May 2023 09:18:18 +0200 Subject: [PATCH 1/5] Add getConnectError helper --- lib/errorHelpers.ts | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 lib/errorHelpers.ts diff --git a/lib/errorHelpers.ts b/lib/errorHelpers.ts new file mode 100644 index 0000000..d02643b --- /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"; + } + + 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 }; From 40cf18ab4861e6bf3955d2ef4321c838783cd319 Mon Sep 17 00:00:00 2001 From: abefernan <44572727+abefernan@users.noreply.github.com> Date: Tue, 2 May 2023 09:18:29 +0200 Subject: [PATCH 2/5] Show connection errors --- components/forms/TransactionSigning.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/components/forms/TransactionSigning.tsx b/components/forms/TransactionSigning.tsx index cffdfbc..027c11e 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,11 @@ const TransactionSigning = (props: Props) => { } setWalletType("Keplr"); + setConnectError(""); } catch (e) { - console.log("enable keplr err: ", e); + const error = getConnectError(e); + console.error(error); + setConnectError(error); } finally { setLoading((newLoading) => ({ ...newLoading, keplr: false })); } @@ -112,8 +117,11 @@ const TransactionSigning = (props: Props) => { setLedgerSigner(offlineSigner); setWalletType("Ledger"); + setConnectError(""); } catch (e) { - console.log("enable ledger err: ", e); + const error = getConnectError(e); + console.error(error); + setConnectError(error); } finally { setLoading((newLoading) => ({ ...newLoading, ledger: false })); } @@ -231,6 +239,13 @@ const TransactionSigning = (props: Props) => { )} + {connectError && ( + +
+

{connectError}

+
+ + )}

Current Signers

{props.signatures.map((signature, i) => ( From c1b66d90744b274df8f80293a7ab5165f5544ea9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Abel=20Fern=C3=A1ndez?= <44572727+abefernan@users.noreply.github.com> Date: Tue, 2 May 2023 11:13:38 +0200 Subject: [PATCH 3/5] Tweak wording for missing WebUSB Co-authored-by: Simon Warta <2603011+webmaster128@users.noreply.github.com> --- lib/errorHelpers.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/errorHelpers.ts b/lib/errorHelpers.ts index d02643b..eaf3bac 100644 --- a/lib/errorHelpers.ts +++ b/lib/errorHelpers.ts @@ -9,7 +9,7 @@ const getConnectError = (error: unknown): string => { // Ledger if (rawErrorMsg.includes("navigator.usb is undefined")) { - return "Your browser is not compatible with ledger"; + return "Your browser is not compatible with Ledger due to missing WebUSB"; } if (rawErrorMsg.includes("no device selected")) { From 8442aae19be3c425a9f36fb1a6ec4d7cdb736151 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Abel=20Fern=C3=A1ndez?= <44572727+abefernan@users.noreply.github.com> Date: Tue, 2 May 2023 11:14:02 +0200 Subject: [PATCH 4/5] Fix uppercase Co-authored-by: Simon Warta <2603011+webmaster128@users.noreply.github.com> --- lib/errorHelpers.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/errorHelpers.ts b/lib/errorHelpers.ts index eaf3bac..a844119 100644 --- a/lib/errorHelpers.ts +++ b/lib/errorHelpers.ts @@ -13,7 +13,7 @@ const getConnectError = (error: unknown): string => { } if (rawErrorMsg.includes("no device selected")) { - return "A ledger device needs to be selected"; + return "A Ledger device needs to be selected"; } if (rawErrorMsg.includes("open the cosmos ledger app")) { From 1a4726871d979e86ef45cc8bad27ecc5d1561a92 Mon Sep 17 00:00:00 2001 From: abefernan <44572727+abefernan@users.noreply.github.com> Date: Tue, 2 May 2023 11:16:43 +0200 Subject: [PATCH 5/5] Log raw error --- components/forms/TransactionSigning.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/components/forms/TransactionSigning.tsx b/components/forms/TransactionSigning.tsx index 027c11e..281f591 100644 --- a/components/forms/TransactionSigning.tsx +++ b/components/forms/TransactionSigning.tsx @@ -71,9 +71,8 @@ const TransactionSigning = (props: Props) => { setWalletType("Keplr"); setConnectError(""); } catch (e) { - const error = getConnectError(e); - console.error(error); - setConnectError(error); + console.error(e); + setConnectError(getConnectError(e)); } finally { setLoading((newLoading) => ({ ...newLoading, keplr: false })); } @@ -119,9 +118,8 @@ const TransactionSigning = (props: Props) => { setWalletType("Ledger"); setConnectError(""); } catch (e) { - const error = getConnectError(e); - console.error(error); - setConnectError(error); + console.error(e); + setConnectError(getConnectError(e)); } finally { setLoading((newLoading) => ({ ...newLoading, ledger: false })); }