finish homeTab intl

pull/5370/head
drafish 2 years ago
parent 2ebc6eadb1
commit b48cfbea1f
  1. 42
      apps/remix-ide/src/app/tabs/locales/en-US.js
  2. 40
      apps/remix-ide/src/app/tabs/locales/zh-CN.js
  3. 33
      libs/remix-ui/home-tab/src/lib/components/homeTabFeatured.tsx
  4. 13
      libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx
  5. 2
      libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx
  6. 20
      libs/remix-ui/home-tab/src/lib/components/homeTabGetStarted.tsx
  7. 41
      libs/remix-ui/home-tab/src/lib/components/homeTabLearn.tsx
  8. 38
      libs/remix-ui/home-tab/src/lib/components/homeTabTitle.tsx

@ -71,7 +71,49 @@ export default {
'home.scamAlertText3': 'Additional safety tips',
'home.learnMore': 'Learn more',
'home.here': 'here',
'home.more': 'More',
'home.featured': 'Featured',
'home.jumpIntoWeb3': 'JUMP INTO WEB3',
'home.jumpIntoWeb3Text': `The Remix Project is a rich toolset which can be used for the entire journey of contract development by users of any knowledge level,
and as a learning lab for teaching and experimenting with Ethereum.`,
'home.remixRewards': 'REMIX REWARDS',
'home.remixRewardsText1': 'NFTs for our users!',
'home.remixRewardsText2': `Remix Project rewards contributors, beta testers, and UX research participants with NFTs deployed on Optimism.
Remix Reward holders are able to mint a second Remixer user NFT badge to give to any other user of their choice.`,
'home.betaTesting': 'BETA TESTING',
'home.betaTestingText1': 'Our community supports us.',
'home.betaTestingText2': 'You can join Beta Testing before each release of Remix IDE. Help us test now and get a handle on new features!',
'home.featuredPlugins': 'Featured Plugins',
'home.solidityPluginDesc': 'Compile, test and analyse smart contract.',
'home.starkNetPluginDesc': 'Compile and deploy contracts with Cairo, a native language for StarkNet.',
'home.solhintPluginDesc': 'Solhint is an open source project for linting Solidity code.',
'home.sourcifyPluginDesc': 'Solidity contract and metadata verification service.',
'home.unitTestPluginDesc': 'Write and run unit tests for your contracts in Solidity.',
'home.getStarted': 'Get Started',
'home.projectTemplates': 'Project Templates',
'home.blankTemplateDesc': 'Create an empty workspace.',
'home.remixDefaultTemplateDesc': 'Create a workspace with sample files.',
'home.ozerc20TemplateDesc': 'Create an ERC20 token by importing OpenZeppelin library.',
'home.ozerc721TemplateDesc': 'Create an NFT token by importing OpenZeppelin library.',
'home.zeroxErc20TemplateDesc': 'Create an ERC20 token by importing 0xProject contract.',
'home.learn': 'Learn',
'home.remixBasics': 'Remix Basics',
'home.remixBasicsDesc': "Introduction to Remix's interface and concepts used in Ethereum, as well as the basics of Solidity.",
'home.remixIntermediate': 'Remix Intermediate',
'home.remixIntermediateDesc': 'Using the web3.js to interact with a contract. Using Recorder tool.',
'home.remixAdvanced': 'Remix Advanced',
'home.remixAdvancedDesc': 'Learn the Proxy Pattern and working with Libraries in Remix. Learn to use the Debugger.',
'home.remixYoutubePlaylist': 'Remix Youtube Playlist',
'home.remixTwitterProfile': 'Remix Twitter Profile',
'home.remixLinkedinProfile': 'Remix Linkedin Profile',
'home.remixMediumPosts': 'Remix Medium Posts',
'home.remixGitterChannel': 'Remix Gitter Channel',
'home.nativeIDE': 'The Native IDE for Web3 Development.',
'home.website': 'Website',
'home.documentation': 'Documentation',
'home.remixPlugin': 'Remix Plugin',
'home.remixDesktop': 'Remix Desktop',
'home.searchDocumentation': 'Search Documentation',
'home.files': 'Files',
'home.newFile': 'New File',
'home.openFile': 'Open File',

@ -70,7 +70,47 @@ export default {
'home.scamAlertText3': '其他安全提示',
'home.learnMore': '了解更多',
'home.here': '这里',
'home.more': '更多',
'home.featured': '精选',
'home.jumpIntoWeb3': '迎接 WEB3',
'home.jumpIntoWeb3Text': 'Remix 项目是一个丰富的工具集,任何知识水平的用户都可以在这上面进行全周期的合约开发,并且可作为以太坊教学和实验的学习实验室。',
'home.remixRewards': 'REMIX 奖励',
'home.remixRewardsText1': '给我们的用户提供的 NFT!',
'home.remixRewardsText2': 'Remix 会用部署在 Optimism 链上的 NFT 奖励贡献者、beta 测试者和用户体验研究参与者。Remix 奖励的持有者可以铸造第二个“Remixer”用户 NFT 徽章,以赠予他们选择的任何其他用户。',
'home.betaTesting': 'BETA 测试',
'home.betaTestingText1': '我们的社区支持我们',
'home.betaTestingText2': '每次 Remix IDE 发布版本之前,你都可以参与 Beta 测试。现在就来帮我们测试并且尝鲜新功能吧!',
'home.featuredPlugins': '精选插件',
'home.solidityPluginDesc': '编译、测试和分析智能合约。',
'home.starkNetPluginDesc': '用 Cairo 来编译且部署合约,这是 StarkNet 的原生语言',
'home.solhintPluginDesc': 'Solhint 是一个用于检查 Solidity 代码的开源项目',
'home.sourcifyPluginDesc': 'Solidity 合约和元数据验证服务。',
'home.unitTestPluginDesc': '在 Solidity 中为你的合约编写和运行单元测试。',
'home.getStarted': '开始使用',
'home.projectTemplates': '项目模板',
'home.blankTemplateDesc': '创建一个空的工作空间。',
'home.remixDefaultTemplateDesc': '创建一个带有样本文件的工作空间',
'home.ozerc20TemplateDesc': '通过引入 OpenZeppelin 库来创建一个 ERC20 代币。',
'home.ozerc721TemplateDesc': '通过引入 OpenZeppelin 库来创建一个 NFT 代币。',
'home.zeroxErc20TemplateDesc': '通过引入 0xProject 合约来创建一个 ERC20 代币。',
'home.learn': '学习',
'home.remixBasics': 'Remix 基础',
'home.remixBasicsDesc': "介绍 Remix 的界面和在以太坊中使用的概念,以及 Solidity 的基础知识。",
'home.remixIntermediate': 'Remix 中级',
'home.remixIntermediateDesc': '使用 web3.js 与合约交互。使用记录器工具。',
'home.remixAdvanced': 'Remix 高级',
'home.remixAdvancedDesc': '学习代理模式并使用 Remix 中的库。学习使用调试器。',
'home.remixYoutubePlaylist': 'Remix Youtube 播放列表',
'home.remixTwitterProfile': 'Remix 推特档案',
'home.remixLinkedinProfile': 'Remix 领英档案',
'home.remixMediumPosts': 'Remix Medium 文章',
'home.remixGitterChannel': 'Remix Gitter 频道',
'home.nativeIDE': '用于 Web3 开发的原生 IDE。',
'home.website': '网站',
'home.documentation': '文档',
'home.remixPlugin': 'Remix 插件',
'home.remixDesktop': 'Remix 桌面版',
'home.searchDocumentation': '搜索文档',
'home.files': '文件',
'home.newFile': '新建文件',
'home.openFile': '打开本地文件',

@ -1,5 +1,6 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useEffect, useState, useRef, useContext } from 'react'
import { FormattedMessage } from 'react-intl'
import { ThemeContext, themes } from '../themeContext'
import Carousel from 'react-multi-carousel'
import 'react-multi-carousel/lib/styles.css'
@ -10,7 +11,7 @@ function HomeTabFeatured() {
return (
<div className="pt-3 pl-2" id="hTFeaturedeSection">
<label style={{ fontSize: "1.2rem" }}>Featured</label>
<label style={{ fontSize: "1.2rem" }}><FormattedMessage id='home.featured' defaultMessage='Featured' /></label>
<div className="mb-2">
<div className="w-100 d-flex flex-column" style={{ height: "200px" }}>
<ThemeContext.Provider value={themeFilter}>
@ -37,29 +38,37 @@ function HomeTabFeatured() {
<div className="mx-1 px-1 d-flex">
<img src={"assets/img/bgRemi.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img>
<div className="h6 w-50 p-4" style={{ flex: "1" }}>
<h5>JUMP INTO WEB3</h5>
<p>The Remix Project is a rich toolset which can be used for the entire journey of contract development by users of any knowledge level, and as a learning lab for teaching and experimenting with Ethereum.</p>
<a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'jumpIntoWeb3'])} target="__blank" href="https://remix-project.org">More</a>
<h5><FormattedMessage id='home.jumpIntoWeb3' defaultMessage='JUMP INTO WEB3' /></h5>
<p>
<FormattedMessage
id='home.jumpIntoWeb3Text'
defaultMessage='The Remix Project is a rich toolset which can be used for the entire journey of contract development by users of any knowledge level, and as a learning lab for teaching and experimenting with Ethereum.'
/>
</p>
<a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'jumpIntoWeb3'])} target="__blank" href="https://remix-project.org"><FormattedMessage id='home.more' defaultMessage='More' /></a>
</div>
</div>
<div className="mx-1 px-1 d-flex">
<img src={"/assets/img/remixRewardUser.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img>
<div className="h6 p-4" style={{ flex: "1" }}>
<h5>REMIX REWARDS</h5>
<p style={{ fontStyle: 'italic' }}>NFTs for our users!</p>
<h5><FormattedMessage id='home.remixRewards' defaultMessage='REMIX REWARDS' /></h5>
<p style={{ fontStyle: 'italic' }}><FormattedMessage id='home.remixRewardsText1' defaultMessage='NFTs for our users!' /></p>
<p>
Remix Project rewards contributors, beta testers, and UX research participants with NFTs deployed on Optimism. Remix Reward holders are able to mint a second Remixer user NFT badge to give to any other user of their choice.
<FormattedMessage
id='home.remixRewardsText2'
defaultMessage='Remix Project rewards contributors, beta testers, and UX research participants with NFTs deployed on Optimism. Remix Reward holders are able to mint a second “Remixer” user NFT badge to give to any other user of their choice.'
/>
</p>
<a className="remixui_home_text" target="__blank" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'remixRewards'])} href="https://rewards.remix.ethereum.eth.limo">More</a>
<a className="remixui_home_text" target="__blank" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'remixRewards'])} href="https://rewards.remix.ethereum.eth.limo"><FormattedMessage id='home.more' defaultMessage='More' /></a>
</div>
</div>
<div className="mx-1 px-1 d-flex">
<img src={"/assets/img/remixRewardBetaTester.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img>
<div className="h6 p-4" style={{ flex: "1" }}>
<h5>BETA TESTING</h5>
<p style={{ fontStyle: 'italic' }}>Our community supports us.</p>
<p>You can join Beta Testing before each release of Remix IDE. Help us test now and get a handle on new features!</p>
<a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'betatesting'])} target="__blank" href="https://rewards.remix.ethereum.eth.limo">More</a>
<h5><FormattedMessage id='home.betaTesting' defaultMessage='BETA TESTING' /></h5>
<p style={{ fontStyle: 'italic' }}><FormattedMessage id='home.betaTestingText1' defaultMessage='Our community supports us.' /></p>
<p><FormattedMessage id='home.betaTestingText2' defaultMessage='You can join Beta Testing before each release of Remix IDE. Help us test now and get a handle on new features!' /></p>
<a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'betatesting'])} target="__blank" href="https://rewards.remix.ethereum.eth.limo"><FormattedMessage id='home.more' defaultMessage='More' /></a>
</div>
</div>
</Carousel>

