@@ -18,6 +18,8 @@ import { Box, Row } from '@tlon/indigo-react';
1818import { PatpRow } from './PatpRow';
1919import Dropdown from 'components/L2/Dropdowns/Dropdown';
2020import Sigil from 'components/Sigil';
21+import { AddressRow } from './AddressRow';
22+import { abbreviateAddress } from 'lib/utils/address';
2123
2224interface GroupedTransactions {
2325 [ship: string]: RollerTransaction[];
@@ -33,6 +35,10 @@ const TransactionHistory = () => {
3335 const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
3436 const [selectedPatp, setSelectedPatp] = useState<string | null>(null);
3537
38+ const shortAddress = useMemo(() => {
39+ return abbreviateAddress(address);
40+ }, [address]);
41+
3642 const fetchTransactions = useCallback(async () => {
3743 const txns = await api.getHistory(address);
3844 setTransactions(txns);
@@ -89,10 +95,20 @@ const TransactionHistory = () => {
8995 <Dropdown
9096 className="transaction-dropdown"
9197 open={dropdownOpen}
92− value={selectedPatp}
98+ value={selectedPatp ? selectedPatp : shortAddress}
9399 toggleOpen={() => setDropdownOpen(!dropdownOpen)}>
94100 <Box className="divider" />
95101 <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>
111+ </Row>
96112 {txPatps.map(patp => {
97113 return (
98114 <Row
@@ -119,6 +135,7 @@ const TransactionHistory = () => {
119135 </HeaderPane>
120136 <BodyPane>
121137 <Box className="transaction-container">
138+ {!selectedPatp && <AddressRow address={address} />}
122139 {filteredPatps.map(patp => {
123140 return (
124141 <Box key={patp}>