updates to files section

7 months ago · b2a9763368
parent a8ea59a971
commit b2a9763368
3 changed files with 36 additions and 74 deletions
--- a/apps/remix-ide/src/app/tabs/locales/en/home.json
+++ b/apps/remix-ide/src/app/tabs/locales/en/home.json
@ -39,7 +39,7 @@
  "home.zeroxErc20TemplateDesc": "Create an ERC20 token by importing 0xProject contract.",
  "home.learn": "Learn",
  "home.learnEth1": "Remix Basics",
-  "home.learnEth1Desc":"An introduction to Remix's interface and basic operations.",
+  "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",
@ -57,9 +57,9 @@
  "home.searchDocumentation": "Search Documentation",
  "home.files": "Files",
  "home.newFile": "New File",
-  "home.startCoding": "Start Coding",
+  "home.startCoding": "New",
  "home.startCodingPlayground": "Open a playground for prototyping and simple learning",
-  "home.openFile": "Open File",
+  "home.openFile": "Open",
  "home.openFileTooltip": "Open a File from your File System",
  "home.accessFileSystem": "Connect to local filesystem",
  "home.loadFrom": "Load from",
--- a/libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx
@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useState, useRef, useReducer, useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
-import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
-import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
+import {ModalDialog} from '@remix-ui/modal-dialog' // eslint-disable-line
+import {Toaster} from '@remix-ui/toaster' // eslint-disable-line
 const _paq = (window._paq = window._paq || []) // eslint-disable-line
 import { CustomTooltip } from '@remix-ui/helper'
 import { TEMPLATE_NAMES } from '@remix-ui/workspace'
@ -14,7 +14,7 @@ interface HomeTabFileProps {
 const loadingInitialState = {
  tooltip: '',
  showModalDialog: false,
-  importSource: ''
+  importSource: '',
 }

 const loadingReducer = (state = loadingInitialState, action) => {
@ -22,7 +22,7 @@ const loadingReducer = (state = loadingInitialState, action) => {
    ...state,
    tooltip: action.tooltip,
    showModalDialog: false,
-    importSource: ''
+    importSource: '',
  }
 }

@ -45,7 +45,7 @@ function HomeTabFile({ plugin }: HomeTabFileProps) {
    modalInfo: { title: '', loadItem: '', examples: [], prefix: '' },
    importSource: '',
    toasterMsg: '',
-    recentWorkspaces: []
+    recentWorkspaces: [],
  })

  const [, dispatch] = useReducer(loadingReducer, loadingInitialState)
@ -71,7 +71,9 @@ function HomeTabFile({ plugin }: HomeTabFileProps) {
      if (!recents) {
        newRecents = []
      } else {
-        newRecents = recents.filter((el) => { return el !== name})
+        newRecents = recents.filter((el) => {
+          return el !== name
+        })
        localStorage.setItem('recentWorkspaces', JSON.stringify(newRecents))
      }
      setState((prevState) => {
@ -85,8 +87,7 @@ function HomeTabFile({ plugin }: HomeTabFileProps) {
      try {
        plugin.off('filePanel', 'setWorkspace')
        plugin.off('filePanel', 'workspaceDeleted')
-      } catch (e) {
-      }
+      } catch (e) {}
    }
  }, [plugin])

@ -162,7 +163,6 @@ contract HelloWorld {
    } else {
      await plugin.call('fileManager', 'open', '/contracts/HelloWorld.sol')
    }
