diff --git a/loc/en.json b/loc/en.json index 4705793dc..0fe85641f 100644 --- a/loc/en.json +++ b/loc/en.json @@ -426,6 +426,7 @@ "eta_10m": "ETA: In ~10 minutes", "eta_3h": "ETA: In ~3 hours", "eta_1d": "ETA: In ~1 day", + "view_wallet": "View {walletLabel}", "list_title": "Transactions", "open_url_error": "Unable to open the link with the default browser. Please change your default browser and try again.", "rbf_explain": "We will replace this transaction with one with a higher fee so that it will be mined faster. This is called RBF—Replace by Fee.", diff --git a/screen/transactions/details.js b/screen/transactions/details.js index 6b655c78a..68523c933 100644 --- a/screen/transactions/details.js +++ b/screen/transactions/details.js @@ -26,7 +26,7 @@ function arrDiff(a1, a2) { } const TransactionsDetails = () => { - const { setOptions } = useNavigation(); + const { setOptions, navigate } = useNavigation(); const { hash } = useRoute().params; const { saveToDisk, txMetadata, wallets, getTransactions } = useContext(BlueStorageContext); const [from, setFrom] = useState(); @@ -136,14 +136,79 @@ const TransactionsDetails = () => { }); }; - const handleCopyPress = () => { - Clipboard.setString(`https://mempool.space/tx/${tx.hash}`); + const handleCopyPress = stringToCopy => { + Clipboard.setString( + stringToCopy !== TransactionsDetails.actionKeys.CopyToClipboard ? stringToCopy : `https://mempool.space/tx/${tx.hash}`, + ); }; if (isLoading || !tx) { return ; } + const weOwnAddress = address => { + for (const w of wallets) { + if (w.weOwnAddress(address)) { + return w; + } + } + return null; + }; + + const navigateToWallet = wallet => { + const walletID = wallet.getID(); + navigate('WalletTransactions', { + walletID, + walletType: wallet.type, + key: `WalletTransactions-${walletID}`, + }); + }; + + const renderSection = array => { + const fromArray = []; + + for (const [index, address] of array.entries()) { + const actions = []; + actions.push({ + id: TransactionsDetails.actionKeys.CopyToClipboard, + text: loc.transactions.details_copy, + icon: TransactionsDetails.actionIcons.Clipboard, + }); + const isWeOwnAddress = weOwnAddress(address); + if (isWeOwnAddress) { + actions.push({ + id: TransactionsDetails.actionKeys.GoToWallet, + text: loc.formatString(loc.transactions.view_wallet, { walletLabel: isWeOwnAddress.getLabel() }), + icon: TransactionsDetails.actionIcons.GoToWallet, + }); + } + + fromArray.push( + { + if (id === TransactionsDetails.actionKeys.CopyToClipboard) { + handleCopyPress(address); + } else if (id === TransactionsDetails.actionKeys.GoToWallet) { + navigateToWallet(isWeOwnAddress); + } + }} + > + + {address} + {index === array.length - 1 ? null : ','} + + , + ); + } + + return fromArray; + }; + return ( { {loc.transactions.details_from} - {from.filter(onlyUnique).join(', ')} + {renderSection(from.filter(onlyUnique))} + )} @@ -180,7 +246,8 @@ const TransactionsDetails = () => { {loc.transactions.details_to} - {arrDiff(from, to.filter(onlyUnique)).join(', ')} + {renderSection(arrDiff(from, to.filter(onlyUnique)))} + )} @@ -188,6 +255,7 @@ const TransactionsDetails = () => { <> {loc.send.create_fee} {tx.fee + ' sats'} + )} @@ -198,6 +266,7 @@ const TransactionsDetails = () => { {tx.hash} + )} @@ -205,6 +274,7 @@ const TransactionsDetails = () => { <> {loc.transactions.details_received} {dayjs(tx.received).format('LLL')} + )} @@ -212,6 +282,7 @@ const TransactionsDetails = () => { <> {loc.transactions.details_block} {tx.block_height} + )} @@ -219,6 +290,7 @@ const TransactionsDetails = () => { <> {loc.transactions.details_inputs} {tx.inputs.length} + )} @@ -226,6 +298,7 @@ const TransactionsDetails = () => { <> {loc.transactions.details_outputs} {tx.outputs.length} + )} { TransactionsDetails.actionKeys = { CopyToClipboard: 'copyToClipboard', + GoToWallet: 'goToWallet', }; TransactionsDetails.actionIcons = { @@ -258,6 +332,10 @@ TransactionsDetails.actionIcons = { iconType: 'SYSTEM', iconValue: 'doc.on.doc', }, + GoToWallet: { + iconType: 'SYSTEM', + iconValue: 'wallet.pass', + }, }; const styles = StyleSheet.create({ @@ -276,9 +354,11 @@ const styles = StyleSheet.create({ marginBottom: 4, }, rowValue: { - marginBottom: 26, color: 'grey', }, + marginBottom18: { + marginBottom: 18, + }, txId: { fontSize: 16, fontWeight: '500', @@ -287,6 +367,9 @@ const styles = StyleSheet.create({ fontWeight: '600', fontSize: 15, }, + weOwnAddress: { + fontWeight: '600', + }, save: { alignItems: 'center', justifyContent: 'center', @@ -325,18 +408,15 @@ const styles = StyleSheet.create({ export default TransactionsDetails; -TransactionsDetails.navigationOptions = navigationStyle( - { headerTitle: loc.transactions.details_title }, - (options, { theme, navigation, route }) => { - return { - ...options, - headerStyle: { - backgroundColor: theme.colors.customHeader, - borderBottomWidth: 0, - elevation: 0, - shadowOpacity: 0, - shadowOffset: { height: 0, width: 0 }, - }, - }; - }, -); +TransactionsDetails.navigationOptions = navigationStyle({ headerTitle: loc.transactions.details_title }, (options, { theme }) => { + return { + ...options, + headerStyle: { + backgroundColor: theme.colors.customHeader, + borderBottomWidth: 0, + elevation: 0, + shadowOpacity: 0, + shadowOffset: { height: 0, width: 0 }, + }, + }; +});