chore: solve merge conflicts

__tests__/components/button.test.js

@@ -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();
+  });
+
+});

__tests__/components/clipboard.test.js

@@ -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();
+  });
+
+});

__tests__/components/column.test.js

@@ -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();
+  });
+});

__tests__/components/confirm-dialog.test.js

@@ -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();
+  });
+});

__tests__/components/divider.test.js

@@ -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');
+  });
+});

__tests__/components/dropdown.test.js

@@ -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();
+  });
+
+});

__tests__/components/empty-transactions.test.js

@@ -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();
+  });
+});

__tests__/components/input-label.test.js

@@ -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();
+  });
+});

__tests__/components/input.test.js

@@ -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();
+  });
+});

__tests__/components/loading-screen.test.js

@@ -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();
+  });
+});

__tests__/components/modal.test.js

@@ -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();
+  });
+
+});

__tests__/components/qrcode.test.js

@@ -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();
+  });
+});

__tests__/components/row.test.js

@@ -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();
+  });
+});

__tests__/components/select.test.js

@@ -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();
+  });
+});

__tests__/components/status-pill.test.js

@@ -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();
+  });
+});

__tests__/components/text.test.js

@@ -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();
+  });
+});

__tests__/components/transaction-item.test.js

@@ -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();
+  });
+
+});

__tests__/components/transactions-daily.test.js

@@ -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();
+    });
+  });
+});

__tests__/components/wallet-address.test.js

@@ -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();
+  });
+});

__tests__/setup/assetTransformer.js

@@ -0,0 +1,7 @@
+const path = require('path');
+
+module.exports = {
+  process(filename) {
+    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
+  },
+};

app/components/button.js

@@ -102,12 +102,12 @@ export const Button = ({
   const buttonLabel = isLoading ? 'Loading...' : label;
 
   const component = variant === 'primary' ? (
-    <Primary {...props}>
+    <Primary {...props} data-testid='PrimaryButton'>
       {icon ? <Icon src={icon} /> : null}
       {buttonLabel}
     </Primary>
   ) : (
-    <Secondary {...props}>
+    <Secondary {...props} data-testid='SecondaryButton'>
       {icon ? <Icon src={icon} /> : null}
       {buttonLabel}
     </Secondary>

app/components/clipboard.js

@@ -39,12 +39,14 @@ export class Clipboard extends PureComponent<Props, State> {
     const { copied } = this.state;
 
     return (
-      <Button
-        label={copied ? 'Copied!' : 'Copy!'}
-        className={className}
-        onClick={this.handleClick}
-        disabled={copied}
-      />
+      <div data-testid='Clipboard'>
+        <Button
+          label={copied ? 'Copied!' : 'Copy!'}
+          className={className}
+          onClick={this.handleClick}
+          disabled={copied}
+        />
+      </div>
     );
   }
 }

app/components/dropdown.js

@@ -107,7 +107,7 @@ export class DropdownComponent extends Component<Props, State> {
             </MenuItem>
           )}
           {options.map(({ label: optionLabel, onClick }) => (
-            <OptionItem onClick={onClick} key={optionLabel}>
+            <OptionItem onClick={onClick} key={optionLabel} data-testid='DropdownOption'>
               <Option value={truncate ? truncateAddress(optionLabel) : optionLabel} />
             </OptionItem>
           ))}

app/components/empty-transactions.js

@@ -13,7 +13,7 @@ const Wrapper = styled.div`
 `;
 
 export const EmptyTransactionsComponent = () => (
-  <Wrapper>
+  <Wrapper data-testid='NoTransactions'>
     <TextComponent value='No transactions!' />
   </Wrapper>
 );

app/components/header.js

@@ -9,6 +9,8 @@ import { Divider } from './divider';
 import { RowComponent } from './row';
 import { StatusPill } from './status-pill';
 
+import { withSyncStatus } from '../../services/sync-status';
+
 const Wrapper = styled.div`
   height: ${props => props.theme.headerHeight};
   width: 100vw;
@@ -59,6 +61,8 @@ type Props = {
   title: string,
 };
 
+const Status = withSyncStatus(StatusPill);
+
 export const HeaderComponent = ({ title }: Props) => (
   <Wrapper id='header'>
     <LogoWrapper>
@@ -67,7 +71,7 @@ export const HeaderComponent = ({ title }: Props) => (
     <TitleWrapper>
       <TitleRow alignItems='center' justifyContent='space-around'>
         <Title value={title} />
-        <StatusPill />
+        <Status type='syncing' progress={0} />
       </TitleRow>
       <Divider opacity={0.1} />
     </TitleWrapper>

app/components/input.js

@@ -62,11 +62,12 @@ export const InputComponent = ({
         onChange={evt => onChange(evt.target.value)}
         withRightElement={Boolean(rightElement)}
         bgColor={bgColor}
+        data-testid='Input'
         {...props}
       />
     ),
     textarea: () => (
-      <Textarea onChange={evt => onChange(evt.target.value)} bgColor={bgColor} {...props} />
+      <Textarea onChange={evt => onChange(evt.target.value)} bgColor={bgColor} data-testid='Textarea' {...props} />
     ),
   };
 

app/components/loading-screen.js

@@ -60,7 +60,7 @@ export class LoadingScreen extends PureComponent<Props, State> {
     const { progress } = this.props;
 
     return (
-      <Wrapper>
+      <Wrapper data-testid='LoadingScreen'>
         <Transition
           native
           items={start}

app/components/modal.js

@@ -99,6 +99,7 @@ export class ModalComponent extends PureComponent<Props, State> {
           ? createPortal(
             <ModalWrapper
               id='modal-portal-wrapper'
+              data-testid='Modal'
               onClick={(event) => {
                 if (
                   closeOnBackdropClick

app/components/qrcode.js

@@ -9,7 +9,7 @@ type Props = {
 };
 
 export const QRCode = ({ value, size }: Props) => (
-  <QR value={value} size={size} />
+  <QR data-testid='QRCode' value={value} size={size} />
 );
 
 QRCode.defaultProps = {

app/components/select.js

@@ -152,6 +152,7 @@ export class SelectComponent extends PureComponent<Props, State> {
 
     return (
       <SelectWrapper
+        data-testid='Select'
         id='select-component'
         isOpen={isOpen}
         placement={placement}

app/components/sidebar.js

@@ -10,7 +10,7 @@ const Wrapper = styled.div`
   flex-direction: column;
   width: ${props => props.theme.sidebarWidth};
   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};
   padding-top: 15px;
   position: relative;

