Implement the new search - Closes #1774 #1813

i18n/locales/en/common.json

@@ -18,6 +18,7 @@
   "Account Name": "Account Name",
   "Account bookmarked": "Account bookmarked",
   "Account initialization": "Account initialization",
+  "Accounts": "Accounts",
   "Accounts on Ledger": "Accounts on Ledger",
   "Action Denied by User": "Action Denied by User",
   "Active": "Active",
@@ -301,6 +302,7 @@
   "No newsfeed available": "No newsfeed available",
   "No results": "No results",
   "No results found": "No results found",
+  "No results found.": "No results found.",
   "No transactions yet": "No transactions yet",
   "No, thanks": "No, thanks",
   "Not Yet Implemented. Sorry.": "Not Yet Implemented. Sorry.",
@@ -380,6 +382,7 @@
   "Save your passphrase on an encrypted hard drive.": "Save your passphrase on an encrypted hard drive.",
   "Scan this QR code using the Lisk Mobile app to access your Lisk account.": "Scan this QR code using the Lisk Mobile app to access your Lisk account.",
   "Search": "Search",
+  "Search for Address, Transaction ID or Delegate name": "Search for Address, Transaction ID or Delegate name",
   "Search for Lisk ID, Delegate or Transaction ID": "Search for Lisk ID, Delegate or Transaction ID",
   "Search for a delegate": "Search for a delegate",
   "Search for answers in our extensive ": "Search for answers in our extensive ",
@@ -482,11 +485,13 @@
   "Transaction not found": "Transaction not found",
   "Transaction submitted": "Transaction submitted",
   "Transaction summary": "Transaction summary",
+  "Transactions": "Transactions",
   "Transactions can’t be reversed": "Transactions can’t be reversed",
   "Transfer Transaction": "Transfer Transaction",
   "Try Again": "Try Again",
   "Try again": "Try again",
   "Try using menu for navigation.": "Try using menu for navigation.",
+  "Type": "Type",
   "Type at least 3 characters": "Type at least 3 characters",
   "Unable to connect to the node": "Unable to connect to the node",
   "Unable to connect to the node, no response from the server.": "Unable to connect to the node, no response from the server.",
@@ -510,6 +515,7 @@
   "Visit Help Center": "Visit Help Center",
   "Visit Lisk.Chat": "Visit Lisk.Chat",
   "Vote Transaction": "Vote Transaction",
+  "Vote Weights": "Vote Weights",
   "Vote weight": "Vote weight",
   "Vote_verb": "Vote",
   "Voted": "Voted",

src/actions/search.js

@@ -206,13 +206,14 @@ export const searchMoreTransactions = ({
       });
   };
 
