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

Migrate code to headless-ui

This commit is contained in:
Willian Mitsuda 2021-09-15 15:34:49 -03:00
parent 9f818d36b2
commit f02258b25d
1 changed files with 67 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/transaction/Details.tsx
View File

@ -1,7 +1,8 @@
import React, { useMemo, useState } from "react"; import React, { useMemo } from "react";
import { TransactionDescription } from "@ethersproject/abi"; import { TransactionDescription } from "@ethersproject/abi";
import { BigNumber } from "@ethersproject/bignumber"; import { BigNumber } from "@ethersproject/bignumber";
import { toUtf8String } from "@ethersproject/strings"; import { toUtf8String } from "@ethersproject/strings";
import { Tab } from "@headlessui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle"; import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
import { faCube } from "@fortawesome/free-solid-svg-icons/faCube"; import { faCube } from "@fortawesome/free-solid-svg-icons/faCube";
@ -48,7 +49,6 @@ const Details: React.FC<DetailsProps> = ({
const hasEIP1559 = const hasEIP1559 =
txData.confirmedData?.blockBaseFeePerGas !== undefined && txData.confirmedData?.blockBaseFeePerGas !== undefined &&
txData.confirmedData?.blockBaseFeePerGas !== null; txData.confirmedData?.blockBaseFeePerGas !== null;
const [inputMode, setInputMode] = useState<number>(0);
const utfInput = useMemo(() => { const utfInput = useMemo(() => {
try { try {
@ -312,30 +312,38 @@ const Details: React.FC<DetailsProps> = ({
</> </>
)} )}
<InfoRow title="Input Data"> <InfoRow title="Input Data">
<div className="space-y-1"> <Tab.Group>
<div className="flex space-x-1"> <Tab.List className="flex space-x-1 mb-1">
<button <Tab
className={`border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${ className={({ selected }) =>
inputMode === 0 ? "border-blue-300" : "" `border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
}`} selected ? "border-blue-300" : ""
onClick={() => setInputMode(0)} }`
}
>
Decoded
</Tab>
<Tab
className={({ selected }) =>
`border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
selected ? "border-blue-300" : ""
}`
}
> >
Raw Raw
</button> </Tab>
<button <Tab
className={`border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${ className={({ selected }) =>
inputMode === 1 ? "border-blue-300" : "" `border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
}`} selected ? "border-blue-300" : ""
onClick={() => setInputMode(1)} }`
}
> >
UTF-8 UTF-8
</button> </Tab>
</div> </Tab.List>
<textarea <Tab.Panels>
className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2" <Tab.Panel>
value={inputMode === 0 ? txData.data : utfInput}
readOnly
/>
{txDesc && ( {txDesc && (
<table> <table>
<thead> <thead>
@ -356,7 +364,23 @@ const Details: React.FC<DetailsProps> = ({
</tbody> </tbody>
</table> </table>
)} )}
</div> </Tab.Panel>
<Tab.Panel>
<textarea
className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
value={txData.data}
readOnly
/>
</Tab.Panel>
<Tab.Panel>
<textarea
className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
value={utfInput}
readOnly
/>
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</InfoRow> </InfoRow>
</ContentFrame> </ContentFrame>
); );