Joseph Izang
1 month ago
committed by
GitHub
commit
c7cf7b6dde
@ -0,0 +1,2 @@ |
||||
export * from './lib/types' |
||||
export { EnvironmentExplorerUI } from './lib/components/environment-explorer-ui' |
||||
@ -0,0 +1,111 @@ |
||||
// eslint-disable-next-line no-use-before-define
|
||||
import React, { useEffect, useState } from 'react' |
||||
import { environmentExplorerUIGridSections, environmentExplorerUIProps } from '../types' |
||||
import { RemixUIGridCell, RemixUIGridSection, RemixUIGridView } from '@remix-ui/remix-ui-grid-view' |
||||
import { CustomTooltip } from '@remix-ui/helper' |
||||
|
||||
const defaultSections: environmentExplorerUIGridSections = { |
||||
Injected: { |
||||
title: 'Deploy using a Browser Extension.', |
||||
keywords: ['Injected'], |
||||
providers: [], |
||||
filterFn: (provider) => provider.isInjected |
||||
}, |
||||
'Remix VMs': { |
||||
title: 'Deploy to an In-browser Virtual Machine.', |
||||
keywords: ['Remix VMs'], |
||||
providers: [], |
||||
filterFn: (provider) => provider.isVM |
||||
}, |
||||
'Saved VM States': { |
||||
title: 'Deploy to an In-browser Saved VM State.', |
||||
keywords: ['Saved VM States'], |
||||
providers: [], |
||||
filterFn: (provider) => provider.isSavedState, |
||||
descriptionFn: (provider) => { |
||||
const { latestBlock, timestamp } = JSON.parse(provider.description) |
||||
return ( |
||||
<> |
||||
<div><b>Latest Block: </b>{parseInt(latestBlock)}</div> |
||||
<CustomTooltip |
||||
placement="auto" |
||||
tooltipId="overlay-tooltip-compile" |
||||
tooltipText={`Saved at: ${(new Date(timestamp)).toLocaleString()}`} |
||||
> |
||||
<div><b>Saved at: </b>{(new Date(timestamp)).toDateString()}</div> |
||||
</CustomTooltip> |
||||
</>) |
||||
} |
||||
}, |
||||
'Remix forked VMs': { |
||||
title: 'Deploy to a Remix forked Virtual Machine.', |
||||
keywords: ['Remix forked VMs'], |
||||
providers: [], |
||||
filterFn: (provider) => provider.isForkedVM |
||||
}, |
||||
'Externals': { |
||||
title: 'Deploy to an external Provider.', |
||||
keywords: ['Externals'], |
||||
providers: [], |
||||
filterFn: (provider) => (!provider.isInjected && !provider.isVM && !provider.isSavedState && !provider.isForkedVM) |
||||
}, |
||||
} |
||||
export const EnvironmentExplorerUI = (props: environmentExplorerUIProps) => { |
||||
|
||||
const [sections, setSections] = useState(defaultSections) |
||||
const { state, pinStateCallback, profile } = props |
||||
|
||||
useEffect(() => { |
||||
|
||||
setSections((prevSections) => { |
||||
const newSections = { ...prevSections } |
||||
Object.keys(newSections).forEach((section) => { |
||||
newSections[section].providers = Object.values(state.providersFlat).filter(newSections[section].filterFn) |
||||
}) |
||||
return newSections |
||||
}) |
||||
}, [state]) |
||||
|
||||
return ( |
||||
<> |
||||
<RemixUIGridView |
||||
plugin={null} |
||||
styleList={""} |
||||
logo={profile.icon} |
||||
enableFilter={true} |
||||
showUntagged={true} |
||||
showPin={true} |
||||
title={profile.description} |
||||
description="Select the providers and chains to include them in the ENVIRONMENT select box of the Deploy & Run Transactions plugin." |
||||
>{ |
||||
Object.values(sections).length && Object.values(sections).map((section) => ( |
||||
<RemixUIGridSection |
||||
plugin={this} |
||||
title={section.title} |
||||
hScrollable={false} |
||||
key={section.title} |
||||
> |
||||
{section.providers.map(provider => { |
||||
return <RemixUIGridCell |
||||
plugin={this} |
||||
title={provider.displayName} |
||||
logos={provider.logos} |
||||
classList='EECellStyle' |
||||
searchKeywords={['Injected', provider.name, provider.displayName, provider.title, provider.description]} |
||||
pinned={state.pinnedProviders.includes(provider.name)} |
||||
key={provider.name} |
||||
id={provider.name} |
||||
pinStateCallback={async (pinned: boolean) => { |
||||
await pinStateCallback(provider, pinned) |
||||
}} |
||||
> |
||||
<div>{(section.descriptionFn && section.descriptionFn(provider)) || provider.description}</div> |
||||
</RemixUIGridCell> |
||||
})} |
||||
</RemixUIGridSection> |
||||
)) |
||||
} |
||||
</RemixUIGridView> |
||||
</> |
||||
) |
||||
} |
||||
@ -0,0 +1,45 @@ |
||||
import { Plugin } from '@remixproject/engine' |
||||
import { Profile } from '@remixproject/plugin-utils' |
||||
|
||||
export type ProvidersSection = `Injected` | 'Remix VMs' | 'Externals' | 'Remix forked VMs' | 'Saved VM States' |
||||
|
||||
export type environmentExplorerUIProps = { |
||||
state: { |
||||
providersFlat: { [key: string]: Provider } |
||||
pinnedProviders: string[] |
||||
} |
||||
pinStateCallback (provider: Provider, pinned: boolean): Promise<void> |
||||
profile: Profile |
||||
} |
||||
|
||||
export type environmentExplorerUIGridSection = { |
||||
title: string |
||||
keywords: string[], |
||||
providers: Provider[] |
||||
filterFn: (provider: Provider) => boolean |
||||
descriptionFn?: (provider: Provider) => string | JSX.Element | null |
||||
} |
||||
|
||||
export type environmentExplorerUIGridSections = { |
||||
[key in ProvidersSection]: environmentExplorerUIGridSection |
||||
} |
||||
|
||||
export type Provider = { |
||||
options: { [key: string]: string } |
||||
dataId: string |
||||
name: string |
||||
displayName: string |
||||
logo?: string, |
||||
logos?: string[], |
||||
fork: string |
||||
description?: string |
||||
isInjected: boolean |
||||
isVM: boolean |
||||
isSavedState: boolean |
||||
isForkedVM: boolean |
||||
title: string |
||||
init: () => Promise<void> |
||||
provider: { |
||||
sendAsync: (payload: any) => Promise<void> |
||||
} |
||||
} |
||||
Loading…
Reference in new issue