feat: add demo account button on onboarding

packages/webapp/src/containers/Setup/SetupLeftSection.module.scss

@@ -0,0 +1,22 @@
+.demoButton {
+  width: 100%;
+  margin-bottom: 2rem;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.75);
+  border: 1px solid rgb(255, 255, 255, 0.3);
+  padding: 10px;
+  font-size: 13px;
+  font-weight: 500;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+
+  &:hover {
+    color: rgba(255, 255, 255, 0.95);
+    border: 1px solid rgb(255, 255, 255, 0.6);   
+  }
+}
+.demoButtonLabel{
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 13px;
+}

packages/webapp/src/containers/Setup/SetupLeftSection.tsx

@@ -1,9 +1,13 @@
 // @ts-nocheck
 import React from 'react';
-import { Icon, For, FormattedMessage as T } from '@/components';
+import { Icon, For, FormattedMessage as T, Stack } from '@/components';
 
 import { getFooterLinks } from '@/constants/footerLinks';
 import { useAuthActions } from '@/hooks/state';
+import style from './SetupLeftSection.module.scss';
+import { Text } from '@blueprintjs/core';
+import { Config } from '@/config';
+import { useHistory } from 'react-router-dom';
 
 /**
  * Footer item link.
@@ -25,8 +29,21 @@ function SetupLeftSectionFooter() {
   // Retrieve the footer links.
   const footerLinks = getFooterLinks();
 
+  const handleDemoBtnClick = () => {
+    window.open(Config.oneClickDemo.demoUrl);
+  };
+
   return (
     <div className={'content__footer'}>
+      {Config.oneClickDemo.demoUrl && (
+        <Stack spacing={16}>
+          <Text className={style.demoButtonLabel}>Not Now?</Text>
+          <button className={style.demoButton} onClick={handleDemoBtnClick}>
+            Try Demo Account
+          </button>
+        </Stack>
+      )}
+
       <div className={'content__links'}>
         <For render={FooterLinkItem} of={footerLinks} />
       </div>