chore: solve merge conflicts
This commit is contained in:
commit
90f16a6ba6
|
@ -0,0 +1,42 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { Button } from '../../app/components/button';
|
||||||
|
import appTheme from '../../app/theme';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<Button />', () => {
|
||||||
|
test('should render primary button correctly', () => {
|
||||||
|
const { queryByTestId } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<Button
|
||||||
|
label='Click me!'
|
||||||
|
onClick={() => alert('Clicked')}
|
||||||
|
variant='primary'
|
||||||
|
/>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByTestId('PrimaryButton')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render secondary button correctly', () => {
|
||||||
|
const { queryByTestId } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<Button
|
||||||
|
label='Click me!'
|
||||||
|
onClick={() => alert('Clicked')}
|
||||||
|
variant='secondary'
|
||||||
|
/>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByTestId('SecondaryButton')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
|
@ -0,0 +1,34 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { Clipboard } from '../../app/components/clipboard';
|
||||||
|
import appTheme from '../../app/theme';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<Clipboard />', () => {
|
||||||
|
test('should render clipboard component correctly', () => {
|
||||||
|
const { queryByTestId } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<Clipboard text='Click me!' />
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByTestId('Clipboard')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render clipboard button correctly', () => {
|
||||||
|
const { queryByTestId } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<Clipboard text='Click me!' />
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByTestId('PrimaryButton')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
|
@ -0,0 +1,28 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { ColumnComponent } from '../../app/components/column';
|
||||||
|
import appTheme from '../../app/theme';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<ColumnComponent />', () => {
|
||||||
|
test('should render correctly', () => {
|
||||||
|
// $FlowFixMe
|
||||||
|
const { container } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<ColumnComponent>
|
||||||
|
<h3>ZEC</h3>
|
||||||
|
<h3>React</h3>
|
||||||
|
<h3>Wallet</h3>
|
||||||
|
</ColumnComponent>
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container).toBeVisible();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,39 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { ConfirmDialogComponent } from '../../app/components/confirm-dialog';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<ConfirmDialogComponent />', () => {
|
||||||
|
test('should render confirm dialog correctly', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<ConfirmDialogComponent
|
||||||
|
title="Confirm example"
|
||||||
|
onConfirm={() => alert('Confirm')}
|
||||||
|
renderTrigger={toggle => <button onClick={toggle}> Open! </button>}
|
||||||
|
>
|
||||||
|
{toggle => <div>Confirm content</div>}
|
||||||
|
</ConfirmDialogComponent>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render confirm dialog trigger', () => {
|
||||||
|
const { queryByTestId } = render(
|
||||||
|
<ConfirmDialogComponent
|
||||||
|
title="Confirm example"
|
||||||
|
onConfirm={() => alert('Confirm')}
|
||||||
|
renderTrigger={toggle => <button data-testid='ConfirmDialogTrigger' onClick={toggle}> Open! </button>}
|
||||||
|
>
|
||||||
|
{toggle => <div>Confirm content</div>}
|
||||||
|
</ConfirmDialogComponent>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByTestId('ConfirmDialogTrigger')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,27 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { Divider } from '../../app/components/divider';
|
||||||
|
import appTheme from '../../app/theme';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<Divider />', () => {
|
||||||
|
test('should render correctly', () => {
|
||||||
|
// $FlowFixMe
|
||||||
|
const { container } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<Divider opacity={0.3} />
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
const divider = container.querySelector('div');
|
||||||
|
|
||||||
|
expect(divider).toBeVisible();
|
||||||
|
expect(divider).toHaveStyle('opacity: 0.3');
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,64 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { DropdownComponent } from '../../app/components/dropdown';
|
||||||
|
import { Button } from '../../app/components/button';
|
||||||
|
import appTheme from '../../app/theme';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<DropdownComponent />', () => {
|
||||||
|
test('should render dropdown correctly', () => {
|
||||||
|
const { queryByTestId } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<div style={{ height: '500px' }} data-testid='DropdownWrapper'>
|
||||||
|
<DropdownComponent
|
||||||
|
label='Addresses'
|
||||||
|
renderTrigger={toggleVisibility => (
|
||||||
|
<Button
|
||||||
|
label='Show Dropdown'
|
||||||
|
onClick={toggleVisibility}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
options={[
|
||||||
|
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
|
||||||
|
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByTestId('DropdownWrapper')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render dropdown button trigger correctly', () => {
|
||||||
|
const { queryByTestId } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<div style={{ height: '500px' }}>
|
||||||
|
<DropdownComponent
|
||||||
|
label='Addresses'
|
||||||
|
renderTrigger={toggleVisibility => (
|
||||||
|
<Button
|
||||||
|
label='Show Dropdown'
|
||||||
|
data-testid='DropdownAddressesWrapper'
|
||||||
|
onClick={toggleVisibility}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
options={[
|
||||||
|
{ label: 'asbh1yeasbdh23848asdasd', onClick: console.log },
|
||||||
|
{ label: 'urtyruhjr374hbfdjdhuh', onClick: console.log },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByTestId('PrimaryButton')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
|
@ -0,0 +1,33 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup, queryByText } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { EmptyTransactionsComponent } from '../../app/components/empty-transactions';
|
||||||
|
import appTheme from '../../app/theme';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<EmptyTransactions />', () => {
|
||||||
|
test('should render correctly', () => {
|
||||||
|
const { queryByTestId } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<EmptyTransactionsComponent />
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByTestId('NoTransactions')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should show label correctly', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<EmptyTransactionsComponent />
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByText(container, /transactions/i)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,35 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup, queryByText } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { InputLabelComponent } from '../../app/components/input-label';
|
||||||
|
import appTheme from '../../app/theme';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<InputLabelComponent />', () => {
|
||||||
|
test('should render correctly', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<InputLabelComponent value='From' />
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
const label = container.querySelector('p');
|
||||||
|
|
||||||
|
expect(label).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render input label string', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<InputLabelComponent value='From' />
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByText(container, /From/i)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,42 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { InputComponent } from '../../app/components/input';
|
||||||
|
import appTheme from '../../app/theme';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<InputComponent />', () => {
|
||||||
|
test('should render text input correctly', () => {
|
||||||
|
const { queryByTestId } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<InputComponent
|
||||||
|
inputType='input'
|
||||||
|
value='Hello World!'
|
||||||
|
onChange={console.log}
|
||||||
|
/>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByTestId('Input')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render textarea correctly', () => {
|
||||||
|
const { queryByTestId } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<InputComponent
|
||||||
|
inputType='textarea'
|
||||||
|
value='I am Zcash Electron Wallet'
|
||||||
|
onChange={console.log}
|
||||||
|
rows={10}
|
||||||
|
/>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByTestId('Textarea')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,23 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { LoadingScreen } from '../../app/components/loading-screen';
|
||||||
|
import appTheme from '../../app/theme';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<LoadingScreen />', () => {
|
||||||
|
test('should render status pill correctly', () => {
|
||||||
|
const { queryByTestId } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<LoadingScreen progress={83.} />
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByTestId('LoadingScreen')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,35 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { ModalComponent } from '../../app/components/modal';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<ModalComponent />', () => {
|
||||||
|
test('should render modal trigger correctly', () => {
|
||||||
|
const { queryByTestId } = render(
|
||||||
|
<ModalComponent
|
||||||
|
renderTrigger={toggleVisibility => (
|
||||||
|
<button type="button" data-testid='ModalTrigger' onClick={toggleVisibility}>
|
||||||
|
Open Modal
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{toggleVisibility => (
|
||||||
|
<div style={{ padding: '50px', backgroundColor: 'white' }}>
|
||||||
|
Modal Content
|
||||||
|
<button type="button" onClick={toggleVisibility}>
|
||||||
|
Close Modal
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</ModalComponent>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByTestId('ModalTrigger')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
|
@ -0,0 +1,19 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { QRCode } from '../../app/components/qrcode';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<QRCode />', () => {
|
||||||
|
test('should render qrcode component correctly', () => {
|
||||||
|
const { queryByTestId } = render(
|
||||||
|
<QRCode value='https://z.cash.foundation' />,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByTestId('QRCode')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,27 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { RowComponent } from '../../app/components/row';
|
||||||
|
import appTheme from '../../app/theme';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<RowComponent />', () => {
|
||||||
|
test('should render correctly', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<RowComponent>
|
||||||
|
<h3>ZEC</h3>
|
||||||
|
<h3>React</h3>
|
||||||
|
<h3>Wallet</h3>
|
||||||
|
</RowComponent>
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container).toBeVisible();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,67 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup, queryByText } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { SelectComponent } from '../../app/components/select';
|
||||||
|
import appTheme from '../../app/theme';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<SelectComponent />', () => {
|
||||||
|
test('should generate snapshot correctly', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<SelectComponent
|
||||||
|
onChange={console.log}
|
||||||
|
value='asbh1yeasbdh23848asdasd'
|
||||||
|
placeholder='Select a address'
|
||||||
|
options={[
|
||||||
|
{ label: 'asbh1yeasbdh23848asdasd', value: '1' },
|
||||||
|
{ label: 'urtyruhjr374hbfdjdhuh', value: '1' },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render correctly', () => {
|
||||||
|
const { queryByTestId } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<SelectComponent
|
||||||
|
onChange={console.log}
|
||||||
|
value='asbh1yeasbdh23848asdasd'
|
||||||
|
placeholder='Select a address'
|
||||||
|
options={[
|
||||||
|
{ label: 'asbh1yeasbdh23848asdasd', value: '1' },
|
||||||
|
{ label: 'urtyruhjr374hbfdjdhuh', value: '1' },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByTestId('Select')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render select trigger string', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<SelectComponent
|
||||||
|
onChange={console.log}
|
||||||
|
value='asbh1yeasbdh23848asdasd'
|
||||||
|
placeholder='Select a address'
|
||||||
|
options={[
|
||||||
|
{ label: 'asbh1yeasbdh23848asdasd', value: '1' },
|
||||||
|
{ label: 'urtyruhjr374hbfdjdhuh', value: '1' },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByText(container, /Select/i)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,54 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup, queryByText } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { StatusPill } from '../../app/components/status-pill';
|
||||||
|
import appTheme from '../../app/theme';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<StatusPill />', () => {
|
||||||
|
test('should render status pill correctly', () => {
|
||||||
|
const { queryByTestId } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<StatusPill progress={83.} type='syncing' />
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByTestId('StatusPill')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should show percentage on status pill syncing', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<StatusPill progress={56.} type='syncing' />
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByText(container, /%/i)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should hide percentage on status pill', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<StatusPill progress={100.} type='ready' />
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByText(container, /%/i)).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should show error string and hide percentage on status pill', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<StatusPill progress={0.} type='error' />
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByText(container, /%/i)).not.toBeInTheDocument();
|
||||||
|
expect(queryByText(container, /error/i)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,33 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup, queryByText } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { TextComponent } from '../../app/components/text';
|
||||||
|
import appTheme from '../../app/theme';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<TextComponent />', () => {
|
||||||
|
test('should render correctly', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<TextComponent value='ZEC React Wallet' />
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should render input label string', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<TextComponent value='Test' />
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByText(container, /Test/i)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,31 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { TransactionItemComponent } from '../../app/components/transaction-item';
|
||||||
|
import appTheme from '../../app/theme';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<TransactionItem />', () => {
|
||||||
|
test('should render a transaction item correctly', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<TransactionItemComponent
|
||||||
|
type='send'
|
||||||
|
address='123456789123456789123456789123456789'
|
||||||
|
transactionId='a0s9dujo23j0'
|
||||||
|
amount={0.8652}
|
||||||
|
date={new Date().toISOString()}
|
||||||
|
zecPrice={2.94}
|
||||||
|
/>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
|
@ -0,0 +1,46 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { TransactionDailyComponent } from '../../app/components/transaction-daily';
|
||||||
|
import appTheme from '../../app/theme';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<TransactionDailyComponent />', () => {
|
||||||
|
describe('render()', () => {
|
||||||
|
test('should render user daily transactions', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<TransactionDailyComponent
|
||||||
|
transactionsDate={new Date().toISOString()}
|
||||||
|
zecPrice={1.345}
|
||||||
|
transactions={[
|
||||||
|
{
|
||||||
|
type: 'receive',
|
||||||
|
transactionId: 's0a8das098fgh2348a',
|
||||||
|
address: '123456789123456789123456789123456789',
|
||||||
|
amount: 1.7891,
|
||||||
|
zecPrice: 1.345,
|
||||||
|
date: new Date().toISOString(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'send',
|
||||||
|
transactionId: '0asd908fgj90f01',
|
||||||
|
address: '123456789123456789123456789123456789',
|
||||||
|
amount: 0.8458,
|
||||||
|
zecPrice: 1.344,
|
||||||
|
date: new Date().toISOString(),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,27 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { render, cleanup, queryByText } from 'react-testing-library';
|
||||||
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import 'jest-dom/extend-expect';
|
||||||
|
|
||||||
|
import { WalletAddress } from '../../app/components/wallet-address';
|
||||||
|
import appTheme from '../../app/theme';
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
describe('<WalletAddress />', () => {
|
||||||
|
test('should render wallet address component correctly', () => {
|
||||||
|
const { queryByTestId } = render(
|
||||||
|
<ThemeProvider theme={appTheme}>
|
||||||
|
<div style={{ width: '700px' }}>
|
||||||
|
<WalletAddress
|
||||||
|
address='t14oHp2v54vfmdgQ3v3SNuQga8JKHTNi2a1'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByTestId('Address')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,7 @@
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
process(filename) {
|
||||||
|
return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
|
||||||
|
},
|
||||||
|
};
|
|
@ -102,12 +102,12 @@ export const Button = ({
|
||||||
const buttonLabel = isLoading ? 'Loading...' : label;
|
const buttonLabel = isLoading ? 'Loading...' : label;
|
||||||
|
|
||||||
const component = variant === 'primary' ? (
|
const component = variant === 'primary' ? (
|
||||||
<Primary {...props}>
|
<Primary {...props} data-testid='PrimaryButton'>
|
||||||
{icon ? <Icon src={icon} /> : null}
|
{icon ? <Icon src={icon} /> : null}
|
||||||
{buttonLabel}
|
{buttonLabel}
|
||||||
</Primary>
|
</Primary>
|
||||||
) : (
|
) : (
|
||||||
<Secondary {...props}>
|
<Secondary {...props} data-testid='SecondaryButton'>
|
||||||
{icon ? <Icon src={icon} /> : null}
|
{icon ? <Icon src={icon} /> : null}
|
||||||
{buttonLabel}
|
{buttonLabel}
|
||||||
</Secondary>
|
</Secondary>
|
||||||
|
|
|
@ -39,12 +39,14 @@ export class Clipboard extends PureComponent<Props, State> {
|
||||||
const { copied } = this.state;
|
const { copied } = this.state;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<div data-testid='Clipboard'>
|
||||||
<Button
|
<Button
|
||||||
label={copied ? 'Copied!' : 'Copy!'}
|
label={copied ? 'Copied!' : 'Copy!'}
|
||||||
className={className}
|
className={className}
|
||||||
onClick={this.handleClick}
|
onClick={this.handleClick}
|
||||||
disabled={copied}
|
disabled={copied}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -107,7 +107,7 @@ export class DropdownComponent extends Component<Props, State> {
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
)}
|
)}
|
||||||
{options.map(({ label: optionLabel, onClick }) => (
|
{options.map(({ label: optionLabel, onClick }) => (
|
||||||
<OptionItem onClick={onClick} key={optionLabel}>
|
<OptionItem onClick={onClick} key={optionLabel} data-testid='DropdownOption'>
|
||||||
<Option value={truncate ? truncateAddress(optionLabel) : optionLabel} />
|
<Option value={truncate ? truncateAddress(optionLabel) : optionLabel} />
|
||||||
</OptionItem>
|
</OptionItem>
|
||||||
))}
|
))}
|
||||||
|
|
|
@ -13,7 +13,7 @@ const Wrapper = styled.div`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const EmptyTransactionsComponent = () => (
|
export const EmptyTransactionsComponent = () => (
|
||||||
<Wrapper>
|
<Wrapper data-testid='NoTransactions'>
|
||||||
<TextComponent value='No transactions!' />
|
<TextComponent value='No transactions!' />
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
);
|
);
|
||||||
|
|
|
@ -9,6 +9,8 @@ import { Divider } from './divider';
|
||||||
import { RowComponent } from './row';
|
import { RowComponent } from './row';
|
||||||
import { StatusPill } from './status-pill';
|
import { StatusPill } from './status-pill';
|
||||||
|
|
||||||
|
import { withSyncStatus } from '../../services/sync-status';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
height: ${props => props.theme.headerHeight};
|
height: ${props => props.theme.headerHeight};
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
@ -59,6 +61,8 @@ type Props = {
|
||||||
title: string,
|
title: string,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const Status = withSyncStatus(StatusPill);
|
||||||
|
|
||||||
export const HeaderComponent = ({ title }: Props) => (
|
export const HeaderComponent = ({ title }: Props) => (
|
||||||
<Wrapper id='header'>
|
<Wrapper id='header'>
|
||||||
<LogoWrapper>
|
<LogoWrapper>
|
||||||
|
@ -67,7 +71,7 @@ export const HeaderComponent = ({ title }: Props) => (
|
||||||
<TitleWrapper>
|
<TitleWrapper>
|
||||||
<TitleRow alignItems='center' justifyContent='space-around'>
|
<TitleRow alignItems='center' justifyContent='space-around'>
|
||||||
<Title value={title} />
|
<Title value={title} />
|
||||||
<StatusPill />
|
<Status type='syncing' progress={0} />
|
||||||
</TitleRow>
|
</TitleRow>
|
||||||
<Divider opacity={0.1} />
|
<Divider opacity={0.1} />
|
||||||
</TitleWrapper>
|
</TitleWrapper>
|
||||||
|
|
|
@ -62,11 +62,12 @@ export const InputComponent = ({
|
||||||
onChange={evt => onChange(evt.target.value)}
|
onChange={evt => onChange(evt.target.value)}
|
||||||
withRightElement={Boolean(rightElement)}
|
withRightElement={Boolean(rightElement)}
|
||||||
bgColor={bgColor}
|
bgColor={bgColor}
|
||||||
|
data-testid='Input'
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
textarea: () => (
|
textarea: () => (
|
||||||
<Textarea onChange={evt => onChange(evt.target.value)} bgColor={bgColor} {...props} />
|
<Textarea onChange={evt => onChange(evt.target.value)} bgColor={bgColor} data-testid='Textarea' {...props} />
|
||||||
),
|
),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -60,7 +60,7 @@ export class LoadingScreen extends PureComponent<Props, State> {
|
||||||
const { progress } = this.props;
|
const { progress } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Wrapper>
|
<Wrapper data-testid='LoadingScreen'>
|
||||||
<Transition
|
<Transition
|
||||||
native
|
native
|
||||||
items={start}
|
items={start}
|
||||||
|
|
|
@ -99,6 +99,7 @@ export class ModalComponent extends PureComponent<Props, State> {
|
||||||
? createPortal(
|
? createPortal(
|
||||||
<ModalWrapper
|
<ModalWrapper
|
||||||
id='modal-portal-wrapper'
|
id='modal-portal-wrapper'
|
||||||
|
data-testid='Modal'
|
||||||
onClick={(event) => {
|
onClick={(event) => {
|
||||||
if (
|
if (
|
||||||
closeOnBackdropClick
|
closeOnBackdropClick
|
||||||
|
|
|
@ -9,7 +9,7 @@ type Props = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const QRCode = ({ value, size }: Props) => (
|
export const QRCode = ({ value, size }: Props) => (
|
||||||
<QR value={value} size={size} />
|
<QR data-testid='QRCode' value={value} size={size} />
|
||||||
);
|
);
|
||||||
|
|
||||||
QRCode.defaultProps = {
|
QRCode.defaultProps = {
|
||||||
|
|
|
@ -152,6 +152,7 @@ export class SelectComponent extends PureComponent<Props, State> {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SelectWrapper
|
<SelectWrapper
|
||||||
|
data-testid='Select'
|
||||||
id='select-component'
|
id='select-component'
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
placement={placement}
|
placement={placement}
|
||||||
|
|
|
@ -10,7 +10,7 @@ const Wrapper = styled.div`
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: ${props => props.theme.sidebarWidth};
|
width: ${props => props.theme.sidebarWidth};
|
||||||
height: ${props => `calc(100vh - ${props.theme.headerHeight})`};
|
height: ${props => `calc(100vh - ${props.theme.headerHeight})`};
|
||||||
font-family: ${props => props.theme.fontFamily}
|
font-family: ${props => props.theme.fontFamily};
|
||||||
background-color: ${props => props.theme.colors.sidebarBg};
|
background-color: ${props => props.theme.colors.sidebarBg};
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
@ -15,7 +15,6 @@ const rotate = keyframes`
|
||||||
from {
|
from {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,10 +13,42 @@ import { DoczWrapper } from '../theme.js'
|
||||||
|
|
||||||
<PropsTable of={StatusPill} />
|
<PropsTable of={StatusPill} />
|
||||||
|
|
||||||
## Basic Usage
|
## Syching
|
||||||
|
|
||||||
<Playground>
|
<Playground>
|
||||||
<DoczWrapper>
|
<DoczWrapper>
|
||||||
{() => <StatusPill percent={83.} />}
|
{() =>
|
||||||
|
<StatusPill
|
||||||
|
progress={99.3}
|
||||||
|
type='syncing'
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
</DoczWrapper>
|
||||||
|
</Playground>
|
||||||
|
|
||||||
|
## Ready
|
||||||
|
|
||||||
|
<Playground>
|
||||||
|
<DoczWrapper>
|
||||||
|
{() =>
|
||||||
|
<StatusPill
|
||||||
|
progress={100.}
|
||||||
|
type='ready'
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
</DoczWrapper>
|
||||||
|
</Playground>
|
||||||
|
|
||||||
|
|
||||||
|
## With Error
|
||||||
|
|
||||||
|
<Playground>
|
||||||
|
<DoczWrapper>
|
||||||
|
{() =>
|
||||||
|
<StatusPill
|
||||||
|
progress={0.}
|
||||||
|
type='error'
|
||||||
|
/>
|
||||||
|
}
|
||||||
</DoczWrapper>
|
</DoczWrapper>
|
||||||
</Playground>
|
</Playground>
|
|
@ -39,7 +39,7 @@ export const TransactionDailyComponent = ({
|
||||||
transactions,
|
transactions,
|
||||||
zecPrice,
|
zecPrice,
|
||||||
}: Props) => (
|
}: Props) => (
|
||||||
<Wrapper>
|
<Wrapper data-testid='TransactionsDaily'>
|
||||||
<Day value={transactionsDate} />
|
<Day value={transactionsDate} />
|
||||||
<TransactionsWrapper>
|
<TransactionsWrapper>
|
||||||
{transactions.map(
|
{transactions.map(
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React, { PureComponent } from 'react';
|
import React, { Component } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { Transition, animated } from 'react-spring';
|
|
||||||
|
|
||||||
|
import { ColumnComponent } from './column';
|
||||||
import { Button } from './button';
|
import { Button } from './button';
|
||||||
import { QRCode } from './qrcode';
|
import { QRCode } from './qrcode';
|
||||||
|
|
||||||
|
@ -17,7 +17,6 @@ const AddressWrapper = styled.div`
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 7px 13px;
|
padding: 7px 13px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 5px;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Input = styled.input`
|
const Input = styled.input`
|
||||||
|
@ -35,123 +34,70 @@ const Input = styled.input`
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
/* eslint-disable max-len */
|
|
||||||
const Btn = styled(Button)`
|
|
||||||
border-width: 1px;
|
|
||||||
font-weight: ${props => props.theme.fontWeight.regular};
|
|
||||||
border-color: ${props => (props.isVisible ? props.theme.colors.primary : props.theme.colors.buttonBorderColor)};
|
|
||||||
padding: 8px 10px;
|
|
||||||
min-width: 260px;
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 12px;
|
|
||||||
width: 20px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
/* eslint-enable max-len */
|
|
||||||
|
|
||||||
const QRCodeWrapper = styled.div`
|
const QRCodeWrapper = styled.div`
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
margin-top: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const RevealsMain = styled.div`
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: flex-start;
|
|
||||||
height: ${props => (props.isVisible ? '178px' : 0)}
|
|
||||||
transition: all 0.25s ease-in-out;
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
address: string,
|
address: string,
|
||||||
isVisible?: boolean,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
isVisible: boolean,
|
isVisible: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
export class WalletAddress extends PureComponent<Props, State> {
|
export class WalletAddress extends Component<Props, State> {
|
||||||
static defaultProps = {
|
state = {
|
||||||
isVisible: false,
|
isVisible: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props: Props) {
|
show = () => {
|
||||||
super(props);
|
this.setState(
|
||||||
|
() => ({ isVisible: true }),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
this.state = { isVisible: Boolean(props.isVisible) };
|
hide = () => {
|
||||||
}
|
this.setState(
|
||||||
|
() => ({ isVisible: false }),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
show = () => this.setState(() => ({ isVisible: true }));
|
|
||||||
|
|
||||||
hide = () => this.setState(() => ({ isVisible: false }));
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { address } = this.props;
|
const { address } = this.props;
|
||||||
const { isVisible } = this.state;
|
const { isVisible } = this.state;
|
||||||
const toggleVisibility = isVisible ? this.hide : this.show;
|
const toggleVisibility = isVisible ? this.hide : this.show;
|
||||||
const buttonLabel = `${isVisible ? 'Hide' : 'Show'} details and QR Code`;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<ColumnComponent width='100%'>
|
||||||
<AddressWrapper>
|
<AddressWrapper>
|
||||||
<Input
|
<Input
|
||||||
value={isVisible ? address : truncateAddress(address)}
|
value={isVisible ? address : truncateAddress(address)}
|
||||||
onChange={() => {}}
|
onChange={() => { }}
|
||||||
onFocus={event => event.currentTarget.select()}
|
onFocus={event => event.currentTarget.select()}
|
||||||
/>
|
/>
|
||||||
<Btn
|
<Button
|
||||||
icon={eyeIcon}
|
icon={eyeIcon}
|
||||||
label={buttonLabel}
|
label={`${isVisible ? 'Hide' : 'Show'} full address and QR Code`}
|
||||||
onClick={toggleVisibility}
|
onClick={toggleVisibility}
|
||||||
variant='secondary'
|
variant='secondary'
|
||||||
isVisible={isVisible}
|
|
||||||
/>
|
/>
|
||||||
</AddressWrapper>
|
</AddressWrapper>
|
||||||
<RevealsMain isVisible={isVisible}>
|
{isVisible
|
||||||
<Transition
|
? (
|
||||||
native
|
|
||||||
items={isVisible}
|
|
||||||
enter={[
|
|
||||||
{
|
|
||||||
height: 'auto',
|
|
||||||
opacity: 1,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
leave={{ height: 0, opacity: 0 }}
|
|
||||||
from={{
|
|
||||||
position: 'absolute',
|
|
||||||
overflow: 'hidden',
|
|
||||||
opacity: 0,
|
|
||||||
height: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{show => show
|
|
||||||
&& (props => (
|
|
||||||
<animated.div style={props}>
|
|
||||||
<QRCodeWrapper>
|
<QRCodeWrapper>
|
||||||
<QRCode value={address} />
|
<QRCode value={address} />
|
||||||
</QRCodeWrapper>
|
</QRCodeWrapper>
|
||||||
</animated.div>
|
)
|
||||||
))
|
: null}
|
||||||
}
|
</ColumnComponent>
|
||||||
</Transition>
|
|
||||||
</RevealsMain>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -181,7 +181,10 @@
|
||||||
"setupTestFrameworkScriptFile": "<rootDir>/__tests__/setup/jest.js",
|
"setupTestFrameworkScriptFile": "<rootDir>/__tests__/setup/jest.js",
|
||||||
"testPathIgnorePatterns": [
|
"testPathIgnorePatterns": [
|
||||||
"<rootDir>/__tests__/setup/"
|
"<rootDir>/__tests__/setup/"
|
||||||
]
|
],
|
||||||
|
"moduleNameMapper": {
|
||||||
|
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__tests__/setup/assetTransformer.js"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"resolutions": {
|
"resolutions": {
|
||||||
"babel-core": "7.0.0-bridge.0"
|
"babel-core": "7.0.0-bridge.0"
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="a"><rect width="125" height="20" rx="3" fill="#fff"/></mask><g mask="url(#a)"><path fill="#555" d="M0 0h91v20H0z"/><path fill="#4C1" d="M91 0h34v20H91z"/><path fill="url(#b)" d="M0 0h125v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,DejaVu Sans,Geneva,sans-serif" font-size="11"><text x="45.5" y="15" fill="#010101" fill-opacity=".3">flow-coverage</text><text x="45.5" y="14">flow-coverage</text><text x="107" y="15" fill="#010101" fill-opacity=".3">82%</text><text x="107" y="14">82%</text></g></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="a"><rect width="125" height="20" rx="3" fill="#fff"/></mask><g mask="url(#a)"><path fill="#555" d="M0 0h91v20H0z"/><path fill="#4C1" d="M91 0h34v20H91z"/><path fill="url(#b)" d="M0 0h125v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,DejaVu Sans,Geneva,sans-serif" font-size="11"><text x="45.5" y="15" fill="#010101" fill-opacity=".3">flow-coverage</text><text x="45.5" y="14">flow-coverage</text><text x="107" y="15" fill="#010101" fill-opacity=".3">83%</text><text x="107" y="14">83%</text></g></svg>
|
Before Width: | Height: | Size: 745 B After Width: | Height: | Size: 745 B |
|
@ -0,0 +1,62 @@
|
||||||
|
// @flow
|
||||||
|
import React, { type ComponentType, Component } from 'react';
|
||||||
|
import eres from 'eres';
|
||||||
|
|
||||||
|
import rpc from './api';
|
||||||
|
|
||||||
|
type Props = {};
|
||||||
|
|
||||||
|
type State = {
|
||||||
|
type?: 'syncing' | 'ready' | 'error',
|
||||||
|
progress: number,
|
||||||
|
};
|
||||||
|
|
||||||
|
/* eslint-disable max-len */
|
||||||
|
export const withSyncStatus = <PassedProps: {}>(
|
||||||
|
WrappedComponent: ComponentType<PassedProps>,
|
||||||
|
): ComponentType<$Diff<PassedProps, Props>> => class extends Component<PassedProps, State> {
|
||||||
|
timer: ?IntervalID = null;
|
||||||
|
|
||||||
|
state = {
|
||||||
|
type: 'syncing',
|
||||||
|
progress: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.timer = setInterval(() => {
|
||||||
|
this.getBlockchainStatus();
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
if (this.timer) {
|
||||||
|
clearInterval(this.timer);
|
||||||
|
this.timer = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getBlockchainStatus = async () => {
|
||||||
|
const [blockchainErr, blockchaininfo] = await eres(
|
||||||
|
rpc.getblockchaininfo(),
|
||||||
|
);
|
||||||
|
|
||||||
|
const newProgress = blockchaininfo.verificationprogress * 100;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
progress: newProgress,
|
||||||
|
...(newProgress > 99.99 ? {
|
||||||
|
type: 'ready',
|
||||||
|
} : {}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (blockchainErr) {
|
||||||
|
this.setState(() => ({ type: 'error' }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { type, progress} = this.state;
|
||||||
|
|
||||||
|
return <WrappedComponent {...this.props} {...this.state} type={type} progress={progress} />;
|
||||||
|
}
|
||||||
|
};
|
Loading…
Reference in New Issue