Add abi section
This commit is contained in:
Willian Mitsuda
parent
274705ce70
commit
05c230ef9d
|
|
@ -0,0 +1,24 @@
|
|||
import React from "react";
|
||||
import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||
import hljs from "highlight.js";
|
||||
import docco from "react-syntax-highlighter/dist/esm/styles/hljs/docco";
|
||||
|
||||
import hljsDefineSolidity from "highlightjs-solidity";
|
||||
hljsDefineSolidity(hljs);
|
||||
|
||||
type ABIProps = {
|
||||
abi: any[];
|
||||
};
|
||||
|
||||
const ABI: React.FC<ABIProps> = ({ abi }) => (
|
||||
<SyntaxHighlighter
|
||||
className="w-full h-60 border font-code text-base"
|
||||
language="json"
|
||||
style={docco}
|
||||
showLineNumbers
|
||||
>
|
||||
{JSON.stringify(abi, null, " ") ?? ""}
|
||||
</SyntaxHighlighter>
|
||||
);
|
||||
|
||||
export default React.memo(ABI);
|
||||
|
|
@ -2,9 +2,9 @@ import React from "react";
|
|||
import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||
import hljs from "highlight.js";
|
||||
import docco from "react-syntax-highlighter/dist/esm/styles/hljs/docco";
|
||||
import { useContract } from "../useSourcify";
|
||||
|
||||
import hljsDefineSolidity from "highlightjs-solidity";
|
||||
import { useContract } from "../useSourcify";
|
||||
hljsDefineSolidity(hljs);
|
||||
|
||||
type ContractProps = {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|||
import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
|
||||
import ContentFrame from "../ContentFrame";
|
||||
import InfoRow from "../components/InfoRow";
|
||||
import ABI from "./ABI";
|
||||
import Contract from "./Contract";
|
||||
import { RuntimeContext } from "../useRuntime";
|
||||
import { Metadata } from "../useSourcify";
|
||||
|
|
@ -82,57 +83,67 @@ const Contracts: React.FC<ContractsProps> = ({
|
|||
</span>
|
||||
)}
|
||||
{rawMetadata !== undefined && rawMetadata !== null && (
|
||||
<div>
|
||||
<Menu>
|
||||
<div className="flex space-x-2 justify-between items-baseline">
|
||||
<Menu.Button className="flex space-x-2 text-sm border-l border-r border-t rounded-t px-2 py-1">
|
||||
<span>{selected}</span>
|
||||
<span className="self-center">
|
||||
<FontAwesomeIcon icon={faChevronDown} size="xs" />
|
||||
</span>
|
||||
</Menu.Button>
|
||||
{provider && (
|
||||
<div className="text-sm">
|
||||
<ExternalLink
|
||||
href={openInRemixURL(
|
||||
checksummedAddress,
|
||||
provider.network.chainId
|
||||
)}
|
||||
>
|
||||
Open in Remix
|
||||
</ExternalLink>
|
||||
</div>
|
||||
)}
|
||||
<>
|
||||
{rawMetadata.output.abi && (
|
||||
<div className="mb-3">
|
||||
<div className="flex space-x-2 text-sm border-l border-r border-t rounded-t px-2 py-1">
|
||||
ABI
|
||||
</div>
|
||||
<ABI abi={rawMetadata.output.abi} />
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Menu.Items className="absolute border p-1 rounded-b bg-white flex flex-col">
|
||||
{Object.entries(rawMetadata.sources).map(([k]) => (
|
||||
<Menu.Item key={k}>
|
||||
<button
|
||||
className={`flex text-sm px-2 py-1 ${
|
||||
selected === k
|
||||
? "font-bold bg-gray-200 text-gray-500"
|
||||
: "hover:border-orange-200 hover:text-gray-500 text-gray-400 transition-transform transition-colors duration-75"
|
||||
}`}
|
||||
onClick={() => setSelected(k)}
|
||||
>
|
||||
{k}
|
||||
</button>
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu.Items>
|
||||
</div>
|
||||
</Menu>
|
||||
{selected && (
|
||||
<Contract
|
||||
checksummedAddress={checksummedAddress}
|
||||
networkId={provider!.network.chainId}
|
||||
filename={selected}
|
||||
source={rawMetadata.sources[selected]}
|
||||
useIPFS={useIPFS}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Menu>
|
||||
<div className="flex space-x-2 justify-between items-baseline">
|
||||
<Menu.Button className="flex space-x-2 text-sm border-l border-r border-t rounded-t px-2 py-1">
|
||||
<span>{selected}</span>
|
||||
<span className="self-center">
|
||||
<FontAwesomeIcon icon={faChevronDown} size="xs" />
|
||||
</span>
|
||||
</Menu.Button>
|
||||
{provider && (
|
||||
<div className="text-sm">
|
||||
<ExternalLink
|
||||
href={openInRemixURL(
|
||||
checksummedAddress,
|
||||
provider.network.chainId
|
||||
)}
|
||||
>
|
||||
Open in Remix
|
||||
</ExternalLink>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Menu.Items className="absolute border p-1 rounded-b bg-white flex flex-col">
|
||||
{Object.entries(rawMetadata.sources).map(([k]) => (
|
||||
<Menu.Item key={k}>
|
||||
<button
|
||||
className={`flex text-sm px-2 py-1 ${
|
||||
selected === k
|
||||
? "font-bold bg-gray-200 text-gray-500"
|
||||
: "hover:border-orange-200 hover:text-gray-500 text-gray-400 transition-transform transition-colors duration-75"
|
||||
}`}
|
||||
onClick={() => setSelected(k)}
|
||||
>
|
||||
{k}
|
||||
</button>
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu.Items>
|
||||
</div>
|
||||
</Menu>
|
||||
{selected && (
|
||||
<Contract
|
||||
checksummedAddress={checksummedAddress}
|
||||
networkId={provider!.network.chainId}
|
||||
filename={selected}
|
||||
source={rawMetadata.sources[selected]}
|
||||
useIPFS={useIPFS}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</ContentFrame>
|
||||
|
|
|
|||
Loading…
Reference in New Issue