consolidate reducer and state. Add logic for workspace creation.

Author: ci-bot

libs/remix-ui/template-explorer-modal/context/template-explorer-context.tsx

@@ -6,17 +6,17 @@ import { metadata, templatesRepository } from '../src/utils/helpers'
 import { AppContext } from '@remix-ui/app'
 import { TemplateExplorerModalPlugin } from 'apps/remix-ide/src/app/plugins/remix-template-explorer-modal'
 import { RemixUiTemplateExplorerModal } from '@remix-ui/template-explorer-modal'
+import { TemplateExplorerModalFacade } from '../src/utils/workspaceUtils'
+import { TemplateCategoryStrategy } from '../stategies/templateCategoryStrategy'
 
 export const TemplateExplorerContext = createContext<TemplateExplorerContextType>({} as any)
 
 export const TemplateExplorerProvider = (props: { plugin: TemplateExplorerModalPlugin }) => {
-  // const [templateRepository, setTemplateRepository] = useState<TemplateCategory[]>([])
-  // const [metadata, setMetadata] = useState<any[]>([])
-  // const [selectedTag, setSelectedTag] = useState<string | null>(null)
-  // const [recentBump, setRecentBump] = useState<number>(0)
   const [state, dispatch] = useReducer(templateExplorerReducer, initialState)
   const appContext = useContext(AppContext)
   const { plugin } = props
+  const makeWorkspace = new TemplateExplorerModalFacade(plugin)
+  const templateCategoryStrategy = new TemplateCategoryStrategy()
 
   useEffect(() => {
     dispatch({ type: TemplateExplorerWizardAction.SET_TEMPLATE_REPOSITORY, payload: templatesRepository })
@@ -26,10 +26,6 @@ export const TemplateExplorerProvider = (props: { plugin: TemplateExplorerModalP
     dispatch({ type: TemplateExplorerWizardAction.SET_METADATA, payload: metadata })
   }, [])
 
-  useEffect(() => {
-    console.log('state context', state)
-  }, [state])
-
   const setSearchTerm = (term: string) => {
     dispatch({ type: TemplateExplorerWizardAction.SET_SEARCH_TERM, payload: term })
   }
@@ -163,7 +159,7 @@ export const TemplateExplorerProvider = (props: { plugin: TemplateExplorerModalP
     }
   }
 
-  const contextValue = { templateRepository: state.templateRepository, metadata: state.metadata, selectedTag: state.selectedTag, recentTemplates, filteredTemplates, dedupedTemplates, handleTagClick, clearFilter, addRecentTemplate, RECENT_KEY, allTags, plugin, setSearchTerm, dispatch, state }
+  const contextValue = { templateRepository: state.templateRepository, metadata: state.metadata, selectedTag: state.selectedTag, recentTemplates, filteredTemplates, dedupedTemplates, handleTagClick, clearFilter, addRecentTemplate, RECENT_KEY, allTags, plugin, setSearchTerm, dispatch, state, theme: plugin.theme, makeWorkspace, templateCategoryStrategy }
 
   return (
     <TemplateExplorerContext.Provider value={contextValue}>

libs/remix-ui/template-explorer-modal/reducers/contract-wizard-reducer.tsx

@@ -47,7 +47,7 @@ export const templateExplorerReducer = (state: TemplateExplorerWizardState, acti
     return { ...state, workspaceTemplateChosen: action.payload }
   }
   case TemplateExplorerWizardAction.SET_WORKSPACE_TEMPLATE_GROUP:{
-    return { ...state, workspaceTemplateGroupChosen: action.payload.templateGroupChosen }
+    return { ...state, workspaceTemplateGroupChosen: action.payload }
   }
   case TemplateExplorerWizardAction.SET_WORKSPACE_NAME:{
     return { ...state, workspaceName: action.payload }
@@ -103,6 +103,7 @@ export const templateExplorerReducer = (state: TemplateExplorerWizardState, acti
     return { ...state, tokenName: action.payload }
   }
   case ContractWizardAction.CONTRACT_NAME_UPDATE: {
+    console.log('action.payload contractName', action.payload)
     return { ...state, contractName: action.payload }
   }
   default: {

libs/remix-ui/template-explorer-modal/reducers/template-explorer-reducer.tsx

@@ -4,9 +4,11 @@ import * as erc20 from '../contractCode/erc20'
 import * as erc721 from '../contractCode/erc721'
 import * as erc1155 from '../contractCode/erc1155'
 import { AccessControlType, ContractTypeStrategy, ContractWizardAction } from '../../types/template-explorer-types'
-import { contractWizardReducer } from '../../reducers/contract-wizard-reducer'
 import { getErc1155ContractCode, getErc20ContractCode, getErc721ContractCode } from '../utils/contractWizardUtils'
 import { TemplateExplorerContext } from '../../context/template-explorer-context'
+import { CustomTooltip } from '@remix-ui/helper'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { TemplateExplorerModalFacade } from '../utils/workspaceUtils'
 
 const defaultStrategy: ContractTypeStrategy = {
   contractType: 'erc20',
@@ -26,16 +28,8 @@ const defaultStrategy: ContractTypeStrategy = {
 }
 
 export function ContractWizard () {
-  const [tokenName, setTokenName] = useState('MyToken')
-
-  const [accessControl, setAccessControl] = useState<'ownable' | 'roles' | 'managed' | ''>('')
-  const [upgradability, setUpgradability] = useState({
-    uups: false,
-    transparent: false
-  })
-  const [initGit, setInitGit] = useState(false)
   const [showEditModal, setShowEditModal] = useState(false)
-  const { state, dispatch } = useContext(TemplateExplorerContext)
+  const { state, dispatch, theme, makeWorkspace } = useContext(TemplateExplorerContext)
   const strategy = state
 
   function toggleContractOption(key: keyof typeof strategy.contractOptions) {
@@ -58,10 +52,10 @@ export function ContractWizard () {
   }
   function updateContractName(contractName: string) {
     dispatch({ type: ContractWizardAction.CONTRACT_NAME_UPDATE, payload: contractName })
+    dispatch({ type: ContractWizardAction.TOKEN_NAME_UPDATE, payload: contractName })
   }
 
   useEffect(() => {
-    // console.log('strategy', strategy)
     if (strategy.contractType === 'erc20') {
       dispatch({ type: ContractWizardAction.CONTRACT_CODE_UPDATE, payload: getErc20ContractCode(strategy.contractType, strategy) })
     } else if (strategy.contractType === 'erc721') {
@@ -76,7 +70,9 @@ export function ContractWizard () {
       <div className="row g-3">
         <div className="col-12 d-flex align-items-center justify-content-between">
           <div className="d-flex align-items-center gap-2">
-            {showEditModal ? <input className="form-control form-control-sm" value={tokenName} onChange={(e) => setTokenName(e.target.value)} /> : <span className="fw-semibold">{tokenName}</span>}
+            {showEditModal ? <input className="form-control form-control-sm" value={state.tokenName} onChange={(e) => updateContractName(e.target.value)} /> : <span className={`fw-semibold fs-6 ${theme.currentTheme().name === 'Light' ? 'text-dark' : 'text-light'}`}>
+              {state.tokenName}
+            </span>}
             <i className="fas fa-edit" onClick={() => setShowEditModal(true)}></i>
           </div>
           <div className="d-flex align-items-center gap-2">
@@ -98,7 +94,7 @@ export function ContractWizard () {
             <div className="mb-3">
               <div className="fw-semibold mb-2">Contract settings</div>
               <label className="form-label text-uppercase small mb-1">Token name</label>
-              <input className="form-control form-control-sm" placeholder="My Token" value={tokenName} onChange={(e) => updateTokenName(e.target.value)} />
+              <input className="form-control form-control-sm" placeholder="My Token" value={state.tokenName} readOnly />
             </div>
 
             <div className="mb-3">
@@ -154,16 +150,30 @@ export function ContractWizard () {
             <Editor
               height="460px"
               defaultLanguage="typescript"
-              options={{ readOnly: true, minimap: { enabled: false }, theme: 'vs-dark' }}
+              options={{ readOnly: true, minimap: { enabled: false }, theme: theme.currentTheme().name === 'Light' ? 'vs' : 'vs-dark' }}
               value={strategy.contractCode as string}
             />
           </div>
           <div className="d-flex justify-content-between align-items-center gap-3 mt-3">
             <div className="form-check m-0">
-              <input className="form-check-input" type="checkbox" id="initGit" checked={initGit} onChange={(e) => setInitGit(e.target.checked)} />
-              <label className="form-check-label" htmlFor="initGit">Initialize as a Git repository</label>
+              <>
+                <input className="form-check-input" type="checkbox" id="initGit" checked={state.initializeAsGitRepo}
+                  onChange={(e) => dispatch({ type: ContractWizardAction.INITIALIZE_AS_GIT_REPO_UPDATE, payload: e.target.checked })} />
+                <label className="form-check-label" htmlFor="initGit">Initialize as a Git repository</label>
+              </>
             </div>
-            <button className="btn btn-primary btn-sm">Validate workspace</button>
+
+            <button className="btn btn-primary btn-sm" data-id="validateWorkspaceButton" onClick={async () => {
+              console.log('about to create workspace')
+              await makeWorkspace.createWorkspace({
+                workspaceName: state.workspaceTemplateChosen.displayName,
+                workspaceTemplateName: state.workspaceTemplateChosen.value,
+                opts: { mintable: state.contractOptions.mintable, burnable: state.contractOptions.burnable, pausable: state.contractOptions.pausable, uups: state.contractUpgradability.uups, transparent: state.contractUpgradability.transparent },
+                isEmpty: false,
+                isGitRepo: state.initializeAsGitRepo,
+                createCommit: true
+              })
+            }}>Validate workspace</button>
           </div>
         </div>
       </div>

libs/remix-ui/template-explorer-modal/src/components/contract-wizard.tsx

@@ -5,10 +5,11 @@ import { initialState, templateExplorerReducer } from '../../reducers/template-e
 export function GenerateWorkspaceWithAi() {
   const [state, dispatch] = useReducer(templateExplorerReducer, initialState)
   return (
-    <section>
-      <div className="d-flex flex-column bg-light" style={{ height: '80%' }}>
-        <div>
-          <label className="form-label text-uppercase small mb-1">Workspace description</label>
+    <section className="mx-3 p-2">
+      <div className="d-flex flex-column p-3 bg-light" style={{ minHeight: '90%' }}>
+        <div className="d-flex flex-row justify-content-between align-items-center mb-3 border-bottom border-light">
+          <label className="form-label text-uppercase mb-2">Write a prompt to generate a workspace</label>
+          <span className="badge badge-pill text-primary border mb-2 border-primary">Beta</span>
         </div>
         <div>
           <textarea className="form-control text-dark" onChange={(e) => dispatch({ type: TemplateExplorerWizardAction.SET_WORKSPACE_NAME, payload: e.target.value })}
@@ -17,6 +18,14 @@ export function GenerateWorkspaceWithAi() {
           />
         </div>
       </div>
+      <div className="d-flex justify-content-end align-items-center mt-3">
+        <button className="btn btn-primary btn-sm" data-id="validateWorkspaceButton" onClick={async () => {
+          console.log('about to create workspace with ai')
+        }}>
+          <i className="fa-solid fa-magic me-2"></i>
+          Generate my Workspace
+        </button>
+      </div>
     </section>
   )
 }

libs/remix-ui/template-explorer-modal/src/components/generateWorkspaceWithAi.tsx

@@ -1,18 +1,43 @@
-import React, { useReducer } from 'react'
+import React, { useContext, useReducer } from 'react'
 import { initialState, templateExplorerReducer } from '../../reducers/template-explorer-reducer'
-import { TemplateExplorerWizardAction } from '../../types/template-explorer-types'
+import { ContractWizardAction, TemplateExplorerWizardAction } from '../../types/template-explorer-types'
+import { TemplateExplorerContext } from '../../context/template-explorer-context'
 
 export function GenericWorkspaceTemplate() {
-  const [state, dispatch] = useReducer(templateExplorerReducer, initialState)
+
+  const { state, dispatch, makeWorkspace } = useContext(TemplateExplorerContext)
+
   return (
-    <section>
-      <div className="d-flex flex-column gap-3 bg-light" style={{ height: '80%' }}>
+    <section className="mx-3 p-2">
+      <div className="d-flex flex-column p-3 bg-light" style={{ minHeight: '80%' }}>
         <div>
           <label className="form-label text-uppercase small mb-1">Workspace name</label>
         </div>
         <div>
           <input type="text" className="form-control text-dark" value={state.workspaceName} onChange={(e) => dispatch({ type: TemplateExplorerWizardAction.SET_WORKSPACE_NAME, payload: e.target.value })} />
         </div>
+
+        <div className="d-flex justify-content-between align-items-center gap-3 mt-3">
+          <div className="form-check m-0">
+            <>
+              <input className="form-check-input" type="checkbox" id="initGit" checked={state.initializeAsGitRepo}
+                onChange={(e) => dispatch({ type: ContractWizardAction.INITIALIZE_AS_GIT_REPO_UPDATE, payload: e.target.checked })} />
+              <label className="form-check-label" htmlFor="initGit">Initialize as a Git repository</label>
+            </>
+          </div>
+
+          <button className="btn btn-primary btn-sm" data-id="validateWorkspaceButton" onClick={async () => {
+            console.log('about to create workspace generic')
+            await makeWorkspace.createWorkspace({
+              workspaceName: state.workspaceTemplateChosen.displayName,
+              workspaceTemplateName: state.workspaceTemplateChosen.value,
+              opts: { },
+              isEmpty: false,
+              isGitRepo: state.initializeAsGitRepo,
+              createCommit: true
+            })
+          }}>Create workspace</button>
+        </div>
       </div>
     </section>
   )

libs/remix-ui/template-explorer-modal/src/components/genericWorkspaceTemplate.tsx

@@ -17,11 +17,11 @@ export function TemplateExplorerBody({ plugin }: TemplateExplorerBodyProps) {
     console.log('state template explorer body', state)
   }, [state])
   return (
-    <section>
+    <section className="mx-4">
       <TopCards />
       {
         (dedupedTemplates.length === 0) ? <NotFound /> : (
-          <div className="body overflow-y-hidden">
+          <div className="body overflow-y-hidden pt-3">
             <>
               <label className="text-dark fs-5">Workspace Templates</label>
               <div className="">

libs/remix-ui/template-explorer-modal/src/components/template-explorer-body.tsx

@@ -2,11 +2,11 @@ import isElectron from 'is-electron'
 import React, { useContext, useEffect } from 'react'
 import { TemplateCategory, TemplateExplorerProps, TemplateExplorerWizardAction, TemplateItem } from '../../types/template-explorer-types'
 import { TemplateExplorerContext } from '../../context/template-explorer-context'
-import { CookbookStrategy, GenAiStrategy, GenericStrategy, RemixDefaultStrategy, TemplateCateogryStrategy, WizardStrategy } from '../../stategies/templateCategoryStrategy'
+import { CookbookStrategy, GenAiStrategy, GenericStrategy, RemixDefaultStrategy, WizardStrategy } from '../../stategies/templateCategoryStrategy'
 
 export function TemplateExplorer() {
 
-  const { metadata, dedupedTemplates, addRecentTemplate, plugin, dispatch, state } = useContext(TemplateExplorerContext)
+  const { metadata, dedupedTemplates, addRecentTemplate, plugin, dispatch, state, templateCategoryStrategy } = useContext(TemplateExplorerContext)
 
   return (
     <div className="template-explorer-container overflow-y-auto" style={{ height: '350px', padding: '1rem' }}>
@@ -55,26 +55,28 @@ export function TemplateExplorer() {
                     flexDirection: 'column'
                   }}
                   onClick={() => {
-                    const strategy = new TemplateCateogryStrategy()
-                    dispatch({ type: TemplateExplorerWizardAction.SELECT_TEMPLATE, payload: item.value })
+                    dispatch({ type: TemplateExplorerWizardAction.SELECT_TEMPLATE, payload: item })
                     dispatch({ type: TemplateExplorerWizardAction.SET_WORKSPACE_TEMPLATE_GROUP, payload: template.name })
                     dispatch({ type: TemplateExplorerWizardAction.SET_WORKSPACE_NAME, payload: item.value })
                     if (template.name.toLowerCase() === 'generic' && !item.value.toLowerCase().includes('remixaitemplate') && item.value !== 'remixDefault') {
-                      strategy.setStrategy(new GenericStrategy())
-                      strategy.switchScreen(dispatch)
+                      templateCategoryStrategy.setStrategy(new GenericStrategy())
+                      templateCategoryStrategy.switchScreen(dispatch)
                     } else if (template.name.toLowerCase() === 'generic' && item.value.toLowerCase().includes('remixaitemplate')) {
-                      strategy.setStrategy(new GenAiStrategy())
-                      strategy.switchScreen(dispatch)
+                      templateCategoryStrategy.setStrategy(new GenAiStrategy())
+                      templateCategoryStrategy.switchScreen(dispatch)
                     } else if (template.name.toLowerCase() === 'generic' && item.value === 'remixDefault') {
                       console.log('remixdefault')
-                      strategy.setStrategy(new RemixDefaultStrategy())
-                      strategy.switchScreen(dispatch)
+                      templateCategoryStrategy.setStrategy(new RemixDefaultStrategy())
+                      templateCategoryStrategy.switchScreen(dispatch)
                     } else if (template.name.toLowerCase().includes('zeppelin')) {
-                      strategy.setStrategy(new WizardStrategy())
-                      strategy.switchScreen(dispatch)
+                      templateCategoryStrategy.setStrategy(new WizardStrategy())
+                      templateCategoryStrategy.switchScreen(dispatch)
                     } else if (template.name.toLowerCase().includes('cookbook')) {
-                      strategy.setStrategy(new CookbookStrategy())
-                      strategy.switchScreen(dispatch)
+                      templateCategoryStrategy.setStrategy(new CookbookStrategy())
+                      templateCategoryStrategy.switchScreen(dispatch)
+                    } else if (template.name.toLowerCase() !== 'generic' && template.name.toLowerCase() !== 'zeppelin' && template.name.toLowerCase() !== 'cookbook') {
+                      templateCategoryStrategy.setStrategy(new GenericStrategy())
+                      templateCategoryStrategy.switchScreen(dispatch)
                     }
                   }}
                   onMouseEnter={(e) => {