diff --git a/web/cashtab/src/components/App.css b/web/cashtab/src/components/App.css
--- a/web/cashtab/src/components/App.css
+++ b/web/cashtab/src/components/App.css
@@ -2,6 +2,17 @@
@import '~@fortawesome/fontawesome-free/css/all.css';
@import url('https://fonts.googleapis.com/css?family=Khula&display=swap&.css');
+/* Hide scrollbars but keep functionality*/
+/* Hide scrollbar for Chrome, Safari and Opera */
+body::-webkit-scrollbar {
+ display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+body {
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+}
/* Hide up and down arros on input type="number" */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
diff --git a/web/cashtab/src/components/Wallet/TokenList.js b/web/cashtab/src/components/Wallet/TokenList.js
--- a/web/cashtab/src/components/Wallet/TokenList.js
+++ b/web/cashtab/src/components/Wallet/TokenList.js
@@ -1,18 +1,11 @@
import React from 'react';
-import styled from 'styled-components';
import TokenListItem from './TokenListItem';
import { Link } from 'react-router-dom';
-import { currency } from '@components/Common/Ticker.js';
import { formatBalance } from '@utils/cashMethods';
-export const TokenTitle = styled.h2`
- color: ${props => props.theme.wallet.text.secondary};
-`;
-
const TokenList = ({ tokens }) => {
return (
-
{currency.tokenTicker} Tokens
{tokens.map(token => (
props.theme.wallet.text.secondary};
-`;
export const TxLink = styled.a``;
const TxHistory = ({ txs }) => {
return (
-
Transactions
{txs.map(tx => (
+ active &&
+ `
+ color: ${props.theme.primary};
+ `}
+`;
+export const TabLine = styled.div`
+ margin: auto;
+ transition: margin-left 0.5s ease-in-out, width 0.5s 0.1s;
+ height: 4px;
+ border-radius: 5px;
+ background-color: ${props => props.theme.primary};
+ pointer-events: none;
+
+ margin-left: 185px;
+ width: 80px;
+
+ @media (max-width: 400px) {
+ margin-left: 150px;
+ width: 60px;
+ }
+ ${({ left, ...props }) =>
+ left &&
+ `
+ margin-left: 0px
+ width: 180px;
+
+ @media (max-width: 400px) {
+ margin-left: 0px
+ width: 150px;
+ }
+ `}
+`;
+export const TabPane = styled.div`
+ ${({ active }) =>
+ !active &&
+ `
+ display: none;
+ `}
+`;
+
export const SwitchBtnCtn = styled.div`
display: flex;
align-items: center;
@@ -154,10 +216,12 @@
wallet,
fiatPrice,
balances,
+ tokens,
parsedTxHistory,
apiError,
} = ContextValue;
const [address, setAddress] = React.useState('cashAddress');
+ const [activeTab, setActiveTab] = React.useState('txHistory');
const hasHistory = parsedTxHistory && parsedTxHistory.length > 0;
@@ -250,41 +314,63 @@
{hasHistory && parsedTxHistory && (
-
- )}
- {balances.totalBalance ? (
<>
-
- More transactions
-
+
+ setActiveTab('txHistory')}
+ >
+ Transaction History
+
+ setActiveTab('tokens')}
+ >
+ Tokens
+
+
+
+
+
+
+
+ More transactions
+
+
+
+ {tokens && tokens.length > 0 ? (
+
+ ) : (
+
+ Tokens sent to your {currency.tokenTicker}{' '}
+ address will appear here
+
+ )}
+
>
- ) : null}
+ )}
>
);
};
const Wallet = () => {
const ContextValue = React.useContext(WalletContext);
- const { wallet, tokens, loading } = ContextValue;
+ const { wallet, loading } = ContextValue;
return (
<>
- {loading && (
+ {loading ? (
+ ) : (
+ <>{wallet.Path1899 ? : }>
)}
- {!loading && wallet.Path245 && }
-
- {!loading && wallet.Path245 && tokens && tokens.length > 0 && (
-
- )}
- {!loading && !wallet.Path245 ? : null}
>
);
};
diff --git a/web/cashtab/src/components/Wallet/__tests__/__snapshots__/Wallet.test.js.snap b/web/cashtab/src/components/Wallet/__tests__/__snapshots__/Wallet.test.js.snap
--- a/web/cashtab/src/components/Wallet/__tests__/__snapshots__/Wallet.test.js.snap
+++ b/web/cashtab/src/components/Wallet/__tests__/__snapshots__/Wallet.test.js.snap
@@ -3,14 +3,14 @@
exports[`Wallet with BCH balances 1`] = `
Array [
0.06047469
BCHA
,
$
NaN
@@ -82,67 +82,35 @@
,
,
-
-
-
-
- More transactions
- ,
]
`;
exports[`Wallet with BCH balances and tokens 1`] = `
Array [
0.06047469
BCHA
,
$
NaN
@@ -214,101 +182,28 @@
,
,
-
-
-
-
- More transactions
- ,
- ,
]
`;
exports[`Wallet without BCH balance 1`] = `
Array [
,
0
BCHA
@@ -404,16 +299,16 @@
,