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 [feeDisplay, feeDisplayToggler] = useFeeToggler();
|
||||||
|
|
||||||
const selectionCtx = useSelection();
|
const selectionCtx = useSelection();
|
||||||
|
const [useIPFS, setUseIPFS] = useState<boolean>(true);
|
||||||
const rawMetadata = useSourcify(
|
const rawMetadata = useSourcify(
|
||||||
checksummedAddress,
|
checksummedAddress,
|
||||||
provider?.network.chainId
|
provider?.network.chainId,
|
||||||
|
useIPFS
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -291,6 +293,8 @@ const AddressTransactions: React.FC = () => {
|
||||||
<Contracts
|
<Contracts
|
||||||
checksummedAddress={checksummedAddress}
|
checksummedAddress={checksummedAddress}
|
||||||
rawMetadata={rawMetadata}
|
rawMetadata={rawMetadata}
|
||||||
|
useIPFS={useIPFS}
|
||||||
|
setUseIPFS={setUseIPFS}
|
||||||
/>
|
/>
|
||||||
</Route>
|
</Route>
|
||||||
</Switch>
|
</Switch>
|
||||||
|
|
|
@ -12,6 +12,7 @@ type ContractProps = {
|
||||||
networkId: number;
|
networkId: number;
|
||||||
filename: string;
|
filename: string;
|
||||||
source: any;
|
source: any;
|
||||||
|
useIPFS: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const Contract: React.FC<ContractProps> = ({
|
const Contract: React.FC<ContractProps> = ({
|
||||||
|
@ -19,8 +20,15 @@ const Contract: React.FC<ContractProps> = ({
|
||||||
networkId,
|
networkId,
|
||||||
filename,
|
filename,
|
||||||
source,
|
source,
|
||||||
|
useIPFS,
|
||||||
}) => {
|
}) => {
|
||||||
const content = useContract(checksummedAddress, networkId, filename, source);
|
const content = useContract(
|
||||||
|
checksummedAddress,
|
||||||
|
networkId,
|
||||||
|
filename,
|
||||||
|
source,
|
||||||
|
useIPFS
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SyntaxHighlighter
|
<SyntaxHighlighter
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React, { useState, useEffect, useContext, Fragment } from "react";
|
import React, { useState, useEffect, useContext, Fragment } from "react";
|
||||||
import { commify } from "@ethersproject/units";
|
import { commify } from "@ethersproject/units";
|
||||||
import { Tab } from "@headlessui/react";
|
import { Switch, Tab } from "@headlessui/react";
|
||||||
import ContentFrame from "../ContentFrame";
|
import ContentFrame from "../ContentFrame";
|
||||||
import InfoRow from "../components/InfoRow";
|
import InfoRow from "../components/InfoRow";
|
||||||
import Contract from "./Contract";
|
import Contract from "./Contract";
|
||||||
|
@ -12,11 +12,15 @@ import { openInRemixURL } from "../url";
|
||||||
type ContractsProps = {
|
type ContractsProps = {
|
||||||
checksummedAddress: string;
|
checksummedAddress: string;
|
||||||
rawMetadata: Metadata | null | undefined;
|
rawMetadata: Metadata | null | undefined;
|
||||||
|
useIPFS: boolean;
|
||||||
|
setUseIPFS: (useIPFS: boolean) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const Contracts: React.FC<ContractsProps> = ({
|
const Contracts: React.FC<ContractsProps> = ({
|
||||||
checksummedAddress,
|
checksummedAddress,
|
||||||
rawMetadata,
|
rawMetadata,
|
||||||
|
useIPFS,
|
||||||
|
setUseIPFS,
|
||||||
}) => {
|
}) => {
|
||||||
const { provider } = useContext(RuntimeContext);
|
const { provider } = useContext(RuntimeContext);
|
||||||
|
|
||||||
|
@ -30,6 +34,21 @@ const Contracts: React.FC<ContractsProps> = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ContentFrame tabs>
|
<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 && (
|
{rawMetadata && (
|
||||||
<>
|
<>
|
||||||
<InfoRow title="Language">
|
<InfoRow title="Language">
|
||||||
|
@ -95,6 +114,7 @@ const Contracts: React.FC<ContractsProps> = ({
|
||||||
networkId={provider!.network.chainId}
|
networkId={provider!.network.chainId}
|
||||||
filename={selected}
|
filename={selected}
|
||||||
source={rawMetadata.sources[selected]}
|
source={rawMetadata.sources[selected]}
|
||||||
|
useIPFS={useIPFS}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
16
src/url.ts
16
src/url.ts
|
@ -17,20 +17,26 @@ export const blockTxsURL = (blockNum: BlockTag) => `/block/${blockNum}/txs`;
|
||||||
const sourcifyRootHash =
|
const sourcifyRootHash =
|
||||||
"k51qzi5uqu5dll0ocge71eudqnrgnogmbr37gsgl12uubsinphjoknl6bbi41p";
|
"k51qzi5uqu5dll0ocge71eudqnrgnogmbr37gsgl12uubsinphjoknl6bbi41p";
|
||||||
const ipfsGatewayPrefix = `https://ipfs.io/ipns/${sourcifyRootHash}`;
|
const ipfsGatewayPrefix = `https://ipfs.io/ipns/${sourcifyRootHash}`;
|
||||||
// const ipfsGatewayPrefix = `https://repo.sourcify.dev`;
|
const sourcifyHttpRepoPrefix = `https://repo.sourcify.dev`;
|
||||||
|
|
||||||
export const sourcifyMetadata = (
|
export const sourcifyMetadata = (
|
||||||
checksummedAddress: string,
|
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 = (
|
export const sourcifySourceFile = (
|
||||||
checksummedAddress: string,
|
checksummedAddress: string,
|
||||||
networkId: number,
|
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) =>
|
export const openInRemixURL = (checksummedAddress: string, networkId: number) =>
|
||||||
`https://remix.ethereum.org/#call=source-verification//fetchAndSave//${checksummedAddress}//${networkId}`;
|
`https://remix.ethereum.org/#call=source-verification//fetchAndSave//${checksummedAddress}//${networkId}`;
|
||||||
|
|
|
@ -38,7 +38,8 @@ export type Metadata = {
|
||||||
|
|
||||||
export const useSourcify = (
|
export const useSourcify = (
|
||||||
checksummedAddress: string | undefined,
|
checksummedAddress: string | undefined,
|
||||||
chainId: number | undefined
|
chainId: number | undefined,
|
||||||
|
useIPFS: boolean
|
||||||
) => {
|
) => {
|
||||||
const [rawMetadata, setRawMetadata] = useState<Metadata | null | undefined>();
|
const [rawMetadata, setRawMetadata] = useState<Metadata | null | undefined>();
|
||||||
|
|
||||||
|
@ -51,7 +52,8 @@ export const useSourcify = (
|
||||||
try {
|
try {
|
||||||
const contractMetadataURL = sourcifyMetadata(
|
const contractMetadataURL = sourcifyMetadata(
|
||||||
checksummedAddress,
|
checksummedAddress,
|
||||||
chainId
|
chainId,
|
||||||
|
useIPFS
|
||||||
);
|
);
|
||||||
const result = await fetch(contractMetadataURL);
|
const result = await fetch(contractMetadataURL);
|
||||||
if (result.ok) {
|
if (result.ok) {
|
||||||
|
@ -66,7 +68,7 @@ export const useSourcify = (
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
fetchMetadata();
|
fetchMetadata();
|
||||||
}, [checksummedAddress, chainId]);
|
}, [checksummedAddress, chainId, useIPFS]);
|
||||||
|
|
||||||
return rawMetadata;
|
return rawMetadata;
|
||||||
};
|
};
|
||||||
|
@ -75,7 +77,8 @@ export const useContract = (
|
||||||
checksummedAddress: string,
|
checksummedAddress: string,
|
||||||
networkId: number,
|
networkId: number,
|
||||||
filename: string,
|
filename: string,
|
||||||
source: any
|
source: any,
|
||||||
|
useIPFS: boolean = true
|
||||||
) => {
|
) => {
|
||||||
const [content, setContent] = useState<string>(source.content);
|
const [content, setContent] = useState<string>(source.content);
|
||||||
|
|
||||||
|
@ -89,7 +92,8 @@ export const useContract = (
|
||||||
const url = sourcifySourceFile(
|
const url = sourcifySourceFile(
|
||||||
checksummedAddress,
|
checksummedAddress,
|
||||||
networkId,
|
networkId,
|
||||||
normalizedFilename
|
normalizedFilename,
|
||||||
|
useIPFS
|
||||||
);
|
);
|
||||||
const res = await fetch(url);
|
const res = await fetch(url);
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
|
@ -98,7 +102,7 @@ export const useContract = (
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
readContent();
|
readContent();
|
||||||
}, [checksummedAddress, networkId, filename, source.content]);
|
}, [checksummedAddress, networkId, filename, source.content, useIPFS]);
|
||||||
|
|
||||||
return content;
|
return content;
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue