From 27ae1dc6e8097d2826cb9b805f4306561886fac9 Mon Sep 17 00:00:00 2001 From: lianahus Date: Mon, 15 Apr 2024 15:15:36 +0200 Subject: [PATCH] added Grid view file --- apps/remix-ide/src/app/plugins/remixGuide.tsx | 240 ++++++++++++++++++ 1 file changed, 240 insertions(+) create mode 100644 apps/remix-ide/src/app/plugins/remixGuide.tsx diff --git a/apps/remix-ide/src/app/plugins/remixGuide.tsx b/apps/remix-ide/src/app/plugins/remixGuide.tsx new file mode 100644 index 0000000000..1c4cd51eee --- /dev/null +++ b/apps/remix-ide/src/app/plugins/remixGuide.tsx @@ -0,0 +1,240 @@ +import React from 'react' +import { ViewPlugin } from '@remixproject/engine-web' +import { PluginViewWrapper } from '@remix-ui/helper' +import { RemixAppManager } from '../../remixAppManager' +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 { ThemeKeys, ThemeObject } from '@microlink/react-json-view' +//@ts-ignore +const _paq = (window._paq = window._paq || []) + +const profile = { + name: 'remixGuide', + displayName: 'Remix Guide', + description: 'Learn remix with videos', + location: 'mainPanel', + methods: ['showDetails'], + events: [] +} + +export class RemixGuidePlugin extends ViewPlugin { + dispatch: React.Dispatch = () => { } + appManager: RemixAppManager + element: HTMLDivElement + payload: any + themeStyle: any + theme: ThemeKeys | ThemeObject + constructor(appManager: RemixAppManager) { + super(profile) + this.appManager = appManager + this.element = document.createElement('div') + this.element.setAttribute('id', 'remixGuideEl') + } + + async onActivation() { + this.handleThemeChange() + await this.call('tabs', 'focus', 'remixGuide') + this.renderComponent() + _paq.push(['trackEvent', 'plugin', 'activated', 'remixGuide']) + } + + onDeactivation(): void { + } + + async showDetails(sentPayload: any) { + const contractName = Object.entries(sentPayload).find(([key, value]) => key) + await this.call('tabs', 'focus', 'remixGuide') + this.profile.displayName = `${contractName[0]}` + this.payload = sentPayload + const active = await this.call('theme', 'currentTheme') + + this.renderComponent() + } + + private handleThemeChange() { + this.on('theme', 'themeChanged', (theme: any) => { + + this.renderComponent() + }) + } + + setDispatch(dispatch: React.Dispatch): void { + this.dispatch = dispatch + this.renderComponent() + } + render() { + return ( +
+ +
+ ) + } + + renderComponent() { + this.dispatch({ + ...this, + ...this.payload, + themeStyle: this.themeStyle, + theme: this.theme + }) + } + + updateComponent(state: any) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) + } + +}