quick organizational refactor to keep things from getting out of hand

README.md

@@ -1,11 +1,7 @@
 # aiken ide
 
-react + redux toolkit
-
-redux wont seem like overkill once we have wallet management and transaction building integrated
-
-trust
-
+idea: stop using deno or the cli to run your scripts. use a websight instead
+stack: react + redux toolkit
 
 todo:
 - aiken modules support (.ak files are totally independent atm)
@@ -18,4 +14,8 @@ todo:
 
 - non-emulator networks
 
+- adjust panel sizes by clicking and dragging the divider between them
+
+- selectable aiken version 😭😭😭
+
 - an unimaginably long list of other stuff

src/App.tsx

@@ -13,8 +13,8 @@ import { editor } from 'monaco-editor'
 import MonacoContext from './context/MonacoContext'
 import { EditorTabs } from './panels/editor/EditorTabs'
 import { FileManager } from './panels/editor/FileManager'
-import Tooltip from './components/tooltip'
-import { ContextMenu } from './components/contextMenu'
+import Tooltip from './components/Tooltip'
+import { ContextMenu } from './components/ContextMenu'
 import { ManagementTabs } from './panels/management/ManagementTabs'
 
 function App() {

src/components/Copy.tsx

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

src/panels/management/ManagementPanel.css

@@ -89,13 +89,15 @@
     flex-direction: column;
     align-items: start;
     width: 100%;
+
+    margin: 10px;
+    margin-top: 0px;
 }
 
 .build-result-filename {
     padding: 5px;
-    font-size: 20px;
-    background-color: rgb(47, 41, 43);
-    width: 100%;
+    margin-left: 10px;
+    font-size: 26px;
     display: flex;
     box-sizing: border-box;
 }
@@ -138,15 +140,6 @@
     border-bottom: 1px solid rgb(64, 140, 216);
 }
 
-.contracts-content {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    height: calc(94vh - 45px); /* 45px is the height of the tabs */
-}
-
 .transact-content {
     display: flex;
     flex-direction: column;
@@ -156,131 +149,6 @@
     height: calc(94vh - 45px); /* 45px is the height of the tabs */
 }
 
-.wallets-content {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    height: calc(94vh - 45px); /* 45px is the height of the tabs */
-}
-
-.wallet-utxos-container {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    width:100%;
-}
-
-.wallet-utxos-address {
-    padding: 5px;
-    padding-left: 15px;
-    background-color: rgb(45, 40, 40);
-    width:100%;
-    display: flex;
-    font-size: 18px;
-}
-
-.utxo-container {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    margin-left: 30px;
-    width: 100%;
-    padding: 5px;
-}
-
-.wallet-utxos > div:nth-child(odd) {
-    background-color: #5b5b5b;
-}
-
-.wallet-utxos > div:nth-child(even) {
-    background-color: #4a4a4a;
-}
-
-.wallet-utxos {
-    width: 100%;
-}
-
-.asset-container {
-    display: flex;
-    flex-direction: row;
-    margin-left: 15px
-}
-
-.asset-label {
-    margin-right: 5px;
-}
-
-.contracts-heading {
-    font-size: 30px;
-    padding: 10px;
-    margin-bottom: 10px;
-    width: 100%;
-    border-bottom: 5px solid rgb(64, 140, 216);
-    display: flex;
-}
-
-.add-contract-container {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    margin-left: 15px;
-    border-left: 2px solid rgb(64, 140, 216);
-    border-bottom: 2px solid rgb(64, 140, 216);
-    min-width: 300px;
-    padding: 10px;
-}
-
-.add-contract-header {
-    font-size: 18px;
-    font-weight: bold;
-    margin-bottom: 20px;
-}
-
-.add-contract-selection-container {
-    display:flex;
-    flex-direction: row;
-    justify-content: space-between;
-    width: 100%;
-
-    margin-bottom: 5px;
-}
-
-.add-contract-input-label {
-    margin-right: 50px;
-    padding-left: 20px;
-    font-size: 16px;
-}
-
-.add-contract-select {
-    border-radius: 0px;
-    border: 1px solid rgb(158, 172, 181);
-}
-
-.add-contract-button {
-    font-size: 16px;
-    background-color: rgb(22, 49, 115);
-    border: solid 1px  rgb(158, 172, 181);
-    padding: 2px;
-    padding-left: 5px;
-    padding-right: 5px;
-}
-
-.add-contract-button:hover {
-    background-color: rgb(32, 80, 128);
-    cursor: pointer;
-}
-
-.add-contract-button:active {
-    background-color: rgb(103, 148, 193);
-    cursor: pointer;
-}
-
-
-.add-contract-button-container {
-    margin-top: 20px;
-}
 
 .disabled {
     cursor: not-allowed !important;
@@ -292,98 +160,3 @@
     background-color: #cccccc !important;   
 }
 
