Toggle ipfs on/off

This commit is contained in:
Willian Mitsuda 2021-09-06 18:32:11 -03:00
parent 7b5ecb91ba
commit a1f79ff0c0
5 changed files with 56 additions and 14 deletions

View File

@ -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>

View File

@ -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

View File

@ -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>

View File

@ -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}`;

View File

@ -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;
}; };