style results. cleanup

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<any>): 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 (
       <RemixUiVyperCompileDetails
-        payload={this.payload}
+        payload={state.payload}
+        theme={state.theme}
+        themeStyle={state.themeStyle}
       />
     )
   }

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'
 

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<Api, Readonly<RemixApi>>(this)

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) {
+export function RemixUiVyperCompileDetails({ payload, theme, themeStyle }: RemixUiVyperCompileDetailsProps) {
-  const dpayload = Object.values(payload) as any
+  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 (
     <>
       <VyperCompile
-        ir={dpayload[0].ir}
+        result={{bytecode: bcode, bytecodeRuntime: runtimeBcode, ir: ir, methodIdentifiers: methodIdentifiers, abi: abi}}
-        methodIdentifiers={dpayload[0].methodIdentifiers}
+        theme={theme}
-        abi={dpayload[0].abi}
+        themeStyle={themeStyle}
-        bytecode={dpayload[0].bytecode}
-        bytecodeRuntime={dpayload[0].bytecodeRuntime}
       />
     </>
   )

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, ThemeObject } from '@microlink/react-json-view'
-import JSONTree, { ThemeKeys } from '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<keyof VyperCompilationResult>('abi')
 
+  const [active, setActive] = useState<keyof VyperCompilationResult>('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 (
     <>
-      {/* <div className="d-flex justify-content-between align-items-center mr-1">
-        <span className="lead">{selectedContract}</span>
-        <CustomTooltip tooltipText={intl.formatMessage({id: 'solidity.compileDetails'})}>
-          <span className="btn btn-outline-success border-success mr-1" onClick={downloadFn}>Download</span>
-        </CustomTooltip>
-      </div> */}
       <Tabs id="result" activeKey={active} onSelect={(key: any) => setActive(key)} justify>
         {tabContent.map((content, index) => (
           <Tab eventKey={content.eventKey} title={content.tabHeadingText} as={'span'} key={`${index}-${content.eventKey}`}>
-            <CopyToClipboard getContent={() => content.eventKey !== 'abi' ? content.tabPayload : JSON.stringify(Object.values(props)[0]['abi'])}>
+            <div className="d-flex flex-column w-75 justify-content-center mx-auto rounded-2">
-              <Button variant="info" className="copy" data-id={content.eventKey === 'abi' ? "copy-abi" : ''}>
+              <CopyToClipboard getContent={() => (content.eventKey !== 'abi' ? content.tabPayload : JSON.stringify(Object.values(result)[0]['abi']))}>
+                <Button variant="info" className="copy mt-3 ml-2" data-id={content.eventKey === 'abi' ? 'copy-abi' : ''}>
+                  <span className="far fa-copy mr-2"></span>
                   {content.tabButtonText()}
                 </Button>
               </CopyToClipboard>
-            {
+              {content.eventKey === 'abi' ? (
-              content.eventKey === 'abi' ? <JSONTree src={content.tabPayload as ABIDescription[]} theme={{} as any}/> : (
+                <div className="my-3">
-                <textarea defaultValue={content.tabPayload as string}></textarea>
+                  <JSONTree
-              )
+                    src={content.tabPayload as ABIDescription[]}
-            }
+                    theme={theme}
-            {/* <Button>
+                    style={themeStyle}
-              {content.tabButtonText()}
+                  />
-            </Button> */}
+                </div>
-          </Tab>))}
+              ) : (
+                <div className="w-100 mt-2 p-2 mx-auto">
+                  <textarea className="form-control rounded-2" defaultValue={content.tabPayload as string} rows={15}></textarea>
+                </div>
+              )}
+            </div>
+          </Tab>
+        ))}
       </Tabs>
     </>
   )