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 { 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'; | ||||
▲ Show 20 Lines • Show All 148 Lines • ▼ Show 20 Lines | :hover { | ||||
} | } | ||||
} | } | ||||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||||
padding: 10px 0; | padding: 10px 0; | ||||
font-size: 14px; | font-size: 14px; | ||||
} | } | ||||
`; | `; | ||||
export const AddrSwitchContainer = styled.div` | |||||
text-align: center; | |||||
padding: 6px 0 12px 0; | |||||
`; | |||||
export const AddrPrefixSwitch = styled(Switch)``; | |||||
export const AddrPrefixLabel = styled.span` | |||||
color: ${props => props.theme.wallet.text.primary} | |||||
margin-right: 4px; | |||||
`; | |||||
const WalletInfo = () => { | const WalletInfo = () => { | ||||
const ContextValue = React.useContext(WalletContext); | const ContextValue = React.useContext(WalletContext); | ||||
const { wallet, fiatPrice, apiError } = ContextValue; | const { wallet, fiatPrice, apiError } = ContextValue; | ||||
let balances; | let balances; | ||||
let parsedTxHistory; | let parsedTxHistory; | ||||
let tokens; | let tokens; | ||||
// use parameters from wallet.state object and not legacy separate parameters, if they are in state | // 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 | // handle edge case of user with old wallet who has not opened latest Cashtab version yet | ||||
Show All 14 Lines | const WalletInfo = () => { | ||||
} else { | } else { | ||||
// If balances and parsedTxHistory are not in the wallet.state object, load them from Context | // If balances and parsedTxHistory are not in the wallet.state object, load them from Context | ||||
// This is how the app used to work | // This is how the app used to work | ||||
balances = ContextValue.balances; | balances = ContextValue.balances; | ||||
parsedTxHistory = ContextValue.parsedTxHistory; | parsedTxHistory = ContextValue.parsedTxHistory; | ||||
tokens = ContextValue.tokens; | tokens = ContextValue.tokens; | ||||
} | } | ||||
const [address, setAddress] = React.useState('cashAddress'); | const [address, setAddress] = React.useState('cashAddress'); | ||||
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'); | ||||
}; | }; | ||||
const onAddressPrefixChange = () => { | |||||
setAddressPrefix(addressPrefix === 'eCash' ? 'bitcoincash' : 'eCash'); | |||||
}; | |||||
return ( | return ( | ||||
<> | <> | ||||
{!balances.totalBalance && !apiError && !hasHistory ? ( | {!balances.totalBalance && !apiError && !hasHistory ? ( | ||||
<> | <> | ||||
<ZeroBalanceHeader> | <ZeroBalanceHeader> | ||||
<span role="img" aria-label="party emoji"> | <span role="img" aria-label="party emoji"> | ||||
🎉 | 🎉 | ||||
</span> | </span> | ||||
Show All 25 Lines | return ( | ||||
<p style={{ color: 'red' }}> | <p style={{ color: 'red' }}> | ||||
<b>An error occurred on our end.</b> | <b>An error occurred on our end.</b> | ||||
<br></br> Re-establishing connection... | <br></br> Re-establishing connection... | ||||
</p> | </p> | ||||
<CashLoader /> | <CashLoader /> | ||||
</> | </> | ||||
)} | )} | ||||
{wallet && | {wallet && ((wallet.Path245 && wallet.Path145) || wallet.Path1899) && ( | ||||
((wallet.Path245 && wallet.Path145) || wallet.Path1899) && ( | |||||
<> | <> | ||||
{wallet.Path1899 ? ( | {wallet.Path1899 ? ( | ||||
<> | |||||
<QRCode | <QRCode | ||||
id="borderedQRCode" | id="borderedQRCode" | ||||
address={ | address={ | ||||
address === 'slpAddress' | address === 'slpAddress' | ||||
? wallet.Path1899.slpAddress | ? wallet.Path1899.slpAddress | ||||
: wallet.Path1899.cashAddress | : wallet.Path1899.cashAddress | ||||
} | } | ||||
legacy={addressPrefix === 'bitcoincash'} | |||||
/> | /> | ||||
<AddrSwitchContainer> | |||||
<AddrPrefixLabel> | |||||
Address Format: | |||||
</AddrPrefixLabel> | |||||
<AddrPrefixSwitch | |||||
id="addrSwitch" | |||||
defaultChecked | |||||
checkedChildren={ | |||||
address === 'slpAddress' | |||||
? 'eToken' | |||||
: 'eCash' | |||||
} | |||||
unCheckedChildren={ | |||||
address === 'slpAddress' | |||||
? 'simpleledger' | |||||
: 'bitcoincash' | |||||
} | |||||
onChange={onAddressPrefixChange} | |||||
/> | |||||
</AddrSwitchContainer> | |||||
</> | |||||
) : ( | ) : ( | ||||
<> | |||||
<AddrPrefixSwitch | |||||
defaultChecked | |||||
checkedChildren="eCash" | |||||
unCheckedChildren="Legacy" | |||||
onChange={onAddressPrefixChange} | |||||
/> | |||||
<QRCode | <QRCode | ||||
id="borderedQRCode" | id="borderedQRCode" | ||||
address={ | address={ | ||||
address === 'slpAddress' | address === 'slpAddress' | ||||
? wallet.Path245.slpAddress | ? wallet.Path245.slpAddress | ||||
: wallet.Path145.cashAddress | : wallet.Path145.cashAddress | ||||
} | } | ||||
/> | /> | ||||
</> | |||||
)} | )} | ||||
</> | </> | ||||
)} | )} | ||||
<SwitchBtnCtn> | <SwitchBtnCtn> | ||||
<SwitchBtn | <SwitchBtn | ||||
onClick={() => handleChangeAddress()} | onClick={() => handleChangeAddress()} | ||||
className={ | className={ | ||||
address !== 'cashAddress' ? 'nonactiveBtn' : null | address !== 'cashAddress' ? 'nonactiveBtn' : null | ||||
} | } | ||||
> | > | ||||
Show All 26 Lines | return ( | ||||
<TabLine left={activeTab === 'txHistory'} /> | <TabLine left={activeTab === 'txHistory'} /> | ||||
</Tabs> | </Tabs> | ||||
<TabPane active={activeTab === 'txHistory'}> | <TabPane active={activeTab === 'txHistory'}> | ||||
<TxHistory | <TxHistory | ||||
txs={parsedTxHistory} | txs={parsedTxHistory} | ||||
fiatPrice={fiatPrice} | fiatPrice={fiatPrice} | ||||
/> | /> | ||||
<ExternalLink | |||||
style={{ marginTop: '24px' }} | |||||
href={`${currency.blockExplorerUrl}/address/${wallet.Path1899.cashAddress}`} | |||||
target="_blank" | |||||
rel="noopener noreferrer" | |||||
> | |||||
<LinkOutlined /> More transactions | |||||
</ExternalLink> | |||||
</TabPane> | </TabPane> | ||||
<TabPane active={activeTab === 'tokens'}> | <TabPane active={activeTab === 'tokens'}> | ||||
{tokens && tokens.length > 0 ? ( | {tokens && tokens.length > 0 ? ( | ||||
<TokenList | <TokenList | ||||
wallet={wallet} | wallet={wallet} | ||||
tokens={tokens} | tokens={tokens} | ||||
jestBCH={false} | jestBCH={false} | ||||
/> | /> | ||||
Show All 31 Lines |