0.2.0-beta

src/components/animation/QrTransition.ts

@@ -0,0 +1,85 @@
+import type { RootStackParamList } from '@model/nav'
+import { type NavigationProp,useNavigation } from '@react-navigation/core'
+import { useThemeContext } from '@src/context/Theme'
+import { useRef } from 'react'
+import { Animated, Easing } from 'react-native'
+
+type StackNavigation = NavigationProp<RootStackParamList>
+
+export const useTransitionAnimation = () => {
+	const nav = useNavigation<StackNavigation>()
+	const { color } = useThemeContext()
+	const animatedColorValue = useRef(new Animated.Value(0)).current
+	const animatedPositionValue = useRef(new Animated.Value(0)).current
+	const animatedOpacityValue = useRef(new Animated.Value(0)).current
+	const animatedMarginValue = useRef(new Animated.Value(0)).current
+	const animationEnded = useRef(false)
+	const interpolatedColor = animatedColorValue.interpolate({
+		inputRange: animationEnded.current ? [1, 0] : [0, 1],
+		outputRange: animationEnded.current ? ['#000', color.BACKGROUND] : [color.BACKGROUND, '#000'],
+	})
+	const interpolatedPosition = animatedPositionValue.interpolate({
+		inputRange: animationEnded.current ? [1, 0] : [0, 1],
+		outputRange: animationEnded.current ? [100, 0] : [0, 100],
+	})
+	const interpolatedOpacity = animatedOpacityValue.interpolate({
+		inputRange: animationEnded.current ? [1, 0] : [0, 1],
+		outputRange: animationEnded.current ? [0, 1] : [1, 0],
+	})
+	const interpolatedMargin = animatedMarginValue.interpolate({
+		inputRange: animationEnded.current ? [1, 0] : [0, 1],
+		outputRange: animationEnded.current ? [-1000, 0] : [0, -1000],
+	})
+	const animatedBgStyles = {
+		backgroundColor: interpolatedColor,
+	}
+	const animatedPosStyles = {
+		transform: [{ translateY: interpolatedPosition }],
+	}
+	const animatedOpacityStyles = {
+		opacity: interpolatedOpacity,
+	}
+	const animatedMarginStyles = {
+		marginTop: interpolatedMargin,
+	}
+	const animateTransition = () => {
+		Animated.parallel([
+			Animated.timing(animatedColorValue, {
+				toValue: animationEnded.current ? 0 : 1,
+				duration: 300,
+				easing: Easing.linear,
+				useNativeDriver: false,
+			}),
+			Animated.timing(animatedPositionValue, {
+				toValue: animationEnded.current ? 0 : 1,
+				duration: 300,
+				easing: Easing.linear,
+				useNativeDriver: false,
+			}),
+			Animated.timing(animatedOpacityValue, {
+				toValue: animationEnded.current ? 0 : 1,
+				duration: 150,
+				easing: Easing.linear,
+				useNativeDriver: false,
+			}),
+			Animated.timing(animatedMarginValue, {
+				toValue: animationEnded.current ? 0 : 1,
+				duration: 300,
+				easing: Easing.linear,
+				useNativeDriver: false,
+			})
+		]).start(() => {
+			if (animationEnded.current) { return animationEnded.current = false }
+			nav.navigate('qr scan', { mint: undefined })
+			animationEnded.current = true
+		})
+	}
+	return {
+		animatedBgStyles,
+		animatedPosStyles,
+		animatedOpacityStyles,
+		animatedMarginStyles,
+		animationEnded,
+		animateTransition,
+	}
+}

src/components/nav/BottomNav.tsx

@@ -8,10 +8,20 @@ import { STORE_KEYS } from '@store/consts'
 import { highlight as hi } from '@styles'
 import { isStr } from '@util'
 import { useTranslation } from 'react-i18next'
-import { SafeAreaView, TouchableOpacity } from 'react-native'
+import { Animated, SafeAreaView, TouchableOpacity } from 'react-native'
 import { s, ScaledSheet, vs } from 'react-native-size-matters'
 
