preparing for refactor

This commit is contained in:
Anthony 2021-08-20 17:39:33 +02:00
parent 82a39e6562
commit 9722270403
No known key found for this signature in database
GPG key ID: C386D3C93D50E356
4 changed files with 31 additions and 17 deletions

View file

@ -19,9 +19,13 @@ import { getStripeEnvironment } from 'util/stripe';
let stripeEnvironment = getStripeEnvironment(); let stripeEnvironment = getStripeEnvironment();
// constants to be used in query params // constants to be used in query params
const Q_CURRENCY = 'currency'; const QUERY_NAME_CURRENCY = 'currency';
const Q_TAB = 'tab'; const QUERY_NAME_TAB = 'tab';
const Q_FIAT_TYPE = 'fiatType'; const QUERY_NAME_FIAT_TYPE = 'fiatType';
// TODO: this tab will be renamed
const DEFAULT_CURRENCY_PARAM = 'credits';
const DEFAULT_TAB_PARAM = 'fiat-payment-history';
const DEFAULT_FIAT_TYPE_PARAM = 'incoming';
type Props = { type Props = {
search: string, search: string,
@ -122,12 +126,11 @@ function TxoList(props: Props) {
const type = urlParams.get(TXO.TYPE) || TXO.ALL; const type = urlParams.get(TXO.TYPE) || TXO.ALL;
const subtype = urlParams.get(TXO.SUB_TYPE); const subtype = urlParams.get(TXO.SUB_TYPE);
const active = urlParams.get(TXO.ACTIVE) || TXO.ALL; const active = urlParams.get(TXO.ACTIVE) || TXO.ALL;
const currency = urlParams.get(Q_CURRENCY) || 'credits'; const currency = urlParams.get(QUERY_NAME_CURRENCY) || DEFAULT_CURRENCY_PARAM;
const fiatType = urlParams.get(Q_FIAT_TYPE) || 'incoming'; const fiatType = urlParams.get(QUERY_NAME_FIAT_TYPE) || DEFAULT_FIAT_TYPE_PARAM;
// tab used in the wallet section // tab used in the wallet section
// TODO: need to change this eventually // TODO: need to change this eventually
const tab = urlParams.get(Q_TAB) || 'fiat-payment-history'; const tab = urlParams.get(QUERY_NAME_TAB) || DEFAULT_TAB_PARAM;
const currentUrlParams = { const currentUrlParams = {
page, page,
@ -137,7 +140,7 @@ function TxoList(props: Props) {
subtype, subtype,
currency, currency,
fiatType, fiatType,
tab tab,
}; };
const hideStatus = const hideStatus =
@ -199,7 +202,7 @@ function TxoList(props: Props) {
history.push(url); history.push(url);
} }
// let currency = 'credits';
function updateUrl(delta: Delta) { function updateUrl(delta: Delta) {
const newUrlParams = new URLSearchParams(); const newUrlParams = new URLSearchParams();
@ -208,22 +211,22 @@ function TxoList(props: Props) {
delta.value = ''; delta.value = '';
} }
const existingFiatType = newUrlParams.get(Q_FIAT_TYPE) || 'incoming'; const existingFiatType = newUrlParams.get(QUERY_NAME_FIAT_TYPE) || DEFAULT_FIAT_TYPE_PARAM;
if (delta.tab) { if (delta.tab) {
// set tab name to account for wallet page tab // set tab name to account for wallet page tab
newUrlParams.set(Q_TAB, delta.tab); newUrlParams.set(QUERY_NAME_TAB, delta.tab);
} }
// only update currency if it's being changed // only update currency if it's being changed
if (delta.currency) { if (delta.currency) {
newUrlParams.set(Q_CURRENCY, delta.currency); newUrlParams.set(QUERY_NAME_CURRENCY, delta.currency);
} }
if (delta.fiatType) { if (delta.fiatType) {
newUrlParams.set(Q_FIAT_TYPE, delta.fiatType); newUrlParams.set(QUERY_NAME_FIAT_TYPE, delta.fiatType);
} else { } else {
newUrlParams.set(Q_FIAT_TYPE, existingFiatType); newUrlParams.set(QUERY_NAME_FIAT_TYPE, existingFiatType);
} }
switch (delta.dkey) { switch (delta.dkey) {
@ -433,6 +436,7 @@ function TxoList(props: Props) {
<fieldset-section> <fieldset-section>
<label>{__('Type')}</label> <label>{__('Type')}</label>
<div className={'txo__radios'}> <div className={'txo__radios'}>
{/* incoming transactions button */}
<Button <Button
button="alt" button="alt"
onClick={(e) => handleChange({ tab, fiatType: 'incoming', currency: 'fiat' })} onClick={(e) => handleChange({ tab, fiatType: 'incoming', currency: 'fiat' })}
@ -441,6 +445,7 @@ function TxoList(props: Props) {
})} })}
label={__('Incoming')} label={__('Incoming')}
/> />
{/* incoming transactions button */}
<Button <Button
button="alt" button="alt"
onClick={(e) => handleChange({ tab, fiatType: 'outgoing', currency: 'fiat' })} onClick={(e) => handleChange({ tab, fiatType: 'outgoing', currency: 'fiat' })}

View file

@ -71,7 +71,7 @@ const WalletBalance = (props: Props) => {
))} ))}
</tbody> </tbody>
</table> </table>
{!accountTransactions && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>} {!accountTransactions && <p className="wallet__fiat-transactions">No Transactions</p>}
</div> </div>
); );

View file

@ -96,7 +96,7 @@ const WalletBalance = (props: Props) => {
</tbody> </tbody>
</table> </table>
{/* show some markup if there's no transactions */} {/* show some markup if there's no transactions */}
{(!accountTransactions || accountTransactions.length === 0) && <p style={{textAlign: 'center', marginTop: '20px', fontSize: '13px', color: 'rgb(171, 171, 171)'}}>No Transactions</p>} {(!accountTransactions || accountTransactions.length === 0) && <p className="wallet__fiat-transactions">No Transactions</p>}
</div> </div>
</div> </div>
</> </>

View file

@ -15,3 +15,12 @@
width: 124px; width: 124px;
display: inline-block; display: inline-block;
} }
// displaying fiat transactions (incoming/outgoing) in wallet
.wallet__fiat-transactions {
text-align: center;
margin-top: 13px;
margin-bottom: 9px;
font-size: 13px;
color: rgb(171, 171, 171);
}