Skip to content

Commit 23fdff6

Browse files
kajosephkajoseph
committed
Merge branch 'border-box-label' of github.com:MicahMaphet/bitcore
2 parents fbc0b31 + f535c71 commit 23fdff6

File tree

6 files changed

+156
-92
lines changed

6 files changed

+156
-92
lines changed

‎packages/insight/src/assets/images/arrow-blue.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎packages/insight/src/assets/images/circle.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎packages/insight/src/assets/styles/transaction.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -158,16 +158,19 @@ export const TransactionChip = styled.div<TransactionChipProps>`
158158

159159
interface ArrowDivProps {
160160
margin: string;
161+
pointer?: boolean;
161162
}
162163

163164
export const ArrowDiv = styled.div<ArrowDivProps>`
164165
width: 25px;
165166
position: relative;
166167
margin: ${({margin}) => margin};
167168
168-
img {
169-
cursor: pointer;
170-
}
169+
${({pointer}) => pointer &&
170+
`img {
171+
cursor: pointer;
172+
}
173+
`}
171174
`;
172175

173176
export const ScriptText = styled.p`

‎packages/insight/src/components/block-details.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ const BlockDetails: FC<BlockDetailsProps> = ({currency, network, block}) => {
163163
onClick={() =>
164164
summary.previousBlockHash ? gotoBlock(summary.previousBlockHash) : null
165165
}>
166-
{(summary.height > 0) ? summary.height - 1 : "None"}
166+
{(summary.height > 0) ? summary.height - 1 : 'None'}
167167
</span>
168168
</TileLink>
169169
</Tile>

‎packages/insight/src/components/data-box.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {Children, FC, ReactNode} from 'react';
2+
import {useTheme} from 'styled-components';
3+
4+
const DataBox: FC<{children: ReactNode, label: string, style?: object}> = ({children, label, style}) => {
5+
const theme = useTheme();
6+
const modifiedChildren = typeof children === 'object'
7+
? Children.map(children as JSX.Element, (child: JSX.Element) => {
8+
return <span {...child.props} style={{margin: 0}}></span>;
9+
})
10+
: children;
11+
12+
return (
13+
<fieldset style={{
14+
border: `2.5px solid ${theme.dark ? '#5f5f5f' : '#ccc'}`,
15+
borderRadius: '5px',
16+
padding: '0.1rem 0.4rem',
17+
wordBreak: 'break-all',
18+
whiteSpace: 'normal',
19+
width: 'fit-content',
20+
height: 'fit-content',
21+
margin: '0.7rem 0.2rem',
22+
...style
23+
}}>
24+
<legend style={{fontWeight: 'bold', color: 'gray', margin: '-0.2rem 0.1rem'}}>{label}</legend>
25+
{modifiedChildren}
26+
</fieldset>
27+
);
28+
}
29+
30+
export default DataBox;

‎packages/insight/src/components/transaction-details.tsx‎

Lines changed: 115 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,11 @@ import {
2424
import {Tile, TileDescription} from '../assets/styles/tile';
2525
import ArrowSvg from '../assets/images/arrow.svg';
2626
import BlueArrowSvg from '../assets/images/arrow-blue.svg';
27+
import CircleSvg from '../assets/images/circle.svg';
2728
import {useNavigate, createSearchParams} from 'react-router-dom';
2829
import styled from 'styled-components';
2930
import {Slate, SlateDark} from '../assets/styles/colors';
31+
import DataBox from './data-box';
3032

3133
const TextElipsis = styled(ScriptText)`
3234
overflow: hidden;
@@ -46,6 +48,17 @@ const SelectedPill = styled.div`
4648
font-size: 16px;
4749
`;
4850

51+
const TxAddressLink = styled.span`
52+
overflow: hidden;
53+
text-overflow: ellipsis;
54+
text-align: left;
55+
width: 100%;
56+
margin-right: 7px;
57+
&:hover {
58+
cursor: pointer;
59+
}
60+
`
61+
4962
interface TransactionDetailsProps {
5063
transaction: Transaction;
5164
currency: string;
@@ -157,9 +170,12 @@ const TransactionDetails: FC<TransactionDetailsProps> = ({
157170
{vi.items.map((item: any, itemIndex: number) => (
158171
<div key={item.mintTxid + itemIndex}>
159172
{isInputSelected(item) ? <SelectedPill>Selected</SelectedPill> : null}
160-
161-
<Tile invertedBorderColor={arr.length > 1 && arr.length !== i + 1}>
162-
<ArrowDiv margin='auto .5rem auto 0'>
173+
<div style={{
174+
display: 'flex',
175+
marginTop: '1rem',
176+
...(showDetails && {borderBottom: '2px solid', paddingBottom: '0.25rem'})
177+
}}>
178+
<ArrowDiv margin='auto .5rem auto 0' pointer>
163179
<img
164180
src={BlueArrowSvg}
165181
width={17}
@@ -168,53 +184,60 @@ const TransactionDetails: FC<TransactionDetailsProps> = ({
168184
onClick={() => goToTx(item.mintTxid, undefined, item.mintIndex)}
169185
/>
170186
</ArrowDiv>
171-
172-
<TileDescription padding='0 1rem 0 0' value>
173-
{getAddress(vi) !== 'Unparsed address' ? (
174-
<SpanLink onClick={() => goToAddress(getAddress(vi))}>
175-
{getAddress(vi)}
176-
</SpanLink>
177-
) : (
178-
<span>Unparsed address</span>
179-
)}
180-
181-
{showDetails && (
182-
<>
183-
<TextElipsis>
184-
<b>Tx ID </b>
185-
<SpanLink
186-
onClick={() =>
187-
goToTx(item.mintTxid, undefined, item.mintIndex)
188-
}>
189-
{item.mintTxid}
190-
</SpanLink>
191-
</TextElipsis>
192-
193-
<TextElipsis>
194-
<b>Tx Index</b> {item.mintIndex}
195-
</TextElipsis>
196-
197-
{item.uiConfirmations && confirmations > 0 ? (
198-
<ScriptText>
199-
<b>Confirmations</b> {item.uiConfirmations + confirmations}
200-
</ScriptText>
201-
) : null}
187+
{getAddress(vi) !== 'Unparsed address' ? (
188+
<TxAddressLink onClick={() => goToAddress(getAddress(vi))} style={{wordBreak: showDetails ? 'break-all' : 'unset'}}>
189+
{getAddress(vi)}
190+
</TxAddressLink>
191+
) : (
192+
<span style={{textAlign: 'left', width: '100%'}}>
193+
Unparsed address
194+
</span>
195+
)}
196+
<div style={{minInlineSize: 'fit-content'}}>
197+
{getConvertedValue(item.value, currency)} {currency}
198+
</div>
199+
</div>
200+
201+
<Tile invertedBorderColor={arr.length > 1 && arr.length !== i + 1} padding={showDetails ? undefined : '0.4rem'}>
202+
{showDetails &&
203+
<>
204+
205+
<TileDescription padding='0 1rem 0 0' value>
206+
<DataBox label='Tx ID'>
207+
<TextElipsis>
208+
<SpanLink
209+
onClick={() =>
210+
goToTx(item.mintTxid, undefined, item.mintIndex)
211+
}>
212+
{item.mintTxid}
213+
</SpanLink>
214+
</TextElipsis>
215+
</DataBox>
216+
217+
<div style={{display: 'flex', gap: '0.7rem', margin: '0 0.2rem'}}>
218+
<DataBox label='Tx Index' style={{margin: 0}}>
219+
<TextElipsis>
220+
{item.mintIndex}
221+
</TextElipsis>
222+
</DataBox>
223+
{item.uiConfirmations && confirmations > 0 ? (
224+
<DataBox label='Confirmations' style={{margin: 0}}>
225+
<ScriptText>
226+
{item.uiConfirmations + confirmations}
227+
</ScriptText>
228+
</DataBox>
229+
) : null}
230+
</div>
202231

203232
{item.script && (
204233
<>
205-
<b>Script Hex</b>
206-
<ScriptText>{item.script}</ScriptText>
207-
<b>Script ASM</b>
208-
<ScriptText>{new lib.Script(item.script).toASM()}</ScriptText>
234+
<DataBox label='Script Hex'>{item.script}</DataBox>
235+
<DataBox label='Script ASM'>{new lib.Script(item.script).toASM()}</DataBox>
209236
</>
210237
)}
211-
</>
212-
)}
213-
</TileDescription>
214-
215-
<TileDescription value textAlign='right'>
216-
{getConvertedValue(item.value, currency)} {currency}
217-
</TileDescription>
238+
</TileDescription>
239+
</>
240+
}
218241
</Tile>
219242
</div>
220243
))}
@@ -234,56 +257,61 @@ const TransactionDetails: FC<TransactionDetailsProps> = ({
234257
return (
235258
<div key={i}>
236259
{isOutputSelected(i) ? <SelectedPill>Selected</SelectedPill> : null}
237-
<Tile invertedBorderColor={outputsLength > 1 && outputsLength !== i + 1}>
238-
<TileDescription padding='0 1rem 0 0' value>
239-
{getAddress(vo) !== 'Unparsed address' ? (
240-
<SpanLink onClick={() => goToAddress(getAddress(vo))}>
241-
{getAddress(vo)}
242-
</SpanLink>
243-
) : (
244-
<span>{isOpReturn(vo) ? 'OP_RETURN' : 'Unparsed address'}</span>
245-
)}
246-
247-
{showDetails && (
248-
<>
249-
{vo.spentTxid && (
250-
<TextElipsis>
251-
<b>Spent By </b>
252-
<SpanLink onClick={() => goToTx(vo.spentTxid, transaction.txid, i)}>
253-
{vo.spentTxid}
254-
</SpanLink>
255-
</TextElipsis>
256-
)}
257-
{isOpReturn(vo) && <ScriptText>{getOpReturnText(vo)}</ScriptText>}
258-
{vo.script && (
259-
<>
260-
<b>Script Hex</b>
261-
<ScriptText>{new lib.Script(vo.script).toHex()}</ScriptText>
262-
<b>Script ASM</b>
263-
<ScriptText>{new lib.Script(vo.script).toASM()}</ScriptText>
264-
</>
265-
)}
266-
</>
267-
)}
268-
</TileDescription>
269-
270-
<TileDescription value textAlign='right'>
260+
<div style={{
261+
display: 'flex',
262+
marginTop: '1rem',
263+
...(showDetails && {borderBottom: '2px solid', paddingBottom: '0.25rem'})
264+
}}>
265+
{getAddress(vo) !== 'Unparsed address' ? (
266+
<TxAddressLink onClick={() => goToAddress(getAddress(vo))} style={{wordBreak: showDetails ? 'break-all' : 'unset'}}>
267+
{getAddress(vo)}
268+
</TxAddressLink>
269+
) : (
270+
<span style={{textAlign: 'left', width: '100%'}}>
271+
{isOpReturn(vo) ? 'OP_RETURN' : 'Unparsed address'}
272+
</span>
273+
)}
274+
<div style={{minInlineSize: 'fit-content', display: 'flex'}}>
271275
{getConvertedValue(vo.value, currency)} {currency}{' '}
272-
</TileDescription>
273-
<ArrowDiv margin='auto 0 auto .5rem'>
276+
<ArrowDiv margin='auto 0 auto .5rem' pointer={vo.spentTxid}>
274277
<img
275-
src={vo.spentTxid ? BlueArrowSvg : ArrowSvg}
278+
src={vo.spentTxid ? BlueArrowSvg : (isOpReturn(vo) ? CircleSvg : ArrowSvg)}
276279
width={17}
277280
height={17}
278281
alt='Spent'
279-
title={vo.spentTxid ? 'Spent' : 'Unspent'}
280-
style={{
281-
visibility: (isOpReturn(vo) ? 'hidden' : 'visible'),
282-
margin: '0px 5px'
283-
}}
282+
title={vo.spentTxid ? 'Spent' : (isOpReturn(vo) ? 'Unspendable' : 'Unspent')}
283+
style={{margin: `0px ${isOpReturn(vo) ? '4px' : '5px'}`}}
284284
onClick={() => vo.spentTxid && goToTx(vo.spentTxid, transaction.txid, i)}
285285
/>
286286
</ArrowDiv>
287+
</div>
288+
</div>
289+
<Tile invertedBorderColor={outputsLength > 1 && outputsLength !== i + 1} padding={showDetails ? undefined : '0.4rem'}>
290+
{showDetails &&
291+
<>
292+
<TileDescription padding='0 1rem 0 0' value>
293+
{vo.spentTxid && (
294+
<DataBox label='Spent By'>
295+
<TextElipsis>
296+
<SpanLink onClick={() => goToTx(vo.spentTxid, transaction.txid, i)}>
297+
{vo.spentTxid}
298+
</SpanLink>
299+
</TextElipsis>
300+
</DataBox>
301+
)}
302+
{isOpReturn(vo) &&
303+
<DataBox label="Text">
304+
<ScriptText>{getOpReturnText(vo)}</ScriptText>
305+
</DataBox>}
306+
{vo.script && (
307+
<>
308+
<DataBox label='Script Hex'>{new lib.Script(vo.script).toHex()}</DataBox>
309+
<DataBox label='Script ASM'>{new lib.Script(vo.script).toASM()}</DataBox>
310+
</>
311+
)}
312+
</TileDescription>
313+
</>
314+
}
287315
</Tile>
288316
</div>
289317
);

0 commit comments

Comments
 (0)