Merge pull request #3255 from ethereum/updates2hometab

Quick Updates to HomeTab

apps/remix-ide/src/app/tabs/locales/en/home.json

@@ -21,20 +21,24 @@
   "home.solhintPluginDesc": "Solhint is an open source project for linting Solidity code.",
   "home.sourcifyPluginDesc": "Solidity contract and metadata verification service.",
   "home.unitTestPluginDesc": "Write and run unit tests for your contracts in Solidity.",
+  "home.dgitPluginDesc": "Add source control to your projects.",
+  "home.oneClickDappDesc": "Quickly generate smart contract interfaces",
   "home.getStarted": "Get Started",
   "home.projectTemplates": "Project Templates",
   "home.blankTemplateDesc": "Create an empty workspace.",
   "home.remixDefaultTemplateDesc": "Create a workspace with sample files.",
   "home.ozerc20TemplateDesc": "Create an ERC20 token by importing OpenZeppelin library.",
   "home.ozerc721TemplateDesc": "Create an NFT token by importing OpenZeppelin library.",
+  "home.ozerc1155TemplateDesc": "Create an ERC1155 token by importing OpenZeppelin library.",
+  "home.gnosisSafeMultisigTemplateDesc": "Create Multi-Signature wallets using this template.",
   "home.zeroxErc20TemplateDesc": "Create an ERC20 token by importing 0xProject contract.",
   "home.learn": "Learn",
-  "home.remixBasics": "Remix Basics",
-  "home.remixBasicsDesc":"Introduction to Remix's interface and concepts used in Ethereum, as well as the basics of Solidity.",
-  "home.remixIntermediate": "Remix Intermediate",
-  "home.remixIntermediateDesc": "Using the web3.js to interact with a contract. Using Recorder tool.",
-  "home.remixAdvanced": "Remix Advanced",
-  "home.remixAdvancedDesc": "Learn the Proxy Pattern and working with Libraries in Remix. Learn to use the Debugger.",
+  "home.learnEth1": "Remix Basics",
+  "home.learnEth1Desc":"An introduction to Remix's interface and basic operations.",
+  "home.learnEth2": "Intro to Solidity",
+  "home.learnEth2Desc": "Interactively learn Solidity beginner concepts.",
+  "home.remixAdvanced": "Deploying with Libraries",
+  "home.remixAdvancedDesc": "Learn to deploy with libraries in Remix",
   "home.remixYoutubePlaylist": "Remix Youtube Playlist",
   "home.remixTwitterProfile": "Remix Twitter Profile",
   "home.remixLinkedinProfile": "Remix Linkedin Profile",

apps/remix-ide/src/app/tabs/locales/zh/home.json

@@ -21,12 +21,15 @@
   "home.solhintPluginDesc": "Solhint 是一个用于检查 Solidity 代码的开源项目",
   "home.sourcifyPluginDesc": "Solidity 合约和元数据验证服务。",
   "home.unitTestPluginDesc": "在 Solidity 中为你的合约编写和运行单元测试。",
+  "home.dgitPluginDesc": "",
   "home.getStarted": "开始使用",
   "home.projectTemplates": "项目模板",
   "home.blankTemplateDesc": "创建一个空的工作空间。",
   "home.remixDefaultTemplateDesc": "创建一个带有样本文件的工作空间",
   "home.ozerc20TemplateDesc": "通过引入 OpenZeppelin 库来创建一个 ERC20 代币。",
   "home.ozerc721TemplateDesc": "通过引入 OpenZeppelin 库来创建一个 NFT 代币。",
+  "home.ozerc1155TemplateDesc": "",
+  "home.gnosisSafeMultisigTemplateDesc": "",
   "home.zeroxErc20TemplateDesc": "通过引入 0xProject 合约来创建一个 ERC20 代币。",
   "home.learn": "学习",
   "home.remixBasics": "Remix 基础",

libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx

@@ -63,10 +63,10 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
     plugin.verticalIcons.select('solidity')
     _paq.push(['trackEvent', 'hometabActivate', 'userActivate', 'solidity'])
   }