app/components/status-pill.js

@@ -15,7 +15,6 @@ const rotate = keyframes`
   from {
     transform: rotate(0deg);
   }
-
   to {
     transform: rotate(360deg);
   }

app/components/status-pill.mdx

@@ -13,10 +13,42 @@ import { DoczWrapper } from '../theme.js'
 
 <PropsTable of={StatusPill} />
 
-## Basic Usage
+## Syching
 
 <Playground>
   <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>
+</Playground>

app/components/transaction-daily.js

@@ -39,7 +39,7 @@ export const TransactionDailyComponent = ({
   transactions,
   zecPrice,
 }: Props) => (
-  <Wrapper>
+  <Wrapper data-testid='TransactionsDaily'>
     <Day value={transactionsDate} />
     <TransactionsWrapper>
       {transactions.map(

app/components/wallet-address.js

@@ -1,8 +1,8 @@
 // @flow
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import styled from 'styled-components';
-import { Transition, animated } from 'react-spring';
 
+import { ColumnComponent } from './column';
 import { Button } from './button';
 import { QRCode } from './qrcode';
 
@@ -17,7 +17,6 @@ const AddressWrapper = styled.div`
   border-radius: 6px;
   padding: 7px 13px;
   width: 100%;
-  margin-bottom: 5px;
 `;
 
 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`
   align-items: center;
   display: flex;
   background-color: #000;
   border-radius: 6px;
   padding: 20px;
+  margin-top: 10px;
   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 = {
   address: string,
-  isVisible?: boolean,
 };
 
 type State = {
   isVisible: boolean,
 };
 
-export class WalletAddress extends PureComponent<Props, State> {
-  static defaultProps = {
+export class WalletAddress extends Component<Props, State> {
+  state = {
     isVisible: false,
   };
 
-  constructor(props: Props) {
-    super(props);
+  show = () => {
+    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() {
     const { address } = this.props;
     const { isVisible } = this.state;
     const toggleVisibility = isVisible ? this.hide : this.show;
-    const buttonLabel = `${isVisible ? 'Hide' : 'Show'} details and QR Code`;
 
     return (
-      <div>
+      <ColumnComponent width='100%'>
         <AddressWrapper>
           <Input
             value={isVisible ? address : truncateAddress(address)}
-            onChange={() => {}}
+            onChange={() => { }}
             onFocus={event => event.currentTarget.select()}
           />
-          <Btn
+          <Button
             icon={eyeIcon}
-            label={buttonLabel}
+            label={`${isVisible ? 'Hide' : 'Show'} full address and QR Code`}
             onClick={toggleVisibility}
             variant='secondary'
-            isVisible={isVisible}
           />
         </AddressWrapper>
-        <RevealsMain 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>
-                    <QRCode value={address} />
-                  </QRCodeWrapper>
-                </animated.div>
-              ))
-            }
-          </Transition>
-        </RevealsMain>
-      </div>
+        {isVisible
+          ? (
+            <QRCodeWrapper>
+              <QRCode value={address} />
+            </QRCodeWrapper>
+          )
+          : null}
+      </ColumnComponent>
     );
   }
 }

package.json

@@ -181,7 +181,10 @@
     "setupTestFrameworkScriptFile": "<rootDir>/__tests__/setup/jest.js",
     "testPathIgnorePatterns": [
       "<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": {
     "babel-core": "7.0.0-bridge.0"

public/flow-coverage-badge.svg

@@ -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>

services/sync-status.js

@@ -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} />;
+    }
+  };