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

final cleanup

Browse Source
builtincomp
lianahus 2 years ago committed by Aniket
parent ec55870cc8
commit df249f0f1c
9 changed files with 80 additions and 223 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. 48
      libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx
  2. 39
      libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx
  3. 4
      libs/remix-ui/home-tab/src/lib/components/homeTabLearn.tsx
  4. 2
      libs/remix-ui/home-tab/src/lib/components/homeTabScamAlert.tsx
  5. 14
      libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx
  6. 12
      libs/remix-ui/home-tab/src/lib/components/rssFeed.css
  7. 42
      libs/remix-ui/home-tab/src/lib/components/rssFeed.tsx
  8. 3
      libs/remix-ui/home-tab/src/lib/components/workspaceTemplate.tsx
  9. 139
      libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

48
libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx
Unescape View File

@ -47,11 +47,6 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
plugin.verticalIcons.select('solhint')
_paq.push(['trackEvent', 'pluginManager', 'userActivate', 'solhint'])
}
const startLearnEth = async () => {
await plugin.appManager.activatePlugin(['solidity', 'LearnEth', 'solidityUnitTesting'])
plugin.verticalIcons.select('learnEth')
_paq.push(['trackEvent', 'pluginManager', 'userActivate', 'learnEth'])
}
const startSourceVerify = async () => {
await plugin.appManager.activatePlugin(['solidity', 'sourcify'])
plugin.verticalIcons.select('sourcify')
@ -63,7 +58,7 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
_paq.push(['trackEvent', 'pluginManager', 'userActivate', 'solidityUnitTesting'])
}
return (
return (
<div className="pl-2 w-100" id="hTFeaturedPlugins">
<label className="" style={{fontSize: "1.2rem"}}>Featured Plugins</label>
<div className="w-100 d-flex flex-column">
@ -84,11 +79,42 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
deviceType={"desktop"}
itemClass="w-100"
>
<PluginButton imgPath="assets/img/solidityLogo.webp" envID="solidityLogo" envText="Solidity" description="Compile, test and analyse smart contract." remixMaintained={true} callback={() => startSolidity()} />
<PluginButton imgPath="assets/img/starkNetLogo.webp" envID="starkNetLogo" envText="StarkNet" description="Compile and deploy contracts with Cairo, a native language for StarkNet." l2={true} callback={() => startStarkNet()} />
<PluginButton imgPath="assets/img/solhintLogo.webp" envID="solhintLogo" envText="Solhint linter" description="Solhint is an open source project for linting Solidity code." callback={() => startSolhint()} />
<PluginButton imgPath="assets/img/sourcifyNewLogo.webp" envID="sourcifyLogo" envText="Sourcify" description="Solidity contract and metadata verification service." callback={() => startSourceVerify()} />
<PluginButton imgPath="assets/img/unitTesting.webp" envID="sUTLogo" envText="Solidity unit testing" description="Write and run unit tests for your contracts in Solidity." callback={() => startSolidityUnitTesting()} />
<PluginButton
imgPath="assets/img/solidityLogo.webp"
envID="solidityLogo"
envText="Solidity"
description="Compile, test and analyse smart contract."
remixMaintained={true}
callback={() => startSolidity()}
/>
<PluginButton
imgPath="assets/img/starkNetLogo.webp"
envID="starkNetLogo"
envText="StarkNet"
description="Compile and deploy contracts with Cairo, a native language for StarkNet."
l2={true}
callback={() => startStarkNet()}
/>
<PluginButton
imgPath="assets/img/solhintLogo.webp"
envID="solhintLogo" envText="Solhint linter"
description="Solhint is an open source project for linting Solidity code."
callback={() => startSolhint()}
/>
<PluginButton
imgPath="assets/img/sourcifyNewLogo.webp"
envID="sourcifyLogo"
envText="Sourcify"
description="Solidity contract and metadata verification service."
callback={() => startSourceVerify()}
/>
<PluginButton
imgPath="assets/img/unitTesting.webp"
envID="sUTLogo"
envText="Solidity unit testing"
description="Write and run unit tests for your contracts in Solidity."
callback={() => startSolidityUnitTesting()}
/>
</Carousel>
</ThemeContext.Provider>
</div>

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

@ -53,15 +53,40 @@ function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) {
deviceType={"desktop"}
itemClass="w-100"
>
<WorkspaceTemplate gsID="starkNetLogo" workspaceTitle="Blank" description="Create an empty workspace." callback={() => createWorkspace("blank")} />
<WorkspaceTemplate gsID="solhintLogo" workspaceTitle="Remix Default" description="Create a workspace with sample files." callback={() => createWorkspace("remixDefault")} />
<WorkspaceTemplate gsID="sourcifyLogo" workspaceTitle="OpenZeppelin ERC20" description="Create an ERC20 token by importing OpenZeppelin library." callback={() => createWorkspace("ozerc20")} />
<WorkspaceTemplate gsID="sUTLogo" workspaceTitle="OpenZeppelin ERC721" description="Create an NFT token by importing OpenZeppelin library." callback={() => createWorkspace("ozerc721")} />
<WorkspaceTemplate gsID="sUTLogo" workspaceTitle="0xProject ERC20" description="Create an ERC20 token by importing 0xProject contract." callback={() => createWorkspace("zeroxErc20")} />
<WorkspaceTemplate gsID="solidityLogo" workspaceTitle="Add a workspace" description="Create and configure a workspace manually." callback={() => createWorkspace("")} />
<WorkspaceTemplate
gsID="starkNetLogo"
workspaceTitle="Blank"
description="Create an empty workspace."
callback={() => createWorkspace("blank")} />
<WorkspaceTemplate
gsID="solhintLogo"
workspaceTitle="Remix Default"
description="Create a workspace with sample files."
callback={() => createWorkspace("remixDefault")} />
<WorkspaceTemplate
gsID="sourcifyLogo"
workspaceTitle="OpenZeppelin ERC20"
description="Create an ERC20 token by importing OpenZeppelin library."
callback={() => createWorkspace("ozerc20")} />
<WorkspaceTemplate
gsID="sUTLogo"
workspaceTitle="OpenZeppelin ERC721"
description="Create an NFT token by importing OpenZeppelin library."
callback={() => createWorkspace("ozerc721")} />
<WorkspaceTemplate
gsID="sUTLogo"
workspaceTitle="0xProject ERC20"
description="Create an ERC20 token by importing 0xProject contract."
callback={() => createWorkspace("zeroxErc20")} />
<WorkspaceTemplate
gsID="solidityLogo"
workspaceTitle="Add a workspace"
description="Create and configure a workspace manually."
callback={() => createWorkspace("")} />
</Carousel>
</ThemeContext.Provider>
</div> </div>
</div>
</div>
)
}

