c17fe59 · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

tx-ui: address Design feedback

c17fe59tomholford5 years ago

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

compare with master

unifiedsplit

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

42 push,

43 names.INVITE_COHORT,

44 ]);

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

45+ const goToHistory = useCallback(

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

46− names.TRANSACTION_HISTORY,

47+ [names.TRANSACTION_HISTORY, pointCursor, push]

47− push,

48− ]);

48+ );

50 const showInvites =

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

src/lib/constants.ts+17−4

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

137};

138

139const TRANSACTION_TYPE_ICONS = {

140− spawn: 'Node',

140+ adopt: 'CreateGroup',

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

141 'configure-keys': 'BootNode',

142 'configure-keys': 'BootNode',

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

143+ detach: 'BootNode',

144+ escape: 'Node',

145+ reject: 'X',

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

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

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

148+ spawn: 'Node',

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

144};

150};

145

151

146const TRANSACTION_TYPE_TITLES = {

152const TRANSACTION_TYPE_TITLES = {

147− spawn: 'Point Spawned',

153+ adopt: 'Adopted',

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

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

155 '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',

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

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

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

151};

164};

152const DUMMY_L2_ADDRESS = '0x1111111111111111111111111111111111111111';

165const DUMMY_L2_ADDRESS = '0x1111111111111111111111111111111111111111';

153

166

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

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

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

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

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

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

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

5import useRoller from 'lib/useRoller';

6import useRoller from 'lib/useRoller';

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

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

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

25}

26}

27const TransactionHistory = () => {

28const TransactionHistory = () => {

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

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

29 const { api } = useRoller();

30 const { api } = useRoller();

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

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

31 const address = need.addressFromWallet(wallet);

32 const address = need.addressFromWallet(wallet);

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

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

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

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

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

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+

37 const shortAddress = useMemo(() => {

46 const shortAddress = useMemo(() => {

38 return address.slice(0, 6);

47 return address.slice(0, 6);

39 }, [address]);

48 }, [address]);

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

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

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

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

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

43 setTransactions(txns);

52 setTransactions(txns);

53+ if (filterByPoint) {

54+ setSelectedPatp(filterByPoint);

55+ }

44 setLoading(false);

56 setLoading(false);

45− }, [address, api]);

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

47 const selectPatp = useCallback(patp => {

59 const selectPatp = useCallback(patp => {

48 setSelectedPatp(patp);

60 setSelectedPatp(patp);

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

52 const txnsByPatp = useMemo(() => {

64 const txnsByPatp = useMemo(() => {

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

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

66+ const patp = tx.ship;

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

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

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

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

56 } else {

69 } else {

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

70+ memo[patp] = [tx];

58 }

71 }

59 return memo;

72 return memo;

60 }, {} as GroupedTransactions);

73 }, {} as GroupedTransactions);

61 }, [transactions]);

74 }, [transactions]);

63 const txPatps = useMemo(() => {

76 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+ });

65 }, [txnsByPatp]);

80 }, [txnsByPatp]);

67 const filteredPatps = useMemo(() => {

82 const filteredPatps = useMemo(() => {

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

75 useEffect(() => {

90 useEffect(() => {

76 fetchTransactions();

91 fetchTransactions();

92+ // Load the TX history only once

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

77− }, [fetchTransactions]);

94+ }, []);

79 return (

96 return (

80 <View

97 <View