52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
|
|
type MethodNameProps = {
|
|
data: string;
|
|
};
|
|
|
|
const MethodName: React.FC<MethodNameProps> = ({ data }) => {
|
|
const [name, setName] = useState<string>();
|
|
useEffect(() => {
|
|
if (data === "0x") {
|
|
setName("Transfer");
|
|
return;
|
|
}
|
|
|
|
let _name = data.slice(0, 10);
|
|
|
|
// Try to resolve 4bytes name
|
|
const fourBytes = _name.slice(2);
|
|
const signatureURL = `http://localhost:3001/${fourBytes}`;
|
|
fetch(signatureURL)
|
|
.then(async (res) => {
|
|
if (!res.ok) {
|
|
console.error(`Signature does not exist in 4bytes DB: ${fourBytes}`);
|
|
return;
|
|
}
|
|
|
|
const sig = await res.text();
|
|
const cut = sig.indexOf("(");
|
|
let method = sig.slice(0, cut);
|
|
method = method.charAt(0).toUpperCase() + method.slice(1);
|
|
setName(method);
|
|
return;
|
|
})
|
|
.catch((err) => {
|
|
console.error(`Couldn't fetch signature URL ${signatureURL}`, err);
|
|
});
|
|
|
|
// Use the default 4 bytes as name
|
|
setName(_name);
|
|
}, [data]);
|
|
|
|
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={name}>
|
|
{name}
|
|
</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(MethodName);
|