-  const startStarkNet = async () => {
-    await plugin.appManager.activatePlugin('starkNet_compiler')
-    plugin.verticalIcons.select('starkNet_compiler')
-    _paq.push(['trackEvent', 'hometabActivate', 'userActivate', 'starkNet_compiler'])
+  const startOneClickDapp = async () => {
+    await plugin.appManager.activatePlugin('oneClickDapp')
+    plugin.verticalIcons.select('oneClickDapp')
+    _paq.push(['trackEvent', 'hometabActivate', 'userActivate', 'oneClickDapp'])
   }
   const startSolhint = async () => {
     await plugin.appManager.activatePlugin(['solidity', 'solhint'])
@@ -84,6 +84,12 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
     _paq.push(['trackEvent', 'hometabActivate', 'userActivate', 'solidityUnitTesting'])
   }
 
+  const startDgit = async () => {
+    await plugin.appManager.activatePlugin('dgit')
+    plugin.verticalIcons.select('dgit')
+    _paq.push(['tracEvent', 'hometabActivate', 'userActivate', 'dgit'])
+  }
+
   return (
     <div className="pl-2 w-100" id="hTFeaturedPlugins">
       <label className="" style={{fontSize: "1.2rem"}}><FormattedMessage id='home.featuredPlugins' /></label>
@@ -126,14 +132,6 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
               remixMaintained={true}
               callback={() => startSolidity()}
             />
-            <PluginButton
-              imgPath="assets/img/starkNetLogo.webp"
-              envID="starkNetLogo"
-              envText="StarkNet"
-              description={intl.formatMessage({ id: 'home.starkNetPluginDesc' })}
-              l2={true}
-              callback={() => startStarkNet()}
-            />
             <PluginButton
               imgPath="assets/img/solhintLogo.webp"
               envID="solhintLogo" envText="Solhint linter"
@@ -147,6 +145,21 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
               description={intl.formatMessage({ id: 'home.sourcifyPluginDesc' })}
               callback={() => startSourceVerify()}
             />
+            <PluginButton
+              imgPath="assets/img/dgit.webp"
+              envID="dgitLogo"
+              envText="Dgit"
+              description={intl.formatMessage({ id: 'home.dgitPluginDesc' })}
+              remixMaintained={true}
+              callback={() => startDgit()}
+            />
+            <PluginButton
+              imgPath="assets/img/oneclickdapp.webp"
+              envID="oneClickDappLogo"
+              envText="OneClickDapp"
+              description={intl.formatMessage({ id: 'home.oneClickDappDesc' })}
+              callback={() => startOneClickDapp()}
+            />
             <PluginButton
               imgPath="assets/img/unitTesting.webp"
               envID="sUTLogo"

libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx

@@ -105,31 +105,36 @@ function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) {
             deviceType={"desktop"}
             itemClass="w-100"
           >
-            <WorkspaceTemplate
-              gsID="starkNetLogo"
-              workspaceTitle="Blank"
-              description={intl.formatMessage({ id: 'home.blankTemplateDesc' })}
-              callback={() => createWorkspace("blank")} />
-            <WorkspaceTemplate
-              gsID="solhintLogo"
-              workspaceTitle="Remix Default"
-              description={intl.formatMessage({ id: 'home.remixDefaultTemplateDesc' })}
-              callback={() => createWorkspace("remixDefault")} />
-            <WorkspaceTemplate
-              gsID="sourcifyLogo"
-              workspaceTitle="OpenZeppelin ERC20"
-              description={intl.formatMessage({ id: 'home.ozerc20TemplateDesc' })}
-              callback={() => createWorkspace("ozerc20")} />
             <WorkspaceTemplate
               gsID="sUTLogo"
-              workspaceTitle="OpenZeppelin ERC721"
-              description={intl.formatMessage({ id: 'home.ozerc721TemplateDesc' })}
-              callback={() => createWorkspace("ozerc721")} />
+              workspaceTitle="Gnosis Safe MultiSig"
+              description={intl.formatMessage({ id: 'home.gnosisSafeMultisigTemplateDesc' })}
+              callback={() => createWorkspace("gnosisSafeMultisig")} />
             <WorkspaceTemplate
               gsID="sUTLogo"
               workspaceTitle="0xProject ERC20"
               description={intl.formatMessage({ id: 'home.zeroxErc20TemplateDesc' })}
               callback={() => createWorkspace("zeroxErc20")} />
+              <WorkspaceTemplate
+                gsID="sourcifyLogo"
+                workspaceTitle="OpenZeppelin ERC20"
+                description={intl.formatMessage({ id: 'home.ozerc20TemplateDesc' })}
+                callback={() => createWorkspace("ozerc20")} />
+              <WorkspaceTemplate
+                gsID="sUTLogo"
+                workspaceTitle="OpenZeppelin ERC721"
+                description={intl.formatMessage({ id: 'home.ozerc721TemplateDesc' })}
+                callback={() => createWorkspace("ozerc721")} />
+              <WorkspaceTemplate
+                gsID="sUTLogo"
+                workspaceTitle="OpenZeppelin ERC1155"
+                description={intl.formatMessage({ id: 'home.ozerc1155TemplateDesc' })}
+                callback={() => createWorkspace("ozerc1155")} />
+              <WorkspaceTemplate
+                gsID="solhintLogo"
+                workspaceTitle="Remix Default"
+                description={intl.formatMessage({ id: 'home.remixDefaultTemplateDesc' })}
+                callback={() => createWorkspace("remixDefault")} />
           </Carousel>
         </ThemeContext.Provider>
       </div>

libs/remix-ui/home-tab/src/lib/components/homeTabLearn.tsx

@@ -31,10 +31,10 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
     window.open("https://remix-ide.readthedocs.io/en/latest/remix_tutorials_learneth.html?highlight=learneth#learneth-tutorial-repos", '_blank')
   }
 
-  const startLearnEthTutorial = async (tutorial) => {
+  const startLearnEthTutorial = async (tutorial: 'basics' | 'useofweb3js' | 'deploylibraries') => {
     await plugin.appManager.activatePlugin(['solidity', 'LearnEth', 'solidityUnitTesting'])
-    plugin.call('LearnEth', 'startTutorial', 'ethereum/remix-workshops', 'master', tutorial)
     plugin.verticalIcons.select('LearnEth')
+    plugin.call('LearnEth', 'startTutorial', 'ethereum/remix-workshops', 'master', tutorial)
     _paq.push(['trackEvent', 'hometab', 'startLearnEthTutorial', tutorial])
   }
 
@@ -45,7 +45,9 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
           <FormattedMessage id="home.learn" />
         </label>
         <button
-          onClick={ ()=> openLink()}
+          onClick={ async () => {
+            await startLearnEthTutorial('basics')
+          }}
           className="h-100 px-2 pt-0 btn"
         >
           <img className="align-self-center" src="assets/img/learnEthLogo.webp" alt="" style={ { filter: themeFilter.filter, width: "1rem", height: "1ren" } } />
@@ -54,11 +56,11 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
       <div className="d-flex flex-column">
         <label className="d-flex flex-column btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Basics }})}>
           <label className="card-title align-self-start m-0 float-left" style={{fontSize: "1rem"}}>
-            <FormattedMessage id="home.remixBasics" />
+            <FormattedMessage id="home.learnEth1" />
           </label>
           {(state.visibleTutorial === VisibleTutorial.Basics) && <div className="pt-2 d-flex flex-column text-left">
             <span>
-              <FormattedMessage id="home.remixBasicsDesc" />
+              <FormattedMessage id="home.learnEth1Desc" />
             </span>
             <button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('basics')}>
               <FormattedMessage id="home.getStarted" />
@@ -67,11 +69,11 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
         </label>
         <label className="d-flex flex-column btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Intermediate }})}>
           <label className="card-title align-self-start m-0 float-left" style={{fontSize: "1rem"}}>
-            <FormattedMessage id="home.remixIntermediate" />
+            <FormattedMessage id="home.learnEth2" />
           </label>
           {(state.visibleTutorial === VisibleTutorial.Intermediate) && <div className="pt-2 d-flex flex-column text-left">
             <span>
-            <FormattedMessage id="home.remixIntermediateDesc" /></span>
+            <FormattedMessage id="home.learnEth2Desc" /></span>
             <button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('useofweb3js')}>
             <FormattedMessage id="home.getStarted" />
           </button>