Merge branch 'master' of https://github.com/ethereum/remix-project
Your Name
4 months ago
commit
4d3dd97c80
@ -0,0 +1,190 @@ |
|||||||
|
import React from 'react' // eslint-disable-line
|
||||||
|
import { ViewPlugin } from '@remixproject/engine-web' |
||||||
|
import { PluginViewWrapper } from '@remix-ui/helper' |
||||||
|
import { RemixUIGridView } from '@remix-ui/remix-ui-grid-view' |
||||||
|
import { RemixUIGridSection } from '@remix-ui/remix-ui-grid-section' |
||||||
|
import { RemixUIGridCell } from '@remix-ui/remix-ui-grid-cell' |
||||||
|
import './style/environment-explorer.css' |
||||||
|
import type { Provider } from '../../blockchain/blockchain' |
||||||
|
|
||||||
|
import * as packageJson from '../../../../../package.json' |
||||||
|
|
||||||
|
const _paq = (window._paq = window._paq || []) |
||||||
|
|
||||||
|
const profile = { |
||||||
|
name: 'environmentExplorer', |
||||||
|
displayName: 'Environment Explorer', |
||||||
|
icon: 'assets/img/EnvironmentExplorerLogo.webp', |
||||||
|
description: 'Explore providers and customize web3 provider list', |
||||||
|
location: 'mainPanel', |
||||||
|
documentation: 'https://remix-ide.readthedocs.io/en/latest/run.html', |
||||||
|
version: packageJson.version, |
||||||
|
maintainedBy: 'Remix', |
||||||
|
permission: true, |
||||||
|
events: [], |
||||||
|
methods: [] |
||||||
|
} |
||||||
|
|
||||||
|
type ProvidersSection = `Injected` | 'Remix VMs' | 'Externals' |
||||||
|
|
||||||
|
export class EnvironmentExplorer extends ViewPlugin { |
||||||
|
providers: { [key in ProvidersSection]: Provider[] } |
||||||
|
providersFlat: { [key: string]: Provider } |
||||||
|
pinnedProviders: string[] |
||||||
|
dispatch: React.Dispatch<any> = () => {} |
||||||
|
|
||||||
|
constructor() { |
||||||
|
super(profile) |
||||||
|
this.providersFlat = {} |
||||||
|
this.providers = { |
||||||
|
'Injected': [], |
||||||
|
'Remix VMs': [], |
||||||
|
'Externals': [] |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
async onActivation(): Promise<void> { |
||||||
|
this.providersFlat = await this.call('blockchain', 'getAllProviders') |
||||||
|
this.pinnedProviders = await this.call('blockchain', 'getPinnedProviders') |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
|
||||||
|
addProvider (provider: Provider) { |
||||||
|
if (provider.isInjected) { |
||||||
|
this.providers['Injected'].push(provider) |
||||||
|
} else if (provider.isVM) { |
||||||
|
this.providers['Remix VMs'].push(provider) |
||||||
|
} else { |
||||||
|
this.providers['Externals'].push(provider) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
setDispatch(dispatch: React.Dispatch<any>): void { |
||||||
|
this.dispatch = dispatch |
||||||
|
this.renderComponent() |
||||||
|
} |
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<div className="bg-dark" id="environmentExplorer"> |
||||||
|
<PluginViewWrapper plugin={this} /> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderComponent() { |
||||||
|
this.dispatch({ |
||||||
|
...this |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
updateComponent(state: any) { |
||||||
|
this.providers = { |
||||||
|
'Injected': [], |
||||||
|
'Remix VMs': [], |
||||||
|
'Externals': [] |
||||||
|
} |
||||||
|
console.log(this.providersFlat) |
||||||
|
for (const [key, provider] of Object.entries(this.providersFlat)) { |
||||||
|
this.addProvider(provider) |
||||||
|
} |
||||||
|
return ( |
||||||
|
<RemixUIGridView |
||||||
|
plugin={this} |
||||||
|
styleList={""} |
||||||
|
logo={profile.icon} |
||||||
|
enableFilter={true} |
||||||
|
showUntagged={true} |
||||||
|
showPin={true} |
||||||
|
title={profile.description} |
||||||
|
description="Choose how you would like to interact with a chain." |
||||||
|
> |
||||||
|
<RemixUIGridSection |
||||||
|
plugin={this} |
||||||
|
title='Injected' |
||||||
|
hScrollable={true} |
||||||
|
> |
||||||
|
{this.providers['Injected'].map(provider => { |
||||||
|
return <RemixUIGridCell |
||||||
|
plugin={this} |
||||||
|
title={provider.name} |
||||||
|
classList='EECellStyle' |
||||||
|
pinned={this.pinnedProviders.includes(provider.name)} |
||||||
|
pinStateCallback={async (pinned: boolean) => { |
||||||
|
if (pinned) { |
||||||
|
this.emit('providerPinned', provider.name, provider) |
||||||
|
return true |
||||||
|
} |
||||||
|
const providerName = await this.call('blockchain', 'getProvider') |
||||||
|
if (providerName !== provider.name) { |
||||||
|
this.emit('providerUnpinned', provider.name, provider) |
||||||
|
return true |
||||||
|
} else { |
||||||
|
this.call('notification', 'toast', 'Cannot unpin the current selected provider') |
||||||
|
return false |
||||||
|
} |
||||||
|
}} |
||||||
|
> |
||||||
|
<div>{provider.name}</div> |
||||||
|
</RemixUIGridCell> |
||||||
|
})} |
||||||
|
</RemixUIGridSection> |
||||||
|
<RemixUIGridSection |
||||||
|
plugin={this} |
||||||
|
title='Remix VMs' |
||||||
|
hScrollable= {true} |
||||||
|
>{this.providers['Remix VMs'].map(provider => { |
||||||
|
return <RemixUIGridCell |
||||||
|
plugin={this} |
||||||
|
title={provider.name} |
||||||
|
classList='EECellStyle' |
||||||
|
pinned={this.pinnedProviders.includes(provider.name)} |
||||||
|
pinStateCallback={async (pinned: boolean) => { |
||||||
|
if (pinned) { |
||||||
|
this.emit('providerPinned', provider.name, provider) |
||||||
|
return true |
||||||
|
} |
||||||
|
const providerName = await this.call('blockchain', 'getProvider') |
||||||
|
if (providerName !== provider.name) { |
||||||
|
this.emit('providerUnpinned', provider.name, provider) |
||||||
|
return true |
||||||
|
} else { |
||||||
|
this.call('notification', 'toast', 'Cannot unpin the current selected provider') |
||||||
|
return false |
||||||
|
} |
||||||
|
}} |
||||||
|
> |
||||||
|
<div>{provider.name}</div> |
||||||
|
</RemixUIGridCell> |
||||||
|
})}</RemixUIGridSection> |
||||||
|
<RemixUIGridSection |
||||||
|
plugin={this} |
||||||
|
title='Externals' |
||||||
|
hScrollable= {true} |
||||||
|
>{this.providers['Externals'].map(provider => { |
||||||
|
return <RemixUIGridCell |
||||||
|
plugin={this} |
||||||
|
title={provider.name} |
||||||
|
classList='EECellStyle' |
||||||
|
pinned={this.pinnedProviders.includes(provider.name)} |
||||||
|
pinStateCallback={async (pinned: boolean) => { |
||||||
|
if (pinned) { |
||||||
|
this.emit('providerPinned', provider.name, provider) |
||||||
|
return true |
||||||
|
} |
||||||
|
const providerName = await this.call('blockchain', 'getProvider') |
||||||
|
if (providerName !== provider.name) { |
||||||
|
this.emit('providerUnpinned', provider.name, provider) |
||||||
|
return true |
||||||
|
} else { |
||||||
|
this.call('notification', 'toast', 'Cannot unpin the current selected provider') |
||||||
|
return false |
||||||
|
} |
||||||
|
}} |
||||||
|
> |
||||||
|
<div>{provider.name}</div> |
||||||
|
</RemixUIGridCell> |
||||||
|
})}</RemixUIGridSection> |
||||||
|
</RemixUIGridView> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
.EECellStyle { |
||||||
|
min-height: 4rem; |
||||||
|
max-width: 10rem; |
||||||
|
min-width: 9rem; |
||||||
|
max-height: 5rem; |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 9.9 KiB |
@ -0,0 +1,13 @@ |
|||||||
|
import { IFilePanel } from '@remixproject/plugin-api' |
||||||
|
import { StatusEvents } from '@remixproject/plugin-utils' |
||||||
|
|
||||||
|
export interface ILayoutApi { |
||||||
|
events:{ |
||||||
|
} & StatusEvents |
||||||
|
methods: { |
||||||
|
maximisePinnedPanel: () => void |
||||||
|
maximiseSidePanel: () => void |
||||||
|
resetPinnedPanel: () => void |
||||||
|
resetSidePanel: () => void |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
import { IFilePanel } from '@remixproject/plugin-api' |
||||||
|
import { StatusEvents } from '@remixproject/plugin-utils' |
||||||
|
|
||||||
|
export interface IPinnedPanelApi { |
||||||
|
events:{ |
||||||
|
|
||||||
|
} & StatusEvents |
||||||
|
methods: { |
||||||
|
currentFocus(): Promise<string> |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
import { IFilePanel } from '@remixproject/plugin-api' |
||||||
|
import { StatusEvents } from '@remixproject/plugin-utils' |
||||||
|
|
||||||
|
export interface ISidePanelApi { |
||||||
|
events:{ |
||||||
|
focusChanged: (name: string) => void; |
||||||
|
} & StatusEvents |
||||||
|
methods: { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
import React, { createContext } from 'react' |
||||||
|
import { defaultStatusBarContext, StatusBarContextType, StatusBarInterface } from '../lib/types' |
||||||
|
|
||||||
|
export const StatusBarContext = createContext<StatusBarContextType>(defaultStatusBarContext) |
||||||
|
|
||||||
|
export function StatusBarContextProvider ({ children }) { |
||||||
|
const statusBarProviderValues = { |
||||||
|
test: true |
||||||
|
} |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<StatusBarContext.Provider value={statusBarProviderValues}> |
||||||
|
{children} |
||||||
|
</StatusBarContext.Provider> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,35 @@ |
|||||||
|
import { CustomTooltip } from '@remix-ui/helper' |
||||||
|
import axios from 'axios' |
||||||
|
import React, { useEffect, useState } from 'react' |
||||||
|
|
||||||
|
export default function DidYouKnow () { |
||||||
|
const [tip, setTip] = useState<string>('') |
||||||
|
useEffect(() => { |
||||||
|
const abortController = new AbortController() |
||||||
|
const signal = abortController.signal |
||||||
|
async function showRemixTips() { |
||||||
|
const response = await axios.get('https://raw.githubusercontent.com/remix-project-org/remix-dynamics/main/ide/tips.json', { signal }) |
||||||
|
if (signal.aborted) return |
||||||
|
const tips = response.data |
||||||
|
const index = Math.floor(Math.random() * (tips.length - 1)) |
||||||
|
setTip(tips[index]) |
||||||
|
} |
||||||
|
try { |
||||||
|
showRemixTips() |
||||||
|
} catch (e) { |
||||||
|
console.log(e) |
||||||
|
} |
||||||
|
return () => { |
||||||
|
abortController.abort() |
||||||
|
} |
||||||
|
}, []) |
||||||
|
return ( |
||||||
|
<CustomTooltip tooltipText={'Did you know'}> |
||||||
|
<div className="remixui_statusbar_didyouknow text-white small d-flex align-items-center"> |
||||||
|
<span className="pr-2 text-success fa-solid fa-lightbulb"></span> |
||||||
|
<div className="mr-2">Did you know?</div> |
||||||
|
{ tip && tip.length > 0 ? <div>{tip}</div> : null } |
||||||
|
</div> |
||||||
|
</CustomTooltip> |
||||||
|
) |
||||||
|
} |
||||||
Loading…
Reference in new issue