input views

2024-12-23 20:36:44 +00:00 · 2020-04-03 16:07:42 +02:00 · 2020-04-03 16:07:42 +02:00 · 272d06b209
commit 272d06b209
parent 1806b11f6d
17 changed files with 222 additions and 45 deletions
--- a/build.gradle
+++ b/build.gradle
@ -45,7 +45,7 @@ dependencies {
 mainClassName = 'com.sparrowwallet.sparrow/com.sparrowwallet.sparrow.MainApp'

 run {
-    applicationDefaultJvmArgs = ["-Xdock:name=Sparrow", "-Xdock:icon=/Users/scy/git/sparrow/src/main/resources/sparrow.png"]
+    applicationDefaultJvmArgs = ["-Xdock:name=Sparrow", "-Xdock:icon=/Users/scy/git/sparrow/src/main/resources/sparrow.png", "--add-opens=javafx.graphics/com.sun.javafx.css=org.controlsfx.controls"]
 }

 jlink {
@ -59,6 +59,7 @@ jlink {
    options = ['--strip-debug', '--compress', '2', '--no-header-files', '--no-man-pages', '--ignore-signing-information']
    launcher {
        name = 'sparrow'
+        jvmArgs = ["--add-opens=javafx.graphics/com.sun.javafx.css=org.controlsfx.controls"]
    }
    addExtraDependencies("javafx")
    jpackage {
--- a/2
+++ b/2
@ -1 +1 @@
-Subproject commit 1a0880dde7c209d5e00bcfc0541f18b9c1b1100d
+Subproject commit e574a2bfd3ca4e0d65555777a11d9ad4e7f69e16
--- a/src/main/java/com/sparrowwallet/sparrow/AppController.java
+++ b/src/main/java/com/sparrowwallet/sparrow/AppController.java
@ -101,6 +101,7 @@ public class AppController implements Initializable {

    private void addExampleTxTabs() {
        addTransactionTab("p2pkh", "01000000019c2e0f24a03e72002a96acedb12a632e72b6b74c05dc3ceab1fe78237f886c48010000006a47304402203da9d487be5302a6d69e02a861acff1da472885e43d7528ed9b1b537a8e2cac9022002d1bca03a1e9715a99971bafe3b1852b7a4f0168281cbd27a220380a01b3307012102c9950c622494c2e9ff5a003e33b690fe4832477d32c2d256c67eab8bf613b34effffffff02b6f50500000000001976a914bdf63990d6dc33d705b756e13dd135466c06b3b588ac845e0201000000001976a9145fb0e9755a3424efd2ba0587d20b1e98ee29814a88ac06241559", null);
+        addTransactionTab("p2sh", "0100000003a5ee1a0fd80dfbc3142df136ab56e082b799c13aa977c048bdf8f61bd158652c000000006b48304502203b0160de302cded63589a88214fe499a25aa1d86a2ea09129945cd632476a12c022100c77727daf0718307e184d55df620510cf96d4b5814ae3258519c0482c1ca82fa0121024f4102c1f1cf662bf99f2b034eb03edd4e6c96793cb9445ff519aab580649120ffffffff0fce901eb7b7551ba5f414735ff93b83a2a57403df11059ec88245fba2aaf1a0000000006a47304402204089adb8a1de1a9e22aa43b94d54f1e54dc9bea745d57df1a633e03dd9ede3c2022037d1e53e911ed7212186028f2e085f70524930e22eb6184af090ba4ab779a5b90121030644cb394bf381dbec91680bdf1be1986ad93cfb35603697353199fb285a119effffffff0fce901eb7b7551ba5f414735ff93b83a2a57403df11059ec88245fba2aaf1a0010000009300493046022100a07b2821f96658c938fa9c68950af0e69f3b2ce5f8258b3a6ad254d4bc73e11e022100e82fab8df3f7e7a28e91b3609f91e8ebf663af3a4dc2fd2abd954301a5da67e701475121022afc20bf379bc96a2f4e9e63ffceb8652b2b6a097f63fbee6ecec2a49a48010e2103a767c7221e9f15f870f1ad9311f5ab937d79fcaeee15bb2c722bca515581b4c052aeffffffff02a3b81b00000000001976a914ea00917f128f569cbdf79da5efcd9001671ab52c88ac80969800000000001976a9143dec0ead289be1afa8da127a7dbdd425a05e25f688ac00000000", null);
        addTransactionTab("p2sh-p2wpkh", "01000000000101db6b1b20aa0fd7b23880be2ecbd4a98130974cf4748fb66092ac4d3ceb1a5477010000001716001479091972186c449eb1ded22b78e40d009bdf0089feffffff02b8b4eb0b000000001976a914a457b684d7f0d539a46a45bbc043f35b59d0d96388ac0008af2f000000001976a914fd270b1ee6abcaea97fea7ad0402e8bd8ad6d77c88ac02473044022047ac8e878352d3ebbde1c94ce3a10d057c24175747116f8288e5d794d12d482f0220217f36a485cae903c713331d877c1f64677e3622ad4010726870540656fe9dcb012103ad1d8e89212f0b92c74d23bb710c00662ad1470198ac48c43f7d6f93a2a2687392040000", null);
        addTransactionTab("p2wpkh", "01000000000102fff7f7881a8099afa6940d42d1e7f6362bec38171ea3edf433541db4e4ad969f00000000494830450221008b9d1dc26ba6a9cb62127b02742fa9d754cd3bebf337f7a55d114c8e5cdd30be022040529b194ba3f9281a99f2b1c0a19c0489bc22ede944ccf4ecbab4cc618ef3ed01eeffffffef51e1b804cc89d182d279655c3aa89e815b1b309fe287d9b2b55d57b90ec68a0100000000ffffffff02202cb206000000001976a9148280b37df378db99f66f85c95a783a76ac7a6d5988ac9093510d000000001976a9143bde42dbee7e4dbe6a21b2d50ce2f0167faa815988ac000247304402203609e17b84f6a7d30c80bfa610b5b4542f32a8a0d5447a12fb1366d7f01cc44a0220573a954c4518331561406f90300e8f3358f51928d43c212a8caed02de67eebee0121025476c2e83188368da1ff3e292e7acafcdb3566bb0ad253f62fc70f07aeee635711000000", null);
        addTransactionTab("p2wsh", "01000000000102fe3dc9208094f3ffd12645477b3dc56f60ec4fa8e6f5d67c565d1c6b9216b36e000000004847304402200af4e47c9b9629dbecc21f73af989bdaa911f7e6f6c2e9394588a3aa68f81e9902204f3fcf6ade7e5abb1295b6774c8e0abd94ae62217367096bc02ee5e435b67da201ffffffff0815cf020f013ed6cf91d29f4202e8a58726b1ac6c79da47c23d1bee0a6925f80000000000ffffffff0100f2052a010000001976a914a30741f8145e5acadf23f751864167f32e0963f788ac000347304402200de66acf4527789bfda55fc5459e214fa6083f936b430a762c629656216805ac0220396f550692cd347171cbc1ef1f51e15282e837bb2b30860dc77c8f78bc8501e503473044022027dc95ad6b740fe5129e7e62a75dd00f291a2aeb1200b84b09d9e3789406b6c002201a9ecd315dd6a0e632ab20bbb98948bc0c6fb204f2c286963bb48517a7058e27034721026dccc749adc2a9d0d89497ac511f760f45c47dc5ed9cf352a58ac706453880aeadab210255a9626aebf5e29c0e6538428ba0d1dcf6ca98ffdf086aa8ced5e0d0215ea465ac00000000", null);
--- a/src/main/java/com/sparrowwallet/sparrow/transaction/InputController.java
+++ b/src/main/java/com/sparrowwallet/sparrow/transaction/InputController.java
@ -1,6 +1,13 @@
 package com.sparrowwallet.sparrow.transaction;

+import com.sparrowwallet.drongo.protocol.TransactionInput;
+import com.sparrowwallet.drongo.psbt.PSBTInput;
+import javafx.fxml.FXML;
 import javafx.fxml.Initializable;
+import javafx.scene.control.Button;
+import javafx.scene.control.TextField;
+import org.fxmisc.richtext.CodeArea;
+import tornadofx.control.Fieldset;

 import java.net.URL;
 import java.util.ResourceBundle;
@ -8,12 +15,45 @@ import java.util.ResourceBundle;
 public class InputController extends TransactionFormController implements Initializable {
    private InputForm inputForm;

+    @FXML
+    private Fieldset inputFieldset;
+
+    @FXML
+    private TextField outpoint;
+
+    @FXML
+    private Button outpointSelect;
+
+    @FXML
+    private CodeArea scriptSig;
+
+    @FXML
+    private CodeArea witness;
+
    @Override
    public void initialize(URL location, ResourceBundle resources) {

    }

+    public void initializeView() {
+        TransactionInput txInput = inputForm.getTransactionInput();
+        PSBTInput psbtInput = inputForm.getPsbtInput();
+
+        inputFieldset.setText("Input #" + txInput.getIndex());
+        outpoint.setText(txInput.getOutpoint().getHash().toString() + ":" + txInput.getOutpoint().getIndex());
+
+        //TODO: Enable select outpoint when wallet present
+        outpointSelect.setDisable(true);
+
+        scriptSig.clear();
+        appendScript(scriptSig, txInput.getScriptSig().toDisplayString());
+
+        witness.clear();
+        appendScript(witness, txInput.getWitness().toString());
+    }
+
    public void setModel(InputForm form) {
        this.inputForm = form;
+        initializeView();
    }
 }
--- a/src/main/java/com/sparrowwallet/sparrow/transaction/InputForm.java
+++ b/src/main/java/com/sparrowwallet/sparrow/transaction/InputForm.java
@ -1,6 +1,7 @@
 package com.sparrowwallet.sparrow.transaction;

 import com.sparrowwallet.drongo.protocol.TransactionInput;
+import com.sparrowwallet.drongo.psbt.PSBTInput;
 import javafx.fxml.FXMLLoader;
 import javafx.scene.Node;

@ -8,15 +9,21 @@ import java.io.IOException;

 public class InputForm extends TransactionForm {
    private TransactionInput transactionInput;
+    private PSBTInput psbtInput;

-    public InputForm(TransactionInput transactionInput) {
+    public InputForm(TransactionInput transactionInput, PSBTInput psbtInput) {
        this.transactionInput = transactionInput;
+        this.psbtInput = psbtInput;
    }

    public TransactionInput getTransactionInput() {
        return transactionInput;
    }

+    public PSBTInput getPsbtInput() {
+        return psbtInput;
+    }
+
    public Node getContents() throws IOException {
        FXMLLoader loader = new FXMLLoader(getClass().getResource("input.fxml"));
        Node node = loader.load();
--- a/src/main/java/com/sparrowwallet/sparrow/transaction/TransactionController.java
+++ b/src/main/java/com/sparrowwallet/sparrow/transaction/TransactionController.java
@ -3,6 +3,7 @@ package com.sparrowwallet.sparrow.transaction;
 import com.sparrowwallet.drongo.Utils;
 import com.sparrowwallet.drongo.protocol.*;
 import com.sparrowwallet.drongo.psbt.PSBT;
+import com.sparrowwallet.drongo.psbt.PSBTInput;
 import com.sparrowwallet.sparrow.EventManager;
 import javafx.fxml.FXML;
 import javafx.fxml.Initializable;
@ -55,7 +56,11 @@ public class TransactionController implements Initializable, TransactionListener
        TreeItem<TransactionForm> inputsItem = new TreeItem<>(inputsForm);
        inputsItem.setExpanded(true);
        for(TransactionInput txInput : transaction.getInputs()) {
-            InputForm inputForm = new InputForm(txInput);
+            PSBTInput psbtInput = null;
+            if(psbt != null && psbt.getPsbtInputs().size() > txInput.getIndex()) {
+                psbtInput = psbt.getPsbtInputs().get(txInput.getIndex());
+            }
+            InputForm inputForm = new InputForm(txInput, psbtInput);
            TreeItem<TransactionForm> inputItem = new TreeItem<>(inputForm);
            inputsItem.getChildren().add(inputItem);
        }
@ -170,11 +175,17 @@ public class TransactionController implements Initializable, TransactionListener
        }

        if(transaction.hasWitnesses()) {
-            int totalWitnessLength = 0;
-            for(TransactionInput input : transaction.getInputs()) {
-                totalWitnessLength += input.getWitness().getLength();
+            for (int i = 0; i < transaction.getInputs().size(); i++) {
+                TransactionInput input = transaction.getInputs().get(i);
+                TransactionWitness witness = input.getWitness();
+                VarInt witnessCount = new VarInt(witness.getPushCount());
+                cursor = addText(hex, cursor, witnessCount.getSizeInBytes()*2, "witness-" + getIndexedStyleClass(i, selectedInputIndex, "count"));
+                for(byte[] push : witness.getPushes()) {
+                    VarInt witnessLen = new VarInt(push.length);
+                    cursor = addText(hex, cursor, witnessLen.getSizeInBytes()*2, "witness-" + getIndexedStyleClass(i, selectedInputIndex, "length"));
+                    cursor = addText(hex, cursor, (int)witnessLen.value*2, "witness-" + getIndexedStyleClass(i, selectedInputIndex, "data"));
+                }
            }
-            cursor = addText(hex, cursor, totalWitnessLength*2, "witnesses");
        }

        //Locktime
--- a/src/main/java/com/sparrowwallet/sparrow/transaction/TransactionFormController.java
+++ b/src/main/java/com/sparrowwallet/sparrow/transaction/TransactionFormController.java
@ -7,6 +7,7 @@ import javafx.collections.FXCollections;
 import javafx.collections.ObservableList;
 import javafx.scene.chart.PieChart;
 import javafx.scene.control.Tooltip;
+import org.fxmisc.richtext.CodeArea;

 import java.util.List;

@ -43,4 +44,42 @@ public abstract class TransactionFormController {
            data.pieValueProperty().addListener((observable, oldValue, newValue) -> tooltip.setText(newValue + "%"));
        });
    }
+
+    protected void appendScript(CodeArea codeArea, String script) {
+        String[] parts = script.split(" ");
+        for (int i = 0; i < parts.length; i++) {
+            String part = parts[i];
+
+            if(part.startsWith("(")) {
+                codeArea.append("(", "script-nest");
+                part = part.substring(1);
+            }
+
+            boolean appendCloseBracket = false;
+            if(part.endsWith(")")) {
+                appendCloseBracket = true;
+                part = part.substring(0, part.length() - 1);
+            }
+
+            if(part.startsWith("OP")) {
+                codeArea.append(part, "script-opcode");
+            } else if(part.startsWith("<signature")) {
+                codeArea.append(part, "script-signature");
+            } else if(part.startsWith("<pubkey")) {
+                codeArea.append(part, "script-pubkey");
+            } else if(part.startsWith("<wpkh") || part.startsWith("<wsh")) {
+                codeArea.append(part, "script-type");
+            } else {
+                codeArea.append(part, "script-other");
+            }
+
+            if(appendCloseBracket) {
+                codeArea.append(")", "script-nest");
+            }
+
+            if(i < parts.length - 1) {
+                codeArea.append(" ", "");
+            }
+        }
+    }
 }
--- a/src/main/resources/com/sparrowwallet/sparrow/app.fxml
+++ b/src/main/resources/com/sparrowwallet/sparrow/app.fxml
@ -3,7 +3,7 @@
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>

-<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="700.0" prefWidth="900.0" fx:controller="com.sparrowwallet.sparrow.AppController" xmlns="http://javafx.com/javafx/10.0.2-internal" xmlns:fx="http://javafx.com/fxml/1">
+<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="700.0" prefWidth="1000.0" fx:controller="com.sparrowwallet.sparrow.AppController" xmlns="http://javafx.com/javafx/10.0.2-internal" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <MenuBar useSystemMenuBar="true">
        <menus>
--- a/src/main/resources/com/sparrowwallet/sparrow/transaction/headers.css
+++ b/src/main/resources/com/sparrowwallet/sparrow/transaction/headers.css
@ -14,5 +14,8 @@
 .output-pubkeyscript-length { -fx-fill: #50a14f }
 .output-pubkeyscript { -fx-fill: #50a14f }

-.witnesses { -fx-fill: #a626a4 }
+.witness-count { -fx-fill: #ca1243 }
+.witness-length { -fx-fill: #a626a4 }
+.witness-data { -fx-fill: #a626a4 }
+
 .locktime { -fx-fill: #986801 }
--- a/src/main/resources/com/sparrowwallet/sparrow/transaction/headers.fxml
+++ b/src/main/resources/com/sparrowwallet/sparrow/transaction/headers.fxml
@ -18,10 +18,10 @@
      <Insets bottom="25.0" left="25.0" right="25.0" top="25.0" />
   </padding>
    <columnConstraints>
-        <ColumnConstraints minWidth="295" prefWidth="295"
+        <ColumnConstraints minWidth="330" prefWidth="330"
                           maxWidth="Infinity">
        </ColumnConstraints>
-        <ColumnConstraints minWidth="295" prefWidth="295"
+        <ColumnConstraints minWidth="330" prefWidth="330"
                           maxWidth="Infinity">
        </ColumnConstraints>
    </columnConstraints>
@ -30,7 +30,7 @@
   </rowConstraints>
    <Form GridPane.columnIndex="0" GridPane.rowIndex="0" GridPane.columnSpan="2">
        <Fieldset text="Transaction" inputGrow="SOMETIMES">
-            <Field text="ID:">
+            <Field text="Txid:">
                <TextField fx:id="id" editable="false" styleClass="copyable-label, id" prefWidth="520" minWidth="520"/>
            </Field>
        </Fieldset>
@ -67,7 +67,7 @@
                <Spinner fx:id="locktimeNone" disable="true" prefWidth="120"/>
            </Field>
            <Field fx:id="locktimeBlockField" text="Block:">
-                <Spinner fx:id="locktimeBlock" prefWidth="120"/>
+                <Spinner fx:id="locktimeBlock" editable="true" prefWidth="120"/>
            </Field>
            <Field fx:id="locktimeDateField" text="Date:">
                <DateTimePicker fx:id="locktimeDate" prefWidth="180"/>
--- a/src/main/resources/com/sparrowwallet/sparrow/transaction/input.css
+++ b/src/main/resources/com/sparrowwallet/sparrow/transaction/input.css
@ -16,6 +16,56 @@
 .output-pubkeyscript-length { -fx-fill: #e5e5e6 }
 .output-pubkeyscript { -fx-fill: #e5e5e6 }

-.witnesses { -fx-fill: #e5e5e6 }
+.witness-other { -fx-fill: #e5e5e6 }
+
+.witness-count { -fx-fill: #ca1243 }
+.witness-length { -fx-fill: #986801 }
+.witness-data { -fx-fill: #a626a4 }
+
 .locktime { -fx-fill: #e5e5e6 }

+.script-nest { -fx-fill: #000000 }
+.script-opcode { -fx-fill: #0184bc; }
+.script-signature { -fx-fill: #50a14f }
+.script-pubkey { -fx-fill: #a626a4 }
+.script-other { -fx-fill: #a0a1a7 }
+.script-type { -fx-fill: #986801 }
+
+.virtualized-scroll-pane {
+    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border), linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
+    -fx-background-insets: 0, 1;
+    -fx-background-radius: 3, 2;
+}
+
+.virtualized-scroll-pane:focused {
+    -fx-background-color:
+            -fx-focus-color,
+            -fx-control-inner-background,
+            -fx-faint-focus-color,
+            linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
+    -fx-background-insets: -0.2, 1, -1.4, 3;
+    -fx-background-radius: 3, 2, 4, 0;
+}
+
+/*
+I don't understand why this rule fix problem with border around CodeArea.
+May be somebody can explain it.
+*/
+.virtualized-scroll-pane .styled-text-area {
+    -fx-background-insets: 0px;
+    -fx-background-color: transparent;
+}
+
+.virtualized-scroll-pane .scroll-bar:vertical {
+    -fx-background-radius: 0 2 2 0;
+
+    -fx-padding: 0.08333325em 0.08333325em 0.08333325em 0;
+    -fx-border-insets: 0.08333325em 0.08333325em 0.08333325em 0;
+    -fx-background-insets: 0.08333325em 0.08333325em 0.08333325em 0;
+}
+
+.uneditable-codearea {
+    -fx-control-inner-background: transparent;
+    -fx-font: 14px Courier;
+    -fx-padding: 4;
+}
--- a/src/main/resources/com/sparrowwallet/sparrow/transaction/input.fxml
+++ b/src/main/resources/com/sparrowwallet/sparrow/transaction/input.fxml
@ -1,46 +1,62 @@
 <?xml version="1.0" encoding="UTF-8"?>

-<?import java.lang.*?>
-<?import java.util.*?>
-<?import javafx.scene.*?>
+<?import javafx.geometry.*?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
-<?import tornadofx.control.Form?>
-<?import tornadofx.control.Fieldset?>
-<?import tornadofx.control.Field?>
-<?import javafx.geometry.Insets?>
+<?import org.controlsfx.glyphfont.*?>
+<?import tornadofx.control.*?>
+<?import org.fxmisc.richtext.CodeArea?>
+<?import org.fxmisc.flowless.VirtualizedScrollPane?>

-<GridPane alignment="TOP_CENTER" hgap="10.0" prefHeight="500.0" prefWidth="600.0" stylesheets="@input.css, @../general.css" vgap="10.0" xmlns="http://javafx.com/javafx/10.0.2-internal" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.sparrowwallet.sparrow.transaction.InputController">
+<GridPane alignment="TOP_CENTER" hgap="10.0" prefHeight="500.0" prefWidth="620.0" stylesheets="@input.css, @../general.css" vgap="10.0" xmlns="http://javafx.com/javafx/10.0.2-internal" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.sparrowwallet.sparrow.transaction.InputController">
    <padding>
        <Insets bottom="25.0" left="25.0" right="25.0" top="25.0" />
    </padding>
    <columnConstraints>
-        <ColumnConstraints maxWidth="Infinity" minWidth="290" prefWidth="290">
+        <ColumnConstraints maxWidth="Infinity" minWidth="330" prefWidth="330">
        </ColumnConstraints>
-        <ColumnConstraints maxWidth="Infinity" minWidth="290" prefWidth="290">
+        <ColumnConstraints maxWidth="Infinity" minWidth="330" prefWidth="330">
        </ColumnConstraints>
    </columnConstraints>
    <rowConstraints>
        <RowConstraints />
+      <RowConstraints />
    </rowConstraints>
-    <Form GridPane.columnIndex="0" GridPane.rowIndex="0">
-        <Fieldset inputGrow="SOMETIMES" text="Inputs">
-            <Field text="Count:">
-                <TextField fx:id="count" editable="false" minWidth="520" prefWidth="520" styleClass="copyable-label" />
-            </Field>
-            <Field text="Total:">
-                <TextField fx:id="total" editable="false" minWidth="520" prefWidth="520" styleClass="copyable-label" />
+    <Form GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.rowIndex="0">
+        <Fieldset fx:id="inputFieldset" inputGrow="SOMETIMES" text="Input">
+            <Field text="Outpoint:">
+                <TextField fx:id="outpoint" editable="false" minWidth="520" prefWidth="520" styleClass="copyable-label, id" />
+                <Button fx:id="outpointSelect" maxWidth="25" minWidth="-Infinity" prefWidth="30" text="Ed">
+                    <graphic>
+                        <Glyph fontFamily="FontAwesome" icon="EDIT" prefWidth="15" />
+                    </graphic>
+                </Button>
            </Field>
        </Fieldset>
    </Form>

-    <Form GridPane.columnIndex="1" GridPane.rowIndex="0">
-        <Fieldset inputGrow="SOMETIMES" text="Signatures">
-            <Field text="Status:">
-                <TextField fx:id="signatures" editable="false" minWidth="520" prefWidth="520" styleClass="copyable-label" />
+    <Separator styleClass="form-separator" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.rowIndex="1" />
+
+    <Form GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.rowIndex="2">
+        <Fieldset inputGrow="SOMETIMES" text="Script">
+            <Field text="ScriptSig:">
+                <HBox>
+                    <VirtualizedScrollPane prefHeight="42">
+                        <content>
+                            <CodeArea fx:id="scriptSig" editable="false" minWidth="520" prefWidth="520" wrapText="true" styleClass="uneditable-codearea" />
+                        </content>
+                    </VirtualizedScrollPane>
+                </HBox>
+            </Field>
+            <Field text="Witness:">
+                <HBox>
+                    <VirtualizedScrollPane prefHeight="42">
+                        <content>
+                            <CodeArea fx:id="witness" editable="false" minWidth="520" prefWidth="520" wrapText="true" styleClass="uneditable-codearea" />
+                        </content>
+                    </VirtualizedScrollPane>
+                </HBox>
            </Field>
        </Fieldset>
    </Form>
-
-    <Separator GridPane.columnIndex="0" GridPane.rowIndex="1" GridPane.columnSpan="2" styleClass="form-separator"/>
 </GridPane>
--- a/src/main/resources/com/sparrowwallet/sparrow/transaction/inputs.css
+++ b/src/main/resources/com/sparrowwallet/sparrow/transaction/inputs.css
@ -14,7 +14,10 @@
 .output-pubkeyscript-length { -fx-fill: #e5e5e6 }
 .output-pubkeyscript { -fx-fill: #e5e5e6 }

-.witnesses { -fx-fill: #e5e5e6 }
+.witness-count { -fx-fill: #ca1243 }
+.witness-length { -fx-fill: #986801 }
+.witness-data { -fx-fill: #a626a4 }
+
 .locktime { -fx-fill: #e5e5e6 }

 .chart-legend-item{
--- a/src/main/resources/com/sparrowwallet/sparrow/transaction/inputs.fxml
+++ b/src/main/resources/com/sparrowwallet/sparrow/transaction/inputs.fxml
@ -11,9 +11,9 @@
        <Insets bottom="25.0" left="25.0" right="25.0" top="25.0" />
    </padding>
    <columnConstraints>
-        <ColumnConstraints maxWidth="Infinity" minWidth="290" prefWidth="290">
+        <ColumnConstraints maxWidth="Infinity" minWidth="330" prefWidth="330">
        </ColumnConstraints>
-        <ColumnConstraints maxWidth="Infinity" minWidth="290" prefWidth="290">
+        <ColumnConstraints maxWidth="Infinity" minWidth="330" prefWidth="330">
        </ColumnConstraints>
    </columnConstraints>
    <rowConstraints>
--- a/src/main/resources/com/sparrowwallet/sparrow/transaction/output.css
+++ b/src/main/resources/com/sparrowwallet/sparrow/transaction/output.css
@ -16,5 +16,8 @@
 .output-pubkeyscript-length { -fx-fill: #a626a4 }
 .output-pubkeyscript { -fx-fill: #50a14f }

-.witnesses { -fx-fill: #e5e5e6 }
+.witness-count { -fx-fill: #e5e5e6 }
+.witness-length { -fx-fill: #e5e5e6 }
+.witness-data { -fx-fill: #e5e5e6 }
+
 .locktime { -fx-fill: #e5e5e6 }
--- a/src/main/resources/com/sparrowwallet/sparrow/transaction/outputs.css
+++ b/src/main/resources/com/sparrowwallet/sparrow/transaction/outputs.css
@ -14,7 +14,10 @@
 .output-pubkeyscript-length { -fx-fill: #a626a4 }
 .output-pubkeyscript { -fx-fill: #50a14f }

-.witnesses { -fx-fill: #e5e5e6 }
+.witness-count { -fx-fill: #e5e5e6 }
+.witness-length { -fx-fill: #e5e5e6 }
+.witness-data { -fx-fill: #e5e5e6 }
+
 .locktime { -fx-fill: #e5e5e6 }

 .chart-legend-item{
--- a/src/main/resources/com/sparrowwallet/sparrow/transaction/outputs.fxml
+++ b/src/main/resources/com/sparrowwallet/sparrow/transaction/outputs.fxml
@ -11,9 +11,9 @@
        <Insets bottom="25.0" left="25.0" right="25.0" top="25.0" />
    </padding>
    <columnConstraints>
-        <ColumnConstraints maxWidth="Infinity" minWidth="290" prefWidth="290">
+        <ColumnConstraints maxWidth="Infinity" minWidth="330" prefWidth="330">
        </ColumnConstraints>
-        <ColumnConstraints maxWidth="Infinity" minWidth="290" prefWidth="290">
+        <ColumnConstraints maxWidth="Infinity" minWidth="330" prefWidth="330">
        </ColumnConstraints>
    </columnConstraints>
    <rowConstraints>