Merge pull request #116 from oasisprotocol/csillag/design-updates-for…

…-video

Small design updates based on feedback from the video team

frontend/.env.development

@@ -1 +1,2 @@
 VITE_APP_ROOT_URL=http://localhost:5173/
+VITE_TUTORIAL_URL=https://www.youtube.com/live/1f_0h8qeJ-w?si=9ViH8ENERuUe6Rx3&t=1441

frontend/.env.production

@@ -1,3 +1,4 @@
 VITE_NETWORK=23294
 VITE_WEB3_GATEWAY=https://sapphire.oasis.io
 VITE_APP_ROOT_URL=https://vote.oasis.io
+VITE_TUTORIAL_URL=https://www.youtube.com/live/1f_0h8qeJ-w?si=9ViH8ENERuUe6Rx3&t=1441

frontend/.env.staging

@@ -26,3 +26,4 @@ VITE_CONTRACT_TESTTOKEN_TX=0xd9bb82833b2b26cc9305808a39e8a08b93eac403ba22fa42fc0
 VITE_CONTRACT_TESTTOKEN=0x09aD7F70B3CFa12cFF1084d004feA41B9a9e80A1
 VITE_CONTRACT_LIB_CALLDATAENCRYPTION_TX=0x1e40062f4e4298a793abce9c22e13b9e16e859053d6e8e64a73342a86d53edf4
 VITE_CONTRACT_LIB_CALLDATAENCRYPTION=0xB22c17AC88FD36820eC71f828b0b6Ae372d0FBB5
+VITE_TUTORIAL_URL=https://www.youtube.com/live/1f_0h8qeJ-w?si=9ViH8ENERuUe6Rx3&t=1441

frontend/src/components/ConnectWallet/index.tsx

@@ -94,7 +94,7 @@ export const ConnectWallet: FC<Props> = ({ mobileSticky, avoidButtonClasses = fa
           disabled={isLoading}
           onClick={handleConnectWallet}
         >
-          <label className={classes.connectWalletBtnLabel}>Connect wallet</label>
+          <label className={classes.connectWalletBtnLabel}>Connect Wallet</label>
         </Button>
       )}
       {isConnected && userAddress && chainId && isHomeChain && (

frontend/src/constants/config.ts

@@ -18,6 +18,7 @@ const {
   VITE_IPFS_GATEWAY,
   VITE_CONTRACT_GASLESSVOTING,
   VITE_APP_ROOT_URL,
+  VITE_TUTORIAL_URL,
 } = import.meta.env
 
 const VITE_NETWORK_BIGINT: bigint = BigInt(ENV_VITE_NETWORK) ?? 0n
@@ -48,6 +49,7 @@ export {
   // VITE_REACT_APP_BUILD_DATETIME,
   VITE_PINATA_JWT,
   VITE_IPFS_GATEWAY,
+  VITE_TUTORIAL_URL,
 }
 
 export const MIN_COMPLETION_TIME_MINUTES = 3

frontend/src/pages/LandingPage/index.tsx

@@ -3,13 +3,16 @@ import { Layout } from '../../components/Layout'
 import { ConnectWallet } from '../../components/ConnectWallet'
 import classes from './index.module.css'
 import { Button } from '../../components/Button'
-import { useNavigate } from 'react-router-dom'
-import { appName } from '../../constants/config'
+import { Link, useNavigate } from 'react-router-dom'
+import { appName, VITE_TUTORIAL_URL } from '../../constants/config'
 import { getPollPath } from '../../utils/path.utils'
 
 export const LandingPage: FC = () => {
   const navigate = useNavigate()
   const openDemo = useCallback(() => navigate(getPollPath('demo')), [])
+  const openTutorial = () => {
+    console.log('Should open tutorial')
+  }
 
   return (
     <Layout variation={'landing'}>
@@ -21,8 +24,15 @@ export const LandingPage: FC = () => {
         interaction with the polling system.
         <div className={'niceLineWide noWrap'}>
           <Button color={'secondary'} variant={'outline'} size={'small'} onClick={openDemo}>
-            View Demo
+            Use Demo
           </Button>
+          {VITE_TUTORIAL_URL && (
+            <Link to={VITE_TUTORIAL_URL} target={'_blank'}>
+              <Button color={'secondary'} variant={'outline'} size={'small'} onClick={openTutorial}>
+                Watch Tutorial
+              </Button>
+            </Link>
+          )}
           <ConnectWallet mobileSticky={false} avoidButtonClasses={true} />
         </div>
       </div>