mirror of
https://github.com/pezkuwichain/pezkuwi-mobile-app.git
synced 2026-05-31 22:41:05 +00:00
auto-commit for bed65b0f-c949-4d15-b953-0bf08c7c9e55
This commit is contained in:
emergent-agent-e1
@@ -0,0 +1,225 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
Modal,
|
||||
TouchableOpacity,
|
||||
Image,
|
||||
Alert,
|
||||
Share,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import QRCode from 'react-native-qrcode-svg';
|
||||
import * as Clipboard from 'expo-clipboard';
|
||||
import Colors from '../constants/colors';
|
||||
import { Typography, Spacing, BorderRadius, Shadow } from '../constants/theme';
|
||||
|
||||
interface ReceiveModalProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
token: {
|
||||
symbol: string;
|
||||
name: string;
|
||||
icon: any;
|
||||
color: string;
|
||||
};
|
||||
}
|
||||
|
||||
export default function ReceiveModal({ visible, onClose, token }: ReceiveModalProps) {
|
||||
// Mock wallet address - in production, this would come from user's wallet
|
||||
const walletAddress = 'pezkuwi1a2b3c4d5e6f7g8h9i0j';
|
||||
const network = 'Optimism';
|
||||
|
||||
const handleCopyAddress = async () => {
|
||||
await Clipboard.setStringAsync(walletAddress);
|
||||
Alert.alert('Copied!', 'Wallet address copied to clipboard');
|
||||
};
|
||||
|
||||
const handleShareAddress = async () => {
|
||||
try {
|
||||
await Share.share({
|
||||
message: `My ${token.symbol} wallet address:\n${walletAddress}\n\nNetwork: ${network}`,
|
||||
title: `${token.symbol} Wallet Address`,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error sharing:', error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
transparent
|
||||
animationType="slide"
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
<View style={styles.overlay}>
|
||||
<View style={styles.modalContainer}>
|
||||
{/* Close Button */}
|
||||
<TouchableOpacity style={styles.closeButton} onPress={onClose}>
|
||||
<Ionicons name="close" size={28} color={Colors.textDark} />
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Token Icon */}
|
||||
<Image source={token.icon} style={styles.tokenIcon} />
|
||||
|
||||
{/* Title */}
|
||||
<Text style={styles.title}>Receive {token.symbol}</Text>
|
||||
|
||||
{/* QR Code Card */}
|
||||
<View style={styles.qrCard}>
|
||||
<QRCode value={walletAddress} size={200} />
|
||||
</View>
|
||||
|
||||
{/* Wallet Address */}
|
||||
<TouchableOpacity
|
||||
style={styles.addressContainer}
|
||||
onPress={handleCopyAddress}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text style={styles.addressText}>{walletAddress}</Text>
|
||||
<Ionicons name="copy-outline" size={20} color={Colors.primary} />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.tapToCopy}>Tap to copy</Text>
|
||||
|
||||
{/* Network Badge */}
|
||||
<View style={styles.networkBadge}>
|
||||
<Ionicons name="globe-outline" size={20} color="#007AFF" />
|
||||
<Text style={styles.networkText}>{network} Network</Text>
|
||||
</View>
|
||||
|
||||
{/* Share Button */}
|
||||
<TouchableOpacity style={styles.shareButton} onPress={handleShareAddress}>
|
||||
<Ionicons name="share-outline" size={20} color={Colors.textDark} />
|
||||
<Text style={styles.shareButtonText}>Share Address</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Warning Box */}
|
||||
<View style={styles.warningBox}>
|
||||
<Ionicons name="warning-outline" size={24} color="#F59E0B" />
|
||||
<Text style={styles.warningText}>
|
||||
Only send {token.symbol} to this address on {network} network
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
overlay: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: Spacing.lg,
|
||||
},
|
||||
modalContainer: {
|
||||
width: '100%',
|
||||
maxWidth: 400,
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: BorderRadius.xl,
|
||||
padding: Spacing.xl,
|
||||
...Shadow.medium,
|
||||
},
|
||||
closeButton: {
|
||||
position: 'absolute',
|
||||
top: Spacing.md,
|
||||
right: Spacing.md,
|
||||
zIndex: 1,
|
||||
},
|
||||
tokenIcon: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
alignSelf: 'center',
|
||||
marginTop: Spacing.md,
|
||||
},
|
||||
title: {
|
||||
fontSize: Typography.sizes.xxl,
|
||||
fontWeight: Typography.weights.bold,
|
||||
color: Colors.textDark,
|
||||
textAlign: 'center',
|
||||
marginTop: Spacing.sm,
|
||||
marginBottom: Spacing.lg,
|
||||
},
|
||||
qrCard: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: BorderRadius.lg,
|
||||
padding: Spacing.lg,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
...Shadow.small,
|
||||
alignSelf: 'center',
|
||||
},
|
||||
addressContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: Colors.background,
|
||||
borderRadius: BorderRadius.md,
|
||||
paddingHorizontal: Spacing.md,
|
||||
paddingVertical: Spacing.sm,
|
||||
marginTop: Spacing.lg,
|
||||
},
|
||||
addressText: {
|
||||
fontSize: Typography.sizes.sm,
|
||||
fontFamily: 'monospace',
|
||||
color: Colors.textDark,
|
||||
marginRight: Spacing.sm,
|
||||
},
|
||||
tapToCopy: {
|
||||
fontSize: Typography.sizes.xs,
|
||||
color: Colors.textLight,
|
||||
textAlign: 'center',
|
||||
marginTop: Spacing.xs,
|
||||
},
|
||||
networkBadge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#E3F2FD',
|
||||
borderRadius: BorderRadius.md,
|
||||
paddingHorizontal: Spacing.md,
|
||||
paddingVertical: Spacing.sm,
|
||||
marginTop: Spacing.lg,
|
||||
alignSelf: 'center',
|
||||
},
|
||||
networkText: {
|
||||
fontSize: Typography.sizes.md,
|
||||
fontWeight: Typography.weights.semibold,
|
||||
color: '#007AFF',
|
||||
marginLeft: Spacing.xs,
|
||||
},
|
||||
shareButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: Colors.background,
|
||||
borderRadius: BorderRadius.md,
|
||||
paddingVertical: Spacing.md,
|
||||
marginTop: Spacing.lg,
|
||||
},
|
||||
shareButtonText: {
|
||||
fontSize: Typography.sizes.md,
|
||||
fontWeight: Typography.weights.semibold,
|
||||
color: Colors.textDark,
|
||||
marginLeft: Spacing.sm,
|
||||
},
|
||||
warningBox: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#FEF3C7',
|
||||
borderRadius: BorderRadius.md,
|
||||
padding: Spacing.md,
|
||||
marginTop: Spacing.lg,
|
||||
},
|
||||
warningText: {
|
||||
flex: 1,
|
||||
fontSize: Typography.sizes.sm,
|
||||
color: '#92400E',
|
||||
marginLeft: Spacing.sm,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user