Merge branch 'feature/ui-tweaks' into develop

This commit is contained in:
Willian Mitsuda 2021-07-13 02:58:58 -03:00
commit 5210599e39
3 changed files with 20 additions and 8 deletions

View File

@ -22,6 +22,7 @@ import AddressLink from "./components/AddressLink";
import Copy from "./components/Copy";
import Timestamp from "./components/Timestamp";
import InternalTransfer from "./components/InternalTransfer";
import MethodName from "./components/MethodName";
import GasValue from "./components/GasValue";
import FormattedBalance from "./components/FormattedBalance";
import TokenTransferItem from "./TokenTransferItem";
@ -232,7 +233,9 @@ const Transaction: React.FC = () => {
</div>
)}
</InfoRow>
<InfoRow title="Transaction Action"></InfoRow>
<InfoRow title="Transaction Action">
<MethodName data={txData.data} />
</InfoRow>
{txData.tokenTransfers.length > 0 && (
<InfoRow
title={`Tokens Transferred (${txData.tokenTransfers.length})`}

View File

@ -6,11 +6,22 @@ type MethodNameProps = {
};
const MethodName: React.FC<MethodNameProps> = ({ data }) => {
const methodName = use4Bytes(data);
const rawFourBytes = data.slice(0, 10);
const methodName = use4Bytes(rawFourBytes);
const isSimpleTransfer = data === "0x";
const methodTitle = isSimpleTransfer
? "ETH Transfer"
: methodName === rawFourBytes
? methodName
: `${methodName} [${rawFourBytes}]`;
return (
<div className="bg-blue-50 rounded-lg px-3 py-1 min-h-full flex items-baseline text-xs max-w-max">
<p className="truncate" title={methodName}>
<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}>
{methodName}
</p>
</div>

View File

@ -4,12 +4,10 @@ import { fourBytesURL } from "./url";
const cache = new Map<string, string | null>();
export const use4Bytes = (data: string) => {
export const use4Bytes = (rawFourBytes: string) => {
const runtime = useContext(RuntimeContext);
const assetsURLPrefix = runtime.config?.assetsURLPrefix;
let rawFourBytes = data.slice(0, 10);
const [name, setName] = useState<string>();
const [fourBytes, setFourBytes] = useState<string>();
useEffect(() => {
@ -45,7 +43,7 @@ export const use4Bytes = (data: string) => {
});
}, [rawFourBytes, assetsURLPrefix, fourBytes]);
if (data === "0x") {
if (rawFourBytes === "0x") {
return "Transfer";
}
if (assetsURLPrefix === undefined) {