layout changes

cleanup

apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx

@@ -1,6 +1,7 @@
 
 import React from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
+import { CustomTooltip } from "@remix-ui/helper"
 import { AppModal } from '@remix-ui/app'
 import { ViewPlugin } from '@remixproject/engine-web'
 import { PluginViewWrapper } from '@remix-ui/helper'
@@ -94,7 +95,7 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
       }
       const modalResult = await this.call('notification', 'modal', modal)
       if (!modalResult) return
-      this.emit('createWorkspaceReducerEvent', workspaceName, item.value, item.opts, false, (e, data) => {
+      this.emit('createWorkspaceReducerEvent', workspaceName, item.value, item.opts, false, async (e, data) => {
         if (e) {
           const modal: AppModal = {
             id: 'TemplatesSelection',
@@ -103,7 +104,7 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
             okLabel: window._intl.formatMessage({ id: 'filePanel.ok' }),
             cancelLabel: window._intl.formatMessage({ id: 'filePanel.cancel' })
           }
-          this.call('notification', 'modal', modal)
+          await this.call('notification', 'modal', modal)
           console.error(e)
         }
 
@@ -111,7 +112,7 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
     }
 
     const addToCurrentWorkspace = async (item) => {
-      this.emit('addTemplateToWorkspaceReducerEvent', item.value, item.opts, false, (e, data) => {
+      this.emit('addTemplateToWorkspaceReducerEvent', item.value, item.opts, false, async (e, data) => {
         if (e) {
           const modal: AppModal = {
             id: 'TemplatesSelection',
@@ -120,7 +121,7 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
             okLabel: window._intl.formatMessage({ id: 'filePanel.ok' }),
             cancelLabel: window._intl.formatMessage({ id: 'filePanel.cancel' })
           }
-          this.call('notification', 'modal', modal)
+          await this.call('notification', 'modal', modal)
           console.error(e)
         }
 
@@ -131,33 +132,62 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
       <RemixUIGridView
         plugin={this}
         styleList={""}
-        logo='/assets/img/YouTubeLogo.webp'
+        logo='/assets/img/bgRemi.webp'
         enableFilter={true}
         showUntagged={true}
         showPin={false}
-        tagList={[]}
-        title='Remix Guide'
-        description="Template Selection"
+        tagList={[
+          ['Solidity', 'danger'],
+          ['ZKP', 'warning'],
+          ['ERC20', 'success'],
+          ['ERC721', 'secondary'],
+          ['ERC1155', 'primary'],
+        ]}
+        title='Template explorer'
+        description="Select the template to create a workspace"
       >
         {
-
           templates(window._intl).map(template => {
             return <RemixUIGridSection
               plugin={this}
               title={template.name}
-              hScrollable= {false}
+              hScrollable={false}
             >
               {template.items.map(item => {
                 return <RemixUIGridCell
                   plugin={this}
                   title={item.displayName}
+                  tagList={item.tagList}
                 >
                   <div>
                     {item.displayName}
-                    {JSON.stringify(item.opts)}
-                    <div>
-                      {!template.IsArtefact && <button data-id={`create-${item.value}${item.opts ? JSON.stringify(item.opts) : ''}`} onClick={async () => createWorkspace(item)} className="btn btn-secondary" >Create a new workspace</button>}
-                      <button data-id={`add-${item.value}`} onClick={async () => addToCurrentWorkspace(item)} className="btn btn-primary" >Add to current workspace</button>
+                    <div className='align-items-center justify-content-between w-100 d-flex pt-2 flex-row'>
+                      {!template.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"
+                        >
+                          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"
+                        >
+                          Add to current
+                        </span>
+                      </CustomTooltip>
                     </div>
                   </div>
                 </RemixUIGridCell>

apps/remix-ide/src/app/plugins/templates-selection/templates.ts

@@ -1,268 +1,288 @@
 export const templates = (intl) => {
   return [
-      {
-        name: "Generic",
-        items: [
-          { value: "remixDefault", displayName: intl.formatMessage({ id: 'filePanel.basic' }) },
-          { value: "blank", displayName: intl.formatMessage({ id: 'filePanel.blank' }) }
-        ]
-      },
-      {
-        name: "OpenZeppelin",
-        items: [
-          {
-            value: "ozerc20",
-            displayName: "ERC20"
-          },
-          {
-            value: "ozerc721",
-            displayName: "ERC721 (NFT)"
-          },
-          {
-            value: "ozerc1155",
-            displayName: "ERC1155"
-          },
-          {
-            value: "ozerc20",
-            displayName: "ERC20",
-            opts: {
-              mintable: true
-            }
-          },
-          {
-            value: "ozerc721",
-            displayName: "ERC721 (NFT)",
-            opts: {
-              mintable: true
-            }
-          },
-          {
-            value: "ozerc1155",
-            displayName: "ERC1155",
-            opts: {
-              mintable: true
-            }
+    {
+      name: "Generic",
+      items: [
+        { value: "remixDefault", displayName: intl.formatMessage({ id: 'filePanel.basic' }) },
+        { value: "blank", displayName: intl.formatMessage({ id: 'filePanel.blank' }) }
+      ]
+    },
+    {
+      name: "OpenZeppelin",
+      items: [
+        {
+          value: "ozerc20",
+          displayName: "ERC20",
+          tagList: ["ERC20"]
+        },
+        {
+          value: "ozerc721",
+          displayName: "ERC721 (NFT)",
+          tagList: ["ERC721"]
+        },
+        {
+          value: "ozerc1155",
+          displayName: "ERC1155"
+        },
+        {
+          value: "ozerc20",
+          displayName: "ERC20",
+          opts: {
+            mintable: true
+          }
+        },
+        {
+          value: "ozerc721",
+          displayName: "ERC721 (NFT)",
+          opts: {
+            mintable: true
           },
-          {
-            value: "ozerc20",
-            displayName: "ERC20",
-            opts: {
-              mintable: true,
-              burnable: true
-            }
+          tagList: ["ERC721"]
+        },
+        {
+          value: "ozerc1155",
+          displayName: "ERC1155",
+          opts: {
+            mintable: true
+          }
+        },
+        {
+          value: "ozerc20",
+          displayName: "ERC20",
+          opts: {
+            mintable: true,
+            burnable: true
           },
-          {
-            value: "ozerc721",
-            displayName: "ERC721 (NFT)",
-            opts: {
-              mintable: true,
-              burnable: true
-            }
+          tagList: ["ERC20"]
+        },
+        {
+          value: "ozerc721",
+          displayName: "ERC721 (NFT)",
+          opts: {
+            mintable: true,
+            burnable: true
           },
-          {
-            value: "ozerc1155",
-            displayName: "ERC1155",
-            opts: {
-              mintable: true,
-              burnable: true
-            }
+          tagList: ["ERC721"]
+        },
+        {
+          value: "ozerc1155",
+          displayName: "ERC1155",
+          opts: {
+            mintable: true,
+            burnable: true
           },
-          {
-            value: "ozerc20",
-            displayName: "ERC20",
-            opts: {
-              mintable: true,
-              pausable: true
-            }
+          tagList: ["ERC1155"]
+        },
+        {
+          value: "ozerc20",
+          displayName: "ERC20",
+          opts: {
+            mintable: true,
+            pausable: true
           },
-          {
-            value: "ozerc721",
-            displayName: "ERC721 (NFT)",
-            opts: {
-              mintable: true,
-              pausable: true
-            }
+          tagList: ["ERC20"]
+        },
+        {
+          value: "ozerc721",
+          displayName: "ERC721 (NFT)",
+          opts: {
+            mintable: true,
+            pausable: true
           },
-          {
-            value: "ozerc1155",
-            displayName: "ERC1155",
-            opts: {
-              mintable: true,
-              pausable: true
-            }
+          tagList: ["ERC721"]
+        },
+        {
+          value: "ozerc1155",
+          displayName: "ERC1155",
+          opts: {
+            mintable: true,
+            pausable: true
           }
-        ]
-      },
-      {
-        name: "OpenZeppelin Proxy",
-        items: [
-          {
-            value: "ozerc20",
-            displayName: "ERC20",
-            opts: {
-              upgradeable: 'uups'
-            }
+        }
+      ]
+    },
+    {
+      name: "OpenZeppelin Proxy",
+      items: [
+        {
+          value: "ozerc20",
+          displayName: "ERC20",
+          opts: {
+            upgradeable: 'uups'
           },
-          {
-            value: "ozerc721",
-            displayName: "ERC721 (NFT)",
-            opts: {
-              upgradeable: 'uups'
-            }
+          tagList: ["ERC20"]
+        },
+        {
+          value: "ozerc721",
+          displayName: "ERC721 (NFT)",
+          opts: {
+            upgradeable: 'uups'
           },
-          {
-            value: "ozerc1155",
-            displayName: "ERC1155",
-            opts: {
-              upgradeable: 'uups'
-            }
+          tagList: ["ERC721"]
+        },
+        {
+          value: "ozerc1155",
+          displayName: "ERC1155",
+          opts: {
+            upgradeable: 'uups'
           },
-          {
-            value: "ozerc20",
-            displayName: "ERC20",
-            opts: {
-              upgradeable: 'uups',
-              mintable: true
-            }
+          tagList: ["ERC1155"]
+        },
+        {
+          value: "ozerc20",
+          displayName: "ERC20",
+          opts: {
+            upgradeable: 'uups',
+            mintable: true
           },
-          {
-            value: "ozerc721",
-            displayName: "ERC721 (NFT)",
-            opts: {
-              upgradeable: 'uups',
-              mintable: true
-            }
+          tagList: ["ERC20"]
+        },
+        {
+          value: "ozerc721",
+          displayName: "ERC721 (NFT)",
+          opts: {
+            upgradeable: 'uups',
+            mintable: true
           },
-          {
-            value: "ozerc1155",
-            displayName: "ERC1155",
-            opts: {
-              upgradeable: 'uups',
-              mintable: true
-            }
+          tagList: ["ERC721"]
+        },
+        {
+          value: "ozerc1155",
+          displayName: "ERC1155",
+          opts: {
+            upgradeable: 'uups',
+            mintable: true
           },
-          {
-            value: "ozerc20",
-            displayName: "ERC20",
-            opts: {
-              upgradeable: 'uups',
-              mintable: true,
-              burnable: true
-            }
+          tagList: ["ERC1155"]
+        },
+        {
+          value: "ozerc20",
+          displayName: "ERC20",
+          opts: {
+            upgradeable: 'uups',
+            mintable: true,
+            burnable: true
           },
-          {
-            value: "ozerc721",
-            displayName: "ERC721 (NFT)",
-            opts: {
-              upgradeable: 'uups',
-              mintable: true,
-              burnable: true
-            }
+          tagList: ["ERC20"]
+        },
+        {
+          value: "ozerc721",
+          displayName: "ERC721 (NFT)",
+          opts: {
+            upgradeable: 'uups',
+            mintable: true,
+            burnable: true
           },
-          {
-            value: "ozerc1155",
-            displayName: "ERC1155",
-            opts: {
-              upgradeable: 'uups',
-              mintable: true,
-              burnable: true
-            }
+          tagList: ["ERC721"]
+        },
+        {
+          value: "ozerc1155",
+          displayName: "ERC1155",
+          opts: {
+            upgradeable: 'uups',
+            mintable: true,
+            burnable: true
           },
-          {
-            value: "ozerc20",
-            displayName: "ERC20",
-            opts: {
-              upgradeable: 'uups',
-              mintable: true,
-              pausable: true
-            }
+          tagList: ["ERC1155"]
+        },
+        {
+          value: "ozerc20",
+          displayName: "ERC20",
+          opts: {
+            upgradeable: 'uups',
+            mintable: true,
+            pausable: true
           },
-          {
-            value: "ozerc721",
-            displayName: "ERC721 (NFT)",
-            opts: {
-              upgradeable: 'uups',
-              mintable: true,
-              pausable: true
-            }
+          tagList: ["ERC20"]
+        },
+        {
+          value: "ozerc721",
+          displayName: "ERC721 (NFT)",
+          opts: {
+            upgradeable: 'uups',
+            mintable: true,
+            pausable: true
           },
-          {
-            value: "ozerc1155",
-            displayName: "ERC1155",
-            opts: {
-              upgradeable: 'uups',
-              mintable: true,
-              pausable: true
-            }
+          tagList: ["ERC721"]
+        },
+        {
+          value: "ozerc1155",
+          displayName: "ERC1155",
+          opts: {
+            upgradeable: 'uups',
+            mintable: true,
+            pausable: true
           },
-          {
-            value: "ozerc1155",
-            displayName: "ERC1155",
-            opts: {
-              upgradeable: 'uups',
-              mintable: true,
-              burnable: true,
-              pausable: true
-            }
-          }
-        ]
-      },
-      {
-        name: "OxProject",
-        items: [
-          { value: "zeroxErc20", displayName: "ERC20" }
-        ]
-      },
-      {
-        name: "Gnosis Safe",
-        items: [
-          { value: "gnosisSafeMultisig", displayName: intl.formatMessage({ id: 'filePanel.multiSigWallet' }) }
-        ]
-      },
-      {
-        name: "Circom ZKP",
-        items: [
-          { value: "semaphore", displayName: intl.formatMessage({ id: 'filePanel.semaphore' }) },
-          { value: "hashchecker", displayName: intl.formatMessage({ id: 'filePanel.hashchecker' }) },
-          { value: "rln", displayName: intl.formatMessage({ id: 'filePanel.rln' }) }
-        ]
-      },
-      {
-        name: "Generic ZKP",
-        items: [
-          { value: "sindriScripts", displayName: intl.formatMessage({ id: 'filePanel.addscriptsindri' }) },
-        ]
-      },
-      {
-        name: "Uniswap V4",
-        items: [
-          { value: "uniswapV4Template", displayName: intl.formatMessage({ id: 'filePanel.uniswapV4Template' }) },
-          { value: "breakthroughLabsUniswapv4Hooks", displayName: intl.formatMessage({ id: 'filePanel.breakthroughLabsUniswapv4Hooks' }) },
-          { value: "uniswapV4HookBookMultiSigSwapHook", displayName: intl.formatMessage({ id: 'filePanel.uniswapV4HookBookMultiSigSwapHook' }) }
-        ]
-      },
-      {
-        name: "Solidity CREATE2",
-        items: [
-          { value: "contractCreate2Factory", displayName: intl.formatMessage({ id: 'filePanel.addcreate2solidityfactory' }) },
-          { value: "contractDeployerScripts", displayName: intl.formatMessage({ id: 'filePanel.addscriptdeployer' }) }
-        ]
-      },
-      {
-        name: "Contract Verification",
-        items: [
-          { value: "etherscanScripts", displayName: intl.formatMessage({ id: 'filePanel.addscriptetherscan' }) },
-        ],
-        
-      },
-      {
-        name: 'Github Actions',
-        items: [
-          { value: "runJsTestAction", displayName: intl.formatMessage({ id: 'filePanel.tssoltestghaction' }) },
-          { value: "runSolidityUnittestingAction", displayName: intl.formatMessage({ id: 'filePanel.tssoltestghaction' }) },
-          { value: "runSlitherAction", displayName: intl.formatMessage({ id: 'filePanel.slitherghaction' }) }
-        ],
-        IsArtefact: true
-      }
-    ]
+          tagList: ["ERC1155"]
+        },
+        {
+          value: "ozerc1155",
+          displayName: "ERC1155",
+          opts: {
+            upgradeable: 'uups',
+            mintable: true,
+            burnable: true,
+            pausable: true
+          },
+          tagList: ["ERC1155"]
+        }
+      ]
+    },
+    {
+      name: "OxProject",
+      items: [
+        { value: "zeroxErc20", displayName: "ERC20", tagList: ["ERC20"]}
+      ]
+    },
+    {
+      name: "Gnosis Safe",
+      items: [
+        { value: "gnosisSafeMultisig", displayName: intl.formatMessage({ id: 'filePanel.multiSigWallet' }) }
+      ]
+    },
+    {
+      name: "Circom ZKP",
+      items: [
+        { value: "semaphore", tagList: ["ZKP"], displayName: intl.formatMessage({ id: 'filePanel.semaphore' }) },
+        { value: "hashchecker", tagList: ["ZKP"], displayName: intl.formatMessage({ id: 'filePanel.hashchecker' }) },
+        { value: "rln", tagList: ["ZKP"], displayName: intl.formatMessage({ id: 'filePanel.rln' }) }
+      ]
+    },
+    {
+      name: "Generic ZKP",
+      items: [
+        { value: "sindriScripts", tagList: ["ZKP"], displayName: intl.formatMessage({ id: 'filePanel.addscriptsindri' }) },
+      ],
+    },
+    {
+      name: "Uniswap V4",
+      items: [
+        { value: "uniswapV4Template", displayName: intl.formatMessage({ id: 'filePanel.uniswapV4Template' }) },
+        { value: "breakthroughLabsUniswapv4Hooks", displayName: intl.formatMessage({ id: 'filePanel.breakthroughLabsUniswapv4Hooks' }) },
+        { value: "uniswapV4HookBookMultiSigSwapHook", displayName: intl.formatMessage({ id: 'filePanel.uniswapV4HookBookMultiSigSwapHook' }) }
+      ]
+    },
+    {
+      name: "Solidity CREATE2",
+      items: [
+        { value: "contractCreate2Factory", displayName: intl.formatMessage({ id: 'filePanel.addcreate2solidityfactory' }) },
+        { value: "contractDeployerScripts", displayName: intl.formatMessage({ id: 'filePanel.addscriptdeployer' }) }
+      ]
+    },
+    {
+      name: "Contract Verification",
+      items: [
+        { value: "etherscanScripts", displayName: intl.formatMessage({ id: 'filePanel.addscriptetherscan' }) },
+      ],
+    },
+    {
+      name: 'Github Actions',
+      items: [
+        { value: "runJsTestAction", displayName: intl.formatMessage({ id: 'filePanel.tssoltestghaction' }) },
+        { value: "runSolidityUnittestingAction", displayName: intl.formatMessage({ id: 'filePanel.tssoltestghaction' }) },
+        { value: "runSlitherAction", displayName: intl.formatMessage({ id: 'filePanel.slitherghaction' }) }
+      ],
+      IsArtefact: true
+    }
+  ]
 }