Enhance history entry of swap tx (#220)

* Fixes #191

* remove log

assets/translations/de.json

@@ -207,6 +207,7 @@
 		"clearOverHere": "Sie sind auf dem neusten Stand!",
 		"totalDmsReceived": "Sie haben {{totalDms}} Cashu token erhalten.",
 		"swapNow": "Jetzt tauschen",
+		"swap": "Tausch",
 		"emptyMint": "Kein Guthaben vorhanden",
 		"zapSoon": "Zaps werden bald hinzugefügt...",
 		"enutsPub": "eNuts: ",

assets/translations/en.json

@@ -207,6 +207,7 @@
 		"clearOverHere": "Everything is clear over here!",
 		"totalDmsReceived": "You received {{totalDms}} Cashu token.",
 		"swapNow": "Swap now",
+		"swap": "Swap",
 		"emptyMint": "Mint has no funds",
 		"zapSoon": "Zaps will be added soon...",
 		"enutsPub": "eNuts public key: ",

assets/translations/fr.json

@@ -205,6 +205,7 @@
 		"hideNuts": "Masquer votre solde total",
 		"checkingDms": "Vérification de vos DM pour l'Ecash...",
 		"swapNow": "Échanger maintenant",
+		"swap": "Échange",
 		"emptyMint": "Mint ne dispose pas de fonds.",
 		"zapSoon": "Les zaps seront bientôt ajoutés...",
 		"enutsPub": "eNuts clé public: ",

src/components/Balance.tsx

@@ -40,6 +40,12 @@ export default function Balance({ balance, nav }: IBalanceProps) {
 		void setPreferences({ ...pref, formatBalance: !formatSats })
 	}
 
+	const getTxTypeStr = (type: number) => {
+		if (type === 1) { return 'Ecash' }
+		if (type === 2) { return 'Lightning' }
+		return t('swap')
+	}
+
 	useEffect(() => {
 		void (async () => {
 			const stored = (await getLatestHistory()).reverse()
@@ -98,7 +104,8 @@ export default function Balance({ balance, nav }: IBalanceProps) {
 							:
 							<EcashIcon color={mainColors.WHITE} />
 						}
-						txType={h.type === 2 || h.type === 3 ? 'Lightning' : 'Ecash'}
+						isSwap={h.type === 3}
+						txType={getTxTypeStr(h.type)}
 						timestamp={h.timestamp}
 						amount={h.amount}
 						onPress={() => nav?.navigate('history entry details', { entry: h })}
@@ -138,13 +145,20 @@ export default function Balance({ balance, nav }: IBalanceProps) {
 interface IHistoryEntryProps {
 	icon: React.ReactNode
 	txType: string
+	isSwap?: boolean
 	timestamp: number
 	amount: number
 	onPress: () => void
 }
 
-function HistoryEntry({ icon, txType, timestamp, amount, onPress }: IHistoryEntryProps) {
+function HistoryEntry({ icon, txType, isSwap, timestamp, amount, onPress }: IHistoryEntryProps) {
 	const { t } = useTranslation([NS.history])
+
+	const getAmount = () => {
+		if (isSwap) { return `${formatInt(Math.abs(amount))} Satoshi` }
+		return `${amount > 0 ? '+' : ''}${formatInt(amount)} Satoshi`
+	}
+
 	return (
 		<>
 			<TouchableOpacity
@@ -162,7 +176,7 @@ function HistoryEntry({ icon, txType, timestamp, amount, onPress }: IHistoryEntr
 						</Text>
 					</View>
 				</View>
-				<Txt txt={`${amount > 0 ? '+' : ''}${formatInt(amount)} Satoshi`} styles={[{ color: mainColors.WHITE }]} />
+				<Txt txt={getAmount()} styles={[{ color: mainColors.WHITE }]} />
 			</TouchableOpacity>
 		</>
 	)

src/screens/History/Details.tsx

@@ -13,11 +13,10 @@ import { truncateNostrProfileInfo } from '@nostr/util'
 import { usePromptContext } from '@src/context/Prompt'
 import { useThemeContext } from '@src/context/Theme'
 import { NS } from '@src/i18n'
-import { l } from '@src/logger'
 import { addToHistory } from '@src/storage/store/latestHistoryEntries'
 import { historyStore } from '@store'
 import { globals, mainColors } from '@styles'
-import { copyStrToClipboard, formatInt, formatMintUrl, getLnInvoiceInfo, isUndef } from '@util'
+import { copyStrToClipboard, formatInt, formatMintUrl, getLnInvoiceInfo, isNum, isUndef } from '@util'
 import { claimToken, isTokenSpendable } from '@wallet'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -57,7 +56,21 @@ export default function DetailsPage({ navigation, route }: THistoryEntryPageProp
 	const { hash, memo } = isLn ? getLnInvoiceInfo(value) : { hash: '', memo: '' }
 	const tokenMemo = !isLn ? getDecodedToken(value).memo : t('noMemo', { ns: NS.history })
 	const { openPromptAutoClose } = usePromptContext()
-	l({ fee })
+
+	const getTxColor = () => {
+		if (type === 3) { return color.TEXT }
+		return amount < 0 ? mainColors.ERROR : mainColors.VALID
+	}
+
+	const getScreenName = () => {
+		if (type === 3) { return t('multimintSwap') }
+		return isLn ? LNstr : Ecash
+	}
+
+	const getAmount = () => {
+		if (type === 3) { return `${formatInt(Math.abs(amount))}` }
+		return `${amount > 0 ? '+' : ''}${formatInt(amount)}`
+	}
 
 	const copyValue = async () => {
 		await copyStrToClipboard(value)
@@ -144,14 +157,14 @@ export default function DetailsPage({ navigation, route }: THistoryEntryPageProp
 	return (
 		<View style={[globals(color).container, styles.container]}>
 			<TopNav
-				screenName={isLn ? LNstr : Ecash}
+				screenName={getScreenName()}
 				withBackBtn
 				handlePress={() => navigation.goBack()}
 			/>
 			<ScrollView style={{ marginTop: 110, marginBottom: insets.bottom }} showsVerticalScrollIndicator={false} >
 				<View style={styles.topSection}>
-					<Text style={[styles.amount, { color: amount < 0 ? mainColors.ERROR : mainColors.VALID }]}>
-						{formatInt(amount < 0 ? Math.abs(amount) : amount)}
+					<Text style={[styles.amount, { color: getTxColor() }]}>
+						{getAmount()}
 					</Text>
 					<Txt
 						txt='Satoshi'
@@ -311,7 +324,7 @@ export default function DetailsPage({ navigation, route }: THistoryEntryPageProp
 							{/* LN payment fees */}
 							<View style={styles.entryInfo}>
 								<Txt txt={t('fee')} />
-								<Txt txt={fee ? `${fee} Satoshi` : t('n/a')} />
+								<Txt txt={isNum(fee) ? `${fee} Satoshi` : t('n/a')} />
 							</View>
 							<Separator />
 						</>

src/screens/History/Entry.tsx

@@ -1,4 +1,4 @@
-import { IncomingArrowIcon, OutgoingArrowIcon } from '@comps/Icons'
+import { IncomingArrowIcon, OutgoingArrowIcon, SwapCurrencyIcon } from '@comps/Icons'
 import Txt from '@comps/Txt'
 import type { IHistoryEntry } from '@model'
 import type { THistoryPageProps } from '@model/nav'
@@ -19,31 +19,52 @@ interface IHistoryEntryProps {
 export default function HistoryEntry({ nav, item }: IHistoryEntryProps) {
 	const { t } = useTranslation([NS.history])
 	const { color, highlight } = useThemeContext()
+
+	const getTxTypeStr = () => {
+		if (item.type === 1) { return 'Ecash' }
+		if (item.type === 2) { return 'Lightning' }
+		return t('swap', { ns: NS.common})
+	}
+
+	const getTxColor = () => {
+		if (item.type === 3) { return color.TEXT }
+		return item.amount < 0 ? mainColors.ERROR : mainColors.VALID
+	}
+
+	const getAmount = () => {
+		if (item.type === 3) { return `${formatInt(Math.abs(item.amount), 'compact', 'en')}` }
+		return `${item.amount > 0 ? '+' : ''}${formatInt(item.amount, 'compact', 'en')}`
+	}
+
+	const getIcon = () => {
+		if (item.type === 3) { return <SwapCurrencyIcon width={16} height={16} color={color.TEXT} /> }
+		return item.amount < 0 ?
+			<OutgoingArrowIcon color={color.TEXT} />
+			:
+			<IncomingArrowIcon color={color.TEXT} />
+	}
+
 	return (
 		<TouchableOpacity
 			style={styles.listItem}
 			onPress={() => nav.navigation.navigate('history entry details', { entry: item })}
 		>
-			{item.amount < 0 ?
-				<OutgoingArrowIcon color={color.TEXT} />
-				:
-				<IncomingArrowIcon color={color.TEXT} />
-			}
+			{getIcon()}
 			<View style={styles.infoWrap}>
-				<Txt txt={item.type === 1 ? 'Ecash' : 'Lightning'} />
+				<Txt txt={getTxTypeStr()} />
 				<Text style={[globals(color, highlight).txt, { color: color.TEXT_SECONDARY, fontSize: 14 }]}>
 					<EntryTime from={item.timestamp * 1000} fallback={t('justNow')} />
 				</Text>
 			</View>
 			<View style={styles.placeholder} />
 			<View style={styles.amount}>
 				<Txt
-					txt={`${item.amount > 0 ? '+' : '-'}${formatInt(item.amount < 0 ? Math.abs(item.amount) : item.amount, 'compact', 'en')}`}
-					styles={[{ color: item.amount < 0 ? mainColors.ERROR : mainColors.VALID }]}
+					txt={getAmount()}
+					styles={[{ color: getTxColor() }]}
 				/>
 				<Txt
 					txt=' Sat.'
-					styles={[{ color: item.amount < 0 ? mainColors.ERROR : mainColors.VALID }]}
+					styles={[{ color: getTxColor() }]}
 				/>
 			</View>
 		</TouchableOpacity>

src/screens/History/index.tsx

@@ -23,12 +23,14 @@ export default function HistoryPage({ navigation, route }: THistoryPageProps) {
 	const { color } = useThemeContext()
 	const { claimed } = useFocusClaimContext()
 	const [data, setData] = useState<Record<string, IHistoryEntry[]>>({})
+
 	// update history after claiming from clipboard when the app comes to the foreground
 	useEffect(() => {
 		void (async () => {
 			setData(await getHistory())
 		})()
 	}, [claimed])
+
 	// update history after navigating to this page
 	useEffect(() => {
 		// eslint-disable-next-line @typescript-eslint/no-misused-promises
@@ -37,6 +39,7 @@ export default function HistoryPage({ navigation, route }: THistoryPageProps) {
 		})
 		return focusHandler
 	}, [navigation])
+
 	return (
 		<View style={[globals(color).container, styles.container, { paddingBottom: isIOS ? insets.bottom : 0 }]}>
 			<TopNav