Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sending: update error style #1365

Merged
merged 1 commit into from
Mar 16, 2023
+113 −148
Merged

Sending: update error style #1365

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions assets/images/SVG/Error.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
176 changes: 70 additions & 106 deletions views/SendingLightning.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
import * as React from 'react';
import { Image, ScrollView, StyleSheet, Text, View } from 'react-native';
import { Image, StyleSheet, Text, View } from 'react-native';
import { inject, observer } from 'mobx-react';
import LnurlPaySuccess from './LnurlPay/Success';

import Button from './../components/Button';
import CopyButton from './../components/CopyButton';
import LightningIndicator from './../components/LightningIndicator';
import PaidIndicator from './../components/PaidIndicator';
import Button from '../components/Button';
import CopyButton from '../components/CopyButton';
import LightningIndicator from '../components/LightningIndicator';
import PaidIndicator from '../components/PaidIndicator';

import TransactionsStore from './../stores/TransactionsStore';
import LnurlPayStore from './../stores/LnurlPayStore';
import TransactionsStore from '../stores/TransactionsStore';
import LnurlPayStore from '../stores/LnurlPayStore';

import { localeString } from './../utils/LocaleUtils';
import { themeColor } from './../utils/ThemeUtils';
import { localeString } from '../utils/LocaleUtils';
import { themeColor } from '../utils/ThemeUtils';

import Success from './../assets/images/GIF/Success.gif';
import WordLogo from './../assets/images/SVG/Word Logo.svg';
import Error from '../assets/images/SVG/Error.svg';
import Success from '../assets/images/GIF/Success.gif';
import WordLogo from '../assets/images/SVG/Word Logo.svg';

interface SendingLightningProps {
navigation: any;
Expand All @@ -29,26 +30,6 @@ export default class SendingLightning extends React.Component<
SendingLightningProps,
{}
> {
getBackgroundColor() {
const { TransactionsStore } = this.props;
const { payment_route, payment_error, status, error } =
TransactionsStore;

if (error) {
return 'darkred';
} else if (
payment_route ||
status === 'complete' ||
status === 'SUCCEEDED'
) {
return themeColor('background');
} else if (payment_error && payment_error != '') {
return 'lightcoral';
}

return themeColor('background');
}

render() {
const { TransactionsStore, LnurlPayStore, navigation } = this.props;
const {
Expand All @@ -61,20 +42,20 @@ export default class SendingLightning extends React.Component<
payment_error,
status
} = TransactionsStore;
const backgroundColor = this.getBackgroundColor();
const success =
payment_route || status === 'complete' || status === 'SUCCEEDED';

return (
<ScrollView
<View
style={{
...styles.container,
backgroundColor
backgroundColor: themeColor('background')
}}
>
<View
style={{
...styles.content
...styles.content,
backgroundColor: themeColor('background')
}}
>
{loading && <LightningIndicator />}
Expand Down Expand Up @@ -109,34 +90,33 @@ export default class SendingLightning extends React.Component<
</>
)}
{(!!error || !!payment_error) && (
<Text
style={{
color: 'white',
fontFamily: 'Lato-Regular',
marginTop: 70,
padding: 20,
fontSize:
(payment_error || error_msg || '').length >
100
? 20
: 28
}}
>
{localeString('general.error')}:{' '}
{payment_error || error_msg}
</Text>
)}
{!!error && (
<Button
title=""
icon={{
name: 'error',
size: 125,
color: 'white'
}}
onPress={() => void 0}
iconOnly
/>
<>
<Error width="27%" />
<Text
style={{
color: '#FF9090',
fontFamily: 'Lato-Regular',
fontSize: 32
}}
>
{localeString('general.error')}
</Text>
<Text
style={{
color: 'white',
fontFamily: 'Lato-Regular',
padding: 20,
marginBottom: 60,
fontSize:
(payment_error || error_msg || '')
.length > 100
? 20
: 24
}}
>
{payment_error || error_msg}
</Text>
</>
)}
{!!success && !error && (
<Text
Expand Down Expand Up @@ -187,41 +167,6 @@ export default class SendingLightning extends React.Component<
</View>
)}

{(!!error || !!payment_error || !!success) && (
<Button
title={localeString(
'views.SendingLightning.goToWallet'
)}
icon={{
name: 'list',
size: 25,
color:
!!error || !!payment_error
? 'darkred'
: backgroundColor
}}
onPress={() =>
navigation.navigate('Wallet', {
refresh: true
})
}
titleStyle={{
color:
!!error || !!payment_error
? 'darkred'
: backgroundColor
}}
buttonStyle={
!!error || !!payment_error
? {
backgroundColor: 'white'
}
: null
}
containerStyle={{ width: '100%' }}
/>
)}

{payment_error == `FAILURE_REASON_NO_ROUTE` && (
<>
<Text
Expand All @@ -245,26 +190,44 @@ export default class SendingLightning extends React.Component<
icon={{
name: 'return-up-back',
type: 'ionicon',
size: 25,
color: 'darkred'
size: 25
}}
onPress={() => navigation.goBack()}
titleStyle={{
color: 'darkred'
}}
buttonStyle={{
backgroundColor: 'white'
}}
containerStyle={{
width: '100%',
marginTop: 10
margin: 10
}}
/>
</>
)}

{(!!error || !!payment_error || !!success) && (
<Button
title={localeString(
'views.SendingLightning.goToWallet'
)}
icon={{
name: 'list',
size: 25,
color: themeColor('background')
}}
onPress={() =>
navigation.navigate('Wallet', {
refresh: true
})
}
titleStyle={{
color: themeColor('background')
}}
containerStyle={{ width: '100%' }}
/>
)}
</View>
</View>
</ScrollView>
</View>
);
}
}
Expand All @@ -282,6 +245,7 @@ const styles = StyleSheet.create({
buttons: {
flex: 1,
justifyContent: 'flex-end',
marginBottom: 35
marginBottom: 35,
width: '100%'
}
});
80 changes: 38 additions & 42 deletions views/SendingOnChain.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import UrlUtils from '../utils/UrlUtils';
import NodeInfoStore from '../stores/NodeInfoStore';
import TransactionsStore from '../stores/TransactionsStore';

