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

Jump to bottom

Handle balanceError case #2148

Merged
merged 9 commits into from
Feb 10, 2021
Merged

Handle balanceError case #2148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ce752cf
Handle `balanceError` case
rickycodes Jan 20, 2021
b3d7f74
Adjust error case
rickycodes Feb 8, 2021
84427f9
Update handling balanceError
rickycodes Feb 9, 2021
0c00908
Remove etherscan link
rickycodes Feb 9, 2021
f75667c
Add metamask-controllers from disk
rickycodes Feb 9, 2021
1b0b1c3
Add translation strings
rickycodes Feb 9, 2021
ece4270
Remove etherscanUrl
rickycodes Feb 9, 2021
b6a2c2a
Revert "Add metamask-controllers from disk"
rickycodes Feb 9, 2021
251b221
Only use this style for error case
rickycodes Feb 10, 2021
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
74 changes: 60 additions & 14 deletions app/components/UI/AssetOverview/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { PureComponent } from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
import { Image, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';
import AssetIcon from '../AssetIcon';
import Identicon from '../Identicon';
Expand Down Expand Up @@ -50,6 +50,20 @@ const styles = StyleSheet.create({
color: colors.fontSecondary,
...fontStyles.light,
textTransform: 'uppercase'
},
warning: {
borderRadius: 8,
color: colors.black,
...fontStyles.normal,
fontSize: 14,
lineHeight: 20,
borderWidth: 1,
borderColor: colors.yellow,
backgroundColor: colors.yellow100,
padding: 20
},
warningLinks: {
color: colors.blue
}
});

Expand Down Expand Up @@ -124,6 +138,12 @@ class AssetOverview extends PureComponent {
}
};

goToBrowserUrl(url) {
this.props.navigation.navigate('BrowserView', {
newTabUrl: url
});
}

renderLogo = () => {
const {
asset: { address, image, logo, isETH }
Expand All @@ -139,10 +159,28 @@ class AssetOverview extends PureComponent {
);
};

renderWarning = () => {
const {
asset: { symbol }
} = this.props;

const supportArticleUrl =
'https://metamask.zendesk.com/hc/en-us/articles/360028059272-What-to-do-when-your-balance-of-ETH-and-or-ERC20-tokens-is-incorrect-inaccurate';
return (
<TouchableOpacity onPress={() => this.goToBrowserUrl(supportArticleUrl)}>
<Text style={styles.warning}>
{strings('asset_overview.were_unable')} {symbol} {strings('asset_overview.balance')}{' '}
<Text style={styles.warningLinks}>{strings('asset_overview.troubleshooting_missing')}</Text>{' '}
{strings('asset_overview.for_help')}
</Text>
</TouchableOpacity>
);
};

render() {
const {
accounts,
asset: { address, isETH = undefined, decimals, symbol },
asset: { address, isETH = undefined, decimals, symbol, balanceError = null },
primaryCurrency,
selectedAddress,
tokenExchangeRates,
Expand Down Expand Up @@ -175,20 +213,28 @@ class AssetOverview extends PureComponent {
<View style={styles.wrapper} testID={'token-asset-overview'}>
<View style={styles.assetLogo}>{this.renderLogo()}</View>
<View style={styles.balance}>
<Text style={styles.amount} testID={'token-amount'}>
{mainBalance}
</Text>
<Text style={styles.amountFiat}>{secondaryBalance}</Text>
{balanceError ? (
this.renderWarning()
) : (
<>
<Text style={styles.amount} testID={'token-amount'}>
{mainBalance}
</Text>
<Text style={styles.amountFiat}>{secondaryBalance}</Text>
</>
)}
</View>

<AssetActionButtons
leftText={strings('asset_overview.send_button').toUpperCase()}
testID={'token-send-button'}
middleText={strings('asset_overview.receive_button').toUpperCase()}
onLeftPress={this.onSend}
onMiddlePress={this.onReceive}
middleType={'receive'}
/>
{!balanceError && (
<AssetActionButtons
leftText={strings('asset_overview.send_button').toUpperCase()}
testID={'token-send-button'}
middleText={strings('asset_overview.receive_button').toUpperCase()}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we have this uppercased?

Copy link
Member Author

@rickycodes rickycodes Feb 9, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't add these toUpperCase() calls - only the !balanceError && check

onLeftPress={this.onSend}
onMiddlePress={this.onReceive}
middleType={'receive'}
/>
)}
</View>
);
}
Expand Down
14 changes: 13 additions & 1 deletion app/components/UI/Tokens/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,9 @@ const styles = StyleSheet.create({
...fontStyles.normal,
textTransform: 'uppercase'
},
balanceFiatTokenError: {
textTransform: 'capitalize'
},
ethLogo: {
width: 50,
height: 50,
Expand Down Expand Up @@ -181,6 +184,11 @@ class Tokens extends PureComponent {
secondaryBalance = !balanceFiat ? balanceFiat : balanceValue;
}

if (asset?.balanceError) {
mainBalance = asset.symbol;
secondaryBalance = strings('wallet.unable_to_load');
}

asset = { ...asset, ...{ logo, balance, balanceFiat } };
return (
<AssetElement
Expand All @@ -200,7 +208,11 @@ class Tokens extends PureComponent {

<View style={styles.balances} testID={'balance'}>
<Text style={styles.balance}>{mainBalance}</Text>
{secondaryBalance ? <Text style={styles.balanceFiat}>{secondaryBalance}</Text> : null}
{secondaryBalance ? (
<Text style={[styles.balanceFiat, asset?.balanceError && styles.balanceFiatTokenError]}>
{secondaryBalance}
</Text>
) : null}
</View>
</AssetElement>
);
Expand Down
11 changes: 6 additions & 5 deletions app/components/Views/Asset/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,7 @@ class Asset extends PureComponent {
};

render = () => {
const { loading, transactions, submittedTxs, confirmedTxs, transactionsUpdated } = this.state;
const {
navigation: {
state: { params }
Expand All @@ -264,7 +265,7 @@ class Asset extends PureComponent {

return (
<View style={styles.wrapper}>
{this.state.loading ? (
{loading ? (
this.renderLoader()
) : (
<Transactions
Expand All @@ -274,14 +275,14 @@ class Asset extends PureComponent {
</View>
}
navigation={navigation}
transactions={this.state.transactions}
submittedTransactions={this.state.submittedTxs}
confirmedTransactions={this.state.confirmedTxs}
transactions={transactions}
submittedTransactions={submittedTxs}
confirmedTransactions={confirmedTxs}
selectedAddress={selectedAddress}
conversionRate={conversionRate}
currentCurrency={currentCurrency}
networkType={networkType}
loading={!this.state.transactionsUpdated}
loading={!transactionsUpdated}
headerHeight={280}
/>
)}
Expand Down
9 changes: 7 additions & 2 deletions locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,8 @@
"do_you_want_to_import_this_account": "Do you want to import this account?",
"error": "Error",
"logout_to_import_seed": "You need to log out first in order to import a seed phrase.",
"ready_to_explore": "Ready to start exploring blockchain applications?"
"ready_to_explore": "Ready to start exploring blockchain applications?",
"unable_to_load": "Unable to load balance"
},
"activity_view": {
"title": "Activity"
Expand Down Expand Up @@ -538,7 +539,11 @@
"info": "Info",
"description": "Description",
"totalSupply": "Total Supply",
"address": "Address"
"address": "Address",
"were_unable": "We’re unable to load your",
"balance": "balance. See the support article",
"troubleshooting_missing": "troubleshooting missing balances",
"for_help": "for help."
},
"account_details": {
"title": "Account Details",
Expand Down