Skip to content

Commit 80a0939

Browse files
ioedeveloperioedeveloper
committed
Change the shape of plugin list
1 parent 8a9253b commit 80a0939

File tree

2 files changed

+94
-86
lines changed

2 files changed

+94
-86
lines changed

‎libs/remix-ui/home-tab/src/lib/components/homeTabFeaturedPlugins.tsx

Lines changed: 43 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
/* eslint-disable @typescript-eslint/no-unused-vars */
2-
import React, { useContext } from 'react'
3-
import { FormattedMessage, useIntl } from 'react-intl'
2+
import React, { useContext, useState } from 'react'
3+
import { useIntl } from 'react-intl'
44
import { ThemeContext } from '../themeContext'
55
import { ToggleSwitch } from '@remix-ui/toggle'
6+
import fetchResults from '../fetch2.json'
7+
import { RenderIf } from '@remix-ui/helper'
68
declare global {
79
interface Window {
810
_paq: any
@@ -14,105 +16,60 @@ interface HomeTabFeaturedPluginsProps {
1416
}
1517

1618
interface PluginInfo {
17-
imgPath: string
18-
envID: string
19-
envText: string
20-
descriptionId: string
21-
maintainedBy: string
22-
documentationUrl: string,
19+
pluginId: string
20+
pluginTitle: string
21+
action: {
22+
type: string
23+
label: string
24+
url?: string
25+
pluginName?: string
26+
pluginMethod?: string
27+
}
2328
iconClass: string
29+
maintainedByRemix: boolean
30+
description: string
2431
}
2532

26-
const featuredPlugins: PluginInfo[] = [
27-
{
28-
imgPath: 'assets/img/contractVerification.webp',
29-
envID: 'contractVerificationLogo',
30-
envText: 'Contract Verification',
31-
descriptionId: 'home.contractVerificationDesc',
32-
maintainedBy: 'Remix',
33-
documentationUrl: 'https://remix-ide.readthedocs.io/en/latest/contract_verification.html',
34-
iconClass: 'fa-solid fa-file-contract'
35-
},
36-
{
37-
imgPath: 'assets/img/learnEthLogo.webp',
38-
envID: 'learnEthLogo',
39-
envText: 'LearnEth Tutorials',
40-
descriptionId: 'home.learnEthPluginDesc',
41-
maintainedBy: 'Remix',
42-
documentationUrl: 'https://remix-ide.readthedocs.io/en/latest/learneth.html',
43-
iconClass: 'fa-solid fa-book'
44-
},
45-
{
46-
imgPath: 'assets/img/staticAnalysis.webp',
47-
envID: 'staticAnalysisLogo',
48-
envText: 'Solidity Analyzers',
49-
descriptionId: 'home.codeAnalyizerPluginDesc',
50-
maintainedBy: 'Remix',
51-
documentationUrl: 'https://remix-ide.readthedocs.io/en/latest/solidity_analyzers.html',
52-
iconClass: 'fa-solid fa-file-code'
53-
},
54-
{
55-
imgPath: 'assets/img/cookbook.webp',
56-
envID: 'cookbookLogo',
57-
envText: 'Cookbook',
58-
descriptionId: 'home.cookbookDesc',
59-
maintainedBy: 'Cookbook',
60-
documentationUrl: 'https://remix-ide.readthedocs.io/en/latest/cookbook.html',
61-
iconClass: 'fa-solid fa-book'
62-
}
63-
]
64-
6533
function HomeTabFeaturedPlugins({ plugin }: HomeTabFeaturedPluginsProps) {
34+
const [activePlugins, setActivePlugins] = useState<string[]>([])
6635
const intl = useIntl()
6736
const theme = useContext(ThemeContext)
6837
const isDark = theme.name === 'dark'
6938

70-
const startSolidity = async () => {
71-
await plugin.appManager.activatePlugin(['solidity', 'udapp', 'solidityStaticAnalysis', 'solidityUnitTesting'])
72-
plugin.verticalIcons.select('solidity')
73-
_paq.push(['trackEvent', 'hometabActivate', 'userActivate', 'solidity'])
74-
}
75-
const startCodeAnalyzer = async () => {
76-
await plugin.appManager.activatePlugin(['solidity', 'solidityStaticAnalysis'])
77-
plugin.verticalIcons.select('solidityStaticAnalysis')
78-
_paq.push(['trackEvent', 'hometabActivate', 'userActivate', 'solidityStaticAnalysis'])
79-
}
80-
const startLearnEth = async () => {
81-
await plugin.appManager.activatePlugin(['LearnEth', 'solidity', 'solidityUnitTesting'])
82-
plugin.verticalIcons.select('LearnEth')
83-
_paq.push(['trackEvent', 'hometabActivate', 'userActivate', 'LearnEth'])
84-
}
85-
const startCookbook = async () => {
86-
await plugin.appManager.activatePlugin(['cookbookdev'])
87-
plugin.verticalIcons.select('cookbookdev')
88-
_paq.push(['trackEvent', 'hometabActivate', 'userActivate', 'cookbookdev'])
89-
}
90-
const startSolidityUnitTesting = async () => {
91-
await plugin.appManager.activatePlugin(['solidity', 'solidityUnitTesting'])
92-
plugin.verticalIcons.select('solidityUnitTesting')
93-
_paq.push(['trackEvent', 'hometabActivate', 'userActivate', 'solidityUnitTesting'])
94-
}
95-
const startContractVerification = async () => {
96-
await plugin.appManager.activatePlugin(['contract-verification'])
97-
plugin.verticalIcons.select('contract-verification')
98-
_paq.push(['trackEvent', 'hometabActivate', 'userActivate', 'contract-verification'])
39+
const activateFeaturedPlugin = async (pluginId: string) => {
40+
if (await plugin.call('manager', 'isActive', pluginId)) {
41+
console.log('deactivate', pluginId)
42+
plugin.verticalIcons.select(pluginId)
43+
await plugin.call('manager', 'deactivatePlugin', pluginId)
44+
setActivePlugins(activePlugins.filter((pluginId) => pluginId !== pluginId))
45+
} else {
46+
console.log('activate', pluginId)
47+
await plugin.call('manager', 'activatePlugin', pluginId)
48+
plugin.verticalIcons.select(pluginId)
49+
setActivePlugins([...activePlugins, pluginId])
50+
}
51+
_paq.push(['trackEvent', 'hometabActivate', 'userActivate', pluginId])
9952
}
10053

10154
function PluginCard(pluginInfo: PluginInfo) {
10255
return (
10356
<div className="card mb-3">
10457
<div className="d-flex align-items-center px-2 justify-content-between border-bottom">
10558
<div className='d-flex align-items-center'>
106-
<i className={`${pluginInfo.iconClass} mr-2`}></i>
107-
<span className="fw-bold" style={{ color: isDark ? 'white' : 'black' }}>{pluginInfo.envText}</span>
59+
{ pluginInfo.iconClass ? <i className={`${pluginInfo.iconClass} mr-2`}></i> : <i className="fa-solid fa-file-book mr-2"></i> }
60+
<span className="fw-bold" style={{ color: isDark ? 'white' : 'black' }}>{pluginInfo.pluginTitle}</span>
10861
</div>
109-
<ToggleSwitch id={pluginInfo.envID} isOn={true} />
62+
<ToggleSwitch id={`toggleSwitch-${pluginInfo.pluginId}`} isOn={activePlugins.includes(pluginInfo.pluginId)} onClick={() => activateFeaturedPlugin(pluginInfo.pluginId)} />
11063
</div>
11164
<div className="p-2">
112-
<div className={`text-${pluginInfo.maintainedBy === 'Remix' ? 'success' : 'dark'} mb-1`}><i className="fa-solid fa-shield-halved mr-2"></i>Maintained by {pluginInfo.maintainedBy}</div>
113-
<div className="small">Description</div>
114-
<div className="small mb-2" style={{ color: isDark ? 'white' : 'black' }}>{intl.formatMessage({ id: pluginInfo.descriptionId })}</div>
115-
<a href={pluginInfo.documentationUrl} target="_blank" rel="noopener noreferrer" className="btn btn-secondary btn-sm w-100 text-decoration-none"><i className="fa-solid fa-book mr-1"></i>Open documentation</a>
65+
<div className={`text-${pluginInfo.maintainedByRemix ? 'success' : 'dark'} mb-1`}><i className="fa-solid fa-shield-halved mr-2"></i>Maintained by {pluginInfo.maintainedByRemix ? 'Remix' : 'Community'}</div>
66+
<div className="small mb-2" style={{ color: isDark ? 'white' : 'black' }}>{pluginInfo.description}</div>
67+
<RenderIf condition={pluginInfo.action.type === 'link'}>
68+
<a href={pluginInfo.action.url} target="_blank" rel="noopener noreferrer" className="btn btn-secondary btn-sm w-100 text-decoration-none" onClick={() => plugin.call(pluginInfo.action.pluginName, pluginInfo.action.pluginMethod)}><i className="fa-solid fa-book mr-1"></i>{pluginInfo.action.label}</a>
69+
</RenderIf>
70+
<RenderIf condition={pluginInfo.action.type === 'methodCall'}>
71+
<button className="btn btn-secondary btn-sm w-100 text-decoration-none" onClick={() => plugin.call(pluginInfo.action.pluginName, pluginInfo.action.pluginMethod)}><i className="fa-solid fa-book mr-1"></i>{pluginInfo.action.label}</button>
72+
</RenderIf>
11673
</div>
11774
</div>
11875
)
@@ -121,13 +78,13 @@ function HomeTabFeaturedPlugins({ plugin }: HomeTabFeaturedPluginsProps) {
12178
return (
12279
<div className="w-100 align-items-end remixui_featuredplugins_container" id="hTFeaturedPlugins">
12380
<div className="d-flex justify-content-between align-items-center mb-2">
124-
<h6 style={{ color: isDark ? 'white' : 'black' }}>Most used plugins</h6>
81+
<h6 style={{ color: isDark ? 'white' : 'black' }}>{fetchResults.caption}</h6>
12582
<button className="btn btn-secondary btn-sm" onClick={() => plugin.call('menuicons', 'select', 'pluginManager')} >Explore all plugins</button>
12683
</div>
12784
<div className="row">
12885
{
129-
featuredPlugins.map((pluginInfo) => (
130-
<div className="col-md-6">{ PluginCard(pluginInfo) }</div>
86+
fetchResults.plugins.map((pluginInfo: PluginInfo) => (
87+
<div className="col-md-6" key={pluginInfo.pluginId}>{ PluginCard(pluginInfo) }</div>
13188
))}
13289
</div>
13390
</div>

‎libs/remix-ui/home-tab/src/lib/fetch2.json

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{
2+
"caption": "Most used plugins",
3+
"plugins": [{
4+
"pluginId": "contractVerification",
5+
"pluginTitle": "Contract Verification",
6+
"action": {
7+
"type": "link",
8+
"label": "Open documentation",
9+
"url": "https://remix-ide.readthedocs.io/en/latest/contract_verification.html"
10+
},
11+
"iconClass": "fa-solid fa-file-contract",
12+
"maintainedByRemix": true,
13+
"description": "Verify your contracts on multiple services at the same time."
14+
},
15+
{
16+
"pluginId": "learnEth",
17+
"pluginTitle": "LearnEth Tutorials",
18+
"action": {
19+
"type": "methodCall",
20+
"label": "Open documentation",
21+
"url": "https://remix-ide.readthedocs.io/en/latest/learneth.html"
22+
},
23+
"iconClass": "fa-solid fa-book",
24+
"maintainedByRemix": true,
25+
"description": "Learn about Remix, Solidity, and other Web3 projects."
26+
},
27+
{
28+
"pluginId": "staticAnalysis",
29+
"pluginTitle": "Solidity Analyzers",
30+
"action": {
31+
"type": "link",
32+
"label": "Open documentation",
33+
"url": "https://remix-ide.readthedocs.io/en/latest/solidity_analyzers.html"
34+
},
35+
"iconClass": "fa-solid fa-file-code",
36+
"maintainedByRemix": true,
37+
"description": "Analyze your code using Remix, Solhint and Slither."
38+
},
39+
{
40+
"pluginId": "cookbook",
41+
"pluginTitle": "Cookbook",
42+
"action": {
43+
"type": "link",
44+
"label": "Open documentation",
45+
"url": "https://remix-ide.readthedocs.io/en/latest/cookbook.html"
46+
},
47+
"iconClass": "fa-solid fa-book",
48+
"maintainedByRemix": false,
49+
"description": "Find smart contracts, solidity libraries, and discover protocols."
50+
}]
51+
}

0 commit comments

Comments
 (0)