From ebd147e323aab21ee46880dc2f15cf8a1f6f7e18 Mon Sep 17 00:00:00 2001
From: Kristof Csillag <kristof@oasisprotocol.org>
Date: Mon, 2 Dec 2024 18:38:28 +0100
Subject: [PATCH] Small design updates based on feedback from the video team

---
 frontend/.env.development                       |  1 +
 frontend/.env.production                        |  1 +
 frontend/.env.staging                           |  1 +
 frontend/src/components/ConnectWallet/index.tsx |  2 +-
 frontend/src/constants/config.ts                |  2 ++
 frontend/src/pages/LandingPage/index.tsx        | 16 +++++++++++++---
 6 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/frontend/.env.development b/frontend/.env.development
index 83ec0aa..a163bea 100644
--- a/frontend/.env.development
+++ b/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
\ No newline at end of file
diff --git a/frontend/.env.production b/frontend/.env.production
index 52854db..69f856b 100644
--- a/frontend/.env.production
+++ b/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
\ No newline at end of file
diff --git a/frontend/.env.staging b/frontend/.env.staging
index 3155bd9..e4ee91a 100644
--- a/frontend/.env.staging
+++ b/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
\ No newline at end of file
diff --git a/frontend/src/components/ConnectWallet/index.tsx b/frontend/src/components/ConnectWallet/index.tsx
index 739255f..d987fb6 100644
--- a/frontend/src/components/ConnectWallet/index.tsx
+++ b/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 && (
diff --git a/frontend/src/constants/config.ts b/frontend/src/constants/config.ts
index ac051f0..3cab5ee 100644
--- a/frontend/src/constants/config.ts
+++ b/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
diff --git a/frontend/src/pages/LandingPage/index.tsx b/frontend/src/pages/LandingPage/index.tsx
index c0ab763..6993f21 100644
--- a/frontend/src/pages/LandingPage/index.tsx
+++ b/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>