Transaction: m9kGhP7...wJXd

{ "data": { "nearblocksonbos.near": { "widget": { "bos-components.components.Transactions.Execution": { "": "/**\n * Component: TransactionsExecution\n * Author: Nearblocks Pte Ltd\n * License: Business Source License 1.1\n * Description: Alternative Style of Transaction Execution on Near Protocol.\n * @interface Props\n * @param {string} [network] - The network data to show, either mainnet or testnet\n * @param {Function} [t] - A function for internationalization (i18n) provided by the next-translate package.\n * @param {TransactionInfo} [txn] - Information related to a transaction.\n * @param {RPCTransactionInfo} [rpcTxn] - RPC data of the transaction.\n * @param {string} ownerId - The identifier of the owner of the component.\n */\n\n\n\n\n\n\n\n\n\n/* INCLUDE COMPONENT: \"includes/Common/Skeleton.jsx\" */\n/**\n * @interface Props\n * @param {string} [className] - The CSS class name(s) for styling purposes.\n */\n\n\n\n\n\nconst Skeleton = (props) => {\n return (\n <div\n className={`bg-gray-200 dark:bg-black-200 rounded shadow-sm animate-pulse ${props.className}`}\n ></div>\n );\n};/* END_INCLUDE COMPONENT: \"includes/Common/Skeleton.jsx\" */\n/* INCLUDE COMPONENT: \"includes/icons/FaHourglassStart.jsx\" */\nconst FaHourglassStart = (props) => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"1em\"\n viewBox=\"0 0 384 512\"\n {...props}\n >\n <path\n d=\"M32 0C14.3 0 0 14.3 0 32S14.3 64 32 64V75c0 42.4 16.9 83.1 46.9 113.1L146.7 256 78.9 323.9C48.9 353.9 32 394.6 32 437v11c-17.7 0-32 14.3-32 32s14.3 32 32 32H64 320h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V437c0-42.4-16.9-83.1-46.9-113.1L237.3 256l67.9-67.9c30-30 46.9-70.7 46.9-113.1V64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320 64 32zM288 437v11H96V437c0-25.5 10.1-49.9 28.1-67.9L192 301.3l67.9 67.9c18 18 28.1 42.4 28.1 67.9z\"\n fill=\"#FFEB3B\"\n />\n </svg>\n );\n};/* END_INCLUDE COMPONENT: \"includes/icons/FaHourglassStart.jsx\" */\n\n\n\n\n\n\nfunction MainComponent(props) {\n const { network, rpcTxn, t, ownerId, txn } = props;\n\n const { collectNestedReceiptWithOutcomeOld, parseOutcomeOld, parseReceipt } =\n VM.require(`${ownerId}/widget/includes.Utils.near`);\n\n const { getConfig } = VM.require(`${ownerId}/widget/includes.Utils.libs`);\n\n const [receipt, setReceipt] = useState\n\n(null);\n\n const config = getConfig ? getConfig(network) : '';\n\n const [expandAll, setExpandAll] = useState(false);\n const expandAllReceipts = useCallback(\n () => setExpandAll((x) => !x),\n [setExpandAll],\n );\n\n function transactionReceipts(txn) {\n const receiptsMap =\n txn?.receipts_outcome &&\n txn?.receipts_outcome.reduce((mapping, receiptOutcome) => {\n const receipt = parseReceipt\n ? parseReceipt(\n txn.receipts.find(\n (rpcReceipt) => rpcReceipt.receipt_id === receiptOutcome.id,\n ),\n receiptOutcome,\n txn.transaction,\n )\n : '';\n return mapping.set(receiptOutcome.id, {\n ...receipt,\n outcome: parseOutcomeOld ? parseOutcomeOld(receiptOutcome) : '',\n });\n }, new Map());\n\n const receipts = collectNestedReceiptWithOutcomeOld\n ? collectNestedReceiptWithOutcomeOld(\n txn.transaction_outcome.outcome.receipt_ids[0],\n receiptsMap,\n )\n : '';\n\n return receipts;\n }\n\n useEffect(() => {\n if (rpcTxn) {\n const receipt = transactionReceipts(rpcTxn);\n setReceipt(receipt);\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [rpcTxn, receipt?.block_hash, config.backendUrl]);\n\n const txnsPending = txn?.outcomes?.status === null;\n return (\n <div className=\"text-sm text-nearblue-600 dark:text-neargray-10 dark:divide-black-200 divide-solid divide-gray-200 divide-y\">\n {txnsPending ? (\n <div className=\"flex justify-center text-base p-24\">\n <div className=\"text-center\">\n <div className=\"inline-flex items-center text-base rounded bg-yellow-50 dark:bg-black-200 text-yellow-500 animate-spin my-3\">\n <FaHourglassStart className=\"w-5 !h-5\" />\n </div>\n\n <h1 className=\"text-lg text-nearblue-600 dark:text-neargray-10\">\n This transaction is pending confirmation.\n </h1>\n </div>\n </div>\n ) : (\n <div className=\"flex flex-col w-full mx-auto divide-y dark:divide-black-200\">\n <div className=\"flex justify-end w-full p-4 items-center\">\n <div\n className=\"cursor-pointer mx-1 flex items-center text-nearblue-600 dark:text-neargray-10 font-medium py-1 border border-neargray-700 dark:border-black-200 px-2 rounded-md bg-whit select-none\"\n onClick={expandAllReceipts}\n >\n <span>\n <span className=\"mr-1.5\">\n {expandAll ? 'Collapse All' : 'Expand All'}\n </span>\n {expandAll ? '-' : '+'}\n </span>\n </div>\n </div>\n <div className=\"p-4 md:px-8 overflow-auto\">\n {!receipt?.id ? (\n <div>\n <div className=\"flex flex-row mb-2.5\">\n <div className=\"bg-gray-200 dark:bg-black-200 h-5 w-5 rounded-full mr-3\"></div>\n <div className=\"text-green-500 dark:text-green-250 text-sm\">\n <Skeleton className=\"w-40 h-4\" />\n </div>\n </div>\n {[...Array(3)].map((_, i) => (\n <div\n key={i}\n className=\"border-green-500 dark:border-green-250\"\n >\n <div className=\"flex flex-col relative border-l border-green-500 dark:border-green-250 py-2 pl-6 ml-2.5\">\n <Skeleton className=\"w-25 h-8\" />\n </div>\n <div className=\"relative flex flex-row my-2.5\">\n <div className=\"bg-gray-200 dark:bg-black-200 h-5 w-5 rounded-full mr-3\"></div>\n <div className=\"text-green-500 dark:text-green-250 text-sm \">\n <Skeleton className=\"w-40 h-4\" />\n </div>\n </div>\n </div>\n ))}\n </div>\n ) : (\n <Widget\n src={`${ownerId}/widget/bos-components.components.Transactions.TransactionReceipt`}\n props={{\n network: network,\n t: t,\n receipt: receipt,\n expandAll: expandAll,\n fellowOutgoingReceipts: [],\n convertionReceipt: true,\n className: '',\n ownerId,\n }}\n loading={\n <div>\n <div className=\"flex flex-row mb-2.5\">\n <div className=\"bg-gray-200 dark:bg-black-200 h-5 w-5 rounded-full mr-3\"></div>\n <div className=\"text-green-500 dark:text-green-250 text-sm\">\n <Skeleton className=\"w-40 h-4\" />\n </div>\n </div>\n {[...Array(3)].map((_, i) => (\n <div\n key={i}\n className=\"border-green-500 dark:border-green-250\"\n >\n <div className=\"flex flex-col relative border-l border-green-500 dark:border-green-250 py-2 pl-6 ml-2.5\">\n <Skeleton className=\"w-25 h-8\" />\n </div>\n <div className=\"relative flex flex-row my-2.5\">\n <div className=\"bg-gray-200 dark:bg-black-200 h-5 w-5 rounded-full mr-3\"></div>\n <div className=\"text-green-500 dark:text-green-250 text-sm \">\n <Skeleton className=\"w-40 h-4\" />\n </div>\n </div>\n </div>\n ))}\n </div>\n }\n />\n )}\n </div>\n </div>\n )}\n </div>\n );\n}\n\nreturn MainComponent(props, context);" } } } } }