Add QR code to display a wallet.
This commit is contained in:
parent
5e3275e547
commit
58784ed446
4 changed files with 1480 additions and 1417 deletions
2761
app/package-lock.json
generated
2761
app/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
});
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue