You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
2.2 KiB
65 lines
2.2 KiB
import React from 'react'
|
|
import { useDispatch, useSelector } from 'react-redux'
|
|
import { Redirect, useHistory, useParams } from 'react-router-dom'
|
|
import { createAccountLink } from '@metamask/etherscan-link'
|
|
|
|
import TransactionList from '../../components/app/transaction-list'
|
|
import { EthOverview, TokenOverview } from '../../components/app/wallet-overview'
|
|
import { getCurrentNetworkId, getSelectedIdentity } from '../../selectors/selectors'
|
|
import { getTokens } from '../../ducks/metamask/metamask'
|
|
import { DEFAULT_ROUTE } from '../../helpers/constants/routes'
|
|
import { showModal } from '../../store/actions'
|
|
|
|
import AssetNavigation from './components/asset-navigation'
|
|
import TokenOptions from './components/token-options'
|
|
|
|
const Asset = () => {
|
|
const dispatch = useDispatch()
|
|
const network = useSelector(getCurrentNetworkId)
|
|
const selectedAccountName = useSelector((state) => getSelectedIdentity(state).name)
|
|
const nativeCurrency = useSelector((state) => state.metamask.nativeCurrency)
|
|
const tokens = useSelector(getTokens)
|
|
const history = useHistory()
|
|
const { asset } = useParams()
|
|
|
|
const token = tokens.find((token) => token.address === asset)
|
|
|
|
let assetName
|
|
let optionsButton
|
|
|
|
if (token) {
|
|
assetName = token.symbol
|
|
optionsButton = (
|
|
<TokenOptions
|
|
onRemove={() => dispatch(showModal({ name: 'HIDE_TOKEN_CONFIRMATION', token }))}
|
|
onViewEtherscan={() => {
|
|
const url = createAccountLink(token.address, network)
|
|
global.platform.openTab({ url })
|
|
}}
|
|
tokenSymbol={token.symbol}
|
|
/>
|
|
)
|
|
} else if (asset === nativeCurrency) {
|
|
assetName = nativeCurrency
|
|
} else {
|
|
return <Redirect to={{ pathname: DEFAULT_ROUTE }} />
|
|
}
|
|
|
|
const overview = token
|
|
? <TokenOverview className="asset__overview" token={token} />
|
|
: <EthOverview className="asset__overview" />
|
|
return (
|
|
<div className="main-container asset__container">
|
|
<AssetNavigation
|
|
accountName={selectedAccountName}
|
|
assetName={assetName}
|
|
onBack={() => history.push(DEFAULT_ROUTE)}
|
|
optionsButton={optionsButton}
|
|
/>
|
|
{ overview }
|
|
<TransactionList tokenAddress={token?.address} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Asset
|
|
|