change transaction outs display

package-lock.json

@@ -12,6 +12,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^27.5.2",
+        "@types/nanoid": "^3.0.0",
         "@types/node": "^16.18.57",
         "@types/react": "^18.2.25",
         "@types/react-dom": "^18.2.10",
@@ -4099,6 +4100,15 @@
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.3.tgz",
       "integrity": "sha512-Ys+/St+2VF4+xuY6+kDIXGxbNRO0mesVg0bbxEfB97Od1Vjpjx9KD1qxs64Gcb3CWPirk9Xe+PT4YiiHQ9T+eg=="
     },
+    "node_modules/@types/nanoid": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/nanoid/-/nanoid-3.0.0.tgz",
+      "integrity": "sha512-UXitWSmXCwhDmAKe7D3hNQtQaHeHt5L8LO1CB8GF8jlYVzOv5cBWDNqiJ+oPEWrWei3i3dkZtHY/bUtd0R/uOQ==",
+      "deprecated": "This is a stub types definition. nanoid provides its own type definitions, so you do not need this installed.",
+      "dependencies": {
+        "nanoid": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "16.18.57",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.57.tgz",

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
+    "@types/nanoid": "^3.0.0",
     "@types/node": "^16.18.57",
     "@types/react": "^18.2.25",
     "@types/react-dom": "^18.2.10",

src/interfaces/common/TransactionInfo.ts

@@ -6,8 +6,8 @@ interface Input {
 }
 
 interface Output {
-    amount: number;
-    publicKey: string;
+    amount: string;
+    publicKeys: string[];
     globalIndex: string;
 }
 

src/pages/Transaction/Transaction.tsx

@@ -88,9 +88,11 @@ function Transaction() {
                 const parsedOuts = JSON.parse(result.outs);
                 if (parsedOuts instanceof Array) {
                     newTransactionInfo.outs = parsedOuts.map(e => {
+                        const { pub_keys } = e;
+                        const pubKeys = (pub_keys instanceof Array) ? pub_keys : [];
                         return {
-                            amount: e?.amount || 0,
-                            publicKey: e?.pub_keys?.[0] || "",
+                            amount: pubKeys[4] || "",
+                            publicKeys: pubKeys.slice(0, 4),
                             globalIndex: e?.global_index || 0
                         }
                     })
@@ -141,8 +143,10 @@ function Transaction() {
 
     const outsRows = transactionInfo ? (
         transactionInfo.outs.map(e => [
-            Utils.toShiftedNumber(e.amount, 12),
-            e.publicKey,
+            e.amount,
+            <div className="transaction__outs__keys">
+                {e.publicKeys.map(e => <p>{e}</p>)}
+            </div>,
             e.globalIndex
         ])
     ) : [];

src/setupProxy.js

@@ -3,7 +3,7 @@ module.exports = function (app) {
   app.use(
     ["/api"],
     createProxyMiddleware({
-      target: "http://127.0.0.1:8008",
+      target: "http://127.0.0.1:4595",
       changeOrigin: true
     })
   );

src/styles/Transaction.scss

@@ -3,6 +3,12 @@
         margin-bottom: 25px;
     }
 
+    .transaction__outs__keys {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
     .transaction__info {
         display: flex;
         flex-direction: column;