From bfea1b5dc66c0c32a9425671e50008a7cb023b63 Mon Sep 17 00:00:00 2001
From: yanguoyu <841185308@qq.com>
Date: Tue, 26 Dec 2023 13:37:14 +0800
Subject: [PATCH] feat: Add connection for tx view.

---
 .../components/SendTxDetail/TxTopology.tsx    |  45 +++-
 .../SendTxDetail/txTopology.module.scss       | 232 ++++++++++++++++--
 2 files changed, 252 insertions(+), 25 deletions(-)

diff --git a/packages/neuron-ui/src/components/SendTxDetail/TxTopology.tsx b/packages/neuron-ui/src/components/SendTxDetail/TxTopology.tsx
index 03159f29a3..bddc52f806 100644
--- a/packages/neuron-ui/src/components/SendTxDetail/TxTopology.tsx
+++ b/packages/neuron-ui/src/components/SendTxDetail/TxTopology.tsx
@@ -3,6 +3,7 @@ import React, { FC } from 'react'
 import { shannonToCKBFormatter } from 'utils'
 import Tooltip from 'widgets/Tooltip'
 import CopyZone from 'widgets/CopyZone'
+import { ArrowDownRound } from 'widgets/Icons/icon'
 import styles from './txTopology.module.scss'
 
 const TopologyCellItem = ({
@@ -62,7 +63,48 @@ const TxTopology: FC<{
           ) : null
         )}
       </div>
-      <div className={styles.txBox}>Transaction</div>
+      <div className={styles.center}>
+        {tx.inputs.length > 1 ? (
+          <>
+            <div className={styles.inputConnection} style={{ height: `${(tx.inputs.length - 1) * 91}px` }}>
+              {Array.from({ length: (tx.inputs.length - 1) * 4 }).map((_, idx) => (
+                <div
+                  data-idx={idx}
+                  data-ignore-right={idx > 2 * tx.inputs.length - 4 && idx < 2 * tx.inputs.length - 1}
+                  className={
+                    tx.inputs.length % 2 !== 0 && idx === tx.inputs.length * 2 - 2 ? styles.centerLine : undefined
+                  }
+                />
+              ))}
+            </div>
+            <div className={styles.inputConnectTx}>
+              <div />
+              <ArrowDownRound />
+              <div />
+            </div>
+          </>
+        ) : (
+          <div className={styles.onlyOneInput}>
+            <ArrowDownRound />
+          </div>
+        )}
+        <div className={styles.txBox}>Transaction</div>
+        <div className={styles.outputConnectTx}>
+          <div />
+          <div />
+        </div>
+        <div className={styles.outputConnection} style={{ height: `${tx.outputs.length * 91}px` }}>
+          {Array.from({ length: tx.outputs.length * 4 }).map((_, idx) => (
+            <div
+              data-idx={idx}
+              data-ignore-left={idx > 2 * tx.outputs.length - 2 && idx <= 2 * tx.outputs.length}
+              className={tx.outputs.length % 2 === 0 && idx === tx.outputs.length * 2 ? styles.centerLine : undefined}
+            >
+              {idx % 4 === 0 || idx === tx.outputs.length * 4 - 1 ? <ArrowDownRound /> : null}
+            </div>
+          ))}
+        </div>
+      </div>
       <div className={styles.outputs}>
         {tx.outputs.map((v, idx) =>
           v.lock && v.capacity ? (
@@ -76,6 +118,7 @@ const TxTopology: FC<{
           ) : null
         )}
         <TopologyCellItem label="Fee" amount={tx.fee} />
+        <div className={styles.placeHolder} />
       </div>
     </div>
   )
