Extract custom hook for 4bytes resolution
This commit is contained in:
parent
6520b0be19
commit
7f39ba5232
|
@ -1,58 +1,17 @@
|
|||
import React, { useState, useEffect, useContext } from "react";
|
||||
import { fourBytesURL } from "../url";
|
||||
import { RuntimeContext } from "../useRuntime";
|
||||
import React from "react";
|
||||
import { use4Bytes } from "../use4Bytes";
|
||||
|
||||
type MethodNameProps = {
|
||||
data: string;
|
||||
};
|
||||
|
||||
const MethodName: React.FC<MethodNameProps> = ({ data }) => {
|
||||
const runtime = useContext(RuntimeContext);
|
||||
|
||||
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 { config } = runtime;
|
||||
if (!config) {
|
||||
setName(_name);
|
||||
return;
|
||||
}
|
||||
|
||||
const signatureURL = fourBytesURL(config.assetsURLPrefix ?? "", 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);
|
||||
}, [runtime, data]);
|
||||
const methodName = use4Bytes(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 className="truncate" title={methodName}>
|
||||
{methodName}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -0,0 +1,49 @@
|
|||
import { useState, useEffect, useContext } from "react";
|
||||
import { RuntimeContext } from "./useRuntime";
|
||||
import { fourBytesURL } from "./url";
|
||||
|
||||
export const use4Bytes = (data: string) => {
|
||||
const runtime = useContext(RuntimeContext);
|
||||
|
||||
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 { config } = runtime;
|
||||
if (!config) {
|
||||
setName(_name);
|
||||
return;
|
||||
}
|
||||
|
||||
const signatureURL = fourBytesURL(config.assetsURLPrefix ?? "", 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);
|
||||
}, [runtime, data]);
|
||||
|
||||
return name;
|
||||
};
|
Loading…
Reference in New Issue