diff --git a/app/reducers/activity.js b/app/reducers/activity.js index 2c6d402d..ff8ada94 100644 --- a/app/reducers/activity.js +++ b/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 }) } diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js index c9b964c4..2e41926a 100644 --- a/app/routes/activity/components/Activity.js +++ b/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' @@ -48,7 +51,15 @@ class Activity extends Component { ) } else if (Object.prototype.hasOwnProperty.call(activity, 'payment_request')) { // activity is an LN invoice - return + return ( + + ) } // activity is an LN payment return ( @@ -69,11 +80,16 @@ class Activity extends Component { activity: { filters, filter, - filterPulldown + filterPulldown, + searchActive, + searchText }, changeFilter, currentActivity, + updateSearchActive, + updateSearchText, + walletProps } = this.props @@ -84,21 +100,42 @@ class Activity extends Component {
-
-
-
    - { - filters.map(f => ( -
  • changeFilter(f)}> - {f.name} - -
    -
  • - )) - } -
-
-
+ { + searchActive ? +
+
+ updateSearchText(event.target.value)} + /> +
+
{ updateSearchActive(false); updateSearchText('') }}> + + + +
+
+ : +
+
+
    + { + filters.map(f => ( +
  • changeFilter(f)}> + {f.name} + +
    +
  • + )) + } +
+
+
updateSearchActive(true)}> + +
+
+ }
    { currentActivity.map((activityBlock, index) => ( @@ -131,6 +168,8 @@ Activity.propTypes = { showActivityModal: PropTypes.func.isRequired, changeFilter: PropTypes.func.isRequired, + updateSearchActive: PropTypes.func.isRequired, + updateSearchText: PropTypes.func.isRequired, activity: PropTypes.object.isRequired, currentActivity: PropTypes.array.isRequired, diff --git a/app/routes/activity/components/Activity.scss b/app/routes/activity/components/Activity.scss index f191bf3d..3846d7cf 100644 --- a/app/routes/activity/components/Activity.scss +++ b/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 { diff --git a/app/routes/activity/components/components/Invoice/Invoice.js b/app/routes/activity/components/components/Invoice/Invoice.js index 7b7642e5..6f6cd514 100644 --- a/app/routes/activity/components/components/Invoice/Invoice.js +++ b/app/routes/activity/components/components/Invoice/Invoice.js @@ -10,7 +10,7 @@ import checkmarkIcon from 'icons/check_circle.svg' import styles from '../Activity.scss' const Invoice = ({ - invoice, ticker, currentTicker, showActivityModal + invoice, ticker, currentTicker, showActivityModal, currencyName }) => (
    showActivityModal('INVOICE', { invoice })}> { @@ -39,6 +39,7 @@ const Invoice = ({ currency={ticker.currency} currentTicker={currentTicker} /> + {currencyName} @@ -53,7 +54,8 @@ Invoice.propTypes = { invoice: PropTypes.object.isRequired, ticker: PropTypes.object.isRequired, currentTicker: PropTypes.object.isRequired, - showActivityModal: PropTypes.func.isRequired + showActivityModal: PropTypes.func.isRequired, + currencyName: PropTypes.string.isRequired } export default Invoice diff --git a/app/routes/activity/components/components/Transaction/Transaction.js b/app/routes/activity/components/components/Transaction/Transaction.js index dcdad169..f50b8752 100644 --- a/app/routes/activity/components/components/Transaction/Transaction.js +++ b/app/routes/activity/components/components/Transaction/Transaction.js @@ -8,7 +8,7 @@ import Value from 'components/Value' import styles from '../Activity.scss' const Transaction = ({ - transaction, ticker, currentTicker, showActivityModal + transaction, ticker, currentTicker, showActivityModal, currencyName }) => (
    showActivityModal('TRANSACTION', { transaction })}>
    @@ -29,6 +29,7 @@ const Transaction = ({ currency={ticker.currency} currentTicker={currentTicker} /> + {currencyName} ${btc.convert('sats', 'usd', transaction.amount, currentTicker.price_usd)} @@ -41,7 +42,8 @@ Transaction.propTypes = { transaction: PropTypes.object.isRequired, ticker: PropTypes.object.isRequired, currentTicker: PropTypes.object.isRequired, - showActivityModal: PropTypes.func.isRequired + showActivityModal: PropTypes.func.isRequired, + currencyName: PropTypes.string.isRequired } export default Transaction diff --git a/app/routes/activity/containers/ActivityContainer.js b/app/routes/activity/containers/ActivityContainer.js index c2d05424..1aae9c07 100644 --- a/app/routes/activity/containers/ActivityContainer.js +++ b/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 diff --git a/app/utils/btc.js b/app/utils/btc.js index cc17ac97..5abef070 100644 --- a/app/utils/btc.js +++ b/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 }