e2e39d7 · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

ux: add wallet Address

e2e39d7tomholford5 years ago

src/views/Transactions/AddressRow.tsxnew file+14

compare with master

unifiedsplit

@@ -0,0 +1,14 @@

1+import { Box } from '@tlon/indigo-react';

3+export const AddressRow = ({ address }) => {

4+ return (

5+ <>

6+ <Box className="address-row">

7+ <Box className="icon"></Box>

8+ <Box className="info">

9+ <Box className="address">{address}</Box>

10+ </Box>

11+ </Box>

12+ </>

13+ );

14+};

src/views/Transactions/TransactionHistory.scss+28

@@ -76,6 +76,34 @@

76 width: 100%;

77 }

79+ .address-row {

80+ @include tx-row();

81+

82+ .icon {

83+ grid-area: icon;

84+ background-color: black;

85+ border-radius: 2px;

86+ width: 24px;

87+ height: 24px;

88+ }

89+

90+ .info {

91+ grid-area: info;

92+ display: flex;

93+ flex-flow: column nowrap;

94+ justify-content: center;

95+

96+ .address {

97+ font-family: Source Code Pro;

98+ font-size: 14px;

99+ font-style: normal;

100+ font-weight: 500;

101+ line-height: 16px;

102+ letter-spacing: 0em;

103+ }

104+ }

105+ }

106+

79 .patp-row {

107 .patp-row {

80 @include tx-row();

108 @include tx-row();

109

src/views/Transactions/TransactionHistory.tsx+18−1

@@ -18,6 +18,8 @@ import { Box, Row } from '@tlon/indigo-react';

18import { PatpRow } from './PatpRow';

19import Dropdown from 'components/L2/Dropdowns/Dropdown';

20import Sigil from 'components/Sigil';

21+import { AddressRow } from './AddressRow';

22+import { abbreviateAddress } from 'lib/utils/address';

22interface GroupedTransactions {

24interface GroupedTransactions {

23 [ship: string]: RollerTransaction[];

25 [ship: string]: RollerTransaction[];

@@ -33,6 +35,10 @@ const TransactionHistory = () => {

33 const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);

35 const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);

34 const [selectedPatp, setSelectedPatp] = useState<string | null>(null);

36 const [selectedPatp, setSelectedPatp] = useState<string | null>(null);

38+ const shortAddress = useMemo(() => {

39+ return abbreviateAddress(address);

40+ }, [address]);

41+

36 const fetchTransactions = useCallback(async () => {

42 const fetchTransactions = useCallback(async () => {

37 const txns = await api.getHistory(address);

43 const txns = await api.getHistory(address);

38 setTransactions(txns);

44 setTransactions(txns);

@@ -89,10 +95,20 @@ const TransactionHistory = () => {

89 <Dropdown

95 <Dropdown

90 className="transaction-dropdown"

96 className="transaction-dropdown"

91 open={dropdownOpen}

97 open={dropdownOpen}

92− value={selectedPatp}

98+ value={selectedPatp ? selectedPatp : shortAddress}

93 toggleOpen={() => setDropdownOpen(!dropdownOpen)}>

99 toggleOpen={() => setDropdownOpen(!dropdownOpen)}>

94 <Box className="divider" />

100 <Box className="divider" />

95 <Box className="points">

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>

111+ </Row>

96 {txPatps.map(patp => {

112 {txPatps.map(patp => {

97 return (

113 return (

98 <Row

114 <Row

@@ -119,6 +135,7 @@ const TransactionHistory = () => {

119 </HeaderPane>

135 </HeaderPane>

120 <BodyPane>

136 <BodyPane>

121 <Box className="transaction-container">

137 <Box className="transaction-container">

138+ {!selectedPatp && <AddressRow address={address} />}

122 {filteredPatps.map(patp => {

139 {filteredPatps.map(patp => {

123 return (

140 return (

124 <Box key={patp}>

141 <Box key={patp}>