Open in remix feature #54

src/address/Contracts.tsx

@@ -6,6 +6,8 @@ import InfoRow from "../components/InfoRow";
 import Contract from "./Contract";
 import { RuntimeContext } from "../useRuntime";
 import { Metadata } from "../useSourcify";
+import ExternalLink from "../components/ExternalLink";
+import { openInRemixURL } from "../url";
 
 type ContractsProps = {
   checksummedAddress: string;
@@ -57,6 +59,18 @@ const Contracts: React.FC<ContractsProps> = ({
         )}
         {rawMetadata !== undefined && rawMetadata !== null && (
           <div>
+            {provider && (
+              <div className="text-sm mb-3">
+                <ExternalLink
+                  href={openInRemixURL(
+                    checksummedAddress,
+                    provider.network.chainId
+                  )}
+                >
+                  Open in Remix
+                </ExternalLink>
+              </div>
+            )}
             <Tab.Group>
               <Tab.List className="flex truncate">
                 {Object.entries(rawMetadata.sources).map(([k]) => (

src/url.ts

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