Initial commit

Go0p · Sep 28, 2022 · 0826a65 · 0826a65
commit 0826a65
Show file tree

Hide file tree

Showing 19 changed files with 2,688 additions and 0 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1 @@
+ALCHEMY_API_KEY=
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+.env
diff --git a/README.md b/README.md
@@ -0,0 +1,18 @@
+Guess ABI of any Ethereum contract, even if it is not verified on Etherscan. Works by analyzing the bytecode,
+extracting selectors from PUSH4/JUMPI instructions and comparing them to known ABI signatures.
+
+Powered by <a href="https://github.com/shazow/whatsabi">@shazow/whatsabi</a> and <a href="https://www.4byte.directory/">4byte.directory</a>
+
+## Getting Started
+
+Copy `.env.example` to `.env` and add your Alchemy API key.
+
+Then, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -0,0 +1,13 @@
+export default function Footer() {
+  return (
+    <footer>
+      Powered by <a href="https://github.com/shazow/whatsabi">@shazow/whatsabi</a> and{' '}
+      <a href="https://www.4byte.directory/">4byte.directory</a>
+      <style jsx>{`
+        footer {
+          margin-top: 2rem;
+        }
+      `}</style>
+    </footer>
+  );
+}
diff --git a/components/HeadMeta.tsx b/components/HeadMeta.tsx
@@ -0,0 +1,28 @@
+import Head from 'next/head';
+
+type Props = {
+  title: string;
+  description: string;
+};
+
+const BASE_URL = 'https://abi.w1nt3r.xyz';
+
+export default function HeadMeta(props: Props) {
+  return (
+    <Head>
+      <title>{props.title}</title>
+      <meta name="description" content={props.description} />
+      <link rel="icon" href="/favicon.png" />
+      <meta property="og:title" content={props.title} />
+      <meta property="og:description" content={props.description} />
+      <meta property="og:image" content={`${BASE_URL}/og_image.png`} />
+      <meta property="og:url" content={`${BASE_URL}`} />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:site" content="@w1nt3r_eth" />
+      <meta name="twitter:creator" content="@w1nt3r_eth" />
+      <meta name="twitter:title" content={props.title} />
+      <meta name="twitter:description" content={props.description} />
+      <meta name="twitter:image" content={`${BASE_URL}/og_image.png`} />
+    </Head>
+  );
+}
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+}
+
+module.exports = nextConfig
diff --git a/package.json b/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "whatsabi",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "printWidth": 120
+  },
+  "dependencies": {
+    "@shazow/whatsabi": "^0.1.0",
+    "ethers": "^5.7.1",
+    "next": "12.3.1",
+    "prettier": "^2.7.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.7.23",
+    "@types/react": "18.0.21",
+    "@types/react-dom": "18.0.6",
+    "eslint": "8.24.0",
+    "eslint-config-next": "12.3.1",
+    "typescript": "4.8.4"
+  }
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -0,0 +1,8 @@
+import '../styles/globals.css'
+import type { AppProps } from 'next/app'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp
diff --git a/pages/api/hello.ts b/pages/api/hello.ts
@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -0,0 +1,67 @@
+import type { NextPage } from 'next';
+import Footer from '../components/Footer';
+import HeadMeta from '../components/HeadMeta';
+
+// TODO: Using Next's <Link> component for navigation is not showing loading state
+/* eslint-disable @next/next/no-html-link-for-pages */
+
+const Home: NextPage = () => {
+  return (
+    <div className="container">
+      <HeadMeta title="ABI for unverified contracts" description="Guess ABI of any Ethereum contract" />
+
+      <main className="main">
+        <h1 className="title">Get ABI for unverified contracts</h1>
+
+        <p className="description">
+          Guess ABI of any Ethereum contract, even if it is not verified on Etherscan. Works by analyzing the bytecode,
+          extracting selectors from PUSH4/JUMPI instructions and comparing them to known ABI signatures.
+        </p>
+
+        <form action="/search" method="get">
+          <input
+            name="address"
+            type="search"
+            placeholder="0x123...abc"
+            required
+            autoFocus
+            autoCapitalize="none"
+            autoCorrect="false"
+            spellCheck="false"
+            autoComplete="off"
+          />
+          <button type="submit">→</button>
+        </form>
+        <p className="description">Or try some examples:</p>
+        <p className="description">
+          <a href="/mainnet/0x7a250d5630b4cf539739df2c5dacb4c659f2488d">0x7a250d5630b4cf539739df2c5dacb4c659f2488d</a>
+          <br />
+          <a href="/mainnet/0x2d8a1e139cb15319b1f325eb917c9c704f45db7c">0x2d8a1e139cb15319b1f325eb917c9c704f45db7c</a>
+          <br />
+          <a href="/mainnet/0xaE9C73fd0Fd237c1c6f66FE009d24ce969e98704">0xaE9C73fd0Fd237c1c6f66FE009d24ce969e98704</a>
+        </p>
+
+        <Footer />
+      </main>
+      <style jsx>{`
+        .main {
+          padding: 2rem;
+          max-width: 60ch;
+        }
+        form {
+          display: flex;
+        }
+        input {
+          width: 100%;
+          padding: 0.5rem;
+          font-size: 1.5rem;
+        }
+        button {
+          width: 50px;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default Home;