deploy knockknock

Borodutch · Feb 23, 2024 · a3bdc75 · a3bdc75
1 parent 18b0589
commit a3bdc75
Show file tree

Hide file tree

Showing 18 changed files with 4,417 additions and 253 deletions.
diff --git a/.env.sample b/.env.sample
@@ -0,0 +1,3 @@
+VITE_WALLET_CONNECT_PROJECT_ID=de445b653db5d8cad1fbc18bf3f4c00b
+VITE_ALCHEMY=https://base-mainnet.g.alchemy.com/v2/123
+VITE_CONTRACT_ADDRESS=0x5AA6b79A8ea7c240c8DE59a83765AC984912A8f3
diff --git a/.github/workflows/deployflow.yml b/.github/workflows/deployflow.yml
@@ -13,6 +13,9 @@ jobs:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
     env:
+      VITE_WALLET_CONNECT_PROJECT_ID: ${{secrets.VITE_WALLET_CONNECT_PROJECT_ID}}
+      VITE_ALCHEMY: ${{secrets.VITE_ALCHEMY}}
+      VITE_CONTRACT_ADDRESS: ${{secrets.VITE_CONTRACT_ADDRESS}}
       NODE_OPTIONS: '--max_old_space_size=4096'
     steps:
       - name: Checkout

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v20.11.0
+v20.11.1
diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Frontend starter preact</title>
-    <meta name="description" content="Frontend starter example" />
+    <title>knockknock</title>
+    <meta name="description" content="This website knocks" />
   </head>
   <body>
     <noscript>Please, turn on JavaScript to see this page.</noscript>

