2021-06-29 22:08:31 +02:00
|
|
|
import React, { useEffect } from 'react';
|
2021-02-04 19:15:23 +01:00
|
|
|
import { useSelector } from 'react-redux';
|
|
|
|
import { Redirect, useParams } from 'react-router-dom';
|
|
|
|
import { getTokens } from '../../ducks/metamask/metamask';
|
|
|
|
import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
|
2020-06-01 19:54:32 +02:00
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
import NativeAsset from './components/native-asset';
|
|
|
|
import TokenAsset from './components/token-asset';
|
2020-06-01 19:54:32 +02:00
|
|
|
|
|
|
|
const Asset = () => {
|
2021-02-04 19:15:23 +01:00
|
|
|
const nativeCurrency = useSelector((state) => state.metamask.nativeCurrency);
|
|
|
|
const tokens = useSelector(getTokens);
|
|
|
|
const { asset } = useParams();
|
2020-06-01 19:54:32 +02:00
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
const token = tokens.find(({ address }) => address === asset);
|
2020-06-01 19:54:32 +02:00
|
|
|
|
2021-06-29 22:08:31 +02:00
|
|
|
useEffect(() => {
|
|
|
|
const el = document.querySelector('.app');
|
|
|
|
el.scroll(0, 0);
|
|
|
|
}, []);
|
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
let content;
|
2020-06-01 19:54:32 +02:00
|
|
|
if (token) {
|
2021-02-04 19:15:23 +01:00
|
|
|
content = <TokenAsset token={token} />;
|
2020-06-01 19:54:32 +02:00
|
|
|
} else if (asset === nativeCurrency) {
|
2021-02-04 19:15:23 +01:00
|
|
|
content = <NativeAsset nativeCurrency={nativeCurrency} />;
|
2020-06-01 19:54:32 +02:00
|
|
|
} else {
|
2021-02-04 19:15:23 +01:00
|
|
|
content = <Redirect to={{ pathname: DEFAULT_ROUTE }} />;
|
2020-06-01 19:54:32 +02:00
|
|
|
}
|
2021-02-04 19:15:23 +01:00
|
|
|
return <div className="main-container asset__container">{content}</div>;
|
|
|
|
};
|
2020-06-01 19:54:32 +02:00
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
export default Asset;
|