2018-01-22 04:21:48 +00:00
|
|
|
import React from 'react';
|
Sidebar refactor / style update (#173)
* Convert bootstrap to sass instead of checked in and less
* Darken body, adjust header.
* First pass at tab styles, each tab will need a lot of individual love tho.
* Update footer to main site content, improve responsiveness.
* Missing key added.
* Fix dropdowns.
* Convert GenerateWallet HTML over, still needs styling.
* Send form.
* Current rates styled.
* CurrencySwap form styles.
* SwapInfoHeader styled.
* Finish up swap restyling, minor usability improvements for mobile.
* Fix up notifications / alert customizations
* Import v3 variables.
* Fix notification spacing.
* Align input height base with buttons.
* Revert height base, add additional bootstrap overrides.
* Grid overrides.
* Move overrides to their own folder. Adjust naming.
* Fix inconsistencies.
* Style generate wallet pt 1.
* Style generate wallet pt 2
* Style generate wallet pt 3
* Fix swap
* Added some missing overries, fixed the fallout.
* Remove header text, indicate alpha version.
* Fix radio / checkbox weights.
* Bind => arrow
* Convert simpledropdown to proper form select, instead of weirdly implemented nonfuncitoning dropdown.
* Fix token balances buttons, footr icons.
* Break out files, style up account info.
* Style up token balances.
* Equivalent values styling.
* Sidebar promos.
* Fix up delete button and add custom form.
* Even spacing.
* Unlog
* Convert Big types to Ether types
* Fix test to expect Ether instead of Big
2017-09-08 19:26:51 +00:00
|
|
|
import translate from 'translations';
|
2018-01-22 04:21:48 +00:00
|
|
|
import { UnitDisplay, Spinner } from 'components/ui';
|
|
|
|
import Select from 'react-select';
|
2018-01-23 00:12:03 +00:00
|
|
|
import { TFetchCCRates, fetchCCRates, rateSymbols } from 'actions/rates';
|
2018-01-22 04:21:48 +00:00
|
|
|
import { chain, flatMap } from 'lodash';
|
2018-01-23 00:12:03 +00:00
|
|
|
import { TokenBalance, getShownTokenBalances } from 'selectors/wallet';
|
2017-11-15 03:44:55 +00:00
|
|
|
import { Balance } from 'libs/wallet';
|
2018-01-20 20:06:28 +00:00
|
|
|
import { NetworkConfig } from 'config';
|
2017-11-15 05:51:09 +00:00
|
|
|
import './EquivalentValues.scss';
|
2018-01-22 04:21:48 +00:00
|
|
|
import { Wei } from 'libs/units';
|
2018-01-23 00:12:03 +00:00
|
|
|
import { AppState } from 'reducers';
|
|
|
|
import { getNetworkConfig } from 'selectors/config';
|
|
|
|
import { connect } from 'react-redux';
|
Sidebar refactor / style update (#173)
* Convert bootstrap to sass instead of checked in and less
* Darken body, adjust header.
* First pass at tab styles, each tab will need a lot of individual love tho.
* Update footer to main site content, improve responsiveness.
* Missing key added.
* Fix dropdowns.
* Convert GenerateWallet HTML over, still needs styling.
* Send form.
* Current rates styled.
* CurrencySwap form styles.
* SwapInfoHeader styled.
* Finish up swap restyling, minor usability improvements for mobile.
* Fix up notifications / alert customizations
* Import v3 variables.
* Fix notification spacing.
* Align input height base with buttons.
* Revert height base, add additional bootstrap overrides.
* Grid overrides.
* Move overrides to their own folder. Adjust naming.
* Fix inconsistencies.
* Style generate wallet pt 1.
* Style generate wallet pt 2
* Style generate wallet pt 3
* Fix swap
* Added some missing overries, fixed the fallout.
* Remove header text, indicate alpha version.
* Fix radio / checkbox weights.
* Bind => arrow
* Convert simpledropdown to proper form select, instead of weirdly implemented nonfuncitoning dropdown.
* Fix token balances buttons, footr icons.
* Break out files, style up account info.
* Style up token balances.
* Equivalent values styling.
* Sidebar promos.
* Fix up delete button and add custom form.
* Even spacing.
* Unlog
* Convert Big types to Ether types
* Fix test to expect Ether instead of Big
2017-09-08 19:26:51 +00:00
|
|
|
|
2018-01-22 04:21:48 +00:00
|
|
|
interface AllValue {
|
|
|
|
symbol: string;
|
|
|
|
balance: Balance['wei'];
|
|
|
|
}
|
|
|
|
|
|
|
|
interface DefaultOption {
|
|
|
|
label: string;
|
|
|
|
value: AllValue[];
|
|
|
|
}
|
|
|
|
|
|
|
|
interface Option {
|
|
|
|
label: string;
|
|
|
|
value: Balance['wei'] | AllValue[];
|
|
|
|
}
|
|
|
|
|
|
|
|
interface State {
|
|
|
|
equivalentValues: Option;
|
|
|
|
options: Option[];
|
|
|
|
}
|
2017-11-18 20:15:02 +00:00
|
|
|
|
2018-01-23 00:12:03 +00:00
|
|
|
interface StateProps {
|
2018-01-22 04:21:48 +00:00
|
|
|
balance: Balance;
|
2018-01-23 00:12:03 +00:00
|
|
|
network: NetworkConfig;
|
2018-01-22 04:21:48 +00:00
|
|
|
tokenBalances: TokenBalance[];
|
2018-01-23 00:12:03 +00:00
|
|
|
rates: AppState['rates']['rates'];
|
|
|
|
ratesError: AppState['rates']['ratesError'];
|
|
|
|
isOffline: AppState['config']['offline'];
|
|
|
|
}
|
|
|
|
|
|
|
|
interface DispatchProps {
|
2017-11-15 05:51:09 +00:00
|
|
|
fetchCCRates: TFetchCCRates;
|
|
|
|
}
|
|
|
|
|
2018-01-23 00:12:03 +00:00
|
|
|
type Props = StateProps & DispatchProps;
|
|
|
|
|
|
|
|
class EquivalentValues extends React.Component<Props, State> {
|
2017-12-11 20:36:22 +00:00
|
|
|
private requestedCurrencies: string[] | null = null;
|
2018-01-23 00:12:03 +00:00
|
|
|
|
2017-12-19 22:46:34 +00:00
|
|
|
public constructor(props: Props) {
|
2017-11-15 05:51:09 +00:00
|
|
|
super(props);
|
2018-01-22 04:21:48 +00:00
|
|
|
const { balance, tokenBalances, network } = this.props;
|
|
|
|
this.state = {
|
|
|
|
equivalentValues: this.defaultOption(balance, tokenBalances, network),
|
|
|
|
options: []
|
|
|
|
};
|
2017-11-15 05:51:09 +00:00
|
|
|
|
2017-11-18 20:15:02 +00:00
|
|
|
if (props.balance && props.tokenBalances) {
|
|
|
|
this.fetchRates(props);
|
|
|
|
}
|
2017-11-15 05:51:09 +00:00
|
|
|
}
|
|
|
|
|
2018-01-22 04:21:48 +00:00
|
|
|
public defaultOption(
|
|
|
|
balance: Balance,
|
|
|
|
tokenBalances: TokenBalance[],
|
|
|
|
network: NetworkConfig
|
|
|
|
): DefaultOption {
|
|
|
|
return {
|
|
|
|
label: 'All',
|
|
|
|
value: [{ symbol: network.unit, balance: balance.wei }, ...tokenBalances]
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2017-12-19 22:46:34 +00:00
|
|
|
public componentWillReceiveProps(nextProps: Props) {
|
2018-01-23 00:12:03 +00:00
|
|
|
const { balance, tokenBalances, isOffline } = this.props;
|
2018-01-11 18:04:11 +00:00
|
|
|
if (
|
|
|
|
nextProps.balance !== balance ||
|
|
|
|
nextProps.tokenBalances !== tokenBalances ||
|
2018-01-23 00:12:03 +00:00
|
|
|
nextProps.isOffline !== isOffline
|
2018-01-11 18:04:11 +00:00
|
|
|
) {
|
2018-01-22 04:21:48 +00:00
|
|
|
const defaultOption = this.defaultOption(
|
|
|
|
nextProps.balance,
|
|
|
|
nextProps.tokenBalances,
|
|
|
|
nextProps.network
|
|
|
|
);
|
|
|
|
const options: Option[] = [
|
|
|
|
defaultOption,
|
|
|
|
{ label: nextProps.network.unit, value: nextProps.balance.wei },
|
|
|
|
...Object.values(nextProps.tokenBalances).map(token => {
|
|
|
|
return { label: token.symbol, value: token.balance };
|
|
|
|
})
|
|
|
|
];
|
|
|
|
const equivalentValues =
|
|
|
|
options.find(opt => opt.label === this.state.equivalentValues.label) || defaultOption;
|
|
|
|
this.setState({
|
|
|
|
equivalentValues,
|
|
|
|
options
|
|
|
|
});
|
2017-11-18 20:15:02 +00:00
|
|
|
this.fetchRates(nextProps);
|
2017-11-15 05:51:09 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-01-22 04:21:48 +00:00
|
|
|
public selectOption = equivalentValues => {
|
|
|
|
this.setState({ equivalentValues });
|
|
|
|
};
|
2017-11-15 05:51:09 +00:00
|
|
|
|
2018-01-22 04:21:48 +00:00
|
|
|
public render(): JSX.Element {
|
2018-01-23 00:12:03 +00:00
|
|
|
const { balance, isOffline, tokenBalances, rates, network, ratesError } = this.props;
|
2018-01-22 04:21:48 +00:00
|
|
|
const { equivalentValues, options } = this.state;
|
2017-11-18 20:15:02 +00:00
|
|
|
const isFetching =
|
2017-12-11 20:36:22 +00:00
|
|
|
!balance || balance.isPending || !tokenBalances || Object.keys(rates).length === 0;
|
2018-01-22 04:21:48 +00:00
|
|
|
|
|
|
|
const Value = ({ rate, value }) => (
|
|
|
|
<div className="EquivalentValues-values-currency">
|
|
|
|
<span className="EquivalentValues-values-currency-label">{rate}</span>{' '}
|
|
|
|
<span className="EquivalentValues-values-currency-value">
|
|
|
|
<UnitDisplay
|
|
|
|
unit={'ether'}
|
|
|
|
value={value}
|
|
|
|
displayShortBalance={rateSymbols.isFiat(rate) ? 2 : 3}
|
|
|
|
checkOffline={true}
|
|
|
|
/>
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
);
|
Sidebar refactor / style update (#173)
* Convert bootstrap to sass instead of checked in and less
* Darken body, adjust header.
* First pass at tab styles, each tab will need a lot of individual love tho.
* Update footer to main site content, improve responsiveness.
* Missing key added.
* Fix dropdowns.
* Convert GenerateWallet HTML over, still needs styling.
* Send form.
* Current rates styled.
* CurrencySwap form styles.
* SwapInfoHeader styled.
* Finish up swap restyling, minor usability improvements for mobile.
* Fix up notifications / alert customizations
* Import v3 variables.
* Fix notification spacing.
* Align input height base with buttons.
* Revert height base, add additional bootstrap overrides.
* Grid overrides.
* Move overrides to their own folder. Adjust naming.
* Fix inconsistencies.
* Style generate wallet pt 1.
* Style generate wallet pt 2
* Style generate wallet pt 3
* Fix swap
* Added some missing overries, fixed the fallout.
* Remove header text, indicate alpha version.
* Fix radio / checkbox weights.
* Bind => arrow
* Convert simpledropdown to proper form select, instead of weirdly implemented nonfuncitoning dropdown.
* Fix token balances buttons, footr icons.
* Break out files, style up account info.
* Style up token balances.
* Equivalent values styling.
* Sidebar promos.
* Fix up delete button and add custom form.
* Even spacing.
* Unlog
* Convert Big types to Ether types
* Fix test to expect Ether instead of Big
2017-09-08 19:26:51 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="EquivalentValues">
|
2018-01-22 04:21:48 +00:00
|
|
|
<div className="EquivalentValues-header">
|
|
|
|
<h5 className="EquivalentValues-title">{translate('sidebar_Equiv')}</h5>
|
|
|
|
<Select
|
|
|
|
name="equivalentValues"
|
|
|
|
// TODO: Update type
|
|
|
|
value={equivalentValues as any}
|
|
|
|
options={options as any}
|
|
|
|
onChange={this.selectOption}
|
|
|
|
clearable={false}
|
|
|
|
searchable={false}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
2018-01-23 00:12:03 +00:00
|
|
|
{isOffline ? (
|
2018-01-11 18:04:11 +00:00
|
|
|
<div className="EquivalentValues-offline well well-sm">
|
|
|
|
Equivalent values are unavailable offline
|
|
|
|
</div>
|
2018-01-22 04:21:48 +00:00
|
|
|
) : network.isTestnet ? (
|
|
|
|
<div className="text-center">
|
|
|
|
<h5 style={{ color: 'red' }}>
|
|
|
|
On test network, equivalent values will not be displayed.
|
|
|
|
</h5>
|
|
|
|
</div>
|
|
|
|
) : ratesError ? (
|
|
|
|
<h5>{ratesError}</h5>
|
|
|
|
) : isFetching ? (
|
|
|
|
<Spinner size="x2" />
|
2018-01-11 18:04:11 +00:00
|
|
|
) : (
|
2018-01-22 04:21:48 +00:00
|
|
|
<div className="EquivalentValues-values">
|
|
|
|
{this.generateValues(equivalentValues.label, equivalentValues.value).map((equiv, i) => (
|
|
|
|
<Value rate={equiv.rate} value={equiv.value} key={i} />
|
|
|
|
))}
|
|
|
|
</div>
|
2018-01-11 18:04:11 +00:00
|
|
|
)}
|
Sidebar refactor / style update (#173)
* Convert bootstrap to sass instead of checked in and less
* Darken body, adjust header.
* First pass at tab styles, each tab will need a lot of individual love tho.
* Update footer to main site content, improve responsiveness.
* Missing key added.
* Fix dropdowns.
* Convert GenerateWallet HTML over, still needs styling.
* Send form.
* Current rates styled.
* CurrencySwap form styles.
* SwapInfoHeader styled.
* Finish up swap restyling, minor usability improvements for mobile.
* Fix up notifications / alert customizations
* Import v3 variables.
* Fix notification spacing.
* Align input height base with buttons.
* Revert height base, add additional bootstrap overrides.
* Grid overrides.
* Move overrides to their own folder. Adjust naming.
* Fix inconsistencies.
* Style generate wallet pt 1.
* Style generate wallet pt 2
* Style generate wallet pt 3
* Fix swap
* Added some missing overries, fixed the fallout.
* Remove header text, indicate alpha version.
* Fix radio / checkbox weights.
* Bind => arrow
* Convert simpledropdown to proper form select, instead of weirdly implemented nonfuncitoning dropdown.
* Fix token balances buttons, footr icons.
* Break out files, style up account info.
* Style up token balances.
* Equivalent values styling.
* Sidebar promos.
* Fix up delete button and add custom form.
* Even spacing.
* Unlog
* Convert Big types to Ether types
* Fix test to expect Ether instead of Big
2017-09-08 19:26:51 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2017-11-15 05:51:09 +00:00
|
|
|
|
2018-01-22 04:21:48 +00:00
|
|
|
// return the sum of all equivalent values (unit * rate * balance) grouped by rate (USD, EUR, ETH, etc...)
|
|
|
|
private handleAllValues = (balance: AllValue[]) => {
|
|
|
|
const { rates } = this.props;
|
|
|
|
const allRates = Object.values(balance).map(
|
|
|
|
value => !!rates[value.symbol] && rates[value.symbol]
|
|
|
|
);
|
|
|
|
const allEquivalentValues = allRates.map((rateType, i) => {
|
|
|
|
return {
|
|
|
|
symbol: Object.keys(rates)[i],
|
|
|
|
equivalentValues: [
|
|
|
|
...Object.keys(rateType).map(rate => {
|
|
|
|
const balanceIndex: AllValue = balance[i];
|
|
|
|
const value =
|
|
|
|
balanceIndex && !!balanceIndex.balance
|
|
|
|
? balanceIndex.balance.muln(rateType[rate])
|
|
|
|
: null;
|
|
|
|
return { rate, value };
|
|
|
|
})
|
|
|
|
]
|
|
|
|
};
|
|
|
|
});
|
|
|
|
// flatten all equivalent values for each unit (ETH, ETC, OMG, etc...) into an array
|
|
|
|
const collection = flatMap([
|
|
|
|
...Object.values(allEquivalentValues).map(v => v.equivalentValues)
|
|
|
|
]);
|
|
|
|
// group equivalent values by rate (USD, EUR, etc...)
|
|
|
|
const groupedCollection = chain(collection)
|
|
|
|
.groupBy('rate')
|
|
|
|
.mapValues(v => Object.values(v).map(s => s.value))
|
|
|
|
.value();
|
|
|
|
// finally, add all the equivalent values together and return an array of objects with the sum of equivalent values for each rate
|
|
|
|
return Object.values(groupedCollection).map((v, i) => {
|
|
|
|
return {
|
|
|
|
rate: Object.keys(groupedCollection)[i],
|
|
|
|
value: v.reduce((acc, curr) => acc && curr && acc.add(curr))
|
|
|
|
};
|
|
|
|
});
|
2017-11-15 05:51:09 +00:00
|
|
|
};
|
|
|
|
|
2018-01-22 04:21:48 +00:00
|
|
|
// return equivalent value (unit * rate * balance)
|
|
|
|
private handleValues(unit: string, balance: Balance['wei']) {
|
|
|
|
const { rates } = this.props;
|
|
|
|
const ratesObj = { ...rates[unit] };
|
|
|
|
return Object.keys(ratesObj).map(key => {
|
|
|
|
const value = (balance as Wei).muln(ratesObj[key]);
|
|
|
|
return { rate: key, value };
|
|
|
|
});
|
2017-11-15 05:51:09 +00:00
|
|
|
}
|
2017-11-18 20:15:02 +00:00
|
|
|
|
2018-01-22 04:21:48 +00:00
|
|
|
private generateValues = (
|
|
|
|
unit: string,
|
|
|
|
balance: Balance['wei'] | AllValue[]
|
|
|
|
): { rate: string; value: Balance['wei'] }[] => {
|
|
|
|
if (unit === 'All') {
|
|
|
|
return this.handleAllValues(balance as AllValue[]);
|
|
|
|
} else {
|
|
|
|
return this.handleValues(unit, balance as Balance['wei']);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2017-11-18 20:15:02 +00:00
|
|
|
private fetchRates(props: Props) {
|
2018-01-23 00:12:03 +00:00
|
|
|
const { balance, tokenBalances, isOffline } = props;
|
2018-01-11 18:04:11 +00:00
|
|
|
// Duck out if we haven't gotten balances yet, or we're not going to
|
2018-01-23 00:12:03 +00:00
|
|
|
if (!balance || !tokenBalances || isOffline) {
|
2017-11-18 20:15:02 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// First determine which currencies we're asking for
|
2018-01-22 04:21:48 +00:00
|
|
|
const currencies = tokenBalances
|
2017-11-18 20:15:02 +00:00
|
|
|
.filter(tk => !tk.balance.isZero())
|
|
|
|
.map(tk => tk.symbol)
|
|
|
|
.sort();
|
|
|
|
|
|
|
|
// If it's the same currencies as we have, skip it
|
2017-12-11 20:36:22 +00:00
|
|
|
if (this.requestedCurrencies && currencies.join() === this.requestedCurrencies.join()) {
|
2017-11-18 20:15:02 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Fire off the request and save the currencies requested
|
2018-01-23 00:12:03 +00:00
|
|
|
props.fetchCCRates(currencies);
|
2017-11-18 20:15:02 +00:00
|
|
|
this.requestedCurrencies = currencies;
|
|
|
|
}
|
Sidebar refactor / style update (#173)
* Convert bootstrap to sass instead of checked in and less
* Darken body, adjust header.
* First pass at tab styles, each tab will need a lot of individual love tho.
* Update footer to main site content, improve responsiveness.
* Missing key added.
* Fix dropdowns.
* Convert GenerateWallet HTML over, still needs styling.
* Send form.
* Current rates styled.
* CurrencySwap form styles.
* SwapInfoHeader styled.
* Finish up swap restyling, minor usability improvements for mobile.
* Fix up notifications / alert customizations
* Import v3 variables.
* Fix notification spacing.
* Align input height base with buttons.
* Revert height base, add additional bootstrap overrides.
* Grid overrides.
* Move overrides to their own folder. Adjust naming.
* Fix inconsistencies.
* Style generate wallet pt 1.
* Style generate wallet pt 2
* Style generate wallet pt 3
* Fix swap
* Added some missing overries, fixed the fallout.
* Remove header text, indicate alpha version.
* Fix radio / checkbox weights.
* Bind => arrow
* Convert simpledropdown to proper form select, instead of weirdly implemented nonfuncitoning dropdown.
* Fix token balances buttons, footr icons.
* Break out files, style up account info.
* Style up token balances.
* Equivalent values styling.
* Sidebar promos.
* Fix up delete button and add custom form.
* Even spacing.
* Unlog
* Convert Big types to Ether types
* Fix test to expect Ether instead of Big
2017-09-08 19:26:51 +00:00
|
|
|
}
|
2018-01-22 04:21:48 +00:00
|
|
|
|
2018-01-23 00:12:03 +00:00
|
|
|
function mapStateToProps(state: AppState): StateProps {
|
|
|
|
return {
|
|
|
|
balance: state.wallet.balance,
|
|
|
|
tokenBalances: getShownTokenBalances(state, true),
|
|
|
|
network: getNetworkConfig(state),
|
|
|
|
rates: state.rates.rates,
|
|
|
|
ratesError: state.rates.ratesError,
|
|
|
|
isOffline: state.config.offline
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
export default connect(mapStateToProps, { fetchCCRates })(EquivalentValues);
|