Skip to content

Commit

Permalink
feat: Add connection for tx view.
Browse files Browse the repository at this point in the history
  • Loading branch information
@yanguoyu
yanguoyu committed Dec 26, 2023
1 parent edad218 commit bfea1b5
Show file tree
Hide file tree
Showing 2 changed files with 252 additions and 25 deletions.
45 changes: 44 additions & 1 deletion packages/neuron-ui/src/components/SendTxDetail/TxTopology.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = ({
Expand Down Expand Up @@ -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 ? (
Expand All @@ -76,6 +118,7 @@ const TxTopology: FC<{
) : null
)}
<TopologyCellItem label="Fee" amount={tx.fee} />
<div className={styles.placeHolder} />
</div>
</div>
)
Expand Down
232 changes: 208 additions & 24 deletions packages/neuron-ui/src/components/SendTxDetail/txTopology.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -24,6 +27,7 @@

& > div {
padding: 6px;
line-height: 16px;
}
.label {
grid-area: label;
Expand Down Expand Up @@ -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;
}
}
}

0 comments on commit bfea1b5

Please sign in to comment.