feat: terms of use (#141)

Author: dan-ziv

.env.development

@@ -1,3 +1,4 @@
+REACT_APP_URL=https://devnet-goerli.starkgate.starknet.io
 REACT_APP_AUTO_CONNECT=false
 # 20 seconds
 REACT_APP_POLL_BLOCK_NUMBER_INTERVAL=20000
@@ -8,5 +9,6 @@ REACT_APP_ETHERSCAN_URL=https://goerli.etherscan.io
 REACT_APP_VOYAGER_URL=https://goerli.voyager.online
 REACT_APP_LOCAL_STORAGE_TRANSFERS_LOG_KEY=STARKGATE_TRANSFERS
 REACT_APP_LOCAL_STORAGE_ONBOARDING_TIMESTAMP_KEY=STARKGATE_ONBOARDING_TIMESTAMP
+REACT_APP_LOCAL_STORAGE_ACCEPT_TERMS=STARKGATE_ACCEPT_TERMS
 REACT_APP_ONBOARDING_MODAL_TIMEOUT_HRS=24
 REACT_APP_SUPPORTED_TOKENS=ETH,WBTC,USDC,USDT,DAI,SLF

.env.production

@@ -1,3 +1,4 @@
+REACT_APP_URL=https://starkgate.starknet.io
 REACT_APP_AUTO_CONNECT=false
 # 30 seconds
 REACT_APP_POLL_BLOCK_NUMBER_INTERVAL=30000
@@ -8,5 +9,6 @@ REACT_APP_ETHERSCAN_URL=https://etherscan.io
 REACT_APP_VOYAGER_URL=https://voyager.online
 REACT_APP_LOCAL_STORAGE_TRANSFERS_LOG_KEY=STARKGATE_TRANSFERS
 REACT_APP_LOCAL_STORAGE_ONBOARDING_TIMESTAMP_KEY=STARKGATE_ONBOARDING_TIMESTAMP
+REACT_APP_LOCAL_STORAGE_ACCEPT_TERMS=STARKGATE_ACCEPT_TERMS
 REACT_APP_ONBOARDING_MODAL_TIMEOUT_HRS=24
 REACT_APP_SUPPORTED_TOKENS=ETH

.env.testing

@@ -1,3 +1,4 @@
+REACT_APP_URL=https://goerli.starkgate.starknet.io
 REACT_APP_AUTO_CONNECT=false
 # 20 seconds
 REACT_APP_POLL_BLOCK_NUMBER_INTERVAL=20000
@@ -7,4 +8,5 @@ REACT_APP_STARKNET_CONTRACT_ADDRESS=0xde29d060D45901Fb19ED6C6e959EB22d8626708e
 REACT_APP_ETHERSCAN_URL=https://goerli.etherscan.io
 REACT_APP_VOYAGER_URL=https://goerli.voyager.online
 REACT_APP_LOCAL_STORAGE_TRANSFERS_LOG_KEY=STARKGATE_TRANSFERS
+REACT_APP_LOCAL_STORAGE_ACCEPT_TERMS=STARKGATE_ACCEPT_TERMS
 REACT_APP_SUPPORTED_TOKENS=ETH,WBTC,USDC,USDT,DAI,SLF

package.json

@@ -65,6 +65,8 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hot-toast": "^2.2.0",
+    "react-router": "^6.3.0",
+    "react-router-dom": "6",
     "react-scripts": "4.0.3",
     "starknet": "^3.7.0",
     "use-async-memo": "^1.2.3",

src/App.js

@@ -1,12 +1,39 @@
 import React from 'react';
+import {Route, Routes, useLocation} from 'react-router-dom';
 
 import styles from './App.module.scss';
-import {Footer, Header, Main} from './components/Containers';
+import {Footer, Header} from './components/Containers';
+import {StyledBackground} from './components/UI';
+import {useApp} from './providers/AppProvider';
+import {Faq, Bridge, Login, ProtectedRoute, Terms} from './routes';
 
-export const App = () => (
-  <div className={styles.app}>
-    <Header />
-    <Main />
-    <Footer />
-  </div>
-);
+export const App = () => {
+  const {isLoggedIn, isAcceptTerms} = useApp();
+  const {pathname} = useLocation();
+  const informativeRoutes = ['/terms', '/faq'];
+
+  return (
+    <div className={styles.app}>
+      <Header />
+      <StyledBackground withLightAccent={!informativeRoutes.includes(pathname)}>
+        <Routes>
+          <Route
+            element={
+              <ProtectedRoute
+                isAllowed={isLoggedIn && isAcceptTerms}
+                redirectPath={isLoggedIn ? '/terms' : '/login'}
+              >
+                <Bridge />
+              </ProtectedRoute>
+            }
+            path="/"
+          />
+          <Route element={<Terms />} path="/terms" />
+          <Route element={<Login />} path="/login" />
+          <Route element={<Faq />} path="/faq" />
+        </Routes>
+      </StyledBackground>
+      <Footer />
+    </div>
+  );
+};

src/App.module.scss

@@ -1,9 +1,4 @@
 .app {
-  overflow: hidden;
-  flex-direction: column;
   display: flex;
-  background-image: url('assets/img/stars.png');
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center center;
+  flex-direction: column;
 }

src/analytics/track-event.js

@@ -5,7 +5,6 @@ export const TrackEvent = {
   SELECT_TOKEN_MENU: 'SELECT_TOKEN_MENU',
   ACCOUNT_MENU: 'ACCOUNT_MENU',
   TRANSFER_MENU: 'TRANSFER_MENU',
-  FAQ_MENU: 'FAQ_MENU',
 
   /**
    * Transfer menu
@@ -55,6 +54,16 @@ export const TrackEvent = {
     LOGIN_ERROR: 'LOGIN_SCREEN/login_error'
   },
 
+  /**
+   * Terms screen
+   */
+  TERMS_SCREEN: 'TERMS_SCREEN',
+  TERMS: {
+    ACCEPT_CLICK: 'TERMS_SCREEN/accept_click'
+  },
+
+  FAQ_SCREEN: 'FAQ_SCREEN',
+
   /**
    * Tabs
    */

src/components/Containers/Footer/Footer.js

@@ -10,9 +10,7 @@ export const Footer = () => {
 
   return !isMobile(breakpoint) ? (
     <footer className={styles.footer}>
-      <div className={styles.copyright}>
-        <center>{RIGHTS_TXT}</center>
-      </div>
+      <div className={styles.copyright}>{RIGHTS_TXT}</div>
     </footer>
   ) : null;
 };

src/components/Containers/Footer/Footer.module.scss

@@ -7,12 +7,20 @@ $copyright-color: $--color-beta;
   font-size: 13px;
   height: #{$height}px;
   border-top: 1px solid transparent;
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+  background: transparent;
 
   .copyright {
     color: $copyright-color;
-    display: flex;
     font-size: 12px;
     line-height: 24px;
-    margin: auto;
   }
 }

src/components/Containers/Header/Header.js

@@ -1,45 +1,65 @@
 import React from 'react';
+import {useNavigate, useLocation} from 'react-router-dom';
 import useBreakpoint from 'use-breakpoint';
 
 import {track} from '../../../analytics';
 import {ReactComponent as StarkGateLogo} from '../../../assets/img/starkgate.svg';
 import constants from '../../../config/constants';
 import {Breakpoint} from '../../../enums';
 import {useColors} from '../../../hooks';
+import {useLogin} from '../../../providers/AppProvider';
 import {useMenu} from '../../../providers/MenuProvider';
 import {useIsL1, useIsL2} from '../../../providers/TransferProvider';
 import {useL1Wallet, useL2Wallet, useWallets} from '../../../providers/WalletsProvider';
 import utils from '../../../utils';
 import {Tab, WalletButton} from '../../UI';
 import styles from './Header.module.scss';
-import {CHAIN_TXT, TAB_DISCORD_TXT, TAB_FAQ_TXT} from './Header.strings';
+import {CHAIN_TXT, TAB_DISCORD_TXT, TAB_FAQ_TXT, TAB_TERMS_TXT} from './Header.strings';
 
 const {DISCORD_LINK_URL} = constants;
 
 export const Header = () => {
-  const {chainName, isConnected} = useWallets();
-  const {showAccountMenu, showTransferMenu, showFaqMenu} = useMenu();
+  const navigate = useNavigate();
+  const {pathname} = useLocation();
+  const {chainName} = useWallets();
+  const {showAccountMenu, showTransferMenu} = useMenu();
   const [, swapToL1] = useIsL1();
   const [, swapToL2] = useIsL2();
   const {account: l1Account, isConnected: isL1AccountConnected, config: l1Config} = useL1Wallet();
   const {account: l2Account, isConnected: isL2AccountConnected, config: l2Config} = useL2Wallet();
   const {breakpoint} = useBreakpoint(Breakpoint);
   const {colorDiscord, colorWhiteOp50} = useColors();
+  const {isLoggedIn} = useLogin();
+
+  const maybeNavigateToIndex = () => {
+    pathname !== '/' && navigate('/');
+  };
 
   const onL2WalletButtonClick = () => {
+    maybeNavigateToIndex();
     swapToL2();
     showAccountMenu();
   };
 
   const onL1WalletButtonClick = () => {
+    maybeNavigateToIndex();
     swapToL1();
     showAccountMenu();
   };
 
   const onLogoClick = () => {
+    maybeNavigateToIndex();
     showTransferMenu();
   };
 
+  const onTabFaqClick = () => {
+    navigate('faq', {replace: true});
+  };
+
+  const onTabTermsClick = () => {
+    navigate('terms', {replace: true});
+  };
+
   const onTabDiscordClick = () => {
     track(TrackEvent.DISCORD_TAB_CLICK);
     utils.browser.openInNewTab(DISCORD_LINK_URL);
@@ -51,13 +71,14 @@ export const Header = () => {
         <div className={utils.object.toClasses(styles.logo, 'row')} onClick={onLogoClick}>
           <StarkGateLogo />
         </div>
-        {isConnected && (
+        {isLoggedIn && (
           <div className={utils.object.toClasses(styles.chain, 'row')}>{CHAIN_TXT(chainName)}</div>
         )}
       </div>
 
       <div className={utils.object.toClasses(styles.right, 'row')}>
-        <Tab color={colorWhiteOp50} label={TAB_FAQ_TXT} onClick={showFaqMenu} />
+        <Tab color={colorWhiteOp50} label={TAB_TERMS_TXT} onClick={onTabTermsClick} />
+        <Tab color={colorWhiteOp50} label={TAB_FAQ_TXT} onClick={onTabFaqClick} />
         <Tab color={colorDiscord} label={TAB_DISCORD_TXT} onClick={onTabDiscordClick} />
         {isL1AccountConnected && (
           <WalletButton

src/components/Containers/Header/Header.module.scss

@@ -8,12 +8,17 @@ $chain-color: $--color-white-1;
   height: #{$height}px;
   border-bottom: 1px solid transparent;
   justify-content: space-between;
-  padding: 0 40px;
   background: $background-color;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
   transition: 0.3s ease-in-out;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  overflow: hidden;
 
   .left {
+    padding: 30px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -39,6 +44,7 @@ $chain-color: $--color-white-1;
   }
 
   .right {
+    padding: 30px;
     display: flex;
     flex-direction: row;
 
@@ -51,7 +57,6 @@ $chain-color: $--color-white-1;
 
   &.mobile {
     height: #{$height - 10}px;
-    padding: 0 30px;
 
     .left {
       .logo {

src/components/Containers/Header/Header.strings.js

@@ -7,4 +7,6 @@ export const CHAIN_TXT = chainName =>
 
 export const TAB_DISCORD_TXT = utils.getTranslation('containers.header.tab_discord_txt');
 
-export const TAB_FAQ_TXT = utils.getTranslation('containers.header.tab_faq');
+export const TAB_FAQ_TXT = utils.getTranslation('containers.header.tab_faq_txt');
+
+export const TAB_TERMS_TXT = utils.getTranslation('containers.header.tab_terms_txt');

src/components/Containers/Main/Main.js

@@ -1,3 +1,2 @@
-export * from './Main/Main';
 export * from './Footer/Footer';
 export * from './Header/Header';