Merge pull request #18 from oasisprotocol/ml/smart-contract-fe-integr…

…ation

Cast vote flow

.eslintignore

@@ -15,3 +15,9 @@ dist-ssr
 *.local
 pnpm-workspace.yaml
 pnpm-lock.yaml
+
+# Ignore backend autogenerated files
+backend/abis
+backend/artifacts
+backend/cache
+backend/src

.github/workflows/ci-build.yml

@@ -43,6 +43,9 @@ jobs:
             ${{ runner.os }}-pnpm-store-
       - name: Install
         run: pnpm install --frozen-lockfile --ignore-scripts
+      # Required for FE build, since it depends on autogenerated files
+      - name: Build backend app
+        run: pnpm --filter @oasisprotocol/dapp-voting-backend build
       - name: Build frontend app
         run: pnpm --filter @oasisprotocol/dapp-voting-frontend build
       - name: Run tests for backend app

.github/workflows/ci-lint.yml

@@ -52,6 +52,9 @@ jobs:
             ${{ runner.os }}-pnpm-store-
       - name: Install
         run: pnpm install --frozen-lockfile --ignore-scripts
+      # Required for FE build, since it depends on autogenerated files
+      - name: Build backend app
+        run: pnpm --filter @oasisprotocol/dapp-voting-backend build
       - name: Install gitlint
         run: |
           python -m pip install gitlint

.github/workflows/frontend-deploy.yml

@@ -52,6 +52,9 @@ jobs:
             ${{ runner.os }}-pnpm-store-
       - name: Install
         run: pnpm install --frozen-lockfile --ignore-scripts
+      # Required for FE build, since it depends on autogenerated files
+      - name: Build backend app
+        run: pnpm --filter @oasisprotocol/dapp-voting-backend build
       - name: Build frontend app
         run: pnpm --filter @oasisprotocol/dapp-voting-frontend build
       # https://github.com/actions/upload-pages-artifact#example-permissions-fix-for-linux

frontend/.env

@@ -0,0 +1,17 @@
+VITE_NETWORK=23295
+VITE_WEB3_GATEWAY=https://testnet.sapphire.oasis.dev
+
+# AllowAllACL tx 0x827ba96e652e4ca0776c279dd74585d6bad0988b34cd591d8dbb268c2677f0e6
+VITE_CONTRACT_ACL_ALLOWALL=0x8e29375FE5Db7eBb1b5eF24B7D397bBF0B01De09
+
+# NativeBalanceACL tx 0x827ba96e652e4ca0776c279dd74585d6bad0988b34cd591d8dbb268c2677f0e6
+VITE_CONTRACT_ACL_NATIVEBALANCE=0x38FF18441b182ac603aADCA8ADDb257c6F5d103d
+
+# PollManager tx 0x8913a698a0686c273425e448a1a310a3a2be6fa2a68d431a2a3af8dae9233417
+VITE_CONTRACT_POLLMANAGER=0xdAB5845136b3102E63023BB2A2405cb71608605d
+
+# IPollManagerACL used by PollManager
+VITE_CONTRACT_POLLMANAGER_ACL=0x8e29375FE5Db7eBb1b5eF24B7D397bBF0B01De09
+
+# Proposal ID for poll pre-created poll
+VITE_PROPOSAL_ID=0x2b4a9a515b37e6bc762a37db6b97a7c28d161c7ec1ba5ba7aae7924e5eeecf4c

frontend/.env.production

@@ -0,0 +1,8 @@
+VITE_NETWORK=23294
+VITE_WEB3_GATEWAY=https://sapphire.oasis.io
+
+VITE_CONTRACT_ACL_ALLOWALL=
+VITE_CONTRACT_ACL_NATIVEBALANCE=
+VITE_CONTRACT_POLLMANAGER=
+VITE_CONTRACT_POLLMANAGER_ACL=
+VITE_PROPOSAL_ID=

