Add QR code to display a wallet.

This commit is contained in:
Daniel Dominguez 2018-07-12 20:14:38 -03:00
parent 5e3275e547
commit 58784ed446
4 changed files with 1480 additions and 1417 deletions

2761
app/package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -11,6 +11,7 @@
"react": "16.2.0",
"react-native": "0.55.3",
"react-native-image-zoom-viewer": "^2.2.5",
"react-native-qrcode": "^0.2.6",
"react-native-vector-icons": "^4.5.0",
"react-native-video": "2.0.0",
"react-navigation": "^1.5.12",

View file

@ -1,6 +1,8 @@
// @flow
import React from 'react';
import { Text, View } from 'react-native';
import { Text, View, Animated } from "react-native";
import QRCode from "react-native-qrcode";
import Colors from '../../styles/colors';
import Address from '../address';
import Button from '../button';
import walletStyle from '../../styles/wallet';
@ -13,6 +15,10 @@ type Props = {
};
class WalletAddress extends React.PureComponent<Props> {
state = {
showQr: false
}
componentWillMount() {
const { checkAddressIsMine, receiveAddress, getNewAddress } = this.props;
if (!receiveAddress) {
@ -22,20 +28,55 @@ class WalletAddress extends React.PureComponent<Props> {
}
}
renderQrAddress() {
const { receiveAddress } = this.props;
return <View>
<QRCode
value={receiveAddress}
size={200}
bgColor={Colors.LbryGreen}
fgColor='white' />
</View>
}
toggleQrView() {
this.setState({showQr: !this.state.showQr});
}
render() {
const { receiveAddress, getNewAddress, gettingNewAddress } = this.props;
const { showQr } = this.state;
const qrButtonText = showQr ? "Hide QR Address" : "Show QR Address";
return (
<View style={walletStyle.card}>
<View>
<Text style={walletStyle.title}>Receive Credits</Text>
<Text style={[walletStyle.text, walletStyle.bottomMarginMedium]}>Use this wallet address to receive credits sent by another user (or yourself).</Text>
<Address address={receiveAddress} style={walletStyle.bottomMarginSmall} />
<Button style={[walletStyle.button, walletStyle.bottomMarginLarge]}
icon={'refresh'}
text={'Get New Address'}
onPress={getNewAddress}
disabled={gettingNewAddress}
/>
<View style={[walletStyle.row, walletStyle.bottomMarginLarge ]}>
<Button style={walletStyle.button}
icon={'refresh'}
text={'Get New Address'}
onPress={getNewAddress}
disabled={gettingNewAddress}
/>
<Button style={walletStyle.button}
icon={'refresh'}
text={qrButtonText}
onPress={() => this.toggleQrView()}
disabled={gettingNewAddress}
/>
</View>
{showQr && <View style={[walletStyle.bottomMarginLarge, walletStyle.qrContainer]}>
<QRCode
value={receiveAddress}
size={200}
bgColor={Colors.LbryGreen}
fgColor='white' />
</View>}
<Text style={walletStyle.smallText}>
You can generate a new address at any time, and any previous addresses will continue to work. Using multiple addresses can be helpful for keeping track of incoming payments from multiple sources.
</Text>

View file

@ -3,46 +3,46 @@ import Colors from './colors';
const walletStyle = StyleSheet.create({
row: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
},
amountRow: {
flexDirection: 'row'
flexDirection: "row"
},
address: {
fontFamily: 'Metropolis-Regular',
fontFamily: "Metropolis-Regular",
borderWidth: 1,
borderStyle: 'dashed',
borderColor: '#cccccc',
backgroundColor: '#f9f9f9',
borderStyle: "dashed",
borderColor: "#cccccc",
backgroundColor: "#f9f9f9",
padding: 8,
width: '85%'
width: "85%"
},
button: {
backgroundColor: Colors.LbryGreen
},
historyList: {
backgroundColor: '#ffffff'
backgroundColor: "#ffffff"
},
card: {
backgroundColor: '#ffffff',
backgroundColor: "#ffffff",
marginTop: 16,
marginLeft: 16,
marginRight: 16,
padding: 16
},
transactionsCard: {
backgroundColor: '#ffffff',
backgroundColor: "#ffffff",
margin: 16
},
title: {
fontFamily: 'Metropolis-Bold',
fontFamily: "Metropolis-Bold",
fontSize: 20,
marginBottom: 24
},
transactionsTitle: {
fontFamily: 'Metropolis-Bold',
fontFamily: "Metropolis-Bold",
fontSize: 20
},
transactionsHeader: {
@ -51,19 +51,19 @@ const walletStyle = StyleSheet.create({
paddingLeft: 16,
paddingRight: 16,
borderBottomWidth: 1,
borderBottomColor: '#eeeeee'
borderBottomColor: "#eeeeee"
},
text: {
fontFamily: 'Metropolis-Regular',
fontFamily: "Metropolis-Regular",
fontSize: 14
},
link: {
color: Colors.LbryGreen,
fontFamily: 'Metropolis-Regular',
fontFamily: "Metropolis-Regular",
fontSize: 14
},
smallText: {
fontFamily: 'Metropolis-Regular',
fontFamily: "Metropolis-Regular",
fontSize: 12
},
balanceCard: {
@ -72,46 +72,46 @@ const walletStyle = StyleSheet.create({
marginRight: 16
},
balanceBackground: {
position: 'absolute',
alignSelf: 'stretch',
width: '100%',
height: '100%',
position: "absolute",
alignSelf: "stretch",
width: "100%",
height: "100%"
},
balanceTitle: {
color: '#ffffff',
fontFamily: 'Metropolis-Bold',
color: "#ffffff",
fontFamily: "Metropolis-Bold",
fontSize: 18,
marginLeft: 16,
marginTop: 16
},
balanceCaption: {
color: '#caedB9',
fontFamily: 'Metropolis-Medium',
color: "#caedB9",
fontFamily: "Metropolis-Medium",
fontSize: 14,
marginLeft: 16,
marginTop: 8,
marginBottom: 96
},
balance: {
color: '#ffffff',
fontFamily: 'Metropolis-Bold',
color: "#ffffff",
fontFamily: "Metropolis-Bold",
fontSize: 36,
marginLeft: 16,
marginBottom: 16
},
infoText: {
color: '#aaaaaa',
fontFamily: 'Metropolis-Regular',
color: "#aaaaaa",
fontFamily: "Metropolis-Regular",
fontSize: 14,
padding: 16,
textAlign: 'center'
textAlign: "center"
},
input: {
fontFamily: 'Metropolis-Regular',
fontFamily: "Metropolis-Regular",
fontSize: 14
},
amountInput: {
alignSelf: 'flex-start',
alignSelf: "flex-start",
width: 100,
fontSize: 16,
letterSpacing: 1
@ -127,8 +127,8 @@ const walletStyle = StyleSheet.create({
margin: 16
},
warningText: {
color: '#ffffff',
fontFamily: 'Metropolis-Regular',
color: "#ffffff",
fontFamily: "Metropolis-Regular",
fontSize: 16,
lineHeight: 30
},
@ -136,7 +136,7 @@ const walletStyle = StyleSheet.create({
marginLeft: 16
},
currency: {
alignSelf: 'flex-start',
alignSelf: "flex-start",
marginTop: 17
},
sendButton: {
@ -150,6 +150,10 @@ const walletStyle = StyleSheet.create({
},
bottomMarginLarge: {
marginBottom: 24
},
qrContainer: {
justifyContent: "center",
alignItems: "center"
}
});