2021-07-12 22:13:12 +00:00
|
|
|
import React from "react";
|
2021-09-25 17:29:09 +00:00
|
|
|
import { rawInputTo4Bytes, use4Bytes } from "../use4Bytes";
|
2021-07-01 18:21:40 +00:00
|
|
|
|
|
|
|
type MethodNameProps = {
|
|
|
|
data: string;
|
|
|
|
};
|
|
|
|
|
|
|
|
const MethodName: React.FC<MethodNameProps> = ({ data }) => {
|
2021-09-25 17:29:09 +00:00
|
|
|
const rawFourBytes = rawInputTo4Bytes(data);
|
2021-09-27 04:09:56 +00:00
|
|
|
const fourBytesEntry = use4Bytes(rawFourBytes);
|
|
|
|
const methodName = fourBytesEntry?.name ?? rawFourBytes;
|
|
|
|
const isSimpleTransfer = rawFourBytes === "0x";
|
2021-07-13 05:36:09 +00:00
|
|
|
const methodTitle = isSimpleTransfer
|
|
|
|
? "ETH Transfer"
|
|
|
|
: methodName === rawFourBytes
|
|
|
|
? methodName
|
|
|
|
: `${methodName} [${rawFourBytes}]`;
|
2021-07-01 18:21:40 +00:00
|
|
|
|
|
|
|
return (
|
2021-07-13 05:36:09 +00:00
|
|
|
<div
|
|
|
|
className={`${
|
|
|
|
isSimpleTransfer ? "bg-yellow-100" : "bg-blue-50"
|
|
|
|
} rounded-lg px-3 py-1 min-h-full flex items-baseline text-xs max-w-max`}
|
|
|
|
>
|
|
|
|
<p className="truncate" title={methodTitle}>
|
2021-07-12 22:13:12 +00:00
|
|
|
{methodName}
|
2021-07-01 18:21:40 +00:00
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default React.memo(MethodName);
|