import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { Switch, Route, useParams, useRouteMatch } from 'react-router-dom'; import { walletInfoType } from '../../types'; import Wallet from './Wallet'; import Fund from '../onboarding/Fund'; import Connect from '../onboarding/Connect'; import { fetchWallet } from './walletSlice'; import LoadingPage from '../common/LoadingPage'; import ChatPage from '../chat/ChatPage'; const WalletPage = props => { const { error, loading, info, availableBalance, pendingBalance, fetchWallet, totalBalance, totalChannels, fundingAddress } = props; const { id } = useParams(); const { path } = useRouteMatch(); useEffect(() => { fetchWallet(parseInt(id, 10)); }, [id]); if (error) { return <p>{error}</p>; } if (loading || !info) { return <LoadingPage />; } if (totalBalance === 0) { return <Fund fundingAddress={fundingAddress} />; } if (totalChannels === 0) { return <Connect walletId={parseInt(id, 10)} />; } return ( <Switch> <Route exact path={path}> <Wallet id={parseInt(id, 10)} info={info} /> </Route> <Route path={`${path}/chat`}> <ChatPage walletPubkey={info.identity_pubkey} walletId={parseInt(id, 10)} availableBalance={availableBalance} pendingBalance={pendingBalance} /> </Route> </Switch> ); }; WalletPage.propTypes = { fetchWallet: PropTypes.func.isRequired, loading: PropTypes.bool.isRequired, error: PropTypes.string, info: walletInfoType, availableBalance: PropTypes.number, pendingBalance: PropTypes.number, totalBalance: PropTypes.number, totalChannels: PropTypes.number, fundingAddress: PropTypes.string }; WalletPage.defaultProps = { info: null, error: null, availableBalance: null, pendingBalance: null, totalBalance: null, totalChannels: null, fundingAddress: null }; const mapDispatchToProps = { fetchWallet }; const mapStateToProps = state => { const { loading, info, availableBalance, pendingBalance, error, connected, fundingAddress } = state.wallet; const { channels, pendingChannels } = state.channels; const totalChannels = channels.length + pendingChannels.length; const totalBalance = availableBalance + pendingBalance; return { loading, info, availableBalance, pendingBalance, error, connected, totalChannels, totalBalance, fundingAddress }; }; export default connect(mapStateToProps, mapDispatchToProps)(WalletPage);