final cleanup

pull/5370/head
lianahus 2 years ago committed by Aniket
parent b2471da44b
commit 6152b3b0e5
  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

@ -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>

@ -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>
)
}

@ -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 (

@ -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 (

@ -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>

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

@ -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>
))}
</>)
}

@ -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">

@ -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>
*/
Loading…
Cancel
Save