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.secondary} !important; `; -const ReceivedTx = styled(DownCircleOutlined)` +const ReceivedTx = styled(ArrowDownOutlined)` color: ${props => props.theme.primary} !important; `; const DateType = styled.div` diff --git a/web/cashtab/src/components/Wallet/TxHistory.js b/web/cashtab/src/components/Wallet/TxHistory.js --- a/web/cashtab/src/components/Wallet/TxHistory.js +++ b/web/cashtab/src/components/Wallet/TxHistory.js @@ -2,15 +2,11 @@ import styled from 'styled-components'; import Tx from './Tx'; -export const TxTitle = styled.h2` - color: ${props => 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: 72%; + width: 28%; + + ${({ left, ...props }) => + left && + ` + margin-left: 1% + width: 69%; + `} +`; +export const TabPane = styled.div` + ${({ active }) => + !active && + ` + display: none; + `} +`; + export const SwitchBtnCtn = styled.div` display: flex; align-items: center; @@ -154,10 +207,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 +305,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 @@
,
BCHA
SLPA
, - - - - - More transactions - , ] `; exports[`Wallet with BCH balances and tokens 1`] = ` Array [
0.06047469 BCHA
,
$ NaN @@ -214,101 +182,28 @@
,
BCHA
SLPA
, - - - - - More transactions - , -
-

- SLPA - Tokens -

- -
-
- identicon of tokenId bd1acc4c986de57af8d6d2a64aecad8c30ee80f37ae9d066d758923732ddc9ba -
-
- 6.001 - - - TBS - -
-
-
-
, ] `; exports[`Wallet without BCH balance 1`] = ` Array [
,
0 BCHA @@ -404,16 +299,16 @@
,
BCHA
SLPA