mirrors/BlueWallet
1
0
Fork 0
mirror of https://github.com/BlueWallet/BlueWallet.git synced 2025-02-23 07:15:35 +01:00
Code Issues Projects Releases Packages Wiki Activity

FIX: Export QRCode was too big on iPad

Browse source
This commit is contained in:
Marcos Rodriguez Vélez 2019-01-06 14:28:02 -05:00
parent a78abf551a
commit 00845ef838
2 changed files with 28 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
screen/wallets/export.js
View file

@ -1,20 +1,13 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Dimensions, Platform, ActivityIndicator, View } from 'react-native'; import { Dimensions, Platform, ActivityIndicator, View } from 'react-native';
import { QRCode as QRSlow } from 'react-native-custom-qr-codes'; import { QRCode as QRSlow } from 'react-native-custom-qr-codes';
import { BlueSpacing40, SafeBlueArea, BlueNavigationStyle, BlueCard, BlueText } from '../../BlueComponents'; import { BlueSpacing20, SafeBlueArea, BlueNavigationStyle, BlueText } from '../../BlueComponents';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
const QRFast = require('react-native-qrcode'); const QRFast = require('react-native-qrcode');
/** @type {AppStorage} */ /** @type {AppStorage} */
let BlueApp = require('../../BlueApp'); let BlueApp = require('../../BlueApp');
let loc = require('../../loc'); let loc = require('../../loc');
const { height, width } = Dimensions.get('window'); const { height, width } = Dimensions.get('window');
const aspectRatio = height / width;
let isIpad;
if (aspectRatio > 1.6) {
isIpad = false;
} else {
isIpad = true;
}
export default class WalletExport extends Component { export default class WalletExport extends Component {
static navigationOptions = ({ navigation }) => ({ static navigationOptions = ({ navigation }) => ({
@ -38,11 +31,12 @@ export default class WalletExport extends Component {
this.state = { this.state = {
isLoading: true, isLoading: true,
qrCodeHeight: height > width ? height / 2.5 : width / 2,
wallet, wallet,
}; };
} }
async componentDidMount() { componentDidMount() {
this.setState({ this.setState({
isLoading: false, isLoading: false,
showQr: false, showQr: false,
@ -54,17 +48,15 @@ export default class WalletExport extends Component {
}, 1000); }, 1000);
} }
determineSize = () => { onLayout = () => {
if (width > 312) { const { height } = Dimensions.get('window');
return width - 48; this.setState({ qrCodeHeight: height > width ? height / 2.5 : width / 2 });
}
return 312;
}; };
render() { render() {
if (this.state.isLoading) { if (this.state.isLoading) {
return ( return (
<View style={{ flex: 1, paddingTop: 20 }}> <View style={{ flex: 1, paddingTop: 20 }} onLayout={this.onLayout}>
<ActivityIndicator /> <ActivityIndicator />
</View> </View>
); );
@ -82,12 +74,7 @@ export default class WalletExport extends Component {
return ( return (
<SafeBlueArea style={{ flex: 1, paddingTop: 20 }}> <SafeBlueArea style={{ flex: 1, paddingTop: 20 }}>
{(() => { <View style={{ alignItems: 'center', flex: 1, justifyContent: 'center', paddingHorizontal: 0 }} onLayout={this.onLayout}>
if (isIpad) {
return <BlueSpacing40 />;
}
})()}
<BlueCard style={{ alignItems: 'center', flex: 1 }}>
<View> <View>
<BlueText>{this.state.wallet.typeReadable}</BlueText> <BlueText>{this.state.wallet.typeReadable}</BlueText>
</View> </View>
@ -101,14 +88,14 @@ export default class WalletExport extends Component {
); );
} }
})()} })()}
<BlueSpacing20 />
{(() => { {(() => {
if (this.state.showQr) { if (this.state.showQr) {
if (Platform.OS === 'ios' || this.state.wallet.getSecret().length < 54) { if (Platform.OS === 'ios' || this.state.wallet.getSecret().length < 54) {
return ( return (
<QRSlow <QRSlow
content={this.state.wallet.getSecret()} content={this.state.wallet.getSecret()}
size={this.determineSize()} size={this.state.qrCodeHeight}
color={BlueApp.settings.foregroundColor} color={BlueApp.settings.foregroundColor}
backgroundColor={BlueApp.settings.brandingColor} backgroundColor={BlueApp.settings.brandingColor}
logo={require('../../img/qr-code.png')} logo={require('../../img/qr-code.png')}
@ -119,7 +106,7 @@ export default class WalletExport extends Component {
return ( return (
<QRFast <QRFast
value={this.state.wallet.getSecret()} value={this.state.wallet.getSecret()}
size={this.determineSize()} size={this.state.qrCodeHeight}
fgColor={BlueApp.settings.brandingColor} fgColor={BlueApp.settings.brandingColor}
bgColor={BlueApp.settings.foregroundColor} bgColor={BlueApp.settings.foregroundColor}
/> />
@ -133,9 +120,10 @@ export default class WalletExport extends Component {
); );
} }
})()} })()}
<BlueSpacing20 />
<BlueText style={{ marginVertical: 8 }}>{this.state.wallet.getSecret()}</BlueText> <BlueText style={{ alignItems: 'center', paddingHorizontal: 8 }}>{this.state.wallet.getSecret()}</BlueText>
</BlueCard> </View>
</SafeBlueArea> </SafeBlueArea>
); );
} }

36
screen/wallets/xpub.js
View file

@ -1,20 +1,13 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Dimensions, Platform, ActivityIndicator, View, Clipboard, Animated, TouchableOpacity } from 'react-native'; import { Dimensions, Platform, ActivityIndicator, View, Clipboard, Animated, TouchableOpacity } from 'react-native';
import { QRCode as QRSlow } from 'react-native-custom-qr-codes'; import { QRCode as QRSlow } from 'react-native-custom-qr-codes';
import { BlueSpacing40, SafeBlueArea, BlueCard, BlueText, BlueNavigationStyle } from '../../BlueComponents'; import { BlueSpacing20, SafeBlueArea, BlueText, BlueNavigationStyle } from '../../BlueComponents';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
const QRFast = require('react-native-qrcode'); const QRFast = require('react-native-qrcode');
/** @type {AppStorage} */ /** @type {AppStorage} */
let BlueApp = require('../../BlueApp'); let BlueApp = require('../../BlueApp');
let loc = require('../../loc'); let loc = require('../../loc');
const { height, width } = Dimensions.get('window'); const { height, width } = Dimensions.get('window');
const aspectRatio = height / width;
let isIpad;
if (aspectRatio > 1.6) {
isIpad = false;
} else {
isIpad = true;
}
export default class WalletXpub extends Component { export default class WalletXpub extends Component {
static navigationOptions = ({ navigation }) => ({ static navigationOptions = ({ navigation }) => ({
@ -41,6 +34,7 @@ export default class WalletXpub extends Component {
wallet, wallet,
xpub: wallet.getXpub(), xpub: wallet.getXpub(),
xpubText: wallet.getXpub(), xpubText: wallet.getXpub(),
qrCodeHeight: height > width ? height / 2.5 : width / 2,
}; };
} }
@ -55,13 +49,6 @@ export default class WalletXpub extends Component {
}, 1000); }, 1000);
} }
determineSize = () => {
if (width > 312) {
return width - 48;
}
return 312;
};
copyToClipboard = () => { copyToClipboard = () => {
this.setState({ xpubText: loc.wallets.xpub.copiedToClipboard }, () => { this.setState({ xpubText: loc.wallets.xpub.copiedToClipboard }, () => {
Clipboard.setString(this.state.xpub); Clipboard.setString(this.state.xpub);
@ -69,6 +56,11 @@ export default class WalletXpub extends Component {
}); });
}; };
onLayout = () => {
const { height } = Dimensions.get('window');
this.setState({ qrCodeHeight: height > width ? height / 2.5 : width / 2 });
};
render() { render() {
if (this.state.isLoading) { if (this.state.isLoading) {
return ( return (
@ -80,11 +72,11 @@ export default class WalletXpub extends Component {
return ( return (
<SafeBlueArea style={{ flex: 1, paddingTop: 20 }}> <SafeBlueArea style={{ flex: 1, paddingTop: 20 }}>
{isIpad && <BlueSpacing40 />} <View style={{ alignItems: 'center', flex: 1, justifyContent: 'center' }} onLayout={this.onLayout}>
<BlueCard style={{ alignItems: 'center', flex: 1 }}>
<View> <View>
<BlueText>{this.state.wallet.typeReadable}</BlueText> <BlueText>{this.state.wallet.typeReadable}</BlueText>
</View> </View>
<BlueSpacing20 />
{(() => { {(() => {
if (this.state.showQr) { if (this.state.showQr) {
@ -92,10 +84,10 @@ export default class WalletXpub extends Component {
return ( return (
<QRSlow <QRSlow
content={this.state.xpub} content={this.state.xpub}
size={this.determineSize()}
color={BlueApp.settings.foregroundColor} color={BlueApp.settings.foregroundColor}
backgroundColor={BlueApp.settings.brandingColor} backgroundColor={BlueApp.settings.brandingColor}
logo={require('../../img/qr-code.png')} logo={require('../../img/qr-code.png')}
size={this.state.qrCodeHeight}
ecl={'Q'} ecl={'Q'}
/> />
); );
@ -103,9 +95,9 @@ export default class WalletXpub extends Component {
return ( return (
<QRFast <QRFast
value={this.state.xpub} value={this.state.xpub}
size={this.determineSize()}
fgColor={BlueApp.settings.brandingColor} fgColor={BlueApp.settings.brandingColor}
bgColor={BlueApp.settings.foregroundColor} bgColor={BlueApp.settings.foregroundColor}
size={this.state.qrCodeHeight}
/> />
); );
} }
@ -117,13 +109,13 @@ export default class WalletXpub extends Component {
); );
} }
})()} })()}
<BlueSpacing20 />
<TouchableOpacity onPress={this.copyToClipboard}> <TouchableOpacity onPress={this.copyToClipboard}>
<Animated.Text style={{ marginVertical: 8, textAlign: 'center' }} numberOfLines={0}> <Animated.Text style={{ paddingHorizontal: 8, textAlign: 'center' }} numberOfLines={0}>
{this.state.xpubText} {this.state.xpubText}
</Animated.Text> </Animated.Text>
</TouchableOpacity> </TouchableOpacity>
</BlueCard> </View>
</SafeBlueArea> </SafeBlueArea>
); );
} }