c17fe59 · bridge · git.iko.soy

git.iko.soy/bridge

tx-ui: address Design feedback

fixes #690, #697 - Sort TXs by point size (galaxy --> star --> planet) - When navigating to TX history view from Point view, pre-filter the results by selected point - Also add support for additional TX events

commitc17fe59751d8c011ba1f917a37ebd32fba8e1200 authortomholford <tomholford@users.noreply.github.com> dateMon 1 Nov 2021, 18:44 (5 years ago) parent28798be

3 files changed+45−15

compare with master

unifiedsplit

src/components/L2/Headers/L2PointHeader.tsx+4−4 src/lib/constants.ts+17−4 src/views/Transactions/TransactionHistory.tsx+24−7

src/components/L2/Headers/L2PointHeader.tsx+4−4

@@ -42,10 +42,10 @@ const L2PointHeader = ({

4242 push,

4343 names.INVITE_COHORT,

4444 ]);

45− const goToHistory = useCallback(() => push(names.TRANSACTION_HISTORY), [

46− names.TRANSACTION_HISTORY,

47− push,

48− ]);

45+ const goToHistory = useCallback(

46+ () => push(names.TRANSACTION_HISTORY, { filterByPoint: pointCursor }),

47+ [names.TRANSACTION_HISTORY, pointCursor, push]

48+ );

4949

5050 const showInvites =

5151 !hideInvites && Boolean(pointCursor?.value && isStar(pointCursor.value));

src/lib/constants.ts+17−4

@@ -137,17 +137,30 @@ const TRANSACTION_STATUS_ICONS = {

137137};

138138

139139const TRANSACTION_TYPE_ICONS = {

140− spawn: 'Node',

140+ adopt: 'CreateGroup',

141+ 'cancel-escape': 'X',

141142 'configure-keys': 'BootNode',

142− 'transfer-point': 'Swap',

143+ detach: 'BootNode',

144+ escape: 'Node',

145+ reject: 'X',

143146 'set-management-proxy': 'ArrowRefresh',

147+ 'set-transfer-proxy': 'ArrowRefresh',

148+ spawn: 'Node',

149+ 'transfer-point': 'Swap',

144150};

145151

146152const TRANSACTION_TYPE_TITLES = {

147− spawn: 'Point Spawned',

153+ adopt: 'Adopted',

154+ 'cancel-escape': 'Escape Canceled',

148155 'configure-keys': 'Network Keys Configured',

156+ detach: 'Detached',

157+ escape: 'Escaped',

158+ reject: 'Rejected',

159+ 'set-management-proxy': 'Management Proxy Changed',

160+ 'set-spawn-proxy': 'Spawn Proxy Changed',

161+ 'set-transfer-proxy': 'Transfer Proxy Changed',

162+ spawn: 'Point Spawned',

149163 'transfer-point': 'Point Transferred',

150− 'set-management-proxy': 'Management Key Changed',

151164};

152165const DUMMY_L2_ADDRESS = '0x1111111111111111111111111111111111111111';

153166

src/views/Transactions/TransactionHistory.tsx+24−7

@@ -1,6 +1,7 @@

11import React, { useCallback, useEffect, useMemo, useState } from 'react';

33import * as need from 'lib/need';

4+import * as ob from 'urbit-ob';

45import { useWallet } from 'store/wallet';

56import useRoller from 'lib/useRoller';

67import { useLocalRouter } from 'lib/LocalRouter';

@@ -25,7 +26,7 @@ interface GroupedTransactions {

2526}

2627

2728const TransactionHistory = () => {

28− const { pop }: any = useLocalRouter();

29+ const { pop, data }: any = useLocalRouter();

2930 const { api } = useRoller();

3031 const { wallet }: any = useWallet();

3132 const address = need.addressFromWallet(wallet);

@@ -34,6 +35,14 @@ const TransactionHistory = () => {

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

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

3637

38+ // Pre-filter the results if navigating from Point view

39+ const filterByPoint = useMemo(() => {

40+ return data?.filterByPoint.matchWith({

41+ Nothing: () => null,

42+ Just: (p: number) => ob.patp(p.value).replace('~', ''),

43+ });

44+ }, [data]);

45+

3746 const shortAddress = useMemo(() => {

3847 return address.slice(0, 6);

3948 }, [address]);

@@ -41,8 +50,11 @@ const TransactionHistory = () => {

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

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

4352 setTransactions(txns);

53+ if (filterByPoint) {

54+ setSelectedPatp(filterByPoint);

55+ }

4456 setLoading(false);

45− }, [address, api]);

57+ }, [address, api, filterByPoint]);

4658

4759 const selectPatp = useCallback(patp => {

4860 setSelectedPatp(patp);

@@ -51,17 +63,20 @@ const TransactionHistory = () => {

5163

5264 const txnsByPatp = useMemo(() => {

5365 return transactions.reduce((memo, tx) => {

54− if (Object.keys(memo).includes(tx.ship)) {

55− memo[tx.ship].push(tx);

66+ const patp = tx.ship;

67+ if (Object.keys(memo).includes(patp)) {

68+ memo[patp].push(tx);

5669 } else {

57− memo[tx.ship] = [tx];

70+ memo[patp] = [tx];

5871 }

5972 return memo;

6073 }, {} as GroupedTransactions);

6174 }, [transactions]);

6275

6376 const txPatps = useMemo(() => {

64− return Object.keys(txnsByPatp).sort();

77+ return Object.keys(txnsByPatp).sort((a, b) => {

78+ return ob.patp2dec(`~${a}`) - ob.patp2dec(`~${b}`);

79+ });

6580 }, [txnsByPatp]);

6681

6782 const filteredPatps = useMemo(() => {

@@ -74,7 +89,9 @@ const TransactionHistory = () => {

7489

7590 useEffect(() => {

7691 fetchTransactions();

77− }, [fetchTransactions]);

92+ // Load the TX history only once

93+ // eslint-disable-next-line react-hooks/exhaustive-deps

94+ }, []);

7895

7996 return (

8097 <View