feature(activity-search): implement new activity search

app/reducers/activity.js

@@ -17,6 +17,7 @@ const initialState = {
     modalProps: {},
     showCurrencyFilters: false
   },
+  searchActive: false,
   searchText: ''
 }
 
@@ -32,6 +33,7 @@ export const TOGGLE_PULLDOWN = 'TOGGLE_PULLDOWN'
 
 export const SET_ACTIVITY_MODAL_CURRENCY_FILTERS = 'SET_ACTIVITY_MODAL_CURRENCY_FILTERS'
 
+export const UPDATE_SEARCH_ACTIVE = 'UPDATE_SEARCH_ACTIVE'
 export const UPDATE_SEARCH_TEXT = 'UPDATE_SEARCH_TEXT'
 
 // ------------------------------------
@@ -64,6 +66,13 @@ export function toggleFilterPulldown() {
   }
 }
 
+export function updateSearchActive(searchActive) {
+  return {
+    type: UPDATE_SEARCH_ACTIVE,
+    searchActive
+  }
+}
+
 export function updateSearchText(searchText) {
   return {
     type: UPDATE_SEARCH_TEXT,
@@ -91,6 +100,7 @@ const ACTION_HANDLERS = {
     { ...state, modal: { modalType: state.modal.modalType, modalProps: state.modal.modalProps, showCurrencyFilters } }
   ),
 
+  [UPDATE_SEARCH_ACTIVE]: (state, { searchActive }) => ({ ...state, searchActive }),
   [UPDATE_SEARCH_TEXT]: (state, { searchText }) => ({ ...state, searchText })
 }
 

app/routes/activity/components/Activity.js

@@ -1,5 +1,8 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import Isvg from 'react-inlinesvg'
+import searchIcon from 'icons/search.svg'
+import xIcon from 'icons/x.svg'
 
 import Wallet from 'components/Wallet'
 import LoadingBolt from 'components/LoadingBolt'
@@ -77,11 +80,16 @@ class Activity extends Component {
       activity: {
         filters,
         filter,
-        filterPulldown
+        filterPulldown,
+        searchActive,
+        searchText
       },
       changeFilter,
       currentActivity,
 
+      updateSearchActive,
+      updateSearchText,
+
       walletProps
     } = this.props
 
@@ -92,21 +100,45 @@ class Activity extends Component {
         <Wallet {...walletProps} />
 
         <div className={styles.activities}>
-          <header className={styles.header}>
+            {
-            <section>
+              searchActive ?
-              <ul className={styles.filters}>
+                <header className={`${styles.header} ${styles.search}`}>
-                {
+                  <section>
-                  filters.map(f => (
+                    <input
-                    <li key={f.key} className={f.key === filter.key && styles.activeFilter} onClick={() => changeFilter(f)}>
+                      placeholder='Search'
-                      <span>{f.name}</span>
+                      value={searchText}
-
+                      onChange={event => updateSearchText(event.target.value)}
-                      <div className={f.key === filter.key && styles.activeBorder} />
+                    />
-                    </li>
+                  </section>
-                  ))
+                  <section onClick={() => {
-                }
+                    updateSearchActive(false)
-              </ul>
+                    updateSearchText('')
-            </section>
+                  }}>
-          </header>
+                    <span className={styles.xIcon}>
+                      <Isvg src={xIcon} />
+                    </span>
+                  </section>
+                </header>
+                :
+                <header className={styles.header}>
+                  <section>
+                    <ul className={styles.filters}>
+                      {
+                        filters.map(f => (
+                          <li key={f.key} className={f.key === filter.key && styles.activeFilter} onClick={() => changeFilter(f)}>
+                            <span>{f.name}</span>
+
+                            <div className={f.key === filter.key && styles.activeBorder} />
+                          </li>
+                        ))
+                      }
+                    </ul>
+                  </section>
+                  <section onClick={() => updateSearchActive(true)}>
+                    <Isvg src={searchIcon} />
+                  </section>
+                </header>
+            }
           <ul className={`${styles.activityContainer} ${filterPulldown && styles.pulldown}`}>
             {
               currentActivity.map((activityBlock, index) => (

app/routes/activity/components/Activity.scss

@@ -39,6 +39,51 @@
 	  margin: 0 auto;
 	  padding: 0 40px;
 	  border-bottom: 1px solid $spaceborder;
+	  display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    min-height: 55px;
+    transition: all 0.25s;
+
+    &.search {
+    	background: linear-gradient(270deg, #868B9F 0%, #333C5E 100%);
+
+    	section {
+    		&:nth-child(1) {
+    			width: 90%;
+    		}
+    	}
+
+    	input {
+    		background: transparent;
+  			outline: none;
+  			border: 0;
+  			font-size: 20px;
+  			line-height: 24px;
+  			letter-spacing: 1px;
+  			color: $white;
+  			width: 100%;
+    	}
+
+    	.xIcon svg {
+    		width: 25px;
+    		height: 25px;
+    	}
+    }
+
+    section svg {
+    	width: 14px;
+    	height: 14px;
+    	color: $white;
+    	opacity: 0.5;
+    	cursor: pointer;
+  		transition: all 0.25s;
+
+    	&:hover {
+    		opacity: 1;
+    	}
+    }
 
 
 	  .filters {

app/routes/activity/containers/ActivityContainer.js

@@ -18,6 +18,7 @@ import {
   changeFilter,
   toggleFilterPulldown,
   activitySelectors,
+  updateSearchActive,
   updateSearchText
 } from 'reducers/activity'
 import { newAddress, openWalletModal } from 'reducers/address'
@@ -43,6 +44,7 @@ const mapDispatchToProps = {
   newAddress,
   openWalletModal,
   fetchBalance,
+  updateSearchActive,
   updateSearchText,
   setFormType,
   setWalletCurrencyFilters

app/utils/btc.js

@@ -52,7 +52,6 @@ export function bitsToUsd(bits, price) {
 export function satoshisToBtc(satoshis) {
   if (satoshis === undefined || satoshis === null || satoshis === '') return null
 
-  console.log('satoshis: ', satoshis)
   const btcAmount = sb.toBitcoin(satoshis).toFixed(8)
   return btcAmount > 0 ? btcAmount : btcAmount * -1
 }