First parsed ABI UI prototype

This commit is contained in:
Willian Mitsuda 2021-10-25 01:29:50 -03:00
parent d7ba5f09fd
commit 02261f264a
3 changed files with 98 additions and 5 deletions

View File

@ -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>
);

View File

@ -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);

View File

@ -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);