improved contract view

src/App.css

@@ -11,6 +11,9 @@
   --button-danger-hover: rgb(184, 58, 58);
   --button-danger-active: rgb(185, 41, 41);
   --scrollbar-color: rgba(205, 210, 234, 0.509);
+  --alternate-color-odd: rgb(67, 62, 111);
+  --alternate-color-even: rgb(105, 53, 88);
+  --popup-background: #131a2e;
 }
 
 #root {
@@ -30,6 +33,12 @@ body {
   /* background-image: linear-gradient(225deg, #5a173c 0%, #331e43 45%, #154160 100%); */
 }
 
+.data-popup {
+  background-color: var(--popup-background);
+  border: 1px solid black;
+  text-align: left;
+  box-shadow: 4px 4px 5px 1px rgba(0, 0, 0, 0.25);
+}
 .flex-row {
   display: flex;
   justify-content: start;
@@ -168,6 +177,7 @@ button.disabled:hover {
 
 .copy-widget {
   margin-left: 10px;
+  padding: 2px;
 }
 
 .select {
@@ -180,24 +190,14 @@ button.disabled:hover {
   padding: 5px;
 }
 
-input {
-  border-radius: 0px;
-  border: solid 1px #ffffff77;
-}
-input:hover {
-  border: 1px solid rgb(158, 172, 181);
-  outline: none;
-}
-input:focus {
-  border: 1px solid rgb(158, 172, 181);
-  outline: none;
-}
-
 .text-input {
-  border: 1px solid white;
   font-size: 15px;
-  background-color: #00000000;
+  background-color: var(--main-background-darkest);
   height: 17px;
+  border: none;
+  outline: none;
+  border-bottom: solid 1px #ffffff55;
+  padding: 2px;
 }
 
 
@@ -244,6 +244,15 @@ input:focus {
   }
 }
 
+@supports ( -moz-appearance:none ){
+  .data-popup{
+      scrollbar-width: thin;
+      scrollbar-color: var(--scrollbar-color) #0000;
+      scrollbar-gutter: stable;
+  }
+}
+
+
 ::-webkit-scrollbar-track {
   background-color: #00000000 !important;
 }

src/App.tsx

@@ -29,7 +29,6 @@ function App() {
   return (() => {
       return (
         <MonacoContext.Provider value={monaco}>
-          <Settings />
           <Tooltip />
           <ContextMenu />
           <div className={`main-layout-container ${loadingVisibilityClass}`}>

src/components/Copy.tsx

@@ -21,7 +21,7 @@ function Copy({ value }: CopyProps): JSX.Element {
 
   return (
     <span title='Copy' onClick={handleCopy} className='copy-widget' style={{ cursor: 'pointer' }}>
-      {copied ? '✓' : '📋'}
+      {copied ?  ' ✓ ' : '📋'}
     </span>
   )
 }

src/components/JsonPopup.tsx

@@ -0,0 +1,47 @@
+import { useState, useRef, useEffect } from "react"
+
+type JsonPopupProps = {
+    children: React.ReactNode
+    jsonString: string
+}
+
+function JsonPopup({ children, jsonString }: JsonPopupProps) {
+    const [isHovering, setIsHovering] = useState(false)
+    const [popupPosition, setPopupPosition] = useState({ top: 0, left: 0 })
+    const triggerElementRef = useRef<HTMLDivElement>(null)
+    const popupRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        if (isHovering && triggerElementRef.current && popupRef.current) {
+            const triggerRect = triggerElementRef.current.getBoundingClientRect()
+            const popupRect = popupRef.current.getBoundingClientRect()
+            setPopupPosition({
+                top: triggerRect.top - popupRect.height / 2,
+                left: triggerRect.left - popupRect.width / 2
+            })
+        }
+    }, [isHovering])
+
+    const popupStyle: React.CSSProperties = {
+        position: 'fixed',
+        zIndex: 100,
+        maxHeight: '40vh',
+        maxWidth: '40vw',
+        overflow: 'auto',
+        padding: '10px',
+        display: isHovering ? 'block' : 'none',
+        top: `${popupPosition.top}px`,
+        left: `${popupPosition.left}px`
+    }
+
+    return (
+        <div ref={triggerElementRef} onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)}>
+            {children}
+            <div className='data-popup' ref={popupRef} style={popupStyle} onMouseLeave={() => setIsHovering(false)}>
+                <pre>{jsonString}</pre>
+            </div>
+        </div>
+    )
+}
+
+export default JsonPopup

src/features/management/managementSlice.ts

@@ -1,6 +1,6 @@
 import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { Lucid, Network, Script, WalletApi } from 'lucid-cardano'
-export const TAB_NAMES = ['Build', 'Contracts', 'Wallets', 'Transact']
+export const TAB_NAMES = ['Build', 'Contracts', 'Wallets', 'Transact', 'Settings']
 
 export interface Wallet {
     address: string,

src/features/settings/settingsSlice.ts

@@ -29,14 +29,12 @@ interface SettingsFormState {
 }
 
 interface SettingsState {
-    open: boolean
     network: Network
     providerConfig: ProviderConfig,
     form: SettingsFormState
 }
 
 const initialState: SettingsState = {
-    open: false,
     network: 'Custom',
     providerConfig: {
         kind: 'emulator'
@@ -61,11 +59,7 @@ const settingsSlice = createSlice({
     name: 'tooltip',
     initialState,
     reducers: {
-        toggleSettings: (state) => {
-            state.open = !state.open
-        },
         saveUpdatedSettings: (state) => {
-            state.open = false
             state.network = state.form.network === 'Emulator' ? 'Custom' : state.form.network
 
             if (state.form.providerKind === 'blockfrost') {
@@ -102,7 +96,6 @@ const settingsSlice = createSlice({
 })
 
 export const {
-    toggleSettings,
     saveUpdatedSettings,
     setFormProviderKind,
     setBlockfrostConfig,

src/panels/TopBar.css

@@ -18,7 +18,6 @@
     justify-content: space-between;
     align-items: center;
     gap: 20px;
-    box-shadow: inset 7px 0px 11px 1px rgb(0, 0, 0, 0.18);
 }
 
 .management-top-bar {

src/panels/management/ManagementPanel.tsx

@@ -5,6 +5,7 @@ import { RootState } from '../../app/store'
 import { Contracts } from './contract/Contracts'
 import { Wallets } from './wallet/Wallets'
 import { Transact } from './transact/Transact'
+import { Settings } from '../settings/Settings'
 
 function ManagementPanel() {
     const management = useSelector((state: RootState) => state.management)
@@ -18,6 +19,8 @@ function ManagementPanel() {
             return <Wallets />
         } else if (management.selectedTabIndex === 3) {
             return <Transact />
+        } else if (management.selectedTabIndex === 4) {
+            return <Settings />
         }
     })()