-
  }

  const uploadFile = async (target) => {
@ -216,14 +216,7 @@ contract HelloWorld {

  return (
    <>
-      <ModalDialog
-        id="homeTab"
-        title={'Import from ' + state.modalInfo.title}
-        okLabel="Import"
-        hide={!state.showModalDialog}
-        handleHide={() => hideFullMessage()}
-        okFn={() => processLoading(state.modalInfo.title)}
-      >
+      <ModalDialog id="homeTab" title={'Import from ' + state.modalInfo.title} okLabel="Import" hide={!state.showModalDialog} handleHide={() => hideFullMessage()} okFn={() => processLoading(state.modalInfo.title)}>
        <div className="p-2 user-select-auto">
          {state.modalInfo.loadItem !== '' && <span>Enter the {state.modalInfo.loadItem} you would like to load.</span>}
          {state.modalInfo.examples.length !== 0 && (
@ -236,9 +229,9 @@ contract HelloWorld {
            {state.modalInfo.prefix && <span className="text-nowrap align-self-center mr-2">ipfs://</span>}
            <input
              ref={inputValue}
-              type='text'
-              name='prompt_text'
-              id='inputPrompt_text'
+              type="text"
+              name="prompt_text"
+              id="inputPrompt_text"
              className="w-100 mt-1 form-control"
              data-id="homeTabModalDialogCustomPromptText"
              value={state.importSource}
@ -256,7 +249,7 @@ contract HelloWorld {
        {(state.recentWorkspaces[0] || state.recentWorkspaces[1] || state.recentWorkspaces[2]) && (
          <div className="d-flex flex-column mb-3">
            <label style={{ fontSize: '0.8rem' }} className="mt-3">
-                Recent workspaces
+              Recent workspaces
            </label>
            {state.recentWorkspaces[0] && state.recentWorkspaces[0] !== '' && (
              <a className="cursor-pointer mb-1 ml-2" href="#" onClick={(e) => handleSwichToRecentWorkspace(e, state.recentWorkspaces[0])}>
@ -280,24 +273,12 @@ contract HelloWorld {
        </label>
        <div className="d-flex flex-column">
          <div className="d-flex flex-row">
-            <CustomTooltip
-              placement={'top'}
-              tooltipId="overlay-tooltip"
-              tooltipClasses="text-nowrap"
-              tooltipText={<FormattedMessage id='home.startCodingPlayground' />}
-              tooltipTextClasses="border bg-light text-dark p-1 pr-3"
-            >
+            <CustomTooltip placement={'top'} tooltipId="overlay-tooltip" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="home.startCodingPlayground" />} tooltipTextClasses="border bg-light text-dark p-1 pr-3">
              <button className="btn btn-primary text-nowrap p-2 mr-2 border my-1" data-id="homeTabStartCoding" style={{ width: 'fit-content' }} onClick={() => startCoding()}>
                <FormattedMessage id="home.startCoding" />
              </button>
            </CustomTooltip>
-            <CustomTooltip
-              placement={'top'}
-              tooltipId="overlay-tooltip"
-              tooltipClasses="text-nowrap"
-              tooltipText={<FormattedMessage id='home.openFileTooltip' />}
-              tooltipTextClasses="border bg-light text-dark p-1 pr-3"
-            >
+            <CustomTooltip placement={'top'} tooltipId="overlay-tooltip" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="home.openFileTooltip" />} tooltipTextClasses="border bg-light text-dark p-1 pr-3">
              <span>
                <label className="btn text-nowrap p-2 mr-2 border my-1" style={{ width: 'fit-content', cursor: 'pointer' }} htmlFor="openFileInput">
                  <FormattedMessage id="home.openFile" />
@ -315,23 +296,13 @@ contract HelloWorld {
                />
              </span>
            </CustomTooltip>
-            <button
-              className="btn text-nowrap p-2 mr-2 border my-1"
-              data-id="landingPageImportFromGitHubButton"
-              onClick={() =>
-                showFullMessage('GitHub', 'github URL', [
-                  'https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol',
-                  'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol',
-                ])
-              }
-            >
-            GitHub
-            </button>
            <button className="btn text-nowrap p-2 mr-2 border my-1" onClick={() => showFullMessage('Ipfs', 'ipfs hash', ['ipfs://QmQQfBMkpDgmxKzYaoAtqfaybzfgGm9b2LWYyT56Chv6xH'], 'ipfs://')}>
-            IPFS
+              IPFS
+            </button>
+            <button className="btn text-nowrap p-2 mr-2 border my-1" data-id="landingPageImportFromGitHubButton" onClick={() => showFullMessage('GitHub', 'github URL', ['https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol', 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol'])}>
+              Git Clone
            </button>
          </div>
-
        </div>
        {/* <label style={{ fontSize: '0.8rem' }} className="pt-3">
          <FormattedMessage id="home.loadFrom" />
@ -349,13 +320,7 @@ contract HelloWorld {
          >
            HTTPS
          </button> */}
-          <CustomTooltip
-            placement={'top'}
-            tooltipId="overlay-tooltip"
-            tooltipClasses="text-nowrap"
-            tooltipText={<FormattedMessage id="home.connectToLocalhost" />}
-            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
-          >
+          <CustomTooltip placement={'top'} tooltipId="overlay-tooltip" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="home.connectToLocalhost" />} tooltipTextClasses="border bg-light text-dark p-1 pr-3">
            <button className="btn btn-block w-100 text-nowrap p-2 border my-1" style={{ width: 'fit-content' }} onClick={() => connectToLocalhost()}>
              <FormattedMessage id="home.accessFileSystem" />
            </button>
--- a/libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx
@ -1,12 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useEffect, useRef, useContext, SyntheticEvent, useState } from 'react'
 import { useIntl, FormattedMessage } from 'react-intl'
-import { TEMPLATE_NAMES,TEMPLATE_METADATA } from '@remix-ui/workspace'
+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'
 import { CustomTooltip } from '@remix-ui/helper'

@ -34,42 +32,42 @@ const workspaceTemplates: WorkspaceTemplate[] = [
    workspaceTitle: 'Playground',
    description: 'Create a new project using this template.',
    projectLogo: 'assets/img/remixverticaltextLogo.png',
-    templateName: 'playground'
+    templateName: 'playground',
  },
  {
    gsID: 'sUTLogo',
    workspaceTitle: 'Circom',
    description: 'Create a new ZK Project with Circom using this template.',
    projectLogo: 'assets/img/circom.webp',
-    templateName: 'semaphore'
+    templateName: 'semaphore',
  },
  {
    gsID: 'sUTLogo',
    workspaceTitle: 'Uniswap',
    description: 'Create a new MultiSig wallet using this template.',
    projectLogo: 'assets/img/gnosissafeLogo.png',
-    templateName: 'uniswapV4Template'
+    templateName: 'uniswapV4Template',
  },
  {
    gsID: 'sUTLogo',
    workspaceTitle: 'ERC20',
    description: 'Create a new ERC20 token using this template.',
    projectLogo: 'assets/img/oxprojectLogo.png',
-    templateName: 'ozerc20'
+    templateName: 'ozerc20',
  },
  {
    gsID: 'sUTLogo',
    workspaceTitle: 'NFT / ERC721',
    description: 'Create a new ERC721 token using this template.',
    projectLogo: 'assets/img/openzeppelinLogo.png',
-    templateName: 'ozerc721'
+    templateName: 'ozerc721',
  },
  {
    gsID: 'sUTLogo',
    workspaceTitle: 'MultiSig',
    description: 'Create a new MultiSig wallet using this template.',
    projectLogo: 'assets/img/gnosissafeLogo.png',
-    templateName: 'gnosisSafeMultisig'
+    templateName: 'gnosisSafeMultisig',
  },
 ]

@ -115,8 +113,7 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
  }

  const createWorkspace = async (templateName) => {
-
-    if (platform === appPlatformTypes.desktop){
+    if (platform === appPlatformTypes.desktop) {
      await plugin.call('remix-templates', 'loadTemplateInNewWindow', templateName)
      return
    }
@ -167,7 +164,6 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
    const allworkspaces = await plugin.call('filePanel', 'getWorkspaces')
    console.log('currentWorkspace', { currentWorkspace, allworkspaces })
    if (target.classList.contains('btn-primary') && target.dataset.id === activeButton) {
-
    }
  }

@ -182,7 +178,9 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
            <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" key={`${template.gsID}-${template.workspaceTitle}-${index}`}>
-                  <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"}
+                  <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'}
                    onClick={(e) => {
                      manipulateClasses(e)
                      // createWorkspace(template.templateName)
@ -199,7 +197,7 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
                <CustomTooltip tooltipText={template.description} tooltipId={template.gsID} tooltipClasses="text-nowrap" tooltipTextClasses="border bg-light text-dark p-1 pr-3" placement="bottom-start" key={`${template.gsID}-${template.workspaceTitle}-${index}`}>
                  <button
                    key={index}
-                    className={"btn border p-2 text-nowrap mr-3"}
+                    className={'btn border p-2 text-nowrap mr-3'}
                    onClick={() => {
                      createWorkspace(template.templateName)
                    }}
@ -218,4 +216,3 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
 }

 export default HomeTabGetStarted
-