show text instead of QR code

src/components/AnimatedQR.tsx

@@ -4,6 +4,7 @@ import { Buffer } from 'buffer'
 import { useEffect, useRef, useState } from 'react'
 import QRCode, { QRCodeProps } from 'react-native-qrcode-svg'
 import { s } from 'react-native-size-matters'
+import Txt from './Txt'
 
 export interface AnimatedQR extends QRCodeProps {
 	value: string;
@@ -34,24 +35,28 @@ export function AnimatedQR({
 		if (value) {
 			timer = setInterval(() => {
 				setPart(encoder.current.nextPart())
+				console.log(part)
 			}, interval)
 		}
 		return () => {
 			if (timer) {
 				clearInterval(timer)
 			}
 		}
-	}, [value, chunkLength, interval])
+	}, [value, chunkLength, interval, part])
 	return (
-		<QRCode
-			value={part}
-			size={size}
-			// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-			logo={require('@assets/app-qr-icon.png')}
-			logoBorderRadius={10}
-			logoBackgroundColor={mainColors.WHITE}
-			logoMargin={s(6)}
-			onError={onError}
-		/>
+		<>
+		<Txt txt={part}></Txt>
+		</>
+		// <QRCode
+		// 	value={part}
+		// 	size={size}
+		// 	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+		// 	logo={require('@assets/app-qr-icon.png')}
+		// 	logoBorderRadius={10}
+		// 	logoBackgroundColor={mainColors.WHITE}
+		// 	logoMargin={s(6)}
+		// 	onError={onError}
+		// />
 	)
 }

src/components/QR.tsx

@@ -10,24 +10,28 @@ import { s, ScaledSheet } from 'react-native-size-matters'
 import useCopy from './hooks/Copy'
 import { CheckmarkIcon, CopyIcon } from './Icons'
 import Txt from './Txt'
+import { AnimatedQR } from './AnimatedQR'
 
 interface QRProps {
 	size: number
 	value: string
 	isInvoice?: boolean
 	truncateNum?: number
+	interval?: number
 	onError: () => void
 }
 
-export default function QR({ size, value, isInvoice, truncateNum, onError }: QRProps) {
+export default function QR({ size, value, isInvoice, truncateNum, onError,interval=100 }: QRProps) {
 	const { t } = useTranslation([NS.common])
 	const { color } = useThemeContext()
 	const { copied, copy } = useCopy()
 	const str = isInvoice ? value.toUpperCase() : value
 	return (
 		<TouchableOpacity onPress={() => void copy(str)}>
 			<View style={styles.qrWrap}>
-				<QRCode
+				<AnimatedQR
+					interval={interval}
+					chunkLength={100}
 					size={size}
 					value={str}
 					// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment

src/screens/Payment/Send/EncodedToken.tsx

@@ -1,7 +1,7 @@
-import { AnimatedQR } from '@comps/AnimatedQR'
 import Button from '@comps/Button'
 import useCopy from '@comps/hooks/Copy'
 import { CopyIcon, ShareIcon } from '@comps/Icons'
+import QR from '@comps/QR'
 import Txt from '@comps/Txt'
 import type { TBeforeRemoveEvent, TEncodedTokenPageProps } from '@model/nav'
 import TopNav from '@nav/TopNav'
@@ -112,9 +112,8 @@ export default function EncodedTokenPage({ navigation, route }: TEncodedTokenPag
 						{error.open ?
 							<Txt txt={error.msg} styles={[globals(color).navTxt, styles.errorMsg]} />
 							:
-							<AnimatedQR
+							<QR
 								interval={200}
-								chunkLength={100}
 								size={s(280)}
 								value={value}
 								onError={() => setError({ msg: t('bigQrMsg'), open: true })}