Merge pull request #117 from cosmos/feat/show-keplr-error

Show connect errors

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<WalletAccount>();
   const [sigError, setSigError] = useState("");
+  const [connectError, setConnectError] = useState("");
   const [signing, setSigning] = useState<SigningStatus>("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) => {
           </div>
         </StackableContainer>
       )}
+      {connectError && (
+        <StackableContainer lessPadding lessRadius lessMargin>
+          <div className="signature-error">
+            <p>{connectError}</p>
+          </div>
+        </StackableContainer>
+      )}
       <h2>Current Signers</h2>
       <StackableContainer lessPadding lessMargin lessRadius>
         {props.signatures.map((signature, i) => (

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 };