4
libs/remix-ui/home-tab/src/lib/components/homeTabLearn.tsx
Unescape View File

@ -27,14 +27,14 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
const themeFilter = useContext(ThemeContext)
const openLink = () => {
window.open("https://remix-ide.readthedocs.io/en/latest/remix_tutorials_learneth.html?highlight=learneth#learneth-tutorial-repos", '_blank')
window.open("https://remix-ide.readthedocs.io/en/latest/remix_tutorials_learneth.html?highlight=learneth#learneth-tutorial-repos", '_blank')
}
const startLearnEthTutorial = async (tutorial) => {
await plugin.appManager.activatePlugin(['solidity', 'LearnEth', 'solidityUnitTesting'])
plugin.call('LearnEth', 'startTutorial', 'ethereum/remix-workshops', 'master', tutorial)
plugin.verticalIcons.select('LearnEth')
_paq.push(['trackEvent', 'homeTab', 'startLearnEthTutorial'])
_paq.push(['trackEvent', 'homeTab', 'startLearnEthTutorial', tutorial])
}
return (

2
libs/remix-ui/home-tab/src/lib/components/homeTabScamAlert.tsx
Unescape View File

@ -1,5 +1,5 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useEffect, useState, useRef } from 'react'
import React from 'react'
function HomeTabScamAlert () {
return (

14
libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx
Unescape View File

@ -30,13 +30,13 @@ function PluginButton ({ imgPath, envID, envText, callback, l2, description, rem
</button>
{ l2 && <label className="bg-light mx-1 px-1 mb-0 mx-2 position-absolute remixui_home_l2Label">L2</label> }
{ remixMaintained &&
<OverlayTrigger placement="bottom" overlay={
<Tooltip id="overlay-tooltip-run-script">
<span>Maintained by Remix</span>
</Tooltip>
}>
<i className="bg-light text-success mx-1 px-1 mb-0 mx-2 position-absolute remixui_home_maintainedLabel fas fa-check"></i>
</OverlayTrigger>
<OverlayTrigger placement="bottom" overlay={
<Tooltip id="overlay-tooltip-run-script">
<span>Maintained by Remix</span>
</Tooltip>
}>
<i className="bg-light text-success mx-1 px-1 mb-0 mx-2 position-absolute remixui_home_maintainedLabel fas fa-check"></i>
</OverlayTrigger>
}
</div>

12
libs/remix-ui/home-tab/src/lib/components/rssFeed.css
Unescape View File

@ -1,12 +0,0 @@
.RSSFeed-item img {
width: 100%;
}
.RSSFeed-item .truncate {
max-height: 500px;
overflow: hidden;
}
.RSSFeed-item .more-button {
}

42
libs/remix-ui/home-tab/src/lib/components/rssFeed.tsx
Unescape View File

@ -1,42 +0,0 @@
import React, { useState, useEffect } from "react";
import Parser from "rss-parser";
import './rssFeed.css';
interface RSSFeedProps {
feedUrl: string,
maxItems: number,
}
export function RSSFeed({ feedUrl, maxItems }: RSSFeedProps) {
const [feed, setFeed] = useState(null);
useEffect(() => {
const fetchData = async () => {
const parser = new Parser()
const feed = await parser.parseURL(feedUrl);
for (const item of feed.items) {
item.content = item['content:encoded']
item.date = new Date(item.pubDate).toLocaleDateString('en-US', {
month: 'short',
day: 'numeric'
})
}
setFeed(feed);
};
fetchData();
}, [feedUrl]);
return (<>
{feed && feed.items.slice(0, maxItems).map((item: any, index: any) => (
<div className='RSSFeed-item' key={index}>
<a target="_blank" href={item.link}><h3>{item.title}</h3></a>
<p>Author: {item.creator}</p>
<h4>{item.date}</h4>
<div className="truncate" dangerouslySetInnerHTML={{ __html: item.content }} />
<a className="more-button btn mb-3" target="_blank" href={item.link}>READ MORE</a>
<hr></hr>
</div>
))}
</>)
}

3
libs/remix-ui/home-tab/src/lib/components/workspaceTemplate.tsx
Unescape View File

@ -1,7 +1,5 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useContext } from 'react'
import { ThemeContext } from '../themeContext'
import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line
interface WorkspaceTemplateProps {
gsID: string,
workspaceTitle: string,
@ -10,7 +8,6 @@ interface WorkspaceTemplateProps {
}
function WorkspaceTemplate ({ gsID, workspaceTitle, description, callback }: WorkspaceTemplateProps) {
const themeFilter = useContext(ThemeContext)
return (
<div className="d-flex remixui_home_workspaceTemplate">

139
libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
Unescape View File

@ -1,8 +1,7 @@
import React, { useState, useRef, useEffect, useReducer } from 'react' // eslint-disable-line
import React, { useState, useEffect } from 'react' // eslint-disable-line
import './remix-ui-home-tab.css'
import { ThemeContext, themes } from './themeContext'
import { RSSFeed } from './components/rssFeed'
import HomeTabTitle from './components/homeTabTitle'
import HomeTabFile from './components/homeTabFile'
import HomeTabLearn from './components/homeTabLearn'
@ -16,9 +15,7 @@ declare global {
_paq: any
}
}
const _paq = window._paq = window._paq || [] //eslint-disable-line
/* eslint-disable-next-line */
export interface RemixUiHomeTabProps {
plugin: any
}
@ -28,14 +25,10 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
const [state, setState] = useState<{
themeQuality: { filter: string, name: string },
showMediaPanel: 'none' | 'twitter' | 'medium'
}>({
themeQuality: themes.light,
showMediaPanel: 'none'
})
const rightPanel = useRef(null)
useEffect(() => {
plugin.call('theme', 'currentTheme').then((theme) => {
// update theme quality. To be used for for images
@ -50,23 +43,6 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
return { ...prevState, themeQuality: theme.quality === 'dark' ? themes.dark : themes.light }
})
})
window.addEventListener('click', (event) => {
const target = event.target as Element
const id = target.id
if (id !== 'remixIDEHomeTwitterbtn' && id !== 'remixIDEHomeMediumbtn' && (rightPanel && rightPanel.current && !rightPanel.current.contains(event.target))) {
// todo check event.target
setState(prevState => { return { ...prevState, showMediaPanel: 'none' } })
}
})
// to retrieve twitter feed
const scriptTwitter = document.createElement('script')
scriptTwitter.src = 'https://platform.twitter.com/widgets.js'
scriptTwitter.async = true
document.body.appendChild(scriptTwitter)
return () => {
document.body.removeChild(scriptTwitter)
}
}, [])
return (
@ -89,116 +65,3 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
}
export default RemixUiHomeTab
/*
const maxHeight = Math.max(window.innerHeight - 150, 250) + 'px'
const elHeight = '4000px'
<div className="d-flex flex-column ml-4" id="remixUiRightPanel">
<div className="border-bottom d-flex flex-column mr-4 pb-3 mb-3">
<div className="pt-2 d-flex justify-content-between">
<div>
<div className="mx-4 my-4 pt-4 d-flex">
<label style={ { fontSize: 'xxx-large' } }>Remix IDE</label>
</div>
</div>
<div className="mr-4 d-flex">
<img className="align-self-end remixui_home_logoImg" src="assets/img/guitarRemiCroped.webp" onClick={ () => playRemi() } alt=""></img>
<audio
id="remiAudio"
muted={false}
src="assets/audio/remiGuitar-single-power-chord-A-minor.wav"
ref={remiAudioEl}
></audio>
</div>
</div>
</div>
<div className="row mx-2 mr-4" data-id="landingPageHpSections">
<div className="ml-3">
<div className="mb-3">
<h4>Featured Plugins</h4>
<div className="d-flex flex-row pt-2">
<ThemeContext.Provider value={ state.themeQuality }>
<PluginButton imgPath="assets/img/solidityLogo.webp" envID="solidityLogo" envText="Solidity" callback={() => startSolidity()} />
<PluginButton imgPath="assets/img/starkNetLogo.webp" envID="starkNetLogo" envText="StarkNet" l2={true} callback={() => startStarkNet()} />
<PluginButton imgPath="assets/img/solhintLogo.webp" envID="solhintLogo" envText="Solhint linter" callback={() => startSolhint()} />
<PluginButton imgPath="assets/img/learnEthLogo.webp" envID="learnEthLogo" envText="LearnEth" callback={() => startLearnEth()} />
<PluginButton imgPath="assets/img/sourcifyNewLogo.webp" envID="sourcifyLogo" envText="Sourcify" callback={() => startSourceVerify()} />
<PluginButton imgPath="assets/img/moreLogo.webp" envID="moreLogo" envText="More" callback={startPluginManager} />
</ThemeContext.Provider>
</div>
</div>
------------------------
<div className="ml-4 pl-4">
<h4>Resources</h4>
<p className="mb-1">
<i className="mr-2 fas fa-book"></i>
<a className="remixui_home_text" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/#">Documentation</a>
</p>
<p className="mb-1">
<i className="mr-2 fab fa-gitter"></i>
<a className="remixui_home_text" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a>
</p>
<p className="mb-1">
<img id='remixHhomeWebsite' className="mr-2 remixui_home_image" src={ plugin.profile.icon } style={ { filter: state.themeQuality.filter } } alt=''></img>
<a className="remixui_home_text" target="__blank" href="https://remix-project.org">Featuring website</a>
</p>
</div>
</div>
</div>
</div>
<div className="d-flex flex-column remixui_home_rightPanel">
<div className="d-flex pr-3 py-2 align-self-end" id="remixIDEMediaPanelsTitle">
<button
className="btn-info p-2 m-1 border rounded-circle remixui_home_mediaBadge fab fa-twitter"
id="remixIDEHomeTwitterbtn"
title="Twitter"
onClick={(e) => {
setState(prevState => {
return { ...prevState, showMediaPanel: state.showMediaPanel === 'twitter' ? 'none' : 'twitter' }
})
_paq.push(['trackEvent', 'pluginManager', 'media', 'twitter'])
}}
></button>
<button
className="btn-danger p-2 m-1 border rounded-circle remixui_home_mediaBadge fab fa-medium"
id="remixIDEHomeMediumbtn"
title="Medium blogs"
onClick={(e) => {
setState(prevState => {
return { ...prevState, showMediaPanel: state.showMediaPanel === 'medium' ? 'none' : 'medium' }
})
_paq.push(['trackEvent', 'pluginManager', 'media', 'medium'])
}}
></button>
</div>
<div
className="mr-3 d-flex bg-light remixui_home_panels"
style={ { visibility: state.showMediaPanel === 'none' ? 'hidden' : 'visible' } }
id="remixIDEMediaPanels"
ref={rightPanel}
>
<div id="remixIDE_MediumBlock" className="p-2 mx-1 mt-3 mb-0 remixui_home_remixHomeMedia" style={ { maxHeight: maxHeight } }>
<div id="medium-widget" className="px-3 remixui_home_media" hidden={state.showMediaPanel !== 'medium'} style={ { maxHeight: '10000px' } }>
<RSSFeed feedUrl='https://rss.remixproject.org/' maxItems={10} />
</div>
</div>
<div id="remixIDE_TwitterBlock" className="p-2 mx-1 mt-3 mb-0 remixui_home_remixHomeMedia" hidden={state.showMediaPanel !== 'twitter'} style={ { maxHeight: maxHeight, marginRight: '28px' } } >
<div className="remixui_home_media" style={ { minHeight: elHeight } } >
<a className="twitter-timeline"
data-width="375"
data-theme={ state.themeQuality.name }
data-chrome="nofooter noheader transparent"
data-tweet-limit="18"
href="https://twitter.com/EthereumRemix"
>
</a>
</div>
</div>
</div>
</div>
</div>
*/
Write Preview
Loading…
Cancel
Save