Toggle ipfs on/off
This commit is contained in:
parent
7b5ecb91ba
commit
a1f79ff0c0
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
16
src/url.ts
16
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}`;
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue