finish source selection, handle bigint in redux

src/app/store.ts

@@ -5,6 +5,8 @@ import tooltipReducer from '../features/tooltip/tooltipSlice'
 import contextMenuReducer from '../features/contextMenu/contextMenuSlice'
 import managementReducer from '../features/management/managementSlice'
 import lucidReducer from '../features/management/lucidSlice'
+import transactReducer from '../features/management/transactSlice'
+
 
 export const store = configureStore({
   reducer: {
@@ -13,7 +15,8 @@ export const store = configureStore({
     tooltip: tooltipReducer,
     contextMenu: contextMenuReducer,
     management: managementReducer,
-    lucid: lucidReducer
+    lucid: lucidReducer,
+    transact: transactReducer
   },
 })
 

src/features/management/transactSlice.ts

@@ -0,0 +1,40 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { Spend } from '../../panels/management/transact/Transact'
+
+interface TransactState {
+    addSpendError: string | undefined
+    spends: Spend[]
+}
+
+const initialState: TransactState = {
+    addSpendError: undefined,
+    spends: []
+}
+
+const transactSlice = createSlice({
+    name: 'transact',
+    initialState,
+    reducers: {
+        addSpend(state, action: PayloadAction<Spend>) {
+            state.spends = [...state.spends, action.payload]
+        },
+        removeSpend(state, action: PayloadAction<number>) {
+            console.log(action.payload)
+            state.spends.splice(action.payload, 1)
+        },
+        setAddSpendError(state, action: PayloadAction<string>) {
+            state.addSpendError = action.payload
+        },
+        clearAddSpendError(state) {
+            state.addSpendError = undefined
+        }
+    }
+})
+
+export const {
+    setAddSpendError,
+    clearAddSpendError,
+    addSpend,
+    removeSpend
+} = transactSlice.actions
+export default transactSlice.reducer

src/panels/management/contract/AddContract.tsx

@@ -5,6 +5,7 @@ import { Constr, Data, Script, applyDoubleCborEncoding, applyParamsToScript } fr
 import { addContract, clearAddContractError, setAddContractError } from "../../../features/management/managementSlice"
 import { useTooltip } from "../../../hooks/useTooltip"
 import { useLucid } from "../../../components/LucidProvider"
+import { constructObject } from "../../../util/data"
 
 type ScriptKind = 'aiken' | 'native'
 function AddContract() {
@@ -224,27 +225,4 @@ function AddContract() {
     )
 }
 
-function constructObject(json: any): any {
-    if (Array.isArray(json)) {
-        return json.map(item => constructObject(item));
-    } else if ('constructor' in json && Array.isArray(json.fields)) {
-        const fields = json.fields.map((field: any) => {
-            if (typeof field === 'object' && field !== null) {
-                return constructObject(field);
-            } else {
-                return field;
-            }
-        });
-        return new Constr(json.constructor, fields);
-    } else if ('bytes' in json) {
-        return json.bytes;
-    } else if ('int' in json) {
-        return json.int;
-    } else if ('map_0' in json) {
-        throw new Error("Map type encountered, operation not supported");
-    } else {
-        throw new Error("Unknown type in JSON structure");
-    }
-}
-
 export { AddContract }

src/panels/management/transact/Transact.css

@@ -96,4 +96,80 @@
 }
 .selection-submit-button {
     font-size: 12.5px;
+}
+
+.transact-spends-container {
+    margin-left: 20px;
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.transact-no-spends-yet-message {
+    font-size: 14px;
+}
+.transact-spend-container {
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    align-items:start;
+    border: 1px solid rgb(158, 172, 181);
+    background-color: rgb(5, 39, 7);
+}
+.transact-spends-count-message {
+    font-size: 14px;
+}
+
+.transact-spend-message-container {
+    margin-left: 20px;
+    margin-bottom: 10px;
+}
+
+.transact-spend-address {
+    padding-left: 5px;
+    padding-right: 5px;
+    margin-right: 20px;
+}
+
+.transact-spend-close {
+    padding: 2px;
+    cursor: pointer;
+    font-size: 1px;
+}
+
+.transact-spend-redeemer {
+    padding-left: 5px;
+    padding-right: 5px;
+    margin-top:5px;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+}
+
+.transact-spend-redeemer-filename {
+    margin-top: -5px;
+    padding-left: 10px;
+}
+
+.transact-spend-utxos {
+    padding-left: 5px;
+    padding-right: 5px;
+    margin-top:5px;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+}
+.transact-spend-utxo-display {
+    padding: 5px;
+    margin-top: -5px;
+}
+.transact-spend-address-and-close {
+    display: flex;
+    background-color: #25244c;
+    align-items: center;
 }

src/panels/management/transact/Transact.tsx

@@ -1,12 +1,24 @@
-import { useSelector } from "react-redux"
+import { useDispatch, useSelector } from "react-redux"
 import { RootState } from "../../../app/store"
 import { useLucid } from "../../../components/LucidProvider"
 import './Transact.css'
 import { useState } from "react"
-import { UtxoSelector } from "./UtxoSelector"
+import { UtxoSelector, UtxoSource } from "./UtxoSelector"
+import { UTxO } from "lucid-cardano"
+import { shortenAddress } from "../../../util/strings"
+import { SerializableUTxO } from "../../../util/utxo"
+import { removeSpend } from "../../../features/management/transactSlice"
 
+export type Spend = {
+    source: UtxoSource,
+    redeemerFileName: string,
+    utxos: SerializableUTxO[]
+}
 
 function Transact() {
+    const spends = useSelector((state: RootState) => state.transact.spends)
+    const dispatch = useDispatch()
+
     const { isLucidLoading, lucid: lucidOrNull } = useLucid()
 
 
@@ -18,51 +30,109 @@ function Transact() {
 
     const lucid = lucidOrNull!!
 
+    // spend sections need a delete button
+    // spend sections should show the redeemer file
+    // spend sections should show the address
+    // spend sections should show the source type
 
     return (
         <div className='transact-content'>
             <div className='management-section-heading'><strong>Transact</strong></div>
+
             <div className='transact-spend-section'>
-                <div className='transact-spend-header'>Spend</div>
+                <div className='transact-spend-header'>UTxO Selection</div>
+                <div className='transact-spend-message-container'>
                     {
-                        // select should have a list of know naddresses
-                        // which is both wallets and contracts
-
+                        spends.length === 0 ?
+                            <div
+                                className='transact-no-spends-yet-message'
+                            >
+                                ⚠ Choose at least one UTxO to spend.
+                            </div> :
+                            <div
+                                className='transact-spends-count-message'
+                            >
+                                {`${spends.length} spend(s) selected.`}
+                            </div>
                     }
-                        <UtxoSelector onAddSpend={(selectedUtxos) => {
-                            console.log(selectedUtxos)
-                        }}/>
-
+                </div>
+                <div className='transact-spends-container'>
                     {
-                        // in the emulator we can get contract utxos trivially
-                        // but it is different in network
-                        // paste in manually needs to work, in case they dont have a kupo
-                        // we could link the contract on cardano scan LMAO
-                        // um but notably that means we need to handle the wallet utxos differently
-                        // so that you can still get them if you are not wired into network
+                        spends.map((spend, index) => {
+                            return (
+                                <div
+                                    key={spend.utxos[0].txHash + spend.utxos[0].outputIndex}
+                                    className='transact-spend-container'
+                                >   
+                                    <div className='transact-spend-address-and-close'>
+                                        <div className='transact-spend-address'>
+                                            {shortenAddress(spend.utxos[0].address)}
+                                        </div>
+                                        <div className='transact-spend-close'>
+                                            <button 
+                                                className='button' 
+                                                style={{fontSize: 12}}
+                                                onClick={() => {
+                                                    dispatch(removeSpend(index))
+                                                }}
+                                            >
+                                                Remove
+                                            </button>
+                                        </div>
+                                    </div>
+
+                                    <div className='transact-spend-redeemer'>
+                                        <div className='input-label'>Redeemer</div>
+                                        <div className='transact-spend-redeemer-filename'>{` ${spend.redeemerFileName || 'None'}`}</div>
+                                    </div>
+
+                                    <div className='transact-spend-utxos'>
+                                        <div className='input-label'>UTxOs</div>
+                                        <div className='transact-spend-utxo-display'>
+                                        {
+                                            spend.utxos.map(spendingUtxo => {
+                                                return (
+                                                    <div
+                                                        key={spendingUtxo.txHash + spendingUtxo.outputIndex}
+                                                    >
+                                                        {`${shortenAddress(spendingUtxo.txHash, 4, 6)}@${spendingUtxo.outputIndex}`}
+                                                    </div>
+
+                                                )
+                                            })
+                                        }
+                                        </div>
+                                    </div>
+
+                                </div>
+                            )
+                        })
                     }
                 </div>
+                <UtxoSelector/>
             </div>
-            // {
-                // can have multiples of ANYTHING from this section
-                // what is the unified ui for multiples? 
-
-                // utxo selection from account or known contract
-                // with, potentially, a redeemer
-                // selection from a known contract automagically attaches the contract
 
-                // payment to address
-                // with assets, potentially datum
-                // one day, payment to a contract address could validate the datum...
+        </div>
 
-                // mint assets
-                // select contract from dropdown
-                // then provide assetid
-                // we will automatically attach the minting policy
-
-                // additional signatures from a known wallet
-            // }
     )
 }
 
-export { Transact }
+export { Transact }
+
+// can have multiples of ANYTHING from this section
+// what is the unified ui for multiples?
+
+// utxo selection from account or known contract
+// with, potentially, a redeemer
+// selection from a known contract automagically attaches the contract
+
+// payment to address
+// with assets, potentially datum
+// one day, payment to a contract address could validate the datum...
+
+// mint assets
+// select contract from dropdown
+// then provide assetid
+// we will automatically attach the minting policy
+
+// additional signatures from a known wallet