Merge branch 'develop' of github.com:andrerfneves/zcash-reference-wallet into feature/build-pipeline
|
@ -30,6 +30,7 @@ describe('Transactions Actions', () => {
|
|||
const payload = {
|
||||
list: [],
|
||||
zecPrice: 0,
|
||||
hasNextPage: false,
|
||||
};
|
||||
|
||||
store.dispatch(loadTransactionsSuccess(payload));
|
||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { Button } from '../../app/components/button';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { Clipboard } from '../../app/components/clipboard';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
|
@ -6,13 +6,12 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { ColumnComponent } from '../../app/components/column';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
describe('<ColumnComponent />', () => {
|
||||
test('should render correctly', () => {
|
||||
// $FlowFixMe
|
||||
const { container } = render(
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<ColumnComponent>
|
||||
|
|
|
@ -6,13 +6,12 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { Divider } from '../../app/components/divider';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
describe('<Divider />', () => {
|
||||
test('should render correctly', () => {
|
||||
// $FlowFixMe
|
||||
const { container } = render(
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<Divider opacity={0.3} />
|
||||
|
|
|
@ -7,7 +7,7 @@ import 'jest-dom/extend-expect';
|
|||
|
||||
import { DropdownComponent } from '../../app/components/dropdown';
|
||||
import { Button } from '../../app/components/button';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
@ -28,8 +28,8 @@ describe('<DropdownComponent />', () => {
|
|||
/>
|
||||
)}
|
||||
options={[
|
||||
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
|
||||
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
|
||||
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log }, // eslint-disable-line
|
||||
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log }, // eslint-disable-line
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
@ -53,8 +53,8 @@ describe('<DropdownComponent />', () => {
|
|||
/>
|
||||
)}
|
||||
options={[
|
||||
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
|
||||
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
|
||||
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log }, // eslint-disable-line
|
||||
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log }, // eslint-disable-line
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { EmptyTransactionsComponent } from '../../app/components/empty-transactions';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { InputLabelComponent } from '../../app/components/input-label';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { InputComponent } from '../../app/components/input';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { LoadingScreen } from '../../app/components/loading-screen';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
@ -14,7 +14,7 @@ describe('<LoadingScreen />', () => {
|
|||
test('should render status pill correctly', () => {
|
||||
const { queryByTestId } = render(
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<LoadingScreen progress={83.0} />
|
||||
<LoadingScreen progress={83.0} message='ZEC Wallet Starting' />
|
||||
</ThemeProvider>,
|
||||
);
|
||||
|
||||
|
|
|
@ -11,7 +11,7 @@ afterEach(cleanup);
|
|||
describe('<QRCode />', () => {
|
||||
test('should render qrcode component correctly', () => {
|
||||
const { queryByTestId } = render(
|
||||
<QRCode value='https://z.cash.foundation' />,
|
||||
<QRCode value='https://znfd.org' />,
|
||||
);
|
||||
|
||||
expect(queryByTestId('QRCode')).toBeInTheDocument();
|
||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { RowComponent } from '../../app/components/row';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { SelectComponent } from '../../app/components/select';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
@ -33,7 +33,7 @@ describe('<SelectComponent />', () => {
|
|||
const { queryByTestId } = render(
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<SelectComponent
|
||||
onChange={console.log}
|
||||
onChange={console.log} // eslint-disable-line
|
||||
value='asbh1yeasbdh23848asdasd'
|
||||
placeholder='Select a address'
|
||||
options={[
|
||||
|
@ -51,7 +51,7 @@ describe('<SelectComponent />', () => {
|
|||
const { container } = render(
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<SelectComponent
|
||||
onChange={console.log}
|
||||
onChange={console.log} // eslint-disable-line
|
||||
value='asbh1yeasbdh23848asdasd'
|
||||
placeholder='Select a address'
|
||||
options={[
|
||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { StatusPill } from '../../app/components/status-pill';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { TextComponent } from '../../app/components/text';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { TransactionItemComponent } from '../../app/components/transaction-item';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
@ -21,6 +21,7 @@ describe('<TransactionItem />', () => {
|
|||
amount={0.8652}
|
||||
date={new Date().toISOString()}
|
||||
zecPrice={2.94}
|
||||
fees={0.0001}
|
||||
/>
|
||||
</ThemeProvider>,
|
||||
);
|
||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { TransactionDailyComponent } from '../../app/components/transaction-daily';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
@ -26,6 +26,8 @@ describe('<TransactionDailyComponent />', () => {
|
|||
amount: 1.7891,
|
||||
zecPrice: 1.345,
|
||||
date: new Date().toISOString(),
|
||||
theme: appTheme,
|
||||
fees: 0.001,
|
||||
},
|
||||
{
|
||||
type: 'send',
|
||||
|
@ -34,6 +36,8 @@ describe('<TransactionDailyComponent />', () => {
|
|||
amount: 0.8458,
|
||||
zecPrice: 1.344,
|
||||
date: new Date().toISOString(),
|
||||
theme: appTheme,
|
||||
fees: 0.001,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
|
|
@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
|
|||
import 'jest-dom/extend-expect';
|
||||
|
||||
import { WalletAddress } from '../../app/components/wallet-address';
|
||||
import appTheme from '../../app/theme';
|
||||
import { appTheme } from '../../app/theme';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
|
|
|
@ -15,23 +15,25 @@ afterEach(() => app.stop());
|
|||
|
||||
describe('Send', () => {
|
||||
test('should load "Send Page"', async () => {
|
||||
expect(app.client.element('#send-wrapper')
|
||||
.isVisible()).resolves.toEqual(true);
|
||||
expect(app.client.element('#send-wrapper').isVisible()).resolves.toEqual(true);
|
||||
});
|
||||
|
||||
test('should show Additional Options click', async () => {
|
||||
expect(app.client.element('#send-wrapper #send-fee-wrapper')
|
||||
.isVisible()).resolves.toEqual(false);
|
||||
expect(app.client.element('#send-wrapper #send-fee-wrapper').isVisible()).resolves.toEqual(
|
||||
false,
|
||||
);
|
||||
|
||||
await app.client.element('#send-show-additional-options-button').click();
|
||||
|
||||
expect(app.client.element('#send-wrapper #send-fee-wrapper')
|
||||
.isVisible()).resolves.toEqual(true);
|
||||
expect(app.client.element('#send-wrapper #send-fee-wrapper').isVisible()).resolves.toEqual(
|
||||
true,
|
||||
);
|
||||
});
|
||||
|
||||
test('should disable send button if required fields are empty', async () => {
|
||||
expect(app.client.element('#send-submit-button')
|
||||
.getAttribute('disabled')).resolves.toEqual(true);
|
||||
expect(app.client.element('#send-submit-button').getAttribute('disabled')).resolves.toEqual(
|
||||
true,
|
||||
);
|
||||
});
|
||||
|
||||
test('should enable send button if required fields are filled', async () => {
|
||||
|
@ -68,8 +70,9 @@ describe('Send', () => {
|
|||
|
||||
await app.client.element('#send-submit-button').click();
|
||||
|
||||
expect(app.client.element('#send-confirm-transaction-modal')
|
||||
.isVisible()).resolves.toEqual(true);
|
||||
expect(app.client.element('#send-confirm-transaction-modal').isVisible()).resolves.toEqual(
|
||||
true,
|
||||
);
|
||||
});
|
||||
|
||||
test('should display a load indicator while the transaction is processed', async () => {
|
||||
|
@ -91,15 +94,14 @@ describe('Send', () => {
|
|||
expect(app.client.getAttribute('#send-confirm-transaction-modal img', 'src')).resolves.toEqual(
|
||||
expect.stringContaining('/assets/sync_icon.png'),
|
||||
);
|
||||
expect(app.client.getText('#send-confirm-transaction-modal p'))
|
||||
.resolves.toEqual('Processing transaction...');
|
||||
expect(app.client.element('#confirm-modal-button')
|
||||
.isVisible()).resolves.toEqual(false);
|
||||
expect(app.client.getText('#send-confirm-transaction-modal p')).resolves.toEqual(
|
||||
'Processing transaction...',
|
||||
);
|
||||
expect(app.client.element('#confirm-modal-button').isVisible()).resolves.toEqual(false);
|
||||
});
|
||||
|
||||
test('should show an error in invalid transaction', async () => {
|
||||
expect(app.client.element('#send-error-text')
|
||||
.isVisible()).resolves.toEqual(false);
|
||||
expect(app.client.element('#send-error-text').isVisible()).resolves.toEqual(false);
|
||||
|
||||
await app.client.element('#sidebar a:nth-child(1)').click();
|
||||
await app.client.element('#sidebar a:nth-child(2)').click();
|
||||
|
@ -124,8 +126,7 @@ describe('Send', () => {
|
|||
});
|
||||
|
||||
test('should show a success screen after transaction and show a transaction item', async () => {
|
||||
expect(app.client.element('#send-success-wrapper')
|
||||
.isVisible()).resolves.toEqual(false);
|
||||
expect(app.client.element('#send-success-wrapper').isVisible()).resolves.toEqual(false);
|
||||
|
||||
await app.client.element('#sidebar a:nth-child(1)').click();
|
||||
await app.client.element('#sidebar a:nth-child(2)').click();
|
||||
|
@ -149,10 +150,11 @@ describe('Send', () => {
|
|||
|
||||
await app.client.waitUntilTextExists('#transaction-item-operation-id-1', 'Send');
|
||||
|
||||
expect(await app.client.element('#transaction-item-operation-id-1 img')
|
||||
.isVisible()).toEqual(true);
|
||||
expect(await app.client.element('#transaction-item-operation-id-1 img').isVisible()).toEqual(
|
||||
true,
|
||||
);
|
||||
expect(
|
||||
await app.client.element('#transaction-item-operation-id-1 img').getAttribute('src'),
|
||||
).toEndWith('/assets/transaction_sent_icon.svg');
|
||||
).toEndWith('/assets/transaction_sent_icon_dark.svg');
|
||||
});
|
||||
});
|
||||
|
|
12
app/app.js
|
@ -7,9 +7,9 @@ import { ThemeProvider } from 'styled-components';
|
|||
|
||||
import { configureStore, history } from './redux/create';
|
||||
import { Router } from './router/container';
|
||||
import theme, { GlobalStyle } from './theme';
|
||||
import { appTheme as theme, GlobalStyle } from './theme';
|
||||
import electronStore from '../config/electron-store';
|
||||
import { DARK } from './constants/themes';
|
||||
import { DARK, THEME_MODE } from './constants/themes';
|
||||
|
||||
const store = configureStore({});
|
||||
|
||||
|
@ -20,15 +20,15 @@ type State = {
|
|||
|
||||
export class App extends Component<Props, State> {
|
||||
state = {
|
||||
themeMode: electronStore.get('THEME_MODE') || DARK,
|
||||
themeMode: electronStore.get(THEME_MODE) || DARK,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
if (!electronStore.has('THEME_MODE')) {
|
||||
electronStore.set('THEME_MODE', DARK);
|
||||
if (!electronStore.has(THEME_MODE)) {
|
||||
electronStore.set(THEME_MODE, DARK);
|
||||
}
|
||||
|
||||
electronStore.onDidChange('THEME_MODE', newValue => this.setState({ themeMode: newValue }));
|
||||
electronStore.onDidChange(THEME_MODE, newValue => this.setState({ themeMode: newValue }));
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
Before Width: | Height: | Size: 747 B After Width: | Height: | Size: 747 B |
After Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 181 B After Width: | Height: | Size: 181 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#222" d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg>
|
After Width: | Height: | Size: 180 B |
Before Width: | Height: | Size: 182 B After Width: | Height: | Size: 182 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#222" d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z"/></svg>
|
After Width: | Height: | Size: 181 B |
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.891 10.875"><defs><style>.a{fill:#3b3b3f;stroke:#3b3b3f;stroke-width:0.5px;}</style></defs><g transform="translate(0.283 0.286)"><g transform="translate(-0.001 0.004)"><path class="a" d="M2.269,5.239c1.185,1.183,2.35,2.345,3.513,3.508a.938.938,0,1,1-1.307,1.342c-.786-.777-1.564-1.561-2.346-2.342q-.89-.89-1.779-1.78A.943.943,0,0,1,.345,4.5Q2.4,2.446,4.449.395A.938.938,0,0,1,5.441.115a.891.891,0,0,1,.638.7.941.941,0,0,1-.307.917q-1.654,1.649-3.3,3.3C2.408,5.091,2.349,5.156,2.269,5.239Z" transform="translate(0.001 -0.067)"/><path class="a" d="M297.98,5.214c-1.2-1.2-2.36-2.357-3.522-3.512a1.015,1.015,0,0,1-.336-.674.944.944,0,0,1,.536-.9.932.932,0,0,1,1.071.195c.592.582,1.177,1.173,1.765,1.76l2.344,2.344a.959.959,0,0,1,.01,1.534q-2.027,2.028-4.054,4.057a.948.948,0,0,1-1.053.283.933.933,0,0,1-.307-1.576q1.655-1.664,3.319-3.319C297.815,5.341,297.888,5.29,297.98,5.214Z" transform="translate(-277.88 -0.034)"/><path class="a" d="M142.53,9.378a3.646,3.646,0,0,1,.149-.453q1.983-4.169,3.976-8.332a.939.939,0,1,1,1.7.8q-1.995,4.19-4,8.375a.93.93,0,0,1-1.1.533A1,1,0,0,1,142.53,9.378Z" transform="translate(-134.629 -0.004)"/></g></g></svg>
|
Before Width: | Height: | Size: 1.2 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.891 10.875"><defs><style>.a{fill:#fff;stroke:#3b3b3f;stroke-width:0.5px;}</style></defs><g transform="translate(0.283 0.286)"><g transform="translate(-0.001 0.004)"><path class="a" d="M2.269,5.239c1.185,1.183,2.35,2.345,3.513,3.508a.938.938,0,1,1-1.307,1.342c-.786-.777-1.564-1.561-2.346-2.342q-.89-.89-1.779-1.78A.943.943,0,0,1,.345,4.5Q2.4,2.446,4.449.395A.938.938,0,0,1,5.441.115a.891.891,0,0,1,.638.7.941.941,0,0,1-.307.917q-1.654,1.649-3.3,3.3C2.408,5.091,2.349,5.156,2.269,5.239Z" transform="translate(0.001 -0.067)"/><path class="a" d="M297.98,5.214c-1.2-1.2-2.36-2.357-3.522-3.512a1.015,1.015,0,0,1-.336-.674.944.944,0,0,1,.536-.9.932.932,0,0,1,1.071.195c.592.582,1.177,1.173,1.765,1.76l2.344,2.344a.959.959,0,0,1,.01,1.534q-2.027,2.028-4.054,4.057a.948.948,0,0,1-1.053.283.933.933,0,0,1-.307-1.576q1.655-1.664,3.319-3.319C297.815,5.341,297.888,5.29,297.98,5.214Z" transform="translate(-277.88 -0.034)"/><path class="a" d="M142.53,9.378a3.646,3.646,0,0,1,.149-.453q1.983-4.169,3.976-8.332a.939.939,0,1,1,1.7.8q-1.995,4.19-4,8.375a.93.93,0,0,1-1.1.533A1,1,0,0,1,142.53,9.378Z" transform="translate(-134.629 -0.004)"/></g></g></svg>
|
After Width: | Height: | Size: 1.2 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.891 10.875"><defs><style>.a{fill:#000;stroke:#000;stroke-width:0.5px;}</style></defs><g transform="translate(0.283 0.286)"><g transform="translate(-0.001 0.004)"><path class="a" d="M2.269,5.239c1.185,1.183,2.35,2.345,3.513,3.508a.938.938,0,1,1-1.307,1.342c-.786-.777-1.564-1.561-2.346-2.342q-.89-.89-1.779-1.78A.943.943,0,0,1,.345,4.5Q2.4,2.446,4.449.395A.938.938,0,0,1,5.441.115a.891.891,0,0,1,.638.7.941.941,0,0,1-.307.917q-1.654,1.649-3.3,3.3C2.408,5.091,2.349,5.156,2.269,5.239Z" transform="translate(0.001 -0.067)"/><path class="a" d="M297.98,5.214c-1.2-1.2-2.36-2.357-3.522-3.512a1.015,1.015,0,0,1-.336-.674.944.944,0,0,1,.536-.9.932.932,0,0,1,1.071.195c.592.582,1.177,1.173,1.765,1.76l2.344,2.344a.959.959,0,0,1,.01,1.534q-2.027,2.028-4.054,4.057a.948.948,0,0,1-1.053.283.933.933,0,0,1-.307-1.576q1.655-1.664,3.319-3.319C297.815,5.341,297.888,5.29,297.98,5.214Z" transform="translate(-277.88 -0.034)"/><path class="a" d="M142.53,9.378a3.646,3.646,0,0,1,.149-.453q1.983-4.169,3.976-8.332a.939.939,0,1,1,1.7.8q-1.995,4.19-4,8.375a.93.93,0,0,1-1.1.533A1,1,0,0,1,142.53,9.378Z" transform="translate(-134.629 -0.004)"/></g></g></svg>
|
After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 273 KiB After Width: | Height: | Size: 273 KiB |
After Width: | Height: | Size: 304 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill='#fff' d="M296 48H176.5C154.4 48 136 65.4 136 87.5V96h-7.5C106.4 96 88 113.4 88 135.5v288c0 22.1 18.4 40.5 40.5 40.5h208c22.1 0 39.5-18.4 39.5-40.5V416h8.5c22.1 0 39.5-18.4 39.5-40.5V176L296 48zm0 44.6l83.4 83.4H296V92.6zm48 330.9c0 4.7-3.4 8.5-7.5 8.5h-208c-4.4 0-8.5-4.1-8.5-8.5v-288c0-4.1 3.8-7.5 8.5-7.5h7.5v255.5c0 22.1 10.4 32.5 32.5 32.5H344v7.5zm48-48c0 4.7-3.4 8.5-7.5 8.5h-208c-4.4 0-8.5-4.1-8.5-8.5v-288c0-4.1 3.8-7.5 8.5-7.5H264v128h128v167.5z"/></svg>
|
After Width: | Height: | Size: 537 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill='#000' d="M296 48H176.5C154.4 48 136 65.4 136 87.5V96h-7.5C106.4 96 88 113.4 88 135.5v288c0 22.1 18.4 40.5 40.5 40.5h208c22.1 0 39.5-18.4 39.5-40.5V416h8.5c22.1 0 39.5-18.4 39.5-40.5V176L296 48zm0 44.6l83.4 83.4H296V92.6zm48 330.9c0 4.7-3.4 8.5-7.5 8.5h-208c-4.4 0-8.5-4.1-8.5-8.5v-288c0-4.1 3.8-7.5 8.5-7.5h7.5v255.5c0 22.1 10.4 32.5 32.5 32.5H344v7.5zm48-48c0 4.7-3.4 8.5-7.5 8.5h-208c-4.4 0-8.5-4.1-8.5-8.5v-288c0-4.1 3.8-7.5 8.5-7.5H264v128h128v167.5z"/></svg>
|
After Width: | Height: | Size: 537 B |
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 19.091"><defs><style>.a{fill:#3b3b3f;}</style></defs><rect class="a" width="9.091" height="9.091" rx="2"/><rect class="a" width="20" height="8.182" rx="2" transform="translate(0 10.909)"/><rect class="a" width="9.091" height="9.091" rx="2" transform="translate(10.909)"/></svg>
|
Before Width: | Height: | Size: 333 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 19.091"><defs><style>.a{fill:#fff;}</style></defs><rect class="a" width="9.091" height="9.091" rx="2"/><rect class="a" width="20" height="8.182" rx="2" transform="translate(0 10.909)"/><rect class="a" width="9.091" height="9.091" rx="2" transform="translate(10.909)"/></svg>
|
After Width: | Height: | Size: 330 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 19.091"><defs><style>.a{fill:#000;}</style></defs><rect class="a" width="9.091" height="9.091" rx="2"/><rect class="a" width="20" height="8.182" rx="2" transform="translate(0 10.909)"/><rect class="a" width="9.091" height="9.091" rx="2" transform="translate(10.909)"/></svg>
|
After Width: | Height: | Size: 330 B |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
After Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 502 B After Width: | Height: | Size: 502 B |
|
@ -0,0 +1,7 @@
|
|||
<?xml version="1.0" ?>
|
||||
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
|
||||
<svg enable-background="new 0 0 256 256" height="256px" id="Layer_1" version="1.1" viewBox="0 0 256 256" width="256px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<circle fill="#222" cx="57.6" cy="128" r="20"/>
|
||||
<circle fill="#222" cx="128" cy="128" r="20"/>
|
||||
<circle fill="#222" cx="198.4" cy="128" r="20"/>
|
||||
</svg>
|
After Width: | Height: | Size: 499 B |
Before Width: | Height: | Size: 146 B After Width: | Height: | Size: 146 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#222" d="M24 9h-9v-9h-6v9h-9v6h9v9h6v-9h9z"/></svg>
|
After Width: | Height: | Size: 146 B |
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.854"><defs><style>.a{fill:#3b3b3f;}</style></defs><g transform="translate(0)"><path class="a" d="M6.612,39.045h0a.9.9,0,0,1-.9.9h-3.9v9.638H5.959c.5,0,.675.176.675.682,0,.768,0,1.536,0,2.3,0,.424.191.619.617.62q2.387,0,4.774,0c.436,0,.627-.2.628-.638,0-.784,0-1.568,0-2.352,0-.429.186-.616.616-.616q1.94,0,3.88,0h.3V39.956H13.569a.9.9,0,0,1-.9-.9v-.022a.9.9,0,0,1,.9-.9c1.227,0,3.415,0,4.657,0a.948.948,0,0,1,1.053,1.066q0,7.972,0,15.944A1.048,1.048,0,0,1,18.23,56.2H1.041A.931.931,0,0,1,0,55.152q0-8.007,0-16.015a.912.912,0,0,1,.951-1c1.293-.006,3.529,0,4.769.006A.9.9,0,0,1,6.612,39.045Z" transform="translate(0.002 -36.345)"/><path class="a" d="M112.724,5.946l.016-.016a1.125,1.125,0,0,1,1.6.005l1.14,1.154.06-.024V1.222A1.221,1.221,0,0,1,116.756,0h0a1.222,1.222,0,0,1,1.222,1.222V7.057l1.143-1.144a1.125,1.125,0,0,1,1.6,0l.04.041a1.125,1.125,0,0,1,0,1.586l-3.4,3.4a.86.86,0,0,1-1.216,0l-3.409-3.41A1.125,1.125,0,0,1,112.724,5.946Z" transform="translate(-107.108)"/></g></svg>
|
Before Width: | Height: | Size: 1.0 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.854"><defs><style>.a{fill:#fff;}</style></defs><g transform="translate(0)"><path class="a" d="M6.612,39.045h0a.9.9,0,0,1-.9.9h-3.9v9.638H5.959c.5,0,.675.176.675.682,0,.768,0,1.536,0,2.3,0,.424.191.619.617.62q2.387,0,4.774,0c.436,0,.627-.2.628-.638,0-.784,0-1.568,0-2.352,0-.429.186-.616.616-.616q1.94,0,3.88,0h.3V39.956H13.569a.9.9,0,0,1-.9-.9v-.022a.9.9,0,0,1,.9-.9c1.227,0,3.415,0,4.657,0a.948.948,0,0,1,1.053,1.066q0,7.972,0,15.944A1.048,1.048,0,0,1,18.23,56.2H1.041A.931.931,0,0,1,0,55.152q0-8.007,0-16.015a.912.912,0,0,1,.951-1c1.293-.006,3.529,0,4.769.006A.9.9,0,0,1,6.612,39.045Z" transform="translate(0.002 -36.345)"/><path class="a" d="M112.724,5.946l.016-.016a1.125,1.125,0,0,1,1.6.005l1.14,1.154.06-.024V1.222A1.221,1.221,0,0,1,116.756,0h0a1.222,1.222,0,0,1,1.222,1.222V7.057l1.143-1.144a1.125,1.125,0,0,1,1.6,0l.04.041a1.125,1.125,0,0,1,0,1.586l-3.4,3.4a.86.86,0,0,1-1.216,0l-3.409-3.41A1.125,1.125,0,0,1,112.724,5.946Z" transform="translate(-107.108)"/></g></svg>
|
After Width: | Height: | Size: 1.0 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.854"><defs><style>.a{fill:#000;}</style></defs><g transform="translate(0)"><path class="a" d="M6.612,39.045h0a.9.9,0,0,1-.9.9h-3.9v9.638H5.959c.5,0,.675.176.675.682,0,.768,0,1.536,0,2.3,0,.424.191.619.617.62q2.387,0,4.774,0c.436,0,.627-.2.628-.638,0-.784,0-1.568,0-2.352,0-.429.186-.616.616-.616q1.94,0,3.88,0h.3V39.956H13.569a.9.9,0,0,1-.9-.9v-.022a.9.9,0,0,1,.9-.9c1.227,0,3.415,0,4.657,0a.948.948,0,0,1,1.053,1.066q0,7.972,0,15.944A1.048,1.048,0,0,1,18.23,56.2H1.041A.931.931,0,0,1,0,55.152q0-8.007,0-16.015a.912.912,0,0,1,.951-1c1.293-.006,3.529,0,4.769.006A.9.9,0,0,1,6.612,39.045Z" transform="translate(0.002 -36.345)"/><path class="a" d="M112.724,5.946l.016-.016a1.125,1.125,0,0,1,1.6.005l1.14,1.154.06-.024V1.222A1.221,1.221,0,0,1,116.756,0h0a1.222,1.222,0,0,1,1.222,1.222V7.057l1.143-1.144a1.125,1.125,0,0,1,1.6,0l.04.041a1.125,1.125,0,0,1,0,1.586l-3.4,3.4a.86.86,0,0,1-1.216,0l-3.409-3.41A1.125,1.125,0,0,1,112.724,5.946Z" transform="translate(-107.108)"/></g></svg>
|
After Width: | Height: | Size: 1.0 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill='#fff' d="M174 64h-58.8C78.1 64 48 94.1 48 131.2V190c0 7.7 6.3 14 14 14s14-6.3 14-14v-59.8c0-9.1 4.3-18.7 11.7-26.2 7.5-7.6 17.2-12 26.5-12H174c7.7 0 14-6.3 14-14s-6.3-14-14-14zM397.8 64H338c-7.7 0-14 6.3-14 14s6.3 14 14 14h59.8c9.3 0 19 4.4 26.5 12 7.4 7.5 11.7 17.1 11.7 26.2V190c0 7.7 6.3 14 14 14s14-6.3 14-14v-59.8c0-36.5-29.7-66.2-66.2-66.2zM174 420h-59.8c-9.3 0-19-4.4-26.5-12-7.4-7.5-11.7-17.1-11.7-26.2V322c0-7.7-6.3-14-14-14s-14 6.3-14 14v59.8c0 36.5 29.7 66.2 66.2 66.2H174c7.7 0 14-6.3 14-14s-6.3-14-14-14zM450 308c-7.7 0-14 6.3-14 14v59.8c0 9.1-4.3 18.7-11.7 26.2-7.5 7.6-17.2 12-26.5 12H338c-7.7 0-14 6.3-14 14s6.3 14 14 14h58.8c37 0 67.2-30.1 67.2-67.2V322c0-7.7-6.3-14-14-14z"/></svg>
|
After Width: | Height: | Size: 773 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill='#000' d="M174 64h-58.8C78.1 64 48 94.1 48 131.2V190c0 7.7 6.3 14 14 14s14-6.3 14-14v-59.8c0-9.1 4.3-18.7 11.7-26.2 7.5-7.6 17.2-12 26.5-12H174c7.7 0 14-6.3 14-14s-6.3-14-14-14zM397.8 64H338c-7.7 0-14 6.3-14 14s6.3 14 14 14h59.8c9.3 0 19 4.4 26.5 12 7.4 7.5 11.7 17.1 11.7 26.2V190c0 7.7 6.3 14 14 14s14-6.3 14-14v-59.8c0-36.5-29.7-66.2-66.2-66.2zM174 420h-59.8c-9.3 0-19-4.4-26.5-12-7.4-7.5-11.7-17.1-11.7-26.2V322c0-7.7-6.3-14-14-14s-14 6.3-14 14v59.8c0 36.5 29.7 66.2 66.2 66.2H174c7.7 0 14-6.3 14-14s-6.3-14-14-14zM450 308c-7.7 0-14 6.3-14 14v59.8c0 9.1-4.3 18.7-11.7 26.2-7.5 7.6-17.2 12-26.5 12H338c-7.7 0-14 6.3-14 14s6.3 14 14 14h58.8c37 0 67.2-30.1 67.2-67.2V322c0-7.7-6.3-14-14-14z"/></svg>
|
After Width: | Height: | Size: 773 B |
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.283"><defs><style>.a{fill:#3b3b3f;}</style></defs><g transform="translate(0 0)"><path class="a" d="M7.454,19.286c-.055-.021-.111-.038-.163-.063a.657.657,0,0,1-.4-.613c-.005-1.236,0-2.472,0-3.708a.213.213,0,0,1,.049-.12q1.437-1.766,2.878-3.528l6.229-7.635a.277.277,0,0,0,.051-.085.5.5,0,0,0-.042.029L9.744,9.019q-2.5,2.166-5,4.333a.12.12,0,0,1-.148.015Q2.513,12.512.432,11.661a.683.683,0,0,1-.086-1.232L3.87,8.4,18.218.118a.666.666,0,0,1,.751,0,.663.663,0,0,1,.294.717q-.356,2.122-.708,4.245Q18.2,7.241,17.838,9.4q-.428,2.568-.858,5.136-.23,1.38-.458,2.763a.686.686,0,0,1-.969.55q-2.369-.966-4.734-1.937a.138.138,0,0,0-.193.048q-1.254,1.535-2.511,3.066a.778.778,0,0,1-.424.264C7.612,19.286,7.533,19.286,7.454,19.286Z" transform="translate(0.003 -0.005)"/></g></svg>
|
Before Width: | Height: | Size: 826 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.283"><defs><style>.a{fill:#fff;}</style></defs><g transform="translate(0 0)"><path class="a" d="M7.454,19.286c-.055-.021-.111-.038-.163-.063a.657.657,0,0,1-.4-.613c-.005-1.236,0-2.472,0-3.708a.213.213,0,0,1,.049-.12q1.437-1.766,2.878-3.528l6.229-7.635a.277.277,0,0,0,.051-.085.5.5,0,0,0-.042.029L9.744,9.019q-2.5,2.166-5,4.333a.12.12,0,0,1-.148.015Q2.513,12.512.432,11.661a.683.683,0,0,1-.086-1.232L3.87,8.4,18.218.118a.666.666,0,0,1,.751,0,.663.663,0,0,1,.294.717q-.356,2.122-.708,4.245Q18.2,7.241,17.838,9.4q-.428,2.568-.858,5.136-.23,1.38-.458,2.763a.686.686,0,0,1-.969.55q-2.369-.966-4.734-1.937a.138.138,0,0,0-.193.048q-1.254,1.535-2.511,3.066a.778.778,0,0,1-.424.264C7.612,19.286,7.533,19.286,7.454,19.286Z" transform="translate(0.003 -0.005)"/></g></svg>
|
After Width: | Height: | Size: 823 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.283"><defs><style>.a{fill:#000;}</style></defs><g transform="translate(0 0)"><path class="a" d="M7.454,19.286c-.055-.021-.111-.038-.163-.063a.657.657,0,0,1-.4-.613c-.005-1.236,0-2.472,0-3.708a.213.213,0,0,1,.049-.12q1.437-1.766,2.878-3.528l6.229-7.635a.277.277,0,0,0,.051-.085.5.5,0,0,0-.042.029L9.744,9.019q-2.5,2.166-5,4.333a.12.12,0,0,1-.148.015Q2.513,12.512.432,11.661a.683.683,0,0,1-.086-1.232L3.87,8.4,18.218.118a.666.666,0,0,1,.751,0,.663.663,0,0,1,.294.717q-.356,2.122-.708,4.245Q18.2,7.241,17.838,9.4q-.428,2.568-.858,5.136-.23,1.38-.458,2.763a.686.686,0,0,1-.969.55q-2.369-.966-4.734-1.937a.138.138,0,0,0-.193.048q-1.254,1.535-2.511,3.066a.778.778,0,0,1-.424.264C7.612,19.286,7.533,19.286,7.454,19.286Z" transform="translate(0.003 -0.005)"/></g></svg>
|
After Width: | Height: | Size: 823 B |
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.327 20.328"><defs><style>.a{fill:#3b3b3f;fill-rule:evenodd;}</style></defs><path class="a" d="M20.311,9.58a.868.868,0,0,0-.725-.865c-.067-.017-.134-.017-.2-.029-.58-.1-1.159-.2-1.763-.312-.218-.571-.434-1.136-.658-1.713.1-.134.186-.265.283-.39.253-.32.5-.65.772-.953A1.017,1.017,0,0,0,18,3.707c-.146-.143-.271-.306-.408-.457-.577-.638-.859-.679-1.588-.23-.484.3-.961.6-1.471.921A8.953,8.953,0,0,0,12,2.771c-.047-.245-.093-.463-.131-.685-.07-.425-.137-.851-.213-1.276a.874.874,0,0,0-.827-.778,6.587,6.587,0,0,0-1.291,0A.861.861,0,0,0,8.708.8c-.041.248-.067.5-.131.737a6.365,6.365,0,0,1-.242,1.194c-.749.315-1.436.6-2.153.9-.131-.087-.283-.184-.431-.285-.373-.262-.734-.539-1.113-.787A.881.881,0,0,0,3.4,2.658c-.268.245-.527.5-.772.772a.863.863,0,0,0-.09,1.229c.236.361.5.7.746,1.058.125.184.312.338.323.51-.312.752-.6,1.439-.891,2.141-.111.023-.218.047-.329.064-.536.093-1.078.172-1.611.277a.855.855,0,0,0-.76.836,12.027,12.027,0,0,0,0,1.3.828.828,0,0,0,.647.787c.151.047.312.052.466.087a11.385,11.385,0,0,1,1.626.329c.23.609.446,1.177.667,1.765-.189.236-.37.466-.554.7-.227.283-.466.559-.679.854A.888.888,0,0,0,2.2,16.493a10.568,10.568,0,0,0,.816.915.842.842,0,0,0,1.116.157c.181-.1.35-.21.524-.318l1.2-.743c.437.224.83.452,1.241.635s.842.32,1.261.478c.038.186.073.341.1.5.087.492.157.988.262,1.477a.809.809,0,0,0,.848.728c.431.017.865.015,1.3-.006a.781.781,0,0,0,.749-.591c.061-.192.079-.4.125-.6a13.164,13.164,0,0,1,.28-1.492l2.141-.88c.192.131.4.268.6.411.335.236.661.484,1,.708a.863.863,0,0,0,1.232-.082,10.682,10.682,0,0,0,.772-.769.9.9,0,0,0,.093-1.238c-.277-.417-.58-.813-.865-1.224-.1-.146-.184-.306-.245-.408.3-.728.583-1.4.9-2.15.274-.05.565-.1.854-.154.335-.058.676-.1,1.008-.166a.891.891,0,0,0,.813-.935C20.329,10.352,20.332,9.964,20.311,9.58ZM10.188,14a3.779,3.779,0,0,1-3.8-3.825,3.812,3.812,0,1,1,7.624.023A3.769,3.769,0,0,1,10.188,14Z" transform="translate(0 -0.001)"/></svg>
|
Before Width: | Height: | Size: 1.9 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.327 20.328"><defs><style>.a{fill:#fff;fill-rule:evenodd;}</style></defs><path class="a" d="M20.311,9.58a.868.868,0,0,0-.725-.865c-.067-.017-.134-.017-.2-.029-.58-.1-1.159-.2-1.763-.312-.218-.571-.434-1.136-.658-1.713.1-.134.186-.265.283-.39.253-.32.5-.65.772-.953A1.017,1.017,0,0,0,18,3.707c-.146-.143-.271-.306-.408-.457-.577-.638-.859-.679-1.588-.23-.484.3-.961.6-1.471.921A8.953,8.953,0,0,0,12,2.771c-.047-.245-.093-.463-.131-.685-.07-.425-.137-.851-.213-1.276a.874.874,0,0,0-.827-.778,6.587,6.587,0,0,0-1.291,0A.861.861,0,0,0,8.708.8c-.041.248-.067.5-.131.737a6.365,6.365,0,0,1-.242,1.194c-.749.315-1.436.6-2.153.9-.131-.087-.283-.184-.431-.285-.373-.262-.734-.539-1.113-.787A.881.881,0,0,0,3.4,2.658c-.268.245-.527.5-.772.772a.863.863,0,0,0-.09,1.229c.236.361.5.7.746,1.058.125.184.312.338.323.51-.312.752-.6,1.439-.891,2.141-.111.023-.218.047-.329.064-.536.093-1.078.172-1.611.277a.855.855,0,0,0-.76.836,12.027,12.027,0,0,0,0,1.3.828.828,0,0,0,.647.787c.151.047.312.052.466.087a11.385,11.385,0,0,1,1.626.329c.23.609.446,1.177.667,1.765-.189.236-.37.466-.554.7-.227.283-.466.559-.679.854A.888.888,0,0,0,2.2,16.493a10.568,10.568,0,0,0,.816.915.842.842,0,0,0,1.116.157c.181-.1.35-.21.524-.318l1.2-.743c.437.224.83.452,1.241.635s.842.32,1.261.478c.038.186.073.341.1.5.087.492.157.988.262,1.477a.809.809,0,0,0,.848.728c.431.017.865.015,1.3-.006a.781.781,0,0,0,.749-.591c.061-.192.079-.4.125-.6a13.164,13.164,0,0,1,.28-1.492l2.141-.88c.192.131.4.268.6.411.335.236.661.484,1,.708a.863.863,0,0,0,1.232-.082,10.682,10.682,0,0,0,.772-.769.9.9,0,0,0,.093-1.238c-.277-.417-.58-.813-.865-1.224-.1-.146-.184-.306-.245-.408.3-.728.583-1.4.9-2.15.274-.05.565-.1.854-.154.335-.058.676-.1,1.008-.166a.891.891,0,0,0,.813-.935C20.329,10.352,20.332,9.964,20.311,9.58ZM10.188,14a3.779,3.779,0,0,1-3.8-3.825,3.812,3.812,0,1,1,7.624.023A3.769,3.769,0,0,1,10.188,14Z" transform="translate(0 -0.001)"/></svg>
|
After Width: | Height: | Size: 1.9 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.327 20.328"><defs><style>.a{fill:#000;fill-rule:evenodd;}</style></defs><path class="a" d="M20.311,9.58a.868.868,0,0,0-.725-.865c-.067-.017-.134-.017-.2-.029-.58-.1-1.159-.2-1.763-.312-.218-.571-.434-1.136-.658-1.713.1-.134.186-.265.283-.39.253-.32.5-.65.772-.953A1.017,1.017,0,0,0,18,3.707c-.146-.143-.271-.306-.408-.457-.577-.638-.859-.679-1.588-.23-.484.3-.961.6-1.471.921A8.953,8.953,0,0,0,12,2.771c-.047-.245-.093-.463-.131-.685-.07-.425-.137-.851-.213-1.276a.874.874,0,0,0-.827-.778,6.587,6.587,0,0,0-1.291,0A.861.861,0,0,0,8.708.8c-.041.248-.067.5-.131.737a6.365,6.365,0,0,1-.242,1.194c-.749.315-1.436.6-2.153.9-.131-.087-.283-.184-.431-.285-.373-.262-.734-.539-1.113-.787A.881.881,0,0,0,3.4,2.658c-.268.245-.527.5-.772.772a.863.863,0,0,0-.09,1.229c.236.361.5.7.746,1.058.125.184.312.338.323.51-.312.752-.6,1.439-.891,2.141-.111.023-.218.047-.329.064-.536.093-1.078.172-1.611.277a.855.855,0,0,0-.76.836,12.027,12.027,0,0,0,0,1.3.828.828,0,0,0,.647.787c.151.047.312.052.466.087a11.385,11.385,0,0,1,1.626.329c.23.609.446,1.177.667,1.765-.189.236-.37.466-.554.7-.227.283-.466.559-.679.854A.888.888,0,0,0,2.2,16.493a10.568,10.568,0,0,0,.816.915.842.842,0,0,0,1.116.157c.181-.1.35-.21.524-.318l1.2-.743c.437.224.83.452,1.241.635s.842.32,1.261.478c.038.186.073.341.1.5.087.492.157.988.262,1.477a.809.809,0,0,0,.848.728c.431.017.865.015,1.3-.006a.781.781,0,0,0,.749-.591c.061-.192.079-.4.125-.6a13.164,13.164,0,0,1,.28-1.492l2.141-.88c.192.131.4.268.6.411.335.236.661.484,1,.708a.863.863,0,0,0,1.232-.082,10.682,10.682,0,0,0,.772-.769.9.9,0,0,0,.093-1.238c-.277-.417-.58-.813-.865-1.224-.1-.146-.184-.306-.245-.408.3-.728.583-1.4.9-2.15.274-.05.565-.1.854-.154.335-.058.676-.1,1.008-.166a.891.891,0,0,0,.813-.935C20.329,10.352,20.332,9.964,20.311,9.58ZM10.188,14a3.779,3.779,0,0,1-3.8-3.825,3.812,3.812,0,1,1,7.624.023A3.769,3.769,0,0,1,10.188,14Z" transform="translate(0 -0.001)"/></svg>
|
After Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
After Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.342 18.853"><defs><style>.a{fill:#66BE54;}</style></defs><g transform="translate(34.55 55.562) rotate(180)"><g transform="translate(22.05 41.044)"><path class="a" d="M2.822,2.39h.817l3.889-.011c.69,0,1.381,0,2.071,0a.836.836,0,0,1,.1,1.668,1.591,1.591,0,0,1-.187.007q-4.277,0-8.55,0a1.1,1.1,0,0,1-.511-.093A.811.811,0,0,1,.228,2.67Q1.426,1.444,2.642.233A.8.8,0,0,1,3.777.24a.8.8,0,0,1,.015,1.127c-.295.31-.6.612-.907.918a.4.4,0,0,1-.1.056A.407.407,0,0,1,2.822,2.39Z" transform="translate(6.505 0) rotate(90)"/><path class="a" d="M2.822,1.664h.817l3.889.011c.69,0,1.381,0,2.071,0A.836.836,0,0,0,9.7.011,1.591,1.591,0,0,0,9.517,0Q5.24,0,.967,0A1.1,1.1,0,0,0,.455.093.811.811,0,0,0,.228,1.385q1.2,1.226,2.415,2.437A.808.808,0,0,0,3.792,2.687c-.295-.31-.6-.612-.907-.918a.4.4,0,0,0-.1-.056A.407.407,0,0,0,2.822,1.664Z" transform="translate(4.054 0) rotate(90)"/></g><g transform="translate(16.208 36.709)"><g transform="translate(0 0)"><path class="a" d="M9.568,0c.192.018.384.033.572.054a8.642,8.642,0,0,1,3.97,1.44,9.218,9.218,0,0,1,4.013,5.978,9.494,9.494,0,0,1-.923,6.481.923.923,0,0,0-.047.1.812.812,0,0,1-.919.5.847.847,0,0,1-.666-.85.325.325,0,0,1,.029-.13c.159-.38.322-.76.478-1.143a7.694,7.694,0,0,0,.59-3.456,7.687,7.687,0,0,0-2.4-5.236,7.093,7.093,0,0,0-4.071-1.979A7.2,7.2,0,0,0,4.249,3.579a7.447,7.447,0,0,0-2.5,4.614,7.65,7.65,0,0,0,1.925,6.492,7.156,7.156,0,0,0,4.429,2.377,7.222,7.222,0,0,0,5.453-1.39.387.387,0,0,0,.058-.051.8.8,0,0,1,.9-.17.871.871,0,0,1,.5.8.711.711,0,0,1-.275.572,8.448,8.448,0,0,1-4.48,1.954,8.725,8.725,0,0,1-6.846-2A9.249,9.249,0,0,1,.182,11.337a9.4,9.4,0,0,1-.127-3A9.343,9.343,0,0,1,2.36,3.108,8.962,8.962,0,0,1,7.234.214a8.521,8.521,0,0,1,1.419-.2A1.044,1.044,0,0,0,8.758,0C9.029,0,9.3,0,9.568,0Z" transform="translate(0.01)"/></g></g></g></svg>
|
After Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.342 18.853"><defs><style>.a{fill:#FF6C6C;}</style></defs><g transform="translate(-16.208 -36.709)"><g transform="translate(22.05 41.044)"><path class="a" d="M2.822,2.39h.817l3.889-.011c.69,0,1.381,0,2.071,0a.836.836,0,0,1,.1,1.668,1.591,1.591,0,0,1-.187.007q-4.277,0-8.55,0a1.1,1.1,0,0,1-.511-.093A.811.811,0,0,1,.228,2.67Q1.426,1.444,2.642.233A.8.8,0,0,1,3.777.24a.8.8,0,0,1,.015,1.127c-.295.31-.6.612-.907.918a.4.4,0,0,1-.1.056A.407.407,0,0,1,2.822,2.39Z" transform="translate(6.505 0) rotate(90)"/><path class="a" d="M2.822,1.664h.817l3.889.011c.69,0,1.381,0,2.071,0A.836.836,0,0,0,9.7.011,1.591,1.591,0,0,0,9.517,0Q5.24,0,.967,0A1.1,1.1,0,0,0,.455.093.811.811,0,0,0,.228,1.385q1.2,1.226,2.415,2.437A.808.808,0,0,0,3.792,2.687c-.295-.31-.6-.612-.907-.918a.4.4,0,0,0-.1-.056A.407.407,0,0,0,2.822,1.664Z" transform="translate(4.054 0) rotate(90)"/></g><g transform="translate(16.208 36.709)"><g transform="translate(0 0)"><path class="a" d="M9.568,0c.192.018.384.033.572.054a8.642,8.642,0,0,1,3.97,1.44,9.218,9.218,0,0,1,4.013,5.978,9.494,9.494,0,0,1-.923,6.481.923.923,0,0,0-.047.1.812.812,0,0,1-.919.5.847.847,0,0,1-.666-.85.325.325,0,0,1,.029-.13c.159-.38.322-.76.478-1.143a7.694,7.694,0,0,0,.59-3.456,7.687,7.687,0,0,0-2.4-5.236,7.093,7.093,0,0,0-4.071-1.979A7.2,7.2,0,0,0,4.249,3.579a7.447,7.447,0,0,0-2.5,4.614,7.65,7.65,0,0,0,1.925,6.492,7.156,7.156,0,0,0,4.429,2.377,7.222,7.222,0,0,0,5.453-1.39.387.387,0,0,0,.058-.051.8.8,0,0,1,.9-.17.871.871,0,0,1,.5.8.711.711,0,0,1-.275.572,8.448,8.448,0,0,1-4.48,1.954,8.725,8.725,0,0,1-6.846-2A9.249,9.249,0,0,1,.182,11.337a9.4,9.4,0,0,1-.127-3A9.343,9.343,0,0,1,2.36,3.108,8.962,8.962,0,0,1,7.234.214a8.521,8.521,0,0,1,1.419-.2A1.044,1.044,0,0,0,8.758,0C9.029,0,9.3,0,9.568,0Z" transform="translate(0.01)"/></g></g></g></svg>
|
After Width: | Height: | Size: 1.8 KiB |
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.82 21.4"><defs><style>.a{fill:#3b3b3f;}</style></defs><g transform="translate(0)"><path class="a" d="M10.862,0c.218.021.435.037.649.062A9.81,9.81,0,0,1,16.017,1.7a10.464,10.464,0,0,1,4.555,6.786,10.777,10.777,0,0,1-1.047,7.356,1.048,1.048,0,0,0-.053.119.921.921,0,0,1-1.043.567.961.961,0,0,1-.756-.965.369.369,0,0,1,.033-.148c.181-.431.366-.863.542-1.3a8.733,8.733,0,0,0,.67-3.923,8.725,8.725,0,0,0-2.723-5.944A8.051,8.051,0,0,0,11.573,2,8.176,8.176,0,0,0,4.824,4.062,8.452,8.452,0,0,0,1.99,9.3a8.683,8.683,0,0,0,2.185,7.369,8.123,8.123,0,0,0,5.028,2.7,8.2,8.2,0,0,0,6.19-1.577.44.44,0,0,0,.066-.058.909.909,0,0,1,1.027-.193.988.988,0,0,1,.571.908.807.807,0,0,1-.312.649,9.59,9.59,0,0,1-5.085,2.218,9.9,9.9,0,0,1-7.771-2.271,10.5,10.5,0,0,1-3.68-6.174A10.675,10.675,0,0,1,.064,9.46,10.6,10.6,0,0,1,2.68,3.528,10.173,10.173,0,0,1,8.213.242,9.672,9.672,0,0,1,9.823.021,1.185,1.185,0,0,0,9.942,0C10.25,0,10.554,0,10.862,0Z" transform="translate(0.01)"/><path class="a" d="M14.3,17.106h.9l4.28-.012c.76,0,1.52,0,2.28,0a.92.92,0,0,1,.115,1.836,1.751,1.751,0,0,1-.205.008q-4.707,0-9.41,0a1.214,1.214,0,0,1-.563-.1.893.893,0,0,1-.251-1.421q1.318-1.349,2.658-2.682a.889.889,0,0,1,1.265,1.249c-.324.341-.661.674-1,1.01a.436.436,0,0,1-.115.062A.448.448,0,0,1,14.3,17.106Z" transform="translate(-6.589 -8.53)"/><path class="a" d="M19.609,29.83h-.14q-3.654.006-7.3.008a.932.932,0,0,1-.928-.641A.915.915,0,0,1,12.1,28c1.109-.008,2.218,0,3.331,0h6.334a.908.908,0,0,1,.949.858.881.881,0,0,1-.283.694c-.32.32-.641.645-.961.969l-1.631,1.643A.892.892,0,0,1,18.7,32.3a.877.877,0,0,1-.164-1.339c.32-.341.657-.67.99-1a1.143,1.143,0,0,1,.111-.086A.094.094,0,0,1,19.609,29.83Z" transform="translate(-6.592 -16.498)"/></g></svg>
|
Before Width: | Height: | Size: 1.7 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.82 21.4"><defs><style>.a{fill:#fff;}</style></defs><g transform="translate(0)"><path class="a" d="M10.862,0c.218.021.435.037.649.062A9.81,9.81,0,0,1,16.017,1.7a10.464,10.464,0,0,1,4.555,6.786,10.777,10.777,0,0,1-1.047,7.356,1.048,1.048,0,0,0-.053.119.921.921,0,0,1-1.043.567.961.961,0,0,1-.756-.965.369.369,0,0,1,.033-.148c.181-.431.366-.863.542-1.3a8.733,8.733,0,0,0,.67-3.923,8.725,8.725,0,0,0-2.723-5.944A8.051,8.051,0,0,0,11.573,2,8.176,8.176,0,0,0,4.824,4.062,8.452,8.452,0,0,0,1.99,9.3a8.683,8.683,0,0,0,2.185,7.369,8.123,8.123,0,0,0,5.028,2.7,8.2,8.2,0,0,0,6.19-1.577.44.44,0,0,0,.066-.058.909.909,0,0,1,1.027-.193.988.988,0,0,1,.571.908.807.807,0,0,1-.312.649,9.59,9.59,0,0,1-5.085,2.218,9.9,9.9,0,0,1-7.771-2.271,10.5,10.5,0,0,1-3.68-6.174A10.675,10.675,0,0,1,.064,9.46,10.6,10.6,0,0,1,2.68,3.528,10.173,10.173,0,0,1,8.213.242,9.672,9.672,0,0,1,9.823.021,1.185,1.185,0,0,0,9.942,0C10.25,0,10.554,0,10.862,0Z" transform="translate(0.01)"/><path class="a" d="M14.3,17.106h.9l4.28-.012c.76,0,1.52,0,2.28,0a.92.92,0,0,1,.115,1.836,1.751,1.751,0,0,1-.205.008q-4.707,0-9.41,0a1.214,1.214,0,0,1-.563-.1.893.893,0,0,1-.251-1.421q1.318-1.349,2.658-2.682a.889.889,0,0,1,1.265,1.249c-.324.341-.661.674-1,1.01a.436.436,0,0,1-.115.062A.448.448,0,0,1,14.3,17.106Z" transform="translate(-6.589 -8.53)"/><path class="a" d="M19.609,29.83h-.14q-3.654.006-7.3.008a.932.932,0,0,1-.928-.641A.915.915,0,0,1,12.1,28c1.109-.008,2.218,0,3.331,0h6.334a.908.908,0,0,1,.949.858.881.881,0,0,1-.283.694c-.32.32-.641.645-.961.969l-1.631,1.643A.892.892,0,0,1,18.7,32.3a.877.877,0,0,1-.164-1.339c.32-.341.657-.67.99-1a1.143,1.143,0,0,1,.111-.086A.094.094,0,0,1,19.609,29.83Z" transform="translate(-6.592 -16.498)"/></g></svg>
|
After Width: | Height: | Size: 1.7 KiB |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.82 21.4"><defs><style>.a{fill:#000;}</style></defs><g transform="translate(0)"><path class="a" d="M10.862,0c.218.021.435.037.649.062A9.81,9.81,0,0,1,16.017,1.7a10.464,10.464,0,0,1,4.555,6.786,10.777,10.777,0,0,1-1.047,7.356,1.048,1.048,0,0,0-.053.119.921.921,0,0,1-1.043.567.961.961,0,0,1-.756-.965.369.369,0,0,1,.033-.148c.181-.431.366-.863.542-1.3a8.733,8.733,0,0,0,.67-3.923,8.725,8.725,0,0,0-2.723-5.944A8.051,8.051,0,0,0,11.573,2,8.176,8.176,0,0,0,4.824,4.062,8.452,8.452,0,0,0,1.99,9.3a8.683,8.683,0,0,0,2.185,7.369,8.123,8.123,0,0,0,5.028,2.7,8.2,8.2,0,0,0,6.19-1.577.44.44,0,0,0,.066-.058.909.909,0,0,1,1.027-.193.988.988,0,0,1,.571.908.807.807,0,0,1-.312.649,9.59,9.59,0,0,1-5.085,2.218,9.9,9.9,0,0,1-7.771-2.271,10.5,10.5,0,0,1-3.68-6.174A10.675,10.675,0,0,1,.064,9.46,10.6,10.6,0,0,1,2.68,3.528,10.173,10.173,0,0,1,8.213.242,9.672,9.672,0,0,1,9.823.021,1.185,1.185,0,0,0,9.942,0C10.25,0,10.554,0,10.862,0Z" transform="translate(0.01)"/><path class="a" d="M14.3,17.106h.9l4.28-.012c.76,0,1.52,0,2.28,0a.92.92,0,0,1,.115,1.836,1.751,1.751,0,0,1-.205.008q-4.707,0-9.41,0a1.214,1.214,0,0,1-.563-.1.893.893,0,0,1-.251-1.421q1.318-1.349,2.658-2.682a.889.889,0,0,1,1.265,1.249c-.324.341-.661.674-1,1.01a.436.436,0,0,1-.115.062A.448.448,0,0,1,14.3,17.106Z" transform="translate(-6.589 -8.53)"/><path class="a" d="M19.609,29.83h-.14q-3.654.006-7.3.008a.932.932,0,0,1-.928-.641A.915.915,0,0,1,12.1,28c1.109-.008,2.218,0,3.331,0h6.334a.908.908,0,0,1,.949.858.881.881,0,0,1-.283.694c-.32.32-.641.645-.961.969l-1.631,1.643A.892.892,0,0,1,18.7,32.3a.877.877,0,0,1-.164-1.339c.32-.341.657-.67.99-1a1.143,1.143,0,0,1,.111-.086A.094.094,0,0,1,19.609,29.83Z" transform="translate(-6.592 -16.498)"/></g></svg>
|
After Width: | Height: | Size: 1.7 KiB |
|
@ -15,13 +15,13 @@ const DefaultButton = styled.button`
|
|||
cursor: pointer;
|
||||
outline: none;
|
||||
min-width: 100px;
|
||||
border-radius: 100px;
|
||||
border-radius: 3px;
|
||||
transition: background-color 0.1s ${props => props.theme.transitionEase};
|
||||
`;
|
||||
|
||||
const Primary = styled(DefaultButton)`
|
||||
background-color: ${props => props.theme.colors.primary};
|
||||
color: ${props => props.theme.colors.secondary};
|
||||
color: ${props => props.theme.colors.buttonPrimaryText};
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
|
@ -29,23 +29,24 @@ const Primary = styled(DefaultButton)`
|
|||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: ${props => props.theme.colors.buttonBorderColor};
|
||||
background-color: ${props => props.theme.colors.buttonPrimaryDisabledBg};
|
||||
cursor: not-allowed;
|
||||
opacity: 0.8;
|
||||
opacity: 0.45;
|
||||
}
|
||||
`;
|
||||
|
||||
const Secondary = styled(DefaultButton)`
|
||||
background-color: transparent;
|
||||
color: ${props => props.theme.colors.secondary};
|
||||
border: 2px solid ${props => props.theme.colors.buttonBorderColor};
|
||||
background-color: ${props => props.theme.colors.buttonSecondaryBg};
|
||||
color: ${props => props.theme.colors.buttonSecondaryText};
|
||||
border: 1px solid ${props => props.theme.colors.buttonSecondaryBorder};
|
||||
|
||||
&:hover {
|
||||
border-color: ${props => props.theme.colors.primary};
|
||||
background-color: ${props => props.theme.colors.buttonSecondaryHoveredBg}
|
||||
border-color: ${props => props.theme.colors.buttonSecondaryHoveredBg}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: Transparent;
|
||||
background-color: ${props => props.theme.colors.buttonSecondaryDisabledBg};
|
||||
cursor: not-allowed;
|
||||
color: ${props => props.theme.colors.buttonBorderColor};
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// @flow
|
||||
|
||||
import React, { Fragment, type Element } from 'react';
|
||||
import React, { type Element } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { TextComponent } from './text';
|
||||
|
@ -17,7 +17,7 @@ const Wrapper = styled.div`
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 0px 30px 0px black;
|
||||
box-shadow: ${props => props.theme.colors.transactionDetailsShadow}
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
|
@ -42,6 +42,22 @@ const CloseIconImg = styled.img`
|
|||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const ButtonWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
padding: 20px 40px 10px;
|
||||
|
||||
& > :first-child {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
margin-left: 5px;
|
||||
}
|
||||
`;
|
||||
|
||||
const Btn = styled(Button)`
|
||||
width: 95%;
|
||||
margin-bottom: 10px;
|
||||
|
@ -91,7 +107,7 @@ export const ConfirmDialogComponent = ({
|
|||
<Divider opacity={0.3} />
|
||||
{children(handleClose(toggle))}
|
||||
{showButtons && (
|
||||
<Fragment>
|
||||
<ButtonWrapper>
|
||||
<Btn
|
||||
id='confirm-modal-button'
|
||||
label='Confirm'
|
||||
|
@ -104,7 +120,7 @@ export const ConfirmDialogComponent = ({
|
|||
variant='secondary'
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</Fragment>
|
||||
</ButtonWrapper>
|
||||
)}
|
||||
</Wrapper>
|
||||
)}
|
||||
|
|
|
@ -0,0 +1,61 @@
|
|||
// @flow
|
||||
|
||||
import React, { PureComponent } from 'react';
|
||||
import copy from 'copy-to-clipboard';
|
||||
|
||||
type Props = {
|
||||
text: string,
|
||||
children: any,
|
||||
onCopy?: Function,
|
||||
options?: Object,
|
||||
}
|
||||
|
||||
export class CopyToClipboard extends PureComponent<Props> {
|
||||
static defaultProps = {
|
||||
onCopy: () => {},
|
||||
options: {},
|
||||
};
|
||||
|
||||
|
||||
onClick = (event: Object) => {
|
||||
const {
|
||||
text,
|
||||
onCopy,
|
||||
children,
|
||||
options,
|
||||
} = this.props;
|
||||
|
||||
const elem = React.Children.only(children);
|
||||
|
||||
const result = copy(text, options);
|
||||
|
||||
if (onCopy) {
|
||||
onCopy(text, result);
|
||||
}
|
||||
|
||||
// Bypass onClick if it was present
|
||||
if (
|
||||
elem
|
||||
&& elem.props
|
||||
&& typeof elem.props.onClick === 'function'
|
||||
) {
|
||||
elem.props.onClick(event);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
text: _text,
|
||||
onCopy: _onCopy,
|
||||
options: _options,
|
||||
children,
|
||||
...props
|
||||
} = this.props;
|
||||
const elem = React.Children.only(children);
|
||||
|
||||
return React.cloneElement(
|
||||
elem,
|
||||
{ ...props, onClick: this.onClick },
|
||||
);
|
||||
}
|
||||
}
|
|
@ -12,7 +12,7 @@ type Props = PropsWithTheme<{
|
|||
export const Divider = styled.div`
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: ${(props: Props) => props.color || props.theme.colors.text};
|
||||
background-color: ${(props: Props) => props.color || props.theme.colors.divider};
|
||||
opacity: ${(props: Props) => String(props.opacity || 1)};
|
||||
margin-bottom: ${(props: Props) => props.marginBottom || '0'};
|
||||
margin-top: ${(props: Props) => props.marginTop || '0'};
|
||||
|
|
|
@ -21,6 +21,7 @@ const MenuWrapper = styled.div`
|
|||
margin-left: -10px;
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
border: 1px solid ${props => props.theme.colors.border}
|
||||
`;
|
||||
|
||||
const MenuItem = styled.button`
|
||||
|
|
|
@ -7,7 +7,7 @@ import styled from 'styled-components';
|
|||
import { TextComponent } from './text';
|
||||
import { Button } from './button';
|
||||
|
||||
import ErrorIcon from '../assets/images/error_icon.png';
|
||||
import ErrorIcon from '../assets/images/error_icon_dark.png';
|
||||
|
||||
const ModalWrapper = styled.div`
|
||||
width: 100vw;
|
||||
|
|
|
@ -55,6 +55,7 @@ const Title = styled(TextComponent)`
|
|||
text-transform: capitalize;
|
||||
letter-spacing: 0.25px;
|
||||
font-weight: ${props => String(props.theme.fontWeight.bold)};
|
||||
color: ${props => props.theme.colors.headerTitle};
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
|
@ -73,7 +74,7 @@ export const HeaderComponent = ({ title }: Props) => (
|
|||
<Title value={title} />
|
||||
<Status type='syncing' progress={0} />
|
||||
</TitleRow>
|
||||
<Divider opacity={0.1} />
|
||||
<Divider opacity={0.2} />
|
||||
</TitleWrapper>
|
||||
</Wrapper>
|
||||
);
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
import React, { type Element } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import theme from '../theme';
|
||||
import { appTheme } from '../theme';
|
||||
|
||||
type Props = {
|
||||
inputType?: 'input' | 'textarea',
|
||||
|
@ -28,17 +28,23 @@ type DefaultStylesProps = PropsWithTheme<{
|
|||
const getDefaultStyles: ($PropertyType<Props, 'inputType'>) => Element<*> = t => styled[t]`
|
||||
border-radius: ${(props: DefaultStylesProps) => props.theme.boxBorderRadius};
|
||||
border: none;
|
||||
background-color: ${(props: DefaultStylesProps) => props.bgColor || props.theme.colors.inputBackground};
|
||||
background-color: ${(props: DefaultStylesProps) => props.bgColor || props.theme.colors.inputBg};
|
||||
color: ${(props: DefaultStylesProps) => props.theme.colors.text};
|
||||
padding: 15px;
|
||||
padding-right: ${(props: DefaultStylesProps) => (props.withRightElement ? '85px' : '15px')};
|
||||
width: 100%;
|
||||
outline: none;
|
||||
font-family: ${(props: DefaultStylesProps) => props.theme.fontFamily};
|
||||
border: 1px solid ${(props: DefaultStylesProps) => props.theme.colors.inputBorder};
|
||||
|
||||
::placeholder {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: ${(props: DefaultStylesProps) => props.theme.colors.inputBorderActive};
|
||||
}
|
||||
`;
|
||||
|
||||
const Wrapper = styled.div`
|
||||
|
@ -104,5 +110,5 @@ InputComponent.defaultProps = {
|
|||
onChange: () => {},
|
||||
onFocus: () => {},
|
||||
step: 1,
|
||||
bgColor: theme.colors.inputBackground,
|
||||
bgColor: appTheme.colors.inputBg,
|
||||
};
|
||||
|
|
|
@ -14,6 +14,10 @@ const Layout = styled.div`
|
|||
padding-left: ${props => props.theme.layoutPaddingLeft};
|
||||
padding-right: ${props => props.theme.layoutPaddingRight};
|
||||
overflow: auto;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
|
|
|
@ -1,18 +1,14 @@
|
|||
// @flow
|
||||
|
||||
import React, { PureComponent } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
import { Transition, animated } from 'react-spring';
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import { ipcRenderer } from 'electron';
|
||||
|
||||
import CircleProgressComponent from 'react-circle';
|
||||
import { TextComponent } from './text';
|
||||
|
||||
import zcashLogo from '../assets/images/zcash-simple-icon.svg';
|
||||
|
||||
import theme from '../theme';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
@ -20,7 +16,19 @@ const Wrapper = styled.div`
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
||||
background-color: ${props => props.theme.colors.loadingScreenBg};
|
||||
`;
|
||||
|
||||
const LoadingCard = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #000000;
|
||||
padding: 60px;
|
||||
min-width: 300px;
|
||||
min-height: 200px;
|
||||
border-radius: 3px;
|
||||
`;
|
||||
|
||||
const CircleWrapper = styled.div`
|
||||
|
@ -39,37 +47,34 @@ const Logo = styled.img`
|
|||
left: calc(50% - 25px);
|
||||
`;
|
||||
|
||||
const LoadingText = styled(TextComponent)`
|
||||
color: ${props => props.theme.colors.loadingScreenText};
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
progress: number,
|
||||
theme: AppTheme,
|
||||
message: string,
|
||||
};
|
||||
|
||||
type State = {
|
||||
start: boolean,
|
||||
message: string,
|
||||
};
|
||||
|
||||
const TIME_DELAY_ANIM = 100;
|
||||
|
||||
export class LoadingScreen extends PureComponent<Props, State> {
|
||||
state = { start: false, message: 'ZEC Wallet Starting' };
|
||||
class Component extends PureComponent<Props, State> {
|
||||
state = { start: false };
|
||||
|
||||
componentDidMount() {
|
||||
setTimeout(() => {
|
||||
this.setState(() => ({ start: true }));
|
||||
}, TIME_DELAY_ANIM);
|
||||
|
||||
ipcRenderer.on('zcashd-params-download', (event: Object, message: string) => {
|
||||
this.setState(() => ({ message }));
|
||||
});
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
ipcRenderer.removeAllListeners('zcashd-log');
|
||||
}
|
||||
|
||||
render() {
|
||||
const { start, message } = this.state;
|
||||
const { progress } = this.props;
|
||||
const { start } = this.state;
|
||||
const { progress, message, theme } = this.props;
|
||||
|
||||
return (
|
||||
<Wrapper data-testid='LoadingScreen'>
|
||||
|
@ -96,18 +101,19 @@ export class LoadingScreen extends PureComponent<Props, State> {
|
|||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<CircleWrapper>
|
||||
<Logo src={zcashLogo} alt='Zcash Logo' />
|
||||
<CircleProgressComponent
|
||||
progress={progress}
|
||||
s // TODO: check if this has any effect
|
||||
responsive
|
||||
showPercentage={false}
|
||||
progressColor={theme.colors.activeItem}
|
||||
bgColor={theme.colors.inactiveItem}
|
||||
/>
|
||||
</CircleWrapper>
|
||||
<TextComponent value={message} />
|
||||
<LoadingCard>
|
||||
<CircleWrapper>
|
||||
<Logo src={zcashLogo} alt='Zcash Logo' />
|
||||
<CircleProgressComponent
|
||||
progress={progress}
|
||||
responsive
|
||||
showPercentage={false}
|
||||
progressColor={theme.colors.activeItem}
|
||||
bgColor={theme.colors.inactiveItem}
|
||||
/>
|
||||
</CircleWrapper>
|
||||
<LoadingText value={message} />
|
||||
</LoadingCard>
|
||||
</animated.div>
|
||||
)}
|
||||
</Transition>
|
||||
|
@ -115,3 +121,5 @@ export class LoadingScreen extends PureComponent<Props, State> {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const LoadingScreen = withTheme(Component);
|
||||
|
|
|
@ -14,7 +14,7 @@ const ModalWrapper = styled.div`
|
|||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
`;
|
||||
|
||||
const ChildrenWrapper = styled.div`
|
||||
|
@ -103,7 +103,9 @@ export class ModalComponent extends PureComponent<Props, State> {
|
|||
) this.close();
|
||||
}}
|
||||
>
|
||||
<ChildrenWrapper>{children(toggleVisibility)}</ChildrenWrapper>
|
||||
<ChildrenWrapper>
|
||||
{children(toggleVisibility)}
|
||||
</ChildrenWrapper>
|
||||
</ModalWrapper>,
|
||||
this.element,
|
||||
)}
|
||||
|
|
|
@ -1,13 +1,18 @@
|
|||
// @flow
|
||||
|
||||
import React, { PureComponent } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
|
||||
import { DARK, LIGHT } from '../constants/themes';
|
||||
|
||||
import { TextComponent } from './text';
|
||||
import ChevronUp from '../assets/images/chevron-up.svg';
|
||||
import ChevronDown from '../assets/images/chevron-down.svg';
|
||||
|
||||
import theme from '../theme';
|
||||
import ChevronUpLight from '../assets/images/chevron_up_icon_light.svg';
|
||||
import ChevronUpDark from '../assets/images/chevron_up_icon_dark.svg';
|
||||
import ChevronDownLight from '../assets/images/chevron_down_icon_light.svg';
|
||||
import ChevronDownDark from '../assets/images/chevron_down_icon_dark.svg';
|
||||
|
||||
import { appTheme } from '../theme';
|
||||
|
||||
/* eslint-disable max-len */
|
||||
type SelectWrapperProps = PropsWithTheme<{
|
||||
|
@ -21,8 +26,8 @@ const SelectWrapper = styled.div`
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
border-radius: ${(props: SelectWrapperProps) => props.theme.boxBorderRadius};
|
||||
border: none;
|
||||
background-color: ${(props: SelectWrapperProps) => props.bgColor || props.theme.colors.inputBackground};
|
||||
border: 1px solid ${(props: SelectWrapperProps) => props.theme.colors.inputBorder};
|
||||
background-color: ${(props: SelectWrapperProps) => props.bgColor || props.theme.colors.inputBg};
|
||||
color: ${(props: SelectWrapperProps) => props.theme.colors.text};
|
||||
width: 100%;
|
||||
outline: none;
|
||||
|
@ -62,9 +67,14 @@ const SelectMenuButton = styled.button`
|
|||
padding: 3px 7px;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
border: 1px solid
|
||||
${(props: PropsWithTheme<{ isOpen: boolean }>) => (props.isOpen ? props.theme.colors.primary : '#29292D')};
|
||||
border-radius: 100%;
|
||||
cursor: pointer;
|
||||
border: 1px solid
|
||||
${(props: PropsWithTheme<{ isOpen: boolean }>) => (
|
||||
props.isOpen
|
||||
? props.theme.colors.dropdownOpenedIconBorder
|
||||
: props.theme.colors.dropdownIconBorder
|
||||
)};
|
||||
`;
|
||||
|
||||
const Icon = styled.img`
|
||||
|
@ -76,24 +86,28 @@ const OptionsWrapper = styled.div`
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
${(props: PropsWithTheme<{ placement: string, optionsAmount: number }>) => `${String(props.placement)}: ${`-${String((props.optionsAmount || 0) * 40)}px`}`};
|
||||
width: 100.5%;
|
||||
margin-left: -0.25%;
|
||||
border-radius: ${props => props.theme.colors.boxBorderRadius};
|
||||
border: 1px solid ${props => props.theme.colors.inputBorder};
|
||||
${(props: PropsWithTheme<{ placement: string, optionsAmount: number }>) => `${String(props.placement)}: ${`-${String(((props.optionsAmount || 0) * 40) + 10)}px`}`};
|
||||
overflow-y: auto;
|
||||
box-shadow: 1px 3px 20px rgba(16, 19, 20, 0.1);
|
||||
`;
|
||||
|
||||
const Option = styled.button`
|
||||
border: none;
|
||||
background: none;
|
||||
height: 40px;
|
||||
background-color: #5d5d5d;
|
||||
background-color: ${props => props.theme.colors.dropdownBg};
|
||||
cursor: pointer;
|
||||
z-index: 99;
|
||||
text-transform: ${(props: PropsWithTheme<{ capitalize: boolean }>) => (props.capitalize ? 'capitalize' : 'none')};
|
||||
padding: 5px 10px;
|
||||
border-bottom: 1px solid #4e4b4b;
|
||||
border-bottom: 1px solid ${props => props.theme.colors.dropdownBorder};
|
||||
|
||||
&:hover {
|
||||
background-color: ${props => props.theme.colors.background};
|
||||
background-color: ${props => props.theme.colors.dropdownHoveredBg};
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
@ -111,13 +125,14 @@ type Props = {
|
|||
placement?: 'top' | 'bottom',
|
||||
bgColor?: string,
|
||||
capitalize?: boolean,
|
||||
theme: AppTheme,
|
||||
};
|
||||
|
||||
type State = {
|
||||
isOpen: boolean,
|
||||
};
|
||||
|
||||
export class SelectComponent extends PureComponent<Props, State> {
|
||||
class Component extends PureComponent<Props, State> {
|
||||
state = {
|
||||
isOpen: false,
|
||||
};
|
||||
|
@ -125,7 +140,7 @@ export class SelectComponent extends PureComponent<Props, State> {
|
|||
static defaultProps = {
|
||||
placeholder: '',
|
||||
placement: 'bottom',
|
||||
bgColor: theme.colors.inputBackground,
|
||||
bgColor: appTheme.colors.inputBg,
|
||||
capitalize: true,
|
||||
};
|
||||
|
||||
|
@ -151,14 +166,24 @@ export class SelectComponent extends PureComponent<Props, State> {
|
|||
};
|
||||
|
||||
getSelectIcon = () => {
|
||||
const { placement } = this.props;
|
||||
const { placement, theme } = this.props;
|
||||
const { isOpen } = this.state;
|
||||
|
||||
if (placement === 'top') {
|
||||
return !isOpen ? ChevronUp : ChevronDown;
|
||||
if (theme.mode === DARK) {
|
||||
if (placement === 'top') {
|
||||
return !isOpen ? ChevronUpDark : ChevronDownDark;
|
||||
}
|
||||
|
||||
return !isOpen ? ChevronDownDark : ChevronUpDark;
|
||||
}
|
||||
|
||||
return !isOpen ? ChevronDown : ChevronUp;
|
||||
if (theme.mode === LIGHT) {
|
||||
if (placement === 'top') {
|
||||
return !isOpen ? ChevronUpLight : ChevronDownLight;
|
||||
}
|
||||
|
||||
return !isOpen ? ChevronDownLight : ChevronUpLight;
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
|
@ -176,7 +201,10 @@ export class SelectComponent extends PureComponent<Props, State> {
|
|||
onClick={() => this.setState(() => ({ isOpen: !isOpen }))}
|
||||
bgColor={bgColor}
|
||||
>
|
||||
<ValueWrapper hasValue={Boolean(value)} capitalize={capitalize}>
|
||||
<ValueWrapper
|
||||
hasValue={Boolean(value)}
|
||||
capitalize={capitalize}
|
||||
>
|
||||
{this.getSelectedLabel(value) || placeholder}
|
||||
</ValueWrapper>
|
||||
<SelectMenuButtonWrapper>
|
||||
|
@ -207,3 +235,5 @@ export class SelectComponent extends PureComponent<Props, State> {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const SelectComponent = withTheme(Component);
|
||||
|
|
|
@ -2,8 +2,9 @@
|
|||
|
||||
/* eslint-disable max-len */
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
import type { Location, RouterHistory } from 'react-router-dom';
|
||||
|
||||
import { MENU_OPTIONS } from '../constants/sidebar';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
|
@ -13,6 +14,7 @@ const Wrapper = styled.div`
|
|||
height: ${props => `calc(100vh - ${props.theme.headerHeight})`};
|
||||
font-family: ${props => props.theme.fontFamily};
|
||||
background-color: ${props => props.theme.colors.sidebarBg};
|
||||
border-right: 1px solid ${props => props.theme.colors.sidebarBorderRight};
|
||||
padding-top: 15px;
|
||||
position: relative;
|
||||
`;
|
||||
|
@ -20,11 +22,17 @@ const Wrapper = styled.div`
|
|||
/* eslint-disable max-len */
|
||||
type StyledLinkProps = PropsWithTheme<{ isActive: boolean }>;
|
||||
const StyledLink = styled.a`
|
||||
color: ${(props: StyledLinkProps) => (props.isActive ? props.theme.colors.sidebarItemActive : props.theme.colors.sidebarItem)};
|
||||
color: ${(props: StyledLinkProps) => (props.isActive
|
||||
? props.theme.colors.sidebarItemActive
|
||||
: props.theme.colors.sidebarItem
|
||||
)};
|
||||
background-color: ${(props: StyledLinkProps) => (props.isActive
|
||||
? props.theme.colors.sidebarItemHoveredBg
|
||||
: 'transparent'
|
||||
)};
|
||||
font-size: ${(props: StyledLinkProps) => `${props.theme.fontSize.regular}em`};
|
||||
text-decoration: none;
|
||||
font-weight: ${(props: StyledLinkProps) => String(props.theme.fontWeight.bold)};
|
||||
background-color: ${(props: StyledLinkProps) => (props.isActive ? `${props.theme.colors.sidebarHoveredItem}` : 'transparent')};
|
||||
letter-spacing: 0.25px;
|
||||
padding: 25px 20px;
|
||||
height: 35px;
|
||||
|
@ -32,13 +40,19 @@ const StyledLink = styled.a`
|
|||
display: flex;
|
||||
align-items: center;
|
||||
outline: none;
|
||||
border-right: ${(props: StyledLinkProps) => (props.isActive ? `3px solid ${props.theme.colors.sidebarItemActive(props)}` : 'none')};
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: all 0.03s ${(props: StyledLinkProps) => props.theme.transitionEase};
|
||||
border-right: ${(props: StyledLinkProps) => (props.isActive ? `3px solid ${props.theme.colors.sidebarActiveItemBorder}` : 'none')};
|
||||
border-top: 1px solid ${(props: StyledLinkProps) => (props.isActive ? props.theme.colors.sidebarBorderRight : 'transparent')};
|
||||
border-bottom: 1px solid ${(props: StyledLinkProps) => (props.isActive ? props.theme.colors.sidebarBorderRight : 'transparent')};
|
||||
|
||||
&:hover {
|
||||
color: ${(props: StyledLinkProps) => (props.isActive ? props.theme.colors.sidebarItemActive : '#ddd')}
|
||||
background-color: ${(props: StyledLinkProps) => props.theme.colors.sidebarHoveredItem};
|
||||
border-top: 1px solid ${props => props.theme.colors.sidebarBorderRight};
|
||||
border-bottom: 1px solid ${props => props.theme.colors.sidebarBorderRight};
|
||||
|
||||
background-color: ${(props: StyledLinkProps) => props.theme.colors.sidebarItemHoveredBg};
|
||||
color: ${(props: StyledLinkProps) => (props.isActive ? props.theme.colors.sidebarItemActive : props.theme.colors.sidebarItemHovered)}
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -47,27 +61,34 @@ const Icon = styled.img`
|
|||
height: 17px;
|
||||
margin-right: 13px;
|
||||
|
||||
opacity: ${(props: any) => (props.isActive ? '1' : '0.3')};
|
||||
|
||||
${StyledLink}:hover & {
|
||||
filter: ${(props: StyledLinkProps) => (props.isActive ? 'none' : 'brightness(300%)')};
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
type MenuItem = {
|
||||
route: string,
|
||||
label: string,
|
||||
icon: (isActive: boolean) => string,
|
||||
icon: (isActive: boolean, themeMode: string) => string,
|
||||
};
|
||||
|
||||
type Props = {
|
||||
history: RouterHistory,
|
||||
options?: MenuItem[],
|
||||
location: Location,
|
||||
theme: AppTheme,
|
||||
};
|
||||
|
||||
export const SidebarComponent = ({ options, location, history }: Props) => (
|
||||
export const Component = ({
|
||||
options, location, history, theme,
|
||||
}: Props) => (
|
||||
<Wrapper id='sidebar'>
|
||||
{(options || []).map((item) => {
|
||||
const isActive = location.pathname === item.route;
|
||||
const isActive = item.route === '/'
|
||||
? location.pathname === item.route
|
||||
: location.pathname.startsWith(item.route);
|
||||
|
||||
return (
|
||||
<StyledLink
|
||||
|
@ -75,7 +96,11 @@ export const SidebarComponent = ({ options, location, history }: Props) => (
|
|||
key={item.route}
|
||||
onClick={() => (isActive ? {} : history.push(item.route))}
|
||||
>
|
||||
<Icon isActive={isActive} src={item.icon(isActive)} Alt={`${item.route}`} />
|
||||
<Icon
|
||||
isActive={isActive}
|
||||
src={item.icon(isActive, theme.mode)}
|
||||
Alt={`${item.route}`}
|
||||
/>
|
||||
{item.label}
|
||||
</StyledLink>
|
||||
);
|
||||
|
@ -83,6 +108,8 @@ export const SidebarComponent = ({ options, location, history }: Props) => (
|
|||
</Wrapper>
|
||||
);
|
||||
|
||||
SidebarComponent.defaultProps = {
|
||||
Component.defaultProps = {
|
||||
options: MENU_OPTIONS,
|
||||
};
|
||||
|
||||
export const SidebarComponent = withTheme(Component);
|
||||
|
|
|
@ -1,16 +1,20 @@
|
|||
// @flow
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
import React, { PureComponent } from 'react';
|
||||
import styled, { keyframes, withTheme } from 'styled-components';
|
||||
import eres from 'eres';
|
||||
|
||||
import { TextComponent } from './text';
|
||||
|
||||
import rpc from '../../services/api';
|
||||
import { DARK } from '../constants/themes';
|
||||
|
||||
import readyIcon from '../assets/images/green_check.png';
|
||||
import syncIcon from '../assets/images/sync_icon.png';
|
||||
import errorIcon from '../assets/images/error_icon.png';
|
||||
import readyIconDark from '../assets/images/green_check_dark.png';
|
||||
import readyIconLight from '../assets/images/green_check_light.png';
|
||||
import syncIconDark from '../assets/images/sync_icon_dark.png';
|
||||
import syncIconLight from '../assets/images/sync_icon_light.png';
|
||||
import errorIconDark from '../assets/images/error_icon_dark.png';
|
||||
import errorIconLight from '../assets/images/error_icon_light.png';
|
||||
|
||||
const rotate = keyframes`
|
||||
from {
|
||||
|
@ -24,7 +28,8 @@ const rotate = keyframes`
|
|||
const Wrapper = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
background-color: #000;
|
||||
background: ${props => props.theme.colors.statusPillBg};
|
||||
border: 1px solid ${props => props.theme.colors.statusPillBorder}
|
||||
border-radius: 27px;
|
||||
padding: 8px 16px;
|
||||
`;
|
||||
|
@ -48,7 +53,9 @@ const StatusPillLabel = styled(TextComponent)`
|
|||
user-select: none;
|
||||
`;
|
||||
|
||||
type Props = {};
|
||||
type Props = {
|
||||
theme: AppTheme,
|
||||
};
|
||||
|
||||
type State = {
|
||||
type: string,
|
||||
|
@ -57,15 +64,25 @@ type State = {
|
|||
isSyncing: boolean,
|
||||
};
|
||||
|
||||
export class StatusPill extends Component<Props, State> {
|
||||
class Component extends PureComponent<Props, State> {
|
||||
timer: ?IntervalID = null;
|
||||
|
||||
state = {
|
||||
type: 'syncing',
|
||||
icon: syncIcon,
|
||||
progress: 0,
|
||||
isSyncing: true,
|
||||
};
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
const { theme } = props;
|
||||
|
||||
const syncIcon = theme.mode === DARK
|
||||
? syncIconDark
|
||||
: syncIconLight;
|
||||
|
||||
this.state = {
|
||||
type: 'syncing',
|
||||
icon: syncIcon,
|
||||
progress: 0,
|
||||
isSyncing: true,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.timer = setInterval(() => {
|
||||
|
@ -81,6 +98,15 @@ export class StatusPill extends Component<Props, State> {
|
|||
}
|
||||
|
||||
getBlockchainStatus = async () => {
|
||||
const { theme } = this.props;
|
||||
|
||||
const readyIcon = theme.mode === DARK
|
||||
? readyIconDark
|
||||
: readyIconLight;
|
||||
const errorIcon = theme.mode === DARK
|
||||
? errorIconDark
|
||||
: errorIconLight;
|
||||
|
||||
const [blockchainErr, blockchaininfo] = await eres(rpc.getblockchaininfo());
|
||||
|
||||
if (blockchainErr || !blockchaininfo) return;
|
||||
|
@ -99,7 +125,10 @@ export class StatusPill extends Component<Props, State> {
|
|||
});
|
||||
|
||||
if (blockchainErr) {
|
||||
this.setState(() => ({ type: 'error', icon: errorIcon }));
|
||||
this.setState(() => ({
|
||||
type: 'error',
|
||||
icon: errorIcon,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -118,3 +147,5 @@ export class StatusPill extends Component<Props, State> {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const StatusPill = withTheme(Component);
|
||||
|
|
|
@ -5,7 +5,7 @@ import React from 'react';
|
|||
import styled from 'styled-components';
|
||||
import type { ElementProps } from 'react';
|
||||
|
||||
import theme from '../theme';
|
||||
import { appTheme } from '../theme';
|
||||
|
||||
export type Props = {
|
||||
...ElementProps<'p'>,
|
||||
|
@ -15,6 +15,8 @@ export type Props = {
|
|||
className?: string,
|
||||
size?: string | number,
|
||||
align?: string,
|
||||
onClick?: Function,
|
||||
onDoubleClick?: Function,
|
||||
};
|
||||
|
||||
const Text = styled.p`
|
||||
|
@ -28,7 +30,8 @@ const Text = styled.p`
|
|||
`;
|
||||
|
||||
export const TextComponent = ({
|
||||
value, isBold, color, className, size, align, id,
|
||||
value, isBold, color, className, size,
|
||||
align, id, onClick, onDoubleClick,
|
||||
}: Props) => (
|
||||
<Text
|
||||
id={id}
|
||||
|
@ -37,6 +40,8 @@ export const TextComponent = ({
|
|||
color={color}
|
||||
size={`${String(size)}em`}
|
||||
align={align}
|
||||
onClick={onClick}
|
||||
onDoubleClick={onDoubleClick}
|
||||
>
|
||||
{value}
|
||||
</Text>
|
||||
|
@ -45,7 +50,9 @@ export const TextComponent = ({
|
|||
TextComponent.defaultProps = {
|
||||
className: '',
|
||||
isBold: false,
|
||||
color: theme.colors.text,
|
||||
size: theme.fontSize.regular,
|
||||
color: appTheme.colors.text,
|
||||
size: appTheme.fontSize.regular,
|
||||
align: 'left',
|
||||
onClick: () => {},
|
||||
onDoubleClick: () => {},
|
||||
};
|
||||
|
|
|
@ -5,7 +5,6 @@ import styled from 'styled-components';
|
|||
|
||||
import { TransactionItemComponent, type Transaction } from './transaction-item';
|
||||
import { TextComponent } from './text';
|
||||
import { Divider } from './divider';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
margin-top: 20px;
|
||||
|
@ -40,18 +39,18 @@ export const TransactionDailyComponent = ({ transactionsDate, transactions, zecP
|
|||
<Day value={transactionsDate} />
|
||||
<TransactionsWrapper>
|
||||
{transactions.map(({
|
||||
date, type, address, amount, transactionId,
|
||||
}, idx) => (
|
||||
date, type, address, amount, transactionId, fees,
|
||||
}) => (
|
||||
<Fragment key={`${address}-${type}-${amount}-${date}`}>
|
||||
<TransactionItemComponent
|
||||
transactionId={transactionId}
|
||||
type={type}
|
||||
date={date}
|
||||
address={address || ''}
|
||||
address={address || 'N/A'}
|
||||
amount={amount}
|
||||
zecPrice={zecPrice}
|
||||
fees={fees}
|
||||
/>
|
||||
{idx < transactions.length - 1 && <Divider />}
|
||||
</Fragment>
|
||||
))}
|
||||
</TransactionsWrapper>
|
||||
|
|
|
@ -1,34 +1,36 @@
|
|||
// @flow
|
||||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
import dateFns from 'date-fns';
|
||||
import { BigNumber } from 'bignumber.js';
|
||||
|
||||
import { ZCASH_EXPLORER_BASE_URL } from '../constants/explorer';
|
||||
import { DARK } from '../constants/themes';
|
||||
|
||||
import SentIcon from '../assets/images/transaction_sent_icon.svg';
|
||||
import ReceivedIcon from '../assets/images/transaction_received_icon.svg';
|
||||
import SentIconDark from '../assets/images/transaction_sent_icon_dark.svg';
|
||||
import ReceivedIconDark from '../assets/images/transaction_received_icon_dark.svg';
|
||||
import SentIconLight from '../assets/images/transaction_sent_icon_light.svg';
|
||||
import ReceivedIconLight from '../assets/images/transaction_received_icon_light.svg';
|
||||
import CloseIcon from '../assets/images/close_icon.svg';
|
||||
|
||||
import { TextComponent } from './text';
|
||||
import { RowComponent } from './row';
|
||||
import { ColumnComponent } from './column';
|
||||
|
||||
import theme from '../theme';
|
||||
import { appTheme } from '../theme';
|
||||
|
||||
import { formatNumber } from '../utils/format-number';
|
||||
import { truncateAddress } from '../utils/truncate-address';
|
||||
import { openExternal } from '../utils/open-external';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
width: 460px;
|
||||
background-color: ${props => props.theme.colors.background};
|
||||
background-color: ${props => props.theme.colors.transactionDetailsBg};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 0px 30px 0px black;
|
||||
box-shadow: ${props => props.theme.colors.transactionDetailsShadow};
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
|
@ -71,7 +73,7 @@ const InfoRow = styled(RowComponent)`
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: #1d1d1d;
|
||||
background: ${props => props.theme.colors.transactionDetailsRowHover};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -85,14 +87,14 @@ const DetailsWrapper = styled.div`
|
|||
|
||||
const Divider = styled.div`
|
||||
width: 100%;
|
||||
background-color: #3a3a3a;
|
||||
background-color: ${props => props.theme.colors.transactionDetailsDivider};
|
||||
height: 1px;
|
||||
opacity: 0.5;
|
||||
`;
|
||||
|
||||
const Label = styled(TextComponent)`
|
||||
font-weight: ${props => String(props.theme.fontWeight.bold)};
|
||||
color: ${props => props.theme.colors.transactionsDetailsLabel};
|
||||
color: ${props => props.theme.colors.transactionDetailsLabel};
|
||||
margin-bottom: 5px;
|
||||
letter-spacing: 0.25px;
|
||||
`;
|
||||
|
@ -124,22 +126,26 @@ type Props = {
|
|||
zecPrice: number,
|
||||
date: string,
|
||||
transactionId: string,
|
||||
from: string,
|
||||
to: string,
|
||||
address: string,
|
||||
fees: number | string,
|
||||
handleClose: () => void,
|
||||
theme: AppTheme,
|
||||
};
|
||||
|
||||
export const TransactionDetailsComponent = ({
|
||||
const Component = ({
|
||||
amount,
|
||||
type,
|
||||
zecPrice,
|
||||
date,
|
||||
transactionId,
|
||||
from,
|
||||
to,
|
||||
address,
|
||||
fees,
|
||||
handleClose,
|
||||
theme,
|
||||
}: Props) => {
|
||||
const isReceived = type === 'receive';
|
||||
const receivedIcon = theme.mode === DARK ? ReceivedIconDark : ReceivedIconLight;
|
||||
const sentIcon = theme.mode === DARK ? SentIconDark : SentIconLight;
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
|
@ -150,7 +156,7 @@ export const TransactionDetailsComponent = ({
|
|||
<TextComponent value='Transaction Details' align='center' />
|
||||
</TitleWrapper>
|
||||
<DetailsWrapper>
|
||||
<Icon src={isReceived ? ReceivedIcon : SentIcon} alt='Transaction Type Icon' />
|
||||
<Icon src={isReceived ? receivedIcon : sentIcon} alt='Transaction Type Icon' />
|
||||
<TextComponent
|
||||
isBold
|
||||
size={2.625}
|
||||
|
@ -158,7 +164,7 @@ export const TransactionDetailsComponent = ({
|
|||
append: `${isReceived ? '+' : '-'}ZEC `,
|
||||
value: amount,
|
||||
})}
|
||||
color={isReceived ? theme.colors.transactionReceived : theme.colors.transactionSent}
|
||||
color={isReceived ? appTheme.colors.transactionReceived : appTheme.colors.transactionSent}
|
||||
/>
|
||||
<TextComponent
|
||||
value={formatNumber({
|
||||
|
@ -166,7 +172,7 @@ export const TransactionDetailsComponent = ({
|
|||
value: new BigNumber(amount).times(zecPrice).toNumber(),
|
||||
})}
|
||||
size={1.5}
|
||||
color={theme.colors.transactionsDetailsLabel}
|
||||
color={appTheme.colors.transactionDetailsLabel}
|
||||
/>
|
||||
</DetailsWrapper>
|
||||
<InfoRow>
|
||||
|
@ -175,12 +181,16 @@ export const TransactionDetailsComponent = ({
|
|||
<TextComponent value={dateFns.format(new Date(date), 'MMMM D, YYYY HH:MMA')} />
|
||||
</ColumnComponent>
|
||||
<ColumnComponent>
|
||||
<TextComponent value='FEES' isBold color={theme.colors.transactionsDetailsLabel} />
|
||||
<TextComponent value='FEES' isBold color={appTheme.colors.transactionDetailsLabel} />
|
||||
<TextComponent
|
||||
value={formatNumber({
|
||||
value: new BigNumber(amount).times(0.1).toNumber(),
|
||||
append: 'ZEC ',
|
||||
})}
|
||||
value={
|
||||
fees === 'N/A'
|
||||
? 'N/A'
|
||||
: formatNumber({
|
||||
value: new BigNumber(fees).toFormat(4),
|
||||
append: 'ZEC ',
|
||||
})
|
||||
}
|
||||
/>
|
||||
</ColumnComponent>
|
||||
</InfoRow>
|
||||
|
@ -188,7 +198,13 @@ export const TransactionDetailsComponent = ({
|
|||
<InfoRow>
|
||||
<ColumnComponent width='100%'>
|
||||
<Label value='TRANSACTION ID' />
|
||||
<TransactionId onClick={() => openExternal(ZCASH_EXPLORER_BASE_URL + transactionId)}>
|
||||
<TransactionId
|
||||
onClick={
|
||||
address !== '(Shielded)'
|
||||
? () => openExternal(ZCASH_EXPLORER_BASE_URL + transactionId)
|
||||
: () => {}
|
||||
}
|
||||
>
|
||||
<Ellipsis value={transactionId} />
|
||||
</TransactionId>
|
||||
</ColumnComponent>
|
||||
|
@ -196,17 +212,12 @@ export const TransactionDetailsComponent = ({
|
|||
<Divider />
|
||||
<InfoRow>
|
||||
<ColumnComponent width='100%'>
|
||||
<Label value='FROM' />
|
||||
<Ellipsis value={truncateAddress(from)} />
|
||||
</ColumnComponent>
|
||||
</InfoRow>
|
||||
<Divider />
|
||||
<InfoRow>
|
||||
<ColumnComponent width='100%'>
|
||||
<Label value='TO' />
|
||||
<Ellipsis value={truncateAddress(to)} />
|
||||
<Label value='Address' />
|
||||
<Ellipsis value={address} />
|
||||
</ColumnComponent>
|
||||
</InfoRow>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export const TransactionDetailsComponent = withTheme(Component);
|
||||
|
|
|
@ -1,11 +1,15 @@
|
|||
// @flow
|
||||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
import dateFns from 'date-fns';
|
||||
|
||||
import SentIcon from '../assets/images/transaction_sent_icon.svg';
|
||||
import ReceivedIcon from '../assets/images/transaction_received_icon.svg';
|
||||
import { DARK } from '../constants/themes';
|
||||
|
||||
import SentIconDark from '../assets/images/transaction_sent_icon_dark.svg';
|
||||
import ReceivedIconDark from '../assets/images/transaction_received_icon_dark.svg';
|
||||
import SentIconLight from '../assets/images/transaction_sent_icon_light.svg';
|
||||
import ReceivedIconLight from '../assets/images/transaction_received_icon_light.svg';
|
||||
|
||||
import { RowComponent } from './row';
|
||||
import { ColumnComponent } from './column';
|
||||
|
@ -13,18 +17,22 @@ import { TextComponent } from './text';
|
|||
import { ModalComponent } from './modal';
|
||||
import { TransactionDetailsComponent } from './transaction-details';
|
||||
|
||||
import theme from '../theme';
|
||||
|
||||
import { formatNumber } from '../utils/format-number';
|
||||
import { truncateAddress } from '../utils/truncate-address';
|
||||
|
||||
const Wrapper = styled(RowComponent)`
|
||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
||||
background-color: ${props => props.theme.colors.transactionItemBg};
|
||||
padding: 15px 17px;
|
||||
cursor: pointer;
|
||||
border: 1px solid ${props => props.theme.colors.transactionItemBorder};
|
||||
border-bottom: none;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 1px solid ${props => props.theme.colors.transactionItemBorder};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #0a0a0a;
|
||||
background-color: ${props => props.theme.colors.transactionItemHoverBg};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -41,10 +49,10 @@ const TransactionTypeLabel = styled(TextComponent)`
|
|||
/* eslint-enable max-len */
|
||||
|
||||
const TransactionAddress = styled(TextComponent)`
|
||||
color: #a7a7a7;
|
||||
color: ${props => props.theme.colors.transactionItemAddress};
|
||||
|
||||
${String(Wrapper)}:hover & {
|
||||
color: #fff;
|
||||
color: ${props => props.theme.colors.transactionItemAddressHover};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -63,17 +71,21 @@ export type Transaction = {
|
|||
date: string,
|
||||
address: string,
|
||||
amount: number,
|
||||
fees: number | string,
|
||||
zecPrice: number,
|
||||
transactionId: string,
|
||||
theme: AppTheme,
|
||||
};
|
||||
|
||||
export const TransactionItemComponent = ({
|
||||
const Component = ({
|
||||
type,
|
||||
date,
|
||||
address,
|
||||
amount,
|
||||
fees,
|
||||
zecPrice,
|
||||
transactionId,
|
||||
theme,
|
||||
}: Transaction) => {
|
||||
const isReceived = type === 'receive';
|
||||
const transactionTime = dateFns.format(new Date(date), 'HH:mm A');
|
||||
|
@ -87,6 +99,9 @@ export const TransactionItemComponent = ({
|
|||
});
|
||||
const transactionAddress = truncateAddress(address);
|
||||
|
||||
const receivedIcon = theme.mode === DARK ? ReceivedIconDark : ReceivedIconLight;
|
||||
const sentIcon = theme.mode === DARK ? SentIconDark : SentIconLight;
|
||||
|
||||
return (
|
||||
<ModalComponent
|
||||
renderTrigger={toggleVisibility => (
|
||||
|
@ -98,7 +113,7 @@ export const TransactionItemComponent = ({
|
|||
>
|
||||
<RowComponent alignItems='center'>
|
||||
<RowComponent alignItems='center'>
|
||||
<Icon src={isReceived ? ReceivedIcon : SentIcon} alt='Transaction Type Icon' />
|
||||
<Icon src={isReceived ? receivedIcon : sentIcon} alt='Transaction Type Icon' />
|
||||
<TransactionColumn>
|
||||
<TransactionTypeLabel isReceived={isReceived} value={type} isBold />
|
||||
<TransactionTime value={transactionTime} />
|
||||
|
@ -121,8 +136,8 @@ export const TransactionItemComponent = ({
|
|||
<TransactionDetailsComponent
|
||||
amount={amount}
|
||||
date={date}
|
||||
from={address}
|
||||
to=''
|
||||
address={address}
|
||||
fees={fees}
|
||||
transactionId={transactionId}
|
||||
handleClose={toggleVisibility}
|
||||
type={type}
|
||||
|
@ -132,3 +147,5 @@ export const TransactionItemComponent = ({
|
|||
</ModalComponent>
|
||||
);
|
||||
};
|
||||
|
||||
export const TransactionItemComponent = withTheme(Component);
|
||||
|
|
|
@ -1,94 +1,180 @@
|
|||
// @flow
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import React, { PureComponent } from 'react';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
|
||||
import { ColumnComponent } from './column';
|
||||
import { Button } from './button';
|
||||
import { TextComponent } from './text';
|
||||
import { QRCode } from './qrcode';
|
||||
import { CopyToClipboard } from './copy-to-clipboard';
|
||||
|
||||
import { truncateAddress } from '../utils/truncate-address';
|
||||
|
||||
import eyeIcon from '../assets/images/eye.png';
|
||||
import CopyIconDark from '../assets/images/copy_icon_dark.svg';
|
||||
import CopyIconLight from '../assets/images/copy_icon_light.svg';
|
||||
import ScanIconDark from '../assets/images/scan_icon_dark.svg';
|
||||
import ScanIconLight from '../assets/images/scan_icon_light.svg';
|
||||
import { DARK } from '../constants/themes';
|
||||
|
||||
const AddressWrapper = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
background-color: #000;
|
||||
border-radius: 6px;
|
||||
padding: 7px 13px;
|
||||
border-radius: ${props => props.theme.boxBorderRadius};
|
||||
padding: 0 13px 0 0;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
background: ${props => props.theme.colors.walletAddressBg};
|
||||
border: 1px solid ${props => props.theme.colors.walletAddressBorder};
|
||||
`;
|
||||
|
||||
const Input = styled.input`
|
||||
const Address = styled(TextComponent)`
|
||||
border-radius: ${props => props.theme.boxBorderRadius};
|
||||
border: none;
|
||||
background-color: ${props => props.theme.colors.inputBackground};
|
||||
color: ${props => props.theme.colors.text};
|
||||
background-color: ${props => props.theme.colors.inputBg};
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
width: 92%;
|
||||
outline: none;
|
||||
font-family: ${props => props.theme.fontFamily};
|
||||
font-size: 13px;
|
||||
color: ${props => props.theme.colors.walletAddressInput};
|
||||
line-height: 1;
|
||||
letter-spacing: 0.5px;
|
||||
overflow-x: scroll;
|
||||
cursor: pointer;
|
||||
user-select: text;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* // todo: make this theme supported */
|
||||
${AddressWrapper}:hover & {
|
||||
color: ${props => props.theme.colors.walletAddressInputHovered};
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
opacity: 0.5;
|
||||
}
|
||||
`;
|
||||
|
||||
const QRCodeWrapper = styled.div`
|
||||
const QRCodeContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
background-color: #000;
|
||||
border-radius: 6px;
|
||||
background-color: ${props => props.theme.colors.qrCodeWrapperBg}
|
||||
border: 1px solid ${props => props.theme.colors.qrCodeWrapperBorder}
|
||||
border-radius: 3px;
|
||||
padding: 20px;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const QRCodeWrapper = styled.div`
|
||||
background-color: #ffffff;
|
||||
padding: 10px;
|
||||
`;
|
||||
|
||||
const IconButton = styled.button`
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
display: flex;
|
||||
width: 28px;
|
||||
margin-left: 3px;
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const IconImage = styled.img`
|
||||
max-width: 23px;
|
||||
opacity: 0.4;
|
||||
|
||||
${IconButton}:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
const CopyTooltip = styled.div`
|
||||
background: ${props => props.theme.colors.walletAddressTooltipBg};
|
||||
position: absolute;
|
||||
top: -27px;
|
||||
left: -8px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 3px;
|
||||
`;
|
||||
|
||||
const TooltipText = styled(TextComponent)`
|
||||
color: ${props => props.theme.colors.walletAddressTooltip};
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
address: string,
|
||||
theme: AppTheme,
|
||||
};
|
||||
|
||||
type State = {
|
||||
isVisible: boolean,
|
||||
showCopiedTooltip: boolean,
|
||||
showQRCode: boolean,
|
||||
};
|
||||
|
||||
export class WalletAddress extends Component<Props, State> {
|
||||
class Component extends PureComponent<Props, State> {
|
||||
state = {
|
||||
isVisible: false,
|
||||
showQRCode: false,
|
||||
showCopiedTooltip: false,
|
||||
};
|
||||
|
||||
show = () => this.setState(() => ({ isVisible: true }));
|
||||
showMoreInfo = () => this.setState(() => ({ showQRCode: true }));
|
||||
|
||||
hide = () => this.setState(() => ({ isVisible: false }));
|
||||
toggleMoreInfo = () => this.setState(prevState => ({
|
||||
showQRCode: !prevState.showQRCode,
|
||||
}));
|
||||
|
||||
hideTooltip = () => this.setState(() => ({ showCopiedTooltip: false }));
|
||||
|
||||
copyAddress = () => this.setState(
|
||||
() => ({ showCopiedTooltip: true }),
|
||||
() => setTimeout(() => this.hideTooltip(), 1500),
|
||||
);
|
||||
|
||||
render() {
|
||||
const { address } = this.props;
|
||||
const { isVisible } = this.state;
|
||||
const toggleVisibility = isVisible ? this.hide : this.show;
|
||||
const { address, theme } = this.props;
|
||||
const { showQRCode, showCopiedTooltip } = this.state;
|
||||
|
||||
const qrCodeIcon = theme.mode === DARK ? ScanIconDark : ScanIconLight;
|
||||
|
||||
const copyIcon = theme.mode === DARK ? CopyIconDark : CopyIconLight;
|
||||
|
||||
return (
|
||||
<ColumnComponent width='100%'>
|
||||
<AddressWrapper>
|
||||
<Input
|
||||
value={isVisible ? address : truncateAddress(address)}
|
||||
onChange={() => {}}
|
||||
onFocus={event => event.currentTarget.select()}
|
||||
/>
|
||||
<Button
|
||||
icon={eyeIcon}
|
||||
label={`${isVisible ? 'Hide' : 'Show'} full address and QR Code`}
|
||||
onClick={toggleVisibility}
|
||||
variant='secondary'
|
||||
<Address
|
||||
value={address}
|
||||
onClick={this.toggleMoreInfo}
|
||||
onDoubleClick={this.showMoreInfo}
|
||||
/>
|
||||
<CopyToClipboard text={address} onCopy={this.copyAddress}>
|
||||
<IconButton onClick={() => {}}>
|
||||
{!showCopiedTooltip ? null : (
|
||||
<CopyTooltip>
|
||||
<TooltipText value='Copied!' />
|
||||
</CopyTooltip>
|
||||
)}
|
||||
<IconImage src={copyIcon} alt='Copy Address' />
|
||||
</IconButton>
|
||||
</CopyToClipboard>
|
||||
<IconButton onClick={this.toggleMoreInfo}>
|
||||
<IconImage src={qrCodeIcon} alt='See QRCode' />
|
||||
</IconButton>
|
||||
</AddressWrapper>
|
||||
{!isVisible ? null : (
|
||||
<QRCodeWrapper>
|
||||
<QRCode value={address} />
|
||||
</QRCodeWrapper>
|
||||
{!showQRCode ? null : (
|
||||
<QRCodeContainer>
|
||||
<QRCodeWrapper>
|
||||
<QRCode value={address} />
|
||||
</QRCodeWrapper>
|
||||
</QRCodeContainer>
|
||||
)}
|
||||
</ColumnComponent>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const WalletAddress = withTheme(Component);
|
||||
|
|
|
@ -8,12 +8,13 @@ import { RowComponent } from './row';
|
|||
|
||||
import { formatNumber } from '../utils/format-number';
|
||||
|
||||
import theme from '../theme';
|
||||
import { appTheme } from '../theme';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
||||
background-color: ${props => props.theme.colors.walletSummaryBg};
|
||||
border: 1px solid ${props => props.theme.colors.walletSummaryBorder};
|
||||
border-radius: ${props => props.theme.boxBorderRadius};
|
||||
padding: 37px 45px;
|
||||
min-height: 250px;
|
||||
|
@ -60,31 +61,31 @@ export const WalletSummaryComponent = ({
|
|||
<AllAddresses value='ALL ADDRESSES' isBold />
|
||||
<ValueBox>
|
||||
<TextComponent
|
||||
size={theme.fontSize.medium * 2.5}
|
||||
size={appTheme.fontSize.medium * 2.5}
|
||||
value={`ZEC ${formatNumber({ value: total })}`}
|
||||
isBold
|
||||
/>
|
||||
<USDValue
|
||||
value={`USD $${formatNumber({ value: total * zecPrice })}`}
|
||||
size={theme.fontSize.medium * 2}
|
||||
size={appTheme.fontSize.medium * 2}
|
||||
/>
|
||||
</ValueBox>
|
||||
<RowComponent>
|
||||
<ValueBox>
|
||||
<ShieldedValue value='● SHIELDED' isBold size={theme.fontSize.small} />
|
||||
<ShieldedValue value='● SHIELDED' isBold size={appTheme.fontSize.small} />
|
||||
<TextComponent
|
||||
value={`ZEC ${formatNumber({ value: shielded })}`}
|
||||
isBold
|
||||
size={theme.fontSize.medium}
|
||||
size={appTheme.fontSize.medium}
|
||||
/>
|
||||
<USDValue value={`USD $${formatNumber({ value: shielded * zecPrice })}`} />
|
||||
</ValueBox>
|
||||
<ValueBox>
|
||||
<Label value='● TRANSPARENT' isBold size={theme.fontSize.small} />
|
||||
<Label value='● TRANSPARENT' isBold size={appTheme.fontSize.small} />
|
||||
<TextComponent
|
||||
value={`ZEC ${formatNumber({ value: transparent })}`}
|
||||
isBold
|
||||
size={theme.fontSize.medium}
|
||||
size={appTheme.fontSize.medium}
|
||||
/>
|
||||
<USDValue value={`USD $${formatNumber({ value: transparent * zecPrice })}`} />
|
||||
</ValueBox>
|
||||
|
|
|
@ -11,6 +11,7 @@ type Props = {};
|
|||
type State = {
|
||||
isRunning: boolean,
|
||||
progress: number,
|
||||
message: string,
|
||||
};
|
||||
|
||||
/* eslint-disable max-len */
|
||||
|
@ -22,6 +23,7 @@ export const withDaemonStatusCheck = <PassedProps: {}>(
|
|||
state = {
|
||||
isRunning: false,
|
||||
progress: 0,
|
||||
message: 'ZEC Wallet Starting',
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
|
@ -53,21 +55,23 @@ export const withDaemonStatusCheck = <PassedProps: {}>(
|
|||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
.catch((error) => {
|
||||
const statusMessage = error.message === 'Something went wrong' ? 'ZEC Wallet Starting' : error.message;
|
||||
|
||||
this.setState((state) => {
|
||||
const newProgress = state.progress > 70 ? state.progress + 2.5 : state.progress + 5;
|
||||
return { progress: newProgress > 95 ? 95 : newProgress };
|
||||
return { progress: newProgress > 95 ? 95 : newProgress, message: statusMessage };
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { isRunning, progress } = this.state;
|
||||
const { isRunning, progress, message } = this.state;
|
||||
|
||||
if (isRunning) {
|
||||
return <WrappedComponent {...this.props} {...this.state} />;
|
||||
}
|
||||
|
||||
return <LoadingScreen progress={progress} />;
|
||||
return <LoadingScreen progress={progress} message={message} />;
|
||||
}
|
||||
};
|
||||
|
|
|
@ -0,0 +1,55 @@
|
|||
// @flow
|
||||
import React, { type ComponentType, Component } from 'react';
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import { ipcRenderer, remote } from 'electron';
|
||||
import { type RouterHistory, type Location } from 'react-router-dom';
|
||||
import { searchUriInArgv } from '../../config/handle-deeplink';
|
||||
import electronStore from '../../config/electron-store';
|
||||
|
||||
type PassedProps = {
|
||||
history: RouterHistory,
|
||||
location: Location,
|
||||
isRunning: boolean,
|
||||
};
|
||||
|
||||
const OSX_DEEPLINK_URL_KEY = 'OSX_DEEPLINK_URL';
|
||||
|
||||
export const withDeepLink = (
|
||||
WrappedComponent: ComponentType<PassedProps>,
|
||||
): ComponentType<$Diff<PassedProps, {}>> => class extends Component<PassedProps> {
|
||||
componentDidMount() {
|
||||
const arg = searchUriInArgv([
|
||||
...remote.process.argv,
|
||||
electronStore.get(OSX_DEEPLINK_URL_KEY) || '',
|
||||
]);
|
||||
|
||||
if (arg) this.redirect(arg);
|
||||
|
||||
remote.app.on('open-url', (event, url) => {
|
||||
this.redirect(url);
|
||||
});
|
||||
|
||||
ipcRenderer.on('on-deep-link', (event: Object, message: string) => {
|
||||
this.redirect(message);
|
||||
});
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
ipcRenderer.removeAllListeners('on-deep-link');
|
||||
}
|
||||
|
||||
redirect(message: string) {
|
||||
const { history } = this.props;
|
||||
|
||||
// clean osx deeplink storage
|
||||
if (electronStore.has(OSX_DEEPLINK_URL_KEY)) {
|
||||
electronStore.delete(OSX_DEEPLINK_URL_KEY);
|
||||
}
|
||||
|
||||
history.replace(`/send/${message.replace(/zcash:(\/\/)?/, '')}`);
|
||||
}
|
||||
|
||||
render() {
|
||||
return <WrappedComponent {...this.props} {...this.state} />;
|
||||
}
|
||||
};
|
|
@ -1,16 +1,22 @@
|
|||
// @flow
|
||||
|
||||
import DashboardIcon from '../assets/images/dashboard_icon.svg';
|
||||
import DashboardIconDark from '../assets/images/dashboard_icon_dark.svg';
|
||||
import DashboardIconLight from '../assets/images/dashboard_icon_light.svg';
|
||||
import DashboardIconActive from '../assets/images/dashboard_icon_active.svg';
|
||||
import ConsoleIcon from '../assets/images/console_icon.svg';
|
||||
import ConsoleIconDark from '../assets/images/console_icon_dark.svg';
|
||||
import ConsoleIconLight from '../assets/images/console_icon_light.svg';
|
||||
import ConsoleIconActive from '../assets/images/console_icon_active.svg';
|
||||
import SendIcon from '../assets/images/send_icon.svg';
|
||||
import SendIconDark from '../assets/images/send_icon_dark.svg';
|
||||
import SendIconLight from '../assets/images/send_icon_light.svg';
|
||||
import SendIconActive from '../assets/images/send_icon_active.svg';
|
||||
import ReceiveIcon from '../assets/images/receive_icon.svg';
|
||||
import ReceiveIconDark from '../assets/images/receive_icon_dark.svg';
|
||||
import ReceiveIconLight from '../assets/images/receive_icon_light.svg';
|
||||
import ReceiveIconActive from '../assets/images/receive_icon_active.svg';
|
||||
import TransactionsIcon from '../assets/images/transactions_icon.svg';
|
||||
import TransactionsIconDark from '../assets/images/transactions_icon_dark.svg';
|
||||
import TransactionsIconLight from '../assets/images/transactions_icon_light.svg';
|
||||
import TransactionsIconActive from '../assets/images/transactions_icon_active.svg';
|
||||
import SettingsIcon from '../assets/images/settings_icon.svg';
|
||||
import SettingsIconDark from '../assets/images/settings_icon_dark.svg';
|
||||
import SettingsIconLight from '../assets/images/settings_icon_light.svg';
|
||||
import SettingsIconActive from '../assets/images/settings_icon_active.svg';
|
||||
|
||||
import {
|
||||
|
@ -21,36 +27,73 @@ import {
|
|||
CONSOLE_ROUTE,
|
||||
TRANSACTIONS_ROUTE,
|
||||
} from './routes';
|
||||
import { LIGHT } from './themes';
|
||||
|
||||
export const MENU_OPTIONS = [
|
||||
{
|
||||
label: 'Dashboard',
|
||||
route: DASHBOARD_ROUTE,
|
||||
icon: (isActive: boolean) => (isActive ? DashboardIconActive : DashboardIcon),
|
||||
icon: (isActive: boolean, themeMode: string) => {
|
||||
if (themeMode === LIGHT) {
|
||||
return DashboardIconLight;
|
||||
}
|
||||
|
||||
return (isActive) ? DashboardIconActive : DashboardIconDark;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Send',
|
||||
route: SEND_ROUTE,
|
||||
icon: (isActive: boolean) => (isActive ? SendIconActive : SendIcon),
|
||||
icon: (isActive: boolean, themeMode: string) => {
|
||||
if (themeMode === LIGHT) {
|
||||
return SendIconLight;
|
||||
}
|
||||
|
||||
return (isActive) ? SendIconActive : SendIconDark;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Receive',
|
||||
route: RECEIVE_ROUTE,
|
||||
icon: (isActive: boolean) => (isActive ? ReceiveIconActive : ReceiveIcon),
|
||||
icon: (isActive: boolean, themeMode: string) => {
|
||||
if (themeMode === LIGHT) {
|
||||
return ReceiveIconLight;
|
||||
}
|
||||
|
||||
return (isActive) ? ReceiveIconActive : ReceiveIconDark;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Transactions',
|
||||
route: TRANSACTIONS_ROUTE,
|
||||
icon: (isActive: boolean) => (isActive ? TransactionsIconActive : TransactionsIcon),
|
||||
icon: (isActive: boolean, themeMode: string) => {
|
||||
if (themeMode === LIGHT) {
|
||||
return TransactionsIconLight;
|
||||
}
|
||||
|
||||
return (isActive) ? TransactionsIconActive : TransactionsIconDark;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
route: SETTINGS_ROUTE,
|
||||
icon: (isActive: boolean) => (isActive ? SettingsIconActive : SettingsIcon),
|
||||
icon: (isActive: boolean, themeMode: string) => {
|
||||
if (themeMode === LIGHT) {
|
||||
return SettingsIconLight;
|
||||
}
|
||||
|
||||
return (isActive) ? SettingsIconActive : SettingsIconDark;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Console',
|
||||
route: CONSOLE_ROUTE,
|
||||
icon: (isActive: boolean) => (isActive ? ConsoleIconActive : ConsoleIcon),
|
||||
icon: (isActive: boolean, themeMode: string) => {
|
||||
if (themeMode === LIGHT) {
|
||||
return ConsoleIconLight;
|
||||
}
|
||||
|
||||
return (isActive) ? ConsoleIconActive : ConsoleIconDark;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
|
@ -1,4 +1,8 @@
|
|||
// @flow
|
||||
|
||||
export const LIGHT = 'light';
|
||||
export const DARK = 'dark';
|
||||
// Theme Modifier
|
||||
export const THEME_MODE = 'THEME_MODE';
|
||||
|
||||
// Themes
|
||||
export const LIGHT = 'LIGHT';
|
||||
export const DARK = 'DARK';
|
||||
|
|
|
@ -50,11 +50,12 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
|
|||
|
||||
const formattedTransactions: Array<Object> = flow([
|
||||
arr => arr.map(transaction => ({
|
||||
transactionId: transaction.txid,
|
||||
transactionId: transaction.txid || 'N/A',
|
||||
type: transaction.category,
|
||||
date: new Date(transaction.time * 1000).toISOString(),
|
||||
address: transaction.address,
|
||||
amount: Math.abs(transaction.amount),
|
||||
fees: transaction.fee ? new BigNumber(transaction.fee).abs().toFormat(4) : 'N/A',
|
||||
})),
|
||||
arr => groupBy(arr, obj => dateFns.format(obj.date, 'MMM DD, YYYY')),
|
||||
obj => Object.keys(obj).map(day => ({
|
||||
|
|
|
@ -36,7 +36,17 @@ export type SendTransactionInput = {
|
|||
memo: string,
|
||||
};
|
||||
|
||||
const mapStateToProps = ({ sendStatus, receive }: AppState) => ({
|
||||
export type MapStateToProps = {|
|
||||
balance: number,
|
||||
zecPrice: number,
|
||||
addresses: string[],
|
||||
error: string | null,
|
||||
isSending: boolean,
|
||||
operationId: string | null,
|
||||
isToAddressValid: boolean,
|
||||
|};
|
||||
|
||||
const mapStateToProps = ({ sendStatus, receive }: AppState): MapStateToProps => ({
|
||||
balance: sendStatus.addressBalance,
|
||||
zecPrice: sendStatus.zecPrice,
|
||||
addresses: receive.addresses,
|
||||
|
@ -46,10 +56,19 @@ const mapStateToProps = ({ sendStatus, receive }: AppState) => ({
|
|||
isToAddressValid: sendStatus.isToAddressValid,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch: Dispatch) => ({
|
||||
export type MapDispatchToProps = {|
|
||||
sendTransaction: SendTransactionInput => Promise<void>,
|
||||
loadAddresses: () => Promise<void>,
|
||||
resetSendView: () => void,
|
||||
validateAddress: ({ address: string }) => Promise<void>,
|
||||
loadZECPrice: () => void,
|
||||
getAddressBalance: ({ address: string }) => Promise<void>,
|
||||
|};
|
||||
|
||||
const mapDispatchToProps = (dispatch: Dispatch): MapDispatchToProps => ({
|
||||
sendTransaction: async ({
|
||||
from, to, amount, fee, memo,
|
||||
}: SendTransactionInput) => {
|
||||
}) => {
|
||||
dispatch(sendTransaction());
|
||||
|
||||
// $FlowFixMe
|
||||
|
@ -142,7 +161,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
|
|||
|
||||
if (zAddressesErr || tAddressesErr) return dispatch(loadAddressesError({ error: 'Something went wrong!' }));
|
||||
|
||||
dispatch(
|
||||
return dispatch(
|
||||
loadAddressesSuccess({
|
||||
addresses: [...zAddresses, ...transparentAddresses],
|
||||
}),
|
||||
|
|
|
@ -1,14 +1,46 @@
|
|||
// @flow
|
||||
|
||||
import eres from 'eres';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { SettingsView } from '../views/settings';
|
||||
|
||||
import type { AppState } from '../types/app-state';
|
||||
import { loadAddressesSuccess, loadAddressesError } from '../redux/modules/receive';
|
||||
|
||||
const mapStateToProps = ({ walletSummary }: AppState) => ({
|
||||
addresses: walletSummary.addresses,
|
||||
import rpc from '../../services/api';
|
||||
|
||||
import type { AppState } from '../types/app-state';
|
||||
import type { Dispatch } from '../types/redux';
|
||||
|
||||
export type MapStateToProps = {|
|
||||
addresses: string[],
|
||||
|};
|
||||
|
||||
const mapStateToProps = ({ receive }: AppState): MapStateToProps => ({
|
||||
addresses: receive.addresses,
|
||||
});
|
||||
|
||||
export type MapDispatchToProps = {|
|
||||
loadAddresses: () => Promise<void>,
|
||||
|};
|
||||
|
||||
const mapDispatchToProps = (dispatch: Dispatch): MapDispatchToProps => ({
|
||||
loadAddresses: async () => {
|
||||
const [zAddressesErr, zAddresses] = await eres(rpc.z_listaddresses());
|
||||
|
||||
const [tAddressesErr, transparentAddresses] = await eres(rpc.getaddressesbyaccount(''));
|
||||
|
||||
if (zAddressesErr || tAddressesErr) return dispatch(loadAddressesError({ error: 'Something went wrong!' }));
|
||||
|
||||
dispatch(
|
||||
loadAddressesSuccess({
|
||||
addresses: [...zAddresses, ...transparentAddresses],
|
||||
}),
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
// $FlowFixMe
|
||||
export const SettingsContainer = connect(mapStateToProps)(SettingsView);
|
||||
export const SettingsContainer = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
)(SettingsView);
|
||||
|
|
|
@ -2,16 +2,15 @@
|
|||
|
||||
import eres from 'eres';
|
||||
import { connect } from 'react-redux';
|
||||
import flow from 'lodash.flow';
|
||||
import groupBy from 'lodash.groupby';
|
||||
import dateFns from 'date-fns';
|
||||
import { BigNumber } from 'bignumber.js';
|
||||
import uuidv4 from 'uuid/v4';
|
||||
|
||||
import { TransactionsView } from '../views/transactions';
|
||||
import {
|
||||
loadTransactions,
|
||||
loadTransactionsSuccess,
|
||||
loadTransactionsError,
|
||||
resetTransactionsList,
|
||||
} from '../redux/modules/transactions';
|
||||
import rpc from '../../services/api';
|
||||
import { listShieldedTransactions } from '../../services/shielded-transactions';
|
||||
|
@ -21,45 +20,65 @@ import { sortByDescend } from '../utils/sort-by-descend';
|
|||
|
||||
import type { AppState } from '../types/app-state';
|
||||
import type { Dispatch } from '../types/redux';
|
||||
import type { Transaction } from '../components/transaction-item';
|
||||
|
||||
const mapStateToProps = ({ transactions }: AppState) => ({
|
||||
transactions: transactions.list,
|
||||
isLoading: transactions.isLoading,
|
||||
error: transactions.error,
|
||||
zecPrice: transactions.zecPrice,
|
||||
hasNextPage: transactions.hasNextPage,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch: Dispatch) => ({
|
||||
getTransactions: async () => {
|
||||
export type MapStateToProps = {
|
||||
transactions: Transaction[],
|
||||
isLoading: boolean,
|
||||
error: string | null,
|
||||
zecPrice: number,
|
||||
hasNextPage: boolean,
|
||||
};
|
||||
|
||||
export type MapDispatchToProps = {|
|
||||
getTransactions: ({
|
||||
offset: number,
|
||||
count: number,
|
||||
shieldedTransactionsCount: number,
|
||||
}) => Promise<void>,
|
||||
resetTransactionsList: () => void,
|
||||
|};
|
||||
|
||||
const mapDispatchToProps = (dispatch: Dispatch): MapDispatchToProps => ({
|
||||
resetTransactionsList: () => dispatch(resetTransactionsList()),
|
||||
getTransactions: async ({ offset, count, shieldedTransactionsCount }) => {
|
||||
dispatch(loadTransactions());
|
||||
|
||||
const [transactionsErr, transactions = []] = await eres(rpc.listtransactions('', 200));
|
||||
const [transactionsErr, transactions = []] = await eres(
|
||||
rpc.listtransactions('', count, offset),
|
||||
);
|
||||
|
||||
if (transactionsErr) {
|
||||
return dispatch(loadTransactionsError({ error: transactionsErr.message }));
|
||||
}
|
||||
|
||||
const formattedTransactions = flow([
|
||||
arr => arr.map(transaction => ({
|
||||
transactionId: transaction.txid,
|
||||
const formattedTransactions = sortByDescend('date')(
|
||||
[
|
||||
...transactions,
|
||||
...listShieldedTransactions({ count, offset: shieldedTransactionsCount }),
|
||||
].map(transaction => ({
|
||||
transactionId: transaction.txid ? transaction.txid : uuidv4(),
|
||||
type: transaction.category,
|
||||
date: new Date(transaction.time * 1000).toISOString(),
|
||||
address: transaction.address,
|
||||
amount: new BigNumber(transaction.amount).absoluteValue().toNumber(),
|
||||
fees: transaction.fee ? new BigNumber(transaction.fee).abs().toFormat(4) : 'N/A',
|
||||
})),
|
||||
arr => groupBy(arr, obj => dateFns.format(obj.date, 'MMM DD, YYYY')),
|
||||
obj => Object.keys(obj).map(day => ({
|
||||
day,
|
||||
jsDay: new Date(day),
|
||||
list: sortByDescend('date')(obj[day]),
|
||||
})),
|
||||
sortByDescend('jsDay'),
|
||||
])([...transactions, ...listShieldedTransactions()]);
|
||||
);
|
||||
|
||||
dispatch(
|
||||
loadTransactionsSuccess({
|
||||
list: formattedTransactions,
|
||||
zecPrice: new BigNumber(store.get('ZEC_DOLLAR_PRICE')).toNumber(),
|
||||
hasNextPage: Boolean(formattedTransactions.length),
|
||||
}),
|
||||
);
|
||||
},
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
// @flow
|
||||
|
||||
import uniqBy from 'lodash.uniqby';
|
||||
import type { Action } from '../../types/redux';
|
||||
import type { Transaction } from '../../components/transaction-item';
|
||||
|
||||
|
@ -7,6 +7,7 @@ import type { Transaction } from '../../components/transaction-item';
|
|||
export const LOAD_TRANSACTIONS = 'LOAD_TRANSACTIONS';
|
||||
export const LOAD_TRANSACTIONS_SUCCESS = 'LOAD_TRANSACTIONS_SUCCESS';
|
||||
export const LOAD_TRANSACTIONS_ERROR = 'LOAD_TRANSACTIONS_ERROR';
|
||||
export const RESET_TRANSACTIONS_LIST = 'RESET_TRANSACTIONS_LIST';
|
||||
|
||||
export type TransactionsList = { day: string, list: Transaction[] }[];
|
||||
|
||||
|
@ -18,14 +19,17 @@ export const loadTransactions = () => ({
|
|||
export const loadTransactionsSuccess = ({
|
||||
list,
|
||||
zecPrice,
|
||||
hasNextPage,
|
||||
}: {
|
||||
list: TransactionsList,
|
||||
list: Transaction[],
|
||||
zecPrice: number,
|
||||
hasNextPage: boolean,
|
||||
}) => ({
|
||||
type: LOAD_TRANSACTIONS_SUCCESS,
|
||||
payload: {
|
||||
list,
|
||||
zecPrice,
|
||||
hasNextPage,
|
||||
},
|
||||
});
|
||||
|
||||
|
@ -34,11 +38,17 @@ export const loadTransactionsError = ({ error }: { error: string }) => ({
|
|||
payload: { error },
|
||||
});
|
||||
|
||||
export const resetTransactionsList = () => ({
|
||||
type: RESET_TRANSACTIONS_LIST,
|
||||
payload: {},
|
||||
});
|
||||
|
||||
export type State = {
|
||||
isLoading: boolean,
|
||||
error: string | null,
|
||||
list: TransactionsList,
|
||||
list: Transaction[],
|
||||
zecPrice: number,
|
||||
hasNextPage: boolean,
|
||||
};
|
||||
|
||||
const initialState = {
|
||||
|
@ -46,6 +56,7 @@ const initialState = {
|
|||
list: [],
|
||||
error: null,
|
||||
isLoading: false,
|
||||
hasNextPage: true,
|
||||
};
|
||||
|
||||
// eslint-disable-next-line
|
||||
|
@ -61,6 +72,7 @@ export default (state: State = initialState, action: Action) => {
|
|||
return {
|
||||
...state,
|
||||
...action.payload,
|
||||
list: uniqBy(state.list.concat(action.payload.list), tr => tr.transactionId + tr.type),
|
||||
isLoading: false,
|
||||
error: null,
|
||||
};
|
||||
|
@ -70,6 +82,13 @@ export default (state: State = initialState, action: Action) => {
|
|||
isLoading: false,
|
||||
error: action.payload.error,
|
||||
};
|
||||
case RESET_TRANSACTIONS_LIST:
|
||||
return {
|
||||
...state,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
list: [],
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
|
|
@ -4,8 +4,10 @@ import { compose } from 'redux';
|
|||
import { withRouter } from 'react-router-dom';
|
||||
import { RouterComponent } from './router';
|
||||
import { withDaemonStatusCheck } from '../components/with-daemon-status-check';
|
||||
import { withDeepLink } from '../components/with-deeplink';
|
||||
|
||||
export const Router = compose(
|
||||
withRouter,
|
||||
withDaemonStatusCheck,
|
||||
withDeepLink,
|
||||
)(RouterComponent);
|
||||
|
|
|
@ -42,7 +42,7 @@ const ContentWrapper = styled.div`
|
|||
const getTitle = (path: string) => {
|
||||
if (path === '/') return 'Dashboard';
|
||||
|
||||
return path.replace('/', '');
|
||||
return path.split('/')[1];
|
||||
};
|
||||
|
||||
export const RouterComponent = ({
|
||||
|
@ -55,39 +55,16 @@ export const RouterComponent = ({
|
|||
<FullWrapper>
|
||||
<HeaderComponent title={getTitle(location.pathname)} />
|
||||
<ContentWrapper>
|
||||
<SidebarContainer
|
||||
location={location}
|
||||
history={history}
|
||||
/>
|
||||
{/* $FlowFixMe */}
|
||||
<SidebarContainer location={location} history={history} />
|
||||
<LayoutComponent>
|
||||
<ScrollTopComponent>
|
||||
<Switch>
|
||||
<Route
|
||||
exact
|
||||
path={DASHBOARD_ROUTE}
|
||||
component={DashboardContainer}
|
||||
/>
|
||||
<Route
|
||||
path={SEND_ROUTE}
|
||||
component={SendContainer}
|
||||
/>
|
||||
<Route
|
||||
path={RECEIVE_ROUTE}
|
||||
component={ReceiveContainer}
|
||||
/>
|
||||
<Route
|
||||
path={SETTINGS_ROUTE}
|
||||
component={SettingsContainer}
|
||||
/>
|
||||
<Route
|
||||
path={CONSOLE_ROUTE}
|
||||
component={ConsoleView}
|
||||
/>
|
||||
<Route
|
||||
path={TRANSACTIONS_ROUTE}
|
||||
component={TransactionsContainer}
|
||||
/>
|
||||
<Route exact path={DASHBOARD_ROUTE} component={DashboardContainer} />
|
||||
<Route path={`${SEND_ROUTE}/:to?`} component={SendContainer} />
|
||||
<Route path={RECEIVE_ROUTE} component={ReceiveContainer} />
|
||||
<Route path={SETTINGS_ROUTE} component={SettingsContainer} />
|
||||
<Route path={CONSOLE_ROUTE} component={ConsoleView} />
|
||||
<Route path={TRANSACTIONS_ROUTE} component={TransactionsContainer} />
|
||||
<Route component={NotFoundView} />
|
||||
</Switch>
|
||||
</ScrollTopComponent>
|
||||
|
|
176
app/theme.js
|
@ -1,176 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import React, { Fragment, type Node } from 'react';
|
||||
import theme from 'styled-theming';
|
||||
import { ThemeProvider, createGlobalStyle } from 'styled-components';
|
||||
// $FlowFixMe
|
||||
import { normalize } from 'polished'; // eslint-disable-line
|
||||
|
||||
import { DARK } from './constants/themes';
|
||||
|
||||
const darkOne = '#F4B728';
|
||||
const blackTwo = '#171717';
|
||||
const lightOne = '#ffffff';
|
||||
const brandOne = '#000';
|
||||
const brandThree = '#5d5d65';
|
||||
const buttonBorderColor = '#3e3c42';
|
||||
const activeItem = '#F4B728';
|
||||
const text = '#FFF';
|
||||
const cardBackgroundColor = '#000';
|
||||
const sidebarLogoGradientBegin = '#F4B728';
|
||||
const sidebarLogoGradientEnd = '#FFE240';
|
||||
const sidebarHoveredItem = '#1C1C1C';
|
||||
const sidebarHoveredItemLabel = '#8e8e96';
|
||||
const background = '#212124';
|
||||
const transactionSent = '#FF6C6C';
|
||||
const transactionReceived = '#6AEAC0';
|
||||
const transactionsDate = '#777777';
|
||||
const transactionsItemHovered = '#222222';
|
||||
const selectButtonShadow = 'rgba(238,201,76,0.65)';
|
||||
const statusPillLabel = '#727272';
|
||||
const transactionsDetailsLabel = transactionsDate;
|
||||
|
||||
const appTheme: AppTheme = {
|
||||
mode: DARK,
|
||||
fontFamily: 'Roboto',
|
||||
fontWeight: {
|
||||
bold: 700,
|
||||
default: 400,
|
||||
light: 300,
|
||||
},
|
||||
fontSize: {
|
||||
large: 1.25,
|
||||
medium: 1.125,
|
||||
regular: 0.84375,
|
||||
small: 0.667,
|
||||
},
|
||||
colors: {
|
||||
primary: theme('mode', {
|
||||
light: lightOne,
|
||||
dark: darkOne,
|
||||
}),
|
||||
secondary: theme('mode', {
|
||||
light: darkOne,
|
||||
dark: lightOne,
|
||||
}),
|
||||
sidebarBg: theme('mode', {
|
||||
light: brandOne,
|
||||
dark: brandOne,
|
||||
}),
|
||||
sidebarItem: theme('mode', {
|
||||
light: brandThree,
|
||||
dark: brandThree,
|
||||
}),
|
||||
sidebarItemActive: theme('mode', {
|
||||
light: activeItem,
|
||||
dark: activeItem,
|
||||
}),
|
||||
sidebarHoveredItem: theme('mode', {
|
||||
light: sidebarHoveredItem,
|
||||
dark: sidebarHoveredItem,
|
||||
}),
|
||||
sidebarHoveredItemLabel: theme('mode', {
|
||||
light: sidebarHoveredItemLabel,
|
||||
dark: sidebarHoveredItemLabel,
|
||||
}),
|
||||
cardBackgroundColor: theme('mode', {
|
||||
light: cardBackgroundColor,
|
||||
dark: cardBackgroundColor,
|
||||
}),
|
||||
text: theme('mode', {
|
||||
light: '#000',
|
||||
dark: text,
|
||||
}),
|
||||
activeItem: theme('mode', {
|
||||
light: activeItem,
|
||||
dark: activeItem,
|
||||
}),
|
||||
inactiveItem: theme('mode', {
|
||||
light: brandThree,
|
||||
dark: brandThree,
|
||||
}),
|
||||
sidebarLogoGradientBegin: theme('mode', {
|
||||
light: sidebarLogoGradientBegin,
|
||||
dark: sidebarLogoGradientBegin,
|
||||
}),
|
||||
sidebarLogoGradientEnd: theme('mode', {
|
||||
light: sidebarLogoGradientEnd,
|
||||
dark: sidebarLogoGradientEnd,
|
||||
}),
|
||||
background: theme('mode', {
|
||||
light: '#FFF',
|
||||
dark: background,
|
||||
}),
|
||||
transactionSent: theme('mode', {
|
||||
light: transactionSent,
|
||||
dark: transactionSent,
|
||||
}),
|
||||
transactionReceived: theme('mode', {
|
||||
light: transactionReceived,
|
||||
dark: transactionReceived,
|
||||
}),
|
||||
transactionsDate: theme('mode', {
|
||||
light: transactionsDate,
|
||||
dark: transactionsDate,
|
||||
}),
|
||||
transactionsItemHovered: theme('mode', {
|
||||
light: transactionsItemHovered,
|
||||
dark: transactionsItemHovered,
|
||||
}),
|
||||
inputBackground: theme('mode', {
|
||||
light: brandOne,
|
||||
dark: brandOne,
|
||||
}),
|
||||
selectButtonShadow: theme('mode', {
|
||||
light: selectButtonShadow,
|
||||
dark: selectButtonShadow,
|
||||
}),
|
||||
transactionsDetailsLabel: theme('mode', {
|
||||
light: transactionsDetailsLabel,
|
||||
dark: transactionsDetailsLabel,
|
||||
}),
|
||||
statusPillLabel: theme('mode', {
|
||||
light: statusPillLabel,
|
||||
dark: statusPillLabel,
|
||||
}),
|
||||
modalItemLabel: theme('mode', {
|
||||
light: transactionsDate,
|
||||
dark: transactionsDate,
|
||||
}),
|
||||
blackTwo: theme('mode', {
|
||||
light: blackTwo,
|
||||
dark: blackTwo,
|
||||
}),
|
||||
buttonBorderColor: theme('mode', {
|
||||
light: buttonBorderColor,
|
||||
dark: buttonBorderColor,
|
||||
}),
|
||||
},
|
||||
sidebarWidth: '180px',
|
||||
headerHeight: '60px',
|
||||
layoutPaddingLeft: '35px',
|
||||
layoutPaddingRight: '35px',
|
||||
layoutContentPaddingTop: '20px',
|
||||
boxBorderRadius: '3px',
|
||||
transitionEase: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
||||
};
|
||||
|
||||
export const GlobalStyle = createGlobalStyle`
|
||||
${normalize()}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
`;
|
||||
|
||||
export const DoczWrapper = ({ children }: { children: () => Node<*> }) => (
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<Fragment>
|
||||
<GlobalStyle />
|
||||
{children()}
|
||||
</Fragment>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
// eslint-disable-next-line
|
||||
export default appTheme;
|
|
@ -0,0 +1,123 @@
|
|||
// @flow
|
||||
|
||||
const white = '#FFFFFF';
|
||||
const text = white;
|
||||
const brand = '#F4B728';
|
||||
const brand2 = '#FFE240';
|
||||
const black = '#000000';
|
||||
const error = '#FF6C6C';
|
||||
const success = '#6AEAC0';
|
||||
const darkBrand = '#212124';
|
||||
const brandThree = '#5d5d65';
|
||||
|
||||
export const DARK_COLORS = {
|
||||
darkOne: brand,
|
||||
blackTwo: '#171717',
|
||||
lightOne: text,
|
||||
brandOne: black,
|
||||
brandThree: '#5d5d65',
|
||||
buttonBorderColor: '#3e3c42',
|
||||
activeItem: brand,
|
||||
text,
|
||||
background: '#212124',
|
||||
|
||||
// Dropdown
|
||||
dropdownBg: '#5d5d5d',
|
||||
dropdownHoveredBg: '#212124',
|
||||
dropdownBorder: '#4e4b4b',
|
||||
dropdownIconBorder: '#828282',
|
||||
dropdownOpenedIconBorder: '#ddd',
|
||||
|
||||
// Card
|
||||
cardBackgroundColor: black,
|
||||
sendCardBg: black,
|
||||
sendCardBorder: 'transparent',
|
||||
|
||||
// Buttons
|
||||
buttonPrimaryBg: brand,
|
||||
buttonPrimaryDisabledBg: brand,
|
||||
buttonPrimaryText: black,
|
||||
buttonSecondaryBg: '#ddd',
|
||||
buttonSecondaryDisabledBg: brand,
|
||||
buttonSecondaryText: black,
|
||||
buttonSecondaryBorder: '#ddd',
|
||||
buttonSecondaryHoveredBg: '#bbb',
|
||||
|
||||
// Transactions
|
||||
transactionSent: error,
|
||||
transactionReceived: success,
|
||||
transactionsDate: '#777777',
|
||||
transactionsItemHovered: '#222222',
|
||||
|
||||
transactionItemBg: black,
|
||||
transactionItemHoverBg: '#0A0A0A',
|
||||
transactionItemBorder: 'transparent',
|
||||
transactionItemAddress: '#A7A7A7',
|
||||
transactionItemAddressHover: white,
|
||||
|
||||
transactionDetailsShadow: `0px 0px 20px 0px ${black}`,
|
||||
transactionDetailsBg: darkBrand,
|
||||
transactionDetailsRowHover: '#1D1D1D',
|
||||
transactionDetailsDivider: '#3A3A3A',
|
||||
transactionDetailsLabel: '#777777',
|
||||
|
||||
// Status Pill
|
||||
statusPillLabel: '#727272',
|
||||
statusPillBg: black,
|
||||
statusPillBorder: black,
|
||||
|
||||
// Sidebar
|
||||
sidebarBg: black,
|
||||
sidebarBorderRight: black,
|
||||
sidebarLogoGradientBegin: brand,
|
||||
sidebarLogoGradientEnd: brand2,
|
||||
sidebarHoveredItemLabel: '#8e8e96',
|
||||
sidebarActiveItemBorder: 'red',
|
||||
sidebarItem: brandThree,
|
||||
sidebarItemActive: brand,
|
||||
sidebarItemHovered: '#FFF',
|
||||
sidebarItemHoveredBg: darkBrand,
|
||||
|
||||
// Misc
|
||||
divider: black,
|
||||
qrCodeWrapperBg: black,
|
||||
qrCodeWrapperBorder: black,
|
||||
headerTitle: text,
|
||||
selectButtonShadow: 'rgba(238,201,76,0.65)',
|
||||
|
||||
// Forms
|
||||
inputBg: black,
|
||||
inputBorder: 'transparent',
|
||||
inputBorderActive: '#222',
|
||||
|
||||
// Wallet Summary
|
||||
walletSummaryBg: black,
|
||||
walletSummaryBorder: black,
|
||||
|
||||
// Wallet Address
|
||||
walletAddressBg: black,
|
||||
walletAddressBorder: black,
|
||||
walletAddressInput: '#828282',
|
||||
walletAddressInputHovered: white,
|
||||
walletAddressTooltip: black,
|
||||
walletAddressTooltipBg: white,
|
||||
|
||||
// Console
|
||||
consoleBg: black,
|
||||
consoleBorder: 'transparent',
|
||||
|
||||
// Settings
|
||||
settingsCardBg: black,
|
||||
settingsLearnMore: '#AAAAAA',
|
||||
settingsLearnMoreHovered: '#fff',
|
||||
|
||||
// Loading
|
||||
loadingScreenBg: black,
|
||||
loadingScreenText: white,
|
||||
|
||||
// Misc
|
||||
sendAdditionalOptionsBg: black,
|
||||
sendAdditionalOptionsBorder: black,
|
||||
sendAdditionalInputBg: darkBrand,
|
||||
sendAdditionalInputText: white,
|
||||
};
|
|
@ -0,0 +1,4 @@
|
|||
// @flow
|
||||
|
||||
export { DARK_COLORS } from './dark';
|
||||
export { LIGHT_COLORS } from './light';
|
|
@ -0,0 +1,136 @@
|
|||
// @flow
|
||||
|
||||
const white = '#FFFFFF';
|
||||
const whiteHover = '#F9FBFE';
|
||||
const offWhite = '#F9F9F9';
|
||||
const black = '#000000';
|
||||
const text = '#142533';
|
||||
const secondaryText = '#777777';
|
||||
const brand = '#5684EB';
|
||||
const error = '#FF6C6C';
|
||||
const success = '#66BE54';
|
||||
const logo = '#F4B728';
|
||||
const logo2 = '#FFE240';
|
||||
const border = '#DDDDDD';
|
||||
|
||||
export const LIGHT_COLORS = {
|
||||
// General
|
||||
background: offWhite,
|
||||
text,
|
||||
darkOne: brand,
|
||||
blackTwo: '#171717',
|
||||
lightOne: white,
|
||||
brandOne: '#000',
|
||||
brandThree: '#5D5D65',
|
||||
buttonBorderColor: '#3E3C42',
|
||||
activeItem: brand,
|
||||
|
||||
// Dropdown
|
||||
dropdownBg: offWhite,
|
||||
dropdownHoveredBg: white,
|
||||
dropdownBorder: border,
|
||||
dropdownIconBorder: '#c1c1c1',
|
||||
dropdownOpenedIconBorder: '#828282',
|
||||
|
||||
// Buttons
|
||||
buttonPrimaryBg: brand,
|
||||
buttonPrimaryDisabledBg: brand,
|
||||
buttonPrimaryText: white,
|
||||
buttonSecondaryBg: '#989898',
|
||||
buttonSecondaryDisabledBg: brand,
|
||||
buttonSecondaryBorder: '#989898',
|
||||
buttonSecondaryText: white,
|
||||
buttonSecondaryHoveredBg: '#aaa',
|
||||
|
||||
// Card
|
||||
cardBackgroundColor: black,
|
||||
sendCardBg: white,
|
||||
sendCardBorder: border,
|
||||
|
||||
// Sidebar
|
||||
sidebarBg: white,
|
||||
sidebarBorderRight: border,
|
||||
sidebarLogoGradientBegin: logo,
|
||||
sidebarLogoGradientEnd: logo2,
|
||||
sidebarHoveredItemLabel: '#8E8E96',
|
||||
sidebarItem: '#aaa',
|
||||
sidebarItemActive: text,
|
||||
sidebarItemHovered: text,
|
||||
sidebarItemHoveredBg: offWhite,
|
||||
sidebarActiveItemLabel: '#8E8E96',
|
||||
sidebarActiveItemBorder: 'red',
|
||||
|
||||
// Transactions
|
||||
transactionSent: error,
|
||||
transactionReceived: success,
|
||||
transactionsDate: secondaryText,
|
||||
transactionsItemHovered: '#222222',
|
||||
|
||||
// Transaction Item
|
||||
transactionItemBg: white,
|
||||
transactionItemHoverBg: whiteHover,
|
||||
transactionItemBorder: border,
|
||||
transactionItemAddress: '#666666',
|
||||
transactionItemAddressHover: '#666666',
|
||||
|
||||
// Transaction Details
|
||||
transactionDetailsShadow: `0px 0px 1px 0px ${black}`,
|
||||
transactionDetailsBg: white,
|
||||
transactionDetailsRowHover: whiteHover,
|
||||
transactionDetailsDivider: border,
|
||||
transactionDetailsLabel: '#999999',
|
||||
|
||||
// Select
|
||||
selectButtonShadow: 'rgba(238,201,76,0.65)',
|
||||
|
||||
// Status Pill
|
||||
statusPillLabel: text,
|
||||
statusPillBg: '#F9FBFE',
|
||||
statusPillBorder: border,
|
||||
|
||||
// QR Code
|
||||
qrCodeWrapperBg: white,
|
||||
qrCodeWrapperBorder: border,
|
||||
|
||||
// Header
|
||||
headerTitle: text,
|
||||
|
||||
// Wallet Summary
|
||||
walletSummaryBg: white,
|
||||
walletSummaryBorder: border,
|
||||
|
||||
// Wallet Address
|
||||
walletAddressBg: white,
|
||||
walletAddressBorder: border,
|
||||
walletAddressInput: '#666',
|
||||
walletAddressInputHovered: black,
|
||||
walletAddressTooltip: white,
|
||||
walletAddressTooltipBg: black,
|
||||
|
||||
// Forms
|
||||
inputBg: white,
|
||||
inputBorder: border,
|
||||
inputBorderActive: '#828282',
|
||||
|
||||
// Console
|
||||
consoleBg: white,
|
||||
consoleBorder: border,
|
||||
|
||||
// Misc
|
||||
divider: '#AAAAAA',
|
||||
|
||||
// Settings
|
||||
settingsCardBg: white,
|
||||
settingsLearnMore: '#a0a0a0',
|
||||
settingsLearnMoreHovered: '#000',
|
||||
|
||||
// Loading
|
||||
loadingScreenBg: offWhite,
|
||||
loadingScreenText: white,
|
||||
|
||||
// Additional Panes
|
||||
sendAdditionalOptionsBg: white,
|
||||
sendAdditionalOptionsBorder: border,
|
||||
sendAdditionalInputBg: offWhite,
|
||||
sendAdditionalInputText: white,
|
||||
};
|
|
@ -0,0 +1,15 @@
|
|||
// @flow
|
||||
|
||||
import React, { Fragment, type Node } from 'react';
|
||||
import { ThemeProvider } from 'styled-components';
|
||||
import { appTheme } from './theme';
|
||||
import { GlobalStyle } from './global';
|
||||
|
||||
export const DoczWrapper = ({ children }: { children: () => Node<*> }) => (
|
||||
<ThemeProvider theme={appTheme}>
|
||||
<Fragment>
|
||||
<GlobalStyle />
|
||||
{children()}
|
||||
</Fragment>
|
||||
</ThemeProvider>
|
||||
);
|