a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI tweaks

This commit is contained in:
Willian Mitsuda 2021-10-25 01:44:24 -03:00
parent 02261f264a
commit 4acc8be926
3 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/address/ContractABI.tsx
View File

@ -12,7 +12,11 @@ type ContractABIProps = {
const ContractABI: React.FC<ContractABIProps> = ({ abi }) => ( const ContractABI: React.FC<ContractABIProps> = ({ abi }) => (
<div className="mb-3"> <div className="mb-3">
<Tab.Group> <Tab.Group>
<Tab.List className="flex space-x-1 mb-1"> <Tab.List className="flex items-baseline space-x-1 mb-1">
<div className="flex items-baseline space-x-2 text-sm pr-2 py-1">
<span>ABI</span>
<Copy value={JSON.stringify(abi)} />
</div>
<ModeTab>Decoded</ModeTab> <ModeTab>Decoded</ModeTab>
<ModeTab>Raw</ModeTab> <ModeTab>Raw</ModeTab>
</Tab.List> </Tab.List>
@ -21,10 +25,6 @@ const ContractABI: React.FC<ContractABIProps> = ({ abi }) => (
<DecodedABI abi={abi} /> <DecodedABI abi={abi} />
</Tab.Panel> </Tab.Panel>
<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} /> <RawABI abi={abi} />
</Tab.Panel> </Tab.Panel>
</Tab.Panels> </Tab.Panels>

2
src/address/DecodedABI.tsx
View File

@ -9,7 +9,7 @@ type DecodedABIProps = {
const DecodedABI: React.FC<DecodedABIProps> = ({ abi }) => { const DecodedABI: React.FC<DecodedABIProps> = ({ abi }) => {
const intf = new Interface(abi); const intf = new Interface(abi);
return ( return (
<div className="mt-3 space-y-2"> <div className="border">
{intf.fragments.map((f, i) => ( {intf.fragments.map((f, i) => (
<DecodedFragment key={i} intf={intf} fragment={f} /> <DecodedFragment key={i} intf={intf} fragment={f} />
))} ))}

7
src/address/DecodedFragment.tsx
View File

@ -6,6 +6,8 @@ import {
FunctionFragment, FunctionFragment,
Interface, Interface,
} from "@ethersproject/abi"; } from "@ethersproject/abi";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
type DecodedFragmentProps = { type DecodedFragmentProps = {
intf: Interface; intf: Interface;
@ -34,7 +36,10 @@ const DecodedFragment: React.FC<DecodedFragmentProps> = ({
} }
return ( return (
<div className="flex items-baseline space-x-1"> <div className="flex items-baseline space-x-2 px-2 py-1 hover:bg-gray-100">
<span className="text-gray-500">
<FontAwesomeIcon icon={faCaretRight} size="1x" />
</span>
{letter && ( {letter && (
<span <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}`} 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}`}