Skip to content

Commit

Permalink
feat(app): show access key for transaction
Browse files Browse the repository at this point in the history
  • Loading branch information
@yudhomax
yudhomax committed Oct 24, 2024
1 parent fb5244c commit 37c163d
Show file tree
Hide file tree
Showing 8 changed files with 313 additions and 91 deletions.
11 changes: 10 additions & 1 deletion apps/app/src/components/Transactions/Execution.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 ? (
Expand Down Expand Up @@ -132,6 +139,8 @@ const Execution = (props: Props) => {
fellowOutgoingReceipts={[]}
convertionReceipt={true}
className=""
statsData={statsData}
rpcTxn={rpcTxn}
/>
)}
</div>
Expand Down
9 changes: 8 additions & 1 deletion apps/app/src/components/Transactions/Receipt.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? (
Expand All @@ -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>
);
Expand Down
169 changes: 119 additions & 50 deletions apps/app/src/components/Transactions/Receipts/ReceiptInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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]);
Expand All @@ -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);

Expand Down Expand Up @@ -183,6 +200,23 @@ 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, receipt]);

const deposit =
Array.isArray(receipt?.actions) && receipt.actions.length > 0
? receipt.actions[0]?.args?.deposit ?? 0
: 0;

return (
<div className="flex flex-col">
<Tabs selectedIndex={tabIndex} onSelect={(index) => onTab(index)}>
Expand Down Expand Up @@ -336,13 +370,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>
Expand All @@ -366,6 +425,36 @@ const ReceiptInfo = ({ receipt }: Props) => {
</Link>
</td>
</tr>
<tr>
<td className="flex items-center py-2 pr-4">
<Tooltip
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 & Tokens
</td>
<td className="text-xs py-2 pl-4">
<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
Expand Down Expand Up @@ -405,68 +494,48 @@ const ReceiptInfo = ({ receipt }: Props) => {
<tr>
<td className="flex items-center py-2 pr-4">
<Tooltip
label={'Burnt Gas by 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 Gas
</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>
</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>
Expand Down
Loading

0 comments on commit 37c163d

Please sign in to comment.