Add selection highlighting support to decoded param table values

This commit is contained in:
Willian Mitsuda 2021-11-29 15:32:07 -03:00
parent e37a5b6c02
commit 5216198b06
2 changed files with 28 additions and 18 deletions

View File

@ -18,6 +18,7 @@ export const genericSelector =
selection.content === content; selection.content === content;
export const addressSelector: ContentSelector = genericSelector("address"); export const addressSelector: ContentSelector = genericSelector("address");
export const valueSelector: ContentSelector = genericSelector("value");
export const functionSigSelector: ContentSelector = export const functionSigSelector: ContentSelector =
genericSelector("functionSig"); genericSelector("functionSig");

View File

@ -9,6 +9,9 @@ import AddressDecoder from "./AddressDecoder";
import BooleanDecoder from "./BooleanDecoder"; import BooleanDecoder from "./BooleanDecoder";
import BytesDecoder from "./BytesDecoder"; import BytesDecoder from "./BytesDecoder";
import { ResolvedAddresses } from "../../api/address-resolver"; import { ResolvedAddresses } from "../../api/address-resolver";
import SelectionHighlighter, {
valueSelector,
} from "../../components/SelectionHighlighter";
type DecodedParamRowProps = { type DecodedParamRowProps = {
prefix?: ReactNode; prefix?: ReactNode;
@ -68,24 +71,30 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
{help && showHelp && <div className="mt-2 text-gray-400">{help}</div>} {help && showHelp && <div className="mt-2 text-gray-400">{help}</div>}
</td> </td>
<td className="col-span-1 text-gray-500">{paramType.type}</td> <td className="col-span-1 text-gray-500">{paramType.type}</td>
<td className="col-span-8 pr-1 font-code break-all"> <td className="col-span-8 pr-1 font-code break-all flex">
{paramType.baseType === "uint256" ? ( <SelectionHighlighter
<Uint256Decoder r={r} /> myType="value"
) : paramType.baseType === "address" ? ( myContent={r.toString()}
<AddressDecoder selector={valueSelector}
r={r.toString()} >
resolvedAddresses={resolvedAddresses} {paramType.baseType === "uint256" ? (
/> <Uint256Decoder r={r} />
) : paramType.baseType === "bool" ? ( ) : paramType.baseType === "address" ? (
<BooleanDecoder r={r} /> <AddressDecoder
) : paramType.baseType === "bytes" ? ( r={r.toString()}
<BytesDecoder r={r} /> resolvedAddresses={resolvedAddresses}
) : paramType.baseType === "tuple" || />
paramType.baseType === "array" ? ( ) : paramType.baseType === "bool" ? (
<></> <BooleanDecoder r={r} />
) : ( ) : paramType.baseType === "bytes" ? (
r.toString() <BytesDecoder r={r} />
)} ) : paramType.baseType === "tuple" ||
paramType.baseType === "array" ? (
<></>
) : (
r.toString()
)}
</SelectionHighlighter>
</td> </td>
</tr> </tr>
{paramType.baseType === "tuple" && {paramType.baseType === "tuple" &&