fix: Signing and Send page improvements

fetchai · Jan 15, 2025 · 2bb2630 · 2bb2630
1 parent f50476a
commit 2bb2630
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 97 deletions.
diff --git a/packages/fetch-extension/src/pages-new/register/ledger/index.tsx b/packages/fetch-extension/src/pages-new/register/ledger/index.tsx
@@ -64,29 +64,23 @@ export const ImportLedgerPage: FunctionComponent<{
 
   const ensureUSBPermission = async () => {
     const anyNavigator = navigator as any;
+    let protocol: any;
     if (ledgerInitStore.isWebHID) {
-      const device = await anyNavigator.hid.requestDevice({
-        filters: [
-          {
-            vendorId: ledgerUSBVendorId,
-          },
-        ],
-      });
-      if (!device || (Array.isArray(device) && device.length === 0)) {
-        throw new Error("No device selected");
-      }
+      protocol = anyNavigator.hid;
     } else {
-      if (
-        !(await anyNavigator.usb.requestDevice({
-          filters: [
-            {
-              vendorId: ledgerUSBVendorId,
-            },
-          ],
-        }))
-      ) {
-        throw new Error("No device selected");
-      }
+      protocol = anyNavigator.usb;
+    }
+
+    const devices = await protocol.requestDevice({
+      filters: [
+        {
+          vendorId: ledgerUSBVendorId,
+        },
+      ],
+    });
+
+    if (!devices || (Array.isArray(devices) && devices.length === 0)) {
+      throw new Error("No device selected");
     }
   };
 

diff --git a/packages/fetch-extension/src/pages-new/send/index.tsx b/packages/fetch-extension/src/pages-new/send/index.tsx
@@ -351,7 +351,7 @@ export const SendPage: FunctionComponent = observer(() => {
       >
         <div className={style["formInnerContainer"]}>
           <div className={style["cardContainer"]}>
-            {isNext === false ? (
+            {!isNext ? (
               <SendPhase1
                 setIsNext={setIsNext}
                 sendConfigs={sendConfigs}

diff --git a/packages/fetch-extension/src/pages-new/send/send-phase-2.tsx b/packages/fetch-extension/src/pages-new/send/send-phase-2.tsx
@@ -6,17 +6,16 @@ import { DenomHelper, ExtensionKVStore } from "@keplr-wallet/common";
 import { useStore } from "../../stores";
 import { ButtonV2 } from "@components-v2/buttons/button";
 import { useGasSimulator } from "@keplr-wallet/hooks";
-import { useNavigate } from "react-router";
+import { useLocation, useNavigate } from "react-router";
 import { useLanguage } from "../../languages";
-import { CoinPretty, Int, Dec, DecUtils } from "@keplr-wallet/unit";
+import { CoinPretty, Dec, DecUtils, Int } from "@keplr-wallet/unit";
 import { observer } from "mobx-react-lite";
 import { TransxStatus } from "@components-v2/transx-status";
-import { useLocation } from "react-router";
 import { TXNTYPE } from "../../config";
 import { FeeButtons } from "@components-v2/form/fee-buttons-v2";
-import { getPathname } from "@utils/pathname";
 import { useNotification } from "@components/notification";
 import { navigateOnTxnEvents } from "@utils/navigate-txn-event";
+import { getPathname } from "@utils/pathname";
 
 interface SendPhase2Props {
   sendConfigs?: any;
@@ -53,16 +52,16 @@ export const SendPhase2: React.FC<SendPhase2Props> = observer(
     const { isFromPhase1 } = location.state || {};
     const language = useLanguage();
     const fiatCurrency = language.fiatCurrency;
+    const isEvm = chainStore.current.features?.includes("evm") ?? false;
     const convertToUsd = (currency: any) => {
       const value = priceStore.calculatePrice(currency, fiatCurrency);
-      const inUsd = value && value.shrink(true).maxDecimals(6).toString();
-      return inUsd;
+      return value && value.shrink(true).maxDecimals(6).toString();
     };
     const intl = useIntl();
 
     useEffect(() => {
       if (isFromPhase1 !== undefined) setFromPhase1(isFromPhase1);
-      if (configs?.amount && fromPhase1 == false && sendConfigs) {
+      if (configs?.amount && !fromPhase1 && sendConfigs) {
         sendConfigs.amountConfig.setAmount(configs.amount);
         sendConfigs.amountConfig.setSendCurrency(configs.sendCurr);
       }
@@ -181,8 +180,7 @@ export const SendPhase2: React.FC<SendPhase2Props> = observer(
         .truncate()
         .toString();
 
-      const parsedAmount = BigInt(scaledAmount);
-      return parsedAmount;
+      return BigInt(scaledAmount);
     };
 
     return (
@@ -306,6 +304,7 @@ export const SendPhase2: React.FC<SendPhase2Props> = observer(
                             },
                           });
                         },
+                        isEVM: isEvm,
                       };
                       navigateOnTxnEvents(txnNavigationOptions);
                     },
@@ -336,14 +335,15 @@ export const SendPhase2: React.FC<SendPhase2Props> = observer(
                             },
                           });
                         },
+                        isEVM: isEvm,
                       };
                       navigateOnTxnEvents(txnNavigationOptions);
                       if (keyRingStore.keyRingType === "ledger") {
                         navigate("/send");
                       }
                     },
                     onFulfill: (tx: any) => {
-                      const istxnSuccess = tx.code ? false : true;
+                      const istxnSuccess = !tx.code;
                       const txnNavigationOptions = {
                         redirect: () => {
                           navigate("/send", {
@@ -368,23 +368,37 @@ export const SendPhase2: React.FC<SendPhase2Props> = observer(
                             },
                           });
                         },
+                        isEVM: isEvm,
                       };
                       navigateOnTxnEvents(txnNavigationOptions);
                     },
                   }
                 );
                 if (!isDetachedPage) {
                   const currentPathName = getPathname();
-                  if (currentPathName === "send") {
+                  if (
+                    currentPathName === "send" ||
+                    currentPathName === "sign"
+                  ) {
                     navigate("/send", {
                       replace: true,
                       state: { trnsxStatus: "pending", isNext: true },
                     });
                   }
                 }
               } catch (e) {
+                analyticsStore.logEvent("send_txn_broadcasted_fail", {
+                  chainId: chainStore.current.chainId,
+                  chainName: chainStore.current.chainName,
+                  feeType: sendConfigs.feeConfig.feeType,
+                  message: e?.message ?? "",
+                });
+
                 const currentPathName = getPathname();
-                if (!isDetachedPage && currentPathName === "send") {
+                if (
+                  !isDetachedPage &&
+                  (currentPathName === "send" || currentPathName === "sign")
+                ) {
                   navigate("/send", {
                     replace: true,
                     state: {
@@ -399,12 +413,6 @@ export const SendPhase2: React.FC<SendPhase2Props> = observer(
                     },
                   });
                 } else {
-                  analyticsStore.logEvent("send_txn_broadcasted_fail", {
-                    chainId: chainStore.current.chainId,
-                    chainName: chainStore.current.chainName,
-                    feeType: sendConfigs.feeConfig.feeType,
-                    message: e?.message ?? "",
-                  });
                   notification.push({
                     type: "warning",
                     placement: "top-center",

diff --git a/packages/fetch-extension/src/pages-new/sign/index.tsx b/packages/fetch-extension/src/pages-new/sign/index.tsx
@@ -282,7 +282,7 @@ export const SignPageV2: FunctionComponent = observer(() => {
         isLoaded ? (
           <div>
             <Dropdown
-              styleProp={{ height: "579px", paddingBottom: "50px" }}
+              styleProp={{ height: "579px" }}
               title={"Confirm transaction"}
               closeClicked={() => {
                 if (window.history.length > 1) {
@@ -294,28 +294,25 @@ export const SignPageV2: FunctionComponent = observer(() => {
               setIsOpen={setIsOpen}
               isOpen={isOpen}
             >
-              <div
-                style={{
-                  marginBottom: "70px",
-                }}
-              >
-                <TabsPanel tabs={tabs} />
-                {ledgerInfo ? (
-                  <div
-                    style={{
-                      position: "fixed",
-                      bottom: "80px",
-                      width: "94%",
-                    }}
-                  >
-                    <LedgerBox
-                      title={ledgerInfo.title}
-                      isWarning={ledgerInfo.isWarning}
-                      message={ledgerInfo.subtitle}
-                    />
-                  </div>
-                ) : null}
-              </div>
+              <TabsPanel
+                tabs={tabs}
+                tabHeight={ledgerInfo ? "255px" : "320px"}
+              />
+              {ledgerInfo ? (
+                <div
+                  style={{
+                    position: "fixed",
+                    bottom: "80px",
+                    width: "94%",
+                  }}
+                >
+                  <LedgerBox
+                    isWarning={ledgerInfo.isWarning}
+                    title={ledgerInfo.title}
+                    message={ledgerInfo.subtitle}
+                  />
+                </div>
+              ) : null}
               <div className={style["buttons"]}>
                 {keyRingStore.keyRingType === "ledger" &&
                 approveButtonClicked ? (
@@ -389,9 +386,13 @@ export const SignPageV2: FunctionComponent = observer(() => {
                           }
                         }
 
-                        /// Remove error view
-                        if (ledgerInfo) {
-                          setLedgerInfo(undefined);
+                        if (keyRingStore.keyRingType === "ledger") {
+                          setLedgerInfo({
+                            title: "Sign on Ledger",
+                            subtitle:
+                              "To proceed, please review and approve the transaction on your Ledger device.",
+                            isWarning: false,
+                          });
                         }
 
                         if (needSetIsProcessing) {
@@ -412,20 +413,10 @@ export const SignPageV2: FunctionComponent = observer(() => {
                         }
                       } catch (e) {
                         setApproveButtonClicked(false);
-                        let subtitle = e.message;
-
-                        if (
-                          keyRingStore.keyRingType === "ledger" &&
-                          e.message.includes(
-                            "A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received"
-                          )
-                        ) {
-                          subtitle = "Connect and unlock your Ledger device.";
-                        }
 
                         setLedgerInfo({
                           title: "Error",
-                          subtitle: subtitle,
+                          subtitle: e.message,
                           isWarning: true,
                         });
                       }

diff --git a/packages/fetch-extension/src/pages-new/sign/ledger-guide-box.module.scss b/packages/fetch-extension/src/pages-new/sign/ledger-guide-box.module.scss
@@ -3,14 +3,6 @@
   padding: 10px;
   border-radius: 10px;
   background-color: rgba(255, 255, 255, 0.1);
-
-  &.ledger-guide-warning-bg {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-
-  &.ledger-guide-blur-bg {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
 }
 
 .ledger-guide-content {
@@ -23,11 +15,16 @@
   display: flex;
 }
 
-.ledger-guide-title {
+.ledger-guide-error-title {
   font-size: 15px;
   color: #f36b6b;
 }
 
+.ledger-guide-title {
+  font-size: 15px;
+  color: white;
+}
+
 .ledger-guide-message {
   font-size: 13px;
 }
diff --git a/packages/fetch-extension/src/pages-new/sign/ledger-guide-box.tsx b/packages/fetch-extension/src/pages-new/sign/ledger-guide-box.tsx
@@ -4,25 +4,28 @@ import style from "./ledger-guide-box.module.scss";
 import classnames from "classnames";
 
 interface LedgerBoxProps {
-  isWarning: boolean;
   title: string;
   message: string;
+  isWarning: boolean;
 }
 
 export const LedgerBox: FunctionComponent<LedgerBoxProps> = ({
-  isWarning,
   title,
   message,
+  isWarning,
 }) => {
   return (
-    <div
-      className={classnames(style["ledger-guide-box"], {
-        [style["ledger-guide-warning-bg"]]: isWarning,
-        [style["ledger-guide-blur-bg"]]: !isWarning,
-      })}
-    >
+    <div className={classnames(style["ledger-guide-box"])}>
       <div className={style["ledger-guide-content"]}>
-        <span className={style["ledger-guide-title"]}>{title}</span>
+        <span
+          className={
+            isWarning
+              ? style["ledger-guide-error-title"]
+              : style["ledger-guide-title"]
+          }
+        >
+          {title}
+        </span>
       </div>
       <div className={style["ledger-guide-message"]}>{message}</div>
     </div>

diff --git a/packages/fetch-extension/src/pages-new/sign/style.module.scss b/packages/fetch-extension/src/pages-new/sign/style.module.scss
@@ -56,7 +56,6 @@
 
 .message {
   overflow-y: auto;
-  max-height: 320px;
   font-family: monospace;
   white-space: pre-wrap;
   word-break: break-word;

diff --git a/packages/fetch-extension/src/utils/navigate-txn-event.ts b/packages/fetch-extension/src/utils/navigate-txn-event.ts
@@ -6,6 +6,7 @@ interface NavigateOnTxnEvents {
   pagePathname?: string;
   txInProgress: string;
   toastNotification?: () => void;
+  isEVM?: boolean;
 }
 
 export const navigateOnTxnEvents = ({
@@ -14,13 +15,17 @@ export const navigateOnTxnEvents = ({
   pagePathname,
   txInProgress,
   toastNotification,
+  isEVM,
 }: NavigateOnTxnEvents) => {
   const currentPathName = getPathname();
 
   const expectedPathName = pagePathname ? pagePathname : "sign";
 
   // redirect when on the expected pathname else show toast notification for txn if provided
-  if (currentPathName === expectedPathName && txInProgress === txType) {
+  if (
+    (currentPathName === expectedPathName && txInProgress === txType) ||
+    (currentPathName === expectedPathName && isEVM)
+  ) {
     redirect();
   } else if (toastNotification && typeof toastNotification === "function") {
     toastNotification();