15 |
16 |
17 | {t('chart.depth', {
18 | baseCurrency: state.baseCurrency,
19 | quoteCurrency: state.quoteCurrency,
20 | })}
21 |
22 |
23 |
24 |
25 | );
26 | };
27 |
28 | export default Chart;
29 |
--------------------------------------------------------------------------------
/app/renderer/views/Exchange/Chart.scss:
--------------------------------------------------------------------------------
1 | @import '~sass-extras/index';
2 | @import '../../styles/variables';
3 |
4 | .Exchange--Chart {
5 | padding: 15px;
6 | padding-bottom: 0;
7 |
8 | .chart-container {
9 | flex: 1;
10 | position: relative;
11 | border-top: 2px solid var(--section-border-color);
12 |
13 | h3 {
14 | position: relative;
15 | margin-top: 10px;
16 | text-align: center;
17 | z-index: 10;
18 | }
19 |
20 | .DepthChart {
21 | position: absolute;
22 | top: -6px;
23 | left: -6px;
24 | right: -14px;
25 | bottom: -6px;
26 |
27 | .Empty {
28 | position: absolute;
29 | top: 0;
30 | right: 0;
31 | bottom: 0;
32 | left: 0;
33 | padding-bottom: 30px;
34 | }
35 | }
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/app/renderer/views/Exchange/Exchange.scss:
--------------------------------------------------------------------------------
1 | @import '~sass-extras/index';
2 | @import '../../styles/variables';
3 |
4 | .Exchange {
5 | --text-size: 13px;
6 | --header-text-size: 18px;
7 | display: grid;
8 | grid-template-areas:
9 | 'buy chart sell'
10 | 'buy swaps sell';
11 | grid-template-rows: 1fr 1fr;
12 | grid-template-columns: 280px 1fr 280px;
13 | grid-gap: 20px;
14 | height: 100%;
15 |
16 | h3 {
17 | font-size: var(--header-text-size);
18 | font-weight: 500;
19 | }
20 |
21 | &--Buy {
22 | grid-area: buy;
23 | }
24 |
25 | &--Sell {
26 | grid-area: sell;
27 | }
28 |
29 | &--Chart {
30 | grid-area: chart;
31 | }
32 |
33 | &--Swaps {
34 | grid-area: swaps;
35 | }
36 |
37 | &--Buy,
38 | &--Sell,
39 | &--Chart,
40 | &--Swaps {
41 | display: flex;
42 | background-color: var(--widget-background-color);
43 | border-radius: 4px;
44 | }
45 |
46 | @media (min-width: 1400px) {
47 | grid-template-columns: 320px 1fr 320px;
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/app/renderer/views/Exchange/Swaps.scss:
--------------------------------------------------------------------------------
1 | .Exchange--Swaps,
2 | .Trades {
3 | display: flex;
4 | flex-direction: column;
5 |
6 | header {
7 | display: flex;
8 | justify-content: space-between;
9 | align-items: center;
10 | width: 100%;
11 | padding: 0 20px;
12 | border-bottom: 1px solid var(--section-border-color);
13 |
14 | h3,
15 | nav span {
16 | padding: 16px 0;
17 | }
18 |
19 | h3 {
20 | margin: 0;
21 | }
22 | }
23 |
24 | main {
25 | display: flex;
26 | flex: 1;
27 | }
28 |
29 | .history-button {
30 | align-self: center;
31 | margin-left: 10px;
32 | font-size: 12px;
33 | cursor: default;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/app/renderer/views/Exchange/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {Subscribe} from 'unstated';
3 | import exchangeContainer from 'containers/Exchange';
4 | import TabView from 'views/TabView';
5 | import Intro from './Intro';
6 | import Order from './Order';
7 | import Chart from './Chart';
8 | import Swaps from './Swaps';
9 | import './Exchange.scss';
10 |
11 | const Exchange = () => {
12 | exchangeContainer.watchOrderBook();
13 |
14 | return (
15 |