feat(app): show access key for transaction

Nearblocks · Oct 22, 2024 · 62c8a73 · 62c8a73
1 parent f1bbc4f
commit 62c8a73
Show file tree

Hide file tree

Showing 8 changed files with 301 additions and 73 deletions.
diff --git a/apps/app/src/components/Transactions/Execution.tsx b/apps/app/src/components/Transactions/Execution.tsx
@@ -18,10 +18,15 @@ import { isEmpty } from 'lodash';
 interface Props {
   txn: TransactionInfo;
   rpcTxn: RPCTransactionInfo;
+  statsData: {
+    stats: Array<{
+      near_price: string;
+    }>;
+  };
 }
 
 const Execution = (props: Props) => {
-  const { rpcTxn, txn } = props;
+  const { rpcTxn, txn, statsData } = props;
 
   const [receipt, setReceipt] = useState<
     NestedReceiptWithOutcome | FailedToFindReceipt | any
@@ -69,7 +74,9 @@ const Execution = (props: Props) => {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rpcTxn, receipt?.block_hash]);
+
   const txnsPending = txn?.outcomes?.status === null;
+
   return (
     <div className="text-sm text-nearblue-600 dark:text-neargray-10 dark:divide-black-200  divide-solid divide-gray-200 divide-y">
       {txnsPending ? (
@@ -132,6 +139,8 @@ const Execution = (props: Props) => {
                 fellowOutgoingReceipts={[]}
                 convertionReceipt={true}
                 className=""
+                statsData={statsData}
+                rpcTxn={rpcTxn}
               />
             )}
           </div>

diff --git a/apps/app/src/components/Transactions/Receipt.tsx b/apps/app/src/components/Transactions/Receipt.tsx
@@ -88,7 +88,9 @@ const Receipt = (props: Props) => {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rpcTxn]);
+
   const txnsPending = txn?.outcomes?.status === null;
+
   return (
     <div className="text-sm text-nearblue-600 dark:text-neargray-10 dark:divide-black-200 divide-solid divide-gray-200 divide-y">
       {txnsPending ? (
@@ -104,7 +106,12 @@ const Receipt = (props: Props) => {
           </div>
         </div>
       ) : (
-        <ReceiptRow receipt={receipt} loading={loading} statsData={statsData} />
+        <ReceiptRow
+          receipt={receipt}
+          loading={loading}
+          statsData={statsData}
+          rpcTxn={rpcTxn}
+        />
       )}
     </div>
   );

diff --git a/apps/app/src/components/Transactions/Receipts/ReceiptInfo.tsx b/apps/app/src/components/Transactions/Receipts/ReceiptInfo.tsx
@@ -1,12 +1,20 @@
 import TxnsReceiptStatus from '@/components/common/TxnsReceiptStatus';
 import Question from '@/components/Icons/Question';
 import useRpc from '@/hooks/useRpc';
+import { networkId } from '@/utils/config';
 import { hexy } from '@/utils/hexy';
-import { convertToMetricPrefix, localFormat, yoctoToNear } from '@/utils/libs';
+import {
+  convertToMetricPrefix,
+  fiatValue,
+  localFormat,
+  shortenAddress,
+  yoctoToNear,
+} from '@/utils/libs';
 import {
   Action,
   FunctionCallActionView,
   ReceiptsPropsInfo,
+  RPCTransactionInfo,
 } from '@/utils/types';
 import { Tooltip } from '@reach/tooltip';
 import Big from 'big.js';
@@ -17,12 +25,19 @@ import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
 
 interface Props {
   receipt: ReceiptsPropsInfo | any;
+  statsData: {
+    stats: Array<{
+      near_price: string;
+    }>;
+  };
+  rpcTxn: RPCTransactionInfo;
 }
 
-const ReceiptInfo = ({ receipt }: Props) => {
+const ReceiptInfo = ({ receipt, statsData, rpcTxn }: Props) => {
   const hashes = ['output', 'inspect'];
   const [pageHash, setHash] = useState('output');
   const [tabIndex, setTabIndex] = useState(0);
+  const [receiptKey, setReceiptKey] = useState<any>(null);
   const { t } = useTranslation();
   const onTab = (index: number) => {
     setHash(hashes[index]);
@@ -33,6 +48,8 @@ const ReceiptInfo = ({ receipt }: Props) => {
   const [loading, setLoading] = useState(false);
   const { getBlockDetails } = useRpc();
 
+  const currentPrice = statsData?.stats?.[0]?.near_price || 0;
+
   useEffect(() => {
     const index = hashes.indexOf(pageHash as string);
 
@@ -183,6 +200,20 @@ const ReceiptInfo = ({ receipt }: Props) => {
       status !== undefined) ||
     status === 'successReceiptId';
 
+  useEffect(() => {
+    if (rpcTxn && rpcTxn?.receipts?.length > 0) {
+      const receiptToFind: any = rpcTxn?.receipts?.find(
+        (item: any) => item?.receipt_id === receipt?.id,
+      );
+      if (receiptToFind) {
+        setReceiptKey(receiptToFind);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rpcTxn]);
+
+  const deposit = receipt?.actions[0]?.args?.deposit ?? 0;
+
   return (
     <div className="flex flex-col">
       <Tabs selectedIndex={tabIndex} onSelect={(index) => onTab(index)}>
@@ -336,13 +367,38 @@ const ReceiptInfo = ({ receipt }: Props) => {
                     </Tooltip>
                     From
                   </td>
-                  <td className="py-2 pl-4">
-                    <Link
-                      href={`/address/${receipt?.predecessorId}`}
-                      className="text-green-500 dark:text-green-250 hover:no-underline"
-                    >
-                      {receipt?.predecessorId}
-                    </Link>
+                  <td className="pl-4">
+                    <div className="flex items-center">
+                      <Link
+                        href={`/address/${receipt?.predecessorId}`}
+                        className="text-green-500 dark:text-green-250 hover:no-underline"
+                      >
+                        {receipt?.predecessorId}
+                      </Link>
+                      {!loading &&
+                        receiptKey &&
+                        receiptKey?.receipt?.Action?.signer_public_key &&
+                        receiptKey?.receipt?.Action?.signer_id && (
+                          <Tooltip
+                            label={'Access key used for this receipt'}
+                            className="absolute h-auto max-w-xs bg-black bg-opacity-90 z-10 text-xs text-white px-3 py-2"
+                          >
+                            <span>
+                              &nbsp;(
+                              <Link
+                                href={`/address/${receiptKey?.receipt?.Action?.signer_id}?tab=accesskeys`}
+                                className="text-green-500 dark:text-green-250 font-bold hover:no-underline"
+                              >
+                                {shortenAddress(
+                                  receiptKey?.receipt?.Action
+                                    ?.signer_public_key,
+                                )}
+                              </Link>
+                              )
+                            </span>
+                          </Tooltip>
+                        )}
+                    </div>
                   </td>
                 </tr>
                 <tr>
@@ -405,68 +461,78 @@ const ReceiptInfo = ({ receipt }: Props) => {
                 <tr>
                   <td className="flex items-center py-2 pr-4">
                     <Tooltip
-                      label={'Burnt Gas by Receipt'}
+                      label={t('txns:txn.receipts.burnt.tooltip')}
                       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>
-                    Burnt Gas
+                    Burnt Gas & Tokens by Receipt
                   </td>
                   <td className="text-xs py-2 pl-4">
-                    <span className="bg-orange-50 dark:bg-black-200 rounded-md px-2 py-1">
-                      <span className="text-xs mr-2">🔥 </span>
-                      {`${
-                        !loading && receipt?.outcome?.gasBurnt
-                          ? convertToMetricPrefix(receipt?.outcome?.gasBurnt)
-                          : receipt?.outcome?.gasBurnt ?? ''
-                      }gas`}
-                    </span>
+                    <div className="w-full items-center text-xs flex md:w-3/4 break-words max-w-xs">
+                      <div className="bg-orange-50  dark:bg-black-200 rounded-md px-2 py-1">
+                        <span className="text-xs mr-2">🔥 </span>
+                        {`${
+                          !loading && receipt?.outcome?.gasBurnt
+                            ? convertToMetricPrefix(receipt?.outcome?.gasBurnt)
+                            : receipt?.outcome?.gasBurnt ?? ''
+                        }gas`}
+                        <span className="text-gray-300 px-1">|</span>{' '}
+                        {!loading && receipt?.outcome?.tokensBurnt
+                          ? yoctoToNear(receipt?.outcome?.tokensBurnt, true)
+                          : receipt?.outcome?.tokensBurnt ?? ''}
+                        &nbsp;Ⓝ
+                      </div>
+                    </div>
                   </td>
                 </tr>
                 <tr>
                   <td className="flex items-center py-2 pr-4">
                     <Tooltip
-                      label={'Burnt Tokens by Receipt'}
+                      label={'Refund from 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>
-                    Burnt Tokens
+                    Refund
                   </td>
-                  <td className="text-xs py-2 pl-4">
-                    <span className="bg-orange-50 dark:bg-black-200 rounded-md px-2 py-1">
-                      <span className="text-xs mr-2">🔥 </span>
-                      {!loading && receipt?.outcome?.tokensBurnt
-                        ? yoctoToNear(receipt?.outcome?.tokensBurnt, true)
-                        : receipt?.outcome?.tokensBurnt ?? ''}
-                      Ⓝ
-                    </span>
+                  <td className="py-2 pl-4">
+                    {!loading &&
+                      receipt?.outcome?.nestedReceipts &&
+                      yoctoToNear(
+                        getRefund(receipt?.outcome?.nestedReceipts) || '0',
+                        true,
+                      )}
+                    &nbsp;Ⓝ
                   </td>
                 </tr>
                 <tr>
                   <td className="flex items-center py-2 pr-4">
                     <Tooltip
-                      label={'Refund from the receipt'}
+                      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>
-                    Refund
+                    Value
                   </td>
                   <td className="py-2 pl-4">
-                    {!loading &&
-                      receipt?.outcome?.nestedReceipts &&
-                      yoctoToNear(
-                        getRefund(receipt?.outcome?.nestedReceipts) || '0',
-                        true,
-                      )}
+                    {!loading && receipt && deposit
+                      ? yoctoToNear(deposit, true)
+                      : deposit ?? '0'}{' '}
                     Ⓝ
+                    {currentPrice && networkId === 'mainnet'
+                      ? ` ($${fiatValue(
+                          yoctoToNear(deposit ?? 0, false),
+                          currentPrice,
+                        )})`
+                      : ''}
                   </td>
                 </tr>
               </tbody>