Ur codes

package.json

@@ -40,6 +40,7 @@
 	},
 	"dependencies": {
 		"@cashu/cashu-ts": "^0.9.0",
+		"@gandlaf21/bc-ur": "^1.1.12",
 		"@react-native-community/netinfo": "9.3.10",
 		"@react-navigation/core": "^6.4.10",
 		"@react-navigation/native": "^6.1.9",

src/components/AnimatedQR.tsx

@@ -0,0 +1,62 @@
+import { UR, UREncoder } from '@gandlaf21/bc-ur'
+import { mainColors } from '@src/styles'
+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;
+	interval: number;
+	chunkLength: number;
+	size?: number; // defaults to 128
+	onError: ()=>void
+
+}
+
+export function AnimatedQR({
+	value,
+	interval,
+	chunkLength,
+	size,
+	onError
+
+}: AnimatedQR) {
+	const [part, setPart] = useState<string>('')
+
+	const firstSeqNum = 0
+	const ur = UR.fromBuffer(Buffer.from(value))
+	const encoder = useRef<UREncoder>(new UREncoder(ur, chunkLength, firstSeqNum))
+
+
+	useEffect(() => {
+		let timer: NodeJS.Timeout
+		if (value) {
+			timer = setInterval(() => {
+				setPart(encoder.current.nextPart())
+				console.log(part)
+			}, interval)
+		}
+		return () => {
+			if (timer) {
+				clearInterval(timer)
+			}
+		}
+	}, [value, chunkLength, interval, part])
+	return (
+		<>
+		<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

@@ -4,30 +4,34 @@
 import { mainColors } from '@src/styles'
 import { useTranslation } from 'react-i18next'
 import { TouchableOpacity, View } from 'react-native'
 import QRCode from 'react-native-qrcode-svg'
 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

@@ -113,6 +113,7 @@ export default function EncodedTokenPage({ navigation, route }: TEncodedTokenPag
 							<Txt txt={error.msg} styles={[globals(color).navTxt, styles.errorMsg]} />
 							:
 							<QR
+								interval={200}
 								size={s(280)}
 								value={value}
 								onError={() => setError({ msg: t('bigQrMsg'), open: true })}