Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(app): show access key for transaction #569

Merged
merged 1 commit into from
Nov 6, 2024
Merged

feat(app): show access key for transaction #569

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions apps/app/src/components/Icons/Delegate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React, { SVGProps } from 'react';

export const Delegate = (props: SVGProps<SVGSVGElement>) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width={18}
height={18}
fill="currentColor"
{...props}
>
<path d="M7.10508 8.78991C7.45179 10.0635 8.61653 11 10 11H14C16.4703 11 18.5222 12.7915 18.9274 15.1461C20.1303 15.5367 21 16.6668 21 18C21 19.6569 19.6569 21 18 21C16.3431 21 15 19.6569 15 18C15 16.7334 15.7849 15.6501 16.8949 15.2101C16.5482 13.9365 15.3835 13 14 13H10C8.87439 13 7.83566 12.6281 7 12.0004V15.1707C8.16519 15.5825 9 16.6938 9 18C9 19.6569 7.65685 21 6 21C4.34315 21 3 19.6569 3 18C3 16.6938 3.83481 15.5825 5 15.1707V8.82929C3.83481 8.41746 3 7.30622 3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6C9 7.26661 8.21506 8.34988 7.10508 8.78991Z"></path>
</svg>
);
};
11 changes: 10 additions & 1 deletion apps/app/src/components/Transactions/Execution.tsx
View file
Open in desktop
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
Open in desktop
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
106 changes: 95 additions & 11 deletions apps/app/src/components/Transactions/Receipts/ReceiptInfo.tsx
View file
Open in desktop
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 @@ -315,7 +349,7 @@ const ReceiptInfo = ({ receipt }: Props) => {
{block && (
<Link
href={`/blocks/${receipt?.outcome?.blockHash}`}
className="text-green-500 dark:text-green-250"
className="text-green-500 dark:text-green-250 font-semibold"
>
{!loading &&
block?.height &&
Expand All @@ -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 font-semibold"
>
{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 hover:no-underline"
>
{shortenAddress(
receiptKey?.receipt?.Action
?.signer_public_key,
)}
</Link>
)
</span>
</Tooltip>
)}
</div>
</td>
</tr>
<tr>
Expand All @@ -360,7 +419,7 @@ const ReceiptInfo = ({ receipt }: Props) => {
<td className="py-2 pl-4">
<Link
href={`/address/${receipt?.receiverId}`}
className="text-green-500 dark:text-green-250 hover:no-underline"
className="text-green-500 dark:text-green-250 hover:no-underline font-semibold"
>
{receipt?.receiverId}
</Link>
Expand Down Expand Up @@ -469,6 +528,31 @@ const ReceiptInfo = ({ receipt }: Props) => {
Ⓝ
</td>
</tr>
<tr>
<td className="flex items-center py-2 pr-4">
<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
</td>
<td className="py-2 pl-4">
{!loading && receipt && deposit
? yoctoToNear(deposit, true)
: deposit ?? '0'}{' '}
Ⓝ
{currentPrice && networkId === 'mainnet'
? ` ($${fiatValue(
yoctoToNear(deposit ?? 0, false),
currentPrice,
)})`
: ''}
</td>
</tr>
</tbody>
</table>
</div>
Expand Down
Loading
Loading