frontend/package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@metamask/detect-provider": "^2.0.0",
     "@metamask/jazzicon": "^2.0.0",
+    "@oasisprotocol/dapp-voting-backend": "workspace:^",
     "@oasisprotocol/sapphire-paratime": "^1.3.2",
     "@phosphor-icons/core": "^2.0.8",
     "ethers": "^6.11.1",

frontend/src/components/Alert/index.module.css

@@ -1,5 +1,4 @@
 .alert {
-  min-height: 688px;
   text-align: center;
 
   h2 {

frontend/src/components/Alert/index.tsx

@@ -42,15 +42,16 @@ const alertTypeClassMap: Record<AlertType, string> = {
 interface Props extends PropsWithChildren {
   type: AlertType
   actions?: ReactElement
+  headerText?: string
 }
 
-export const Alert: FC<Props> = ({ children, type, actions }) => {
+export const Alert: FC<Props> = ({ children, type, actions, headerText }) => {
   const { header, icon } = alertTypeValuesMap[type]
 
   return (
     <Card className={alertTypeClassMap[type]}>
       <div className={classes.alert}>
-        <h2>{header}</h2>
+        <h2>{headerText ?? header}</h2>
         <p>{children}</p>
         <div className={classes.icon}>{icon}</div>
         <div className={classes.actions}>{actions}</div>

frontend/src/components/Button/index.module.css

@@ -61,6 +61,22 @@
   }
 }
 
+.buttonText {
+  &.buttonPrimary,
+  &.buttonSecondary {
+    background-color: transparent;
+    color: var(--old-silver);
+    border: transparent;
+    text-decoration: underline;
+    text-underline-offset: 0.5rem;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 137%;
+    letter-spacing: -0.03em;
+    padding: 0.5rem;
+  }
+}
+
 .buttonDisabled {
   cursor: not-allowed;
   background-color: var(--bright-gray);

frontend/src/components/Button/index.tsx

@@ -4,7 +4,7 @@ import { StringUtils } from '../../utils/string.utils.ts'
 
 type ButtonSize = 'small' | 'medium'
 type ButtonColor = 'primary' | 'secondary'
-type ButtonVariant = 'solid' | 'outline'
+type ButtonVariant = 'solid' | 'outline' | 'text'
 
 interface Props extends PropsWithChildren {
   disabled?: boolean
@@ -30,6 +30,7 @@ const colorMap: Record<ButtonColor, string> = {
 const variantMap: Record<ButtonVariant, string> = {
   solid: classes.buttonSolid,
   outline: classes.buttonOutline,
+  text: classes.buttonText,
 }
 
 export const Button: FC<Props> = ({

frontend/src/components/Card/index.module.css

@@ -4,6 +4,7 @@
   margin: 0 auto;
   width: 100%;
   max-width: 876px;
+  min-height: 688px;
   padding: 2.25rem 4.6875rem 1.875rem;
   border-radius: 12px;
   background: var(--white);

frontend/src/components/Layout/index.tsx

@@ -1,10 +1,47 @@
-import { FC } from 'react'
-import { Outlet } from 'react-router-dom'
+import { FC, useEffect, useState } from 'react'
+import { Outlet, useNavigate } from 'react-router-dom'
 import classes from './index.module.css'
 import { LogoIcon } from '../icons/LogoIcon'
 import { ConnectWallet } from '../ConnectWallet'
+import { useWeb3 } from '../../hooks/useWeb3.ts'
+import { Alert } from '../Alert'
 
 export const Layout: FC = () => {
+  const {
+    state: { isVoidSignerConnected },
+    getPoll,
+  } = useWeb3()
+  const navigate = useNavigate()
+
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    if (!isVoidSignerConnected) return
+
+    const init = async () => {
+      const {
+        active,
+        params: { closeTimestamp, numChoices },
+      } = await getPoll()
+
+      if (numChoices !== 3n) {
+        console.warn('[numChoices] Unexpected number of poll choices, this dApp may not behave as expected!')
+      }
+
+      setIsLoading(false)
+
+      if (!active) {
+        navigate('/results')
+        console.log('closeTimestamp', closeTimestamp)
+      } else {
+        navigate('/')
+      }
+    }
+
+    init()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isVoidSignerConnected])
+
   return (
     <div className={classes.layout}>
       <main className={classes.main}>
@@ -16,7 +53,10 @@ export const Layout: FC = () => {
           <h1>Oasis Mascot</h1>
         </section>
         <section>
-          <Outlet />
+          {isLoading && (
+            <Alert headerText="Please wait" type="loading" actions={<span>Fetching poll...</span>} />
+          )}
+          {!isLoading && <Outlet />}
         </section>
       </main>
     </div>

frontend/src/constants/config.ts

@@ -20,4 +20,58 @@ export const NETWORKS: Map<bigint, NetworkConfiguration> = new Map([
   ],
 ])
 
+export const MAX_GAS_LIMIT = 100000n
+
+interface PollChoice {
+  name: string
+  description: string
+  imagePath: string
+}
+
+/**
+ * This array indexes correspond to the matching choiceId of the poll
+ * Desert Owl = 0
+ * Capybara = 1
+ * Fennec Fox = 2
+ */
+export const POLL_CHOICES: readonly PollChoice[] = Object.freeze([
+  {
+    name: 'Desert Owl',
+    description: 'Lorem ipsum dolor sit amet. A repellendus illo.',
+    imagePath: 'https://fakeimg.pl/182x175',
+  },
+  {
+    name: 'Capybara',
+    description: 'Lorem ipsum dolor sit amet. A repellendus illo.',
+    imagePath: 'https://fakeimg.pl/182x175',
+  },
+  {
+    name: 'Fennec Fox',
+    description: 'Lorem ipsum dolor sit amet. A repellendus illo.',
+    imagePath: 'https://fakeimg.pl/182x175',
+  },
+])
+
 export const METAMASK_HOME_PAGE = 'https://metamask.io/'
+
+const {
+  VITE_NETWORK: ENV_VITE_NETWORK,
+  VITE_WEB3_GATEWAY,
+  VITE_CONTRACT_ACL_ALLOWALL,
+  VITE_CONTRACT_ACL_NATIVEBALANCE,
+  VITE_CONTRACT_POLLMANAGER,
+  VITE_CONTRACT_POLLMANAGER_ACL,
+  VITE_PROPOSAL_ID,
+} = import.meta.env
+
+const VITE_NETWORK = BigInt(ENV_VITE_NETWORK) ?? 0n
+
+export {
+  VITE_NETWORK,
+  VITE_WEB3_GATEWAY,
+  VITE_CONTRACT_ACL_ALLOWALL,
+  VITE_CONTRACT_ACL_NATIVEBALANCE,
+  VITE_CONTRACT_POLLMANAGER,
+  VITE_CONTRACT_POLLMANAGER_ACL,
+  VITE_PROPOSAL_ID,
+}

frontend/src/index.css

@@ -11,6 +11,7 @@
   --medium-blue: #0d00d2;
   --table-border-light: rgba(143, 142, 223, 0.39);
   --table-border-dark: rgba(36, 38, 41, 0.8);
+  --old-silver: #858486;
 }
 
 *,

frontend/src/pages/HomePage/index.module.css

@@ -26,6 +26,16 @@
   margin-bottom: 2rem;
 }
 
+.voteBtnLabel {
+  cursor: pointer;
+  user-select: none;
+}
+
+.voteBtnLabelDisabled {
+  cursor: not-allowed;
+  user-select: none;
+}
+
 .cardFooterText {
   font-size: 14px;
   font-weight: 500;
@@ -34,3 +44,13 @@
   text-align: center;
   color: var(--palatinate-blue);
 }
+
+.insufficientBalanceAlertActions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+
+  > * {
+    align-self: center;
+  }
+}