7 |
9 |
10 | {children}
11 |
28 |
29 | Explore
30 |
31 | {CONTRACTS.map((c) => (
32 |
37 | {c.name}
38 |
39 | ))}
40 |
41 | );
42 | }
43 |
--------------------------------------------------------------------------------
/components/FooterLinks.tsx:
--------------------------------------------------------------------------------
1 | export function FooterLinks() {
2 | return (
3 |
4 |
10 | @aeolianeth
11 |
12 |
18 | Juicebox
19 |
20 |
26 | Telegram
27 |
28 |
34 | GitHub
35 |
36 |
37 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/components/HanddrawnUnderline.tsx:
--------------------------------------------------------------------------------
1 | export function HanddrawnUnderline() {
2 | const size = 4;
3 | const w = 400 / size;
4 | const h = 31 / size;
5 | return (
6 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/components/HomepageLink.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import Link from "next/link";
3 |
4 | export function HomepageLink() {
5 | return (
6 |
7 |
8 |
39 | {label && (
40 | {formatVariableName(label)}:
41 | )}
42 |
43 |
46 | );
47 | }
48 |
49 | const Result = ({
50 | result,
51 | output,
52 | depthIndex = 0,
53 | }: {
54 | result: any;
55 | output: any;
56 | depthIndex?: number;
57 | }) => {
58 | if (!result) return null;
59 |
60 | return (output.components ?? output).map((outputChild: any, idx: number) => {
61 | const key = `${outputChild.name}-${depthIndex}`;
62 |
63 | if (!outputChild.components) {
64 | console.log(result, "result!!");
65 | const resultToRender = Array.isArray(result) ? result[idx] : result;
66 | return (
67 |
75 |
86 | );
87 | });
88 | };
89 |
90 | export function ResultCard({ result }: { result: unknown }) {
91 | const { currentFunction } = useContext(ContractContext);
92 |
93 | return (
94 |
76 | {formatVariableName(outputChild.name)}
77 |
78 |
79 |
85 |
95 |
97 | );
98 | }
99 |
--------------------------------------------------------------------------------
/components/common/Alert.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | CheckCircleIcon,
3 | ExclamationIcon,
4 | XCircleIcon,
5 | } from "@heroicons/react/outline";
6 |
7 | const VARIANT_ICONS = {
8 | danger: XCircleIcon,
9 | warning: ExclamationIcon,
10 | success: CheckCircleIcon,
11 | };
12 |
13 | const VARIANT_WRAPPER_CLASS = {
14 | danger: "bg-red-100 border border-red-600",
15 | warning: "bg-yellow-50 border border-yellow-500",
16 | success: "bg-green-100 border border-green-600",
17 | };
18 |
19 | const VARIANT_ICON_CLASS = {
20 | danger: "text-red-500",
21 | warning: "text-yellow-500",
22 | success: "text-green-600",
23 | };
24 |
25 | const VARIANT_TITLE_CLASS = {
26 | danger: "text-red-800",
27 | warning: "text-yellow-800",
28 | success: "text-green-900",
29 | };
30 |
31 | const VARIANT_BODY_CLASS = {
32 | danger: "text-red-700",
33 | warning: "text-yellow-700",
34 | success: "text-green-800",
35 | };
36 |
37 | export function Alert({
38 | variant,
39 | title,
40 | body,
41 | className,
42 | }: {
43 | variant: "danger" | "warning" | "success";
44 | title?: string | JSX.Element;
45 | body?: string | JSX.Element;
46 | className?: string;
47 | }) {
48 | const VariantIcon = VARIANT_ICONS[variant];
49 | return (
50 |
55 |
74 | );
75 | }
76 |
--------------------------------------------------------------------------------
/components/common/Breadcrumb.tsx:
--------------------------------------------------------------------------------
1 | import { ChevronRightIcon, HomeIcon } from "@heroicons/react/outline";
2 | import Link from "next/link";
3 | import { useContext } from "react";
4 | import { ContractContext } from "../../contexts/ContractContext";
5 |
6 | export default function Breadcrumbs() {
7 | const { contractAddress, currentFunction, metadata } =
8 | useContext(ContractContext);
9 |
10 | return (
11 |
60 | );
61 | }
62 |
--------------------------------------------------------------------------------
/components/common/DefaultHead.tsx:
--------------------------------------------------------------------------------
1 | export function Favicon() {
2 | return (
3 | <>
4 |
9 |
15 |
21 |
22 |
23 |
24 |
25 |
26 | );
27 | }
28 |
29 | export function DefaultMeta() {
30 | return (
31 | <>
32 |
33 |
37 |
38 | );
39 | }
40 |
41 | export function FathomScript() {
42 | return (
43 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/components/common/Spinner.tsx:
--------------------------------------------------------------------------------
1 | const VARIANT_CLASSES = {
2 | primary: "fill-blue-600",
3 | secondary: "fill-blue-200",
4 | };
5 |
6 | export function Spinner({
7 | variant = "primary",
8 | }: {
9 | variant?: "primary" | "secondary";
10 | }) {
11 | return (
12 |
56 |
73 |
57 |
61 |
62 |
63 |
66 | {title}
67 |
68 |
72 |
69 |
71 | {body}
70 |
13 |
29 | Loading...
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/components/common/buttons/Button.tsx:
--------------------------------------------------------------------------------
1 | import { ButtonHTMLAttributes } from "react";
2 | import { Spinner } from "../Spinner";
3 |
4 | const BASE_CLASSES =
5 | "rounded-md inline-flex justify-center transition-colors items-center font-normal focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500";
6 |
7 | const VARIANT_CLASSES = {
8 | primary:
9 | "bg-blue-700 hover:bg-blue-600 border border-transparent text-white shadow-sm",
10 | secondary:
11 | "bg-white hover:bg-gray-50 border border-gray-300 text-gray-700 shadow-sm",
12 | tertiary: "bg-transparent hover:bg-gray-200 text-gray-900",
13 | };
14 |
15 | const SIZE_CLASSES = {
16 | medium: "py-2 px-4 text-sm",
17 | large: "py-3 px-5 text-md",
18 | };
19 |
20 | export function Button({
21 | loading,
22 | children,
23 | variant = "primary",
24 | size = "medium",
25 | ...props
26 | }: ButtonHTMLAttributes
58 |
64 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/components/common/buttons/TransactionButton.tsx:
--------------------------------------------------------------------------------
1 | import { useContext } from "react";
2 | import { NetworkContext } from "../../../contexts/NetworkContext";
3 | import { Button } from "./Button";
4 | import { ConnectWalletButton } from "./ConnectWalletButton";
5 |
6 | export function TransactionButton(
7 | props: Omit
86 |
100 |
92 |
99 |
93 | {children}
95 |
96 |
97 |
98 |
8 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/components/layout/ContractLayout/Footer.tsx:
--------------------------------------------------------------------------------
1 | import { FooterLinks } from "../../FooterLinks";
2 |
3 | export function Footer() {
4 | return (
5 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/components/layout/ContractLayout/Header.tsx:
--------------------------------------------------------------------------------
1 | import { MenuAlt2Icon, SearchIcon } from "@heroicons/react/outline";
2 | import { useRouter } from "next/router";
3 | import { FormEventHandler, useState } from "react";
4 | import { ConnectWalletButton } from "../../common/buttons/ConnectWalletButton";
5 | import { Spinner } from "../../common/Spinner";
6 |
7 | export function Header({
8 | setSidebarOpen,
9 | }: {
10 | setSidebarOpen: (value: boolean) => void;
11 | }) {
12 | const [searchAddress, setSearchAddress] = useState
9 |
21 |
10 |
15 |
11 | Beta
13 |
14 |
16 |
19 |
20 |
26 |
34 |
35 |
67 | );
68 | }
69 |
--------------------------------------------------------------------------------
/components/layout/ContractLayout/MobileSidebar.tsx:
--------------------------------------------------------------------------------
1 | import { Dialog, Transition } from "@headlessui/react";
2 | import { XIcon } from "@heroicons/react/outline";
3 | import { Fragment } from "react";
4 | import { Badge } from "../../Badge";
5 | import { HomepageLink } from "../../HomepageLink";
6 | import Nav from "../Nav";
7 |
8 | export function MobileSidebar({
9 | sidebarOpen,
10 | setSidebarOpen,
11 | }: {
12 | sidebarOpen: boolean;
13 | setSidebarOpen: (value: boolean) => void;
14 | }) {
15 | return (
16 |
36 |
62 |
66 |
63 |
65 |
55 |
58 |
69 |
70 |
59 | setSearchTerm(e.target.value)}
66 | />
67 |
68 |
71 |
134 |
135 | );
136 | }
137 |
--------------------------------------------------------------------------------
/constants/network.ts:
--------------------------------------------------------------------------------
1 | import { JsonRpcProvider } from "@ethersproject/providers";
2 |
3 | type NetworkName = "mainnet" | "goerli" | "optimism";
4 | const infuraKey = process.env.NEXT_PUBLIC_INFURA_API_KEY;
5 | export const networkName: NetworkName =
6 | (process.env.NEXT_PUBLIC_ETHEREUM_NETWORK_NAME as NetworkName) ?? "mainnet";
7 |
8 | export const rpcUrl =
9 | networkName === "optimism"
10 | ? `https://optimism-mainnet.infura.io/v3/${infuraKey}`
11 | : `https://${networkName}.infura.io/v3/${infuraKey}`;
12 | export const readProvider = new JsonRpcProvider(rpcUrl);
13 |
--------------------------------------------------------------------------------
/constants/strings.ts:
--------------------------------------------------------------------------------
1 | export const ETH_SYMBOL = "Ξ";
2 |
--------------------------------------------------------------------------------
/contexts/ContractContext.tsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from "next/router";
2 | import { createContext, PropsWithChildren, useMemo } from "react";
3 |
4 | export type ContractFunction = any;
5 |
6 | export const ContractContext: React.Context<{
7 | functions?: ContractFunction[];
8 | abi?: any | undefined;
9 | metadata?: {
10 | name: string;
11 | };
12 | currentFunction?: ContractFunction | undefined;
13 | contractAddress?: string | undefined;
14 | }> = createContext({});
15 |
16 | export function ContractContextProvider({
17 | functions,
18 | abi,
19 | metadata,
20 | children,
21 | }: PropsWithChildren<{
22 | functions?: ContractFunction[];
23 | abi?: any;
24 | metadata?: {
25 | name: string;
26 | };
27 | }>) {
28 | const router = useRouter();
29 |
30 | const { address: contractAddress, fn } = router.query;
31 |
32 | const currentFunction = useMemo(
33 | () => functions?.find((f: any) => f.name === fn),
34 | [fn, functions]
35 | );
36 |
37 | return (
38 |
72 |
94 |
95 |
73 | Read
74 |
75 |
76 | {readFunctions.map((readFunction: any, idx: number) => {
77 | return (
78 |
83 | {readFunction.name}
84 |
85 | );
86 | })}
87 | {readFunctions.length === 0 && (
88 |
93 |
89 | No read functions.
90 |
91 | )}
92 |
96 |
133 |
97 | Write
98 |
99 |
100 |
101 | {writeFunctions.map((writeFunction: any, idx: number) => {
102 | return (
103 |
108 | {writeFunction.name}
109 |
110 | );
111 | })}
112 | {payableFunctions.map((payableFunction: any, idx: number) => {
113 | return (
114 |
119 |
120 | {payableFunction.name}
121 |
124 | );
125 | })}
126 | {writeFunctions.length === 0 && payableFunctions.length === 0 && (
127 |
132 |
128 | No write functions.
129 |
130 | )}
131 | = NextPage
114 |
137 | );
138 | };
139 |
140 | const AUTORUN_QUERY_PARAM = "run";
141 |
142 | function AddressPage({ serverSideError }: { serverSideError: string }) {
143 | const { signingProvider } = useContext(NetworkContext);
144 | const { currentFunction, contractAddress, abi } = useContext(ContractContext);
145 | console.log("address::function::", currentFunction);
146 | const [initialLoadDone, setInitialLoadDone] = useStateResult
115 | 116 |
227 | {serverSideError ?? (
228 |
331 | );
332 | }
333 |
334 | export default function AddressPageRender({
335 | error,
336 | }: InferGetServerSidePropsType
229 | {!currentFunction ? (
230 |
329 | )}
330 |
231 |
236 | ) : (
237 | 233 | Select a function to execute. 234 |
235 |
238 |
306 | This function sends funds from your wallet to the
307 | contract. Etherfunk may have bugs. Verify the data before
308 | submitting the transaction.
309 |
310 | }
311 | className="mb-5"
312 | />
313 | )}
314 | setFunctionArguments(newArgs)}
321 | onPayableValueChange={(newPayableValue) =>
322 | setPayableValue(newPayableValue)
323 | }
324 | />
325 |
326 | )}
327 |
239 |
284 | 240 | {currentFunction.name} 241 |
242 | 243 |
244 |
245 | {currentFunction.stateMutability === "view" ? (
246 |
263 |
266 | )}
267 |
268 |
269 |
274 |
275 |
285 | {currentFunction.inputs.length === 0 &&
286 | currentFunction.stateMutability !== "payable" ? (
287 |
299 |
300 | {currentFunction.stateMutability === "payable" && (
301 | This function has no inputs.
288 | ) : ( 289 |
290 | Complete the form and call this function.
291 | {currentFunction.stateMutability !== "view" && (
292 |
44 |
90 | ),
91 | {
92 | width: 1200,
93 | height: 600,
94 | fonts: [
95 | {
96 | name: "InterBold",
97 | data: fontDataBold,
98 | style: "normal",
99 | },
100 | {
101 | name: "Inter",
102 | data: fontDataRegular,
103 | style: "normal",
104 | },
105 | ],
106 | }
107 | );
108 | } catch (e: any) {
109 | console.log(`${e.message}`);
110 | return new Response(`Failed to generate the image`, {
111 | status: 500,
112 | });
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import type { NextPage } from "next";
2 | import Head from "next/head";
3 | import Image from "next/image";
4 | import { useRouter } from "next/router";
5 | import { ExploreSection } from "../components/ExploreSection";
6 | import { HanddrawnUnderline } from "../components/HanddrawnUnderline";
7 | import {
8 | DefaultMeta,
9 | FathomScript,
10 | Favicon,
11 | } from "../components/common/DefaultHead";
12 | import { LoadContractForm } from "../components/forms/LoadContractForm";
13 | import { networkName } from "../constants/network";
14 | import { ArrowRightIcon, SparklesIcon } from "@heroicons/react/outline";
15 |
16 | const displayName = networkName === "mainnet" ? "Ethereum" : networkName;
17 |
18 | const Home: NextPage = () => {
19 | const router = useRouter();
20 | const onSubmit = async ({ address }: { address: string }) => {
21 | router.push(`/address/${address}`);
22 | };
23 |
24 | return (
25 |
51 | 
76 |
77 |
78 |
57 |
70 |
65 | {contract ?? "Etherfunk"}
66 |
67 | {fn && {fn}
}
68 | ⛽️ {currentGasPrice} gwei
69 |
76 |
79 | Interact with this smart contract on{" "}
80 |
86 | etherfunk.io
87 |
88 |
89 |
26 |
27 | Etherfunk
28 |
32 |
36 |
40 |
41 |
42 |
110 | );
111 | };
112 |
113 | export default Home;
114 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tomquirk/etherfunk/d073c16794cc19656654162b069c79c375b4ffa3/public/apple-touch-icon.png
--------------------------------------------------------------------------------
/public/browserconfig.xml:
--------------------------------------------------------------------------------
1 |
2 |
48 |
49 |
50 |
97 |
98 |
99 |
108 |
109 |
51 |
59 |
60 |
61 |
66 |
67 |
76 |
77 |
78 |
79 | Read/Write for{" "}
80 |
81 | every
82 |
83 |
88 |
93 |
79 | Read/Write for{" "}
80 |
81 | every
82 |
83 |
88 | 89 | Your {displayName} control panel. Interact with smart contracts 90 | on {displayName}. 91 |
92 |
94 |
96 |