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 { Light as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||||
import hljs from "highlight.js";
|
import hljs from "highlight.js";
|
||||||
import docco from "react-syntax-highlighter/dist/esm/styles/hljs/docco";
|
import docco from "react-syntax-highlighter/dist/esm/styles/hljs/docco";
|
||||||
|
import { useContract } from "../useSourcify";
|
||||||
|
|
||||||
import hljsDefineSolidity from "highlightjs-solidity";
|
import hljsDefineSolidity from "highlightjs-solidity";
|
||||||
import { useContract } from "../useSourcify";
|
|
||||||
hljsDefineSolidity(hljs);
|
hljsDefineSolidity(hljs);
|
||||||
|
|
||||||
type ContractProps = {
|
type ContractProps = {
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
|
import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
|
||||||
import ContentFrame from "../ContentFrame";
|
import ContentFrame from "../ContentFrame";
|
||||||
import InfoRow from "../components/InfoRow";
|
import InfoRow from "../components/InfoRow";
|
||||||
|
import ABI from "./ABI";
|
||||||
import Contract from "./Contract";
|
import Contract from "./Contract";
|
||||||
import { RuntimeContext } from "../useRuntime";
|
import { RuntimeContext } from "../useRuntime";
|
||||||
import { Metadata } from "../useSourcify";
|
import { Metadata } from "../useSourcify";
|
||||||
|
|
@ -82,57 +83,67 @@ const Contracts: React.FC<ContractsProps> = ({
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
{rawMetadata !== undefined && rawMetadata !== null && (
|
{rawMetadata !== undefined && rawMetadata !== null && (
|
||||||
<div>
|
<>
|
||||||
<Menu>
|
{rawMetadata.output.abi && (
|
||||||
<div className="flex space-x-2 justify-between items-baseline">
|
<div className="mb-3">
|
||||||
<Menu.Button className="flex space-x-2 text-sm border-l border-r border-t rounded-t px-2 py-1">
|
<div className="flex space-x-2 text-sm border-l border-r border-t rounded-t px-2 py-1">
|
||||||
<span>{selected}</span>
|
ABI
|
||||||
<span className="self-center">
|
</div>
|
||||||
<FontAwesomeIcon icon={faChevronDown} size="xs" />
|
<ABI abi={rawMetadata.output.abi} />
|
||||||
</span>
|
|
||||||
</Menu.Button>
|
|
||||||
{provider && (
|
|
||||||
<div className="text-sm">
|
|
||||||
<ExternalLink
|
|
||||||
href={openInRemixURL(
|
|
||||||
checksummedAddress,
|
|
||||||
provider.network.chainId
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
Open in Remix
|
|
||||||
</ExternalLink>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</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>
|
||||||
|
<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>
|
</div>
|
||||||
</ContentFrame>
|
</ContentFrame>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue