Skip to content

Commit

Permalink
Feature: ERC20 approve (#997)
Browse files Browse the repository at this point in the history
* rm unnecessary code

* mv calculations to didmount instead of render

* render approve info

* render alert

* fix missing locales

* render contract information

* delete empty

* snaps

* left
  • Loading branch information
estebanmino authored Aug 16, 2019
1 parent fffdc02 commit 6b44dcc
Show file tree
Hide file tree
Showing 11 changed files with 220 additions and 106 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ exports[`TransactionEdit should render correctly 1`] = `
allowFontScaling={true}
multiline={true}
onChangeText={[Function]}
placeholder="[missing \\"en.transacton.optional\\" translation]"
placeholder="Optional"
rejectResponderTermination={true}
style={
Object {
Expand Down
2 changes: 1 addition & 1 deletion app/components/UI/TransactionEdit/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -450,7 +450,7 @@ class TransactionEdit extends PureComponent {
<TextInput
multiline
onChangeText={this.updateData}
placeholder={strings('transacton.optional')}
placeholder={strings('transaction.optional')}
style={styles.hexData}
value={data}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,11 @@ exports[`TransactionReviewInformation should render correctly 1`] = `
"fontSize": 12,
"fontWeight": "600",
"minWidth": 30,
"textTransform": "uppercase",
}
}
>
TRANSACTION FEE
Transaction Fee
</Text>
<View>
<Text
Expand All @@ -48,10 +49,11 @@ exports[`TransactionReviewInformation should render correctly 1`] = `
"fontSize": 24,
"fontWeight": "600",
"textAlign": "right",
"textTransform": "uppercase",
}
}
>
0 USD
0 usd
</Text>
<Text
style={
Expand All @@ -61,6 +63,7 @@ exports[`TransactionReviewInformation should render correctly 1`] = `
"fontSize": 16,
"fontWeight": "400",
"textAlign": "right",
"textTransform": "uppercase",
}
}
>
Expand All @@ -86,10 +89,11 @@ exports[`TransactionReviewInformation should render correctly 1`] = `
"fontSize": 12,
"fontWeight": "600",
"minWidth": 30,
"textTransform": "uppercase",
}
}
>
TOTAL
Total
</Text>
<View>
<Text
Expand All @@ -101,13 +105,11 @@ exports[`TransactionReviewInformation should render correctly 1`] = `
"fontWeight": "400",
"marginBottom": 6,
"textAlign": "right",
"textTransform": "uppercase",
}
}
>
AMOUNT
+
TRANSACTION FEE
Amount Transaction Fee
</Text>
<Text
style={
Expand All @@ -118,6 +120,7 @@ exports[`TransactionReviewInformation should render correctly 1`] = `
"fontSize": 24,
"fontWeight": "600",
"textAlign": "right",
"textTransform": "uppercase",
},
Object {
"color": "#037dd6",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,15 @@ const styles = StyleSheet.create({
color: colors.grey500,
flex: 1,
fontSize: 12,
minWidth: 30
minWidth: 30,
textTransform: 'uppercase'
},
overviewFiat: {
...fontStyles.bold,
color: colors.fontPrimary,
fontSize: 24,
textAlign: 'right'
textAlign: 'right',
textTransform: 'uppercase'
},
overviewAccent: {
color: colors.blue
Expand All @@ -71,14 +73,16 @@ const styles = StyleSheet.create({
...fontStyles.normal,
color: colors.grey500,
fontSize: 16,
textAlign: 'right'
textAlign: 'right',
textTransform: 'uppercase'
},
overviewInfo: {
...fontStyles.normal,
color: colors.grey500,
fontSize: 12,
marginBottom: 6,
textAlign: 'right'
textAlign: 'right',
textTransform: 'uppercase'
},
assetName: {
maxWidth: 200
Expand Down Expand Up @@ -123,7 +127,26 @@ class TransactionReviewInformation extends PureComponent {
state = {
toFocused: false,
amountError: '',
actionKey: strings('transactions.tx_review_confirm')
actionKey: strings('transactions.tx_review_confirm'),
totalGas: undefined,
totalGasFiat: undefined,
totalGasEth: undefined,
totalFiat: undefined,
totalValue: undefined
};

componentDidMount = () => {
const {
transaction: { gas, gasPrice },
currentCurrency,
conversionRate
} = this.props;
const totalGas = isBN(gas) && isBN(gasPrice) ? gas.mul(gasPrice) : toBN('0x0');
const totalGasFiat = weiToFiat(totalGas, conversionRate, currentCurrency);
const totalGasEth = `${renderFromWei(totalGas)} ${strings('unit.eth')}`;

const [totalFiat, totalValue] = this.getRenderTotals(totalGas, totalGasFiat)();
this.setState({ totalGas, totalGasFiat, totalGasEth, totalFiat, totalValue });
};

getTotalFiat = (asset, totalGas, conversionRate, exchangeRate, currentCurrency, amountToken) => {
Expand All @@ -132,32 +155,28 @@ class TransactionReviewInformation extends PureComponent {
const balanceFiat = balanceToFiatNumber(parseFloat(amountToken), conversionRate, exchangeRate);
const base = Math.pow(10, 5);
total = ((parseFloat(gasFeeFiat) + parseFloat(balanceFiat)) * base) / base;
return `${total} ${currentCurrency.toUpperCase()}`;
return `${total} ${currentCurrency}`;
};

edit = () => {
const { edit } = this.props;
edit && edit();
};

getRenderTotals = () => {
getRenderTotals = (totalGas, totalGasFiat) => {
const {
transaction: { value, gas, gasPrice, selectedAsset, assetType },
transaction: { value, selectedAsset, assetType },
currentCurrency,
conversionRate,
contractExchangeRates
} = this.props;
const totalGas = isBN(gas) && isBN(gasPrice) ? gas.mul(gasPrice) : toBN('0x0');
const totalGasFiat = weiToFiat(totalGas, conversionRate, currentCurrency.toUpperCase());

const totals = {
ETH: () => {
const totalEth = isBN(value) ? value.add(totalGas) : totalGas;
const totalFiat = weiToFiat(totalEth, conversionRate, currentCurrency.toUpperCase());
const totalFiat = weiToFiat(totalEth, conversionRate, currentCurrency);
const totalValue = (
<Text style={styles.overviewEth}>
{' '}
{renderFromWei(totalEth).toString() + ' ' + strings('unit.eth')}{' '}
</Text>
<Text style={styles.overviewEth}>{`${renderFromWei(totalEth)} ${strings('unit.eth')} `}</Text>
);
return [totalFiat, totalValue];
},
Expand All @@ -177,9 +196,7 @@ class TransactionReviewInformation extends PureComponent {
<Text numberOfLines={1} style={[styles.overviewEth, styles.assetName]}>
{amountToken + ' ' + selectedAsset.symbol}
</Text>
<Text style={styles.overviewEth}>
{' + ' + renderFromWei(totalGas).toString() + ' ' + strings('unit.eth')}
</Text>
<Text style={styles.overviewEth}>{`${renderFromWei(totalGas)} ${strings('unit.eth')}`}</Text>
</View>
);
return [totalFiat, totalValue];
Expand All @@ -194,9 +211,7 @@ class TransactionReviewInformation extends PureComponent {
<Text numberOfLines={1} style={styles.overviewEth}>
{' (#' + selectedAsset.tokenId + ')'}
</Text>
<Text style={styles.overviewEth}>
{' + ' + renderFromWei(totalGas).toString() + ' ' + strings('unit.eth')}
</Text>
<Text style={styles.overviewEth}>{` + ${renderFromWei(totalGas)} ${strings('unit.eth')}`}</Text>
</View>
);
return [totalFiat, totalValue];
Expand All @@ -207,48 +222,37 @@ class TransactionReviewInformation extends PureComponent {
};

render() {
const {
transaction: { gas, gasPrice },
currentCurrency,
conversionRate
} = this.props;
const { amountError } = this.state;
const totalGas = isBN(gas) && isBN(gasPrice) ? gas.mul(gasPrice) : toBN('0x0');
const totalGasFiat = weiToFiat(totalGas, conversionRate, currentCurrency.toUpperCase());
const totalGasEth = renderFromWei(totalGas).toString() + ' ' + strings('unit.eth');

const [totalFiat, totalValue] = this.getRenderTotals()();
const { amountError, totalGasFiat, totalGasEth, totalFiat, totalValue } = this.state;

return (
<View style={styles.overview}>
<View style={[styles.overviewRow, styles.topOverviewRow]}>
<Text style={styles.overviewLabel}>{strings('transaction.gas_fee').toUpperCase()}</Text>
<Text style={styles.overviewLabel}>{strings('transaction.gas_fee')}</Text>
<View style={styles.overviewContent}>
<Text style={styles.overviewFiat}>{totalGasFiat}</Text>
<Text style={styles.overviewEth}>{totalGasEth}</Text>
</View>
</View>

<View style={styles.overviewRow}>
<Text style={styles.overviewLabel}>{strings('transaction.total').toUpperCase()}</Text>
<Text style={styles.overviewLabel}>{strings('transaction.total')}</Text>
<View style={styles.overviewContent}>
<Text style={styles.overviewInfo}>
{strings('transaction.amount').toUpperCase()} +{' '}
{strings('transaction.gas_fee').toUpperCase()}
{`${strings('transaction.amount')} ${strings('transaction.gas_fee')}`}
</Text>
<Text style={[styles.overviewFiat, styles.overviewAccent]}>{totalFiat}</Text>
{totalValue}
</View>
</View>

{amountError ? (
{!!amountError && (
<View style={styles.overviewAlert}>
<MaterialIcon name={'error'} size={20} style={styles.overviewAlertIcon} />
<Text style={styles.overviewAlertText}>
{strings('transaction.alert')}: {amountError}.
</Text>
</View>
) : null}
)}
</View>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,48 @@ exports[`TransactionReviewSummary should render correctly 1`] = `
<View
style={
Object {
"backgroundColor": undefined,
"padding": 16,
"flex": 1,
}
}
>
<Text
numberOfLines={1}
<View
style={
Object {
"alignItems": "center",
"borderColor": "#848c96",
"borderRadius": 4,
"borderWidth": 1,
"color": "#848c96",
"fontFamily": "Roboto",
"fontSize": 12,
"fontWeight": "400",
"lineHeight": 22,
"textAlign": "center",
"width": "50%",
"backgroundColor": undefined,
"padding": 16,
}
}
/>
<Text
style={
Object {
"color": "#000000",
"fontFamily": "Roboto",
"fontSize": 44,
"fontWeight": "400",
"paddingVertical": 4,
>
<Text
numberOfLines={1}
style={
Object {
"alignItems": "center",
"borderColor": "#848c96",
"borderRadius": 4,
"borderWidth": 1,
"color": "#848c96",
"fontFamily": "Roboto",
"fontSize": 12,
"fontWeight": "400",
"lineHeight": 22,
"textAlign": "center",
"width": "50%",
}
}
}
/>
/>
<Text
style={
Object {
"color": "#000000",
"fontFamily": "Roboto",
"fontSize": 44,
"fontWeight": "400",
"paddingVertical": 4,
"textTransform": "uppercase",
}
}
/>
</View>
</View>
`;
Loading

0 comments on commit 6b44dcc

Please sign in to comment.