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 ?
+
+
+ { 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
}