diff --git a/packages/neuron-ui/src/components/SendTxDetail/txTopology.module.scss b/packages/neuron-ui/src/components/SendTxDetail/txTopology.module.scss
index e155c76950..da42cb3d66 100644
--- a/packages/neuron-ui/src/components/SendTxDetail/txTopology.module.scss
+++ b/packages/neuron-ui/src/components/SendTxDetail/txTopology.module.scss
@@ -2,18 +2,21 @@
 
 .cellItemRoot {
   margin: 16px 0;
+  position: relative;
+  min-width: 160px;
 
   .inputStatus {
     color: var(--secondary-text-color);
     font-size: 12px;
     font-weight: 400;
     margin-bottom: 4px;
+    position: absolute;
+    bottom: 100%;
   }
 
   .itemTable {
     border: 1px solid var(--divide-line-color);
     border-radius: 4px;
-    width: 188px;
     font-size: 12px;
     background-color: var(--table-head-background-color);
     color: --third-text-color;
@@ -24,6 +27,7 @@
 
     & > div {
       padding: 6px;
+      line-height: 16px;
     }
     .label {
       grid-area: label;
@@ -55,36 +59,216 @@
 }
 
 .root {
-  padding: 14px 160px;
+  padding: 28px 0;
   border-top: 1px solid var(--divide-line-color);
   display: flex;
-  justify-content: space-around;
-  align-items: center;
-  .txBox {
-    border-radius: 4px;
-    border: 1px solid var(--divide-line-color);
-    background-color: var(--table-head-background-color);
-    width: 74px;
-    height: 24px;
-    line-height: 24px;
-    font-size: 12px;
-    font-weight: 400;
-    text-align: center;
-    color: var(--third-text-color);
+  justify-content: center;
+
+  & > div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    .txBox {
+      border-radius: 4px;
+      border: 1px solid var(--divide-line-color);
+      background-color: var(--table-head-background-color);
+      width: 74px;
+      height: 24px;
+      line-height: 24px;
+      font-size: 12px;
+      font-weight: 400;
+      text-align: center;
+      color: var(--third-text-color);
+    }
+
+    .onlyOneInput {
+      width: 100px;
+      height: 1px;
+      background-color: var(--divide-line-color);
+      position: relative;
+      svg {
+        position: absolute;
+        left: 50%;
+        top: 100%;
+        transform: rotate(-90deg) translateX(50%);
+        > path {
+          fill: var(--divide-line-color);
+          stroke: var(--divide-line-color);
+        }
+      }
+    }
+    .inputConnection {
+      width: 40px;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+
+      & > div {
+        flex: 1 1 auto;
+        border-color: var(--divide-line-color) !important;
+        border-right: 1px solid;
+
+        &:nth-child(4n + 1) {
+          border-top: 1px solid;
+        }
+        &:first-child {
+          border-radius: 0 8px 0 0;
+        }
+        &:last-child {
+          border-radius: 0 0 8px 0;
+          border-bottom: 1px solid;
+        }
+        &[data-ignore-right='true'] {
+          border-right: none;
+        }
+        &.centerLine {
+          position: absolute;
+          top: calc(50% - 1px);
+          width: calc(200% + 16px);
+          left: -28px;
+          transform: scale(0.5);
+          border-top: 2px solid;
+        }
+      }
+    }
+    .inputConnectTx {
+      width: 60px;
+      height: 46px;
+      position: relative;
+
+      & > div {
+        height: 50%;
+        border-left: 1px solid;
+        border-color: var(--divide-line-color) !important;
+        margin-left: -1px;
+        &:first-child {
+          border-bottom: 1px solid;
+          border-radius: 0 0 0 8px;
+        }
+        &:last-child {
+          border-top: 1px solid;
+          width: 8px;
+          border-radius: 8px 0 0 0;
+          margin-top: -1px;
+        }
+      }
+
+      svg {
+        position: absolute;
+        transform: translateY(-50%) rotate(-90deg);
+        left: 50%;
+        top: 50%;
+        > path {
+          fill: var(--divide-line-color);
+          stroke: var(--divide-line-color);
+        }
+      }
+    }
+    .outputConnectTx {
+      width: 60px;
+      height: 52px;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      & > div {
+        height: 50%;
+        border-right: 1px solid;
+        border-color: var(--divide-line-color) !important;
+        margin-right: -1px;
+        &:first-child {
+          width: 100%;
+          border-bottom: 1px solid;
+          border-radius: 0 0 8px 0;
+        }
+        &:last-child {
+          border-top: 1px solid;
+          width: 8px;
+          border-radius: 0 8px 0 0;
+          margin-top: -1px;
+        }
+      }
+    }
+    .outputConnection {
+      width: 40px;
+      height: calc(100% - 59px - 32px);
+      display: flex;
+      flex-direction: column;
+      position: relative;
+
+      & > div {
+        flex: 1;
+        border-color: var(--divide-line-color) !important;
+        border-left: 1px solid;
+        position: relative;
+        &:nth-child(4n + 1) {
+          border-top: 1px solid;
+          svg {
+            bottom: 100%;
+            transform: rotate(-90deg) translateY(-50%) translateX(-50%);
+          }
+        }
+        &:first-child {
+          border-radius: 8px 0 0 0;
+
+          svg {
+            bottom: 100%;
+            transform: rotate(-90deg) translateY(-50%) translateX(-50%);
+          }
+        }
+        &:last-child {
+          border-radius: 0 0 0 8px;
+          border-bottom: 1px solid;
+          position: relative;
+          top: -14px;
+          svg {
+            top: 100%;
+            transform: rotate(-90deg) translateY(-50%) translateX(50%);
+          }
+        }
+        &[data-ignore-left='true'] {
+          border-left: none;
+        }
+        &.centerLine {
+          position: absolute;
+          top: calc(50% - 1px);
+          width: calc(200% + 16px);
+          left: -28px;
+          transform: scale(0.5);
+          border-top: 2px solid;
+
+          & > svg {
+            transform: rotate(-90deg) translateY(-50%) translateX(-50%) scale(2);
+          }
+        }
+      }
+
+      svg {
+        position: absolute;
+        left: 50%;
+        > path {
+          fill: var(--divide-line-color);
+          stroke: var(--divide-line-color);
+        }
+      }
+    }
   }
 
   .inputs {
     position: relative;
+  }
 
-    .connectionLine {
-      position: absolute;
-      width: 44px;
-      height: calc(100% - 92px);
-      top: 45px;
-      left: 100%;
-      border: 1px solid var(--divide-line-color);
-      border-left: none;
-      border-radius: 0 4px 4px 0;
+  .outputs {
+    position: relative;
+
+    .placeHolder {
+      height: 29px;
     }
   }
 }