fix build, usable contracts page

Piefayth · Apr 5, 2024 · 3b86869 · 3b86869
1 parent 1986e71
commit 3b86869
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 29 deletions.
diff --git a/src/App.css b/src/App.css
@@ -176,8 +176,8 @@ button.disabled:hover {
 }
 
 .copy-widget {
-  margin-left: 10px;
   padding: 2px;
+  min-width: 25px;
 }
 
 .select {

diff --git a/src/features/files/filesSlice.ts b/src/features/files/filesSlice.ts
@@ -45,6 +45,18 @@ test quicksort_2() {
 }
 `
 
+const OTHER_AIKEN_CODE = `use aiken/transaction.{
+  ScriptContext
+}
+
+
+validator {
+  fn trivial(_r: Data, _ctx: ScriptContext) -> Bool {
+      True
+  }
+}
+`
+
 export interface File {
   name: string,
   content: string,
@@ -73,6 +85,10 @@ const initialState: FileState = {
     name: 'example.ak',
     content: SOME_AIKEN_CODE,   // when do we update content??
     type: 'aiken'
+  },{
+    name: 'trivial.ak',
+    content: OTHER_AIKEN_CODE,
+    type: 'aiken',
   },{
     name: 'params.json',
       content: JSON.stringify([{

diff --git a/src/panels/management/ManagementTopBar.tsx b/src/panels/management/ManagementTopBar.tsx
@@ -1,7 +1,6 @@
 import { useDispatch, useSelector } from 'react-redux';
 import '../TopBar.css';
 import { RootState } from '../../app/store';
-import { toggleSettings } from '../../features/settings/settingsSlice';
 
 function ManagementTopBar() {
     const network = useSelector((state: RootState) => state.settings.network)

diff --git a/src/panels/management/contract/Contract.css b/src/panels/management/contract/Contract.css
@@ -5,8 +5,8 @@
     align-items: start;
     min-width: 300px;
     padding: 15px;
-    padding-left: 0px;
-    gap: 30px;
+    padding-left: 20px;
+    gap: 15px;
     width: 100%;
 }
 
@@ -18,17 +18,27 @@
 
 .contract-container {
     width: 100%;
+    max-width: 700px;
     background-color: var(--main-background-darker);
     min-width: 400px;
     display: flex;
     flex-direction: column;
     align-items: start;
     border: solid 1px black;
-    box-shadow: 3px 3px 5px 2px rgb(0, 0, 0, 0.25);
 }
 
 .contract-container-collapsed {
-    box-shadow: 1px 1px 1px 1px rgb(0, 0, 0, 0.15);
+    border-bottom: none;
+
+}
+
+.show-params-text {
+    font-size: 12px;
+    margin-bottom: 10px;
+}
+
+.underline {
+    text-decoration: underline;
 }
 
 .contract-header {
@@ -55,18 +65,17 @@
 }
 
 .contract-info {
+    gap: 5px;
     display: flex;
     flex-direction: column;
     flex-basis: 50%;
     flex-grow: 1;
-    margin-top: 20px;
 }
 
 .delete-contract-button-container {
     display:flex;
     align-items: flex-end;
-    margin-top: 15px;
-    margin-right: 20px;
+    margin-left: 8px;
     flex-grow: 1;
 }
 
@@ -78,8 +87,9 @@
 
 .contract-name {
     font-size: 18px;
-    min-width: 200px;
     text-align: left;
+    font-weight: 600;
+    padding: 2px;
 }
 
 .expand {
@@ -110,10 +120,12 @@
 }
 
 .contract-address {
-    font-size: 14px;
+    font-size: 12px;
     display: flex;
     align-items: center;
     min-width: 250px;
+    margin-left: 20px;
+    margin-top: 2px;
 }
 
 .contract-data-holder {
@@ -139,11 +151,12 @@
 }
 
 .contract-params-content {
-    font-size: 12px;
+    font-size: 13px;
     color: #ddd;
     display: flex;
     width: 100%;
     margin-left: 4px;
+    align-items: center;
 }
 
 .contract-params-label {
@@ -154,6 +167,8 @@
 .params-label-container {
     display: flex;
     flex-direction: column;
+    justify-content: center;
+    margin-top: 20px;
 }
 .add-contract-container {
     display: flex;
@@ -221,6 +236,7 @@
     align-items: center;
     margin: 10px;
     width: 100%;
+    height: 100%;
 }
 
 .utxo {
@@ -273,7 +289,8 @@
 .contract-utxos {
     display: flex;
     flex-direction: column;
-    width: 100%;
+    width: calc(100% - 8px);
+    height: 200px;
     max-height: 200px;
     overflow-y:auto;
     padding-bottom: 20px;
@@ -313,6 +330,12 @@
 
 .no-unspent-outputs {
     font-size: 13px;
+    padding: 5px;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
 }
 .assets-container {
     width: 90%;
@@ -349,6 +372,7 @@
     align-items: center;
     gap: 20px;
     margin-top: 2px;
+    font-size: 13px;
 }
 
 @supports ( -moz-appearance:none ){

diff --git a/src/panels/management/contract/Contract.tsx b/src/panels/management/contract/Contract.tsx
@@ -46,7 +46,7 @@ function ContractView({ contract }: ContractViewParams) {
         return <></>
     }
 
-    const loadingSpinner = <div className="contracts-loader"><div className="lds-ring"><div></div><div></div><div></div><div></div></div></div>
+    const loadingSpinner = <div className="contracts-loader">Fetching...<div className="lds-ring"><div></div><div></div><div></div><div></div></div></div>
 
     const balances = sumAssets(utxos.map(utxo => utxo.assets))
 
@@ -56,10 +56,12 @@ function ContractView({ contract }: ContractViewParams) {
             className={`contract-container ${isExpanded ? '' : 'contract-container-collapsed'}`}
         >
             <div className='contract-header'>
+                <div className='flex-row'>
                 <div className='contract-name'>
                     {contract.name} <span className='contract-version'>v{contract.version}</span>
                 </div>
-                <div className='contract-address'>{shortenAddress(contract.address)}<Copy value={contract.address} /></div>
+
+                </div>
                 <div
                     className='expand'
                     onClick={() => {
@@ -80,12 +82,10 @@ function ContractView({ contract }: ContractViewParams) {
             </div>
 
             {
-                isExpanded && isLoadingUtxos ? loadingSpinner : null
-            }
-            {
-                isExpanded && !isLoadingUtxos ? (
+                isExpanded ? (
                     <div className='contract-data'>
                         <div className='contract-info'>
+
                             <div className='contract-data-holder'>
                                 <div className='contract-params'>
                                     <div className='contract-params-label'>Script Hash</div>
@@ -94,16 +94,33 @@ function ContractView({ contract }: ContractViewParams) {
                                     </div>
                                 </div>
                             </div>
-
                             <div className='contract-data-holder'>
-                                {/* {JSON.stringify(serializeAssets(balances), null, 2)} */}
+                                <div className='contract-params'>
+                                    <div className='contract-params-label'>Address</div>
+                                    <div className='contract-params-content'>
+                                    <span>{shortenAddress(contract.address)}<Copy value={contract.address} /></span>
+                                    </div>
+                                </div>
                             </div>
-
-
+                            <div className='contract-data-holder'>
+                                <div className='contract-params'>
+                                    <div className='contract-params-label'>Balance</div>
+                                    <div className='contract-params-content'>
+                                    <span>₳ {balances['lovelace'] ? (Number(balances['lovelace']) / 1000000).toFixed(6) : 0}</span>
+                                    </div>
+                                </div>
+                            </div>
+
                             <div className='contract-params params-label-container'>
-                                <div className='contract-params-label'>Parameters</div>
-                                <div className='contract-params-content'>{contract.paramsFileName}</div>
+                                <div className={`show-params-text ${contract.paramsFileName !== 'None' ? 'underline' : ''}`}>
+                                    {
+                                        contract.paramsFileName !== 'None' ?
+                                            contract.script.type === 'Native' ? <JsonPopup jsonString={contract.paramsContent}>Show Script</JsonPopup> : <JsonPopup jsonString={contract.paramsContent}>Show Params</JsonPopup>
+                                            : 'No params'
+                                    }
+                                </div>
                             </div>
+
                             <div className='delete-contract-button-container'>
 
                                 <button
@@ -120,9 +137,9 @@ function ContractView({ contract }: ContractViewParams) {
                         <div className='contract-utxos-wrapper'>
                             <div className='utxos-heading'>Unspent Outputs</div>
                             {
-                                utxos.length > 0 ? <div className='contract-utxos'>
+                                <div className='contract-utxos'>
                                     {
-                                        utxos.map(utxo => {
+                                        isExpanded && isLoadingUtxos ? loadingSpinner : utxos.length > 0 ? utxos.map(utxo => {
                                             const parsedDatum = utxo.datum ? deconstructObject(Data.from(utxo.datum)) : null
 
                                             return (
@@ -170,9 +187,9 @@ function ContractView({ contract }: ContractViewParams) {
                                                     </div>
                                                 </>
                                             )
-                                        })
+                                        }) : <div className='no-unspent-outputs'>No unspent outputs found at the contract address.</div>
                                     }
-                                </div> : <span className='no-unspent-outputs'>No unspent outputs found at this address.</span>
+                                </div>
                             }
                         </div>
                     </div>