import Error from '../assets/images/SVG/Error.svg';
import Success from '../assets/images/GIF/Success.gif';
import WordLogo from '../assets/images/SVG/Word Logo.svg';

Expand All @@ -28,17 +29,6 @@ export default class SendingOnChain extends React.Component<
SendingOnChainProps,
{}
> {
getBackgroundColor() {
const { TransactionsStore } = this.props;
const { error } = TransactionsStore;

if (error) {
return 'darkred';
}

return themeColor('background');
}

render() {
const { NodeInfoStore, TransactionsStore, navigation } = this.props;
const { loading, publishSuccess, error, error_msg, txid } =
Expand All @@ -49,7 +39,7 @@ export default class SendingOnChain extends React.Component<
<View
style={{
...styles.container,
backgroundColor: this.getBackgroundColor()
backgroundColor: themeColor('background')
}}
>
<View
Expand Down Expand Up @@ -87,6 +77,20 @@ export default class SendingOnChain extends React.Component<
/>
</>
)}
{(error || error_msg) && (
<>
<Error width="27%" />
<Text
style={{
color: '#FF9090',
fontFamily: 'Lato-Regular',
fontSize: 32
}}
>
{localeString('general.error')}
</Text>
</>
)}
{error && error_msg && (
<Text
style={{
Expand Down Expand Up @@ -133,22 +137,6 @@ export default class SendingOnChain extends React.Component<
</Text>
</TouchableOpacity>
)}
{error && (
<Button
title=""
icon={{
name: 'error',
size: 125,
color: 'white'
}}
buttonStyle={{
backgroundColor: 'transparent',
borderRadius: 30
}}
onPress={() => void 0}
iconOnly
/>
)}

<View style={styles.buttons}>
{txid && (
Expand All @@ -162,6 +150,24 @@ export default class SendingOnChain extends React.Component<
</View>
)}

{error && (
<Button
title={localeString(
'views.SendingLightning.tryAgain'
)}
icon={{
name: 'return-up-back',
type: 'ionicon',
size: 25
}}
onPress={() => navigation.goBack()}
containerStyle={{
width: '100%',
margin: 20
}}
/>
)}

{(publishSuccess || error) && (
<Button
title={localeString(
Expand All @@ -170,22 +176,11 @@ export default class SendingOnChain extends React.Component<
icon={{
name: 'list',
size: 25,
color: publishSuccess
? themeColor('background')
: 'darkred'
color: themeColor('background')
}}
titleStyle={{
color: publishSuccess
? themeColor('background')
: 'darkred'
color: themeColor('background')
}}
buttonStyle={
publishSuccess
? null
: {
backgroundColor: 'white'
}
}
containerStyle={{ width: '100%' }}
onPress={() => navigation.navigate('Wallet')}
/>
Expand Down Expand Up @@ -213,6 +208,7 @@ const styles = StyleSheet.create({
buttons: {
flex: 1,
justifyContent: 'flex-end',
marginBottom: 35
marginBottom: 35,
width: '100%'
}
});