Bep8 mini token update

config/webpack.config.js

@@ -153,7 +153,7 @@ module.exports = function(webpackEnv) {
 		[require.resolve("@babel/plugin-proposal-optional-chaining")],
 	];
 	if (isEnvProduction) babelPlugins.push([require.resolve("babel-plugin-transform-remove-console")]);
-
+	//
 	return {
 		mode: isEnvProduction ? "production" : isEnvDevelopment && "development",
 		// Stop compilation early in production

src/components/Account/AssetTxs/AssetTxs.js

@@ -9,11 +9,18 @@ import {usePrevious} from "src/hooks";
 //  components
 import TxTable from "./TxTable";
 import AssetsTable from "src/components/Account/AssetTxs/AssetsTable";
+import consts from "src/constants/consts";
 
 const cx = cn.bind(styles);
 
 export default function({fetchAccountTxs = () => {}, balances = [], prices = [], txData = [], account = ""}) {
 	const assets = useSelector(state => state.assets.assets);
+	const bep8 = useSelector(state => state.assets.bep8);
+
+	const allAssets = React.useMemo(() => {
+		if (empty(assets) || empty(bep8)) return null;
+		return [...assets, ...bep8];
+	}, [assets, bep8]);
 	const [mappedAssets, setMappedAssets] = React.useState([]);
 	const [selected, setSelected] = React.useState(true);
 	const onClick = React.useCallback((e, bool) => {
@@ -29,11 +36,11 @@ export default function({fetchAccountTxs = () => {}, balances = [], prices = [],
 	//  pick from the assets, append asset imgSrc and relevent names to balance
 	React.useEffect(() => {
 		//  check for new rows
-		if (empty(assets) || _.every(balances, (v, i) => mappedAssets[i]?.symbol === v?.symbol)) return;
+		if (empty(allAssets) || _.every(balances, (v, i) => mappedAssets[i]?.symbol === v?.symbol)) return;
 		console.log("mapping assets");
 		const tempAssets = _.cloneDeep(balances);
 		_.each(tempAssets, v => {
-			const found = _.find(assets, asset => asset.asset === v.symbol);
+			const found = _.find(allAssets, asset => asset.asset === v.symbol);
 			if (found) _.assign(v, {mappedAsset: found.mappedAsset, name: found.name, assetImg: found.assetImg});
 		});
 		setMappedAssets(tempAssets);

src/components/AssetList/Table/Table.js

@@ -16,7 +16,7 @@ const cx = classNames.bind(styles);
 //  it is slow, but we need to not use MUI tables to fix the speed issue.
 //  bloody material UI not making my life any easier
 
-export default function({assets}) {
+export default function({assets, hide}) {
 	const [search, setSearch] = React.useState("");
 	const [sort, setSort] = React.useState({orderBy: 1, asc: false});
 
@@ -125,7 +125,7 @@ export default function({assets}) {
 	}, [displayAssets, search]);
 	return React.useMemo(
 		() => (
-			<div className={cx("AssetsTable-wrapper")}>
+			<div className={cx("AssetsTable-wrapper", {hide})}>
 				<Search setSearch={setSearch} cx={cx} />
 				<Table className={cx("table")}>
 					{tableHeaderRender}
@@ -134,6 +134,6 @@ export default function({assets}) {
 				{thinTableBodyRender}
 			</div>
 		),
-		[tableBodyRender, tableHeaderRender, thinTableBodyRender]
+		[tableBodyRender, tableHeaderRender, thinTableBodyRender, hide]
 	);
 }

src/components/AssetList/Table/Table.scss

@@ -106,3 +106,10 @@
 		padding: 16px 0;
 	}
 }
+
+.hide {
+	visibility: hidden !important;
+	max-height: 0 !important;
+	margin: 0 !important;
+	padding: 0 !important;
+}

src/components/common/SearchArea/SearchArea.js

@@ -20,7 +20,13 @@ export default function({propCx, dropdownStyle = {}, interactiveWidth = false})
 	const history = useHistory();
 
 	//  redux
-	const assets = useSelector(state => state.assets.assets);
+	const bep2 = useSelector(state => state.assets.assets);
+	const bep8 = useSelector(state => state.assets.bep8);
+
+	const assets = React.useMemo(() => {
+		if (empty(bep2) || empty(bep8)) return null;
+		return [...bep2, ...bep8];
+	}, [bep2, bep8]);
 
 	//  search related
 	const SearchRef = React.useRef(null);

src/constants/consts.js

@@ -48,6 +48,7 @@ export default Object.freeze({
 		ORDERS: "/orders",
 		ASSET_IMAGES: "/assets-images?page=1&rows=1000",
 		ASSETS: "/assets?page=1&rows=1000",
+		ASSETS_BEP8: "/assets/mini-tokens?page=1&rows=1000",
 		ASSET_PRICES: "/assets?page=1&rows=1000&only_price=true",
 		ASSET: "/asset?asset=",
 		ASSET_TXS: "/assets/txs?page=1&rows=20&txAsset=",

src/containers/AssetList/AssetList.js

@@ -4,12 +4,10 @@ import styles from "./AssetList.scss";
 import {_, empty} from "src/lib/scripts";
 //  redux
 import {useDispatch, useSelector} from "react-redux";
-import {getCryptoAssets} from "src/store/modules/assets";
+import {getCryptoAssets, getCryptoBep8} from "src/store/modules/assets";
 //  hooks
 import {useFetch, useIncrementalListLoader} from "src/hooks";
 //  components
-import TitleWrapper from "src/components/common/TitleWrapper";
-import PageTitle from "src/components/common/PageTitle";
 import StatusCard from "src/components/AssetList/StatusCard/StatusCard";
 import Table from "src/components/AssetList/Table";
 import ScrollTop from "src/components/common/ScrollTop";
@@ -19,31 +17,48 @@ const cx = cn.bind(styles);
 
 export default function(props) {
 	const dispatch = useDispatch();
-	const assets = useSelector(state => state.assets.assets);
 	const [charts] = useFetch(`${consts.API_BASE}${consts.API.CHARTS}`);
+	const [tab, setTab] = React.useState("BEP2");
+	const assets = useSelector(state => state.assets.assets);
+	const bep8Assets = useSelector(state => state.assets.bep8);
 	const [incrementalAssets, filledAssets, setAssets] = useIncrementalListLoader();
 
 	React.useEffect(() => {
-		if (!empty(assets)) return;
-		dispatch(getCryptoAssets());
-	}, [assets, dispatch]);
+		if (empty(assets)) dispatch(getCryptoAssets());
+		if (empty(bep8Assets)) dispatch(getCryptoBep8());
+	}, [assets, dispatch, tab]);
 
 	React.useEffect(() => {
-		if (filledAssets.length === assets.length || assets.length === 0) return;
 		setAssets(assets);
-	}, [setAssets, assets, filledAssets]);
+	}, [tab, assets, setAssets]);
+	//
+	// React.useEffect(() => {
+	// 	if (filledAssets.length === assets.length || assets.length === 0) return;
+	// 	setAssets(assets);
+	// }, [setAssets, assets, filledAssets]);
 
 	return (
 		<div className={cx("AssetList")}>
-			<TitleWrapper>
-				<PageTitle title={"Assets"} />
-			</TitleWrapper>
-			<div className={cx("StatusCard-grid")}>
+			<div className={cx("title-wrapper")}>
+				<h1>Assets</h1>
+				<div className={cx("tab-wrapper")}>
+					<button onClick={() => setTab("BEP2")} className={cx({selected: tab === "BEP2"})}>
+						<p>BEP2</p>
+					</button>
+					<button onClick={() => setTab("BEP8")} className={cx({selected: tab === "BEP8"})}>
+						<p>Minitoken(BEP8)</p>
+					</button>
+				</div>
+			</div>
+			<div className={cx("StatusCard-grid", {hide: tab !== "BEP2"})}>
 				{_.times(4, v => (
 					<StatusCard asset={charts.data?.[v]} key={v} />
 				))}
 			</div>
-			<Table assets={incrementalAssets} />
+			<Table assets={incrementalAssets} hide={tab !== "BEP2"} />
+			<Table assets={bep8Assets} hide={tab !== "BEP8"} />
+			{/*<Table assets={incrementalAssets} hide={false} />*/}
+			{/*<Table assets={bep8Assets} hide={false} />*/}
 			<ScrollTop />
 		</div>
 	);

src/containers/AssetList/AssetList.scss

@@ -2,6 +2,71 @@
 
 .AssetList {
 	@include page-wrapper;
+	.title-wrapper {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 12px;
+
+		@include media("<medium") {
+			flex-direction: column;
+			align-items: flex-start;
+			margin-bottom: 0;
+		}
+		> h1 {
+			font-family: "Montserrat", serif;
+			font-size: 30px;
+			font-weight: 500;
+			line-height: 1.23;
+			color: var(--colorPageTitle);
+			//color: #999999;
+			text-transform: uppercase;
+
+			@include media("<large") {
+				font-size: 27px;
+			}
+
+			@include media("<medium") {
+				font-size: 24px;
+				margin-bottom: 10px;
+			}
+		}
+		.tab-wrapper {
+			width: 594px;
+			@include media("<medium") {
+				width: 100%;
+				margin-bottom: 15px;
+			}
+			height: 35px;
+			border-radius: 5px;
+			border: solid 1px #f4c629;
+			display: flex;
+			flex-flow: row;
+			> button {
+				width: 50%;
+				cursor: pointer;
+
+				@include Flex_center();
+				> p {
+					font-family: "Montserrat", serif;
+					font-size: 13px;
+					font-weight: 500;
+					line-height: 1.23;
+					letter-spacing: normal;
+					color: #222222;
+				}
+				&.selected {
+					background-color: #f4c629;
+					&:first-child {
+						border-right: solid 1px #f4c629;
+					}
+					&:last-child {
+						border-left: solid 1px #f4c629;
+					}
+				}
+			}
+		}
+	}
 	.StatusCard-grid {
 		width: fit-content;
 		margin: 0 auto 15px;
@@ -18,8 +83,18 @@
 		@include media("<small") {
 			display: none;
 		}
+		&.hide {
+			display: none;
+		}
 	}
 	>:nth-child(3) {
 		margin-bottom: 70px;
 	}
 }
+
+.hide {
+	visibility: hidden !important;
+	max-height: 0 !important;
+	margin: 0 !important;
+	padding: 0 !important;
+}

src/hooks/usePreload.js

@@ -3,7 +3,7 @@ import {useDispatch} from "react-redux";
 import axios from "axios";
 import consts from "src/constants/consts";
 //  reduxy
-import {getCryptoAssets} from "src/store/modules/assets";
+import {getCryptoAssets, getCryptoBep8} from "src/store/modules/assets";
 import {getCryptoBasicData, getCryptoFees, getCryptoStatus, getCryptoValidators, getCyptoAcceleratedNode} from "src/store/modules/blockchain";
 //  hooks
 
@@ -19,7 +19,10 @@ export default function usePreload() {
 		dispatch(getCryptoStatus(source.token));
 		dispatch(getCryptoFees(source.token));
 		dispatch(getCryptoValidators(source.token));
-		if (window.location.pathname !== "/assets/") dispatch(getCryptoAssets(source.token));
+		if (window.location.pathname !== "/assets/") {
+			dispatch(getCryptoAssets(source.token));
+			dispatch(getCryptoBep8(source.token));
+		}
 	}, [dispatch]);
 
 	//  getWithInterval BASIC_DATA_FETCH_INTERVAL_MS

src/lib/api.js

@@ -6,6 +6,10 @@ export const getAssets = cancelToken => {
 	return axios.get(`${consts.API_BASE}${consts.API.ASSETS}`, {cancelToken});
 };
 
+export const getBep8Assets = cancelToken => {
+	return axios.get(`${consts.API_BASE}${consts.API.ASSETS_BEP8}`, {cancelToken});
+};
+
 export const getAssetPrices = cancelToken => {
 	return axios.get(`${consts.API_BASE}${consts.API.ASSET_PRICES}`, {cancelToken});
 };

src/store/modules/assets.js

@@ -4,13 +4,15 @@ import * as api from "src/lib/api";
 import {_, compareProperty} from "src/lib/scripts";
 import {multiply} from "src/lib/Big";
 
-const [GET_ASSETS, GET_ASSET_PRICES] = ["GET_ASSETS", "UPDATE_ASSET_PRICES"];
+const [GET_ASSETS, GET_BEP8, GET_ASSET_PRICES] = ["GET_ASSETS", "GET_BEP8", "UPDATE_ASSET_PRICES"];
 //  sorts assets in order of marketCap first, then by id if it is the same(0)
 export const getCryptoAssets = createAction(GET_ASSETS, cancelToken => api.getAssets(cancelToken));
+export const getCryptoBep8 = createAction(GET_BEP8, cancelToken => api.getBep8Assets(cancelToken));
 export const getCryptoAssetPrices = createAction(GET_ASSET_PRICES, cancelToken => api.getAssetPrices(cancelToken));
 
 const initState = {
 	assets: [],
+	bep8: [],
 };
 
 const handlers = {
@@ -54,6 +56,17 @@ const handlers = {
 			return {...state};
 		},
 	}),
+	...pender({
+		type: GET_BEP8,
+		onSuccess: (state, action) => {
+			if (!_.isArray(action.payload.data?.assetInfoList)) return {...state};
+			const data = _.map(action.payload.data.assetInfoList, v => ({...v, marketCap: Number(multiply(v?.price, v?.supply, 5))}));
+			return {
+				...state,
+				bep8: data.sort(compareAsset),
+			};
+		},
+	}),
 };
 
 const compareAsset = (a, b) => compareProperty(a, b, "marketCap");