From 6437dead72b29cae0c7f1d5b7010d90c50f870a9 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Sat, 9 Dec 2023 02:34:09 +0100 Subject: [PATCH] style results. cleanup --- .../app/plugins/vyper-compilation-details.tsx | 89 ++++++++++++++++++- apps/vyper/src/app/components/VyperResult.tsx | 2 - apps/vyper/src/app/utils/remix-client.tsx | 1 - .../src/lib/vyper-compile-details.tsx | 22 +++-- .../src/lib/vyperCompile.tsx | 76 ++++++++-------- 5 files changed, 136 insertions(+), 54 deletions(-) diff --git a/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx b/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx index d3cb4240ca..e819dde854 100644 --- a/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx +++ b/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx @@ -3,6 +3,7 @@ import { ViewPlugin } from '@remixproject/engine-web' import {PluginViewWrapper} from '@remix-ui/helper' import { RemixAppManager } from '../../remixAppManager' import { RemixUiVyperCompileDetails } from '@remix-ui/vyper-compile-details' +import { ThemeKeys, ThemeObject } from '@microlink/react-json-view' //@ts-ignore const _paq = (window._paq = window._paq || []) @@ -20,6 +21,8 @@ export class VyperCompilationDetailsPlugin extends ViewPlugin { appManager: RemixAppManager element: HTMLDivElement payload: any + themeStyle: any + theme: ThemeKeys | ThemeObject constructor(appManager: RemixAppManager) { super(profile) this.appManager = appManager @@ -35,6 +38,7 @@ export class VyperCompilationDetailsPlugin extends ViewPlugin { } async onActivation() { + this.handleThemeChange() await this.call('tabs', 'focus', 'vyperCompilationDetails') this.renderComponent() _paq.push(['trackEvent', 'plugin', 'activated', 'vyperCompilationDetails']) @@ -51,11 +55,88 @@ export class VyperCompilationDetailsPlugin extends ViewPlugin { this.profile.displayName = `${contractName}` this.renderComponent() this.payload = sentPayload + const active = await this.call('theme', 'currentTheme') + console.log(active) + if (active.quality === 'dark') { + switch(active.name) { + case 'HackerOwl': + this.theme = 'harmonic' + this.themeStyle = { backgroundColor: active.backgroundColor } + break + case 'Black': + this.theme = 'eighties' + this.themeStyle = { backgroundColor: active.backgroundColor } + break + case 'Cyborg': + this.theme = 'shapeshifter' + this.themeStyle = { backgroundColor: active.backgroundColor } + break + case 'Dark': + this.theme = 'flat' + this.themeStyle = { backgroundColor: active.backgroundColor } + break + default: + this.theme = 'shapeshifter' + this.themeStyle = { backgroundColor: active.backgroundColor } + break + } + } else { + switch(active.name) { + case 'Candy': + this.theme = 'apathy:inverted' + this.themeStyle = { backgroundColor: active.backgroundColor } + break + case 'Midcentury': + this.theme = 'apathy:inverted' + this.themeStyle = { backgroundColor: active.backgroundColor } + break + case 'Unicorn': + this.theme = 'apathy:inverted' + this.themeStyle = { backgroundColor: active.backgroundColor } + break + case 'Violet': + this.theme = 'summerfruit:inverted' + this.themeStyle = { backgroundColor: active.backgroundColor } + break + default: + this.theme = 'bright:inverted' + break + } + } this.renderComponent() } + private handleThemeChange() { + this.on('theme', 'themeChanged', (theme: any) => { + if (theme.quality === 'dark') { + switch(theme.name) { + case 'HackerOwl': + this.theme = 'solarized' + break + case 'Black': + this.theme = 'shapeshifter' + break + case 'Cyborg': + this.theme = 'shapeshifter' + break + case 'Dark': + this.theme = 'harmonic' + break + default: + this.theme = 'shapeshifter' + break + } + } else { + this.theme = 'bright:inverted' + } + this.themeStyle = { color: theme.quality === 'dark' ? '#ffffff'/*theme.textColor*/ : theme.textColor } + this.renderComponent() + }) + } + setDispatch(dispatch: React.Dispatch): void { this.dispatch = dispatch + this.renderComponent() } render() { return ( @@ -68,14 +149,18 @@ export class VyperCompilationDetailsPlugin extends ViewPlugin { renderComponent() { this.dispatch({ ...this, - ...this.payload + ...this.payload, + themeStyle: this.themeStyle, + theme: this.theme }) } updateComponent(state: any) { return ( ) } diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx index d8f57f86cb..56c32702de 100644 --- a/apps/vyper/src/app/components/VyperResult.tsx +++ b/apps/vyper/src/app/components/VyperResult.tsx @@ -3,8 +3,6 @@ import {VyperCompilationOutput, isCompilationError} from '../utils' import Tabs from 'react-bootstrap/Tabs' import Tab from 'react-bootstrap/Tab' import Button from 'react-bootstrap/Button' -import JSONTree, { ThemeKeys } from 'react-json-view' -import ReactJson from 'react-json-view' import {CopyToClipboard} from '@remix-ui/clipboard' import { VyperCompilationResult } from '../utils/types' diff --git a/apps/vyper/src/app/utils/remix-client.tsx b/apps/vyper/src/app/utils/remix-client.tsx index 74cb87d2c6..91db5aa5d2 100644 --- a/apps/vyper/src/app/utils/remix-client.tsx +++ b/apps/vyper/src/app/utils/remix-client.tsx @@ -4,7 +4,6 @@ import {createClient} from '@remixproject/plugin-webview' import {PluginClient} from '@remixproject/plugin' import {Contract} from './compiler' import {ExampleContract} from '../components/VyperResult' -import { ThemeKeys } from 'react-json-view' export class RemixClient extends PluginClient { private client = createClient>(this) diff --git a/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx b/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx index a017fa8ee6..63da76b412 100644 --- a/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx +++ b/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx @@ -1,23 +1,27 @@ import React from 'react' import VyperCompile from './vyperCompile' -//@ts-nocheck +import { ThemeKeys, ThemeObject } from '@microlink/react-json-view' interface RemixUiVyperCompileDetailsProps { payload: any + theme?: ThemeKeys | ThemeObject + themeStyle?: any } -export function RemixUiVyperCompileDetails({ payload }: RemixUiVyperCompileDetailsProps) { - const dpayload = Object.values(payload) as any - +export function RemixUiVyperCompileDetails({ payload, theme, themeStyle }: RemixUiVyperCompileDetailsProps) { + const dpayload = Object.values(payload) as any ?? {} + const bcode = dpayload[0].bytecode ? dpayload[0].bytecode.object : '' + const runtimeBcode = dpayload[0].runtimeBytecode ? dpayload[0].runtimeBytecode.object : '' + const ir = dpayload[0].ir + const methodIdentifiers= dpayload[0].methodIdentifiers + const abi= dpayload[0].abi return ( <> ) diff --git a/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx b/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx index 18608b3056..a3a939a8d8 100644 --- a/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx +++ b/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx @@ -1,13 +1,10 @@ import { CopyToClipboard } from '@remix-ui/clipboard' -import { CustomTooltip } from '@remix-ui/helper' -import JSONTree, { ThemeKeys } from 'react-json-view' +import JSONTree, { ThemeKeys, ThemeObject } from '@microlink/react-json-view' import React, { useState } from 'react' -// import { Tabs, Tab, Button } from 'react-bootstrap' import { useIntl } from 'react-intl' import Tabs from 'react-bootstrap/Tabs' import Tab from 'react-bootstrap/Tab' import Button from 'react-bootstrap/Button' -import { TreeView, TreeViewItem } from '@remix-ui/tree-view' import { ABIDescription } from '@remixproject/plugin-api' const _paq = (window._paq = window._paq || []) @@ -22,70 +19,69 @@ export interface VyperCompilationResult { } } +export interface VyperCompileProps { + result: VyperCompilationResult + theme?: ThemeKeys | ThemeObject + themeStyle?: any +} + -export default function VyperCompile(props: VyperCompilationResult) { +export default function VyperCompile({result, theme, themeStyle}: VyperCompileProps) { const intl = useIntl() - // const downloadFn = () => { - // _paq.push(['trackEvent', 'compiler', 'compilerDetails', 'download']) - // saveAs(new Blob([JSON.stringify(contractProperties, null, '\t')]), `${selectedContract}_compData.json`) - // } - const [active, setActive] = useState('abi') + const [active, setActive] = useState('abi') + console.log(theme, themeStyle) const tabContent = [ { tabHeadingText: 'ABI', - tabPayload: props.abi, //Object.values(props)[0]['abi'], + tabPayload: result.abi, tabMemberType: 'abi', tabButtonText: () => 'Copy ABI', eventKey: 'abi' }, { tabHeadingText: 'Bytecode', - tabPayload: props.bytecode, //Object.values(props)[0]['bytecode'].object.toString(), + tabPayload: result.bytecode, tabMemberType: 'bytecode', tabButtonText: () => 'Copy Bytecode', eventKey: 'bytecode' }, { tabHeadingText: 'Runtime Bytecode', - tabPayload: props.bytecodeRuntime,// Object.values(props)[0]['runtimeBytecode'].object.toString(), + tabPayload: result.bytecodeRuntime, tabMemberType: 'bytecode_runtime', tabButtonText: () => 'Copy Runtime Bytecode', eventKey: 'bytecode_runtime' } - // { - // tabHeadingText: 'LLL', - // tabPayload: Object.values(contractProperties)[0]['ir'] ? '' : '', - // tabMemberType: 'ir', - // tabButtonText: () => Object.values(contractProperties)[0]['ir'] ? 'Copy LLL Code' : 'Nothing to copy yet', - // eventKey: 'ir' - // } ] return ( <> - {/*
- {selectedContract} - - Download - -
*/} setActive(key)} justify> {tabContent.map((content, index) => ( - content.eventKey !== 'abi' ? content.tabPayload : JSON.stringify(Object.values(props)[0]['abi'])}> - - - { - content.eventKey === 'abi' ? : ( - - ) - } - {/* */} - ))} +
+ (content.eventKey !== 'abi' ? content.tabPayload : JSON.stringify(Object.values(result)[0]['abi']))}> + + + {content.eventKey === 'abi' ? ( +
+ +
+ ) : ( +
+ +
+ )} +
+ + ))} )