From d2fcfb67e32347d2ec440cf888aa4a8ba9979285 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 30 Apr 2024 20:29:31 +0100
Subject: [PATCH] update getting started section

---
 .../src/app/tabs/locales/en/home.json         |   2 +-
 .../src/lib/components/homeTabGetStarted.tsx  |  88 +++++++++++++-
 .../lib/components/homeTabGettingStarted.tsx  | 109 ------------------
 .../home-tab/src/lib/remix-ui-home-tab.tsx    |   3 +-
 4 files changed, 85 insertions(+), 117 deletions(-)
 delete mode 100644 libs/remix-ui/home-tab/src/lib/components/homeTabGettingStarted.tsx

diff --git a/apps/remix-ide/src/app/tabs/locales/en/home.json b/apps/remix-ide/src/app/tabs/locales/en/home.json
index be2804d909..6bb00dfdc9 100644
--- a/apps/remix-ide/src/app/tabs/locales/en/home.json
+++ b/apps/remix-ide/src/app/tabs/locales/en/home.json
@@ -29,7 +29,7 @@
   "home.dgitPluginDesc": "Add source control to your projects.",
   "home.oneClickDappDesc": "Quickly generate smart contract interfaces",
   "home.getStarted": "Get Started",
-  "home.projectTemplates": "Project Templates",
+  "home.projectTemplates": "Explore. Prototype. Create.",
   "home.blankTemplateDesc": "Create an empty workspace.",
   "home.remixDefaultTemplateDesc": "Create a workspace with sample files.",
   "home.ozerc20TemplateDesc": "Create an ERC20 token by importing OpenZeppelin library.",
diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx
index f0657222e3..9a465e09ed 100644
--- a/libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx
@@ -8,6 +8,7 @@ import WorkspaceTemplate from './workspaceTemplate'
 import 'react-multi-carousel/lib/styles.css'
 import CustomNavButtons from './customNavButtons'
 import { appPlatformTypes, platformContext } from '@remix-ui/app'
