import { Ionicons } from '@expo/vector-icons'; import React, { useRef, useState } from 'react'; import { Animated, Easing, RefreshControl, ScrollView, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; interface Transaction { id: string; type: 'received' | 'sent' | 'smart-contract' | 'minted'; title: string; subtitle: string; amount: string; currency: string; date: string; icon: string; iconColor: string; } const transactions: Transaction[] = [ { id: '1', type: 'received', title: 'Received', subtitle: 'From 0x1985...5c87', amount: '+$10.42', currency: '1.369 UNI', date: 'YESTERDAY', icon: 'arrow-down-circle', iconColor: '#FF69B4', }, { id: '2', type: 'received', title: 'Received', subtitle: 'From 0x20fe...3b7a', amount: '+$18.49', currency: '0.00719 ETH', date: 'YESTERDAY', icon: 'arrow-down-circle', iconColor: '#4169E1', }, { id: '3', type: 'received', title: 'Received', subtitle: 'From 0x33f3...aa70', amount: '+$50.00', currency: '50 USDC', date: 'JUN 11, 2025', icon: 'arrow-down-circle', iconColor: '#4169E1', }, { id: '4', type: 'smart-contract', title: 'Smart contract', subtitle: 'Executed', amount: '', currency: '0.0.19332 ETH', date: 'MAY 28, 2025', icon: 'document-text', iconColor: '#666666', }, { id: '5', type: 'minted', title: 'Minted', subtitle: 'NFT Collection', amount: '', currency: '', date: 'MAY 28, 2025', icon: 'image', iconColor: '#4169E1', }, ]; // 8 different color groups, each with 5 shades for smooth gradients const colorGradients = [ // Purple → Pink ["#b983d6", "#a65dc2", "#944bb4", "#9d3ea2", "#c03a92"], // Pink → Orange ["#d6458d", "#ec5e73", "#f77a52", "#f99145", "#fbad5c"], // Orange → Yellow ["#fbad5c", "#fcb75e", "#fcca60", "#fadb74", "#f8ea9a"], // Yellow → Green ["#e7f196", "#c6e47f", "#99d472", "#6bc36c", "#42b067"], // Green → Teal ["#42b067", "#3a9e83", "#3a8e8e", "#3e7c91", "#476998"], // Teal → Blue ["#476998", "#4a5fa5", "#5c59b5", "#734fbf", "#8942c2"], // Blue → Red ["#8942c2", "#9b3ca9", "#b3398c", "#c73f6b", "#d9484f"], ["#b983d6", "#a65dc2", "#944bb4", "#9d3ea2", "#c03a92"], // Pink → Orange ["#d6458d", "#ec5e73", "#f77a52", "#f99145", "#fbad5c"], // Orange → Yellow ["#fbad5c", "#fcb75e", "#fcca60", "#fadb74", "#f8ea9a"], // Yellow → Green ["#e7f196", "#c6e47f", "#99d472", "#6bc36c", "#42b067"], // Green → Teal ["#42b067", "#3a9e83", "#3a8e8e", "#3e7c91", "#476998"], // Teal → Blue ["#476998", "#4a5fa5", "#5c59b5", "#734fbf", "#8942c2"], // Blue → Red ["#8942c2", "#9b3ca9", "#b3398c", "#c73f6b", "#d9484f"], ["#b983d6", "#a65dc2", "#944bb4", "#9d3ea2", "#c03a92"], // Pink → Orange ["#d6458d", "#ec5e73", "#f77a52", "#f99145", "#fbad5c"], // Orange → Yellow ["#fbad5c", "#fcb75e", "#fcca60", "#fadb74", "#f8ea9a"], // Yellow → Green ["#e7f196", "#c6e47f", "#99d472", "#6bc36c", "#42b067"], // Green → Teal ["#42b067", "#3a9e83", "#3a8e8e", "#3e7c91", "#476998"], // Teal → Blue ["#476998", "#4a5fa5", "#5c59b5", "#734fbf", "#8942c2"], // Blue → Red ["#8942c2", "#9b3ca9", "#b3398c", "#c73f6b", "#d9484f"], ]; // Create seamless flowing color blocks const colorBlocks = colorGradients.flat(); // Animation configuration constants const ANIMATION_CONFIG = { REFRESH_DURATION: 3000, // Total refresh duration in ms COLOR_MOVE_DURATION: 1400, // Color blocks movement duration in ms HEIGHT_EXPAND_DURATION: 200, // Height expansion duration in ms HEIGHT_COLLAPSE_DURATION: 200, // Height collapse duration in ms PULSE_DURATION: 60, // Balance pulse duration in ms EXPANDED_HEIGHT: 60, // Height when expanded COLLAPSED_HEIGHT: 4, // Height when collapsed MOVE_DISTANCE: 2600, // Distance for color movement }; interface WalletRefreshProps { onBack?: () => void; } export function WalletRefresh({ onBack }: WalletRefreshProps) { const insets = useSafeAreaInsets(); const [refreshing, setRefreshing] = useState(false); const gradientMoveAnimation = useRef(new Animated.Value(0)).current; const pulseAnimation = useRef(new Animated.Value(1)).current; const gradientOpacityAnimation = useRef(new Animated.Value(0)).current; const gradientHeightAnimation = useRef(new Animated.Value(0)).current; const stopAnimationTimeout = useRef(null); const onRefresh = React.useCallback(() => { if (stopAnimationTimeout.current) { clearTimeout(stopAnimationTimeout.current); stopAnimationTimeout.current = null; } setRefreshing(true); // Start both height and opacity animations simultaneously for smooth appearance Animated.parallel([ Animated.timing(gradientHeightAnimation, { toValue: ANIMATION_CONFIG.EXPANDED_HEIGHT, duration: ANIMATION_CONFIG.HEIGHT_EXPAND_DURATION, useNativeDriver: false, easing: Easing.out(Easing.quad), // Smooth expand }), Animated.timing(gradientOpacityAnimation, { toValue: 1, duration: ANIMATION_CONFIG.HEIGHT_EXPAND_DURATION, useNativeDriver: false, easing: Easing.out(Easing.quad), // Smooth fade in }), ]).start(); // Start horizontal color blocks movement animation (endless loop) - moving to the right gradientMoveAnimation.setValue(0); const startAnimation = () => { Animated.timing(gradientMoveAnimation, { toValue: 1, duration: ANIMATION_CONFIG.COLOR_MOVE_DURATION, useNativeDriver: true, easing: Easing.linear, // No easing - constant speed }).start(({ finished }) => { if (finished) { gradientMoveAnimation.setValue(0); startAnimation(); // Restart for endless loop - continues even during exit } }); }; startAnimation(); // Start pulse animation Animated.loop( Animated.sequence([ Animated.timing(pulseAnimation, { toValue: 1.05, duration: ANIMATION_CONFIG.PULSE_DURATION, useNativeDriver: true, }), Animated.timing(pulseAnimation, { toValue: 1, duration: ANIMATION_CONFIG.PULSE_DURATION, useNativeDriver: true, }), ]), { iterations: 3 } ).start(); // After refresh duration, start exit animation setTimeout(() => { setRefreshing(false); // Collapse both height and opacity simultaneously for smooth exit Animated.parallel([ Animated.timing(gradientHeightAnimation, { toValue: 0, duration: ANIMATION_CONFIG.HEIGHT_COLLAPSE_DURATION, useNativeDriver: false, easing: Easing.in(Easing.quad), // Smooth collapse }), Animated.timing(gradientOpacityAnimation, { toValue: 0, duration: ANIMATION_CONFIG.HEIGHT_COLLAPSE_DURATION, useNativeDriver: false, easing: Easing.in(Easing.quad), // Smooth fade out }), ]).start(() => { // Only stop movement after both animations complete stopAnimationTimeout.current = setTimeout(() => { gradientMoveAnimation.stopAnimation(); }, 2000); }); }, ANIMATION_CONFIG.REFRESH_DURATION); }, [gradientMoveAnimation, pulseAnimation, gradientOpacityAnimation, gradientHeightAnimation]); const renderTransaction = (transaction: Transaction, index: number) => ( {transaction.title} {transaction.subtitle} {transaction.amount && ( {transaction.amount} )} {transaction.currency} ); const groupedTransactions = transactions.reduce((acc, transaction) => { if (!acc[transaction.date]) { acc[transaction.date] = []; } acc[transaction.date].push(transaction); return acc; }, {} as Record); return ( {/* Header */} Wallet } showsVerticalScrollIndicator={false} > {/* Balance Section */} $96,050 {/* Action Buttons */} Buy Trade Send Request {/* Tab Section */} Overview Activity {/* Animated Color Blocks Bar - Only visible during refresh */} {/* Render color blocks twice for seamless loop */} {[...colorBlocks, ...colorBlocks].map((color, index) => ( ))} {/* Transactions */} {Object.entries(groupedTransactions).map(([date, dateTransactions]) => ( {date} {dateTransactions.map((transaction, index) => renderTransaction(transaction, index))} ))} ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#FFFFFF', }, header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 16, paddingBottom: 16, }, headerLeft: { flexDirection: 'row', alignItems: 'center', }, headerButton: { marginRight: 12, }, walletIcon: { width: 32, height: 32, borderRadius: 8, backgroundColor: '#000000', justifyContent: 'center', alignItems: 'center', }, headerTitle: { fontSize: 24, fontWeight: '600', color: '#000000', }, searchButton: { padding: 8, }, scrollView: { flex: 1, }, balanceSection: { paddingHorizontal: 16, }, balance: { fontSize: 42, color: '#000000', }, actionsContainer: { flexDirection: 'row', justifyContent: 'space-around', paddingHorizontal: 16, paddingVertical: 16, marginTop: 16, gap: 2, }, actionButton: { alignItems: 'center', flex: 1, borderWidth: 1, borderColor: '#00000020', borderRadius: 16, padding: 16, }, actionText: { fontSize: 14, color: '#000000', marginTop: 4, fontWeight: '500', }, tabSection: { flexDirection: 'row', paddingHorizontal: 16, paddingVertical: 16, }, tab: { marginRight: 32, paddingBottom: 8, }, activeTab: { borderBottomWidth: 2, borderBottomColor: '#007AFF', }, tabText: { fontSize: 14, fontWeight: '500', color: '#007AFF', }, tabTextInactive: { color: '#8E8E93', }, gradientContainer: { marginBottom: 20, }, gradientWrapper: { overflow: 'hidden', }, colorBlocksContainer: { flexDirection: 'row', height: '100%', width: 1600, // Wide enough for all color blocks and smooth animation }, colorBlock: { width: 20, // Each color block width height: 50, }, transactionsContainer: { paddingHorizontal: 16, paddingBottom: 100, }, dateGroup: { marginBottom: 24, }, dateHeader: { fontSize: 14, fontWeight: '600', color: '#8E8E93', marginBottom: 16, textTransform: 'uppercase', }, transactionItem: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 12, }, transactionLeft: { flexDirection: 'row', alignItems: 'center', flex: 1, }, transactionIcon: { width: 44, height: 44, borderRadius: 22, justifyContent: 'center', alignItems: 'center', marginRight: 12, position: 'relative', }, verificationBadge: { position: 'absolute', bottom: -2, right: -2, backgroundColor: '#FFFFFF', borderRadius: 8, padding: 1, }, transactionInfo: { flex: 1, }, transactionTitle: { fontSize: 16, fontWeight: '500', color: '#000000', marginBottom: 2, }, transactionSubtitle: { fontSize: 14, color: '#8E8E93', }, transactionRight: { alignItems: 'flex-end', }, transactionAmount: { fontSize: 16, fontWeight: '600', marginBottom: 2, }, transactionCurrency: { fontSize: 14, color: '#8E8E93', }, });

Coinbase