mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

updates to files section

Browse Source
pull/5370/head
Joseph Izang 7 months ago
parent a8ea59a971
commit b2a9763368
3 changed files with 36 additions and 74 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      apps/remix-ide/src/app/tabs/locales/en/home.json
  2. 77
      libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx
  3. 27
      libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx

6
apps/remix-ide/src/app/tabs/locales/en/home.json
Unescape View File

@ -39,7 +39,7 @@
"home.zeroxErc20TemplateDesc": "Create an ERC20 token by importing 0xProject contract.", "home.zeroxErc20TemplateDesc": "Create an ERC20 token by importing 0xProject contract.",
"home.learn": "Learn", "home.learn": "Learn",
"home.learnEth1": "Remix Basics", "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.learnEth2": "Intro to Solidity",
"home.learnEth2Desc": "Interactively learn Solidity beginner concepts.", "home.learnEth2Desc": "Interactively learn Solidity beginner concepts.",
"home.remixAdvanced": "Deploying with Libraries", "home.remixAdvanced": "Deploying with Libraries",
@ -57,9 +57,9 @@
"home.searchDocumentation": "Search Documentation", "home.searchDocumentation": "Search Documentation",
"home.files": "Files", "home.files": "Files",
"home.newFile": "New File", "home.newFile": "New File",
"home.startCoding": "Start Coding", "home.startCoding": "New",
"home.startCodingPlayground": "Open a playground for prototyping and simple learning", "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.openFileTooltip": "Open a File from your File System",
"home.accessFileSystem": "Connect to local filesystem", "home.accessFileSystem": "Connect to local filesystem",
"home.loadFrom": "Load from", "home.loadFrom": "Load from",

77
libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx
Unescape View File