diff --git a/package.json b/package.json
@@ -11,8 +11,15 @@
     "preview": "yarn build && yarn vite preview"
   },
   "dependencies": {
+    "@borodutch/knockknock-contract": "^0.0.6",
+    "@rainbow-me/rainbowkit": "^2.0.1",
+    "@tanstack/react-query": "^5.22.2",
+    "envalid": "^8.0.0",
+    "ethers": "^6.11.1",
     "jotai": "^2.6.5",
-    "preact": "^10.19.6"
+    "preact": "^10.19.6",
+    "viem": "^2.7.13",
+    "wagmi": "^2.5.7"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.8.1",
@@ -24,7 +31,7 @@
     "autoprefixer": "^10.4.17",
     "cross-env": "^7.0.3",
     "daisyui": "^4.7.2",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-no-relative-import-paths": "^1.5.3",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,13 +1,17 @@
-import { Suspense } from 'preact/compat'
-import UserCount from 'components/UserCount'
+import { ConnectButton } from '@rainbow-me/rainbowkit'
+import Knock from 'components/Knock'
+import Wallet from 'components/Wallet'
 
 export default function () {
   return (
-    <div className="container mx-auto max-w-prose p-10 prose">
-      <h1>Frontend template</h1>
-      <Suspense fallback={<p>Loading...</p>}>
-        <UserCount />
-      </Suspense>
-    </div>
+    <Wallet>
+      <div className="container mx-auto max-w-prose p-10 prose">
+        <div className="flex flex-col gap-4">
+          <h1>knockknock</h1>
+          <ConnectButton />
+          <Knock />
+        </div>
+      </div>
+    </Wallet>
   )
 }
diff --git a/src/atoms/userCount.ts b/src/atoms/userCount.ts
diff --git a/src/components/Knock.tsx b/src/components/Knock.tsx
@@ -0,0 +1,81 @@
+import { useAccount } from 'wagmi'
+import { useState } from 'preact/hooks'
+import contract from 'helpers/contract'
+import useEthersSigner from 'hooks/useEthersSigner'
+
+export default function () {
+  const { isConnected } = useAccount()
+  if (!isConnected) {
+    return <p>Please, connect a wallet!</p>
+  }
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState(false)
+  const signer = useEthersSigner()
+
+  return (
+    <div className="flex flex-col gap-2">
+      <button
+        class="btn btn-primary"
+        onClick={async () => {
+          setLoading(true)
+          setSuccess(false)
+          setError('')
+          try {
+            if (!signer) {
+              throw new Error('No signer found')
+            }
+            const signedContract = contract.connect(signer)
+            await (await signedContract.knock()).wait()
+            setSuccess(true)
+          } catch (error) {
+            const errorText = error instanceof Error ? error.message : error
+            console.error(errorText)
+            setError(errorText)
+          } finally {
+            setLoading(false)
+          }
+        }}
+        disabled={loading}
+      >
+        {loading && '🤔 '}Knock!
+      </button>
+      {success && (
+        <div role="alert" class="alert alert-success">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="stroke-current shrink-0 h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+          <span>Yay, you knocked!</span>
+        </div>
+      )}
+      {error && (
+        <div role="alert" class="alert alert-error">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="stroke-current shrink-0 h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+          <span>Oh, no! Something went wrong! {error}</span>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/UserCount.tsx b/src/components/UserCount.tsx
diff --git a/src/components/Wallet.tsx b/src/components/Wallet.tsx
@@ -0,0 +1,25 @@
+import '@rainbow-me/rainbowkit/styles.css'
+import { PropsWithChildren } from 'preact/compat'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { RainbowKitProvider, getDefaultConfig } from '@rainbow-me/rainbowkit'
+import { WagmiProvider } from 'wagmi'
+import { base } from 'wagmi/chains'
+import env from 'helpers/env'
+
+const config = getDefaultConfig({
+  appName: 'knockknock',
+  projectId: env.VITE_WALLET_CONNECT_PROJECT_ID,
+  chains: [base],
+})
+
+const queryClient = new QueryClient()
+
+export default function ({ children }: PropsWithChildren) {
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider coolMode>{children}</RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  )
+}
diff --git a/src/helpers/contract.ts b/src/helpers/contract.ts
@@ -0,0 +1,4 @@
+import { KnockKnock__factory } from '@borodutch/knockknock-contract'
+import env from 'helpers/env'
+
+export default KnockKnock__factory.connect(env.VITE_CONTRACT_ADDRESS)
diff --git a/src/helpers/env.ts b/src/helpers/env.ts
@@ -0,0 +1,7 @@
+import { cleanEnv, str } from 'envalid'
+
+export default cleanEnv(import.meta.env, {
+  VITE_WALLET_CONNECT_PROJECT_ID: str(),
+  VITE_ALCHEMY: str(),
+  VITE_CONTRACT_ADDRESS: str(),
+})
diff --git a/src/helpers/formatNumber.ts b/src/helpers/formatNumber.ts
diff --git a/src/helpers/getUserCount.ts b/src/helpers/getUserCount.ts
diff --git a/src/helpers/polyfills.ts b/src/helpers/polyfills.ts
@@ -0,0 +1,7 @@
+import { Buffer } from 'buffer'
+
+window.global = window.global ?? window
+window.Buffer = window.Buffer ?? Buffer
+window.process = window.process ?? { env: {} } // Minimal process polyfill
+
+export {}
diff --git a/src/hooks/useEthersSigner.ts b/src/hooks/useEthersSigner.ts
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { BrowserProvider, JsonRpcSigner, Networkish } from 'ethers'
+import { UseWalletClientReturnType, useWalletClient } from 'wagmi'
+
+function walletClientToSigner(walletClient: UseWalletClientReturnType) {
+  if (!walletClient.data) return null
+  const { account, chain, transport } = walletClient.data
+  const network = {
+    chainId: chain.id,
+    name: chain.name,
+    ensAddress: chain.contracts?.ensRegistry?.address,
+  }
+  const provider = new BrowserProvider(transport, network as Networkish)
+  const signer = new JsonRpcSigner(provider, account.address)
+  return signer
+}
+
+export default function ({ chainId }: { chainId?: number } = {}) {
+  const data = useWalletClient({ chainId })
+  return React.useMemo(
+    () => (data ? walletClientToSigner(data) : undefined),
+    [data]
+  )
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,3 +1,4 @@
+import 'helpers/polyfills'
 import 'index.css'
 import { render } from 'preact'
 import App from 'App'