Toggle ipfs on/off

src/AddressTransactions.tsx

@@ -181,9 +181,11 @@ const AddressTransactions: React.FC = () => {
   const [feeDisplay, feeDisplayToggler] = useFeeToggler();
 
   const selectionCtx = useSelection();
+  const [useIPFS, setUseIPFS] = useState<boolean>(true);
   const rawMetadata = useSourcify(
     checksummedAddress,
-    provider?.network.chainId
+    provider?.network.chainId,
+    useIPFS
   );
 
   return (
@@ -291,6 +293,8 @@ const AddressTransactions: React.FC = () => {
                     <Contracts
                       checksummedAddress={checksummedAddress}
                       rawMetadata={rawMetadata}
+                      useIPFS={useIPFS}
+                      setUseIPFS={setUseIPFS}
                     />
                   </Route>
                 </Switch>

src/address/Contract.tsx

@@ -12,6 +12,7 @@ type ContractProps = {
   networkId: number;
   filename: string;
   source: any;
+  useIPFS: boolean;
 };
 
 const Contract: React.FC<ContractProps> = ({
@@ -19,8 +20,15 @@ const Contract: React.FC<ContractProps> = ({
   networkId,
   filename,
   source,
+  useIPFS,
 }) => {
-  const content = useContract(checksummedAddress, networkId, filename, source);
+  const content = useContract(
+    checksummedAddress,
+    networkId,
+    filename,
+    source,
+    useIPFS
+  );
 
   return (
     <SyntaxHighlighter

src/address/Contracts.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useContext, Fragment } from "react";
 import { commify } from "@ethersproject/units";
-import { Tab } from "@headlessui/react";
+import { Switch, Tab } from "@headlessui/react";
 import ContentFrame from "../ContentFrame";
 import InfoRow from "../components/InfoRow";
 import Contract from "./Contract";
@@ -12,11 +12,15 @@ import { openInRemixURL } from "../url";
 type ContractsProps = {
   checksummedAddress: string;
   rawMetadata: Metadata | null | undefined;
+  useIPFS: boolean;
+  setUseIPFS: (useIPFS: boolean) => void;
 };
 
 const Contracts: React.FC<ContractsProps> = ({
   checksummedAddress,
   rawMetadata,
+  useIPFS,
+  setUseIPFS,
 }) => {
   const { provider } = useContext(RuntimeContext);
 
@@ -30,6 +34,21 @@ const Contracts: React.FC<ContractsProps> = ({
 
   return (
     <ContentFrame tabs>
+      <InfoRow title="Use IPFS">
+        <Switch
+          className={`flex items-center h-7 w-12 px-1 rounded-full transition duration-200 ${
+            useIPFS ? "bg-blue-500" : "bg-blue-900"
+          }`}
+          checked={useIPFS}
+          onChange={setUseIPFS}
+        >
+          <span
+            className={`inline-block border rounded-full w-5 h-5 bg-white transform duration-200 ${
+              useIPFS ? "" : "translate-x-5"
+            }`}
+          ></span>
+        </Switch>
+      </InfoRow>
       {rawMetadata && (
         <>
           <InfoRow title="Language">
@@ -95,6 +114,7 @@ const Contracts: React.FC<ContractsProps> = ({
                 networkId={provider!.network.chainId}
                 filename={selected}
                 source={rawMetadata.sources[selected]}
+                useIPFS={useIPFS}
               />
             )}
           </div>

src/url.ts

@@ -17,20 +17,26 @@ export const blockTxsURL = (blockNum: BlockTag) => `/block/${blockNum}/txs`;
 const sourcifyRootHash =
   "k51qzi5uqu5dll0ocge71eudqnrgnogmbr37gsgl12uubsinphjoknl6bbi41p";
 const ipfsGatewayPrefix = `https://ipfs.io/ipns/${sourcifyRootHash}`;
-// const ipfsGatewayPrefix = `https://repo.sourcify.dev`;
+const sourcifyHttpRepoPrefix = `https://repo.sourcify.dev`;
 
 export const sourcifyMetadata = (
   checksummedAddress: string,
-  networkId: number
+  networkId: number,
+  useIPFS: boolean
 ) =>
-  `${ipfsGatewayPrefix}/contracts/full_match/${networkId}/${checksummedAddress}/metadata.json`;
+  `${
+    useIPFS ? ipfsGatewayPrefix : sourcifyHttpRepoPrefix
+  }/contracts/full_match/${networkId}/${checksummedAddress}/metadata.json`;
 
 export const sourcifySourceFile = (
   checksummedAddress: string,
   networkId: number,
-  filepath: string
+  filepath: string,
+  useIPFS: boolean
 ) =>
-  `${ipfsGatewayPrefix}/contracts/full_match/${networkId}/${checksummedAddress}/sources/${filepath}`;
+  `${
+    useIPFS ? ipfsGatewayPrefix : sourcifyHttpRepoPrefix
+  }/contracts/full_match/${networkId}/${checksummedAddress}/sources/${filepath}`;
 
 export const openInRemixURL = (checksummedAddress: string, networkId: number) =>
   `https://remix.ethereum.org/#call=source-verification//fetchAndSave//${checksummedAddress}//${networkId}`;

src/useSourcify.ts

@@ -38,7 +38,8 @@ export type Metadata = {
 
 export const useSourcify = (
   checksummedAddress: string | undefined,
-  chainId: number | undefined
+  chainId: number | undefined,
+  useIPFS: boolean
 ) => {
   const [rawMetadata, setRawMetadata] = useState<Metadata | null | undefined>();
 
@@ -51,7 +52,8 @@ export const useSourcify = (
       try {
         const contractMetadataURL = sourcifyMetadata(
           checksummedAddress,
-          chainId
+          chainId,
+          useIPFS
         );
         const result = await fetch(contractMetadataURL);
         if (result.ok) {
@@ -66,7 +68,7 @@ export const useSourcify = (
       }
     };
     fetchMetadata();
-  }, [checksummedAddress, chainId]);
+  }, [checksummedAddress, chainId, useIPFS]);
 
   return rawMetadata;
 };
@@ -75,7 +77,8 @@ export const useContract = (
   checksummedAddress: string,
   networkId: number,
   filename: string,
-  source: any
+  source: any,
+  useIPFS: boolean = true
 ) => {
   const [content, setContent] = useState<string>(source.content);
 
@@ -89,7 +92,8 @@ export const useContract = (
       const url = sourcifySourceFile(
         checksummedAddress,
         networkId,
-        normalizedFilename
+        normalizedFilename,
+        useIPFS
       );
       const res = await fetch(url);
       if (res.ok) {
@@ -98,7 +102,7 @@ export const useContract = (
       }
     };
     readContent();
-  }, [checksummedAddress, networkId, filename, source.content]);
+  }, [checksummedAddress, networkId, filename, source.content, useIPFS]);
 
   return content;
 };