+export const clearSearchSuggestions = () => ({
+  data: {},
+  type: actionTypes.searchClearSuggestions,
+});
+
 export const searchSuggestions = ({ searchTerm }) =>
   (dispatch, getState) => {
     const liskAPIClient = getState().peers.liskAPIClient;
-    dispatch({
-      data: {},
-      type: actionTypes.searchClearSuggestions,
-    });
     searchAll({ liskAPIClient, searchTerm }).then(response => dispatch({
       data: response,
       type: actionTypes.searchSuggestions,

src/actions/search.test.js

@@ -42,10 +42,6 @@ describe('actions: search', () => {
     const action = searchSuggestions(data);
     await action(dispatch, getState);
     expect(dispatch).toHaveBeenNthCalledWith(1, {
-      data: {},
-      type: actionTypes.searchClearSuggestions,
-    });
-    expect(dispatch).toHaveBeenNthCalledWith(2, {
       data: {},
       type: actionTypes.searchSuggestions,
     });

src/components/app/variablesV2.css

@@ -60,6 +60,7 @@ or "warn/action" ineastd of "red/green"
   --button-font-size: var(--paragraph-font-size-s);
   --button-font-size-s: 12px;
   --footnote-font-size: 12px;
+  --font-size-extra-small: 11px;
   --font-size-title: 18px;
   --font-size-small-secondary: 13px;
 

src/components/searchBarV2/accounts.js

@@ -0,0 +1,61 @@
+import React, { Fragment } from 'react';
+import AccountVisual from '../accountVisual';
+import LiskAmount from '../liskAmount';
+import styles from './accountsAndDeletegates.css';
+
+const Accounts = ({
+  accounts, onSelectedRow, t, rowItemIndex, updateRowItemIndex,
+}) => {
+  const isDelegate = accounts.some(account => account.delegate);
+
+  return (
+    <div className={`${styles.wrapper} accounts`}>
+      <header className={`${styles.header} accounts-header`}>
+        <label>{t('Accounts')}</label>
+        <div className={`${styles.subTitles} accounts-subtitle`}>
+          <label>{t('Address')}</label>
+          <label>{t('Balance')}</label>
+        </div>
+      </header>
+      <div className={`${styles.content} account-content`}>
+      {
+        accounts.map((account, index) => (
+          <div
+            key={index}
+            className={`${styles.accountRow} ${rowItemIndex === index ? styles.active : ''} account-row`}
+            onClick={() => onSelectedRow(account.address, 'account')}
+            onMouseEnter={/* istanbul ignore next */ () => updateRowItemIndex(index)}
+          >
+            <AccountVisual address={account.address} size={30} />
+            <div className={styles.accountInformation}>
+              {
+                isDelegate
+                  ? <Fragment>
+                      <div>
+                        <span className={`${styles.accountTitle} account-title`}>
+                          {account.delegate.username}
+                        </span>
+                        <span className={`${styles.tag} tag`}>
+                          {`#${account.delegate.rank} ${t('Delegate')}`}
+                        </span>
+                      </div>
+                      <span className={styles.accountSubtitle}>{account.address}</span>
+                    </Fragment>
+                  : <span className={`${styles.accountTitle} account-title`}>
+                      {account.address}
+                    </span>
+              }
+            </div>
+            <span className={styles.accountBalance}>
+              <LiskAmount val={account.balance} />
+              <span>{t(' LSK')}</span>
+            </span>
+          </div>
+        ))
+      }
+      </div>
+    </div>
+  );
+};
+
+export default Accounts;

src/components/searchBarV2/accounts.test.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Accounts from './accounts';
+
+describe('Accounts', () => {
+  let wrapper;
+
+  const props = {
+    t: v => v,
+    accounts: [],
+    onSelectedRow: jest.fn(),
+    rowItemIndex: 0,
+    updateRowItemIndex: jest.fn(),
+  };
+
+  beforeEach(() => {
+    wrapper = mount(<Accounts {...props} />);
+  });
+
+  it('should render properly empty accounts', () => {
+    expect(wrapper).toContainMatchingElement('.accounts');
+    expect(wrapper).toContainMatchingElement('.accounts-header');
+    expect(wrapper).toContainMatchingElement('.accounts-subtitle');
+    expect(wrapper).toContainMatchingElement('.account-content');
+    expect(wrapper).not.toContainMatchingElement('.account-row');
+  });
+
+  it('should render properly delegate accounts', () => {
+    const newProps = { ...props };
+    newProps.accounts = [
+      {
+        address: '12345234236L',
+        balance: '120',
+        delegate: {
+          rank: 34,
+          username: 'genesis_51',
+        },
+      },
+    ];
+    wrapper = mount(<Accounts {...newProps} />);
+    expect(wrapper).toContainMatchingElement('.accounts');
+    expect(wrapper).toContainMatchingElement('.accounts-header');
+    expect(wrapper).toContainMatchingElement('.accounts-subtitle');
+    expect(wrapper).toContainMatchingElement('.account-content');
+    expect(wrapper).toContainMatchingElement('.tag');
+  });
+
+  it('should render properly with accounts data', () => {
+    const newProps = { ...props };
+    newProps.accounts = [
+      {
+        address: '123456L',
+        title: 'John',
+        balance: '120',
+      },
+      {
+        address: '12345234L',
+        title: 'Anna',
+        balance: '110',
+      },
+    ];
+    wrapper = mount(<Accounts {...newProps} />);
+
+    expect(wrapper).toContainMatchingElement('.accounts');
+    expect(wrapper).toContainMatchingElement('.accounts-header');
+    expect(wrapper).toContainMatchingElement('.accounts-subtitle');
+    expect(wrapper).toContainMatchingElement('.account-content');
+    expect(wrapper).toContainMatchingElement('.account-row');
+  });
+
+  it('should call onClick function on selected row', () => {
+    const newProps = { ...props };
+    newProps.accounts = [
+      {
+        address: '123456L',
+        balance: '120',
+      },
+    ];
+    wrapper = mount(<Accounts {...newProps} />);
+
+    wrapper.find('.account-row').at(0).simulate('click');
+    expect(props.onSelectedRow).toBeCalled();
+  });
+});

src/components/searchBarV2/accountsAndDeletegates.css

@@ -0,0 +1,122 @@
+@import '../app/variablesV2.css';
+
+.wrapper {
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  margin-top: 20px;
+}
+
+.header {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+
+  & > label {
+    @mixin contentNormal bold;
+  }
+}
+
+.subTitles {
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+
+  & > label {
+    @mixin contentNormal bold;
+
+    color: var(--color-blue-gray);
+  }
+}
+
+.content {
+  width: calc(100% + 40px);
+  height: auto;
+  max-height: 220px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  margin: 0 -20px;
+
+  & .accountRow {
+    width: 100%;
+    height: auto;
+    min-height: 53px;
+    padding: 5px 20px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--primary-background-color);
+    }
+  }
+
+  & .accountInformation {
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    margin-left: 20px;
+    box-sizing: border-box;
+
+    & > div {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+    }
+  }
+
+  & .tag {
+    @mixin contentSmall bold;
+
+    background: var(--color-slate-gray);
+    color: var(--color-white);
+    padding: 3px;
+    box-sizing: border-box;
+    margin-left: 7px;
+    border-radius: 3px;
+    line-height: unset;
+  }
+
+  & .accountTitle {
+    @mixin headingSmall;
+
+    color: var(--color-maastricht-blue);
+  }
+
+  & .accountSubtitle {
+    @mixin contentSmallest;
+
+    color: var(--color-slate-gray);
+    padding-top: 5px;
+  }
+
+  & .accountBalance {
+    @mixin contentSmallest;
+
+    color: var(--color-maastricht-blue);
+    margin-left: auto;
+  }
+}
+
+.active {
+  background-color: var(--primary-background-color);
+}