From a6359b970d3944338c6d730cf04973147bbd3e81 Mon Sep 17 00:00:00 2001
From: 0xKheops <26880866+0xKheops@users.noreply.github.com>
Date: Fri, 20 Dec 2024 16:21:34 +0900
Subject: [PATCH] feat: error if app needs to be upgraded to generic

---
 .../ui/domains/Sign/ErrorMessageDrawer.tsx    | 31 +++++++-
 .../ui/domains/Sign/LedgerSigningStatus.tsx   | 71 -------------------
 .../src/ui/domains/Sign/SignLedgerBase.tsx    |  1 +
 3 files changed, 29 insertions(+), 74 deletions(-)
 delete mode 100644 apps/extension/src/ui/domains/Sign/LedgerSigningStatus.tsx

diff --git a/apps/extension/src/ui/domains/Sign/ErrorMessageDrawer.tsx b/apps/extension/src/ui/domains/Sign/ErrorMessageDrawer.tsx
index f8655f41ee..79558a697f 100644
--- a/apps/extension/src/ui/domains/Sign/ErrorMessageDrawer.tsx
+++ b/apps/extension/src/ui/domains/Sign/ErrorMessageDrawer.tsx
@@ -1,13 +1,15 @@
 import { XCircleIcon } from "@talismn/icons"
+import { CONNECT_LEDGER_DOCS_URL } from "extension-shared"
 import { FC, useEffect, useState } from "react"
-import { useTranslation } from "react-i18next"
+import { Trans, useTranslation } from "react-i18next"
 import { Button, Drawer } from "talisman-ui"
 
 export const ErrorMessageDrawer: FC<{
   message: string | undefined
+  name?: string // identifies specific errors, some require specific UI
   containerId: string | undefined
   onDismiss: () => void
-}> = ({ message, containerId, onDismiss }) => {
+}> = ({ message, name, containerId, onDismiss }) => {
   const { t } = useTranslation()
 
   // keep message in memory to prevent flickering on slide out
@@ -26,7 +28,9 @@ export const ErrorMessageDrawer: FC<{
     >
       <div className="bg-grey-800 flex w-full flex-col items-center gap-4 rounded-t-xl p-12">
         <XCircleIcon className={"text-alert-error text-[3rem]"} />
-        <p className="text-body-secondary mt-4">{wrapStrong(content)}</p>
+        <p className="text-body-secondary mt-4">
+          {name === "GenericAppRequired" ? <LedgerGenericRequired /> : wrapStrong(content)}
+        </p>
         <Button className="mt-8 w-full" primary onClick={onDismiss}>
           {t("Close")}
         </Button>
@@ -35,6 +39,27 @@ export const ErrorMessageDrawer: FC<{
   )
 }
 
+const LedgerGenericRequired = () => {
+  const { t } = useTranslation()
+  return (
+    <Trans
+      t={t}
+      defaults="This network requires a new Ledger app. <br />Use the Polkadot Migration Ledger app to migrate your existing accounts. <DocsLink>Learn more.</DocsLink>"
+      components={{
+        DocsLink: (
+          // eslint-disable-next-line jsx-a11y/anchor-has-content
+          <a
+            href={CONNECT_LEDGER_DOCS_URL}
+            target="_blank"
+            className="text-body cursor-pointer"
+            rel="noreferrer noopener"
+          ></a>
+        ),
+      }}
+    />
+  )
+}
+
 const wrapStrong = (text?: string) => {
   if (!text) return text
 
diff --git a/apps/extension/src/ui/domains/Sign/LedgerSigningStatus.tsx b/apps/extension/src/ui/domains/Sign/LedgerSigningStatus.tsx
deleted file mode 100644
index 3572558c0f..0000000000
--- a/apps/extension/src/ui/domains/Sign/LedgerSigningStatus.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { AlertCircleIcon, LoaderIcon } from "@talismn/icons"
-import { classNames } from "@talismn/util"
-import { CONNECT_LEDGER_DOCS_URL } from "extension-shared"
-import { Trans, useTranslation } from "react-i18next"
-import { Button } from "talisman-ui"
-
-interface LedgerSigningStatusProps {
-  message: string
-  requiresConfirmation?: boolean
-  status?: "error" | "signing"
-  confirm?: () => void
-}
-
-const NO_OP = () => {}
-
-export const LedgerSigningStatus = ({
-  status,
-  message,
-  requiresConfirmation = true,
-  confirm = NO_OP,
-}: LedgerSigningStatusProps) => {
-  const { t } = useTranslation("request")
-
-  return (
-    <div
-      className={
-        "bg-grey-800 text-body-secondary flex w-full flex-col items-center gap-4 rounded-t-xl p-12 text-sm"
-      }
-    >
-      {status === "error" && (
-        <>
-          <AlertCircleIcon
-            className={classNames("text-[3rem]", status === "error" && "text-alert-error")}
-          />
-          <p>
-            {message === "GENERIC_APP_REQUIRED" ? (
-              <Trans
-                t={t}
-                defaults="This network requires a new Ledger app. <br />Use the Polkadot Migration Ledger app to migrate your existing accounts. <DocsLink>Learn more.</DocsLink>"
-                components={{
-                  DocsLink: (
-                    // eslint-disable-next-line jsx-a11y/anchor-has-content
-                    <a
-                      href={CONNECT_LEDGER_DOCS_URL}
-                      target="_blank"
-                      className="text-body cursor-pointer"
-                      rel="noreferrer noopener"
-                    ></a>
-                  ),
-                }}
-              />
-            ) : (
-              message
-            )}
-          </p>
-        </>
-      )}
-      {status === "signing" && (
-        <>
-          <LoaderIcon className="animate-spin-slow text-[3rem]" />
-          <span>{t("Sign with Ledger...")}</span>
-        </>
-      )}
-      {status === "error" && requiresConfirmation && confirm && (
-        <Button className="mt-12 w-full" primary onClick={confirm}>
-          {t("OK")}
-        </Button>
-      )}
-    </div>
-  )
-}
diff --git a/apps/extension/src/ui/domains/Sign/SignLedgerBase.tsx b/apps/extension/src/ui/domains/Sign/SignLedgerBase.tsx
index 7c0c343d46..de0ffbc75d 100644
--- a/apps/extension/src/ui/domains/Sign/SignLedgerBase.tsx
+++ b/apps/extension/src/ui/domains/Sign/SignLedgerBase.tsx
@@ -39,6 +39,7 @@ export const SignLedgerBase: FC<{
         {t("Approve on Ledger")}
       </Button>
       <ErrorMessageDrawer
+        name={error?.name}
         message={error?.message}
         containerId={containerId}
         onDismiss={onDismissErrorClick}