+import { CustomTooltip } from '@remix-ui/helper'
 
 declare global {
   interface Window {
@@ -19,12 +20,65 @@ interface HomeTabGetStartedProps {
   plugin: any
 }
 
-function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
+type WorkspaceTemplate = {
+  gsID: string
+  workspaceTitle: string
+  description: string
+  projectLogo: string
+  templateName: string
+}
+
+const workspaceTemplates: WorkspaceTemplate[] = [
+  {
+    gsID: 'sUTLogo',
+    workspaceTitle: 'Playground',
+    description: 'Create a new project using this template.',
+    projectLogo: 'assets/img/remixverticaltextLogo.png',
+    templateName: 'remixDefault'
+  },
+  {
+    gsID: 'sUTLogo',
+    workspaceTitle: 'Circom',
+    description: 'Create a new ZK Project with Circom using this template.',
+    projectLogo: 'assets/img/circom.webp',
+    templateName: ''
+  },
+  {
+    gsID: 'sUTLogo',
+    workspaceTitle: 'Uniswap',
+    description: 'Create a new MultiSig wallet using this template.',
+    projectLogo: 'assets/img/gnosissafeLogo.png',
+    templateName: ''
+  },
+  {
+    gsID: 'sUTLogo',
+    workspaceTitle: 'ERC20',
+    description: 'Create a new ERC20 token using this template.',
+    projectLogo: 'assets/img/oxprojectLogo.png',
+    templateName: ''
+  },
+  {
+    gsID: 'sUTLogo',
+    workspaceTitle: 'NFT / ERC721',
+    description: 'Create a new ERC721 token using this template.',
+    projectLogo: 'assets/img/openzeppelinLogo.png',
+    templateName: ''
+  },
+  {
+    gsID: 'sUTLogo',
+    workspaceTitle: 'MultiSig',
+    description: 'Create a new MultiSig wallet using this template.',
+    projectLogo: 'assets/img/gnosissafeLogo.png',
+    templateName: ''
+  },
+]
+
+function HomeTabGetStarted({plugin}: HomeTabGetStartedProps) {
   const platform = useContext(platformContext)
   const themeFilter = useContext(ThemeContext)
+  const intl = useIntl()
   const carouselRef = useRef<any>({})
   const carouselRefDiv = useRef(null)
-  const intl = useIntl()
 
   useEffect(() => {
     document.addEventListener('wheel', handleScroll)
@@ -92,12 +146,12 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
 
   return (
     <div className="pl-2" id="hTGetStartedSection">
-      <label style={{ fontSize: '1.2rem' }}>
+      <label className="pt-3" style={{fontSize: '1.2rem'}}>
         <FormattedMessage id="home.projectTemplates" />
       </label>
       <div ref={carouselRefDiv} className="w-100 d-flex flex-column">
         <ThemeContext.Provider value={themeFilter}>
-          <Carousel
+          {/* <Carousel
             ref={carouselRef}
             focusOnSelect={true}
             customButtonGroup={<CustomNavButtons next={undefined} previous={undefined} goToSlide={undefined} parent={carouselRef} />}
@@ -175,7 +229,31 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
               projectLogo="assets/img/remixverticaltextLogo.png"
               callback={() => createWorkspace("remixDefault")}
             />
-          </Carousel>
+          </Carousel> */}
+          <div className="pt-2">
+            <div className="d-flex flex-row align-items-center mb-3 flex-nowrap">
+              {workspaceTemplates.slice(0, 3).map((template, index) => (
+                <CustomTooltip tooltipText={template.description} tooltipId={template.gsID} tooltipClasses="text-nowrap" tooltipTextClasses="border bg-light text-dark p-1 pr-3" placement="top-start">
+                  <button key={index} className={index === 0 ? "btn btn-primary border p-2 text-nowrap mr-3" : index === workspaceTemplates.length - 1 ? "btn border p-2 text-nowrap mr-2" : "btn border p-2 text-nowrap mr-3"}>{template.workspaceTitle}</button>
+                </CustomTooltip>
+              ))}
+            </div>
+            <div className="d-flex flex-row align-items-center mb-3 flex-nowrap">
+              {workspaceTemplates.slice(3, workspaceTemplates.length).map((template, index) => (
+                <CustomTooltip tooltipText={template.description} tooltipId={template.gsID} tooltipClasses="text-nowrap" tooltipTextClasses="border bg-light text-dark p-1 pr-3" placement="bottom-start">
+                  <button
+                    key={index}
+                    className={"btn border p-2 text-nowrap mr-3"}
+                    onClick={() => {
+                      createWorkspace(template.templateName)
+                    }}
+                  >
+                    {template.workspaceTitle}
+                  </button>
+                </CustomTooltip>
+              ))}
+            </div>
+          </div>
         </ThemeContext.Provider>
       </div>
     </div>
diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTabGettingStarted.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTabGettingStarted.tsx
deleted file mode 100644
index c49bcadf23..0000000000
--- a/libs/remix-ui/home-tab/src/lib/components/homeTabGettingStarted.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import React, {useEffect, useRef, useContext} from 'react'
-import {useIntl, FormattedMessage } from 'react-intl'
-import {TEMPLATE_NAMES,TEMPLATE_METADATA} from '@remix-ui/workspace'
-import {ThemeContext} from '../themeContext'
-import Carousel from 'react-multi-carousel'
-import WorkspaceTemplate from './workspaceTemplate'
-import 'react-multi-carousel/lib/styles.css'
-import CustomNavButtons from './customNavButtons'
-import { appPlatformTypes, platformContext } from '@remix-ui/app'
-
-
-export interface HomeTabGettingStartedProps {
-  plugin: any
-}
-
-type WorkspaceTemplate = {
-  gsID: string
-  workspaceTitle: string
-  description: string
-  projectLogo: string
-  callback: () => void
-}
-
-const workspaceTemplates: WorkspaceTemplate[] = [
-  {
-    gsID: 'sUTLogo',
-    workspaceTitle: 'MultiSig',
-    description: 'Create a new MultiSig wallet using this template.',
-    projectLogo: 'assets/img/gnosissafeLogo.png',
-    callback: () => createWorkspace('gnosisSafeMultisig')
-  },
-  {
-    gsID: 'sUTLogo',
-    workspaceTitle: 'ERC20',
-    description: 'Create a new ERC20 token using this template.',
-    projectLogo: 'assets/img/oxprojectLogo.png',
-    callback: () => createWorkspace('zeroxErc20')
-  },
-  {
-    gsID: 'sourcifyLogo',
-    workspaceTitle: 'ERC20',
-    description: 'Create a new ERC20 token using this template.',
-    projectLogo: 'assets/img/openzeppelinLogo.png',
-    callback: () => createWorkspace('ozerc20')
-  },
-  {
-    gsID: 'sUTLogo',
-    workspaceTitle: 'ERC721',
-    description: 'Create a new ERC721 token using this template.',
-    projectLogo: 'assets/img/openzeppelinLogo.png',
-    callback: () => createWorkspace('ozerc721')
-  },
-  {
-    gsID: 'sUTLogo',
-    workspaceTitle: 'ERC1155',
-    description: 'Create a new ERC1155 token using this template.',
-    projectLogo: 'assets/img/openzeppelinLogo.png',
-    callback: () => createWorkspace('ozerc1155')
-  },
-  {
-    gsID: 'solhintLogo',
-    workspaceTitle: 'Basic',
-    description: 'Create a new project using this template.',
-    projectLogo: 'assets/img/remixverticaltextLogo.png',
-    callback: () => createWorkspace('remixDefault')
-  }
-]
-
-export default function HomeTabGettingStarted() {
-
-  const createWorkspace = async (templateName) => {
-
-    if(platform === appPlatformTypes.desktop){
-      await plugin.call('remix-templates', 'loadTemplateInNewWindow', templateName)
-      return
-    }
-
-    let templateDisplayName = TEMPLATE_NAMES[templateName]
-    const metadata = TEMPLATE_METADATA[templateName]
-    if (metadata) {
-      if (metadata.type === 'git') {
-        await plugin.call('dGitProvider', 'clone', {url: metadata.url, branch: metadata.branch}, templateDisplayName)
-      } else if (metadata && metadata.type === 'plugin') {
-        await plugin.appManager.activatePlugin('filePanel')
-        templateDisplayName = await plugin.call('filePanel', 'getAvailableWorkspaceName', templateDisplayName)
-        await plugin.call('filePanel', 'createWorkspace', templateDisplayName, 'blank')
-        await plugin.call('filePanel', 'setWorkspace', templateDisplayName)
-        plugin.verticalIcons.select('filePanel')
-        await plugin.call(metadata.name, metadata.endpoint, ...metadata.params)
-      }
-    } else {
-      await plugin.appManager.activatePlugin('filePanel')
-      templateDisplayName = await plugin.call('filePanel', 'getAvailableWorkspaceName', templateDisplayName)
-      await plugin.call('filePanel', 'createWorkspace', templateDisplayName, templateName)
-      await plugin.call('filePanel', 'setWorkspace', templateDisplayName)
-      plugin.verticalIcons.select('filePanel')
-    }
-    _paq.push(['trackEvent', 'hometab', 'homeGetStarted', templateName])
-  }
-
-  return (
-    <div>
-      <span>Getting Started</span>
-      <div className="w-100">
-        <button className="btn btn-primary">Playground</button>
-      </div>
-    </div>
-  )
-}
diff --git a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
index 7ca0bbf23b..262ff0df5e 100644
--- a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
+++ b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
@@ -61,7 +61,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
         <div className="d-flex flex-row w-100 custom_home_bg">
           <div className="px-2 pl-3 justify-content-start d-flex border-right flex-column" id="remixUIHTLeft" style={{ width: 'inherit' }}>
             <HomeTabTitle />
-            <GettingStarted />
+            <HomeTabGetStarted plugin={plugin}></HomeTabGetStarted>
             {!(platform === appPlatformTypes.desktop) ?
               <HomeTabFile plugin={plugin} />:
               <HomeTabFileElectron plugin={plugin}></HomeTabFileElectron>}
@@ -70,7 +70,6 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
           <div className="pl-2 pr-3 justify-content-start d-flex flex-column" style={{ width: '65%' }} id="remixUIHTRight">
             <LanguageOptions plugin={plugin}/>
             <HomeTabFeatured></HomeTabFeatured>
-            {/* <HomeTabGetStarted plugin={plugin}></HomeTabGetStarted> */}
             <HomeTabFeaturedPlugins plugin={plugin}></HomeTabFeaturedPlugins>
             <HomeTabScamAlert></HomeTabScamAlert>
           </div>