docs(web): add deployment website

Rubilmax · May 28, 2024 · 169bc7e · 169bc7e
1 parent d9ee28b
commit 169bc7e
Show file tree

Hide file tree

Showing 14 changed files with 4,127 additions and 0 deletions.
diff --git a/.github/workflows/publish-page.yml b/.github/workflows/publish-page.yml
@@ -0,0 +1,60 @@
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        working-directory: ./web
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+
+      - name: Configure pages
+        uses: actions/configure-pages@v5
+        with:
+          static_site_generator: next
+
+      - name: Build with Next.js
+        run: yarn build
+
+      - name: Upload artifact 📡
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./web/out
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+    needs: build
+
+    steps:
+      - name: Publish to GitHub Pages 🚀
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/web/.gitignore b/web/.gitignore
@@ -0,0 +1,35 @@
+# 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*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/web/.npmrc b/web/.npmrc
@@ -0,0 +1 @@
+legacy-peer-deps = true
diff --git a/web/.nvmrc b/web/.nvmrc
@@ -0,0 +1 @@
+20
diff --git a/web/README.md b/web/README.md
@@ -0,0 +1 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-wagmi`](https://github.com/wevm/wagmi/tree/main/packages/create-wagmi).
diff --git a/web/next.config.js b/web/next.config.js
@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  basePath: "/executooor",
+  output: "export",
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;
diff --git a/web/package.json b/web/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "web",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.40.0",
+    "next": "^14.2.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "viem": "^2.13.1",
+    "wagmi": "^2.9.7"
+  },
+  "devDependencies": {
+    "@types/node": "^20.7.2",
+    "@types/react": "^18.2.23",
+    "@types/react-dom": "^18.2.8",
+    "@wagmi/cli": "^2.1.8",
+    "encoding": "^0.1.13",
+    "lokijs": "^1.5.12",
+    "pino-pretty": "^11.1.0",
+    "typescript": "^5.2.2"
+  }
+}
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
@@ -0,0 +1,21 @@
+:root {
+  background-color: #181818;
+  color: rgba(255, 255, 255, 0.87);
+  color-scheme: light dark;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-synthesis: none;
+  font-weight: 400;
+  line-height: 1.5;
+  text-rendering: optimizeLegibility;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    background-color: #f8f8f8;
+    color: #181818;
+  }
+}
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { type ReactNode } from "react";
+
+import "./globals.css";
+import { Providers } from "./providers";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Deploy Executor",
+};
+
+export default function RootLayout(props: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <Providers>{props.children}</Providers>
+      </body>
+    </html>
+  );
+}
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import React from "react";
+import { isAddress } from "viem";
+import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
+
+function App() {
+  const account = useAccount();
+  const { connectors, connect, status, error } = useConnect();
+  const { disconnect } = useDisconnect();
+
+  const { data: walletClient } = useWalletClient({ chainId: account.chainId });
+
+  const [owner, setOwner] = React.useState("");
+
+  return (
+    <>
+      <div>
+        <h2>Account</h2>
+
+        <div>
+          status: {account.status}
+          <br />
+          addresses: {JSON.stringify(account.addresses)}
+          <br />
+          chainId: {account.chainId}
+        </div>
+
+        {account.status === "connected" && (
+          <button type="button" onClick={() => disconnect()}>
+            Disconnect
+          </button>
+        )}
+      </div>
+
+      <div>
+        <h2>Connect</h2>
+        {connectors.map((connector) => (
+          <button key={connector.uid} onClick={() => connect({ connector })} type="button">
+            {connector.name}
+          </button>
+        ))}
+        <div>{status}</div>
+        <div>{error?.message}</div>
+      </div>
+
+      <div>
+        <h2>Deploy</h2>
+        <label htmlFor="owner">Owner:</label>
+        <input
+          type="text"
+          id="owner"
+          name="owner"
+          required
+          minLength={42}
+          maxLength={42}
+          size={50}
+          value={owner}
+          onChange={(e) => setOwner(e.target.value)}
+        />
+        {walletClient && isAddress(owner) && (
+          <button
+            onClick={() =>
+              walletClient.deployContract({
+                abi: [
+                  {
+                    type: "constructor",
+                    inputs: [
+                      {
+                        name: "_owner",
+                        type: "address",
+                        internalType: "address",
+                      },
+                    ],
+                    stateMutability: "nonpayable",
+                  },
+                ],
+                args: [owner],
+                bytecode:
+                  "0x60a034606657601f6104de38819003918201601f19168301916001600160401b03831184841017606a57808492602094604052833981010312606657516001600160a01b038116810360665760805260405161045f908161007f8239608051816101fa0152f35b5f80fd5b634e487b7160e01b5f52604160045260245ffdfe604060808152600480361015610117575b3615610115575f5c6001600160a01b03811633036100ec576c1fffffffffffffffffffffffe090609b1c1681013501803590825190602092839181830190843782010183528051810183828483019203126100ec57828201519067ffffffffffffffff918281116100ec5783019481603f870112156100ec57848601519561009f61009a88610366565b6102d4565b96828789838152019160051b830101918483116100ec57838101915b8383106100f057505050508301519182116100ec57836100e0926100e69401016103a3565b926103ed565b81519101f35b5f80fd5b82518781116100ec57899161010a888885948701016103a3565b8152019201916100bb565b005b5f3560e01c801561025757806001146101935763a9059cbb0361001057503660031901126100ec576101476102be565b806024353033036100ec575f918291829182916001600160a01b0387161561018b575b478181109082180218905af161017e61037e565b901561018657005b6103df565b41915061016a565b506020806003193601126100ec57813567ffffffffffffffff928382116100ec57366023830112156100ec578101356024906101d161009a82610366565b946024602087848152019260051b850101933685116100ec5760248101925b85841061023157877f00000000000000000000000000000000000000000000000000000000000000006001600160a01b031633036100ec57610115906103ed565b83358381116100ec57879161024c839288369187010161032a565b8152019301926101f0565b5060803660031901126100ec5761026c6102be565b906064359067ffffffffffffffff82116100ec5761028c9136910161032a565b3033036100ec575f8091815c93604435835d60208251920190602435905af16102b361037e565b901561018657505f5d005b600435906001600160a01b03821682036100ec57565b6040519190601f01601f1916820167ffffffffffffffff8111838210176102fa57604052565b634e487b7160e01b5f52604160045260245ffd5b67ffffffffffffffff81116102fa57601f01601f191660200190565b81601f820112156100ec5780359061034461009a8361030e565b92828452602083830101116100ec57815f926020809301838601378301015290565b67ffffffffffffffff81116102fa5760051b60200190565b3d1561039e573d9061039261009a8361030e565b9182523d5f602084013e565b606090565b81601f820112156100ec578051906103bd61009a8361030e565b92828452602083830101116100ec57815f9260208093018386015e8301015290565b80519081156100ec57602001fd5b5f5b8151811015610425575f806020808460051b86010151908151910182305af161041661037e565b901561018657506001016103ef565b505056fea26469706673582212209527ecc475951fbabdfd2cc3eb391c0686fc874a25a8c0c78d43d47a036585f364736f6c63430008190033",
+              })
+            }
+            type="button"
+          >
+            Deploy
+          </button>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default App;
diff --git a/web/src/app/providers.tsx b/web/src/app/providers.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { config } from "@/wagmi";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState, type ReactNode } from "react";
+import { WagmiProvider } from "wagmi";
+
+export function Providers(props: { children: ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient());
+
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>{props.children}</QueryClientProvider>
+    </WagmiProvider>
+  );
+}
diff --git a/web/src/wagmi.ts b/web/src/wagmi.ts
@@ -0,0 +1,20 @@
+import { http, createConfig } from "wagmi";
+import { mainnet, sepolia, base } from "wagmi/chains";
+import { coinbaseWallet, injected } from "wagmi/connectors";
+
+export const config = createConfig({
+  chains: [mainnet, sepolia],
+  connectors: [injected(), coinbaseWallet({ appName: "Deploy Executor" })],
+  ssr: true,
+  transports: {
+    [mainnet.id]: http(),
+    [sepolia.id]: http(),
+    [base.id]: http(),
+  },
+});
+
+declare module "wagmi" {
+  interface Register {
+    config: typeof config;
+  }
+}
diff --git a/web/tsconfig.json b/web/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-wagmi`](https://github.com/wevm/wagmi/tree/main/packages/create-wagmi).