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

update getting started section

Browse Source
pull/4774/head
Joseph Izang 7 months ago
parent c6781361fb
commit d2fcfb67e3
4 changed files with 85 additions and 117 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. 2
      apps/remix-ide/src/app/tabs/locales/en/home.json
  2. 88
      libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx
  3. 109
      libs/remix-ui/home-tab/src/lib/components/homeTabGettingStarted.tsx
  4. 3
      libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

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

@ -29,7 +29,7 @@
"home.dgitPluginDesc": "Add source control to your projects.",
"home.oneClickDappDesc": "Quickly generate smart contract interfaces",
"home.getStarted": "Get Started",
"home.projectTemplates": "Project Templates",
"home.projectTemplates": "Explore. Prototype. Create.",
"home.blankTemplateDesc": "Create an empty workspace.",
"home.remixDefaultTemplateDesc": "Create a workspace with sample files.",
"home.ozerc20TemplateDesc": "Create an ERC20 token by importing OpenZeppelin library.",

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

@ -8,6 +8,7 @@ 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'
declare global {
interface Window {
@ -19,12 +20,65 @@ interface HomeTabGetStartedProps {
plugin: any
}
function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
type WorkspaceTemplate = {
gsID: string
workspaceTitle: string
description: string
projectLogo: string
templateName: string
}
const workspaceTemplates: WorkspaceTemplate[] = [
{
gsID: 'sUTLogo',
workspaceTitle: 'Playground',
description: 'Create a new project using this template.',
projectLogo: 'assets/img/remixverticaltextLogo.png',
templateName: 'remixDefault'
},
{
gsID: 'sUTLogo',
workspaceTitle: 'Circom',
description: 'Create a new ZK Project with Circom using this template.',
projectLogo: 'assets/img/circom.webp',
templateName: ''
},
{
gsID: 'sUTLogo',
workspaceTitle: 'Uniswap',
description: 'Create a new MultiSig wallet using this template.',
projectLogo: 'assets/img/gnosissafeLogo.png',
templateName: ''
},
{
gsID: 'sUTLogo',
workspaceTitle: 'ERC20',
description: 'Create a new ERC20 token using this template.',
projectLogo: 'assets/img/oxprojectLogo.png',
templateName: ''
},
{
gsID: 'sUTLogo',
workspaceTitle: 'NFT / ERC721',
description: 'Create a new ERC721 token using this template.',
projectLogo: 'assets/img/openzeppelinLogo.png',
templateName: ''
},
{
gsID: 'sUTLogo',
workspaceTitle: 'MultiSig',
description: 'Create a new MultiSig wallet using this template.',
projectLogo: 'assets/img/gnosissafeLogo.png',
templateName: ''
},
]
function HomeTabGetStarted({plugin}: HomeTabGetStartedProps) {
const platform = useContext(platformContext)
const themeFilter = useContext(ThemeContext)
const intl = useIntl()
const carouselRef = useRef<any>({})
const carouselRefDiv = useRef(null)
const intl = useIntl()
useEffect(() => {
document.addEventListener('wheel', handleScroll)
@ -92,12 +146,12 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
return (
<div className="pl-2" id="hTGetStartedSection">
<label style={{ fontSize: '1.2rem' }}>
<label className="pt-3" style={{fontSize: '1.2rem'}}>
<FormattedMessage id="home.projectTemplates" />
</label>
<div ref={carouselRefDiv} className="w-100 d-flex flex-column">
<ThemeContext.Provider value={themeFilter}>
<Carousel
{/* <Carousel
ref={carouselRef}
focusOnSelect={true}
customButtonGroup={<CustomNavButtons next={undefined} previous={undefined} goToSlide={undefined} parent={carouselRef} />}
@ -175,7 +229,31 @@ function HomeTabGetStarted({ plugin }: HomeTabGetStartedProps) {
projectLogo="assets/img/remixverticaltextLogo.png"
callback={() => createWorkspace("remixDefault")}
/>
</Carousel>
</Carousel> */}
<div className="pt-2">
<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">
<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"}>{template.workspaceTitle}</button>
</CustomTooltip>
))}
</div>
<div className="d-flex flex-row align-items-center mb-3 flex-nowrap">
{workspaceTemplates.slice(3, workspaceTemplates.length).map((template, index) => (
<CustomTooltip tooltipText={template.description} tooltipId={template.gsID} tooltipClasses="text-nowrap" tooltipTextClasses="border bg-light text-dark p-1 pr-3" placement="bottom-start">
<button
key={index}
className={"btn border p-2 text-nowrap mr-3"}
onClick={() => {
createWorkspace(template.templateName)
}}
>
{template.workspaceTitle}
</button>
</CustomTooltip>
))}
</div>
</div>
</ThemeContext.Provider>
</div>
</div>

109
libs/remix-ui/home-tab/src/lib/components/homeTabGettingStarted.tsx
Unescape View File

@ -1,109 +0,0 @@
import React, {useEffect, useRef, useContext} from 'react'
import {useIntl, FormattedMessage } from 'react-intl'
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'
export interface HomeTabGettingStartedProps {
plugin: any
}
type WorkspaceTemplate = {
gsID: string
workspaceTitle: string
description: string
projectLogo: string
callback: () => void
}
const workspaceTemplates: WorkspaceTemplate[] = [
{
gsID: 'sUTLogo',
workspaceTitle: 'MultiSig',
description: 'Create a new MultiSig wallet using this template.',
projectLogo: 'assets/img/gnosissafeLogo.png',
callback: () => createWorkspace('gnosisSafeMultisig')
},
{
gsID: 'sUTLogo',
workspaceTitle: 'ERC20',
description: 'Create a new ERC20 token using this template.',
projectLogo: 'assets/img/oxprojectLogo.png',
callback: () => createWorkspace('zeroxErc20')
},
{
gsID: 'sourcifyLogo',
workspaceTitle: 'ERC20',
description: 'Create a new ERC20 token using this template.',
projectLogo: 'assets/img/openzeppelinLogo.png',
callback: () => createWorkspace('ozerc20')
},
{
gsID: 'sUTLogo',
workspaceTitle: 'ERC721',
description: 'Create a new ERC721 token using this template.',
projectLogo: 'assets/img/openzeppelinLogo.png',
callback: () => createWorkspace('ozerc721')
},
{
gsID: 'sUTLogo',
workspaceTitle: 'ERC1155',
description: 'Create a new ERC1155 token using this template.',
projectLogo: 'assets/img/openzeppelinLogo.png',
callback: () => createWorkspace('ozerc1155')
},
{
gsID: 'solhintLogo',
workspaceTitle: 'Basic',
description: 'Create a new project using this template.',
projectLogo: 'assets/img/remixverticaltextLogo.png',
callback: () => createWorkspace('remixDefault')
}
]
export default function HomeTabGettingStarted() {
const createWorkspace = async (templateName) => {
if(platform === appPlatformTypes.desktop){
await plugin.call('remix-templates', 'loadTemplateInNewWindow', templateName)
return
}
let templateDisplayName = TEMPLATE_NAMES[templateName]
const metadata = TEMPLATE_METADATA[templateName]
if (metadata) {
if (metadata.type === 'git') {
await plugin.call('dGitProvider', 'clone', {url: metadata.url, branch: metadata.branch}, templateDisplayName)
} else if (metadata && metadata.type === 'plugin') {
await plugin.appManager.activatePlugin('filePanel')
templateDisplayName = await plugin.call('filePanel', 'getAvailableWorkspaceName', templateDisplayName)
await plugin.call('filePanel', 'createWorkspace', templateDisplayName, 'blank')
await plugin.call('filePanel', 'setWorkspace', templateDisplayName)
plugin.verticalIcons.select('filePanel')
await plugin.call(metadata.name, metadata.endpoint, ...metadata.params)
}
} else {
await plugin.appManager.activatePlugin('filePanel')
templateDisplayName = await plugin.call('filePanel', 'getAvailableWorkspaceName', templateDisplayName)
await plugin.call('filePanel', 'createWorkspace', templateDisplayName, templateName)
await plugin.call('filePanel', 'setWorkspace', templateDisplayName)
plugin.verticalIcons.select('filePanel')
}
_paq.push(['trackEvent', 'hometab', 'homeGetStarted', templateName])
}
return (
<div>
<span>Getting Started</span>
<div className="w-100">
<button className="btn btn-primary">Playground</button>
</div>
</div>
)
}

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

@ -61,7 +61,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
<div className="d-flex flex-row w-100 custom_home_bg">
<div className="px-2 pl-3 justify-content-start d-flex border-right flex-column" id="remixUIHTLeft" style={{ width: 'inherit' }}>
<HomeTabTitle />
<GettingStarted />
<HomeTabGetStarted plugin={plugin}></HomeTabGetStarted>
{!(platform === appPlatformTypes.desktop) ?
<HomeTabFile plugin={plugin} />:
<HomeTabFileElectron plugin={plugin}></HomeTabFileElectron>}
@ -70,7 +70,6 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
<div className="pl-2 pr-3 justify-content-start d-flex flex-column" style={{ width: '65%' }} id="remixUIHTRight">
<LanguageOptions plugin={plugin}/>
<HomeTabFeatured></HomeTabFeatured>
{/* <HomeTabGetStarted plugin={plugin}></HomeTabGetStarted> */}
<HomeTabFeaturedPlugins plugin={plugin}></HomeTabFeaturedPlugins>
<HomeTabScamAlert></HomeTabScamAlert>
</div>

Write Preview
Loading…
Cancel
Save