First parsed ABI UI prototype
This commit is contained in:
parent
d7ba5f09fd
commit
02261f264a
|
@ -1,5 +1,8 @@
|
|||
import React from "react";
|
||||
import { Tab } from "@headlessui/react";
|
||||
import ModeTab from "../components/ModeTab";
|
||||
import Copy from "../components/Copy";
|
||||
import DecodedABI from "./DecodedABI";
|
||||
import RawABI from "./RawABI";
|
||||
|
||||
type ContractABIProps = {
|
||||
|
@ -8,11 +11,24 @@ type ContractABIProps = {
|
|||
|
||||
const ContractABI: React.FC<ContractABIProps> = ({ abi }) => (
|
||||
<div className="mb-3">
|
||||
<Tab.Group>
|
||||
<Tab.List className="flex space-x-1 mb-1">
|
||||
<ModeTab>Decoded</ModeTab>
|
||||
<ModeTab>Raw</ModeTab>
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
<Tab.Panel>
|
||||
<DecodedABI abi={abi} />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<div className="flex space-x-2 text-sm border-l border-r border-t rounded-t px-2 py-1">
|
||||
<span>ABI</span>
|
||||
<Copy value={JSON.stringify(abi)} />
|
||||
</div>
|
||||
<RawABI abi={abi} />
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
|
@ -0,0 +1,20 @@
|
|||
import { Interface } from "@ethersproject/abi";
|
||||
import React from "react";
|
||||
import DecodedFragment from "./DecodedFragment";
|
||||
|
||||
type DecodedABIProps = {
|
||||
abi: any[];
|
||||
};
|
||||
|
||||
const DecodedABI: React.FC<DecodedABIProps> = ({ abi }) => {
|
||||
const intf = new Interface(abi);
|
||||
return (
|
||||
<div className="mt-3 space-y-2">
|
||||
{intf.fragments.map((f, i) => (
|
||||
<DecodedFragment key={i} intf={intf} fragment={f} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(DecodedABI);
|
|
@ -0,0 +1,57 @@
|
|||
import React from "react";
|
||||
import {
|
||||
ConstructorFragment,
|
||||
EventFragment,
|
||||
Fragment,
|
||||
FunctionFragment,
|
||||
Interface,
|
||||
} from "@ethersproject/abi";
|
||||
|
||||
type DecodedFragmentProps = {
|
||||
intf: Interface;
|
||||
fragment: Fragment;
|
||||
};
|
||||
|
||||
const DecodedFragment: React.FC<DecodedFragmentProps> = ({
|
||||
intf,
|
||||
fragment,
|
||||
}) => {
|
||||
let sig: string | undefined;
|
||||
let letter: string | undefined;
|
||||
let letterBg: string | undefined;
|
||||
|
||||
if (FunctionFragment.isFunctionFragment(fragment)) {
|
||||
sig = intf.getSighash(fragment);
|
||||
letter = "F";
|
||||
letterBg = "bg-purple-500";
|
||||
} else if (EventFragment.isEventFragment(fragment)) {
|
||||
sig = intf.getEventTopic(fragment);
|
||||
letter = "E";
|
||||
letterBg = "bg-green-300";
|
||||
} else if (ConstructorFragment.isConstructorFragment(fragment)) {
|
||||
letter = "C";
|
||||
letterBg = "bg-blue-500";
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-baseline space-x-1">
|
||||
{letter && (
|
||||
<span
|
||||
className={`flex-shrink-0 text-xs font-code border border-gray-300 rounded-full w-5 h-5 self-center flex items-center justify-center text-white font-bold ${letterBg}`}
|
||||
>
|
||||
{letter}
|
||||
</span>
|
||||
)}
|
||||
<span className="text-sm font-code whitespace-nowrap">
|
||||
{fragment.format("full")}
|
||||
</span>
|
||||
{sig && (
|
||||
<span className="text-xs border rounded-xl px-2 pt-1 font-code">
|
||||
{sig}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(DecodedFragment);
|
Loading…
Reference in New Issue