fix vite config, finish contract create flow minus error handling

Piefayth · Mar 25, 2024 · 89b2b28 · 89b2b28
1 parent acde4b3
commit 89b2b28
Show file tree

Hide file tree

Showing 6 changed files with 172 additions and 26 deletions.
diff --git a/src/features/files/filesSlice.ts b/src/features/files/filesSlice.ts
@@ -84,6 +84,22 @@ const initialState: FileState = {
         ]
     }], null, 2),
     type: 'json'
+  }, {
+    name: 'nativeScript.json',
+    content: JSON.stringify({
+      "type": "all",
+      "scripts": [
+        {
+          "type": "before",
+          "slot": 1
+        },
+        {
+          "type": "sig",
+          "keyHash": "ffffffffffffffffffffffffffffffffffffffffffffffffffffffff"
+        }
+      ]
+    }, null, 2),
+    type: 'json'
   }],
   currentFileFocusedInEditorIndex: 0,
   openFileIndices: [0],

diff --git a/src/features/management/managementSlice.ts b/src/features/management/managementSlice.ts
@@ -9,7 +9,13 @@ export interface Wallet {
 
 export interface ContractInput {
     script: Script,
+    name: string,
+    paramsFileName: string,
+}
+
+export interface DeleteContractInput {
     name: string
+    version: number
 }
 
 type Contract = {
@@ -60,11 +66,15 @@ const managementSlice = createSlice({
                     version = contract.version + 1
                 }
             }
-            state.contracts.push({
+            state.contracts.unshift({
                 ...action.payload,
                 version
             })
         },
+        removeContract(state, action: PayloadAction<DeleteContractInput>) {
+            const { name, version } = action.payload
+            state.contracts = state.contracts.filter(contract => !(contract.name === name && contract.version === version))
+        },
         clearAddContractError(state) {
             state.addContractError = undefined
         }
@@ -76,6 +86,7 @@ export const {
     setNetwork,
     addWallet,
     addContract,
+    removeContract,
     clearAddContractError
 } = managementSlice.actions
 export default managementSlice.reducer
diff --git a/src/panels/management/AddContract.tsx b/src/panels/management/AddContract.tsx
@@ -39,14 +39,14 @@ function AddContract() {
     const jsonFiles = files.filter(file => file.type === 'json')
     const jsonChoices = jsonFiles.map(file => file.name).concat(['None'])
 
-    if (paramsFilename === undefined && jsonChoices.length > 0) {
-        setParamsFilename(jsonChoices[0])
-    }
-
     if (scriptName === undefined && validatorChoices.length > 0) {
         setScriptName(validatorChoices[0])
     }
 
+    if (paramsFilename === undefined && jsonChoices.length > 0) {
+        setParamsFilename(jsonChoices[0])
+    }
+
     const isCreateDisabledClass = scriptName === undefined ? 'disabled' : ''
 
     return (
@@ -92,13 +92,20 @@ function AddContract() {
                                         setScriptName(e.target.value)
                                     }}
                                 >
-                                    {jsonChoices?.map(fileName =>
-                                        <option
-                                            value={fileName}
-                                            key={fileName}
-                                        >{fileName}
-                                        </option>
-                                    )}
+                                    {jsonChoices?.map(fileName => {
+                                        if (fileName === 'None') {
+                                            return null
+                                        }
+
+                                        return (
+                                            <option
+                                                value={fileName}
+                                                key={fileName}
+                                            >
+                                                {fileName}
+                                            </option>
+                                        )
+                                    })}
                                 </select>
                             )
                     }
@@ -111,9 +118,6 @@ function AddContract() {
                             <select 
                                 className='add-contract-select'
                                 onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-                                    if (e.target.value === 'None') {
-                                        return setParamsFilename(undefined)
-                                    }
                                     setParamsFilename(e.target.value)
                                 }}
                             >
@@ -135,7 +139,8 @@ function AddContract() {
                         className={`add-contract-button ${isCreateDisabledClass}`}
                         onClick={() => {
                             if (scriptType === 'aiken') {
-                                const paramsJson = jsonFiles.find(jsonFile => jsonFile.name === paramsFilename)?.content
+                                const paramsJsonFile = jsonFiles.find(jsonFile => jsonFile.name === paramsFilename)
+                                const paramsJson = paramsJsonFile?.content
                                 const validator = validators?.find(v => v.name === scriptName) || validators?.[0]
                                 if (!validator) {
                                     console.error(`No known validator ${scriptName}`)
@@ -148,7 +153,7 @@ function AddContract() {
                                     const jsonParams = JSON.parse(paramsJson)
                                     params = constructObject(jsonParams)
                                 }
-
+                                
                                 const parameterizedValidator = {
                                     type: 'PlutusV2',
                                     script: applyDoubleCborEncoding(
@@ -161,15 +166,18 @@ function AddContract() {
                                 dispatch(addContract({
                                     script: parameterizedValidator,
                                     name: validator.name,
+                                    paramsFileName: paramsJsonFile?.name || 'None'
                                 }))
                             } else if (scriptType === 'native') {
-                                const nativeScriptJson = jsonFiles.find(jsonFile => jsonFile.name === scriptName)?.content
+                                const nativeScriptJsonFile = jsonFiles.find(jsonFile => jsonFile.name === scriptName)
+                                const nativeScriptJson = nativeScriptJsonFile?.content
                                 if (nativeScriptJson) {
                                     const parsedNativeScriptJson = JSON.parse(nativeScriptJson)
                                     const parameterizedValidator = lucid.utils.nativeScriptFromJson(parsedNativeScriptJson)
                                     dispatch(addContract({
                                         script: parameterizedValidator,
-                                        name: scriptName!!
+                                        name: scriptName!!,
+                                        paramsFileName: nativeScriptJsonFile?.name
                                     }))
                                 }
                             }

diff --git a/src/panels/management/Contracts.tsx b/src/panels/management/Contracts.tsx
@@ -1,37 +1,61 @@
-import { useSelector } from "react-redux"
+import { useDispatch, useSelector } from "react-redux"
 import { RootState } from "../../app/store"
 import { useLucid } from "../../hooks/useLucid"
 import { AddContract } from "./AddContract"
+import { removeContract } from "../../features/management/managementSlice"
 
 function Contracts() {
     const { isLucidLoading, lucid: lucidOrUndefined } = useLucid()
     const contracts = useSelector((state: RootState) => state.management.contracts)
 
-    // const dispatch = useDispatch()
+    const dispatch = useDispatch()
 
     if (isLucidLoading || !lucidOrUndefined) {
         return (
             <div>{ /* Please wait... */}</div>
         )
     }
 
-    // const lucid = lucidOrUndefined!!
+    const lucid = lucidOrUndefined!!
 
     return (
         <div className='contracts-content'>
             <div className='contracts-heading'><strong>Contracts</strong></div>
             <AddContract />
+            <div className='contracts-container'>
             {
                 contracts.map(contract => {
                     return (
                         <div 
                             key={`${contract.name}${contract.version}`}
+                            className='contract-container'
                         >
-                                {contract.name} v{ contract.version }
+                                <div className='contract-name'>{contract.name}</div>
+                                <div className='contract-data-holder'>
+                                <div className='contract-params'>
+                                        <div className='contract-params-label'>Parameters</div>
+                                        <div className='contract-params-content'>{contract.paramsFileName}</div>
+                                    </div>
+                                    <div className='contract-version'>Version {contract.version}</div>
+
+                                </div>
+
+                                <div className='delete-contract-button-container'>
+                                    <button 
+                                        className='delete-contract-button'
+                                        onClick={() => dispatch(removeContract({
+                                            version: contract.version,
+                                            name: contract.name
+                                        }))}    
+                                    >
+                                        Delete
+                                    </button>
+                                </div>
                         </div>
                     )
                 })
             }
+            </div>
         </div>
     )
 }

diff --git a/src/panels/management/ManagementPanel.css b/src/panels/management/ManagementPanel.css
@@ -290,4 +290,89 @@
 .disabled:hover {
     cursor: not-allowed !important;
     background-color: #cccccc !important;   
+}
+
+.contracts-container {
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    min-width: 300px;
+    padding: 15px;
+    width: 100%;
+    margin-top: 10px;
+}
+
+.contract-container {
+    margin-left: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    background-color: rgb(11, 11, 25);
+    border: solid 1px  rgb(158, 172, 181);
+}
+
+
+.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 {
+    background-color: rgb(37, 36, 76);
+    width: 100%;
+    padding: 5px;
+    font-size: 18px;
+    box-sizing: border-box;
+    border: solid 1px  rgb(158, 172, 181);
+}
+
+.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;
+    display: flex;
+    flex-direction: column;
+    align-items:start;
+    width: 100%;
+}
+.contract-params-content {
+    margin-left: 20px;
+    font-size: 12px;
+}
+
+.contract-params-label {
+    font-weight: bold;
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -13,9 +13,11 @@ export default defineConfig({
   base: '/aiken-ide/',
   resolve: {
     preserveSymlinks: true,
-    alias: {
-      'lucid-cardano': './node_modules/lucid-cardano/web/mod.js'
-    }
+    alias: process.env.NODE_ENV === 'production'
+      ? {
+          'lucid-cardano': './node_modules/lucid-cardano/web/mod.js',
+        }
+      : {}
   },
   optimizeDeps: {
     exclude: [