@ -1,8 +1,8 @@
/* eslint-disable @typescript-eslint/no-unused-vars */ /* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useState, useRef, useReducer, useEffect } from 'react' import React, { useState, useRef, useReducer, useEffect } from 'react'
import { FormattedMessage } from 'react-intl' import { FormattedMessage } from 'react-intl'
import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line import {ModalDialog} from '@remix-ui/modal-dialog' // eslint-disable-line
import { Toaster } from '@remix-ui/toaster' // eslint-disable-line import {Toaster} from '@remix-ui/toaster' // eslint-disable-line
const _paq = (window._paq = window._paq || []) // eslint-disable-line const _paq = (window._paq = window._paq || []) // eslint-disable-line
import { CustomTooltip } from '@remix-ui/helper' import { CustomTooltip } from '@remix-ui/helper'
import { TEMPLATE_NAMES } from '@remix-ui/workspace' import { TEMPLATE_NAMES } from '@remix-ui/workspace'
@ -14,7 +14,7 @@ interface HomeTabFileProps {
const loadingInitialState = { const loadingInitialState = {
tooltip: '', tooltip: '',
showModalDialog: false, showModalDialog: false,
importSource: '' importSource: '',
} }
const loadingReducer = (state = loadingInitialState, action) => { const loadingReducer = (state = loadingInitialState, action) => {
@ -22,7 +22,7 @@ const loadingReducer = (state = loadingInitialState, action) => {
...state, ...state,
tooltip: action.tooltip, tooltip: action.tooltip,
showModalDialog: false, showModalDialog: false,
importSource: '' importSource: '',
} }
} }
@ -45,7 +45,7 @@ function HomeTabFile({ plugin }: HomeTabFileProps) {
modalInfo: { title: '', loadItem: '', examples: [], prefix: '' }, modalInfo: { title: '', loadItem: '', examples: [], prefix: '' },
importSource: '', importSource: '',
toasterMsg: '', toasterMsg: '',
recentWorkspaces: [] recentWorkspaces: [],
}) })
const [, dispatch] = useReducer(loadingReducer, loadingInitialState) const [, dispatch] = useReducer(loadingReducer, loadingInitialState)
@ -71,7 +71,9 @@ function HomeTabFile({ plugin }: HomeTabFileProps) {
if (!recents) { if (!recents) {
newRecents = [] newRecents = []
} else { } else {
newRecents = recents.filter((el) => { return el !== name}) newRecents = recents.filter((el) => {
return el !== name
})
localStorage.setItem('recentWorkspaces', JSON.stringify(newRecents)) localStorage.setItem('recentWorkspaces', JSON.stringify(newRecents))
} }
setState((prevState) => { setState((prevState) => {
@ -85,8 +87,7 @@ function HomeTabFile({ plugin }: HomeTabFileProps) {
try { try {
plugin.off('filePanel', 'setWorkspace') plugin.off('filePanel', 'setWorkspace')
plugin.off('filePanel', 'workspaceDeleted') plugin.off('filePanel', 'workspaceDeleted')
} catch (e) { } catch (e) {}
}
} }
}, [plugin]) }, [plugin])
@ -162,7 +163,6 @@ contract HelloWorld {
} else { } else {
await plugin.call('fileManager', 'open', '/contracts/HelloWorld.sol') await plugin.call('fileManager', 'open', '/contracts/HelloWorld.sol')
} }
} }
const uploadFile = async (target) => { const uploadFile = async (target) => {
@ -216,14 +216,7 @@ contract HelloWorld {
return ( return (
<> <>
<ModalDialog <ModalDialog id="homeTab" title={'Import from ' + state.modalInfo.title} okLabel="Import" hide={!state.showModalDialog} handleHide={() => hideFullMessage()} okFn={() => processLoading(state.modalInfo.title)}>
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"> <div className="p-2 user-select-auto">
{state.modalInfo.loadItem !== '' && <span>Enter the {state.modalInfo.loadItem} you would like to load.</span>} {state.modalInfo.loadItem !== '' && <span>Enter the {state.modalInfo.loadItem} you would like to load.</span>}
{state.modalInfo.examples.length !== 0 && ( {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>} {state.modalInfo.prefix && <span className="text-nowrap align-self-center mr-2">ipfs://</span>}
<input <input
ref={inputValue} ref={inputValue}
type='text' type="text"
name='prompt_text' name="prompt_text"
id='inputPrompt_text' id="inputPrompt_text"
className="w-100 mt-1 form-control" className="w-100 mt-1 form-control"
data-id="homeTabModalDialogCustomPromptText" data-id="homeTabModalDialogCustomPromptText"
value={state.importSource} value={state.importSource}
@ -256,7 +249,7 @@ contract HelloWorld {
{(state.recentWorkspaces[0] || state.recentWorkspaces[1] || state.recentWorkspaces[2]) && ( {(state.recentWorkspaces[0] || state.recentWorkspaces[1] || state.recentWorkspaces[2]) && (
<div className="d-flex flex-column mb-3"> <div className="d-flex flex-column mb-3">
<label style={{ fontSize: '0.8rem' }} className="mt-3"> <label style={{ fontSize: '0.8rem' }} className="mt-3">
Recent workspaces Recent workspaces
</label> </label>
{state.recentWorkspaces[0] && state.recentWorkspaces[0] !== '' && ( {state.recentWorkspaces[0] && state.recentWorkspaces[0] !== '' && (
<a className="cursor-pointer mb-1 ml-2" href="#" onClick={(e) => handleSwichToRecentWorkspace(e, 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> </label>
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<div className="d-flex flex-row"> <div className="d-flex flex-row">
<CustomTooltip <CustomTooltip placement={'top'} tooltipId="overlay-tooltip" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="home.startCodingPlayground" />} tooltipTextClasses="border bg-light text-dark p-1 pr-3">
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()}> <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" /> <FormattedMessage id="home.startCoding" />
</button> </button>
</CustomTooltip> </CustomTooltip>
<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">
placement={'top'}
tooltipId="overlay-tooltip"
tooltipClasses="text-nowrap"
tooltipText={<FormattedMessage id='home.openFileTooltip' />}
tooltipTextClasses="border bg-light text-dark p-1 pr-3"
>
<span> <span>
<label className="btn text-nowrap p-2 mr-2 border my-1" style={{ width: 'fit-content', cursor: 'pointer' }} htmlFor="openFileInput"> <label className="btn text-nowrap p-2 mr-2 border my-1" style={{ width: 'fit-content', cursor: 'pointer' }} htmlFor="openFileInput">
<FormattedMessage id="home.openFile" /> <FormattedMessage id="home.openFile" />
@ -315,23 +296,13 @@ contract HelloWorld {
/> />
</span> </span>
</CustomTooltip> </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://')}> <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> </button>
</div> </div>
</div> </div>
{/* <label style={{ fontSize: '0.8rem' }} className="pt-3"> {/* <label style={{ fontSize: '0.8rem' }} className="pt-3">
<FormattedMessage id="home.loadFrom" /> <FormattedMessage id="home.loadFrom" />
@ -349,13 +320,7 @@ contract HelloWorld {
> >
HTTPS HTTPS
</button> */} </button> */}
<CustomTooltip <CustomTooltip placement={'top'} tooltipId="overlay-tooltip" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="home.connectToLocalhost" />} tooltipTextClasses="border bg-light text-dark p-1 pr-3">
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()}> <button className="btn btn-block w-100 text-nowrap p-2 border my-1" style={{ width: 'fit-content' }} onClick={() => connectToLocalhost()}>
<FormattedMessage id="home.accessFileSystem" /> <FormattedMessage id="home.accessFileSystem" />
</button> </button>

27
libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx
Unescape View File

