git.iko.soy/bridge
on master help sign in
ui: bucket TXs by ship, additional styling
1b43863tomholford
src/lib/constants.ts+1−1
compare with master
unifiedsplit
@@ -138,7 +138,7 @@ const TRANSACTION_STATUS_ICONS = {
138
138
139const TRANSACTION_TYPE_ICONS = {
139const TRANSACTION_TYPE_ICONS = {
140 spawn: 'ArrowEast',
140 spawn: 'ArrowEast',
141− 'configure-keys': 'Gear',
141+ 'configure-keys': 'BootNode',
142 'transfer-point': 'Swap',
142 'transfer-point': 'Swap',
143 'set-management-proxy': 'ArrowRefresh',
143 'set-management-proxy': 'ArrowRefresh',
144};
144};
src/views/Transactions/Gallery.tsxnew file+20
@@ -0,0 +1,20 @@
1+import { Box, Icon } from '@tlon/indigo-react';
2+import { _iconIndex as iconIndex } from '@tlon/indigo-react';
3+
4+export const Gallery = () => {
5+ const iconNames = Object.keys(iconIndex);
6+ return (
7+ <>
8+ {iconNames.map(name => {
9+ return (
10+ <>
11+ <Box padding={'5px'} marginBottom={'5px'} border={'solid 1px rgba(0,0,0,0.5)'}>
12+ {name}
13+ <Icon icon={name} height={'16px'} width={'16px'} />
14+ </Box>
15+ </>
16+ );
17+ })}
18+ </>
19+ );
20+};
src/views/Transactions/ShipRow.tsxnew file+29
@@ -0,0 +1,29 @@
1+import { Box, Row } from '@tlon/indigo-react';
2+import Sigil from 'components/Sigil';
3+
4+export const ShipRow = ({ patp }) => {
5+ return (
6+ <>
7+ <Box className="ship-row">
8+ <Box className="icon">
9+ <Box className="sigil">
10+ {
11+ <Sigil
12+ icon
13+ patp={patp}
14+ colors={['black', 'white']}
15+ size={12}
16+ display="block"
17+ padding={6}
18+ borderRadius={2}
19+ />
20+ }
21+ </Box>
22+ </Box>
23+ <Box className="info">
24+ <Box className="patp">~{patp}</Box>
25+ </Box>
26+ </Box>
27+ </>
28+ );
29+};
src/views/Transactions/TransactionHistory.scss+56−26
@@ -1,35 +1,69 @@
1@import 'style/shared/variables.scss';
1@import 'style/shared/variables.scss';
2
2
3+@mixin tx-row {
4+ display: grid;
5+ grid-template-areas: "icon info";
6+ grid-template-columns: 24px auto;
7+ grid-template-rows: auto;
8+ column-gap: 16px;
9+ margin-top: 8px;
10+ margin-bottom: 8px;
11+ padding-top: 8px;
12+ padding-bottom: 8px;
13+}
14+
3.transaction-history {
15.transaction-history {
4
16
5 .transaction-container {
17 .transaction-container {
6 width: 100%;
18 width: 100%;
7 }
19 }
8
20
21+ .ship-row {
22+ @include tx-row();
23+
24+ .icon {
25+ grid-area: icon;
26+
27+ .sigil {
28+ background-color: black;
29+ height: 14px;
30+ width: 14px;
31+ padding: 4px;
32+ }
33+ }
34+
35+ .info {
36+ grid-area: info;
37+ display: flex;
38+ flex-flow: column nowrap;
39+ justify-content: center;
40+
41+ .patp {
42+ font-family: Source Code Pro;
43+ font-size: 14px;
44+ font-style: normal;
45+ font-weight: 500;
46+ line-height: 16px;
47+ letter-spacing: 0em;
48+ }
49+ }
50+ }
51+
9 .transaction-row {
52 .transaction-row {
10− display: grid;
53+ @include tx-row();
11− grid-template-areas: "icon info";
12− grid-template-columns: 18px auto;
13− grid-template-rows: auto;
14− column-gap: 16px;
15− margin-top: 8px;
16− margin-bottom: 8px;
17− padding-top: 8px;
18− padding-bottom: 8px;
19
54
20 .icon {
55 .icon {
21 grid-area: icon;
56 grid-area: icon;
22− padding-top: 3px;
57+ padding-top: 6px;
23
58
24 svg {
59 svg {
25− height: 18px;
60+ height: 16px;
26− width: 18px;
61+ width: 16px;
27 }
62 }
28 }
63 }
29
64
30 .info {
65 .info {
31 grid-area: info;
66 grid-area: info;
32−
33 }
67 }
34
68
35 .title-row {
69 .title-row {
@@ -50,22 +84,22 @@
50
84
51 .status {
85 .status {
52 .badge {
86 .badge {
53− width: 78px;
87+ align-items: center;
88+ background-color: black;
89+ border-radius: 2px;
90+ color: white;
54 display: flex;
91 display: flex;
55 flex-flow: row nowrap;
92 flex-flow: row nowrap;
56− justify-content: space-between;
57− align-items: center;
58 font-family: Inter;
93 font-family: Inter;
59 font-size: 14px;
94 font-size: 14px;
60 font-style: normal;
95 font-style: normal;
61 font-weight: 500;
96 font-weight: 500;
62− line-height: 18px;
97+ justify-content: space-between;
63 letter-spacing: 0em;
98 letter-spacing: 0em;
99+ line-height: 18px;
100+ padding: 4px 8px;
64 text-align: center;
101 text-align: center;
65− color: white;
102+ width: 78px;
66− background-color: black;
67− padding: 2px;
68− border-radius: 2px;
69
103
70 svg {
104 svg {
71 height: 14px;
105 height: 14px;
@@ -92,12 +126,8 @@
92 &.pending {
126 &.pending {
93 background-color: $rollup-yellow;
127 background-color: $rollup-yellow;
94 color: #000;
128 color: #000;
95− padding: 4px 8px;
96 width: 100px;
129 width: 100px;
97− display: flex;
130+
98− flex-direction: row;
99− justify-content: space-between;
100− align-items: center;
101
131
102 svg {
132 svg {
103 path {
133 path {
src/views/Transactions/TransactionHistory.tsx+36−6
@@ -1,4 +1,4 @@
1−import React, { useCallback, useEffect, useState } from 'react';
1+import React, { useCallback, useEffect, useMemo, useState } from 'react';
2
2
3import * as need from 'lib/need';
3import * as need from 'lib/need';
4import { useWallet } from 'store/wallet';
4import { useWallet } from 'store/wallet';
@@ -15,6 +15,11 @@ import { RollerTransaction } from '@urbit/roller-api';
15import './TransactionHistory.scss';
15import './TransactionHistory.scss';
16import { TransactionRow } from './TransactionRow';
16import { TransactionRow } from './TransactionRow';
17import { Box } from '@tlon/indigo-react';
17import { Box } from '@tlon/indigo-react';
18+import { ShipRow } from './ShipRow';
19+
20+interface GroupedTransactions {
21+ [ship: string]: RollerTransaction[];
22+}
18
23
19const TransactionHistory = () => {
24const TransactionHistory = () => {
20 const { pop }: any = useLocalRouter();
25 const { pop }: any = useLocalRouter();
@@ -23,10 +28,24 @@ const TransactionHistory = () => {
23 const address = need.addressFromWallet(wallet);
28 const address = need.addressFromWallet(wallet);
24 const [transactions, setTransactions] = useState<RollerTransaction[]>([]);
29 const [transactions, setTransactions] = useState<RollerTransaction[]>([]);
25
30
31+ const txnsByPatp = useMemo(() => {
32+ return transactions.reduce((memo, tx) => {
33+ if (Object.keys(memo).includes(tx.ship)) {
34+ memo[tx.ship].push(tx);
35+ } else {
36+ memo[tx.ship] = [tx];
37+ }
38+ return memo;
39+ }, {} as GroupedTransactions);
40+ }, [transactions]);
41+
42+ const txKeys = useMemo(() => {
43+ return Object.keys(txnsByPatp).sort();
44+ }, [txnsByPatp]);
45+
26 const fetchTransactions = useCallback(async () => {
46 const fetchTransactions = useCallback(async () => {
27 const txns = await api.getHistory(address);
47 const txns = await api.getHistory(address);
28− const sortedTxns = txns.sort((a, b) => a.time - b.time)
48+ setTransactions(txns);
29− setTransactions(sortedTxns);
30 }, [address, api]);
49 }, [address, api]);
31
50
32 useEffect(() => {
51 useEffect(() => {
@@ -46,9 +65,20 @@ const TransactionHistory = () => {
46 </HeaderPane>
65 </HeaderPane>
47 <BodyPane>
66 <BodyPane>
48 <Box className="transaction-container">
67 <Box className="transaction-container">
68+ {txKeys.map(patp => {
69+ return (
70+ <>
71+ <ShipRow patp={patp} />
72+ {txnsByPatp[patp]
73+ .sort((a, b) => {
74+ return a.time - b.time;
75+ })
49− {transactions.map(tx => (
76+ .map(tx => (
50− <TransactionRow key={tx.time} {...tx} />
77+ <TransactionRow key={tx.time} {...tx} />
78+ ))}
79+ </>
80+ );
51− ))}
81+ })}
52 </Box>
82 </Box>
53 </BodyPane>
83 </BodyPane>
54 </Window>
84 </Window>