@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useEffect, useRef, useContext } from 'react'
import { FormattedMessage } from 'react-intl'
import { FormattedMessage, useIntl } from 'react-intl'
import PluginButton from './pluginButton'
import { ThemeContext } from '../themeContext'
import Carousel from 'react-multi-carousel'
@ -22,6 +22,7 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
const themeFilter = useContext(ThemeContext)
const carouselRef = useRef<any>({})
const carouselRefDiv = useRef(null)
const intl = useIntl()
useEffect(() => {
document.addEventListener("wheel", handleScroll)
@ -121,7 +122,7 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
imgPath="assets/img/solidityLogo.webp"
envID="solidityLogo"
envText="Solidity"
description="Compile, test and analyse smart contract."
description={intl.formatMessage({ id: 'home.solidityPluginDesc', defaultMessage: "Compile, test and analyse smart contract." })}
remixMaintained={true}
callback={() => startSolidity()}
/>
@ -129,28 +130,28 @@ function HomeTabFeaturedPlugins ({plugin}: HomeTabFeaturedPluginsProps) {
imgPath="assets/img/starkNetLogo.webp"
envID="starkNetLogo"
envText="StarkNet"
description="Compile and deploy contracts with Cairo, a native language for StarkNet."
description={intl.formatMessage({ id: 'home.starkNetPluginDesc', defaultMessage: "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."
description={intl.formatMessage({ id: 'home.solhintPluginDesc', defaultMessage: "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."
description={intl.formatMessage({ id: 'home.sourcifyPluginDesc', defaultMessage: "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."
description={intl.formatMessage({ id: 'home.unitTestPluginDesc', defaultMessage: "Write and run unit tests for your contracts in Solidity." })}
callback={() => startSolidityUnitTesting()}
/>
</Carousel>

@ -154,7 +154,7 @@ function HomeTabFile ({plugin}: HomeTabFileProps) {
</ModalDialog>
<Toaster message={state.toasterMsg} />
<div className="justify-content-start mt-1 p-2 border-bottom d-flex flex-column" id="hTFileSection">
<label style={{fontSize: "1rem"}}><FormattedMessage id='home.file' defaultMessage='Files' /></label>
<label style={{fontSize: "1rem"}}><FormattedMessage id='home.files' defaultMessage='Files' /></label>
<button className="btn btn-primary p-2 border my-1" data-id="homeTabNewFile" style={{width: 'fit-content'}} onClick={() => createNewFile()}><FormattedMessage id='home.newFile' defaultMessage='New File' /></button>
<label className="btn p-2 border my-1" style={{width: 'fit-content'}} htmlFor="openFileInput"><FormattedMessage id='home.openFile' defaultMessage='Open File' /></label>
<input title="open file" type="file" id="openFileInput" onChange={(event) => {

@ -1,5 +1,6 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useEffect, useRef, useContext } from 'react'
import { useIntl, FormattedMessage } from 'react-intl'
import { ThemeContext} from '../themeContext'
import Carousel from 'react-multi-carousel'
import WorkspaceTemplate from './workspaceTemplate'
@ -19,6 +20,7 @@ function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) {
const themeFilter = useContext(ThemeContext)
const carouselRef = useRef<any>({})
const carouselRefDiv = useRef(null)
const intl = useIntl()
useEffect(() => {
document.addEventListener("wheel", handleScroll)
@ -37,7 +39,7 @@ function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) {
}
return false;
}
const handleScroll = (e) => {
if (isDescendant(carouselRefDiv.current, e.target)) {
e.stopPropagation()
@ -67,9 +69,9 @@ function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) {
<div className="pl-2" id="hTGetStartedSection">
<label style={{fontSize: "1.2rem"}}>
<span className="mr-2" style={{fontWeight: "bold"}}>
Get Started
<FormattedMessage id="home.getStarted" defaultMessage="Get Started" />
</span>
- Project Templates
- <FormattedMessage id="home.projectTemplates" defaultMessage="Project Templates" />
</label>
<div ref={carouselRefDiv} className="w-100 d-flex flex-column">
<ThemeContext.Provider value={ themeFilter }>
@ -84,7 +86,7 @@ function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) {
draggable={true}
showDots={false}
responsive={
{
{
superLargeDesktop: {
breakpoint: { max: 4000, min: 3000 },
items: 5
@ -106,27 +108,27 @@ function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) {
<WorkspaceTemplate
gsID="starkNetLogo"
workspaceTitle="Blank"
description="Create an empty workspace."
description={intl.formatMessage({ id: 'home.blankTemplateDesc', defaultMessage: "Create an empty workspace." })}
callback={() => createWorkspace("blank")} />
<WorkspaceTemplate
gsID="solhintLogo"
workspaceTitle="Remix Default"
description="Create a workspace with sample files."
description={intl.formatMessage({ id: 'home.remixDefaultTemplateDesc', defaultMessage: "Create a workspace with sample files." })}
callback={() => createWorkspace("remixDefault")} />
<WorkspaceTemplate
gsID="sourcifyLogo"
workspaceTitle="OpenZeppelin ERC20"
description="Create an ERC20 token by importing OpenZeppelin library."
description={intl.formatMessage({ id: 'home.ozerc20TemplateDesc', defaultMessage: "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."
description={intl.formatMessage({ id: 'home.ozerc721TemplateDesc', defaultMessage: "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."
description={intl.formatMessage({ id: 'home.zeroxErc20TemplateDesc', defaultMessage: "Create an ERC20 token by importing 0xProject contract." })}
callback={() => createWorkspace("zeroxErc20")} />
</Carousel>
</ThemeContext.Provider>

@ -1,5 +1,6 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useEffect, useState, useContext } from 'react'
import { FormattedMessage } from 'react-intl'
import { ThemeContext } from '../themeContext'
declare global {
interface Window {
@ -40,7 +41,9 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
return (
<div className="d-flex px-2 pb-2 pt-2 d-flex flex-column" id="hTLearnSection">
<div className="d-flex justify-content-between">
<label className="py-2 align-self-center m-0" style={{fontSize: "1.2rem"}}>Learn</label>
<label className="py-2 align-self-center m-0" style={{fontSize: "1.2rem"}}>
<FormattedMessage id="home.learn" defaultMessage="Learn" />
</label>
<button
onClick={ ()=> openLink()}
className="h-100 px-2 pt-0 btn"
@ -50,24 +53,40 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
</div>
<div className="d-flex flex-column">
<label className="d-flex flex-column btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Basics }})}>
<label className="card-title align-self-start m-0 float-left" style={{fontSize: "1rem"}}>Remix Basics</label>
<label className="card-title align-self-start m-0 float-left" style={{fontSize: "1rem"}}>
<FormattedMessage id="home.remixBasics" defaultMessage="Remix Basics" />
</label>
{(state.visibleTutorial === VisibleTutorial.Basics) && <div className="pt-2 d-flex flex-column text-left">
<span>Introduction to Remix's interface and concepts used in Ethereum, as well as the basics of Solidity.</span>
<button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('basics')}>Get Started</button>
<span>
<FormattedMessage id="home.remixBasicsDesc" defaultMessage="Introduction to Remix's interface and concepts used in Ethereum, as well as the basics of Solidity." />
</span>
<button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('basics')}>
<FormattedMessage id="home.getStarted" defaultMessage="Get Started" />
</button>
</div>}
</label>
<label className="d-flex flex-column btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Intermediate }})}>
<label className="card-title align-self-start m-0 float-left" style={{fontSize: "1rem"}}>Remix Intermediate</label>
<label className="card-title align-self-start m-0 float-left" style={{fontSize: "1rem"}}>
<FormattedMessage id="home.remixIntermediate" defaultMessage="Remix Intermediate" />
</label>
{(state.visibleTutorial === VisibleTutorial.Intermediate) && <div className="pt-2 d-flex flex-column text-left">
<span>Using the web3.js to interact with a contract. Using Recorder tool.</span>
<button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('useofweb3js')}>Get Started</button>
<span>
<FormattedMessage id="home.remixIntermediateDesc" defaultMessage="Using the web3.js to interact with a contract. Using Recorder tool." /></span>
<button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('useofweb3js')}>
<FormattedMessage id="home.getStarted" defaultMessage="Get Started" />
</button>
</div>}
</label>
<label className="d-flex flex-column btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Advanced }})}>
<label className="card-title align-self-start m-0 float-left" style={{fontSize: "1rem"}}>Remix Advanced</label>
<label className="card-title align-self-start m-0 float-left" style={{fontSize: "1rem"}}>
<FormattedMessage id="home.remixAdvanced" defaultMessage="Remix Advanced" />
</label>
{(state.visibleTutorial === VisibleTutorial.Advanced) && <div className="pt-2 d-flex flex-column text-left">
<span>Learn the Proxy Pattern and working with Libraries in Remix. Learn to use the Debugger.</span>
<button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('deploylibraries')}>Get Started</button>
<span>
<FormattedMessage id="home.remixAdvancedDesc" defaultMessage="Learn the Proxy Pattern and working with Libraries in Remix. Learn to use the Debugger." /></span>
<button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('deploylibraries')}>
<FormattedMessage id="home.getStarted" defaultMessage="Get Started" />
</button>
</div>}
</label>
</div>
@ -75,4 +94,4 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
)
}
export default HomeTabLearn
export default HomeTabLearn

@ -3,6 +3,7 @@
import BasicLogo from 'libs/remix-ui/vertical-icons-panel/src/lib/components/BasicLogo'
import { ThemeContext } from '../themeContext'
import React, { useEffect, useState, useRef, useContext } from 'react'
import { FormattedMessage, useIntl } from 'react-intl'
import { CustomTooltip } from '@remix-ui/helper'
const _paq = window._paq = window._paq || [] // eslint-disable-line
@ -23,6 +24,7 @@ function HomeTabTitle() {
const themeFilter = useContext(ThemeContext)
const searchInputRef = useRef(null)
const remiAudioEl = useRef(null)
const intl = useIntl()
const playRemi = async () => {
remiAudioEl.current.play()
@ -68,7 +70,7 @@ function HomeTabTitle() {
placement={'top'}
tooltipId="overlay-tooltip"
tooltipClasses="text-nowrap"
tooltipText="Remix Youtube Playlist"
tooltipText={<FormattedMessage id="home.remixYoutubePlaylist" defaultMessage="Remix Youtube Playlist" />}
tooltipTextClasses="border bg-light text-dark p-1 pr-3"
>
<button
@ -84,11 +86,11 @@ function HomeTabTitle() {
placement={'top'}
tooltipId="overlay-tooltip"
tooltipClasses="text-nowrap"
tooltipText="Remix Twitter Profile"
tooltipText={<FormattedMessage id="home.remixTwitterProfile" defaultMessage="Remix Twitter Profile" />}
tooltipTextClasses="border bg-light text-dark p-1 pr-3"
>
<button
onClick={() => {
onClick={() => {
openLink("https://twitter.com/EthereumRemix")
_paq.push(['trackEvent', 'hometab', 'socialMedia', 'twitter'])
}}
@ -100,11 +102,11 @@ function HomeTabTitle() {
placement={'top'}
tooltipId="overlay-tooltip"
tooltipClasses="text-nowrap"
tooltipText="Remix Linkedin Profile"
tooltipText={<FormattedMessage id="home.remixLinkedinProfile" defaultMessage="Remix Linkedin Profile" />}
tooltipTextClasses="border bg-light text-dark p-1 pr-3"
>
<button
onClick={() => {
onClick={() => {
openLink("https://www.linkedin.com/company/ethereum-remix/")
_paq.push(['trackEvent', 'hometab', 'socialmedia', 'linkedin'])
}}
@ -116,7 +118,7 @@ function HomeTabTitle() {
placement={'top'}
tooltipId="overlay-tooltip"
tooltipClasses="text-nowrap"
tooltipText="Remix Medium Posts"
tooltipText={<FormattedMessage id="home.remixMediumPosts" defaultMessage="Remix Medium Posts" />}
tooltipTextClasses="border bg-light text-dark p-1 pr-3"
>
<button
@ -132,7 +134,7 @@ function HomeTabTitle() {
placement={'top'}
tooltipId="overlay-tooltip"
tooltipClasses="text-nowrap"
tooltipText="Remix Gitter Channel"
tooltipText={<FormattedMessage id="home.remixGitterChannel" defaultMessage="Remix Gitter Channel" />}
tooltipTextClasses="border bg-light text-dark p-1 pr-3"
>
<button
@ -145,12 +147,22 @@ function HomeTabTitle() {
</CustomTooltip>
</span>
</div>
<b className="pb-1 text-dark" style={{ fontStyle: 'italic' }}>The Native IDE for Web3 Development.</b>
<b className="pb-1 text-dark" style={{ fontStyle: 'italic' }}>
<FormattedMessage id="home.nativeIDE" defaultMessage="The Native IDE for Web3 Development." />
</b>
<div className="pb-1" id="hTGeneralLinks">
<a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'header', 'webSite'])} target="__blank" href="https://remix-project.org">Website</a>
<a className="pl-2 remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'header', 'documentation'])} target="__blank" href="https://remix-ide.readthedocs.io/en/latest">Documentation</a>
<a className="pl-2 remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'header', 'remixPlugin'])} target="__blank" href="https://remix-plugin-docs.readthedocs.io/en/latest/">Remix Plugin</a>
<a className="pl-2 remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'header', 'remixDesktop'])} target="__blank" href="https://github.com/ethereum/remix-desktop/releases">Remix Desktop</a>
<a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'header', 'webSite'])} target="__blank" href="https://remix-project.org">
<FormattedMessage id="home.website" defaultMessage="Website" />
</a>
<a className="pl-2 remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'header', 'documentation'])} target="__blank" href="https://remix-ide.readthedocs.io/en/latest">
<FormattedMessage id="home.documentation" defaultMessage="Documentation" />
</a>
<a className="pl-2 remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'header', 'remixPlugin'])} target="__blank" href="https://remix-plugin-docs.readthedocs.io/en/latest/">
<FormattedMessage id="home.remixPlugin" defaultMessage="Remix Plugin" />
</a>
<a className="pl-2 remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'header', 'remixDesktop'])} target="__blank" href="https://github.com/ethereum/remix-desktop/releases">
<FormattedMessage id="home.remixDesktop" defaultMessage="Remix Desktop" />
</a>
</div>
<div className="d-flex pb-1 align-items-center">
<input
@ -158,7 +170,7 @@ function HomeTabTitle() {
type="text"
className="border form-control border-right-0"
id="homeTabSearchInput"
placeholder="Search Documentation"
placeholder={intl.formatMessage({id: "home.searchDocumentation", defaultMessage: "Search Documentation" })}
data-id="terminalInputSearch"
/>
<button

Loading…
Cancel
Save