mirror of
https://github.com/BlueWallet/BlueWallet.git
synced 2025-02-22 15:04:50 +01:00
FIX: Export QRCode was too big on iPad
This commit is contained in:
Marcos Rodriguez Vélez
parent
a78abf551a
commit
00845ef838
2 changed files with 28 additions and 48 deletions
|
|
@ -1,20 +1,13 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Dimensions, Platform, ActivityIndicator, View } from 'react-native';
|
||||
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';
|
||||
const QRFast = require('react-native-qrcode');
|
||||
/** @type {AppStorage} */
|
||||
let BlueApp = require('../../BlueApp');
|
||||
let loc = require('../../loc');
|
||||
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 {
|
||||
static navigationOptions = ({ navigation }) => ({
|
||||
|
|
@ -38,11 +31,12 @@ export default class WalletExport extends Component {
|
|||
|
||||
this.state = {
|
||||
isLoading: true,
|
||||
qrCodeHeight: height > width ? height / 2.5 : width / 2,
|
||||
wallet,
|
||||
};
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
componentDidMount() {
|
||||
this.setState({
|
||||
isLoading: false,
|
||||
showQr: false,
|
||||
|
|
@ -54,17 +48,15 @@ export default class WalletExport extends Component {
|
|||
}, 1000);
|
||||
}
|
||||
|
||||
determineSize = () => {
|
||||
if (width > 312) {
|
||||
return width - 48;
|
||||
}
|
||||
return 312;
|
||||
onLayout = () => {
|
||||
const { height } = Dimensions.get('window');
|
||||
this.setState({ qrCodeHeight: height > width ? height / 2.5 : width / 2 });
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.isLoading) {
|
||||
return (
|
||||
<View style={{ flex: 1, paddingTop: 20 }}>
|
||||
<View style={{ flex: 1, paddingTop: 20 }} onLayout={this.onLayout}>
|
||||
<ActivityIndicator />
|
||||
</View>
|
||||
);
|
||||
|
|
@ -82,12 +74,7 @@ export default class WalletExport extends Component {
|
|||
|
||||
return (
|
||||
<SafeBlueArea style={{ flex: 1, paddingTop: 20 }}>
|
||||
{(() => {
|
||||
if (isIpad) {
|
||||
return <BlueSpacing40 />;
|
||||
}
|
||||
})()}
|
||||
<BlueCard style={{ alignItems: 'center', flex: 1 }}>
|
||||
<View style={{ alignItems: 'center', flex: 1, justifyContent: 'center', paddingHorizontal: 0 }} onLayout={this.onLayout}>
|
||||
<View>
|
||||
<BlueText>{this.state.wallet.typeReadable}</BlueText>
|
||||
</View>
|
||||
|
|
@ -101,14 +88,14 @@ export default class WalletExport extends Component {
|
|||
);
|
||||
}
|
||||
})()}
|
||||
|
||||
<BlueSpacing20 />
|
||||
{(() => {
|
||||
if (this.state.showQr) {
|
||||
if (Platform.OS === 'ios' || this.state.wallet.getSecret().length < 54) {
|
||||
return (
|
||||
<QRSlow
|
||||
content={this.state.wallet.getSecret()}
|
||||
size={this.determineSize()}
|
||||
size={this.state.qrCodeHeight}
|
||||
color={BlueApp.settings.foregroundColor}
|
||||
backgroundColor={BlueApp.settings.brandingColor}
|
||||
logo={require('../../img/qr-code.png')}
|
||||
|
|
@ -119,7 +106,7 @@ export default class WalletExport extends Component {
|
|||
return (
|
||||
<QRFast
|
||||
value={this.state.wallet.getSecret()}
|
||||
size={this.determineSize()}
|
||||
size={this.state.qrCodeHeight}
|
||||
fgColor={BlueApp.settings.brandingColor}
|
||||
bgColor={BlueApp.settings.foregroundColor}
|
||||
/>
|
||||
|
|
@ -133,9 +120,10 @@ export default class WalletExport extends Component {
|
|||
);
|
||||
}
|
||||
})()}
|
||||
<BlueSpacing20 />
|
||||
|
||||
<BlueText style={{ marginVertical: 8 }}>{this.state.wallet.getSecret()}</BlueText>
|
||||
</BlueCard>
|
||||
<BlueText style={{ alignItems: 'center', paddingHorizontal: 8 }}>{this.state.wallet.getSecret()}</BlueText>
|
||||
</View>
|
||||
</SafeBlueArea>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,13 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Dimensions, Platform, ActivityIndicator, View, Clipboard, Animated, TouchableOpacity } from 'react-native';
|
||||
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';
|
||||
const QRFast = require('react-native-qrcode');
|
||||
/** @type {AppStorage} */
|
||||
let BlueApp = require('../../BlueApp');
|
||||
let loc = require('../../loc');
|
||||
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 {
|
||||
static navigationOptions = ({ navigation }) => ({
|
||||
|
|
@ -41,6 +34,7 @@ export default class WalletXpub extends Component {
|
|||
wallet,
|
||||
xpub: wallet.getXpub(),
|
||||
xpubText: wallet.getXpub(),
|
||||
qrCodeHeight: height > width ? height / 2.5 : width / 2,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -55,13 +49,6 @@ export default class WalletXpub extends Component {
|
|||
}, 1000);
|
||||
}
|
||||
|
||||
determineSize = () => {
|
||||
if (width > 312) {
|
||||
return width - 48;
|
||||
}
|
||||
return 312;
|
||||
};
|
||||
|
||||
copyToClipboard = () => {
|
||||
this.setState({ xpubText: loc.wallets.xpub.copiedToClipboard }, () => {
|
||||
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() {
|
||||
if (this.state.isLoading) {
|
||||
return (
|
||||
|
|
@ -80,11 +72,11 @@ export default class WalletXpub extends Component {
|
|||
|
||||
return (
|
||||
<SafeBlueArea style={{ flex: 1, paddingTop: 20 }}>
|
||||
{isIpad && <BlueSpacing40 />}
|
||||
<BlueCard style={{ alignItems: 'center', flex: 1 }}>
|
||||
<View style={{ alignItems: 'center', flex: 1, justifyContent: 'center' }} onLayout={this.onLayout}>
|
||||
<View>
|
||||
<BlueText>{this.state.wallet.typeReadable}</BlueText>
|
||||
</View>
|
||||
<BlueSpacing20 />
|
||||
|
||||
{(() => {
|
||||
if (this.state.showQr) {
|
||||
|
|
@ -92,10 +84,10 @@ export default class WalletXpub extends Component {
|
|||
return (
|
||||
<QRSlow
|
||||
content={this.state.xpub}
|
||||
size={this.determineSize()}
|
||||
color={BlueApp.settings.foregroundColor}
|
||||
backgroundColor={BlueApp.settings.brandingColor}
|
||||
logo={require('../../img/qr-code.png')}
|
||||
size={this.state.qrCodeHeight}
|
||||
ecl={'Q'}
|
||||
/>
|
||||
);
|
||||
|
|
@ -103,9 +95,9 @@ export default class WalletXpub extends Component {
|
|||
return (
|
||||
<QRFast
|
||||
value={this.state.xpub}
|
||||
size={this.determineSize()}
|
||||
fgColor={BlueApp.settings.brandingColor}
|
||||
bgColor={BlueApp.settings.foregroundColor}
|
||||
size={this.state.qrCodeHeight}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -117,13 +109,13 @@ export default class WalletXpub extends Component {
|
|||
);
|
||||
}
|
||||
})()}
|
||||
|
||||
<BlueSpacing20 />
|
||||
<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}
|
||||
</Animated.Text>
|
||||
</TouchableOpacity>
|
||||
</BlueCard>
|
||||
</View>
|
||||
</SafeBlueArea>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue