Bootstrap instance container

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

@@ -0,0 +1,26 @@
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
+import { InstanceContainerProps } from '../types'
+
+export function InstanceContainerUI (props: InstanceContainerProps) {
+  const clearInstance = () => {
+    // this.instanceContainer.innerHTML = '' // clear the instances list
+    // this.instanceContainer.appendChild(instanceContainerTitle)
+    // this.instanceContainer.appendChild(this.noInstancesText)
+  }
+
+  return (
+    <div className="udapp_instanceContainer border-0 list-group-item">
+      <div className="d-flex justify-content-between align-items-center pl-2 ml-1 mb-2"
+        title="Autogenerated generic user interfaces for interaction with deployed contracts">
+        Deployed Contracts
+        <i className="mr-2 udapp_icon far fa-trash-alt" data-id="deployAndRunClearInstances" onClick={clearInstance}
+          title="Clear instances list and reset recorder" aria-hidden="true">
+        </i>
+      </div>
+      <span className="mx-2 mt-3 alert alert-warning" data-id="deployAndRunNoInstanceText" role="alert">
+        Currently you have no contract instances to interact with.
+      </span>
+    </div>
+  )
+}

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

@@ -1,6 +1,7 @@
 // eslint-disable-next-line no-use-before-define
 import React, { useState } from 'react'
 import { ContractDropdownUI } from './components/contractDropdownUI'
+import { InstanceContainerUI } from './components/instanceContainerUI'
 import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
 import './css/run-tab.css'
@@ -19,7 +20,7 @@ export function RunTabUI (props: RunTabProps) {
         <SettingsUI selectExEnv={selectExEnv} updateExEnv={updateExEnv} />
         <ContractDropdownUI exEnvironment={selectExEnv} />
         <RecorderUI />
-        {/* ${this.instanceContainer} */}
+        <InstanceContainerUI />
       </div>
     </div>
   )

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

@@ -34,3 +34,7 @@ export interface ContractDropdownProps {
 export interface RecorderProps {
 
 }
+
+export interface InstanceContainerProps {
+
+}