feat(app): show deposit value attached with the receipt in txns page (#…

…545)
Nearblocks · Oct 11, 2024 · 76b12d7 · 76b12d7
1 parent 6a5d715
commit 76b12d7
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 20 deletions.
diff --git a/apps/app/src/components/Transactions/Receipt.tsx b/apps/app/src/components/Transactions/Receipt.tsx
@@ -9,10 +9,15 @@ interface Props {
   txn: TransactionInfo;
   rpcTxn: RPCTransactionInfo;
   loading: boolean;
+  statsData: {
+    stats: Array<{
+      near_price: string;
+    }>;
+  };
 }
 
 const Receipt = (props: Props) => {
-  const { rpcTxn, txn, loading } = props;
+  const { rpcTxn, txn, loading, statsData } = props;
 
   const [receipt, setReceipt] = useState(null);
 
@@ -99,7 +104,7 @@ const Receipt = (props: Props) => {
           </div>
         </div>
       ) : (
-        <ReceiptRow receipt={receipt} loading={loading} />
+        <ReceiptRow receipt={receipt} loading={loading} statsData={statsData} />
       )}
     </div>
   );

diff --git a/apps/app/src/components/Transactions/Receipts/ReceiptRow.tsx b/apps/app/src/components/Transactions/Receipts/ReceiptRow.tsx
@@ -1,5 +1,10 @@
 import Question from '@/components/Icons/Question';
-import { convertToMetricPrefix, localFormat, yoctoToNear } from '@/utils/libs';
+import {
+  convertToMetricPrefix,
+  fiatValue,
+  localFormat,
+  yoctoToNear,
+} from '@/utils/libs';
 import { ReceiptsPropsInfo } from '@/utils/types';
 import { Tooltip } from '@reach/tooltip';
 import useTranslation from 'next-translate/useTranslation';
@@ -10,20 +15,28 @@ import { useEffect, useRef, useState } from 'react';
 import useRpc from '@/hooks/useRpc';
 import TxnsReceiptStatus from '@/components/common/TxnsReceiptStatus';
 import useHash from '@/hooks/useHash';
+import { networkId } from '@/utils/config';
 
 interface Props {
   receipt: ReceiptsPropsInfo | any;
   borderFlag?: boolean;
   loading: boolean;
+  statsData: {
+    stats: Array<{
+      near_price: string;
+    }>;
+  };
 }
 
 const ReceiptRow = (props: Props) => {
-  const { receipt, borderFlag, loading } = props;
+  const { receipt, borderFlag, loading, statsData } = props;
   const { t } = useTranslation();
   const [block, setBlock] = useState<{ height: string } | null>(null);
   const { getBlockDetails } = useRpc();
   const [pageHash] = useHash();
 
+  const currentPrice = statsData?.stats?.[0]?.near_price || 0;
+
   const lastBlockHash = useRef<string | null>(null);
   const rowRef = useRef<HTMLDivElement | null>(null);
 
@@ -301,6 +314,41 @@ const ReceiptRow = (props: Props) => {
             ''
           )}
         </div>
+
+        <div className="flex items-start flex-wrap p-4">
+          <div className="flex items-center w-full md:w-1/4 mb-2 md:mb-0">
+            <Tooltip
+              label={'Deposit value attached with the receipt'}
+              className="absolute h-auto max-w-xs bg-black bg-opacity-90 z-10 text-xs text-white px-3 py-2"
+            >
+              <div>
+                <Question className="w-4 h-4 fill-current mr-1" />
+              </div>
+            </Tooltip>
+            Value
+          </div>
+          {!receipt || loading ? (
+            <div className="w-full md:w-3/4">
+              <Loader wrapperClassName="flex w-full" />
+              <Loader wrapperClassName="flex w-full" />
+              <Loader wrapperClassName="flex w-full" />
+            </div>
+          ) : (
+            <div className="w-full md:w-3/4 break-words space-y-4">
+              {receipt && receipt?.actions[0]?.args?.deposit
+                ? yoctoToNear(receipt?.actions[0]?.args?.deposit, true)
+                : receipt?.actions[0]?.args?.deposit ?? '0'}{' '}
+              Ⓝ
+              {currentPrice && networkId === 'mainnet'
+                ? ` ($${fiatValue(
+                    yoctoToNear(receipt?.actions[0]?.args?.deposit ?? 0, false),
+                    currentPrice,
+                  )})`
+                : ''}
+            </div>
+          )}
+        </div>
+
         <div className="flex items-start flex-wrap p-4">
           <div className="flex items-center w-full md:w-1/4 mb-2 md:mb-0">
             <Tooltip
