fix: removed old logo and added discord link to Oops! view (#1752)

* fix: removed old icon and added discord link to `Oops!` view

* chore: added changeset

* revert: help and support discord url

.changeset/four-kids-wink.md

@@ -0,0 +1,5 @@
+---
+"@talismn/icons": patch
+---
+
+feat: added TalismanDeadHandIcon

apps/extension/src/@talisman/components/ErrorBoundary.tsx

@@ -1,43 +1,53 @@
 import { ErrorBoundary as SentryErrorBoundary } from "@sentry/react"
+import { TalismanDeadHandIcon } from "@talismn/icons"
 import { DexieError } from "dexie"
 import { FC, ReactNode, useCallback } from "react"
 import { Button } from "talisman-ui"
 
 import { DEBUG } from "@extension/shared"
-import STATIC from "@talisman/theme/images/hand_open_static_dark.gif"
 
 const ErrorMessage: FC<{ error: unknown }> = ({ error }) => {
   const isDbVersionError = (error as DexieError)?.inner?.name === "VersionError"
+  const canClearDatabases = DEBUG && isDbVersionError
+  const errorMessage = isDbVersionError
+    ? "Invalid database version."
+    : "Sorry, an error occurred in Talisman."
 
   const clearDatabases = useCallback(() => {
     indexedDB.deleteDatabase("Talisman")
     indexedDB.deleteDatabase("TalismanBalances")
     indexedDB.deleteDatabase("TalismanChaindata")
     indexedDB.deleteDatabase("TalismanConnectionMeta")
-    alert("Databases cleared. Please click OK for Talisman to reinitialize.")
+    alert("Databases cleared. Please click OK for Talisman to reinitialise.")
     chrome.runtime.reload()
   }, [])
 
   return (
     <section className="max-w-screen text-body-secondary mx-auto flex h-[60rem] max-h-screen w-[40rem] flex-col overflow-hidden p-10 text-center">
-      <div className="flex flex-grow flex-col justify-center">
-        <h1 className="m-0 text-3xl font-bold">Oops !</h1>
-        <div>
-          <img className="inline-block" src={STATIC} alt="Talisman Hand logo" />
+      <div className="flex w-full flex-grow flex-col items-center justify-center gap-16">
+        <h1 className="m-0 text-3xl font-bold">Oops!</h1>
+        <TalismanDeadHandIcon className="text-alert-error text-[20rem]" />
+        <div className="flex flex-col gap-2">
+          <div>{errorMessage}</div>
+          {!canClearDatabases && (
+            <a
+              className="text-primary/80 hover:text-primary focus:text-primary"
+              href="https://discord.gg/talisman"
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              Contact us on Discord for support.
+            </a>
+          )}
         </div>
-        {isDbVersionError ? (
-          <p>Invalid database version.</p>
-        ) : (
-          <p>Sorry, an error occured in Talisman.</p>
-        )}
       </div>
       <div className="flex w-full shrink-0 flex-col gap-4">
-        {DEBUG && isDbVersionError && (
-          <Button className="w-full" onClick={clearDatabases}>
+        {canClearDatabases && (
+          <Button fullWidth color="red" onClick={clearDatabases}>
             Clear local databases
           </Button>
         )}
-        <Button className="!w-full" primary onClick={() => window.close()}>
+        <Button fullWidth onClick={() => window.close()}>
           Close
         </Button>
       </div>

packages/icons/src/index.ts

@@ -45,6 +45,7 @@ export { ReactComponent as SignetIcon } from "./icons/signet.svg"
 export { ReactComponent as StarsIcon } from "./icons/stars.svg"
 export { ReactComponent as SwapIcon } from "./icons/swap.svg"
 export { ReactComponent as TableIcon } from "./icons/table.svg"
+export { ReactComponent as TalismanDeadHandIcon } from "./icons/talisman-dead-hand.svg"
 export { ReactComponent as TalismanHandIcon } from "./icons/talisman-hand.svg"
 export { ReactComponent as TryItIcon } from "./icons/try-it.svg"
 export { ReactComponent as UsbIcon } from "./icons/usb.svg"