-export default function BottomNav({ navigation, route }: TBottomNavProps) {
+type TInterPolation = Animated.AnimatedInterpolation<string | number>
+
+export default function BottomNav({
+	navigation,
+	route,
+	animatedBgStyles,
+	animatedPosStyles
+}: TBottomNavProps & {
+	animatedBgStyles?: { backgroundColor: TInterPolation },
+	animatedPosStyles?: { transform: { translateY: TInterPolation }[] }
+}) {
 	const { t } = useTranslation([NS.topNav])
 	const { color, highlight } = useThemeContext()
 
@@ -37,51 +47,59 @@ export default function BottomNav({ navigation, route }: TBottomNavProps) {
 		route.name === 'Contacts settings'
 
 	return (
-		<SafeAreaView style={[styles.bottomNav, { backgroundColor: color.BACKGROUND, paddingBottom: vs(10) }]}>
-			<TouchableOpacity
-				style={styles.navIcon}
-				onPress={() => void handleNav('dashboard')}
-				disabled={isWalletRelatedScreen}
-			>
-				<WalletIcon width={s(26)} height={s(26)} color={isWalletRelatedScreen ? hi[highlight] : color.TEXT} />
-				<Txt
-					txt='Wallet'
-					styles={[styles.iconTxt, {
-						color: isWalletRelatedScreen ? hi[highlight] : color.TEXT,
-						fontWeight: isWalletRelatedScreen ? '500' : '400'
-					}]}
-				/>
-			</TouchableOpacity>
-			<TouchableOpacity
-				style={styles.navIcon}
-				onPress={() => void handleNav('Address book')}
-				disabled={route.name === 'Address book'}
-			>
-				<BookIcon width={s(26)} height={s(26)} color={route.name === 'Address book' ? hi[highlight] : color.TEXT} />
-				<Txt
-					txt={t('contacts', { ns: NS.bottomNav })}
-					styles={[
-						styles.iconTxt, {
-							color: route.name === 'Address book' ? hi[highlight] : color.TEXT,
-							fontWeight: route.name === 'Address book' ? '500' : '400'
-						}
-					]}
-				/>
-			</TouchableOpacity>
-			<TouchableOpacity
-				style={styles.navIcon}
-				onPress={() => void handleNav('Settings')}
-				disabled={isSettingsRelatedScreen}
-			>
-				<SettingsIcon width={s(26)} height={s(26)} color={isSettingsRelatedScreen ? hi[highlight] : color.TEXT} />
-				<Txt
-					txt={t('settings')}
-					styles={[styles.iconTxt, {
-						color: isSettingsRelatedScreen ? hi[highlight] : color.TEXT,
-						fontWeight: isSettingsRelatedScreen ? '500' : '400'
-					}]}
-				/>
-			</TouchableOpacity>
+		<SafeAreaView>
+			<Animated.View
+				style={[
+					styles.bottomNav,
+					{ paddingBottom: vs(10) },
+					animatedBgStyles,
+					animatedPosStyles
+				]}>
+				<TouchableOpacity
+					style={styles.navIcon}
+					onPress={() => void handleNav('dashboard')}
+					disabled={isWalletRelatedScreen}
+				>
+					<WalletIcon width={s(26)} height={s(26)} color={isWalletRelatedScreen ? hi[highlight] : color.TEXT} />
+					<Txt
+						txt={t('wallet', { ns: NS.bottomNav })}
+						styles={[styles.iconTxt, {
+							color: isWalletRelatedScreen ? hi[highlight] : color.TEXT,
+							fontWeight: isWalletRelatedScreen ? '500' : '400'
+						}]}
+					/>
+				</TouchableOpacity>
+				<TouchableOpacity
+					style={styles.navIcon}
+					onPress={() => void handleNav('Address book')}
+					disabled={route.name === 'Address book'}
+				>
+					<BookIcon width={s(26)} height={s(26)} color={route.name === 'Address book' ? hi[highlight] : color.TEXT} />
+					<Txt
+						txt={t('contacts', { ns: NS.bottomNav })}
+						styles={[
+							styles.iconTxt, {
+								color: route.name === 'Address book' ? hi[highlight] : color.TEXT,
+								fontWeight: route.name === 'Address book' ? '500' : '400'
+							}
+						]}
+					/>
+				</TouchableOpacity>
+				<TouchableOpacity
+					style={styles.navIcon}
+					onPress={() => void handleNav('Settings')}
+					disabled={isSettingsRelatedScreen}
+				>
+					<SettingsIcon width={s(26)} height={s(26)} color={isSettingsRelatedScreen ? hi[highlight] : color.TEXT} />
+					<Txt
+						txt={t('settings')}
+						styles={[styles.iconTxt, {
+							color: isSettingsRelatedScreen ? hi[highlight] : color.TEXT,
+							fontWeight: isSettingsRelatedScreen ? '500' : '400'
+						}]}
+					/>
+				</TouchableOpacity>
+			</Animated.View>
 		</SafeAreaView>
 	)
 }

src/context/FocusClaim.tsx

@@ -4,7 +4,8 @@ import { l } from '@log'
 import type { ITokenInfo } from '@model'
 import { store } from '@store'
 import { STORE_KEYS } from '@store/consts'
-import { getStrFromClipboard, hasTrustedMint, isCashuToken, sleep } from '@util'
+import { getDefaultMint } from '@store/mintStore'
+import { getStrFromClipboard, hasTrustedMint, isCashuToken, isStr, sleep } from '@util'
 import { isTokenSpendable } from '@wallet'
 import { getTokenInfo } from '@wallet/proofs'
 import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'
@@ -32,9 +33,12 @@ const useFocusClaim = () => {
 			const info = getTokenInfo(cleanedClipboard)
 			if (!info) { return false }
 			// check if mint is a trusted one
+			const defaultM = await getDefaultMint()
 			const userMints = await getMintsUrls()
 			// do not claim from clipboard when app comes to the foreground if mint from token is not trusted
-			if (!hasTrustedMint(userMints, info.mints)) { return false }
+			if (!hasTrustedMint(userMints, info.mints)|| (isStr(defaultM) && !info.mints.includes(defaultM))) {
+				return false
+			}
 			// check if token is spendable
 			try {
 				const isSpendable = await isTokenSpendable(cleanedClipboard)

src/model/nav.ts

@@ -164,6 +164,7 @@ export type RootStackParamList = {
 		isZap?: boolean
 		nostr?: INostrSendData
 		isScanned?: boolean
+		change?: number
 	}
 	mintmanagement: {
 		mint: IMintUrl