@@ -14,12 +14,11 @@ import { RollerTransaction } from '@urbit/roller-api';
1414
1515import './TransactionHistory.scss';
1616import { TransactionRow } from './TransactionRow';
17−import { Box, Row } from '@tlon/indigo-react';
17+import { Box, LoadingSpinner, Row } from '@tlon/indigo-react';
1818import { PatpRow } from './PatpRow';
1919import Dropdown from 'components/L2/Dropdowns/Dropdown';
2020import Sigil from 'components/Sigil';
2121import { AddressRow } from './AddressRow';
22−import { abbreviateAddress } from 'lib/utils/address';
2322
2423interface GroupedTransactions {
2524 [ship: string]: RollerTransaction[];
@@ -36,7 +35,7 @@ const TransactionHistory = () => {
3635 const [selectedPatp, setSelectedPatp] = useState<string | null>(null);
3736
3837 const shortAddress = useMemo(() => {
39− return abbreviateAddress(address);
38+ return address.slice(0, 6);
4039 }, [address]);
4140
4241 const fetchTransactions = useCallback(async () => {
@@ -85,75 +84,81 @@ const TransactionHistory = () => {
8584 className="transaction-history"
8685 header={<L2BackHeader />}>
8786 <Window>
88− {loading ? (
89− <Box className={'loading'}>Loading...</Box>
90− ) : (
91− <>
92− <HeaderPane>
93− <Box className="transaction-header">
94− <h5>Transactions</h5>
95− <Dropdown
96− className="transaction-dropdown"
97− open={dropdownOpen}
98− value={selectedPatp ? selectedPatp : shortAddress}
99− toggleOpen={() => setDropdownOpen(!dropdownOpen)}>
100− <Box className="divider" />
101− <Box className="points">
102− <Row className="entry" onClick={() => selectPatp(null)}>
103− <Box>{shortAddress}</Box>
104− <Row>
105− <Box
106− background="black"
107− borderRadius="2px"
108− width="24px"
109− height="24px"></Box>
110− </Row>
87+ <>
88+ <HeaderPane>
89+ <Box className="transaction-header">
90+ <h5>Transactions</h5>
91+ <Dropdown
92+ className="transaction-dropdown"
93+ open={dropdownOpen}
94+ value={selectedPatp ? selectedPatp : shortAddress}
95+ toggleOpen={() => setDropdownOpen(!dropdownOpen)}>
96+ <Box className="divider" />
97+ <Box className="points">
98+ <Row className="entry" onClick={() => selectPatp(null)}>
99+ <Box>{shortAddress}</Box>
100+ <Row>
101+ <Box
102+ background="black"
103+ borderRadius="2px"
104+ width="24px"
105+ height="24px"></Box>
111106 </Row>
112− {txPatps.map(patp => {
113− return (
114− <Row
115− className="entry"
116− onClick={() => selectPatp(patp)}
117− key={patp}>
118− <Box>{patp}</Box>
119− <Row>
120− <Box className="sigil">
121− <Sigil
122− icon
123− patp={patp}
124− size={1}
125− colors={['#000', '#FFF']}
126− />
127− </Box>
128− </Row>
107+ </Row>
108+ {txPatps.map(patp => {
109+ return (
110+ <Row
111+ className="entry"
112+ onClick={() => selectPatp(patp)}
113+ key={patp}>
114+ <Box>{patp}</Box>
115+ <Row>
116+ <Box className="sigil">
117+ <Sigil
118+ icon
119+ patp={patp}
120+ size={1}
121+ colors={['#000', '#FFF']}
122+ />
123+ </Box>
129124 </Row>
130− );
131− })}
132− </Box>
133− </Dropdown>
125+ </Row>
126+ );
127+ })}
128+ </Box>
129+ </Dropdown>
130+ </Box>
131+ </HeaderPane>
132+ <BodyPane>
133+ {loading ? (
134+ <Box className={'loading'}>
135+ <LoadingSpinner />
134136 </Box>
135− </HeaderPane>
136− <BodyPane>
137+ ) : (
137138 <Box className="transaction-container">
138139 {!selectedPatp && <AddressRow address={address} />}
139− {filteredPatps.map(patp => {
140− return (
141− <Box key={patp}>
142− <PatpRow patp={patp} />
143− {txnsByPatp[patp]
144− .sort((a, b) => {
145− return a.time - b.time;
146− })
147− .map(tx => (
148− <TransactionRow key={tx.time} {...tx} />
149− ))}
150− </Box>
151− );
152− })}
140+ {filteredPatps && filteredPatps.length > 0 ? (
141+ filteredPatps.map(patp => {
142+ return (
143+ <Box key={patp}>
144+ <PatpRow patp={patp} />
145+ {txnsByPatp[patp]
146+ .sort((a, b) => {
147+ return a.time - b.time;
148+ })
149+ .map(tx => (
150+ <TransactionRow key={tx.time} {...tx} />
151+ ))}
152+ </Box>
153+ );
154+ })
155+ ) : (
156+ <Box className="no-results">No transactions yet</Box>
157+ )}
153158 </Box>
154− </BodyPane>
155− </>
156− )}
159+ )}
160+ </BodyPane>
161+ </>
157162 </Window>
158163 </View>
159164 );