Update CNAME and package.json, delete unused files and dependencies

Borodutch · Dec 28, 2023 · 026c596 · 026c596
1 parent efeadd9
commit 026c596
Show file tree

Hide file tree

Showing 44 changed files with 4,010 additions and 210 deletions.
diff --git a/.env.sample b/.env.sample
@@ -0,0 +1,2 @@
+VITE_CONTRACT=0x357b4Ef40A5cF049114B4566773e8A6a57F8E862
+VITE_ALCHEMY_BASE=123
diff --git a/.github/workflows/deployflow.yml b/.github/workflows/deployflow.yml
@@ -14,6 +14,8 @@ jobs:
       url: ${{ steps.deployment.outputs.page_url }}
     env:
       NODE_OPTIONS: '--max_old_space_size=4096'
+      VITE_CONTRACT: ${{ secrets.VITE_CONTRACT }}
+      VITE_ALCHEMY_BASE: ${{ secrets.VITE_ALCHEMY_BASE }}
     steps:
       - name: Checkout
         uses: actions/checkout@v2

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -16,5 +16,6 @@
   },
   "editor.quickSuggestions": {
     "strings": true
-  }
+  },
+  "cSpell.words": ["AMENO", "DORIME", "rainbowkit", "wagmi"]
 }
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021-present Borodutch
+Copyright (c) 2023-present Borodutch
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,19 +1,4 @@
-# Frontend code template in `preact`
-
-This template is to be used for frontend applications.
-
-## Features
-
-- State management with `jotai`
-- Around 13.53kb after brotli compression (this includes **everything**) 😱
-- `preact` under the hood with `preact/compat` makes it compatible with virtually any `react` library but still makes it faster
-- Full TypeScript support — no dangling types
-- `vite` packager and devtools make building and development lightning fast
-- `tailwind-css` built-in with 'daisyui'
-- GitHub Actions that lint and check the code on pull requests
-- `prettier` and `eslint` configured, enabled and formatting your code on save
-- List of recommended extensions for VSCode
-- It is important to keep the bundle small, so a `stats.html` file is generated on `yarn build` to visually show you the bundle size
+# $AMENO frontend
 
 ## Local launch
 

diff --git a/designs/designs.sketch b/designs/designs.sketch
diff --git a/index.html b/index.html
@@ -1,10 +1,41 @@
-<!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>$AMENO</title>
+    <meta name="description" content="Let's DORIME this $AMENO 😱" />
+    <!-- Favicon -->
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/img/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/img/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/img/favicon-16x16.png"
+    />
+    <link rel="manifest" href="/img/site.webmanifest" />
+    <link rel="mask-icon" href="/img/safari-pinned-tab.svg" color="#cbcbcb" />
+    <link rel="shortcut icon" href="/img/favicon.ico" />
+    <meta name="msapplication-TileColor" content="#2b5797" />
+    <meta name="msapplication-config" content="/img/browserconfig.xml" />
+    <meta name="theme-color" content="#ffffff" />
+    <!-- OG -->
+    <meta property="og:title" content="$AMENO" />
+    <meta property="og:description" content="Let's DORIME this $AMENO 😱 🙏" />
+    <meta property="og:image" content="/img/og.jpg" />
+    <meta property="og:url" content="http://ameno.lol" />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="$AMENO" />
   </head>
   <body>
     <noscript>Please, turn on JavaScript to see this page.</noscript>

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "frontend-starter",
+  "name": "ameno-frontend",
   "version": "1.0.0",
   "license": "MIT",
   "scripts": {
@@ -10,8 +10,14 @@
     "preview": "yarn build && yarn vite preview"
   },
   "dependencies": {
+    "@borodutch/ameno-contract": "^1.0.2",
+    "@rainbow-me/rainbowkit": "^1.3.2",
+    "envalid": "^8.0.0",
+    "ethers": "^6.9.1",
     "jotai": "^2.6.0",
-    "preact": "^10.19.3"
+    "preact": "^10.19.3",
+    "viem": "^1.21.1",
+    "wagmi": "^1.4.12"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.7.0",

diff --git a/public/CNAME b/public/CNAME
@@ -1 +1 @@
-google.com
+ameno.lol
diff --git a/public/img/android-chrome-192x192.png b/public/img/android-chrome-192x192.png
diff --git a/public/img/android-chrome-512x512.png b/public/img/android-chrome-512x512.png
diff --git a/public/img/apple-touch-icon.png b/public/img/apple-touch-icon.png
diff --git a/public/img/background.png b/public/img/background.png
diff --git a/public/img/browserconfig.xml b/public/img/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/img/mstile-150x150.png"/>
+            <TileColor>#2b5797</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/public/img/favicon-16x16.png b/public/img/favicon-16x16.png
diff --git a/public/img/favicon-32x32.png b/public/img/favicon-32x32.png
diff --git a/public/img/favicon.ico b/public/img/favicon.ico
diff --git a/public/img/mstile-150x150.png b/public/img/mstile-150x150.png
diff --git a/public/img/og.jpg b/public/img/og.jpg
diff --git a/public/img/safari-pinned-tab.svg b/public/img/safari-pinned-tab.svg
diff --git a/public/img/site.webmanifest b/public/img/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/img/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/img/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
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 CrucialActions from 'components/CrucialActions'
+import Description from 'components/Description'
+import Mint from 'components/Mint'
+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">
+        <h1>$AMENO</h1>
+        <Description />
+        <Mint />
+        <CrucialActions />
+      </div>
+    </Wallet>
   )
 }
