-
+ | #{order.id.substring(4)} |
+
{isBid ? (
= 0; i--) {
- if (indicators[i].name === changed) {
- indicators[i].destroy();
- break;
- }
- }
- }
- return false;
- }
-
- if (
- chart &&
- !utils.are_equal_shallow(
- nextProps.indicatorSettings,
- this.props.indicatorSettings
- )
- ) {
- let changed, added, changedSetting;
-
- for (let key in nextProps.indicatorSettings) {
- let change = reduce(
- nextProps.indicatorSettings[key],
- (total, a, settingKey) => {
- let change =
- a !== this.props.indicatorSettings[key][settingKey];
- changedSetting = change ? settingKey : changedSetting;
- return total
- ? total
- : a !==
- this.props.indicatorSettings[key][settingKey];
- },
- null
- );
-
- changed = change ? key : changed;
- }
-
- if (changedSetting !== "period") {
- let indicators = chart.indicators
- ? chart.indicators.allItems
- : [];
- let options = this.getIndicators(nextProps, changed)[0];
-
- for (let i = indicators.length - 1; i >= 0; i--) {
- if (indicators[i].name === changed) {
- indicators[i].update(options);
- break;
- }
- }
- chart.redraw();
- return false;
- }
- }
-
- let latestCheck = false;
- if (
- nextProps.priceData &&
- !nextProps.priceData.length &&
- (nextProps.latest && this.props.latest)
- ) {
- latestCheck = nextProps.latest.full !== this.props.latest.full;
- }
- return (
- !utils.are_equal_shallow(
- nextProps.priceData,
- this.props.priceData
- ) ||
- nextState.lastPointY !== this.state.lastPointY ||
- nextProps.baseSymbol !== this.props.baseSymbol ||
- latestCheck ||
- nextProps.leftOrderBook !== this.props.leftOrderBook ||
- !utils.are_equal_shallow(
- nextProps.indicatorSettings,
- this.props.indicatorSettings
- ) ||
- nextProps.verticalOrderbook !== this.props.verticalOrderbook ||
- nextProps.height !== this.props.height ||
- nextProps.zoom !== this.props.zoom
- );
- }
-
- constructor() {
- super();
- this.state = {
- offsetHeight: null,
- lastPointY: -100,
- close: 0,
- open: 0
- };
- }
-
- componentDidMount() {
- this.reflowChart(500);
- }
-
- componentWillReceiveProps(nextProps) {
- let height = this.offsetHeight;
- this.setState({offsetHeight: height - 10});
-
- if (
- this.refs.chart &&
- (nextProps.verticalOrderbook !== this.props.verticalOrderbook ||
- nextProps.height !== this.props.height)
- ) {
- this.reflowChart(100);
- }
- }
-
- reflowChart(timeout) {
- setTimeout(() => {
- if (this.refs.chart) {
- this.refs.chart.chart.reflow();
- }
- }, timeout);
- }
-
- getIndicators(props, select = false) {
- let {indicators, indicatorSettings} = props;
- let currentIndicator = [];
-
- for (let indicator in indicators) {
- if (indicators[indicator] && (!select || select === indicator)) {
- // console.log(indicator, "params:", indicatorSettings[indicator]);
- switch (indicator) {
- case "sma":
- currentIndicator.push({
- id: "primary",
- type: "sma",
- params: indicatorSettings[indicator],
- tooltip: {
- pointFormat:
- 'pointFormat SMA: {point.y} '
- }
- });
- break;
-
- case "ema":
- currentIndicator.push({
- id: "primary",
- type: "ema",
- params: indicatorSettings[indicator],
- styles: {
- strokeWidth: 2,
- stroke: props.priceData.length
- ? "green"
- : "black",
- dashstyle: "solid"
- }
- });
- break;
-
- case "rsi":
- currentIndicator.push({
- id: "primary",
- type: "rsi",
- params: indicatorSettings[indicator],
- styles: {
- strokeWidth: 2,
- stroke: "#A7DACD",
- dashstyle: "solid"
- },
- yAxis: {
- lineWidth: 2,
- title: {
- text: "RSI",
- style: {
- color: "#FFFFFF"
- }
- },
- labels: {
- style: {
- color: "#FFFFFF"
- }
- }
- }
- });
- break;
-
- case "atr":
- currentIndicator.push({
- id: "primary",
- type: "atr",
- params: indicatorSettings[indicator],
- styles: {
- strokeWidth: 2,
- stroke: "orange",
- dashstyle: "solid"
- },
- yAxis: {
- lineWidth: 2,
- title: {
- text: "ATR",
- style: {
- color: "#FFFFFF"
- }
- },
- labels: {
- style: {
- color: "#FFFFFF"
- }
- }
- }
- });
- break;
-
- default:
- currentIndicator = [];
- }
- }
- }
-
- return currentIndicator;
- }
-
- render() {
- let {
- priceData,
- volumeData,
- quoteSymbol,
- baseSymbol,
- base,
- quote,
- marketReady,
- indicators,
- indicatorSettings,
- latest,
- bucketSize,
- theme
- } = this.props;
-
- let priceSeriesData = cloneDeep(priceData);
- let currentIndicator = this.getIndicators(this.props);
-
- let positiveColor = colors[theme].positiveColor;
- let negativeColor = colors[theme].negativeColor;
-
- if (!priceSeriesData.length && latest) {
- let now = new Date().getTime();
- priceSeriesData.push([
- now,
- latest.full,
- latest.full,
- latest.full,
- latest.full
- ]);
- volumeData.push([now, 0]);
- for (let i = 1; i < 100; i++) {
- priceSeriesData.unshift([
- now - bucketSize * 1000 * i,
- latest.full,
- latest.full,
- latest.full,
- latest.full
- ]);
- volumeData.unshift([now - bucketSize * 1000 * i, 0]);
- }
- // is this required?
- positiveColor = "black";
- negativeColor = "black";
- }
-
- // Find max volume
- // let maxVolume = 0;
- let volumeColors = [],
- colorByPoint = false;
-
- // if (volumeData.length === priceSeriesData.length) {
- // colorByPoint = true;
- // }
- // for (let i = 0; i < volumeData.length; i++) {
- // maxVolume = Math.max(maxVolume, volumeData[i][1]);
- // if (colorByPoint) {
- // volumeColors.push(priceSeriesData[i][1] <= priceSeriesData[i][4] ? positiveColor : negativeColor);
- // }
- // }
-
- // Find highest price
- // let maxPrice = 0;
- // if (priceSeriesData.length) {
- // for (let i = 0; i < priceSeriesData.length; i++) {
- // maxPrice = Math.max(maxPrice, priceSeriesData[i][2]);
- // }
- // }
-
- let config = {
- chart: {
- backgroundColor: "rgba(255, 0, 0, 0)",
- dataGrouping: {
- enabled: false
- },
- pinchType: "x",
- spacing: [20, 10, 5, 10],
- alignTicks: false
- },
-
- indicators: priceSeriesData.length ? currentIndicator : [],
- title: {
- text: null
- },
- credits: {
- enabled: false
- },
- legend: {
- enabled: false
- },
- scrollbar: {
- enabled: false
- },
- navigator: {
- enabled: true,
- height: 30,
- margin: 10
- },
- rangeSelector: {
- enabled: false
- },
- plotOptions: {
- candlestick: {
- oxymoronic: false,
- animation: false,
- color: negativeColor,
- lineColor: negativeColor,
- upColor: positiveColor,
- upLineColor: positiveColor,
- lineWidth: 2
- },
- column: {
- animation: false,
- borderColor: "#000000"
- },
- series: {
- marker: {
- enabled: false
- },
- enableMouseTracking: true
- }
- },
- tooltip: {
- enabledIndicators: true,
- shared: true,
- backgroundColor: colors[theme].tooltipBackgroundColor,
- borderWidth: 0,
- shadow: false,
- useHTML: true,
- padding: 0,
- formatter: function() {
- let price_dec = base.get("precision");
- let vol_dec = quote.get("precision");
- let time = Highcharts.dateFormat("%Y-%m-%d %H:%M", this.x);
-
- if (!this.points || this.points.length === 0) {
- return "";
- }
-
- let TA =
- this.points[1] && "indicators" in this.points[1]
- ? reduce(
- this.points[1].indicators,
- (finalString, indicator, key) => {
- return (
- finalString +
- "" +
- key.toUpperCase() +
- "" +
- ": " +
- Highcharts.numberFormat(
- indicator[1],
- price_dec,
- ".",
- ","
- ) +
- " "
- );
- },
- ""
- )
- : "";
-
- return (
- "" +
- "Open: " +
- Highcharts.numberFormat(
- this.points[1].point.open,
- price_dec,
- ".",
- ","
- ) +
- " High: " +
- Highcharts.numberFormat(
- this.points[1].point.high,
- price_dec,
- ".",
- ","
- ) +
- " Time: " +
- time +
- " Close: " +
- Highcharts.numberFormat(
- this.points[1].point.close,
- price_dec,
- ".",
- ","
- ) +
- " Low: " +
- Highcharts.numberFormat(
- this.points[1].point.low,
- price_dec,
- ".",
- ","
- ) +
- " Vol: " +
- Highcharts.numberFormat(
- this.points[1] ? this.points[0].point.y : 0,
- vol_dec,
- ".",
- ","
- ) +
- " " +
- quoteSymbol +
- " " +
- TA +
- ""
- );
- },
- positioner: function() {
- return {x: 50, y: -5};
- }
- },
- series: [
- {
- type: "column",
- name: "Volume",
- data: volumeData,
- color: colors[theme].volumeColor,
- yAxis: 1
- },
- {
- id: "primary",
- type: "candlestick",
- name: "Price",
- data: priceSeriesData
- }
- ],
- yAxis: [
- {
- labels: {
- style: {
- color: colors[theme].axisLabelsColor
- },
- align: "left",
- x: 10,
- format: "{value:,." + base.get("precision") + "f}"
- },
- opposite: true,
- title: {
- text: null,
- style: {
- color: colors[theme].axisLabelsColor
- }
- },
- offset: 5,
- lineWidth: 1,
- lineColor: "rgba(183, 183, 183, 0.29)",
- gridLineWidth: 0,
- plotLines: [],
- crosshair: {
- snap: false
- },
- startOnTick: false,
- endOnTick: true,
- showLastLabel: true,
- maxPadding: 0,
- currentPriceIndicator: {
- precision: base.get("precision"),
- backgroundColor: "#C38B8B",
- borderColor: "#000000",
- lineColor: "#C38B8B",
- lineDashStyle: "Solid",
- lineOpacity: 0.8,
- enabled: priceSeriesData.length > 0 && marketReady,
- style: {
- color: "#ffffff",
- fontSize: "10px"
- },
- x: -30,
- y: 0,
- zIndex: 99,
- width: 80
- },
- height: "90%"
- },
- {
- labels: {
- style: {
- color: colors[theme].axisLabelsColor
- },
- align: "left",
- x: 10,
- formatter: function() {
- if (this.value !== 0) {
- if (this.value > 1000000) {
- return (
- Highcharts.numberFormat(
- this.value / 1000,
- 2
- ) + "M"
- );
- } else if (this.value > 1000) {
- return (
- Highcharts.numberFormat(
- this.value / 1000,
- 1
- ) + "k"
- );
- } else {
- return this.value;
- }
- } else {
- return null;
- }
- }
- },
- opposite: false,
- offset: 5,
- gridLineWidth: 0,
- lineWidth: 1,
- lineColor: "rgba(183, 183, 183, 0.29)",
- endOnTick: true,
- showLastLabel: true,
- title: {
- text: null,
- style: {
- color: "#FFFFFF"
- }
- },
- showFirstLabel: true,
- min: 0,
- crosshair: {
- snap: false
- },
- height: "50%",
- top: "50%"
- }
- ],
- xAxis: {
- type: "datetime",
- lineWidth: 1,
- lineColor: colors[theme].axisLineColor,
- labels: {
- style: {
- color: colors[theme].axisLabelsColor
- }
- },
- title: {
- text: null
- },
- plotLines: [],
- min:
- this.props.zoom === "all"
- ? null
- : new Date().getTime() - 1000 * this.props.zoom
- }
- };
-
- // Set up/down colors on volume series
- if (colorByPoint) {
- config.plotOptions.column.colorByPoint = true;
- config.plotOptions.column.colors = volumeColors;
- }
-
- // Add plotline if defined
- // if (this.props.plotLine) {
- // config.xAxis.plotLines.push({
- // color: "red",
- // id: "plot_line",
- // dashStyle: "longdashdot",
- // value: this.props.plotLine,
- // width: 1,
- // zIndex: 5
- // });
- // }
-
- // Fix the height if defined, if not use offsetHeight
- if (this.props.height) {
- config.chart.height =
- this.props.height + 20 * currentIndicator.length;
- } else if (this.state.offsetHeight) {
- config.chart.height = this.state.offsetHeight;
- }
-
- // Add onClick eventlistener if defined
- if (this.props.onClick) {
- config.chart.events = {
- click: this.props.onClick
- };
- }
-
- let boxHeight = 20;
-
- return (
-
-
-
- {!priceSeriesData.length ? (
-
-
-
- ) : null}
-
- {priceSeriesData && volumeData ? (
-
- ) : null}
-
-
-
- );
- }
-}
-
-PriceChart.defaultProps = {
- flat_bids: [],
- flat_asks: [],
- orders: {},
- quoteSymbol: "",
- baseSymbol: ""
-};
-
-PriceChart.propTypes = {
- flat_bids: PropTypes.array.isRequired,
- flat_asks: PropTypes.array.isRequired,
- orders: PropTypes.object.isRequired,
- baseSymbol: PropTypes.string.isRequired,
- quoteSymbol: PropTypes.string.isRequired
-};
-
-export default PriceChart;
diff --git a/app/components/Exchange/PriceChartD3.jsx b/app/components/Exchange/PriceChartD3.jsx
deleted file mode 100644
index 0463775bc2..0000000000
--- a/app/components/Exchange/PriceChartD3.jsx
+++ /dev/null
@@ -1,1185 +0,0 @@
-import React from "react";
-import {format} from "d3-format";
-import {timeFormat} from "d3-time-format";
-import Translate from "react-translate-component";
-import {
- ChartCanvas,
- Chart,
- series,
- scale,
- coordinates,
- tooltip,
- axes,
- indicator,
- helper,
- interactive
-} from "react-stockcharts";
-
-const {
- CandlestickSeries,
- BarSeries,
- LineSeries,
- AreaSeries,
- BollingerSeries,
- MACDSeries
-} = series;
-const {XAxis, YAxis} = axes;
-const {fitWidth} = helper;
-const {discontinuousTimeScaleProvider} = scale;
-const {EdgeIndicator} = coordinates;
-const {ema, sma, macd, bollingerBand} = indicator;
-const {
- CrossHairCursor,
- MouseCoordinateX,
- MouseCoordinateY,
- CurrentCoordinate
-} = coordinates;
-const {FibonacciRetracement, TrendLine} = interactive;
-const {
- OHLCTooltip,
- MovingAverageTooltip,
- BollingerBandTooltip,
- MACDTooltip
-} = tooltip;
-import colors from "assets/colors";
-import {cloneDeep} from "lodash";
-import utils from "common/utils";
-import cnames from "classnames";
-import counterpart from "counterpart";
-import Icon from "../Icon/Icon";
-
-class CandleStickChartWithZoomPan extends React.Component {
- constructor(props) {
- super();
-
- const timeFormatter = timeFormat("%Y-%m-%d %H:%M");
- const {volumeFormat, priceFormat} = this._getFormats(props);
- this.state = {
- enableTrendLine: false,
- enableFib: false,
- tools: [],
- timeFormatter,
- volumeFormat,
- priceFormat,
- margin: {left: 75, right: 75, top: 20, bottom: 30},
- calculators: this._getCalculators(props)
- };
-
- this.onTrendLineComplete = this.onTrendLineComplete.bind(this);
- this.onFibComplete = this.onFibComplete.bind(this);
- this.onKeyPress = this.onKeyPress.bind(this);
- }
-
- componentDidMount() {
- document.addEventListener("keyup", this.onKeyPress, {
- capture: false,
- passive: true
- });
- }
- componentWillUnmount() {
- document.removeEventListener("keyup", this.onKeyPress);
- }
-
- _getFormats(props = this.props) {
- const pricePrecision = props.base.get("precision");
- const volumePrecision = props.quote.get("precision");
- const priceFormat = format(
- `.${
- props.latest && props.latest.full && props.latest.full >= 0.8
- ? 2
- : Math.min(6, pricePrecision)
- }f`
- );
- const volumeFormat = format(`.${Math.min(3, volumePrecision)}s`);
- return {priceFormat, volumeFormat};
- }
-
- onTrendLineComplete() {
- this.setState({
- enableTrendLine: false
- });
- }
-
- onFibComplete() {
- this.setState({
- enableFib: false
- });
- }
-
- onKeyPress(e) {
- const tools = cloneDeep(this.state.tools);
- const ref = this.refs[tools[tools.length - 1]];
- var keyCode = e.which;
- switch (keyCode) {
- case 46: {
- // DEL
- if (ref) ref.removeLast();
- tools.pop();
- this.setState({tools});
- break;
- }
- case 27: {
- // ESC
- if (ref) ref.terminate();
- try {
- // modal uses escape event as well, and this line throws an exception
- this.setState({
- [enableFib]: false
- });
- } catch (e) {}
- break;
- }
- }
- }
-
- componentWillReceiveProps(np) {
- if (np.base !== this.props.base || np.quote !== this.props.quote) {
- this.setState(this._getFormats(np));
- }
-
- let tools = cloneDeep(this.state.tools);
- if (np.tools && np.tools.trendline) {
- this.setState({enableTrendLine: true});
- tools.push("enableTrendLine");
- }
- if (np.tools && np.tools.fib) {
- this.setState({enableFib: true});
- tools.push("enableFib");
- }
- this.setState({tools});
-
- if (
- !utils.are_equal_shallow(np.indicators, this.props.indicators) ||
- !utils.are_equal_shallow(
- np.indicatorSettings,
- this.props.indicatorSettings
- )
- ) {
- this.setState({calculators: this._getCalculators(np)});
- }
- }
-
- _getThemeColors(props = this.props) {
- return colors[props.theme];
- }
-
- _getCalculators(props = this.props) {
- const {positiveColor, negativeColor} = this._getThemeColors(props);
- const {indicatorSettings} = props;
- const calculators = {};
-
- calculators.sma = sma()
- .windowSize(parseInt(indicatorSettings["sma"], 10))
- .sourcePath("close")
- .stroke("#1f77b4")
- .fill("#1f77b4")
- .merge((d, c) => {
- d.sma = c;
- })
- .accessor(d => d.sma);
-
- calculators.ema1 = ema()
- .windowSize(parseInt(indicatorSettings["ema1"], 10))
- .merge((d, c) => {
- d.ema1 = c;
- })
- .accessor(d => d.ema1);
-
- calculators.ema2 = ema()
- .windowSize(parseInt(indicatorSettings["ema2"], 10))
- .merge((d, c) => {
- d.ema2 = c;
- })
- .accessor(d => d.ema2);
-
- calculators.smaVolume = sma()
- .windowSize(parseInt(indicatorSettings["smaVolume"], 10))
- .sourcePath("volume")
- .merge((d, c) => {
- d.smaVolume = c;
- })
- .stroke("#1f77b4")
- .fill("#1f77b4")
- .accessor(d => d.smaVolume);
-
- calculators.bb = bollingerBand()
- .merge((d, c) => {
- d.bb = c;
- })
- .accessor(d => d.bb);
-
- calculators.macd = macd()
- .fast(12)
- .slow(26)
- .signal(9)
- .stroke({macd: negativeColor, signal: positiveColor})
- .merge((d, c) => {
- d.macd = c;
- })
- .accessor(d => d.macd);
-
- return calculators;
- }
-
- _renderVolumeChart(chartMultiplier) {
- const {height, indicators} = this.props;
- const {timeFormatter, volumeFormat, calculators} = this.state;
- const {
- axisLineColor,
- volumeColor,
- indicatorLineColor
- } = this._getThemeColors();
-
- return (
- d.volume, calculators.smaVolume.accessor()]}
- height={height * 0.2}
- origin={(w, h) => [0, h - chartMultiplier * height * 0.2]}
- >
- {indicators.macd ? null : (
-
- )}
-
-
- {indicators.macd ? null : (
-
- )}
-
-
-
-
- d.volume} fill={volumeColor} />
- {indicators.smaVolume ? (
-
- ) : null}
-
- {indicators.smaVolume ? (
-
- ) : null}
- d.volume}
- fill={volumeColor}
- />
-
- d.volume}
- displayFormat={volumeFormat}
- fill="#0F0F0F"
- />
- d.volume}
- displayFormat={volumeFormat}
- fill="#0F0F0F"
- />
-
- {indicators.smaVolume ? (
-
- ) : null}
- {indicators.smaVolume ? (
-
- ) : null}
-
- );
- }
-
- _renderCandleStickChart(chartMultiplier, maCalcs, last) {
- const {height, width, showVolumeChart, indicators} = this.props;
- const {
- timeFormatter,
- volumeFormat,
- priceFormat,
- margin,
- enableTrendLine,
- enableFib,
- calculators
- } = this.state;
- const {
- positiveColor,
- negativeColor,
- strokeColor,
- axisLineColor,
- indicatorLineColor
- } = this._getThemeColors();
-
- let gridWidth = width - margin.left - margin.right;
-
- let showGrid = true;
- let yGrid = showGrid
- ? {innerTickSize: -1 * gridWidth, tickStrokeOpacity: 0.1}
- : {};
-
- return (
- [d.high, d.low],
- calculators.ema1.accessor(),
- calculators.ema2.accessor(),
- calculators.sma.accessor()
- ]}
- padding={{top: 10, bottom: 20}}
- >
- {indicators.macd || showVolumeChart ? null : (
-
- )}
-
-
- {indicators.macd || showVolumeChart ? null : (
-
- )}
-
-
-
-
-
-
- d.close > d.open ? positiveColor : negativeColor
- }
- fill={d =>
- d.close > d.open ? positiveColor : negativeColor
- }
- stroke={d =>
- Math.abs(d.close - d.open) <= last.high / 200
- ? strokeColor || "#000"
- : "#000"
- }
- opacity={0.8}
- />
- {indicators.bb ? (
-
- ) : null}
-
- {indicators.sma ? (
-
- ) : null}
- {indicators.ema1 ? (
-
- ) : null}
- {indicators.ema2 ? (
-
- ) : null}
-
- {indicators.sma ? (
-
- ) : null}
- {indicators.ema1 ? (
-
- ) : null}
- {indicators.ema2 ? (
-
- ) : null}
-
- d.close}
- displayFormat={priceFormat}
- fill={d =>
- d.close > d.open ? positiveColor : negativeColor
- }
- />
- d.close}
- displayFormat={priceFormat}
- fill={d =>
- d.close > d.open ? positiveColor : negativeColor
- }
- />
-
-
-
- {maCalcs.length ? (
-
- ) : null}
-
- {indicators.bb ? (
-
- ) : null}
-
- [d.high, d.low]}
- onComplete={this.onTrendLineComplete}
- stroke={axisLineColor}
- fontStroke={axisLineColor}
- />
-
-
-
- );
- }
-
- render() {
- const {
- width,
- priceData,
- height,
- ratio,
- theme,
- zoom,
- indicators,
- showVolumeChart,
- enableChartClamp
- } = this.props;
- const {
- timeFormatter,
- enableFib,
- enableTrendLine,
- margin,
- calculators
- } = this.state;
- const themeColors = colors[theme];
- const {axisLineColor, indicatorLineColor} = themeColors;
- let chartMultiplier = showVolumeChart ? 1 : 0; // Used to adjust the height of the charts and their positioning
- // if (indicators.bb) calc.push(bb);
-
- // Indicator calculators
- let calc = [],
- maCalcs = [],
- tooltipIncludes = ["sma", "ema1", "ema2", "smaVolume"];
-
- // if (showVolumeChart) maCalcs.push(calculators["smaVolume"]);
-
- for (let i in indicators) {
- if (indicators[i]) {
- // Don't add volume indicators if the volume chart is off
- if (
- i.toLowerCase().indexOf("volume") !== -1 &&
- !showVolumeChart
- )
- continue;
- // Add active calculators
- calc.push(calculators[i]);
- // Add calculators needing tooltips
- if (tooltipIncludes.indexOf(i) !== -1)
- maCalcs.push(calculators[i]);
- }
- }
- if (indicators["macd"]) chartMultiplier++;
-
- const filterDate = new Date(new Date().getTime() - zoom * 1000);
- const filteredData =
- zoom === "all"
- ? priceData
- : priceData.filter(a => {
- return a.date > filterDate;
- });
- const last = filteredData[filteredData.length - 1] || {high: 1};
- return (
- d.date}
- xScaleProvider={discontinuousTimeScaleProvider}
- xExtents={[
- filteredData[0].date,
- filteredData[filteredData.length - 1].date
- ]}
- type="hybrid"
- className="ps-child no-overflow Stockcharts__wrapper ps-must-propagate"
- drawMode={enableTrendLine || enableFib}
- >
- >
- {showVolumeChart ? (
- this._renderVolumeChart(chartMultiplier)
- ) : (
-
- )}
- {this._renderCandleStickChart(chartMultiplier, maCalcs, last)}
- {indicators.macd ? (
- [
- 0,
- h -
- (chartMultiplier - (showVolumeChart ? 1 : 0)) *
- height *
- 0.2
- ]}
- padding={{top: 40, bottom: 10}}
- >
-
-
-
-
-
-
-
-
-
- ) : (
-
- ) /* Need to return an empty element here, null triggers an error */}
-
-
- );
- }
-}
-
-CandleStickChartWithZoomPan = fitWidth(CandleStickChartWithZoomPan);
-export default class Wrapper extends React.Component {
- constructor() {
- super();
-
- this.state = {
- dropdowns: {
- indicators: false,
- tools: false,
- settings: false
- }
- };
-
- this._onInputHeight = this._onInputHeight.bind(this);
- this._listener = this._listener.bind(this);
- }
-
- shouldComponentUpdate(np, ns) {
- if (!np.marketReady && !this.props.marketReady) return false;
- if (!np.priceData.length && !this.props.priceData.length) return false;
- return (
- !utils.are_equal_shallow(np.priceData, this.props.priceData) ||
- !utils.are_equal_shallow(np.indicators, this.props.indicators) ||
- !utils.are_equal_shallow(
- np.indicatorSettings,
- this.props.indicatorSettings
- ) ||
- !utils.are_equal_shallow(np.tools, this.props.tools) ||
- !utils.are_equal_shallow(ns, this.state) ||
- np.height !== this.props.height ||
- np.chartHeight !== this.props.chartHeight ||
- np.width !== this.props.width ||
- np.leftOrderBook !== this.props.leftOrderBook ||
- np.zoom !== this.props.zoom ||
- np.showVolumeChart !== this.props.showVolumeChart ||
- np.enableChartClamp !== this.props.enableChartClamp
- );
- }
-
- componentDidUpdate(prevProps) {
- if (prevProps.leftOrderBook !== this.props.leftOrderBook) {
- if (this.refs.FitWidth) this.refs.FitWidth.handleWindowResize();
- }
- }
-
- componentWillUnmount() {
- document.removeEventListener("click", this._listener);
- }
-
- _toggleTools(key) {
- this._resetDropdowns();
- this.props.onChangeTool(key);
- this.forceUpdate();
- }
-
- _changeSettings(payload, e) {
- e.persist();
- e.stopPropagation();
- e.nativeEvent.stopImmediatePropagation();
- }
-
- _onInputHeight(e) {
- const val = e.target.value;
- this.props.onChangeChartHeight({value: parseInt(val, 10)});
- }
-
- _toggleDropdown(key, e) {
- e.stopPropagation();
- const {dropdowns} = this.state;
- let newState = {};
- for (let k in this.state.dropdowns) {
- if (k === key) newState[k] = !dropdowns[k];
- else newState[k] = false;
- }
- if (newState[key]) {
- document.addEventListener("click", this._listener, {
- capture: false,
- passive: true
- });
- }
- this.setState({dropdowns: newState});
- }
-
- _listener() {
- this._resetDropdowns();
- document.removeEventListener("click", this._listener);
- }
-
- _stopPropagation(e) {
- e.stopPropagation();
- e.nativeEvent.stopImmediatePropagation();
- }
-
- _resetDropdowns() {
- let dropdowns = {};
- for (let key in this.state.dropdowns) {
- dropdowns[key] = false;
- }
- this.setState({dropdowns});
- }
-
- render() {
- const {
- currentPeriod,
- buckets,
- bucketSize,
- indicators,
- indicatorSettings
- } = this.props;
- const {dropdowns} = this.state;
-
- // Lower bar
- let bucketText = function(size) {
- if (size === "all") {
- return counterpart.translate("exchange.zoom_all");
- } else if (size < 60) {
- return size + "s";
- } else if (size < 3600) {
- return size / 60 + "m";
- } else if (size < 86400) {
- return size / 3600 + "h";
- } else if (size < 604800) {
- return size / 86400 + "d";
- } else if (size < 2592000) {
- return size / 604800 + "w";
- } else {
- return size / 2592000 + "m";
- }
- };
-
- let bucketOptions = buckets
- .filter(bucket => {
- return bucket > 60 * 4;
- })
- .map(bucket => {
- return (
-
- {bucketText(bucket)}
-
- );
- });
-
- let oneHour = 3600,
- oneDay = oneHour * 24;
- let zoomPeriods = [
- oneHour * 6,
- oneHour * 48,
- oneHour * 48 * 2,
- oneHour * 24 * 7,
- oneDay * 14,
- oneDay * 30,
- oneDay * 30 * 3,
- "all"
- ];
-
- let zoomOptions = zoomPeriods.map(period => {
- return (
-
- {bucketText(period)}
-
- );
- });
-
- /* Indicators dropdown */
- const indicatorOptionsVolume = [];
- const indicatorOptionsPrice = Object.keys(indicators)
- .map(i => {
- let hasSetting = i in indicatorSettings;
- let settingInput = hasSetting ? (
-
- ) : null;
-
- if (i.toLowerCase().indexOf("volume") !== -1) {
- if (!this.props.showVolumeChart) return null;
- indicatorOptionsVolume.push(
-
-
-
-
-
- {settingInput}
-
- );
- } else {
- return (
-
-
-
-
-
- {settingInput}
-
- );
- }
- })
- .filter(a => !!a);
-
- /* Tools dropdown */
- const toolsOptions = Object.keys(this.props.tools).map(i => {
- return (
-
-
-
-
-
- );
- });
-
- /* Tools dropdown */
- const settingsOptions = ["volume", "height", "clamp_chart"].map(i => {
- let content;
- switch (i) {
- case "height": {
- content = (
-
-
-
-
-
-
- );
- break;
- }
-
- case "volume": {
- content = (
-
-
-
-
-
-
- );
- break;
- }
-
- case "clamp_chart": {
- content = (
-
-
-
-
-
-
- );
- break;
- }
-
- default: {
- content = TBD;
- }
- }
- return content;
- });
-
- if (!this.props.priceData.length) {
- return (
-
- );
- }
-
- const translator = require("counterpart");
-
- return (
-
-
-
-
- {/* Chart controls */}
- -
-
-
- :
-
- {zoomOptions}
-
-
- -
-
-
- :
-
- {bucketOptions}
-
-
-
- -
-
-
-
- {dropdowns.indicators ? (
-
-
- -
-
-
- {indicatorOptionsPrice}
-
- {indicatorOptionsVolume.length ? (
- -
-
-
- ) : null}
- {indicatorOptionsVolume}
-
-
- ) : null}
-
-
- -
-
-
-
- {dropdowns.tools ? (
-
- ) : null}
-
-
- -
-
-
-
- {dropdowns.settings ? (
-
- ) : null}
-
-
-
-
- );
- }
-}
diff --git a/app/components/Exchange/TradingViewPriceChart.jsx b/app/components/Exchange/TradingViewPriceChart.jsx
index eaaf66b1a7..46ee366dc4 100644
--- a/app/components/Exchange/TradingViewPriceChart.jsx
+++ b/app/components/Exchange/TradingViewPriceChart.jsx
@@ -41,7 +41,7 @@ export default class TradingViewPriceChart extends React.Component {
}/charting_library/`,
datafeed: dataFeed,
container_id: "tv_chart",
- charts_storage_url: "http://saveload.tradingview.com",
+ charts_storage_url: "https://saveload.tradingview.com",
charts_storage_api_version: "1.1",
client_id: "tradingview.com",
user_id: "public_user_id",
@@ -58,11 +58,12 @@ export default class TradingViewPriceChart extends React.Component {
"scalesProperties.lineColor": themeColors.axisLineColor,
"scalesProperties.textColor": themeColors.textColor
},
- theme: props.theme, // don't think this does anything yet
- custom_css_url: "custom-css.css",
- enabled_features: ["study_templates"],
+ custom_css_url: props.theme + ".css",
+ enabled_features: [
+ "study_templates",
+ "keep_left_toolbar_visible_on_small_screens"
+ ],
disabled_features: [
- "use_localstorage_for_settings",
"header_saveload",
"symbol_info",
"symbol_search_hot_key",
diff --git a/app/components/Explorer/Accounts.jsx b/app/components/Explorer/Accounts.jsx
index 181565094d..2fb77c2738 100644
--- a/app/components/Explorer/Accounts.jsx
+++ b/app/components/Explorer/Accounts.jsx
@@ -1,6 +1,6 @@
import React from "react";
import PropTypes from "prop-types";
-import {Link} from "react-router/es";
+import {Link} from "react-router-dom";
import Immutable from "immutable";
import Translate from "react-translate-component";
import AccountActions from "actions/AccountActions";
diff --git a/app/components/Explorer/AccountsContainer.jsx b/app/components/Explorer/AccountsContainer.jsx
index 2ca36140af..d2c9bc15b5 100644
--- a/app/components/Explorer/AccountsContainer.jsx
+++ b/app/components/Explorer/AccountsContainer.jsx
@@ -2,11 +2,10 @@ import React from "react";
import AccountStore from "stores/AccountStore";
import AltContainer from "alt-container";
import Accounts from "./Accounts";
-import Explorer from "./Explorer";
class AccountsContainer extends React.Component {
render() {
- let content = (
+ return (
);
-
- return ;
}
}
diff --git a/app/components/Explorer/Assets.jsx b/app/components/Explorer/Assets.jsx
index 49cc16f08f..86f097b00f 100644
--- a/app/components/Explorer/Assets.jsx
+++ b/app/components/Explorer/Assets.jsx
@@ -2,7 +2,7 @@ import React from "react";
import PropTypes from "prop-types";
import AssetActions from "actions/AssetActions";
import SettingsActions from "actions/SettingsActions";
-import {Link} from "react-router/es";
+import {Link} from "react-router-dom";
import Immutable from "immutable";
import Translate from "react-translate-component";
import LinkToAccountById from "../Utility/LinkToAccountById";
diff --git a/app/components/Explorer/AssetsContainer.jsx b/app/components/Explorer/AssetsContainer.jsx
index 5c53083f37..79faaa1676 100644
--- a/app/components/Explorer/AssetsContainer.jsx
+++ b/app/components/Explorer/AssetsContainer.jsx
@@ -3,11 +3,10 @@ import AssetStore from "stores/AssetStore";
import SettingsStore from "stores/SettingsStore";
import AltContainer from "alt-container";
import Assets from "./Assets";
-import Explorer from "./Explorer";
class AssetsContainer extends React.Component {
render() {
- let content = (
+ return (
);
-
- return ;
}
}
diff --git a/app/components/Explorer/Blocks.jsx b/app/components/Explorer/Blocks.jsx
index 73f67411da..6c3b08f51c 100644
--- a/app/components/Explorer/Blocks.jsx
+++ b/app/components/Explorer/Blocks.jsx
@@ -1,5 +1,5 @@
import React from "react";
-import {Link} from "react-router/es";
+import {Link} from "react-router-dom";
import BlockchainActions from "actions/BlockchainActions";
import Translate from "react-translate-component";
import {FormattedDate} from "react-intl";
@@ -513,7 +513,7 @@ class Blocks extends React.Component {
-
+
@@ -531,7 +531,7 @@ class Blocks extends React.Component {
}}
ref="operations"
>
-
+
@@ -558,7 +558,7 @@ class Blocks extends React.Component {
}}
ref="blocks"
>
-
+
diff --git a/app/components/Explorer/BlocksContainer.jsx b/app/components/Explorer/BlocksContainer.jsx
index b90c117d1c..6250231440 100644
--- a/app/components/Explorer/BlocksContainer.jsx
+++ b/app/components/Explorer/BlocksContainer.jsx
@@ -2,11 +2,10 @@ import React from "react";
import BlockchainStore from "stores/BlockchainStore";
import AltContainer from "alt-container";
import Blocks from "./Blocks";
-import Explorer from "./Explorer";
class BlocksContainer extends React.Component {
render() {
- let content = (
+ return (
);
-
- return ;
}
}
diff --git a/app/components/Explorer/CommitteeMembers.jsx b/app/components/Explorer/CommitteeMembers.jsx
index 22fb6775bb..a442eec772 100644
--- a/app/components/Explorer/CommitteeMembers.jsx
+++ b/app/components/Explorer/CommitteeMembers.jsx
@@ -9,21 +9,16 @@ import Translate from "react-translate-component";
import {connect} from "alt-react";
import SettingsActions from "actions/SettingsActions";
import SettingsStore from "stores/SettingsStore";
-import Explorer from "./Explorer";
-import PropTypes from "prop-types";
+import {withRouter} from "react-router-dom";
class CommitteeMemberCard extends React.Component {
static propTypes = {
committee_member: ChainTypes.ChainAccount.isRequired
};
- static contextTypes = {
- router: PropTypes.object.isRequired
- };
-
_onCardClick(e) {
e.preventDefault();
- this.context.router.push(
+ this.props.history.push(
`/account/${this.props.committee_member.get("name")}`
);
}
@@ -74,19 +69,16 @@ class CommitteeMemberCard extends React.Component {
}
}
CommitteeMemberCard = BindToChainState(CommitteeMemberCard);
+CommitteeMemberCard = withRouter(CommitteeMemberCard);
class CommitteeMemberRow extends React.Component {
static propTypes = {
committee_member: ChainTypes.ChainAccount.isRequired
};
- static contextTypes = {
- router: PropTypes.object.isRequired
- };
-
_onRowClick(e) {
e.preventDefault();
- this.context.router.push(
+ this.props.history.push(
`/account/${this.props.committee_member.get("name")}`
);
}
@@ -126,6 +118,7 @@ class CommitteeMemberRow extends React.Component {
}
}
CommitteeMemberRow = BindToChainState(CommitteeMemberRow);
+CommitteeMemberRow = withRouter(CommitteeMemberRow);
class CommitteeMemberList extends React.Component {
static propTypes = {
@@ -365,7 +358,7 @@ class CommitteeMembers extends React.Component {
}
}
- let content = (
+ return (
@@ -421,8 +414,6 @@ class CommitteeMembers extends React.Component {
);
-
- return ;
}
}
CommitteeMembers = BindToChainState(CommitteeMembers);
diff --git a/app/components/Explorer/Explorer.jsx b/app/components/Explorer/Explorer.jsx
index c1aecd8171..17c0090deb 100644
--- a/app/components/Explorer/Explorer.jsx
+++ b/app/components/Explorer/Explorer.jsx
@@ -1,18 +1,14 @@
import React from "react";
import {Tabs, Tab} from "../Utility/Tabs";
-import PropTypes from "prop-types";
+import Witnesses from "./Witnesses";
+import CommitteeMembers from "./CommitteeMembers";
+import FeesContainer from "../Blockchain/FeesContainer";
+import BlocksContainer from "./BlocksContainer";
+import AssetsContainer from "./AssetsContainer";
+import AccountsContainer from "./AccountsContainer";
+import MarketsContainer from "../Exchange/MarketsContainer";
class Explorer extends React.Component {
- static propTypes = {
- tab: PropTypes.string,
- content: PropTypes.object
- };
-
- static defaultProps = {
- tab: "blocks",
- content: null
- };
-
constructor(props) {
super(props);
@@ -21,54 +17,64 @@ class Explorer extends React.Component {
{
name: "blocks",
link: "/explorer/blocks",
- translate: "explorer.blocks.title"
+ translate: "explorer.blocks.title",
+ content: BlocksContainer
},
{
name: "assets",
link: "/explorer/assets",
- translate: "explorer.assets.title"
+ translate: "explorer.assets.title",
+ content: AssetsContainer
},
{
name: "accounts",
link: "/explorer/accounts",
- translate: "explorer.accounts.title"
+ translate: "explorer.accounts.title",
+ content: AccountsContainer
},
{
name: "witnesses",
link: "/explorer/witnesses",
- translate: "explorer.witnesses.title"
+ translate: "explorer.witnesses.title",
+ content: Witnesses
},
{
name: "committee_members",
link: "/explorer/committee-members",
- translate: "explorer.committee_members.title"
+ translate: "explorer.committee_members.title",
+ content: CommitteeMembers
},
{
name: "markets",
link: "/explorer/markets",
- translate: "markets.title"
+ translate: "markets.title",
+ content: MarketsContainer
},
- {name: "fees", link: "/explorer/fees", translate: "fees.title"}
+ {
+ name: "fees",
+ link: "/explorer/fees",
+ translate: "fees.title",
+ content: FeesContainer
+ }
]
};
}
render() {
- let defaultActiveTab = this.state.tabs.findIndex(
- t => t.name === this.props.tab
- );
+ let {tab} = this.props.match.params;
+ let defaultActiveTab = this.state.tabs.findIndex(t => t.name === tab);
let tabs = [];
for (var i = 0; i < this.state.tabs.length; i++) {
let currentTab = this.state.tabs[i];
- let tabContent = defaultActiveTab == i ? this.props.content : null;
+ let TabContent = currentTab.content;
let isLinkTo = defaultActiveTab == i ? "" : currentTab.link;
tabs.push(
- {tabContent}
+
);
}
@@ -77,7 +83,7 @@ class Explorer extends React.Component {
;
-
- return ;
- }
-}
-
-export default FeesContainer;
diff --git a/app/components/Explorer/MarketsContainer.jsx b/app/components/Explorer/MarketsContainer.jsx
deleted file mode 100644
index 92b0a366a5..0000000000
--- a/app/components/Explorer/MarketsContainer.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import Explorer from "./Explorer";
-import RealMarketsContainer from "../Exchange/MarketsContainer";
-
-class MarketsContainer extends React.Component {
- render() {
- let content = ;
-
- return ;
- }
-}
-
-export default MarketsContainer;
diff --git a/app/components/Explorer/Witnesses.jsx b/app/components/Explorer/Witnesses.jsx
index 8eb8eb82f2..f784f196ae 100644
--- a/app/components/Explorer/Witnesses.jsx
+++ b/app/components/Explorer/Witnesses.jsx
@@ -11,8 +11,7 @@ import {connect} from "alt-react";
import SettingsActions from "actions/SettingsActions";
import SettingsStore from "stores/SettingsStore";
import classNames from "classnames";
-import Explorer from "./Explorer";
-import PropTypes from "prop-types";
+import {withRouter} from "react-router-dom";
require("./witnesses.scss");
@@ -21,13 +20,9 @@ class WitnessCard extends React.Component {
witness: ChainTypes.ChainAccount.isRequired
};
- static contextTypes = {
- router: PropTypes.object.isRequired
- };
-
_onCardClick(e) {
e.preventDefault();
- this.context.router.push(`/account/${this.props.witness.get("name")}`);
+ this.props.history.push(`/account/${this.props.witness.get("name")}`);
}
render() {
@@ -104,19 +99,16 @@ class WitnessCard extends React.Component {
}
}
WitnessCard = BindToChainState(WitnessCard);
+WitnessCard = withRouter(WitnessCard);
class WitnessRow extends React.Component {
static propTypes = {
witness: ChainTypes.ChainAccount.isRequired
};
- static contextTypes = {
- router: PropTypes.object.isRequired
- };
-
_onRowClick(e) {
e.preventDefault();
- this.context.router.push(`/account/${this.props.witness.get("name")}`);
+ this.props.history.push(`/account/${this.props.witness.get("name")}`);
}
// componentWillUnmount() {
@@ -180,6 +172,7 @@ class WitnessRow extends React.Component {
}
}
WitnessRow = BindToChainState(WitnessRow);
+WitnessRow = withRouter(WitnessRow);
class WitnessList extends React.Component {
static propTypes = {
@@ -436,7 +429,7 @@ class Witnesses extends React.Component {
);
}
- let content = (
+ return (
@@ -570,7 +563,6 @@ class Witnesses extends React.Component {
);
- return ;
}
}
Witnesses = BindToChainState(Witnesses);
diff --git a/app/components/Forms/AccountNameInput.jsx b/app/components/Forms/AccountNameInput.jsx
index 6ce9a70d76..645ad72f1c 100644
--- a/app/components/Forms/AccountNameInput.jsx
+++ b/app/components/Forms/AccountNameInput.jsx
@@ -159,7 +159,7 @@ class AccountNameInput extends React.Component {
id="username"
type="text"
ref="input"
- autoComplete="off"
+ autoComplete="username"
placeholder={null}
onChange={this.handleChange}
onKeyDown={this.onKeyDown}
diff --git a/app/components/Forms/PasswordInput.jsx b/app/components/Forms/PasswordInput.jsx
index f9bb611ce7..6f84725488 100644
--- a/app/components/Forms/PasswordInput.jsx
+++ b/app/components/Forms/PasswordInput.jsx
@@ -179,11 +179,11 @@ class PasswordInput extends Component {
? 0
: null
}}
- id="password"
+ id="current-password"
name="password"
type="password"
ref="password"
- autoComplete="off"
+ autoComplete="current-password"
onChange={this.handleChange}
onKeyDown={this.onKeyDown}
/>
@@ -220,7 +220,7 @@ class PasswordInput extends Component {
name="confirm_password"
type="password"
ref="confirm_password"
- autoComplete="off"
+ autoComplete="confirm-password"
onChange={this.handleChange}
/>
{confirmMatch ? (
diff --git a/app/components/Help.jsx b/app/components/Help.jsx
index d047f88910..001073c3c7 100644
--- a/app/components/Help.jsx
+++ b/app/components/Help.jsx
@@ -4,9 +4,10 @@ import {toPairs} from "lodash-es";
class Help extends React.Component {
render() {
- let path = toPairs(this.props.params)
+ let path = toPairs(this.props.match.params)
.map(p => p[1])
.join("/");
+
return (
diff --git a/app/components/InitError.jsx b/app/components/InitError.jsx
index d164bf1606..d92ff27eb6 100644
--- a/app/components/InitError.jsx
+++ b/app/components/InitError.jsx
@@ -83,10 +83,7 @@ class InitError extends React.Component {
-
+
@@ -124,20 +121,20 @@ class InitError extends React.Component {
-
+
{this.props.rpc_connection_status ===
"open" ? (
) : (
)}
@@ -151,7 +148,7 @@ class InitError extends React.Component {
className="button outline"
onClick={this.onReloadClick}
>
-
+
{
- if (!err) {
- if (this.unlisten && this.state.active !== newState.pathname) {
- this.setState({
- active: newState.pathname
- });
- }
+ this.unlisten = this.props.history.listen(newState => {
+ if (this.unlisten && this.state.active !== newState.pathname) {
+ this.setState({
+ active: newState.pathname
+ });
}
});
}
@@ -167,7 +159,7 @@ class Header extends React.Component {
});
}
- this.context.router.push(route);
+ this.props.history.push(route);
this._closeDropdown();
}
@@ -208,10 +200,10 @@ class Header extends React.Component {
_accountClickHandler(account_name, e) {
e.preventDefault();
ZfApi.publish("account_drop_down", "close");
- if (this.context.location.pathname.indexOf("/account/") !== -1) {
- let currentPath = this.context.location.pathname.split("/");
+ if (this.props.location.pathname.indexOf("/account/") !== -1) {
+ let currentPath = this.props.location.pathname.split("/");
currentPath[2] = account_name;
- this.context.router.push(currentPath.join("/"));
+ this.props.history.push(currentPath.join("/"));
}
if (account_name !== this.props.currentAccount) {
AccountActions.setCurrentAccount.defer(account_name);
@@ -225,16 +217,8 @@ class Header extends React.Component {
});
this._closeDropdown();
}
- // this.onClickUser(account_name, e);
}
- // onClickUser(account, e) {
- // e.stopPropagation();
- // e.preventDefault();
- //
- // this.context.router.push(`/account/${account}/overview`);
- // }
-
_toggleAccountDropdownMenu() {
// prevent state toggling if user cannot have multiple accounts
@@ -314,12 +298,14 @@ class Header extends React.Component {
let maxHeight = Math.max(40, height - 67 - 36) + "px";
const a = ChainStore.getAccount(currentAccount);
+ const showAccountLinks = !!a;
const isMyAccount = !a
? false
: AccountStore.isMyAccount(a) ||
(passwordLogin && currentAccount === passwordAccount);
const isContact = this.props.contacts.has(currentAccount);
const enableDepositWithdraw =
+ !!a &&
Apis.instance() &&
Apis.instance().chain_id &&
Apis.instance().chain_id.substr(0, 8) === "4018d784";
@@ -1253,7 +1239,7 @@ class Header extends React.Component {
) : null}
- {!isMyAccount ? (
+ {!isMyAccount && showAccountLinks ? (
+
- {!hasLocalWallet && (
+ {showAccountLinks ? (
- )}
+ ) : null}
)}
diff --git a/app/components/Layout/MobileMenu.jsx b/app/components/Layout/MobileMenu.jsx
deleted file mode 100644
index 1a9fab7c62..0000000000
--- a/app/components/Layout/MobileMenu.jsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import React from "react";
-import Panel from "react-foundation-apps/src/panel";
-import Trigger from "react-foundation-apps/src/trigger";
-import {Link} from "react-router/es";
-import ZfApi from "react-foundation-apps/src/utils/foundation-api";
-import Translate from "react-translate-component";
-import AccountStore from "stores/AccountStore";
-import {connect} from "alt-react";
-import WalletUnlockStore from "stores/WalletUnlockStore";
-import WalletManagerStore from "stores/WalletManagerStore";
-import SettingsStore from "stores/SettingsStore";
-import {Apis} from "bitsharesjs-ws";
-
-class MobileMenu extends React.Component {
- constructor() {
- super();
- this.state = {};
- }
-
- static contextTypes = {
- router: PropTypes.object
- };
-
- onClick() {
- ZfApi.publish("mobile-menu", "close");
- }
-
- _onNavigate(route, e) {
- e.preventDefault();
- this.context.router.push(route);
- ZfApi.publish("mobile-menu", "close");
- }
-
- render() {
- let {id, currentAccount, myActiveAccounts, myAccounts} = this.props;
- let accounts = null;
-
- if (myActiveAccounts.size > 1) {
- accounts = myActiveAccounts
- .sort((a, b) => {
- if (a > b) return 1;
- if (a < b) return -1;
- return 0;
- })
- .map(a => {
- return (
-
- {a}
-
- );
- });
- } else if (myActiveAccounts.size === 1) {
- accounts = (
-
-
-
-
-
- );
- }
-
- let linkToAccountOrDashboard;
- if (myActiveAccounts.size > 0)
- linkToAccountOrDashboard = (
-
-
-
- );
- else
- linkToAccountOrDashboard = (
- Create Account
- );
-
- let tradeLink = this.props.lastMarket ? (
-
-
-
- ) : (
-
-
-
- );
-
- return (
-
-
-
- ×
-
-
-
- - {linkToAccountOrDashboard}
- -
-
-
-
-
- {myActiveAccounts.size === 0 ? null : (
- - {tradeLink}
- )}
- {currentAccount &&
- myAccounts.indexOf(currentAccount) !== -1 ? (
- -
-
-
-
-
- ) : null}
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
- );
- }
-}
-
-MobileMenu = connect(MobileMenu, {
- listenTo() {
- return [
- AccountStore,
- WalletUnlockStore,
- WalletManagerStore,
- SettingsStore
- ];
- },
- getProps() {
- const chainID = Apis.instance().chain_id;
- return {
- myActiveAccounts: AccountStore.getState().myActiveAccounts,
- currentAccount: AccountStore.getState().currentAccount,
- locked: WalletUnlockStore.getState().locked,
- current_wallet: WalletManagerStore.getState().current_wallet,
- lastMarket: SettingsStore.getState().viewSettings.get(
- `lastMarket${chainID ? "_" + chainID.substr(0, 8) : ""}`
- ),
- myAccounts: AccountStore.getMyAccounts()
- };
- }
-});
-
-export default class WidthWrapper extends React.Component {
- constructor() {
- super();
-
- let width = window && window.innerWidth;
- this.state = {
- visible: width <= 640
- };
-
- this._checkWidth = this._checkWidth.bind(this);
- }
-
- componentDidMount() {
- window.addEventListener("resize", this._checkWidth, {
- capture: false,
- passive: true
- });
- }
-
- componentWillUnmount() {
- window.removeEventListener("resize", this._checkWidth);
- }
-
- _checkWidth() {
- let width = window && window.innerWidth;
- let visible = width <= 640;
- if (visible !== this.state.visible) {
- this.setState({visible});
- }
- }
-
- render() {
- if (!this.state.visible) return null;
- return ;
- }
-}
diff --git a/app/components/LoadingIndicator.jsx b/app/components/LoadingIndicator.jsx
index ab2d16a51c..5f0ab23501 100644
--- a/app/components/LoadingIndicator.jsx
+++ b/app/components/LoadingIndicator.jsx
@@ -78,7 +78,7 @@ class LoadingIndicator extends React.Component {
{this.props.loadingText && (
{this.props.loadingText}
diff --git a/app/components/LoginSelector.jsx b/app/components/LoginSelector.jsx
index c4ee2d5d8b..2dce59278f 100644
--- a/app/components/LoginSelector.jsx
+++ b/app/components/LoginSelector.jsx
@@ -1,7 +1,7 @@
import React from "react";
import {connect} from "alt-react";
import AccountStore from "stores/AccountStore";
-import {Link} from "react-router/es";
+import {Link} from "react-router-dom";
import Translate from "react-translate-component";
import TranslateWithLinks from "./Utility/TranslateWithLinks";
import {isIncognito} from "feature_detect";
@@ -11,6 +11,9 @@ import WalletUnlockActions from "actions/WalletUnlockActions";
import ActionSheet from "react-foundation-apps/src/action-sheet";
import SettingsStore from "stores/SettingsStore";
import IntlActions from "actions/IntlActions";
+import CreateAccount from "./Account/CreateAccount";
+import CreateAccountPassword from "./Account/CreateAccountPassword";
+import {Route} from "react-router-dom";
const FlagImage = ({flag, width = 50, height = 50}) => {
return (
@@ -33,22 +36,22 @@ class LoginSelector extends React.Component {
};
}
- componentDidUpdate() {
- const myAccounts = AccountStore.getMyAccounts();
-
- // use ChildCount to make sure user is on /create-account page except /create-account/*
- // to prevent redirect when user just registered and need to make backup of wallet or password
- const childCount = React.Children.count(this.props.children);
-
- // do redirect to portfolio if user already logged in
- if (
- this.props.router &&
- Array.isArray(myAccounts) &&
- myAccounts.length !== 0 &&
- childCount === 0
- )
- this.props.router.push("/account/" + this.props.currentAccount);
- }
+ // componentDidUpdate() {
+ // const myAccounts = AccountStore.getMyAccounts();
+
+ // use ChildCount to make sure user is on /create-account page except /create-account/*
+ // to prevent redirect when user just registered and need to make backup of wallet or password
+ // const childCount = React.Children.count(this.props.children);
+
+ // do redirect to portfolio if user already logged in
+ // if (
+ // this.props.history &&
+ // Array.isArray(myAccounts) &&
+ // myAccounts.length !== 0 &&
+ // childCount === 0
+ // )
+ // this.props.history.push("/account/" + this.props.currentAccount);
+ // }
componentWillMount() {
isIncognito(incognito => {
@@ -57,14 +60,12 @@ class LoginSelector extends React.Component {
}
onSelect(route) {
- this.props.router.push("/create-account/" + route);
+ this.props.history.push("/create-account/" + route);
}
render() {
const translator = require("counterpart");
- const childCount = React.Children.count(this.props.children);
-
const flagDropdown = (
@@ -120,104 +121,108 @@ class LoginSelector extends React.Component {
- {childCount == 0 ? null : (
-
-
-
- )}
- {childCount == 1 ? null : (
-
-
-
+
+
+
-
-
-
- {flagDropdown}
-
+
+
+
+
+
- )}
-
- {!!childCount ? null : (
-
-
-
-
-
- {
- SettingsActions.changeSetting({
- setting: "passwordLogin",
- value: true
- });
- WalletUnlockActions.unlock.defer();
- }}
- >
-
-
-
- )}
-
- {!!childCount ? null : (
-
-
-
-
-
- )}
+
+
+
+
+
+
+
+ {
+ SettingsActions.changeSetting.defer({
+ setting: "passwordLogin",
+ value: true
+ });
+ WalletUnlockActions.unlock().catch(
+ () => {}
+ );
+ }}
+ >
+
+
+
+
+
+
+
+
+
- {this.props.children}
+
+
diff --git a/app/components/Modal/BorrowModal.jsx b/app/components/Modal/BorrowModal.jsx
index 46932f073b..f0c58bb6dd 100755
--- a/app/components/Modal/BorrowModal.jsx
+++ b/app/components/Modal/BorrowModal.jsx
@@ -20,6 +20,7 @@ import HelpContent from "../Utility/HelpContent";
import Immutable from "immutable";
import {ChainStore} from "bitsharesjs/es";
import {List} from "immutable";
+import Icon from "../Icon/Icon";
/**
* Given an account and an asset id, render a modal allowing modification of a margin position for that asset
@@ -139,6 +140,11 @@ class BorrowModalContent extends React.Component {
ZfApi.publish(this.props.modalId, "close");
}
+ toggleLockedCR(e) {
+ e.preventDefault();
+ this.setState({lockedCR: !this.state.lockedCR ? true : false})
+ }
+
_onBorrowChange(e) {
let feed_price = this._getFeedPrice();
let amount = e.amount.replace(/,/g, "");
@@ -191,18 +197,25 @@ class BorrowModalContent extends React.Component {
target.value = target.value.replace(/[^0-9.]/g, "");
}
- // Catch initial decimal input
- if (target.value.charAt(0) == ".") {
- target.value = "0.";
- }
-
let ratio = target.value;
+ let short_amount;
+ let collateral;
- let newState = {
- short_amount: this.state.short_amount,
- collateral: (this.state.short_amount / feed_price * ratio).toFixed(
+ if(this.state.lockedCR) {
+ short_amount = (this.state.collateral * feed_price / ratio).toFixed(
this.props.backing_asset.get("precision")
- ),
+ );
+ collateral = this.state.collateral;
+ } else {
+ short_amount = this.state.short_amount;
+ collateral = (this.state.short_amount / feed_price * ratio).toFixed(
+ this.props.backing_asset.get("precision")
+ )
+ }
+
+ let newState = {
+ short_amount: short_amount,
+ collateral: collateral,
collateral_ratio: ratio
};
@@ -743,6 +756,9 @@ class BorrowModalContent extends React.Component {
) : null}
+
+
+
-
-
+
+
@@ -38,7 +35,7 @@ export default class BrowserSupportModal extends React.Component {
>
-
+
diff --git a/app/components/Modal/SendModal.jsx b/app/components/Modal/SendModal.jsx
index d08062794d..9a71fc4251 100644
--- a/app/components/Modal/SendModal.jsx
+++ b/app/components/Modal/SendModal.jsx
@@ -24,10 +24,6 @@ import classnames from "classnames";
import PropTypes from "prop-types";
class SendModal extends React.Component {
- static contextTypes = {
- router: PropTypes.object
- };
-
constructor(props) {
super(props);
this.state = this.getInitialState(props);
@@ -507,11 +503,6 @@ class SendModal extends React.Component {
this.setState({propose_account});
}
- onProposeTooltip() {
- this.onClose();
- this.context.router.push("/help/accounts/proposed");
- }
-
render() {
let {
propose,
@@ -798,16 +789,6 @@ class SendModal extends React.Component {
scroll_length={2}
/>
- {/* */}
diff --git a/app/components/News.jsx b/app/components/News.jsx
index 5bcdf1be13..26d8ab183c 100644
--- a/app/components/News.jsx
+++ b/app/components/News.jsx
@@ -173,11 +173,6 @@ class News extends React.Component {
-
{isWrong && }
{isLoading ? : null}
diff --git a/app/components/Page404/Page404.jsx b/app/components/Page404/Page404.jsx
index 972e54852d..89a91a9578 100644
--- a/app/components/Page404/Page404.jsx
+++ b/app/components/Page404/Page404.jsx
@@ -1,5 +1,5 @@
import React from "react";
-import {Link} from "react-router";
+import {Link} from "react-router-dom";
import {connect} from "alt-react";
import SettingsStore from "stores/SettingsStore";
import Translate from "react-translate-component";
diff --git a/app/components/Settings/AccessSettings.jsx b/app/components/Settings/AccessSettings.jsx
index a29a9e35eb..eb1315407a 100644
--- a/app/components/Settings/AccessSettings.jsx
+++ b/app/components/Settings/AccessSettings.jsx
@@ -5,7 +5,7 @@ import SettingsStore from "stores/SettingsStore";
import {settingsAPIs} from "../../api/apiConfig";
import willTransitionTo from "../../routerTransition";
// import {routerTransitioner} from "../../routerTransition";
-import {withRouter} from "react-router/es";
+import {withRouter} from "react-router-dom";
import {connect} from "alt-react";
import cnames from "classnames";
import Icon from "../Icon/Icon";
@@ -39,12 +39,7 @@ class ApiNode extends React.Component {
});
setTimeout(
function() {
- willTransitionTo(
- this.props.router,
- this.props.router.replace,
- () => {},
- false
- );
+ willTransitionTo(false);
}.bind(this),
50
);
diff --git a/app/components/Settings/AccountsSettings.jsx b/app/components/Settings/AccountsSettings.jsx
index 3679fb08da..d6997aadb5 100644
--- a/app/components/Settings/AccountsSettings.jsx
+++ b/app/components/Settings/AccountsSettings.jsx
@@ -1,5 +1,5 @@
import React from "react";
-import {Link} from "react-router/es";
+import {Link} from "react-router-dom";
import AccountStore from "stores/AccountStore";
import AccountActions from "actions/AccountActions";
import {connect} from "alt-react";
diff --git a/app/components/Settings/Settings.jsx b/app/components/Settings/Settings.jsx
index 6782b6eb55..c442ef0cd5 100644
--- a/app/components/Settings/Settings.jsx
+++ b/app/components/Settings/Settings.jsx
@@ -13,21 +13,15 @@ import ResetSettings from "./ResetSettings";
import BackupSettings from "./BackupSettings";
import AccessSettings from "./AccessSettings";
import {set} from "lodash-es";
-import PropTypes from "prop-types";
class Settings extends React.Component {
- static contextTypes = {
- router: PropTypes.object.isRequired
- };
-
constructor(props) {
super();
-
let menuEntries = this._getMenuEntries(props);
let activeSetting = 0;
- let tabIndex = !!props.params.tab
- ? menuEntries.indexOf(props.params.tab)
+ let tabIndex = !!props.match.params.tab
+ ? menuEntries.indexOf(props.match.params.tab)
: props.viewSettings.get("activeSetting", 0);
if (tabIndex >= 0) activeSetting = tabIndex;
@@ -57,8 +51,8 @@ class Settings extends React.Component {
}
componentDidUpdate(prevProps) {
- if (prevProps.params.tab !== this.props.params.tab) {
- this._onChangeMenu(this.props.params.tab);
+ if (prevProps.match.params.tab !== this.props.match.params.tab) {
+ this._onChangeMenu(this.props.match.params.tab);
}
}
@@ -239,7 +233,7 @@ class Settings extends React.Component {
}
_redirectToEntry(entry) {
- this.context.router.push("/settings/" + entry);
+ this.props.history.push("/settings/" + entry);
}
_onChangeMenu(entry) {
diff --git a/app/components/Transfer/Transfer.jsx b/app/components/Transfer/Transfer.jsx
index 18b6618fc4..077024b016 100644
--- a/app/components/Transfer/Transfer.jsx
+++ b/app/components/Transfer/Transfer.jsx
@@ -21,12 +21,13 @@ import {
import {debounce, isNaN} from "lodash-es";
import classnames from "classnames";
import {Asset} from "common/MarketClasses";
+import queryString from "query-string";
class Transfer extends React.Component {
constructor(props) {
super(props);
let state = Transfer.getInitialState();
- let {query} = this.props.location;
+ let query = queryString.parse(props.location.search) || {};
if (query.from) {
state.from_name = query.from;
diff --git a/app/components/Utility/AssetName.jsx b/app/components/Utility/AssetName.jsx
index 54554b02bb..4cd28586da 100644
--- a/app/components/Utility/AssetName.jsx
+++ b/app/components/Utility/AssetName.jsx
@@ -30,6 +30,7 @@ class AssetName extends React.Component {
render() {
let {replace, asset, noPrefix, customClass, noTip} = this.props;
+ if (!asset) return null;
const name = asset.get("symbol");
const isBitAsset = asset.has("bitasset");
const isPredMarket =
@@ -55,19 +56,19 @@ class AssetName extends React.Component {
optional =
realPrefix || includeBitAssetDescription
? counterpart.translate(
- "gateway.assets." +
- (hasBitPrefix
- ? "bit"
- : realPrefix
- .replace(".", "")
- .toLowerCase()),
- {
- asset: name,
- backed: includeBitAssetDescription
- ? desc.main
- : replacedName
- }
- )
+ "gateway.assets." +
+ (hasBitPrefix
+ ? "bit"
+ : realPrefix
+ .replace(".", "")
+ .toLowerCase()),
+ {
+ asset: name,
+ backed: includeBitAssetDescription
+ ? desc.main
+ : replacedName
+ }
+ )
: "";
} catch (e) {}
if (isBitAsset && name === "CNY") {
@@ -85,13 +86,13 @@ class AssetName extends React.Component {
? null
: ` ${upperCasePrefix ||
""}${replacedName.toUpperCase()} ${
- includeBitAssetDescription
- ? ""
- : " " +
+ includeBitAssetDescription
+ ? ""
+ : " " +
(desc.short ? desc.short : desc.main || "")
- }${
- !isBitAsset || includeBitAssetDescription ? optional : ""
- } `;
+ }${
+ !isBitAsset || includeBitAssetDescription ? optional : ""
+ } `;
return (
p && p !== "#");
if (path.length === 0) return false;
let route = "/" + path.join("/");
- this.props.router.push(route);
+ this.props.history.push(route);
return false;
}
@@ -112,7 +112,6 @@ class HelpContent extends React.Component {
render() {
let locale = this.props.locale || counterpart.getLocale() || "en";
-
if (!HelpData[locale]) {
console.error(
`missing locale '${locale}' help files, rolling back to 'en'`
@@ -161,7 +160,16 @@ class HelpContent extends React.Component {
}
if (this.props.section) {
- value = value[this.props.section];
+ /* The previously used remarkable-loader parsed the md properly as an object, the new one does not */
+ for (let key in value) {
+ if (!!key.match(this.props.section)) {
+ value = key.replace(
+ new RegExp("^" + this.props.section + ","),
+ ""
+ );
+ break;
+ }
+ }
}
if (!value) {
diff --git a/app/components/Utility/LinkToAccountById.jsx b/app/components/Utility/LinkToAccountById.jsx
index 5466044548..2066d4bc68 100644
--- a/app/components/Utility/LinkToAccountById.jsx
+++ b/app/components/Utility/LinkToAccountById.jsx
@@ -1,5 +1,5 @@
import React from "react";
-import {Link} from "react-router/es";
+import {Link} from "react-router-dom";
import ChainTypes from "./ChainTypes";
import BindToChainState from "./BindToChainState";
import PropTypes from "prop-types";
diff --git a/app/components/Utility/LinkToAssetById.jsx b/app/components/Utility/LinkToAssetById.jsx
index dafff5a3df..6c658570ec 100644
--- a/app/components/Utility/LinkToAssetById.jsx
+++ b/app/components/Utility/LinkToAssetById.jsx
@@ -1,5 +1,5 @@
import React from "react";
-import {Link} from "react-router/es";
+import {Link} from "react-router-dom";
import AssetWrapper from "./AssetWrapper";
import AssetName from "./AssetName";
diff --git a/app/components/Utility/MarketLink.jsx b/app/components/Utility/MarketLink.jsx
index 6b628b0a44..50ff912543 100644
--- a/app/components/Utility/MarketLink.jsx
+++ b/app/components/Utility/MarketLink.jsx
@@ -1,5 +1,5 @@
import React from "react";
-import {Link} from "react-router/es";
+import {Link} from "react-router-dom";
import ChainTypes from "./ChainTypes";
import AssetWrapper from "./AssetWrapper";
import AssetName from "./AssetName";
diff --git a/app/components/Utility/Tabs.jsx b/app/components/Utility/Tabs.jsx
index 9daa6bfe36..75d6f0e15f 100644
--- a/app/components/Utility/Tabs.jsx
+++ b/app/components/Utility/Tabs.jsx
@@ -1,11 +1,11 @@
import React from "react";
import PropTypes from "prop-types";
-import Translate from "react-translate-component";
import cnames from "classnames";
import {connect} from "alt-react";
import SettingsActions from "actions/SettingsActions";
import SettingsStore from "stores/SettingsStore";
import counterpart from "counterpart";
+import {withRouter} from "react-router-dom";
/**
* Renders a tab layout, handling switching and optionally persists the currently open tab using the SettingsStore
@@ -115,10 +115,6 @@ class Tabs extends React.Component {
style: {}
};
- static contextTypes = {
- router: PropTypes.object.isRequired
- };
-
constructor(props) {
super();
this.state = {
@@ -165,8 +161,7 @@ class Tabs extends React.Component {
// Persist current tab if desired
if (isLinkTo !== "") {
- this.context.router.push(isLinkTo);
- return;
+ this.props.history.push(isLinkTo);
}
if (this.props.setting) {
@@ -274,4 +269,6 @@ Tabs = connect(Tabs, {
}
});
+Tabs = withRouter(Tabs);
+
export {Tabs, Tab};
diff --git a/app/components/Utility/TranslateWithLinks.jsx b/app/components/Utility/TranslateWithLinks.jsx
index 4107886508..d582d4bd6a 100644
--- a/app/components/Utility/TranslateWithLinks.jsx
+++ b/app/components/Utility/TranslateWithLinks.jsx
@@ -3,7 +3,7 @@ import counterpart from "counterpart";
import utils from "common/utils";
import LinkToAccountById from "../Utility/LinkToAccountById";
import LinkToAssetById from "../Utility/LinkToAssetById";
-import {Link} from "react-router/es";
+import {Link} from "react-router-dom";
import FormattedAsset from "../Utility/FormattedAsset";
import FormattedPrice from "../Utility/FormattedPrice";
import AssetName from "../Utility/AssetName";
diff --git a/app/components/Wallet/Backup.jsx b/app/components/Wallet/Backup.jsx
index e9d4486549..be66cc7c0c 100644
--- a/app/components/Wallet/Backup.jsx
+++ b/app/components/Wallet/Backup.jsx
@@ -1,6 +1,6 @@
import React, {Component} from "react";
import PropTypes from "prop-types";
-import {Link} from "react-router/es";
+import {Link} from "react-router-dom";
import {FormattedDate} from "react-intl";
import {connect} from "alt-react";
import WalletActions from "actions/WalletActions";
diff --git a/app/components/Wallet/Brainkey.jsx b/app/components/Wallet/Brainkey.jsx
index 3d762c768d..37e4822063 100644
--- a/app/components/Wallet/Brainkey.jsx
+++ b/app/components/Wallet/Brainkey.jsx
@@ -67,7 +67,7 @@ class ViewBrainkey extends Component {
}
ViewBrainkey = connect(ViewBrainkey, connectObject);
-class BrainkeyAccounts {
+class BrainkeyAccounts extends React.Component {
static propTypes = {
accounts: ChainTypes.ChainAccountsList.isRequired
};
diff --git a/app/components/Wallet/ExistingAccount.jsx b/app/components/Wallet/ExistingAccount.jsx
index bf1ece1964..7175e2c007 100644
--- a/app/components/Wallet/ExistingAccount.jsx
+++ b/app/components/Wallet/ExistingAccount.jsx
@@ -1,9 +1,13 @@
import React, {Component} from "react";
-import {Link} from "react-router/es";
+import {Link} from "react-router-dom";
import {connect} from "alt-react";
import WalletManagerStore from "stores/WalletManagerStore";
-import BalanceClaimActive from "components/Wallet/BalanceClaimActive";
+import BalanceClaimActive from "./BalanceClaimActive";
import Translate from "react-translate-component";
+import {Switch, Route} from "react-router-dom";
+import Brainkey from "./Brainkey";
+import ImportKeys from "./ImportKeys";
+import {BackupRestore} from "./Backup";
const connectObject = {
listenTo() {
@@ -37,6 +41,33 @@ class ExistingAccount extends Component {
)}
+
+
+
+
+
+
+
{this.props.children}
@@ -97,4 +128,5 @@ class ExistingAccountOptions extends Component {
}
ExistingAccountOptions = connect(ExistingAccountOptions, connectObject);
-export {ExistingAccount, ExistingAccountOptions};
+export default ExistingAccount;
+export {ExistingAccountOptions};
diff --git a/app/components/Wallet/PasswordConfirm.jsx b/app/components/Wallet/PasswordConfirm.jsx
index 9b96b67e08..8856813856 100644
--- a/app/components/Wallet/PasswordConfirm.jsx
+++ b/app/components/Wallet/PasswordConfirm.jsx
@@ -27,8 +27,38 @@ export default class PasswordConfirm extends Component {
}
}
+ formChange(event) {
+ let key =
+ event.target.id === "current-password" ? "password" : "confirm";
+ let state = {};
+ state[key] = event.target.value;
+ this.setState(state, this.validate);
+ }
+
+ validate(state = this.state) {
+ let {password, confirm} = state;
+ confirm = confirm.trim();
+ password = password.trim();
+
+ let errors = Immutable.Map();
+ // Don't report until typing begins
+ if (password.length !== 0 && password.length < 8)
+ errors = errors.set(
+ "password_length",
+ "Password must be 8 characters or more"
+ );
+
+ // Don't report it until the confirm is populated
+ if (password !== "" && confirm !== "" && password !== confirm)
+ errors = errors.set("password_match", "Passwords do not match");
+
+ let valid = password.length >= 8 && password === confirm;
+ this.setState({errors, valid});
+ this.props.onValid(valid ? password : null);
+ }
+
render() {
- var {password, confirm, valid, errors} = this.state;
+ const {password, confirm, errors} = this.state;
let {newPassword} = this.props;
let tabIndex = 1;
@@ -43,10 +73,11 @@ export default class PasswordConfirm extends Component {
@@ -60,9 +91,10 @@ export default class PasswordConfirm extends Component {
@@ -77,33 +109,4 @@ export default class PasswordConfirm extends Component {
);
}
-
- formChange(event) {
- var state = this.state;
- state[event.target.id] = event.target.value;
- this.setState(state);
- this.validate(state);
- }
-
- validate(state) {
- var {password, confirm} = state;
- confirm = confirm.trim();
- password = password.trim();
-
- var errors = Immutable.Map();
- // Don't report until typing begins
- if (password.length !== 0 && password.length < 8)
- errors = errors.set(
- "password_length",
- "Password must be 8 characters or more"
- );
-
- // Don't report it until the confirm is populated
- if (password !== "" && confirm !== "" && password !== confirm)
- errors = errors.set("password_match", "Passwords do not match");
-
- var valid = password.length >= 8 && password === confirm;
- this.setState({errors, valid});
- this.props.onValid(valid ? password : null);
- }
}
diff --git a/app/components/Wallet/WalletChangePassword.jsx b/app/components/Wallet/WalletChangePassword.jsx
index c2ac2d8505..ffab65ddc6 100644
--- a/app/components/Wallet/WalletChangePassword.jsx
+++ b/app/components/Wallet/WalletChangePassword.jsx
@@ -1,5 +1,5 @@
import React, {Component} from "react";
-import {Link} from "react-router/es";
+import {Link} from "react-router-dom";
import Translate from "react-translate-component";
import notify from "actions/NotificationActions";
import cname from "classnames";
@@ -147,7 +147,8 @@ class WalletPassword extends Component {
"wallet.current_pass"
)}
type="password"
- id="password"
+ id="current-password"
+ autoComplete="current-password"
onChange={this.formChange.bind(this)}
value={this.state.password}
/>
diff --git a/app/components/Wallet/WalletCreate.jsx b/app/components/Wallet/WalletCreate.jsx
index caa1f1bb3c..003b5ec92e 100644
--- a/app/components/Wallet/WalletCreate.jsx
+++ b/app/components/Wallet/WalletCreate.jsx
@@ -1,5 +1,5 @@
import React, {Component} from "react";
-import {Link} from "react-router/es";
+import {Link} from "react-router-dom";
import Translate from "react-translate-component";
import BrainkeyInput from "components/Wallet/BrainkeyInput";
import PasswordConfirm from "components/Wallet/PasswordConfirm";
@@ -40,8 +40,8 @@ class CreateNewWallet extends Component {
}
onPassword(valid_password) {
- this.state.valid_password = valid_password;
- this.setState({valid_password}, this.validate);
+ if (valid_password !== this.state.valid_password)
+ this.setState({valid_password}, this.validate);
}
onCustomBrainkey() {
@@ -49,7 +49,6 @@ class CreateNewWallet extends Component {
}
onBrainkey(brnkey) {
- this.state.brnkey = brnkey;
this.setState({brnkey}, this.validate);
}
diff --git a/app/components/Wallet/WalletManager.jsx b/app/components/Wallet/WalletManager.jsx
index ef3a70639e..10a1246492 100644
--- a/app/components/Wallet/WalletManager.jsx
+++ b/app/components/Wallet/WalletManager.jsx
@@ -1,5 +1,5 @@
import React, {Component} from "react";
-import {Link} from "react-router/es";
+import {Link} from "react-router-dom";
import {connect} from "alt-react";
import WalletActions from "actions/WalletActions";
import BackupActions from "actions/BackupActions";
@@ -7,6 +7,14 @@ import WalletManagerStore from "stores/WalletManagerStore";
import Translate from "react-translate-component";
import cname from "classnames";
import counterpart from "counterpart";
+import {Switch, Route} from "react-router-dom";
+import {ExistingAccountOptions} from "./ExistingAccount";
+import ImportKeys from "./ImportKeys";
+import BalanceClaimActive from "./BalanceClaimActive";
+import WalletChangePassword from "./WalletChangePassword";
+import {WalletCreate} from "./WalletCreate";
+import {BackupCreate, BackupRestore} from "./Backup";
+import BackupBrainkey from "./BackupBrainkey";
const connectObject = {
listenTo() {
@@ -66,7 +74,63 @@ class WalletManager extends Component {
/>
- {this.props.children}
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -135,7 +199,7 @@ class WalletOptions extends Component {
Dummy
-
+
@@ -153,7 +217,7 @@ class WalletOptions extends Component {
{has_wallet ? (
-
+
@@ -161,14 +225,14 @@ class WalletOptions extends Component {
) : null}
{has_wallet ? (
-
+
) : null}
-
+
@@ -178,14 +242,14 @@ class WalletOptions extends Component {
{has_wallet ? : null}
-
+
{has_wallet ? (
-
+
@@ -193,7 +257,7 @@ class WalletOptions extends Component {
) : null}
{has_wallet ? (
-
+
@@ -269,7 +333,7 @@ class ChangeActiveWallet extends Component {
-
+
@@ -439,4 +503,5 @@ class WalletDelete extends Component {
}
WalletDelete = connect(WalletDelete, connectObject);
-export {WalletManager, WalletOptions, ChangeActiveWallet, WalletDelete};
+export default WalletManager;
+export {WalletOptions, ChangeActiveWallet, WalletDelete};
diff --git a/app/components/Wallet/WalletUnlockModal.jsx b/app/components/Wallet/WalletUnlockModal.jsx
index 3e3427c895..6543117e2f 100644
--- a/app/components/Wallet/WalletUnlockModal.jsx
+++ b/app/components/Wallet/WalletUnlockModal.jsx
@@ -33,13 +33,9 @@ import {
KeyFileLabel
} from "./WalletUnlockModalLib";
import {backupName} from "common/backupUtils";
-import PropTypes from "prop-types";
+import {withRouter} from "react-router-dom";
class WalletUnlockModal extends React.Component {
- static contextTypes = {
- router: PropTypes.object
- };
-
constructor(props) {
super(props);
this.state = this.initialState(props);
@@ -79,6 +75,7 @@ class WalletUnlockModal extends React.Component {
}
shouldComponentUpdate(np, ns) {
+ if (this.state.isOpen && !ns.isOpen) return false;
return (
!utils.are_equal_shallow(np, this.props) ||
!utils.are_equal_shallow(ns, this.state)
@@ -248,7 +245,7 @@ class WalletUnlockModal extends React.Component {
closeRedirect = path => {
WalletUnlockActions.cancel();
- this.context.router.push(path);
+ this.props.history.push(path);
};
handleCreateWallet = () => this.closeRedirect("/create-account/wallet");
@@ -343,8 +340,7 @@ class WalletUnlockModal extends React.Component {
passwordLogin,
modalId,
currentWallet,
- walletNames,
- dbWallet
+ walletNames
} = this.props;
const {
walletSelected,
@@ -352,7 +348,8 @@ class WalletUnlockModal extends React.Component {
passwordError,
customError,
accountName,
- stopAskingForBackup
+ stopAskingForBackup,
+ isOpen
} = this.state;
const noWalletNames = !(walletNames.size > 0);
@@ -374,106 +371,115 @@ class WalletUnlockModal extends React.Component {
modalHeader="header.unlock_short"
leftHeader
>
- | | |