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 { Icon } from 'antd'; | import { LinkOutlined, LoadingOutlined } from '@ant-design/icons'; | ||||
import { WalletContext } from '../../utils/context'; | import { WalletContext } from '../../utils/context'; | ||||
import { OnBoarding } from '../OnBoarding/OnBoarding'; | import { OnBoarding } from '../OnBoarding/OnBoarding'; | ||||
import { QRCode } from '../Common/QRCode'; | import { QRCode } from '../Common/QRCode'; | ||||
import { currency } from '../Common/Ticker.js'; | import { currency } from '../Common/Ticker.js'; | ||||
import { Link } from 'react-router-dom'; | import { Link } from 'react-router-dom'; | ||||
import TokenList from './TokenList'; | import TokenList from './TokenList'; | ||||
import { CashLoader } from '../Common/CustomIcons'; | import { CashLoader } from '../Common/CustomIcons'; | ||||
▲ Show 20 Lines • Show All 215 Lines • ▼ Show 20 Lines | return ( | ||||
address === 'cashAddress' ? 'nonactiveBtn' : 'slpActive' | address === 'cashAddress' ? 'nonactiveBtn' : 'slpActive' | ||||
} | } | ||||
> | > | ||||
{currency.tokenTicker} | {currency.tokenTicker} | ||||
</SwitchBtn> | </SwitchBtn> | ||||
</SwitchBtnCtn> | </SwitchBtnCtn> | ||||
{balances.totalBalance ? ( | {balances.totalBalance ? ( | ||||
<> | <> | ||||
<Links to="/send">Send</Links> | |||||
<ExternalLink | <ExternalLink | ||||
href={`${currency.blockExplorerUrl}/address/${wallet.Path145.cashAddress}`} | href={`${currency.blockExplorerUrl}/address/${wallet.Path145.cashAddress}`} | ||||
target="_blank" | target="_blank" | ||||
rel="noopener noreferrer" | rel="noopener noreferrer" | ||||
> | > | ||||
<Icon type="link" theme="outlined" /> View Transactions | <LinkOutlined /> View Transactions | ||||
</ExternalLink> | </ExternalLink> | ||||
</> | </> | ||||
) : null} | ) : null} | ||||
</> | </> | ||||
); | ); | ||||
}; | }; | ||||
const Wallet = () => { | const Wallet = () => { | ||||
const ContextValue = React.useContext(WalletContext); | const ContextValue = React.useContext(WalletContext); | ||||
const { wallet, tokens, loading } = ContextValue; | const { wallet, tokens, loading } = ContextValue; | ||||
return ( | return ( | ||||
<> | <> | ||||
{loading && ( | {loading && ( | ||||
<LoadingCtn> | <LoadingCtn> | ||||
<Icon type="loading" theme="outlined" /> | <LoadingOutlined /> | ||||
</LoadingCtn> | </LoadingCtn> | ||||
)} | )} | ||||
{!loading && wallet.Path245 && <WalletInfo />} | {!loading && wallet.Path245 && <WalletInfo />} | ||||
{!loading && wallet.Path245 && tokens && tokens.length > 0 && ( | {!loading && wallet.Path245 && tokens && tokens.length > 0 && ( | ||||
<TokenList tokens={tokens} /> | <TokenList tokens={tokens} /> | ||||
)} | )} | ||||
{!loading && !wallet.Path245 ? <OnBoarding /> : null} | {!loading && !wallet.Path245 ? <OnBoarding /> : null} | ||||
</> | </> | ||||
); | ); | ||||
}; | }; | ||||
export default Wallet; | export default Wallet; |