add initial flow

.env.sample

@@ -0,0 +1,2 @@
+VITE_ALCHEMY_KEY=00000000000000000000000000000000
+VITE_WALLETCONNECT_PROJECT_ID=00000000000000000000000000000000

.github/workflows/deployflow.yml

@@ -24,6 +24,9 @@ jobs:
         run: yarn
         shell: bash
       - name: Build code
+        env:
+          VITE_ALCHEMY_KEY: ${{ secrets.VITE_ALCHEMY_KEY }}
+          VITE_WALLETCONNECT_PROJECT_ID: ${{ secrets.VITE_WALLETCONNECT_PROJECT_ID }}
         run: yarn build
         shell: bash
       - name: Setup Pages

package.json

@@ -10,8 +10,12 @@
     "preview": "yarn build && yarn vite preview"
   },
   "dependencies": {
+    "@rainbow-me/rainbowkit": "^1.0.9",
+    "envalid": "^7.3.1",
     "jotai": "^2.3.1",
-    "preact": "^10.17.1"
+    "preact": "^10.17.1",
+    "viem": "^1.6.7",
+    "wagmi": "^1.3.10"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.5.0",

src/App.tsx

@@ -1,13 +1,15 @@
-import { Suspense } from 'preact/compat'
-import UserCount from 'components/UserCount'
+import Description from 'components/Description'
+import Minting from 'components/Minting'
+import Root from 'components/Root'
+import WalletProvider from 'components/WalletProvider'
 
 export default function () {
   return (
-    <div className="container mx-auto max-w-prose p-10 prose">
-      <h1>SealHub | memorabilia token</h1>
-      <Suspense fallback={<p>Loading...</p>}>
-        <UserCount />
-      </Suspense>
-    </div>
+    <WalletProvider>
+      <Root>
+        <Description />
+        <Minting />
+      </Root>
+    </WalletProvider>
   )
 }

src/components/Description.tsx

@@ -0,0 +1,26 @@
+export default function () {
+  return (
+    <>
+      <h1>SealHub | memorabilia token</h1>
+      <p>
+        Welcome to the memorabilia token minting resource! This is an example of
+        how one can use{' '}
+        <a href="https://hub.sealc.red" target="_blank">
+          SealHub
+        </a>{' '}
+        explained in{' '}
+        <a href="https://blog.bigwhalelabs.com" target="_blank">
+          the relevant tutorial
+        </a>
+        . You can find the code for this website{' '}
+        <a
+          href="https://github.com/BigWhaleLabs/seal-hub-memorabilia-token"
+          target="_blank"
+        >
+          on our GitHub
+        </a>
+        . Cheers!
+      </p>
+    </>
+  )
+}

src/components/Minting.tsx

@@ -0,0 +1,32 @@
+import { ConnectButton } from '@rainbow-me/rainbowkit'
+import { useAccount } from 'wagmi'
+
+function ConnectionFlow() {
+  return (
+    <>
+      <p>First, please connect your wallet!</p>
+      <ConnectButton
+        accountStatus="address"
+        chainStatus="none"
+        showBalance={false}
+      />
+    </>
+  )
+}
+
+function MintingFlow() {
+  const { address } = useAccount()
+  return (
+    <>
+      <p>Connected address {address}</p>
+      <p>Next, sign the message!</p>
+      <button class="btn btn-primary">Sign the message!</button>
+    </>
+  )
+}
+
+export default function () {
+  const { isConnected } = useAccount()
+
+  return isConnected ? <MintingFlow /> : <ConnectionFlow />
+}

src/components/Root.tsx

@@ -0,0 +1,7 @@
+import ChildrenProp from 'models/ChildrenProp'
+
+export default function ({ children }: ChildrenProp) {
+  return (
+    <div className="container mx-auto max-w-prose p-10 prose">{children}</div>
+  )
+}

src/components/WalletProvider.tsx

@@ -0,0 +1,47 @@
+import '@rainbow-me/rainbowkit/styles.css'
+
+import {
+  RainbowKitProvider,
+  getDefaultWallets,
+  midnightTheme,
+} from '@rainbow-me/rainbowkit'
+import { WagmiConfig, configureChains, createConfig } from 'wagmi'
+import { alchemyProvider } from 'wagmi/providers/alchemy'
+import { goerli } from 'wagmi/chains'
+import { publicProvider } from 'wagmi/providers/public'
+
+import ChildrenProp from 'models/ChildrenProp'
+import env from 'helpers/env'
+
+const { chains, publicClient } = configureChains(
+  [goerli],
+  [alchemyProvider({ apiKey: env.VITE_ALCHEMY_KEY }), publicProvider()]
+)
+
+const { connectors } = getDefaultWallets({
+  appName: 'SealHub | memorabilia token',
+  projectId: env.VITE_WALLETCONNECT_PROJECT_ID,
+  chains,
+})
+
+const wagmiConfig = createConfig({
+  autoConnect: true,
+  connectors,
+  publicClient,
+})
+
+export default function ({ children }: ChildrenProp) {
+  return (
+    <WagmiConfig config={wagmiConfig}>
+      <RainbowKitProvider
+        coolMode
+        chains={chains}
+        theme={midnightTheme({
+          ...midnightTheme.accentColors.purple,
+        })}
+      >
+        {children}
+      </RainbowKitProvider>
+    </WagmiConfig>
+  )
+}

src/helpers/env.ts

@@ -0,0 +1,6 @@
+import { cleanEnv, str } from 'envalid'
+
+export default cleanEnv(import.meta.env, {
+  VITE_ALCHEMY_KEY: str(),
+  VITE_WALLETCONNECT_PROJECT_ID: str(),
+})

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 {}

src/index.tsx

@@ -1,4 +1,6 @@
+import 'helpers/polyfills'
 import 'index.css'
+
 import { render } from 'preact'
 import App from 'App'
 

tailwind.config.js

@@ -2,4 +2,7 @@
 module.exports = {
   content: ['./index.html', './src/**/!(tailwind).{ts,tsx}'],
   plugins: [require('@tailwindcss/typography'), require('daisyui')],
+  daisyui: {
+    themes: ['valentine'],
+  },
 }