diff --git a/src/atoms/userCount.ts b/src/atoms/userCount.ts
diff --git a/src/components/Buy.tsx b/src/components/Buy.tsx
@@ -0,0 +1,19 @@
+export default function () {
+  return (
+    <>
+      <div className="flex flex-col items-stretch gap-4 mt-8">
+        <button
+          class="btn btn-primary btn-lg"
+          onClick={() => {
+            window.open(
+              'https://dexscreener.com/base/0x357b4Ef40A5cF049114B4566773e8A6a57F8E862',
+              '_blank'
+            )
+          }}
+        >
+          👏 Buy $AMENO 👏
+        </button>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/Claim.tsx b/src/components/Claim.tsx
@@ -0,0 +1,54 @@
+import { ConnectButton } from '@rainbow-me/rainbowkit'
+import { useAccount } from 'wagmi'
+import { useEthersSigner } from 'hooks/useEthers'
+import { useState } from 'preact/hooks'
+import ClaimDashboard from 'components/ClaimDashboard'
+import getVerificationMessage from 'helpers/getVerificationMessage'
+
+export default function () {
+  const signer = useEthersSigner()
+  const [signature, setSignature] = useState('')
+  const { address, isConnected } = useAccount()
+
+  async function authorize() {
+    try {
+      if (!signer) {
+        throw new Error('No signer')
+      }
+      if (!address) {
+        throw new Error('No address')
+      }
+      const signature = await signer.signMessage(
+        getVerificationMessage(address)
+      )
+      setSignature(signature)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return (
+    <div className="flex flex-col items-stetch gap-4">
+      <h2>NEW 😱 CLAIM $SPAM FOR FARCASTER ACTIVITY!</h2>
+      <ul>
+        <li>You get 5 $SPAM for every unique cast containing "$SPAM"</li>
+        <li>Casts that only contain the word $SPAM don't count</li>
+        <li>Every like on a cast increases the claim for the cast by 1%</li>
+        <li>So does every recast</li>
+        <li>Go use $SPAM in your casts!</li>
+        <li>You can claim every 24 hours 🫦</li>
+      </ul>
+      <ConnectButton />
+      {isConnected && (
+        <>
+          {!signature && (
+            <button class="btn btn-primary btn-lg" onClick={authorize}>
+              Authorize $SPAM
+            </button>
+          )}
+          {signature && <ClaimDashboard signature={signature} />}
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/ClaimDashboard.tsx b/src/components/ClaimDashboard.tsx
@@ -0,0 +1,110 @@
+import { Spam__factory } from '@borodutch/spam-contract'
+import { ethers } from 'ethers'
+import { useAccount } from 'wagmi'
+import { useEthersSigner } from 'hooks/useEthers'
+import { useState } from 'preact/hooks'
+import GeneratedTicket from 'models/GeneratedTIcket'
+import env from 'helpers/env'
+import generateTicket from 'helpers/api'
+
+export default function ({ signature }: { signature: string }) {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState(false)
+  const [ticket, setTicket] = useState<GeneratedTicket | null>(null)
+
+  const { address } = useAccount()
+  const signer = useEthersSigner()
+
+  async function getTicket() {
+    setSuccess(false)
+    setLoading(true)
+    setError('')
+    try {
+      if (!address) throw new Error('No address found')
+      const ticket = await generateTicket(address, signature)
+      setTicket(ticket)
+    } catch (error) {
+      console.error(error)
+      setError(error instanceof Error ? error.message : `${error}`)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function claimSpam() {
+    setLoading(true)
+    setSuccess(false)
+    try {
+      if (!ticket) {
+        throw new Error('No ticket found')
+      }
+      const contract = Spam__factory.connect(env.VITE_CONTRACT, signer)
+      const { r, yParityAndS } = ethers.Signature.from(
+        ticket.signature.signature
+      )
+      const tx = await contract.claimSpam(
+        new Uint8Array(ticket.signature.message),
+        r,
+        yParityAndS
+      )
+      await tx.wait()
+      setSuccess(true)
+    } catch (error) {
+      console.error(error)
+      setError(error instanceof Error ? error.message : `${error}`)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <div role="alert" class="alert alert-success">
+        You have authorized $SPAM! Now let's see if you have any $SPAM to claim
+        🫦
+      </div>
+      {!ticket && (
+        <button
+          class="btn btn-primary btn-lg"
+          onClick={getTicket}
+          disabled={loading}
+        >
+          {loading ? ' 🤔' : ''}Get ticket to claim $SPAM 💎🤲
+        </button>
+      )}
+      {ticket && (
+        <div class="alert alert-success flex flex-col gap-4 items-stretch">
+          <p>
+            You have a ticket to claim {ticket.total} $SPAM! It consists of{' '}
+            {ticket.baseAmount} $SPAM for unique casts containing $SPAM,{' '}
+            {ticket.additionalForLikes} $SPAM for likes, and{' '}
+            {ticket.additionalForRecasts} $SPAM for recasts. Do not reload this
+            page or you will lose this ticket!
+          </p>
+          <button
+            class="btn btn-primary btn-lg"
+            onClick={() => {
+              void claimSpam()
+            }}
+          >
+            Claim $SPAM 💎🤲
+          </button>
+        </div>
+      )}
+      {success && (
+        <div role="alert" class="alert alert-success">
+          <span role="img" aria-label="success">
+            🎉
+          </span>{' '}
+          You successfully claimed $SPAM! Check your wallet for details 🚀
+        </div>
+      )}
+      {error && (
+        <div role="alert" class="alert alert-error break-all">
+          {error}
+        </div>
+      )}
+    </>
+  )
+}