Extract sourcify hook

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";
-
+import { useSourcify } from "../useSourcify";
-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[];
-  };
-};
 
 type ContractsProps = {
   checksummedAddress: string;
@@ -47,34 +12,17 @@ type ContractsProps = {
 
 const Contracts: React.FC<ContractsProps> = ({ checksummedAddress }) => {
   const { provider } = useContext(RuntimeContext);
-  const [rawMetadata, setRawMetadata] = useState<Metadata | null | undefined>();
+  const rawMetadata = useSourcify(
-  useEffect(() => {
+    checksummedAddress,
-    if (!checksummedAddress) {
+    provider?.network.chainId
-      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 [selected, setSelected] = useState<string>();
-
+  useEffect(() => {
+    if (rawMetadata) {
+      setSelected(Object.keys(rawMetadata.sources)[0]);
+    }
+  }, [rawMetadata]);
   const optimizer = rawMetadata?.settings?.optimizer;
 
   return (

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<Metadata | null | undefined>();
+
+  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;
+};