From 7fc3bcaf86e862bfaec9ff2c5a8d682ee2ce3d7c Mon Sep 17 00:00:00 2001
From: Axel Delamarre <1091900+delaaxe@users.noreply.github.com>
Date: Thu, 19 May 2022 11:29:12 +0200
Subject: [PATCH] feat(activity): red status for failed transactions

---
 .../ui/components/ErrorBoundaryFallback.tsx   | 30 +++++++++++
 .../accountActivity/AccountActivity.tsx       | 53 ++++++-------------
 .../features/accountActivity/useActivity.ts   |  4 +-
 .../ui/features/accountNfts/AccountNfts.tsx   | 26 ++-------
 .../extension/src/ui/services/messaging.ts    |  4 +-
 5 files changed, 56 insertions(+), 61 deletions(-)
 create mode 100644 packages/extension/src/ui/components/ErrorBoundaryFallback.tsx

diff --git a/packages/extension/src/ui/components/ErrorBoundaryFallback.tsx b/packages/extension/src/ui/components/ErrorBoundaryFallback.tsx
new file mode 100644
index 000000000..00245e025
--- /dev/null
+++ b/packages/extension/src/ui/components/ErrorBoundaryFallback.tsx
@@ -0,0 +1,30 @@
+import { FC } from "react"
+import styled from "styled-components"
+
+import { ReportGmailerrorredIcon } from "./Icons/MuiIcons"
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  & > svg {
+    color: red;
+    font-size: 64px;
+    margin-bottom: 16px;
+  }
+`
+
+interface ErrorBoundaryFallbackProps {
+  title: string
+}
+
+export const ErrorBoundaryFallback: FC<ErrorBoundaryFallbackProps> = ({
+  title,
+}) => (
+  <Container>
+    <ReportGmailerrorredIcon />
+    <h3>{title}</h3>
+  </Container>
+)
diff --git a/packages/extension/src/ui/features/accountActivity/AccountActivity.tsx b/packages/extension/src/ui/features/accountActivity/AccountActivity.tsx
index 5fb08f27f..9be522294 100644
--- a/packages/extension/src/ui/features/accountActivity/AccountActivity.tsx
+++ b/packages/extension/src/ui/features/accountActivity/AccountActivity.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components"
 
 import { useAppState } from "../../app.state"
 import { ErrorBoundary } from "../../components/ErrorBoundary"
-import { ReportGmailerrorredIcon } from "../../components/Icons/MuiIcons"
+import { ErrorBoundaryFallback } from "../../components/ErrorBoundaryFallback"
 import { Spinner } from "../../components/Spinner"
 import { formatDateTime } from "../../services/dates"
 import { openVoyagerTransaction } from "../../services/voyager.service"
@@ -45,10 +45,11 @@ const Activity: FC<AccountActivityProps> = ({ account }) => {
         <Fragment key={dateLabel}>
           <SectionHeader>{dateLabel}</SectionHeader>
           <TransactionsWrapper>
-            {transactions.map(({ hash, date, meta }) => (
+            {transactions.map(({ hash, date, meta, isRejected }) => (
               <TransactionItem
                 key={hash}
                 hash={hash}
+                status={isRejected ? "red" : undefined}
                 meta={{ subTitle: formatDateTime(date), ...meta }}
                 onClick={() => openVoyagerTransaction(hash, network)}
               />
@@ -60,38 +61,18 @@ const Activity: FC<AccountActivityProps> = ({ account }) => {
   )
 }
 
-const ActivityError: FC = () => {
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
+export const AccountActivity: FC<AccountActivityProps> = ({ account }) => (
+  <Container>
+    <Header>Activity</Header>
+    <PendingTransactions accountAddress={account.address} />
+    <ErrorBoundary
+      fallback={
+        <ErrorBoundaryFallback title="Seems like Voyager API is down..." />
+      }
     >
-      <ReportGmailerrorredIcon
-        style={{
-          color: "red",
-          fontSize: "64px",
-          marginBottom: "16px",
-        }}
-      />
-      <h3>Seems like Voyager API is down...</h3>
-    </div>
-  )
-}
-
-export const AccountActivity: FC<AccountActivityProps> = ({ account }) => {
-  return (
-    <Container>
-      <Header>Activity</Header>
-      <PendingTransactions accountAddress={account.address} />
-      <ErrorBoundary fallback={<ActivityError />}>
-        <Suspense fallback={<Spinner size={64} style={{ marginTop: 40 }} />}>
-          <Activity account={account} />
-        </Suspense>
-      </ErrorBoundary>
-    </Container>
-  )
-}
+      <Suspense fallback={<Spinner size={64} style={{ marginTop: 40 }} />}>
+        <Activity account={account} />
+      </Suspense>
+    </ErrorBoundary>
+  </Container>
+)
diff --git a/packages/extension/src/ui/features/accountActivity/useActivity.ts b/packages/extension/src/ui/features/accountActivity/useActivity.ts
index 20ddb07cb..d639b8f54 100644
--- a/packages/extension/src/ui/features/accountActivity/useActivity.ts
+++ b/packages/extension/src/ui/features/accountActivity/useActivity.ts
@@ -6,6 +6,7 @@ export interface ActivityTransaction {
   hash: string
   date: Date
   meta?: TransactionMeta
+  isRejected?: boolean
 }
 
 export type DailyActivity = Record<string, ActivityTransaction[]>
@@ -18,8 +19,9 @@ export function useActivity(address: string): DailyActivity {
     if (status !== "RECEIVED") {
       const date = new Date(timestamp * 1000)
       const dateLabel = formatDate(date)
+      const isRejected = status === "REJECTED"
       activity[dateLabel] ||= []
-      activity[dateLabel].push({ hash, date, meta })
+      activity[dateLabel].push({ hash, date, meta, isRejected })
     }
   }
   return activity
diff --git a/packages/extension/src/ui/features/accountNfts/AccountNfts.tsx b/packages/extension/src/ui/features/accountNfts/AccountNfts.tsx
index 616128bf9..fdc0cbdfd 100644
--- a/packages/extension/src/ui/features/accountNfts/AccountNfts.tsx
+++ b/packages/extension/src/ui/features/accountNfts/AccountNfts.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom"
 import styled from "styled-components"
 
 import { ErrorBoundary } from "../../components/ErrorBoundary"
-import { ReportGmailerrorredIcon } from "../../components/Icons/MuiIcons"
+import { ErrorBoundaryFallback } from "../../components/ErrorBoundaryFallback"
 import { Spinner } from "../../components/Spinner"
 import { P } from "../../components/Typography"
 import { routes } from "../../routes"
@@ -85,39 +85,21 @@ const Nfts: FC<AccountNftsProps> = ({ account }) => {
   )
 }
 
-const NftsError: FC<AccountNftsProps> = ({ account }) => {
+const NftsFallback: FC<AccountNftsProps> = ({ account }) => {
   // this is needed to keep swr mounted so it can retry the request
   useNfts(account.address, {
     suspense: false,
     errorRetryInterval: 30e3 /* 30 seconds */,
   })
 
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
-    >
-      <ReportGmailerrorredIcon
-        style={{
-          color: "red",
-          fontSize: "64px",
-          marginBottom: "16px",
-        }}
-      />
-      <h3>Seems like Play Oasis API is down...</h3>
-    </div>
-  )
+  return <ErrorBoundaryFallback title="Seems like Play Oasis API is down..." />
 }
 
 export const AccountNfts: FC<AccountNftsProps> = ({ account }) => {
   return (
     <Container>
       <Header>Collectibles</Header>
-      <ErrorBoundary fallback={<NftsError account={account} />}>
+      <ErrorBoundary fallback={<NftsFallback account={account} />}>
         <Suspense fallback={<Spinner size={64} style={{ marginTop: 40 }} />}>
           <Nfts account={account} />
         </Suspense>
diff --git a/packages/extension/src/ui/services/messaging.ts b/packages/extension/src/ui/services/messaging.ts
index aff5c024e..d7762179a 100644
--- a/packages/extension/src/ui/services/messaging.ts
+++ b/packages/extension/src/ui/services/messaging.ts
@@ -145,9 +145,9 @@ export const updateTransactionFee = async (
 }
 
 export const startSession = async (password: string): Promise<void> => {
-  const encMsg = await encrypt(password)
+  const body = await encrypt(password)
 
-  sendMessage({ type: "START_SESSION", data: { secure: true, body: encMsg } })
+  sendMessage({ type: "START_SESSION", data: { secure: true, body } })
 
   const succeeded = await Promise.race([
     waitForMessage("START_SESSION_RES").then(() => true),