-.contracts-container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: start;
-    min-width: 300px;
-    padding: 15px;
-    width: 100%;
-    margin-top: 10px;
-}
-
-.contract-container {
-    margin-left: 20px;
-    margin-bottom: 20px;
-    min-width: 250px;
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    background-color: rgb(11, 11, 25);
-    border: solid 1px  rgb(158, 172, 181);
-}
-
-.contract-header {
-    display: flex;
-    background-color: rgb(37, 36, 76);
-    border: solid 1px  rgb(158, 172, 181);
-    width: 100%;
-    padding: 5px;
-    padding-left: 10px;
-    margin-bottom: 5px;
-    display: flex;
-    box-sizing: border-box;
-}
-
-.delete-contract-button {
-    font-size: 16px;
-    background-color: rgb(22, 49, 115);
-    border: solid 1px  rgb(158, 172, 181);
-    padding: 2px;
-    padding-left: 5px;
-    padding-right: 5px;
-    margin: 10px;
-}
-
-.delete-contract-button-container {
-    display:flex;
-    justify-content: end;
-    width: 100%;
-}
-
-.delete-contract-button:hover {
-    background-color: rgb(32, 80, 128);
-    cursor: pointer;
-}
-
-.delete-contract-button:active {
-    background-color: rgb(103, 148, 193);
-    cursor: pointer;
-}
-
-.contract-name {
-    font-weight: bold;
-    font-size: 16px;
-}
-
-.contract-version {
-    padding: 5px;
-    width: 100%;
-    text-align: right;
-    box-sizing: border-box;
-    font-size: 12px;
-}
-
-.contract-data-holder {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-}
-
-.contract-params {
-    margin-left: 10px;
-    margin-bottom: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items:start;
-    width: 100%;
-}
-.contract-params-content {
-    margin-left: 5px;
-    font-size: 12px;
-}
-
-.contract-params-label {
-    font-weight: bold;
-}

src/panels/management/ManagementPanel.tsx

@@ -2,8 +2,8 @@ import './ManagementPanel.css'
 import { BuildResults } from "./BuildResults"
 import { useSelector } from 'react-redux'
 import { RootState } from '../../app/store'
-import { Contracts } from './Contracts'
-import { Wallets } from './Wallets'
+import { Contracts } from './contract/Contracts'
+import { Wallets } from './wallet/Wallets'
 import { Transact } from './Transact'
 
 function ManagementPanel() {

src/panels/management/AddContract.tsx → src/panels/management/contract/AddContract.tsx

@@ -1,10 +1,10 @@
 import { useDispatch, useSelector } from "react-redux"
-import { RootState } from "../../app/store"
-import { useLucid } from "../../hooks/useLucid"
+import { RootState } from "../../../app/store"
+import { useLucid } from "../../../hooks/useLucid"
 import React, { useRef, useState } from "react"
 import { Constr, Data, Script, applyDoubleCborEncoding, applyParamsToScript } from "lucid-cardano"
-import { addContract, clearAddContractError, setAddContractError } from "../../features/management/managementSlice"
-import { useTooltip } from "../../hooks/useTooltip"
+import { addContract, clearAddContractError, setAddContractError } from "../../../features/management/managementSlice"
+import { useTooltip } from "../../../hooks/useTooltip"
 
 type ScriptKind = 'aiken' | 'native'
 function AddContract() {