@ -1,12 +1,10 @@
/* eslint-disable @typescript-eslint/no-unused-vars */ /* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useEffect, useRef, useContext, SyntheticEvent, useState } from 'react' import React, { useEffect, useRef, useContext, SyntheticEvent, useState } from 'react'
import { useIntl, FormattedMessage } from 'react-intl' 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 { ThemeContext } from '../themeContext'
import Carousel from 'react-multi-carousel'
import WorkspaceTemplate from './workspaceTemplate' import WorkspaceTemplate from './workspaceTemplate'
import 'react-multi-carousel/lib/styles.css' import 'react-multi-carousel/lib/styles.css'
import CustomNavButtons from './customNavButtons'
import { appPlatformTypes, platformContext } from '@remix-ui/app' import { appPlatformTypes, platformContext } from '@remix-ui/app'
import { CustomTooltip } from '@remix-ui/helper' import { CustomTooltip } from '@remix-ui/helper'
@ -34,42 +32,42 @@ const workspaceTemplates: WorkspaceTemplate[] = [
workspaceTitle: 'Playground', workspaceTitle: 'Playground',
description: 'Create a new project using this template.', description: 'Create a new project using this template.',
projectLogo: 'assets/img/remixverticaltextLogo.png', projectLogo: 'assets/img/remixverticaltextLogo.png',
templateName: 'playground' templateName: 'playground',
}, },
{ {
gsID: 'sUTLogo', gsID: 'sUTLogo',
workspaceTitle: 'Circom', workspaceTitle: 'Circom',
description: 'Create a new ZK Project with Circom using this template.', description: 'Create a new ZK Project with Circom using this template.',
projectLogo: 'assets/img/circom.webp', projectLogo: 'assets/img/circom.webp',
templateName: 'semaphore' templateName: 'semaphore',
}, },
{ {
gsID: 'sUTLogo', gsID: 'sUTLogo',
workspaceTitle: 'Uniswap', workspaceTitle: 'Uniswap',
description: 'Create a new MultiSig wallet using this template.', description: 'Create a new MultiSig wallet using this template.',
projectLogo: 'assets/img/gnosissafeLogo.png', projectLogo: 'assets/img/gnosissafeLogo.png',
templateName: 'uniswapV4Template' templateName: 'uniswapV4Template',
}, },
{ {
gsID: 'sUTLogo', gsID: 'sUTLogo',
workspaceTitle: 'ERC20', workspaceTitle: 'ERC20',
description: 'Create a new ERC20 token using this template.', description: 'Create a new ERC20 token using this template.',
projectLogo: 'assets/img/oxprojectLogo.png', projectLogo: 'assets/img/oxprojectLogo.png',
templateName: 'ozerc20' templateName: 'ozerc20',
}, },
{ {
gsID: 'sUTLogo', gsID: 'sUTLogo',
workspaceTitle: 'NFT / ERC721', workspaceTitle: 'NFT / ERC721',
description: 'Create a new ERC721 token using this template.', description: 'Create a new ERC721 token using this template.',
projectLogo: 'assets/img/openzeppelinLogo.png', projectLogo: 'assets/img/openzeppelinLogo.png',
templateName: 'ozerc721' templateName: 'ozerc721',
}, },
{ {
gsID: 'sUTLogo', gsID: 'sUTLogo',
workspaceTitle: 'MultiSig', workspaceTitle: 'MultiSig',
description: 'Create a new MultiSig wallet using this template.', description: 'Create a new MultiSig wallet using this template.',
projectLogo: 'assets/img/gnosissafeLogo.png', projectLogo: 'assets/img/gnosissafeLogo.png',
templateName: 'gnosisSafeMultisig' templateName: 'gnosisSafeMultisig',
}, },
] ]
@ -115,8 +113,7 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
} }
const createWorkspace = async (templateName) => { const createWorkspace = async (templateName) => {
if (platform === appPlatformTypes.desktop) {
if (platform === appPlatformTypes.desktop){
await plugin.call('remix-templates', 'loadTemplateInNewWindow', templateName) await plugin.call('remix-templates', 'loadTemplateInNewWindow', templateName)
return return
} }
@ -167,7 +164,6 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
const allworkspaces = await plugin.call('filePanel', 'getWorkspaces') const allworkspaces = await plugin.call('filePanel', 'getWorkspaces')
console.log('currentWorkspace', { currentWorkspace, allworkspaces }) console.log('currentWorkspace', { currentWorkspace, allworkspaces })
if (target.classList.contains('btn-primary') && target.dataset.id === activeButton) { 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"> <div className="d-flex flex-row align-items-center mb-3 flex-nowrap">
{workspaceTemplates.slice(0, 3).map((template, index) => ( {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}`}> <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) => { onClick={(e) => {
manipulateClasses(e) manipulateClasses(e)
// createWorkspace(template.templateName) // 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}`}> <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 <button
key={index} key={index}
className={"btn border p-2 text-nowrap mr-3"} className={'btn border p-2 text-nowrap mr-3'}
onClick={() => { onClick={() => {
createWorkspace(template.templateName) createWorkspace(template.templateName)
}} }}
@ -218,4 +216,3 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
} }
export default HomeTabGetStarted export default HomeTabGetStarted

Write Preview
Loading…
Cancel
Save