kopia lustrzana https://github.com/bugout-dev/moonstream
added txinfo
yhtiyar
rodzic
d07d9d043f
commit
89524bb238
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
import { Flex, Link, HStack, Skeleton, Box, Heading } from "@chakra-ui/react";
|
||||
import { ExternalLinkIcon } from "@chakra-ui/icons";
|
||||
import { useJournalEntry, useRouter } from "../../src/core/hooks";
|
||||
import { useTxInfo, useRouter } from "../../src/core/hooks";
|
||||
import FourOFour from "../../src/components/FourOFour";
|
||||
import FourOThree from "../../src/components/FourOThree";
|
||||
import Tags from "../../src/components/Tags";
|
||||
|
|
@ -9,45 +9,115 @@ import CustomIcon from "../../src/components/CustomIcon";
|
|||
import { getLayout } from "../../src/layouts/EntriesLayout";
|
||||
import MarkdownView from "react-showdown";
|
||||
import Scrollable from "../../src/components/Scrollable";
|
||||
import TxInfo from "../../src/components/TxInfo"
|
||||
|
||||
|
||||
const Entry = () => {
|
||||
const showdownHighlight = require("showdown-highlight");
|
||||
const router = useRouter();
|
||||
const { entryId } = router.params;
|
||||
const journalId = `9b0d7567-4634-4bf7-946d-60ef4414aa93`;
|
||||
const {
|
||||
/* const {
|
||||
data: entry,
|
||||
isFetchedAfterMount,
|
||||
isLoading,
|
||||
isError,
|
||||
error,
|
||||
} = useJournalEntry(journalId, entryId, "personal");
|
||||
*/
|
||||
const raw_transaction = {
|
||||
"tx": {
|
||||
"blockHash": "0x2f1cb4055fa3ba8af199aeba564917999b3e661d582082e5928721c3f4ef04ca",
|
||||
"blockNumber": 12882164,
|
||||
"from": "0x52f200565581ae950c765b67f574cfc99f662657",
|
||||
"gas": 400000,
|
||||
"gasPrice": 12500000000,
|
||||
"hash": "0xee3d2c14cacc0e5b8085c0b1a0cbacb6ed79762220dcee0a9c19a5a25e59a331",
|
||||
"input": "0x6102a8610026600b82828239805160001a60731461001957fe5b30600052607381538281f3fe73000000000000000000000000000000000000000030146080604052600436106100355760003560e01c80636e8af2721461003a575b600080fd5b6100576004803603602081101561005057600080fd5b50356100b2565b6040518083815260200180602001828103825283818151815260200191508051906020019060200280838360005b8381101561009d578181015183820152602001610085565b50505050905001935050505060405180910390f35b60048101546000906060908067ffffffffffffffff811180156100d457600080fd5b506040519080825280602002602001820160405280156100fe578160200160208202803683370190505b50915060005b8181101561017757600061014f670de0b6b3a764000061014688600401858154811061012c57fe5b6000918252602090912001546001600160a01b031661017e565b600f0b906101ff565b905080850194508084838151811061016357fe5b602090810291909101015250600101610104565b5050915091565b6000816001600160a01b031663ac969a73306040518263ffffffff1660e01b815260040180826001600160a01b0316815260200191505060206040518083038186803b1580156101cd57600080fd5b505afa1580156101e1573d6000803e3d6000fd5b505050506040513d60208110156101f757600080fd5b505192915050565b60008161020e5750600061026c565b600083600f0b121561021f57600080fd5b600f83900b6fffffffffffffffffffffffffffffffff8316810260401c90608084901c026001600160c01b0381111561025757600080fd5b60401b811981111561026857600080fd5b0190505b9291505056fea2646970667358221220bf54788224a5a22890835d5e41e3e9622b1a055984390a38ae02a95c53dccfd864736f6c63430007030033",
|
||||
"nonce": 184,
|
||||
"r": "0xe7e8e58deccd5f277928d25f7fc66548be1a84af811db8927dd86fbd08c5acd6",
|
||||
"s": "0x2214b48d9ce2b80c11586ddaff5214429c99e09188f75c04b7b0d0b7536ec94c",
|
||||
"to": null,
|
||||
"transactionIndex": 76,
|
||||
"type": "0x0",
|
||||
"v": "0x25",
|
||||
"value": 0
|
||||
}
|
||||
}
|
||||
const test = useTxInfo(raw_transaction)
|
||||
console.log(test)
|
||||
let isFetchedAfterMount = false;
|
||||
let isLoading = false;
|
||||
let isError = false;
|
||||
|
||||
const contextUrl = () => {
|
||||
if (entry?.context_url) {
|
||||
switch (entry.context_type) {
|
||||
case "slack":
|
||||
return (
|
||||
<Link href={entry.context_url} isExternal>
|
||||
<CustomIcon width="28px" icon="slack" />
|
||||
</Link>
|
||||
);
|
||||
case "github":
|
||||
return (
|
||||
<Link href={entry.context_url} isExternal>
|
||||
<CustomIcon width="28px" icon="github" />
|
||||
</Link>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<Link href={entry.context_url} isExternal>
|
||||
<ExternalLinkIcon bg="none" boxSize="18px" />
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
} else return "";
|
||||
};
|
||||
|
||||
const ETHER_TX = {
|
||||
"tx": {
|
||||
"gas": 400000,
|
||||
"gasPrice": 12500000000,
|
||||
"value": 0,
|
||||
"from": "0x52f200565581ae950c765b67f574cfc99f662657",
|
||||
"to": null,
|
||||
"hash": "0xee3d2c14cacc0e5b8085c0b1a0cbacb6ed79762220dcee0a9c19a5a25e59a331",
|
||||
"blockHash": "0x2f1cb4055fa3ba8af199aeba564917999b3e661d582082e5928721c3f4ef04ca",
|
||||
"blockNumber": 12882164,
|
||||
"input": "0x6102a8610026600b82828239805160001a60731461001957fe5b30600052607381538281f3fe73000000000000000000000000000000000000000030146080604052600436106100355760003560e01c80636e8af2721461003a575b600080fd5b6100576004803603602081101561005057600080fd5b50356100b2565b6040518083815260200180602001828103825283818151815260200191508051906020019060200280838360005b8381101561009d578181015183820152602001610085565b50505050905001935050505060405180910390f35b60048101546000906060908067ffffffffffffffff811180156100d457600080fd5b506040519080825280602002602001820160405280156100fe578160200160208202803683370190505b50915060005b8181101561017757600061014f670de0b6b3a764000061014688600401858154811061012c57fe5b6000918252602090912001546001600160a01b031661017e565b600f0b906101ff565b905080850194508084838151811061016357fe5b602090810291909101015250600101610104565b5050915091565b6000816001600160a01b031663ac969a73306040518263ffffffff1660e01b815260040180826001600160a01b0316815260200191505060206040518083038186803b1580156101cd57600080fd5b505afa1580156101e1573d6000803e3d6000fd5b505050506040513d60208110156101f757600080fd5b505192915050565b60008161020e5750600061026c565b600083600f0b121561021f57600080fd5b600f83900b6fffffffffffffffffffffffffffffffff8316810260401c90608084901c026001600160c01b0381111561025757600080fd5b60401b811981111561026857600080fd5b0190505b9291505056fea2646970667358221220bf54788224a5a22890835d5e41e3e9622b1a055984390a38ae02a95c53dccfd864736f6c63430007030033",
|
||||
"nonce": 184,
|
||||
"r": "0xe7e8e58deccd5f277928d25f7fc66548be1a84af811db8927dd86fbd08c5acd6",
|
||||
"s": "0x2214b48d9ce2b80c11586ddaff5214429c99e09188f75c04b7b0d0b7536ec94c",
|
||||
"v": "0x25",
|
||||
"transactionIndex": 76,
|
||||
"type": "0x0"
|
||||
},
|
||||
"is_smart_contract_deployment": true,
|
||||
"is_smart_contract_call": false,
|
||||
"smart_contract_address": "0x2f7E36b386F40d01A867BaffF3F321bC01882F7f",
|
||||
"abi": {
|
||||
"functions": [
|
||||
{
|
||||
"hex_signature": "0x6e8af272",
|
||||
"text_signature_candidates": [],
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"hex_signature": "0xac969a73",
|
||||
"text_signature_candidates": [
|
||||
"viewNumeraireBalance(address)"
|
||||
],
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"hex_signature": "0xffffffff",
|
||||
"text_signature_candidates": [
|
||||
"test266151307()",
|
||||
"lololo()"
|
||||
],
|
||||
"type": "function"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{
|
||||
"hex_signature": "0x123456",
|
||||
"text_signature_candidates": [
|
||||
"viewNumeraireBalance(address)"
|
||||
],
|
||||
"type": "event"
|
||||
},
|
||||
{
|
||||
"hex_signature": "0x123436",
|
||||
"text_signature_candidates": [
|
||||
|
||||
],
|
||||
"type": "event"
|
||||
},
|
||||
]
|
||||
},
|
||||
"errors": []
|
||||
}
|
||||
let entry = {
|
||||
title : ETHER_TX.tx.hash,
|
||||
content: "```json\n"+JSON.stringify(ETHER_TX)+"```"
|
||||
}
|
||||
|
||||
|
||||
if (isError && error.response.status === 404) return <FourOFour />;
|
||||
if (isError && error.response.status === 403) return <FourOThree />;
|
||||
// if (!entry || isLoading) return "";
|
||||
|
|
@ -68,15 +138,6 @@ const Entry = () => {
|
|||
isLoaded={!isLoading}
|
||||
>
|
||||
<HStack id="EntryHeader" width="100%" m={0}>
|
||||
<Box
|
||||
id="ContextURL"
|
||||
transition="0.3s"
|
||||
_hover={{ transform: "scale(1.2)" }}
|
||||
pl={2}
|
||||
pr={entry?.context_url ? 2 : 0}
|
||||
>
|
||||
{contextUrl()}
|
||||
</Box>
|
||||
<Heading
|
||||
overflow="hidden"
|
||||
width={entry?.context_url ? "calc(100% - 28px)" : "100%"}
|
||||
|
|
@ -111,17 +172,14 @@ const Entry = () => {
|
|||
mt={1}
|
||||
isLoaded={isFetchedAfterMount || entry}
|
||||
>
|
||||
|
||||
<Scrollable>
|
||||
<MarkdownView
|
||||
markdown={entry?.content}
|
||||
options={{ tables: true, emoji: true }}
|
||||
extensions={showdownHighlight()}
|
||||
/>
|
||||
<TxInfo transaction = {ETHER_TX}></TxInfo>
|
||||
</Scrollable>
|
||||
</Skeleton>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
Entry.getLayout = getLayout;
|
||||
//Entry.getLayout = getLayout;
|
||||
export default Entry;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
import React from "react";
|
||||
import {Code, Stat, StatLabel, StatGroup, StatHelpText, StatNumber, Box, VStack} from "@chakra-ui/react";
|
||||
import {
|
||||
Table,
|
||||
Thead,
|
||||
Tbody,
|
||||
Tfoot,
|
||||
Tr,
|
||||
Th,
|
||||
Td,
|
||||
TableCaption,
|
||||
} from "@chakra-ui/react"
|
||||
|
||||
const TxABI = (props) => {
|
||||
const byteCode = props.byteCode;
|
||||
const abi = props.abi;
|
||||
console.log(abi.functions)
|
||||
return (
|
||||
<VStack spacing={3}>
|
||||
<br/>
|
||||
<h2>Transaction smart contract bytecode:</h2>
|
||||
<Code w="95%" colorScheme="facebook">
|
||||
{byteCode}
|
||||
</Code>
|
||||
<h2>Smart contract abi:</h2>
|
||||
<Table>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>Signature hex</Th>
|
||||
<Th>Decompiled signature</Th>
|
||||
<Th>Signature type</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{abi.functions.concat(abi.events).map(el => (
|
||||
<Tr key = {el.hex_signature}>
|
||||
<Td>{el.hex_signature}</Td>
|
||||
<Td>{el.text_signature_candidates.length>0 ? el.text_signature_candidates.join(", ") : "Unknown"}</Td>
|
||||
<Td>{el.type}</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</VStack>
|
||||
)
|
||||
}
|
||||
const TxInfo = (props) => {
|
||||
const transaction = props.transaction;
|
||||
const dont_display = (key) => {
|
||||
return !["input"].includes(key)
|
||||
}
|
||||
return (
|
||||
<Box boxShadow="xs" p="6" rounded="md">
|
||||
<StatGroup>
|
||||
<Stat>
|
||||
<StatLabel>Value</StatLabel>
|
||||
<StatNumber>{transaction.tx.value}</StatNumber>
|
||||
<StatHelpText>amount of ETH to transfer in WEI</StatHelpText>
|
||||
</Stat>
|
||||
<Stat>
|
||||
<StatLabel>Gas</StatLabel>
|
||||
<StatNumber>{transaction.tx.gas}</StatNumber>
|
||||
<StatHelpText>gas limit for transaction</StatHelpText>
|
||||
</Stat>
|
||||
<Stat>
|
||||
<StatLabel>Gas price</StatLabel>
|
||||
<StatNumber>{transaction.tx.gasPrice}</StatNumber>
|
||||
<StatHelpText>the fee the sender pays per unit of gas</StatHelpText>
|
||||
</Stat>
|
||||
</StatGroup>
|
||||
|
||||
<Table variant="simple" >
|
||||
<Tbody>
|
||||
{Object.keys(transaction.tx).filter(dont_display).map((key) => (
|
||||
<Tr key = {key}>
|
||||
<Td>{key}</Td>
|
||||
<Td>{transaction.tx[key]}</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
{transaction.abi &&
|
||||
<TxABI
|
||||
byteCode={transaction.tx.input}
|
||||
abi={transaction.abi}
|
||||
/>
|
||||
}
|
||||
</Box>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
export default TxInfo;
|
||||
Ładowanie…
Reference in New Issue