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

110
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 { BigNumber } from "@ethersproject/bignumber";
import { toUtf8String } from "@ethersproject/strings";
import { Tab } from "@headlessui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
import { faCube } from "@fortawesome/free-solid-svg-icons/faCube";
@ -48,7 +49,6 @@ const Details: React.FC<DetailsProps> = ({
const hasEIP1559 =
txData.confirmedData?.blockBaseFeePerGas !== undefined &&
txData.confirmedData?.blockBaseFeePerGas !== null;
const [inputMode, setInputMode] = useState<number>(0);
const utfInput = useMemo(() => {
try {
@ -312,51 +312,75 @@ const Details: React.FC<DetailsProps> = ({
</>
)}
<InfoRow title="Input Data">
<div className="space-y-1">
<div className="flex space-x-1">
<button
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 ${
inputMode === 0 ? "border-blue-300" : ""
}`}
onClick={() => setInputMode(0)}
<Tab.Group>
<Tab.List className="flex space-x-1 mb-1">
<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" : ""
}`
}
>
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
</button>
<button
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 ${
inputMode === 1 ? "border-blue-300" : ""
}`}
onClick={() => setInputMode(1)}
</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" : ""
}`
}
>
UTF-8
</button>
</div>
<textarea
className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
value={inputMode === 0 ? txData.data : utfInput}
readOnly
/>
{txDesc && (
<table>
<thead>
<th>#</th>
<th>name</th>
<th>type</th>
<th>value</th>
</thead>
<tbody>
{txDesc.args.map((r, i) => (
<tr key={i}>
<td>{i}</td>
<td>{txDesc.functionFragment.inputs[i].name}</td>
<td>{txDesc.functionFragment.inputs[i].type}</td>
<td>{r}</td>
</tr>
))}
</tbody>
</table>
)}
</div>
</Tab>
</Tab.List>
<Tab.Panels>
<Tab.Panel>
{txDesc && (
<table>
<thead>
<th>#</th>
<th>name</th>
<th>type</th>
<th>value</th>
</thead>
<tbody>
{txDesc.args.map((r, i) => (
<tr key={i}>
<td>{i}</td>
<td>{txDesc.functionFragment.inputs[i].name}</td>
<td>{txDesc.functionFragment.inputs[i].type}</td>
<td>{r}</td>
</tr>
))}
</tbody>
</table>
)}
</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>
</ContentFrame>
);