fix version determination so it updates on deploy

Author: joeizang

libs/remix-ui/run-tab/src/lib/components/instanceContainerUI.tsx

@@ -39,6 +39,7 @@ export function InstanceContainerUI(props: InstanceContainerProps) {
           {props.instances.instanceList.map((instance, index) => {
             return (
               <UniversalDappUI
+                plugin={props.plugin}
                 key={index}
                 instance={instance}
                 context={props.getContext()}

libs/remix-ui/run-tab/src/lib/components/lowlevelInteractionIcon.tsx

@@ -1,9 +1,31 @@
 import { CustomTooltip } from '@remix-ui/helper'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
+import { RunTab } from '../types/run-tab'
 
-export function LowLevelInteractionIcon () {
-  const [version, _] = useState(window.location.href.split('=')[5].split('+')[0].split('-')[1])
+export type LowLevelInteractionIconProps = {
+  plugin: RunTab
+}
+
+export function LowLevelInteractionIcon (props: LowLevelInteractionIconProps) {
+  const getVersion = () => window.location.href.split('=')[5].split('+')[0].split('-')[1]
+  const [version, setVersion] = useState(() => getVersion())
+
+  useEffect(() => {
+    const listenForCompileFinished = async () => {
+      props.plugin.on('solidity', 'compilationFinished',
+        (file: string, source, languageVersion, data, input, version) => {
+          const versionUpdate = `v${version.split('+')[0]}` // remove commit hash
+          console.log(versionUpdate)
+          setVersion(versionUpdate)
+        })
+    }
+    listenForCompileFinished()
+
+    return () => {
+      props.plugin.off('solidity', 'compilationFinished')
+    }
+  }, [])
 
   return (
     <>

libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx

@@ -285,7 +285,7 @@ export function UniversalDappUI(props: UdappProps) {
             <div className="py-2 border-top d-flex justify-content-start flex-grow-1">
               <FormattedMessage id="udapp.lowLevelInteractions" />
             </div>
-            <LowLevelInteractionIcon />
+            <LowLevelInteractionIcon plugin={props.plugin} />
           </div>
           <div className="d-flex flex-column align-items-start">
             <label className="">CALLDATA</label>

libs/remix-ui/run-tab/src/lib/run-tab.tsx

@@ -322,6 +322,7 @@ export function RunTabUI(props: RunTabProps) {
             runTransactions={executeTransactions}
             sendValue={runTab.sendValue}
             getFuncABIInputs={getFuncABIValues}
+            plugin={props.plugin}
           />
         </div>
       </div>

libs/remix-ui/run-tab/src/lib/types/index.ts

@@ -283,6 +283,7 @@ export interface RecorderProps {
 }
 
 export interface InstanceContainerProps {
+  plugin: RunTab,
   instances: {
     instanceList: {
       contractData?: ContractData,
@@ -396,6 +397,7 @@ export interface UdappProps {
     decodedResponse?: Record<number, any>,
     abi?: any
   },
+  plugin: RunTab,
   context: 'memory' | 'blockchain',
   removeInstance: (index: number) => void,
   index: number,