fix(app): client side error on address page (#777)

Nearblocks · Jan 24, 2025 · 8f0599f · 8f0599f
1 parent ca5954b
commit 8f0599f
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 26 deletions.
diff --git a/apps/app/src/components/Transactions/Details.tsx b/apps/app/src/components/Transactions/Details.tsx
@@ -36,7 +36,6 @@ import ArrowDown from '../Icons/ArrowDown';
 import ArrowUp from '../Icons/ArrowUp';
 import Question from '../Icons/Question';
 import useTranslation from 'next-translate/useTranslation';
-import TxnStatus from '../common/Status';
 import FaRight from '../Icons/FaRight';
 import { Tooltip } from '@reach/tooltip';
 import {
@@ -55,6 +54,7 @@ import { isEmpty } from 'lodash';
 import NEPTokenTransactions from '../common/NEPTokenTransactions';
 import Bolt from '../Icons/Bolt';
 import ArrowDownDouble from '../Icons/ArrowDownDouble';
+import RpcTxnStatus from '../common/RpcStatus';
 
 interface Props {
   loading: boolean;
@@ -372,7 +372,7 @@ const Details = (props: Props) => {
           ) : (
             <div className="w-full md:w-3/4 break-words">
               {txn?.outcomes?.status !== undefined && (
-                <TxnStatus
+                <RpcTxnStatus
                   showLabel
                   status={rpcTxn.status}
                   showReceipt={<FailedReceipts data={rpcTxn} />}

diff --git a/apps/app/src/components/common/RpcStatus.tsx b/apps/app/src/components/common/RpcStatus.tsx
@@ -0,0 +1,67 @@
+import FaCheckCircle from '../Icons/FaCheckCircle';
+import FaHourglassStart from '../Icons/FaHourglassStart';
+import FaTimesCircle from '../Icons/FaTimesCircle';
+
+interface Props {
+  status: 'SuccessValue' | 'Failure' | 'SuccessReceiptId' | 'Unknown';
+  showLabel: boolean;
+  showReceipt?: React.ReactNode;
+}
+
+const getOptions = (status: Props['status']) => {
+  switch (status) {
+    case 'Unknown':
+      return {
+        bg: 'bg-yellow-50 dark:bg-black',
+        text: 'text-yellow-500',
+        icon: FaHourglassStart,
+        label: 'Pending',
+      };
+    case 'Failure':
+      return {
+        bg: 'bg-red-50 dark:bg-black',
+        text: 'text-red-500',
+        icon: FaTimesCircle,
+        label: 'Fail',
+      };
+    case 'SuccessValue':
+      return {
+        bg: 'bg-emerald-50 dark:bg-black',
+        text: 'text-emerald-500',
+        icon: FaCheckCircle,
+        label: 'Success',
+      };
+    case 'SuccessReceiptId':
+      return {
+        bg: 'bg-emerald-50 dark:bg-black',
+        text: 'text-emerald-500',
+        icon: FaCheckCircle,
+        label: 'Success',
+      };
+  }
+};
+
+const RpcTxnStatus = (props: any) => {
+  if (!props.status) {
+    return null;
+  }
+
+  const statusType = Object.keys(props.status)[0] as Props['status'];
+  const option = getOptions(statusType);
+  const Icon = option?.icon;
+
+  return (
+    <div className="w-full md:w-3/4 break-words inline-flex items-center">
+      <span
+        className={`inline-flex items-center text-xs rounded py-1 ${option?.bg} ${option?.text} ${
+          props.showLabel ? ' px-2' : ' px-1'
+        }`}
+      >
+        <Icon />
+        {props.showLabel && <span className="ml-2">{option?.label}</span>}
+      </span>
+      {props.showReceipt ? props.showReceipt : null}
+    </div>
+  );
+};
+export default RpcTxnStatus;
diff --git a/apps/app/src/components/common/Status.tsx b/apps/app/src/components/common/Status.tsx
@@ -3,35 +3,29 @@ import FaHourglassStart from '../Icons/FaHourglassStart';
 import FaTimesCircle from '../Icons/FaTimesCircle';
 
 interface Props {
-  status: 'SuccessValue' | 'Failure' | 'SuccessReceiptId' | 'Unknown';
+  status: boolean;
   showLabel: boolean;
   showReceipt?: React.ReactNode;
 }
 
-const getOptions = (status: Props['status']) => {
+const getOptions = (status: boolean) => {
   switch (status) {
-    case 'Unknown':
+    case null:
       return {
         bg: 'bg-yellow-50 dark:bg-black',
         text: 'text-yellow-500',
         icon: FaHourglassStart,
         label: 'Pending',
       };
-    case 'Failure':
+    case false:
       return {
         bg: 'bg-red-50 dark:bg-black',
         text: 'text-red-500',
         icon: FaTimesCircle,
         label: 'Fail',
       };
-    case 'SuccessValue':
-      return {
-        bg: 'bg-emerald-50 dark:bg-black',
-        text: 'text-emerald-500',
-        icon: FaCheckCircle,
-        label: 'Success',
-      };
-    case 'SuccessReceiptId':
+
+    default:
       return {
         bg: 'bg-emerald-50 dark:bg-black',
         text: 'text-emerald-500',
@@ -41,27 +35,23 @@ const getOptions = (status: Props['status']) => {
   }
 };
 
-const TxnStatus = (props: any) => {
-  if (!props.status) {
-    return null;
-  }
-
-  const statusType = Object.keys(props.status)[0] as Props['status'];
-  const option = getOptions(statusType);
-  const Icon = option?.icon;
+const TxnStatus = (props: Props) => {
+  const option = getOptions(props.status);
+  const Icon = option.icon;
 
   return (
     <div className="w-full md:w-3/4 break-words inline-flex items-center">
       <span
-        className={`inline-flex items-center text-xs rounded py-1 ${option?.bg} ${option?.text} ${
-          props.showLabel ? ' px-2' : ' px-1'
-        }`}
+        className={`inline-flex items-center text-xs rounded py-1 ${
+          option.bg
+        } ${option.text} ${props.showLabel ? ' px-2' : ' px-1'}`}
       >
         <Icon />
-        {props.showLabel && <span className="ml-2">{option?.label}</span>}
+        {props.showLabel && <span className="ml-2">{option.label}</span>}
       </span>
       {props.showReceipt ? props.showReceipt : null}
     </div>
   );
 };
+
 export default TxnStatus;