Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/src/components/Wallet/Wallet.js
import React from 'react'; | import React from 'react'; | ||||
import styled from 'styled-components'; | import styled from 'styled-components'; | ||||
import { Switch } from 'antd'; | import { Switch } from 'antd'; | ||||
import { LinkOutlined, LoadingOutlined } from '@ant-design/icons'; | import { LinkOutlined, LoadingOutlined } from '@ant-design/icons'; | ||||
import { WalletContext } from '@utils/context'; | import { WalletContext } from '@utils/context'; | ||||
import { OnBoarding } from '@components/OnBoarding/OnBoarding'; | import { OnBoarding } from '@components/OnBoarding/OnBoarding'; | ||||
import { QRCode } from '@components/Common/QRCode'; | import { QRCode } from '@components/Common/QRCode'; | ||||
import { currency } from '@components/Common/Ticker.js'; | import { currency } from '@components/Common/Ticker.js'; | ||||
import { Link } from 'react-router-dom'; | import { Link } from 'react-router-dom'; | ||||
import TokenList from './TokenList'; | import TokenList from './TokenList'; | ||||
import TxHistory from './TxHistory'; | import TxHistory from './TxHistory'; | ||||
import { CashLoader } from '@components/Common/CustomIcons'; | import { CashLoader } from '@components/Common/CustomIcons'; | ||||
import { BalanceHeader } from '@components/Common/BalanceHeader'; | import { BalanceHeader } from '@components/Common/BalanceHeader'; | ||||
import { BalanceHeaderFiat } from '@components/Common/BalanceHeaderFiat'; | import { BalanceHeaderFiat } from '@components/Common/BalanceHeaderFiat'; | ||||
import { LoadingCtn, ZeroBalanceHeader } from '@components/Common/Atoms'; | import { LoadingCtn, ZeroBalanceHeader } from '@components/Common/Atoms'; | ||||
import { getWalletState } from '@utils/cashMethods'; | |||||
export const Tabs = styled.div` | export const Tabs = styled.div` | ||||
margin: auto; | margin: auto; | ||||
margin-bottom: 12px; | margin-bottom: 12px; | ||||
display: inline-block; | display: inline-block; | ||||
text-align: center; | text-align: center; | ||||
`; | `; | ||||
export const TabLabel = styled.button` | export const TabLabel = styled.button` | ||||
▲ Show 20 Lines • Show All 140 Lines • ▼ Show 20 Lines | |||||
export const AddrSwitchContainer = styled.div` | export const AddrSwitchContainer = styled.div` | ||||
text-align: center; | text-align: center; | ||||
padding: 6px 0 12px 0; | padding: 6px 0 12px 0; | ||||
`; | `; | ||||
const WalletInfo = () => { | const WalletInfo = () => { | ||||
const ContextValue = React.useContext(WalletContext); | const ContextValue = React.useContext(WalletContext); | ||||
const { wallet, fiatPrice, apiError, cashtabSettings } = ContextValue; | const { wallet, fiatPrice, apiError, cashtabSettings } = ContextValue; | ||||
let balances; | const walletState = getWalletState(wallet); | ||||
let parsedTxHistory; | const { balances, parsedTxHistory, tokens } = walletState; | ||||
let tokens; | |||||
// use parameters from wallet.state object and not legacy separate parameters, if they are in state | |||||
// handle edge case of user with old wallet who has not opened latest Cashtab version yet | |||||
// If the wallet object from ContextValue has a `state key`, then check which keys are in the wallet object | |||||
// Else set it as blank | |||||
const paramsInWalletState = wallet.state ? Object.keys(wallet.state) : []; | |||||
// If wallet.state includes balances and parsedTxHistory params, use these | |||||
// These are saved in indexedDb in the latest version of the app, hence accessible more quickly | |||||
if ( | |||||
paramsInWalletState.includes('balances') && | |||||
paramsInWalletState.includes('parsedTxHistory') && | |||||
paramsInWalletState.includes('tokens') | |||||
) { | |||||
balances = wallet.state.balances; | |||||
parsedTxHistory = wallet.state.parsedTxHistory; | |||||
tokens = wallet.state.tokens; | |||||
} else { | |||||
// If balances and parsedTxHistory are not in the wallet.state object, load them from Context | |||||
// This is how the app used to work | |||||
balances = ContextValue.balances; | |||||
parsedTxHistory = ContextValue.parsedTxHistory; | |||||
tokens = ContextValue.tokens; | |||||
} | |||||
const [address, setAddress] = React.useState('cashAddress'); | const [address, setAddress] = React.useState('cashAddress'); | ||||
const [addressPrefix, setAddressPrefix] = React.useState('eCash'); | const [addressPrefix, setAddressPrefix] = React.useState('eCash'); | ||||
const [activeTab, setActiveTab] = React.useState('txHistory'); | const [activeTab, setActiveTab] = React.useState('txHistory'); | ||||
const hasHistory = parsedTxHistory && parsedTxHistory.length > 0; | const hasHistory = parsedTxHistory && parsedTxHistory.length > 0; | ||||
const handleChangeAddress = () => { | const handleChangeAddress = () => { | ||||
setAddress(address === 'cashAddress' ? 'slpAddress' : 'cashAddress'); | setAddress(address === 'cashAddress' ? 'slpAddress' : 'cashAddress'); | ||||
▲ Show 20 Lines • Show All 138 Lines • ▼ Show 20 Lines | return ( | ||||
</> | </> | ||||
)} | )} | ||||
</> | </> | ||||
); | ); | ||||
}; | }; | ||||
const Wallet = () => { | const Wallet = () => { | ||||
const ContextValue = React.useContext(WalletContext); | const ContextValue = React.useContext(WalletContext); | ||||
const { wallet, loading } = ContextValue; | const { wallet, previousWallet, loading } = ContextValue; | ||||
return ( | return ( | ||||
<> | <> | ||||
{loading ? ( | {loading ? ( | ||||
<LoadingCtn /> | <LoadingCtn /> | ||||
) : ( | ) : ( | ||||
<>{wallet.Path1899 ? <WalletInfo /> : <OnBoarding />}</> | <> | ||||
{(wallet && wallet.Path1899) || | |||||
(previousWallet && previousWallet.path1899) ? ( | |||||
<WalletInfo /> | |||||
) : ( | |||||
<OnBoarding /> | |||||
)} | |||||
</> | |||||
)} | )} | ||||
</> | </> | ||||
); | ); | ||||
}; | }; | ||||
export default Wallet; | export default Wallet; |