From 9b60f579cce8d5065495d76f151d5953f3109ed2 Mon Sep 17 00:00:00 2001
From: andrewprog97 <andrewprog97@gmail.com>
Date: Wed, 8 Nov 2023 00:03:55 +0300
Subject: [PATCH] change transaction outs display

---
 package-lock.json                        | 10 ++++++++++
 package.json                             |  1 +
 src/interfaces/common/TransactionInfo.ts |  4 ++--
 src/pages/Transaction/Transaction.tsx    | 12 ++++++++----
 src/setupProxy.js                        |  2 +-
 src/styles/Transaction.scss              |  6 ++++++
 6 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0480174..e8e3d8e 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index f4f203b..d27ff28 100644
--- a/package.json
+++ b/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",
diff --git a/src/interfaces/common/TransactionInfo.ts b/src/interfaces/common/TransactionInfo.ts
index d05267e..e73db39 100644
--- a/src/interfaces/common/TransactionInfo.ts
+++ b/src/interfaces/common/TransactionInfo.ts
@@ -6,8 +6,8 @@ interface Input {
 }
 
 interface Output {
-    amount: number;
-    publicKey: string;
+    amount: string;
+    publicKeys: string[];
     globalIndex: string;
 }
 
diff --git a/src/pages/Transaction/Transaction.tsx b/src/pages/Transaction/Transaction.tsx
index dc8518c..cd6b92d 100644
--- a/src/pages/Transaction/Transaction.tsx
+++ b/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
         ])
     ) : [];
diff --git a/src/setupProxy.js b/src/setupProxy.js
index b9cecfd..7a7ff7b 100644
--- a/src/setupProxy.js
+++ b/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
     })
   );
diff --git a/src/styles/Transaction.scss b/src/styles/Transaction.scss
index 43def67..07b5a2c 100644
--- a/src/styles/Transaction.scss
+++ b/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;