@@ -364,7 +412,12 @@ const ReceiptRow = (props: Props) => {
           {receipt?.outcome?.outgoing_receipts?.map((rcpt: any) => (
             <div className="pl-4 pt-6" key={rcpt?.receipt_id}>
               <div className="mx-4 border-l-4 border-l-gray-200">
-                <ReceiptRow receipt={rcpt} borderFlag loading={loading} />
+                <ReceiptRow
+                  receipt={rcpt}
+                  borderFlag
+                  loading={loading}
+                  statsData={statsData}
+                />
               </div>
             </div>
           ))}

diff --git a/apps/app/src/components/Transactions/Receipts/ReceiptSummaryRow.tsx b/apps/app/src/components/Transactions/Receipts/ReceiptSummaryRow.tsx
@@ -35,16 +35,16 @@ const ReceiptSummaryRow = (props: Props) => {
 
   const getGasAttached = (actions: Action[]): string => {
     const gasAttached = actions
-      .map((action) => action.args)
+      .map((action) => action?.args)
       .filter(
         (args): args is FunctionCallActionView['FunctionCall'] => 'gas' in args,
       );
 
-    if (gasAttached.length === 0) {
+    if (gasAttached?.length === 0) {
       return '0';
     }
 
-    return gasAttached.reduce(
+    return gasAttached?.reduce(
       (acc, args) =>
         Big(acc || '0')
           .plus(args.gas)
@@ -59,8 +59,8 @@ const ReceiptSummaryRow = (props: Props) => {
   const isSuccess =
     status &&
     (('SuccessValue' in status &&
-      status.SuccessValue !== null &&
-      status.SuccessValue !== undefined) ||
+      status?.SuccessValue !== null &&
+      status?.SuccessValue !== undefined) ||
       'SuccessReceiptId' in status);
 
   return (
@@ -78,15 +78,15 @@ const ReceiptSummaryRow = (props: Props) => {
               >
                 <Link
                   className={`truncate max-w-[120px] inline-block text-green-500 dark:text-green-250 hover:no-underline whitespace-nowrap`}
-                  href={`#execution#${receipt.id}`}
+                  href={`#execution#${receipt?.id}`}
                 >
                   {' '}
                   {receipt.id}
                 </Link>
               </Tooltip>
             </td>
             <td className="px-6 py-4 text-sm text-nearblue-600 dark:text-neargray-10 font-medium whitespace-nowrap">
-              {formatActionKind(action.action_kind)}
+              {formatActionKind(action?.action_kind)}
             </td>
             <td className="px-4 py-4 text-sm text-nearblue-600 dark:text-neargray-10 font-medium whitespace-nowrap">
               {action.args?.method_name}
@@ -128,13 +128,13 @@ const ReceiptSummaryRow = (props: Props) => {
 
             <td className="px-4 py-4 text-sm text-nearblue-600 dark:text-neargray-10 font-medium whitespace-nowrap">
               <span>
-                {action.args?.deposit
-                  ? yoctoToNear(action.args?.deposit, true)
-                  : action.args?.deposit ?? '0'}{' '}
+                {action?.args?.deposit
+                  ? yoctoToNear(action?.args?.deposit, true)
+                  : action?.args?.deposit ?? '0'}{' '}
                 Ⓝ
                 {currentPrice && networkId === 'mainnet'
                   ? ` ($${fiatValue(
-                      yoctoToNear(action.args?.deposit ?? 0, false),
+                      yoctoToNear(action?.args?.deposit ?? 0, false),
                       currentPrice,
                     )})`
                   : ''}

diff --git a/apps/app/src/pages/txns/[hash].tsx b/apps/app/src/pages/txns/[hash].tsx
@@ -154,6 +154,7 @@ const Txn = ({
   const { transactionStatus, getBlockDetails } = useRpc();
   const rpcUrl: string = useRpcStore((state) => state.rpc);
   const switchRpc: () => void = useRpcStore((state) => state.switchRpc);
+  const [allRpcProviderError, setAllRpcProviderError] = useState(false);
 
   const requestSignInWithWallet = useAuthStore(
     (store) => store.requestSignInWithWallet,
@@ -193,7 +194,13 @@ const Txn = ({
 
   useEffect(() => {
     if (rpcError) {
-      switchRpc();
+      try {
+        switchRpc();
+      } catch (error) {
+        setRpcError(true);
+        setAllRpcProviderError(true);
+        console.error('Failed to switch RPC:', error);
+      }
     }
   }, [rpcError, switchRpc]);
 
@@ -349,13 +356,12 @@ const Txn = ({
       <div className="relative container mx-auto px-3">
         {/* <RpcMenu /> */}
         <Fragment key="hash">
-          {rpcError && error ? (
+          {rpcError && (error || allRpcProviderError) ? (
             <div className="bg-white dark:bg-black-600 soft-shadow rounded-xl pb-1">
               <div className="text-sm text-nearblue-600 dark:text-neargray-10 divide-solid dark:divide-black-200 divide-gray-200 !divide-y">
                 <ErrorMessage
                   icons={<FileSlash />}
-                  message="Sorry, we are unable to locate this transaction hash. Please try using a
-        different RPC."
+                  message="Sorry, we are unable to locate this transaction hash. Please try again later."
                   mutedText={hash || ''}
                 />
               </div>
@@ -427,6 +433,7 @@ const Txn = ({
                     txn={txn ? txn : rpcData}
                     rpcTxn={rpcTxn}
                     loading={rpcError || !rpcTxn}
+                    statsData={statsData}
                   />
                 </div>
                 <div className={`${tabIndex === 2 ? '' : 'hidden'} `}>