MyCrypto/common/components/BalanceSidebar/EquivalentValues.tsx

333 lines
10 KiB
TypeScript
Raw Normal View History

import React from 'react';
import translate from 'translations';
import { UnitDisplay, Spinner } from 'components/ui';
import Select from 'react-select';
import { TFetchCCRatesRequested, fetchCCRatesRequested } from 'actions/rates';
import { rateSymbols } from 'api/rates';
import { chain, flatMap } from 'lodash';
import { TokenBalance, getShownTokenBalances } from 'selectors/wallet';
import { Balance } from 'libs/wallet';
import './EquivalentValues.scss';
import { AppState } from 'reducers';
import { getNetworkConfig, getOffline } from 'selectors/config';
import { connect } from 'react-redux';
Add Symbols to Equivalent Values (#1038) * Update styles * Add fiat symbols * chore(package): update webpack-dev-middleware to version 2.0.5 (#1036) * Fix double alert on swap timeout (#1034) * chore(package): update @types/jest to version 22.1.2 (#1037) * Update Banners / Versions to Beta (#1040) * update agreeement banner with beta nomenclature / styling * update version * remove v4 text * adjust language * more language * MyEtherWallet => MyCrypto (#1041) * MyEtherWallet => MyCrypto Note: Knowledge base links in translations are not working due to the new knowledge base. Some links link to the MyEtherWallet Chrome Extension. * Update consoleAdvertisement.ts * Update consoleAdvertisement.ts * Update en.json * Update consoleAdvertisement.ts * Update InsecureWalletWarning.tsx * Update Footer to Prod Styles (#1044) * More MEW -> MyCrypto Changes (#1043) * Replace all language instances of MYCRYPTO LLC * Fix disclaimer LLC * Fix console advert link, adjust logo and make it easier to edit. * Update coinbase URL. * Fix trezor and ledger component links and text. * Misc. cleanup. * Update unlock guide at the end of generate. * Fix onboarding translation string * Change salt hash from mew to mycrpyto. * chore(package): update webpack to version 3.11.0 (#1045) * Contributor Guidelines (#1054) * chore(package): update ts-jest to version 22.0.4 (#1053) * fix(package): update react-markdown to version 3.2.0 (#1055) * chore(package): update image-webpack-loader to version 4.1.0 (#1049) * Add selfHidingImg * Add coin & token images * Update styles & fix undefined img path * Update styles * Align all symbols to left * Use icon assets * remove selfhidingimg
2018-02-13 00:15:27 +00:00
import btcIco from 'assets/images/bitcoin.png';
import ethIco from 'assets/images/ether.png';
import repIco from 'assets/images/augur.png';
import { NetworkConfig } from 'types/network';
import BN from 'bn.js';
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[];
}
interface StateProps {
balance: Balance;
network: NetworkConfig;
tokenBalances: TokenBalance[];
rates: AppState['rates']['rates'];
ratesError: AppState['rates']['ratesError'];
isOffline: AppState['config']['meta']['offline'];
}
interface DispatchProps {
fetchCCRates: TFetchCCRatesRequested;
}
interface FiatSymbols {
[key: string]: string;
}
interface Rates {
[rate: string]: number;
}
type Props = StateProps & DispatchProps;
class EquivalentValues extends React.Component<Props, State> {
private requestedCurrencies: string[] | null = null;
public constructor(props: Props) {
super(props);
const { balance, tokenBalances, network } = this.props;
this.state = {
equivalentValues: this.defaultOption(balance, tokenBalances, network),
options: []
};
if (props.balance && props.tokenBalances) {
this.fetchRates(props);
}
}
public defaultOption(
balance: Balance,
tokenBalances: TokenBalance[],
network: StateProps['network']
): DefaultOption {
return {
label: 'All',
value: [{ symbol: network.unit, balance: balance.wei }, ...tokenBalances]
};
}
public UNSAFE_componentWillReceiveProps(nextProps: Props) {
const { balance, tokenBalances, isOffline, network } = this.props;
if (
nextProps.balance !== balance ||
nextProps.tokenBalances !== tokenBalances ||
nextProps.isOffline !== isOffline ||
nextProps.network.unit !== network.unit
) {
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
});
this.fetchRates(nextProps);
}
}
public selectOption = (equivalentValues: Option) => {
this.setState({ equivalentValues });
};
public render(): JSX.Element {
const { balance, isOffline, tokenBalances, rates, network, ratesError } = this.props;
const { equivalentValues, options } = this.state;
const isFetching =
!balance || balance.isPending || !tokenBalances || Object.keys(rates).length === 0;
const pairRates = this.generateValues(equivalentValues.label, equivalentValues.value);
const fiatSymbols: FiatSymbols = {
Add Symbols to Equivalent Values (#1038) * Update styles * Add fiat symbols * chore(package): update webpack-dev-middleware to version 2.0.5 (#1036) * Fix double alert on swap timeout (#1034) * chore(package): update @types/jest to version 22.1.2 (#1037) * Update Banners / Versions to Beta (#1040) * update agreeement banner with beta nomenclature / styling * update version * remove v4 text * adjust language * more language * MyEtherWallet => MyCrypto (#1041) * MyEtherWallet => MyCrypto Note: Knowledge base links in translations are not working due to the new knowledge base. Some links link to the MyEtherWallet Chrome Extension. * Update consoleAdvertisement.ts * Update consoleAdvertisement.ts * Update en.json * Update consoleAdvertisement.ts * Update InsecureWalletWarning.tsx * Update Footer to Prod Styles (#1044) * More MEW -> MyCrypto Changes (#1043) * Replace all language instances of MYCRYPTO LLC * Fix disclaimer LLC * Fix console advert link, adjust logo and make it easier to edit. * Update coinbase URL. * Fix trezor and ledger component links and text. * Misc. cleanup. * Update unlock guide at the end of generate. * Fix onboarding translation string * Change salt hash from mew to mycrpyto. * chore(package): update webpack to version 3.11.0 (#1045) * Contributor Guidelines (#1054) * chore(package): update ts-jest to version 22.0.4 (#1053) * fix(package): update react-markdown to version 3.2.0 (#1055) * chore(package): update image-webpack-loader to version 4.1.0 (#1049) * Add selfHidingImg * Add coin & token images * Update styles & fix undefined img path * Update styles * Align all symbols to left * Use icon assets * remove selfhidingimg
2018-02-13 00:15:27 +00:00
USD: '$',
EUR: '€',
GBP: '£',
CHF: ' '
};
const coinAndTokenSymbols: any = {
Add Symbols to Equivalent Values (#1038) * Update styles * Add fiat symbols * chore(package): update webpack-dev-middleware to version 2.0.5 (#1036) * Fix double alert on swap timeout (#1034) * chore(package): update @types/jest to version 22.1.2 (#1037) * Update Banners / Versions to Beta (#1040) * update agreeement banner with beta nomenclature / styling * update version * remove v4 text * adjust language * more language * MyEtherWallet => MyCrypto (#1041) * MyEtherWallet => MyCrypto Note: Knowledge base links in translations are not working due to the new knowledge base. Some links link to the MyEtherWallet Chrome Extension. * Update consoleAdvertisement.ts * Update consoleAdvertisement.ts * Update en.json * Update consoleAdvertisement.ts * Update InsecureWalletWarning.tsx * Update Footer to Prod Styles (#1044) * More MEW -> MyCrypto Changes (#1043) * Replace all language instances of MYCRYPTO LLC * Fix disclaimer LLC * Fix console advert link, adjust logo and make it easier to edit. * Update coinbase URL. * Fix trezor and ledger component links and text. * Misc. cleanup. * Update unlock guide at the end of generate. * Fix onboarding translation string * Change salt hash from mew to mycrpyto. * chore(package): update webpack to version 3.11.0 (#1045) * Contributor Guidelines (#1054) * chore(package): update ts-jest to version 22.0.4 (#1053) * fix(package): update react-markdown to version 3.2.0 (#1055) * chore(package): update image-webpack-loader to version 4.1.0 (#1049) * Add selfHidingImg * Add coin & token images * Update styles & fix undefined img path * Update styles * Align all symbols to left * Use icon assets * remove selfhidingimg
2018-02-13 00:15:27 +00:00
BTC: btcIco,
ETH: ethIco,
REP: repIco
};
interface ValueProps {
className: string;
rate: string;
value: BN | null;
symbol?: string;
icon?: string;
key?: number | string;
}
const Value = (props: ValueProps) => (
<div className={`EquivalentValues-values-currency ${props.className}`}>
<img src={props.icon} />
{!!props.symbol && (
<span className="EquivalentValues-values-currency-fiat-symbol">{props.symbol}</span>
)}
<span className="EquivalentValues-values-currency-label">{props.rate}</span>{' '}
<span className="EquivalentValues-values-currency-value">
<UnitDisplay
unit={'ether'}
value={props.value}
displayShortBalance={rateSymbols.isFiat(props.rate) ? 2 : 3}
checkOffline={true}
/>
</span>
</div>
);
return (
<div className="EquivalentValues">
<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 as any}
clearable={false}
searchable={false}
/>
</div>
{isOffline ? (
<div className="EquivalentValues-offline well well-sm">
{translate('EQUIV_VALS_OFFLINE')}
</div>
) : network.isTestnet ? (
<div className="text-center">
<h5 style={{ color: 'red' }}>{translate('EQUIV_VALS_TESTNET')}</h5>
</div>
) : ratesError ? (
<h5>{ratesError}</h5>
) : isFetching ? (
<div className="EquivalentValues-spinner">
<Spinner size="x3" />
</div>
) : (
<div className="EquivalentValues-values">
{pairRates.length ? (
Add Symbols to Equivalent Values (#1038) * Update styles * Add fiat symbols * chore(package): update webpack-dev-middleware to version 2.0.5 (#1036) * Fix double alert on swap timeout (#1034) * chore(package): update @types/jest to version 22.1.2 (#1037) * Update Banners / Versions to Beta (#1040) * update agreeement banner with beta nomenclature / styling * update version * remove v4 text * adjust language * more language * MyEtherWallet => MyCrypto (#1041) * MyEtherWallet => MyCrypto Note: Knowledge base links in translations are not working due to the new knowledge base. Some links link to the MyEtherWallet Chrome Extension. * Update consoleAdvertisement.ts * Update consoleAdvertisement.ts * Update en.json * Update consoleAdvertisement.ts * Update InsecureWalletWarning.tsx * Update Footer to Prod Styles (#1044) * More MEW -> MyCrypto Changes (#1043) * Replace all language instances of MYCRYPTO LLC * Fix disclaimer LLC * Fix console advert link, adjust logo and make it easier to edit. * Update coinbase URL. * Fix trezor and ledger component links and text. * Misc. cleanup. * Update unlock guide at the end of generate. * Fix onboarding translation string * Change salt hash from mew to mycrpyto. * chore(package): update webpack to version 3.11.0 (#1045) * Contributor Guidelines (#1054) * chore(package): update ts-jest to version 22.0.4 (#1053) * fix(package): update react-markdown to version 3.2.0 (#1055) * chore(package): update image-webpack-loader to version 4.1.0 (#1049) * Add selfHidingImg * Add coin & token images * Update styles & fix undefined img path * Update styles * Align all symbols to left * Use icon assets * remove selfhidingimg
2018-02-13 00:15:27 +00:00
<React.Fragment>
{pairRates.map(
(equiv, i) =>
(rateSymbols.symbols.fiat as string[]).includes(equiv.rate) && (
<Value
className="EquivalentValues-values-currency-fiat"
rate={equiv.rate}
value={equiv.value}
symbol={fiatSymbols[equiv.rate]}
key={i}
/>
)
)}
<div className="EquivalentValues-values-spacer" />
{pairRates.map(
(equiv, i) =>
(rateSymbols.symbols.coinAndToken as string[]).includes(equiv.rate) && (
<Value
className="EquivalentValues-values-currency-coin-and-token"
rate={equiv.rate}
value={equiv.value}
icon={coinAndTokenSymbols[equiv.rate]}
key={i}
/>
)
)}
</React.Fragment>
) : (
<p>{translate('EQUIV_VALS_UNSUPPORTED_UNIT')}</p>
)}
</div>
)}
</div>
);
}
// 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: any, 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))
};
});
};
// return equivalent value (unit * rate * balance)
private handleValues(unit: string, balance: Balance['wei']) {
const { rates } = this.props;
const ratesObj: Rates = { ...rates[unit] };
return Object.keys(ratesObj).map(key => {
const value = balance!.muln(ratesObj[key]);
return { rate: key, value };
});
}
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']);
}
};
private fetchRates(props: Props) {
const { balance, tokenBalances, isOffline } = props;
// Duck out if we haven't gotten balances yet, or we're not going to
if (!balance || !tokenBalances || isOffline) {
return;
}
// First determine which currencies we're asking for
const currencies = tokenBalances
.filter(tk => !tk.balance.isZero())
.map(tk => tk.symbol)
.sort()
.concat([props.network.unit]);
// If it's the same currencies as we have, skip it
if (this.requestedCurrencies && currencies.join() === this.requestedCurrencies.join()) {
return;
}
// Fire off the request and save the currencies requested
props.fetchCCRates(currencies);
this.requestedCurrencies = currencies;
}
}
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: getOffline(state)
};
}
export default connect(mapStateToProps, { fetchCCRates: fetchCCRatesRequested })(EquivalentValues);