From 4f0b442d00639b8ddf054ead40e7ea4ee580da6a Mon Sep 17 00:00:00 2001 From: joon Date: Fri, 11 Sep 2020 17:37:29 +0900 Subject: [PATCH] Bep8 mini token update --- config/webpack.config.js | 2 +- src/components/Account/AssetTxs/AssetTxs.js | 11 ++- src/components/AssetList/Table/Table.js | 6 +- src/components/AssetList/Table/Table.scss | 7 ++ .../common/SearchArea/SearchArea.js | 8 +- src/constants/consts.js | 1 + src/containers/AssetList/AssetList.js | 43 +++++++---- src/containers/AssetList/AssetList.scss | 75 +++++++++++++++++++ src/hooks/usePreload.js | 7 +- src/lib/api.js | 4 + src/store/modules/assets.js | 15 +++- 11 files changed, 155 insertions(+), 24 deletions(-) diff --git a/config/webpack.config.js b/config/webpack.config.js index cc5c22c..10ab0ee 100644 --- a/config/webpack.config.js +++ b/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 diff --git a/src/components/Account/AssetTxs/AssetTxs.js b/src/components/Account/AssetTxs/AssetTxs.js index 4faa1c9..f7195db 100644 --- a/src/components/Account/AssetTxs/AssetTxs.js +++ b/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); diff --git a/src/components/AssetList/Table/Table.js b/src/components/AssetList/Table/Table.js index 07334c7..6e47af7 100644 --- a/src/components/AssetList/Table/Table.js +++ b/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( () => ( -
+
{tableHeaderRender} @@ -134,6 +134,6 @@ export default function({assets}) { {thinTableBodyRender} ), - [tableBodyRender, tableHeaderRender, thinTableBodyRender] + [tableBodyRender, tableHeaderRender, thinTableBodyRender, hide] ); } diff --git a/src/components/AssetList/Table/Table.scss b/src/components/AssetList/Table/Table.scss index 51a19d0..7dae035 100644 --- a/src/components/AssetList/Table/Table.scss +++ b/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; +} \ No newline at end of file diff --git a/src/components/common/SearchArea/SearchArea.js b/src/components/common/SearchArea/SearchArea.js index a757871..86eeadf 100644 --- a/src/components/common/SearchArea/SearchArea.js +++ b/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); diff --git a/src/constants/consts.js b/src/constants/consts.js index 03c6386..27545d4 100644 --- a/src/constants/consts.js +++ b/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=", diff --git a/src/containers/AssetList/AssetList.js b/src/containers/AssetList/AssetList.js index 39f7666..2ece99e 100644 --- a/src/containers/AssetList/AssetList.js +++ b/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 (
- - - -
+
+

Assets

+
+ + +
+
+
{_.times(4, v => ( ))}
-
+
+
+ {/*
*/} + {/*
*/} ); diff --git a/src/containers/AssetList/AssetList.scss b/src/containers/AssetList/AssetList.scss index 5324d65..4cb98f8 100644 --- a/src/containers/AssetList/AssetList.scss +++ b/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(" 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(" 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(":nth-child(3) { margin-bottom: 70px; } } + +.hide { + visibility: hidden !important; + max-height: 0 !important; + margin: 0 !important; + padding: 0 !important; +} \ No newline at end of file diff --git a/src/hooks/usePreload.js b/src/hooks/usePreload.js index 238f111..a63a368 100644 --- a/src/hooks/usePreload.js +++ b/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 diff --git a/src/lib/api.js b/src/lib/api.js index 4767e0a..2c5ce8f 100644 --- a/src/lib/api.js +++ b/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}); }; diff --git a/src/store/modules/assets.js b/src/store/modules/assets.js index b72e233..1b0d3f2 100644 --- a/src/store/modules/assets.js +++ b/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");