From 4a83223c0deb2342f827505cf1ceb5e78c7a0efb Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 10 Apr 2025 00:38:35 +0100
Subject: [PATCH 1/4] fix template selection to have oZ options

---
 .../templates-selection-plugin.tsx            | 235 ++++++++++++------
 1 file changed, 153 insertions(+), 82 deletions(-)

diff --git a/apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx b/apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx
index ef12c7461f9..8583718e980 100644
--- a/apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx
+++ b/apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx
@@ -1,6 +1,6 @@
 
 import React from 'react'
-import { FormattedMessage, useIntl } from 'react-intl'
+import { FormattedMessage } from 'react-intl'
 import { CustomTooltip } from "@remix-ui/helper"
 import { AppModal } from '@remix-ui/app'
 import { ViewPlugin } from '@remixproject/engine-web'
@@ -29,6 +29,8 @@ const profile = {
 export class TemplatesSelectionPlugin extends ViewPlugin {
   templates: Array<TemplateGroup>
   dispatch: React.Dispatch<any> = () => { }
+  opts: any = {}
+
   constructor() {
     super(profile)
   }
@@ -69,22 +71,24 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
   }
 
   updateComponent() {
-    /*
-    This represents the different options available from the openzeppelin library.
-    const opts = {
-      // @ts-ignore: Object is possibly 'null'.
-      mintable: mintableCheckboxRef.current.checked,
-      // @ts-ignore: Object is possibly 'null'.
-      burnable: burnableCheckboxRef.current.checked,
-      // @ts-ignore: Object is possibly 'null'.
-      pausable: pausableCheckboxRef.current.checked,
-      // @ts-ignore: Object is possibly 'null'.
-      upgradeable: transparentRadioRef.current.checked ? transparentRadioRef.current.value : uupsRadioRef.current.checked ? uupsRadioRef.current.value : false
+
+    const errorCallback = async (error, data) => {
+      if (error) {
+        const modal: AppModal = {
+          id: 'TemplatesSelection',
+          title:  window._intl.formatMessage({ id: !isElectron() ? 'filePanel.workspace.create': 'filePanel.workspace.create.desktop' }),
+          message: error.message,
+          okLabel: window._intl.formatMessage({ id: 'filePanel.ok' }),
+          cancelLabel: window._intl.formatMessage({ id: 'filePanel.cancel' })
+        }
+        await this.call('notification', 'modal', modal)
+        console.error(error)
+      }
+
     }
-    */
-    const createWorkspace = async (item) => {
-      const defaultName = await this.call('filePanel', 'getAvailableWorkspaceName', item.displayName)
 
+    const createWorkspace = async (item, templateName: string) => {
+      const defaultName = await this.call('filePanel', 'getAvailableWorkspaceName', item.displayName)
       const username = await this.call('settings', 'get', 'settings/github-user-name')
       const email = await this.call('settings', 'get', 'settings/github-email')
       const gitNotSet = !username || !email
@@ -93,31 +97,18 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
       const modal: AppModal = {
         id: 'TemplatesSelection',
         title:  window._intl.formatMessage({ id: !isElectron() ? 'filePanel.workspace.create': 'filePanel.workspace.create.desktop' }),
-        message: await createModalMessage(defaultName, gitNotSet, (value) => workspaceName = value, (value) => initGit = !!value),
+        message: await createModalMessage(defaultName, gitNotSet, (value) => workspaceName = value, (value) => initGit = !!value, (event) => setCheckBoxRefs(event), (event) => setRadioRefs(event), templateName),
         okLabel: window._intl.formatMessage({ id: !isElectron() ? 'filePanel.ok':'filePanel.selectFolder' }),
       }
       const modalResult = await this.call('notification', 'modal', modal)
       if (!modalResult) return
       _paq.push(['trackEvent', 'template-selection', 'createWorkspace', item.value])
-      this.emit('createWorkspaceReducerEvent', workspaceName, item.value, item.opts, false, async (e, data) => {
-        if (e) {
-          const modal: AppModal = {
-            id: 'TemplatesSelection',
-            title:  window._intl.formatMessage({ id: !isElectron() ? 'filePanel.workspace.create': 'filePanel.workspace.create.desktop' }),
-            message: e.message,
-            okLabel: window._intl.formatMessage({ id: 'filePanel.ok' }),
-            cancelLabel: window._intl.formatMessage({ id: 'filePanel.cancel' })
-          }
-          await this.call('notification', 'modal', modal)
-          console.error(e)
-        }
-
-      }, initGit)
+      this.emit('createWorkspaceReducerEvent', workspaceName, item.value, this.opts, false, errorCallback, initGit)
     }
 
     const addToCurrentWorkspace = async (item) => {
       _paq.push(['trackEvent', 'template-selection', 'addToCurrentWorkspace', item.value])
-      this.emit('addTemplateToWorkspaceReducerEvent', item.value, item.opts, false, async (e, data) => {
+      this.emit('addTemplateToWorkspaceReducerEvent', item.value, this.opts, false, async (e, data) => {
         if (e) {
           const modal: AppModal = {
             id: 'TemplatesSelection',
@@ -134,6 +125,26 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
       })
     }
 
+    const setCheckBoxRefs = (event) => {
+      const { value, checked } = event.target
+      if (value === 'mintable') {
+        this.opts.mintable = checked
+      } else if (value === 'burnable') {
+        this.opts.burnable = checked
+      } else if (value === 'pausable') {
+        this.opts.pausable = checked
+      }
+    }
+
+    const setRadioRefs = (event) => {
+      const { value } = event.target
+      if (value === 'transparent') {
+        this.opts.upgradeable = value
+      } else if (value === 'uups') {
+        this.opts.upgradeable = value
+      }
+    }
+
     return (
       <RemixUIGridView
         plugin={this}
@@ -162,57 +173,63 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
               hScrollable={false}
             >
               {template.items.map((item, index) => {
-                return <RemixUIGridCell
-                  plugin={this}
-                  title={item.displayName}
-                  key={item.name || index}
-                  id={item.name}
-                  searchKeywords={[item.displayName, item.description, template.name]}
-                  tagList={item.tagList}
-                  classList={'TSCellStyle'}
-                >
-                  <div className='d-flex justify-content-between h-100 flex-column'>
-                    <div className='d-flex flex-column'>
-                      <div>
-                        {item.description && <span className='text-dark'>{item.description}</span>}
-                      </div>
-                      <div className='d-flex flex-wrap mb-2'>
-                        {(item.opts && item.opts.upgradeable && item.opts.upgradeable === 'uupds') && <span className='badgeForCell badge text-secondary'>Upgradeable-UUPS</span>}
-                        {(item.opts && item.opts.mintable) && <span className='badgeForCell text-secondary'>mintable</span>}
-                        {(item.opts && item.opts.burnable) && <span className='badgeForCell text-secondary'>burnable</span>}
-                        {(item.opts && item.opts.pausable) && <span className='badgeForCell text-secondary'>pausable</span>}
-                      </div>
-                    </div>
-                    <div className='align-items-center justify-content-between w-100 d-flex pt- flex-row'>
-                      {(!template.IsArtefact || !item.isArtefact) && <CustomTooltip
-                        placement="auto"
-                        tooltipId={`overlay-tooltip-new${item.name}`}
-                        tooltipText="Create a new workspace"
-                      >
-                        <span
-                          data-id={`create-${item.value}${item.opts ? JSON.stringify(item.opts) : ''}`}
-                          onClick={async () => createWorkspace(item)}
-                          className="btn btn-sm mr-2 border border-primary"
-                        >
+                if (!item.opts) {
+                  return (
+                    <RemixUIGridCell
+                      plugin={this}
+                      title={item.displayName}
+                      key={item.name || index}
+                      id={item.name}
+                      searchKeywords={[item.displayName, item.description, template.name]}
+                      tagList={item.tagList}
+                      classList={'TSCellStyle'}
+                    >
+                      <div className='d-flex justify-content-between h-100 flex-column'>
+                        <div className='d-flex flex-column'>
+                          <div>
+                            {item.description && <span className='text-dark'>{item.description}</span>}
+                          </div>
+                          <div className='d-flex flex-wrap mb-2'>
+                            {(item.opts && item.opts.upgradeable && item.opts.upgradeable === 'uupds') && <span className='badgeForCell badge text-secondary'>Upgradeable-UUPS</span>}
+                            {(item.opts && item.opts.mintable) && <span className='badgeForCell text-secondary'>mintable</span>}
+                            {(item.opts && item.opts.burnable) && <span className='badgeForCell text-secondary'>burnable</span>}
+                            {(item.opts && item.opts.pausable) && <span className='badgeForCell text-secondary'>pausable</span>}
+                          </div>
+                        </div>
+                        <div className='align-items-center justify-content-between w-100 d-flex pt- flex-row'>
+                          {(!template.IsArtefact || !item.isArtefact) && <CustomTooltip
+                            placement="auto"
+                            tooltipId={`overlay-tooltip-new${item.name}`}
+                            tooltipText="Create a new workspace"
+                          >
+                            <span
+                              data-id={`create-${item.value}${item.opts ? JSON.stringify(item.opts) : ''}`}
+                              onClick={async () => {
+                                createWorkspace(item, template.name)
+                              }}
+                              className="btn btn-sm mr-2 border border-primary"
+                            >
                           Create
-                        </span>
-                      </CustomTooltip>}
-                      <CustomTooltip
-                        placement="auto"
-                        tooltipId={`overlay-tooltip-add${item.name}`}
-                        tooltipText="Add template files to current workspace"
-                      >
-                        <span
-                          data-id={`add-${item.value}`}
-                          onClick={async () => addToCurrentWorkspace(item)}
-                          className="btn btn-sm border"
-                        >
+                            </span>
+                          </CustomTooltip>}
+                          <CustomTooltip
+                            placement="auto"
+                            tooltipId={`overlay-tooltip-add${item.name}`}
+                            tooltipText="Add template files to current workspace"
+                          >
+                            <span
+                              data-id={`add-${item.value}`}
+                              onClick={async () => addToCurrentWorkspace(item)}
+                              className="btn btn-sm border"
+                            >
                           Add to current
-                        </span>
-                      </CustomTooltip>
-                    </div>
-                  </div>
-                </RemixUIGridCell>
+                            </span>
+                          </CustomTooltip>
+                        </div>
+                      </div>
+                    </RemixUIGridCell>
+                  )
+                }
               })}
               { template.name === 'Cookbook' && <RemixUIGridCell
                 plugin={this}
@@ -239,8 +256,11 @@ const createModalMessage = async (
   defaultName: string,
   gitConfigNotSet: boolean,
   onChangeTemplateName: (name: string) => void,
-  onChangeInitGit: (name: string) => void) => {
-
+  onChangeInitGit: (name: string) => void,
+  onChangeCheckBoxRefs: (event: any) => void,
+  onChangeRadioRefs: (event: any) => void,
+  templateName?: string
+) => {
   return (
     <>
       <label id="wsName" className="form-check-label" style={{ fontWeight: 'bolder' }}>
@@ -254,6 +274,57 @@ const createModalMessage = async (
         onChange={(e) => onChangeTemplateName(e.target.value)}
         onInput={(e) => onChangeTemplateName((e.target as any).value)}
       />
+      {templateName?.includes('OpenZeppelin') ? (
+        <div id="ozcustomization" data-id="ozCustomization" style={{ display: 'block' }} className="mb-2">
+          <label className="form-check-label d-block mb-2" style={{ fontWeight: 'bolder' }}>
+            <FormattedMessage id="filePanel.customizeTemplate" />
+          </label>
+
+          <label id="wsName" className="form-check-label d-block mb-1">
+            <FormattedMessage id="filePanel.features" />
+          </label>
+          <div className="mb-2">
+            <div className="d-flex ml-2 custom-control custom-checkbox">
+              <input className="custom-control-input" type="checkbox" name="feature" value="mintable" id="mintable" onChange={onChangeCheckBoxRefs} />
+              <label className="form-check-label custom-control-label" htmlFor="mintable" data-id="featureTypeMintable">
+                <FormattedMessage id="filePanel.mintable" />
+              </label>
+            </div>
+            <div className="d-flex ml-2 custom-control custom-checkbox">
+              <input className="custom-control-input" type="checkbox" name="feature" value="burnable" id="burnable" onChange={onChangeCheckBoxRefs} />
+              <label className="form-check-label custom-control-label" htmlFor="burnable" data-id="featureTypeBurnable">
+                <FormattedMessage id="filePanel.burnable" />
+              </label>
+            </div>
+            <div className="d-flex ml-2 custom-control custom-checkbox">
+              <input className="custom-control-input" type="checkbox" name="feature" value="pausable" id="pausable" onChange={onChangeCheckBoxRefs} />
+              <label className="form-check-label custom-control-label" htmlFor="pausable" data-id="featureTypePausable">
+                <FormattedMessage id="filePanel.pausable" />
+              </label>
+            </div>
+          </div>
+
+          <label id="wsName" className="form-check-label d-block mb-1">
+            <FormattedMessage id="filePanel.upgradeability" />
+          </label>
+          <div>
+            <div className="d-flex ml-2 custom-control custom-radio">
+              <input className="custom-control-input" type="radio" name="upgradeability" value="transparent" id="transparent" onChange={onChangeRadioRefs} />
+              <label className="form-check-label custom-control-label" htmlFor="transparent" data-id="upgradeTypeTransparent">
+                <FormattedMessage id="filePanel.transparent" />
+              </label>
+            </div>
+            <div className="d-flex ml-2 custom-control custom-radio">
+              <input className="custom-control-input" type="radio" name="upgradeability" value="uups" id="uups" onChange={onChangeRadioRefs} />
+              <label className="form-check-label custom-control-label" htmlFor="uups" data-id="upgradeTypeUups">
+              UUPS
+              </label>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <></>
+      )}
       <div className="d-flex py-2 align-items-center custom-control custom-checkbox">
         <input
           id="initGitRepository"

From e704948042894514f280c905147864d9a834bb5e Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 10 Apr 2025 12:40:41 +0100
Subject: [PATCH 2/4] Fix e2e

---
 apps/remix-ide-e2e/src/tests/workspace.test.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/workspace.test.ts b/apps/remix-ide-e2e/src/tests/workspace.test.ts
index 727872fab6a..6d270538e4a 100644
--- a/apps/remix-ide-e2e/src/tests/workspace.test.ts
+++ b/apps/remix-ide-e2e/src/tests/workspace.test.ts
@@ -320,9 +320,15 @@ module.exports = {
     browser
       .click('*[data-id="workspacesMenuDropdown"]')
       .click('*[data-id="workspacecreate"]')
-      .waitForElementPresent(`*[data-id='create-ozerc1155{"upgradeable":"uups","mintable":true,"burnable":true,"pausable":true}']`)
-      .scrollAndClick(`*[data-id='create-ozerc1155{"upgradeable":"uups","mintable":true,"burnable":true,"pausable":true}']`)
+      // .waitForElementPresent(`*[data-id='create-ozerc1155{"upgradeable":"uups","mintable":true,"burnable":true,"pausable":true}']`)
+      // .scrollAndClick(`*[data-id='create-ozerc1155{"upgradeable":"uups","mintable":true,"burnable":true,"pausable":true}']`)
+      .waitForElementPresent('*[data-id="create-ozerc1155"]')
+      .scrollAndClick('*[data-id="create-ozerc1155"]')
       .waitForElementVisible('*[data-id="modalDialogCustomPromptTextCreate"]')
+      .click('*[data-id="featureTypeMintable"]')
+      .click('*[data-id="featureTypeBurnable"]')
+      .click('*[data-id="featureTypePausable"]')
+      .click('*[data-id="upgradeTypeUups"]')
       .modalFooterOKClick('TemplatesSelection')
       .pause(100)
       .waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts"]')

From c35a3f9258b7a7749375e0cdf71ab8d7d647896d Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 15 Apr 2025 10:45:19 +0100
Subject: [PATCH 3/4] replace simple with customizable

---
 .../src/app/plugins/templates-selection/templates.ts        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/remix-ide/src/app/plugins/templates-selection/templates.ts b/apps/remix-ide/src/app/plugins/templates-selection/templates.ts
index 8848e38816e..9bbc977e987 100644
--- a/apps/remix-ide/src/app/plugins/templates-selection/templates.ts
+++ b/apps/remix-ide/src/app/plugins/templates-selection/templates.ts
@@ -14,7 +14,7 @@ export const templates = (intl, plugin) => {
           value: "ozerc20",
           displayName: "ERC20",
           tagList: ["ERC20", "Solidity"],
-          description: 'A simple fungible token contract'
+          description: 'A customizable fungible token contract'
         },
         {
           value: "ozerc20",
@@ -49,7 +49,7 @@ export const templates = (intl, plugin) => {
           value: "ozerc721",
           displayName: "ERC721 (NFT)",
           tagList: ["ERC721", "Solidity"],
-          description: 'A simple non-fungible token (NFT) contract'
+          description: 'A customizable non-fungible token (NFT) contract'
         },
         {
           value: "ozerc721",
@@ -84,7 +84,7 @@ export const templates = (intl, plugin) => {
           value: "ozerc1155",
           tagList: ["Solidity"],
           displayName: "ERC1155",
-          description: 'A simple multi token contract'
+          description: 'A customizable multi token contract'
         },
         {
           value: "ozerc1155",

From 725113c39209393f17a98933f9f7529e179c206d Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 15 Apr 2025 10:45:39 +0100
Subject: [PATCH 4/4] fix margin between input filed and label

---
 .../plugins/templates-selection/templates-selection-plugin.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx b/apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx
index 8583718e980..9768db83323 100644
--- a/apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx
+++ b/apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx
@@ -270,7 +270,7 @@ const createModalMessage = async (
         type="text"
         data-id="modalDialogCustomPromptTextCreate"
         defaultValue={defaultName}
-        className="form-control"
+        className="form-control mb-3"
         onChange={(e) => onChangeTemplateName(e.target.value)}
         onInput={(e) => onChangeTemplateName((e.target as any).value)}
       />