diff --git a/src/address/Contracts.tsx b/src/address/Contracts.tsx index 3b370e4..bea7485 100644 --- a/src/address/Contracts.tsx +++ b/src/address/Contracts.tsx @@ -3,43 +3,8 @@ import { ethers } from "ethers"; import ContentFrame from "../ContentFrame"; import InfoRow from "../components/InfoRow"; import Contract from "./Contract"; -import { sourcifyMetadata } from "../url"; import { RuntimeContext } from "../useRuntime"; - -type Metadata = { - version: string; - language: string; - compiler: { - version: string; - keccak256?: string | undefined; - }; - sources: { - [filename: string]: { - keccak256: string; - content?: string | undefined; - urls?: string[]; - license?: string; - }; - }; - settings: { - remappings: string[]; - optimizer?: { - enabled: boolean; - runs: number; - }; - compilationTarget: { - [filename: string]: string; - }; - libraries: { - [filename: string]: string; - }; - }; - output: { - abi: any[]; - userdocs: any[]; - devdoc: any[]; - }; -}; +import { useSourcify } from "../useSourcify"; type ContractsProps = { checksummedAddress: string; @@ -47,34 +12,17 @@ type ContractsProps = { const Contracts: React.FC = ({ checksummedAddress }) => { const { provider } = useContext(RuntimeContext); - const [rawMetadata, setRawMetadata] = useState(); - useEffect(() => { - if (!checksummedAddress) { - return; - } - - const fetchMetadata = async () => { - try { - const result = await fetch( - sourcifyMetadata(checksummedAddress, provider!.network.chainId) - ); - if (result.ok) { - const _metadata = await result.json(); - setRawMetadata(_metadata); - setSelected(Object.keys(_metadata.sources)[0]); - } else { - setRawMetadata(null); - } - } catch (err) { - console.error(err); - setRawMetadata(null); - } - }; - fetchMetadata(); - }, [provider, checksummedAddress]); + const rawMetadata = useSourcify( + checksummedAddress, + provider?.network.chainId + ); const [selected, setSelected] = useState(); - + useEffect(() => { + if (rawMetadata) { + setSelected(Object.keys(rawMetadata.sources)[0]); + } + }, [rawMetadata]); const optimizer = rawMetadata?.settings?.optimizer; return ( diff --git a/src/useSourcify.ts b/src/useSourcify.ts new file mode 100644 index 0000000..cb67767 --- /dev/null +++ b/src/useSourcify.ts @@ -0,0 +1,72 @@ +import { useState, useEffect } from "react"; +import { sourcifyMetadata } from "./url"; + +export type Metadata = { + version: string; + language: string; + compiler: { + version: string; + keccak256?: string | undefined; + }; + sources: { + [filename: string]: { + keccak256: string; + content?: string | undefined; + urls?: string[]; + license?: string; + }; + }; + settings: { + remappings: string[]; + optimizer?: { + enabled: boolean; + runs: number; + }; + compilationTarget: { + [filename: string]: string; + }; + libraries: { + [filename: string]: string; + }; + }; + output: { + abi: any[]; + userdocs: any[]; + devdoc: any[]; + }; +}; + +export const useSourcify = ( + checksummedAddress: string | undefined, + chainId: number | undefined +) => { + const [rawMetadata, setRawMetadata] = useState(); + + useEffect(() => { + if (!checksummedAddress || chainId === undefined) { + return; + } + + const fetchMetadata = async () => { + try { + const contractMetadataURL = sourcifyMetadata( + checksummedAddress, + chainId + ); + const result = await fetch(contractMetadataURL); + if (result.ok) { + const _metadata = await result.json(); + setRawMetadata(_metadata); + } else { + setRawMetadata(null); + } + } catch (err) { + console.error(err); + setRawMetadata(null); + } + }; + fetchMetadata(); + }, [checksummedAddress, chainId]); + + return rawMetadata; +};