From 2368f56bab7c4398ed45c194c2be52db94c28c71 Mon Sep 17 00:00:00 2001 From: Hosein Emrani Date: Mon, 15 Aug 2022 21:59:11 +0100 Subject: [PATCH 1/2] asset group basic logic --- ui/src/components/Assets/AssetList.tsx | 73 +++++++++++++++++------ ui/src/components/Assets/GroupedAsset.tsx | 32 ++++++++++ 2 files changed, 86 insertions(+), 19 deletions(-) create mode 100644 ui/src/components/Assets/GroupedAsset.tsx diff --git a/ui/src/components/Assets/AssetList.tsx b/ui/src/components/Assets/AssetList.tsx index 36bb7dd..4311d59 100644 --- a/ui/src/components/Assets/AssetList.tsx +++ b/ui/src/components/Assets/AssetList.tsx @@ -1,10 +1,11 @@ -import { useCallback, useMemo, useState } from 'react'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import { IAccount } from '../../store/store'; import { Asset, currencyFormat, ApiPromise } from 'polkadot-portfolio-core'; import { AssetGroups, tableHeads } from '../../utils/constants'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons'; import classNames from 'classnames'; +import GroupedAsset from './GroupedAsset'; interface AssetListProps { assets: Asset[]; @@ -84,30 +85,59 @@ const sortTable = }; // TODO: IT WAS BIGGER THAN I INITIALLY THOUGHT, GOING TO IMPLEMENT IT LATER. -// const groupAssetsBy = (assetGroup: AssetGroups) => (sum: Asset[], asset: Asset, index: number): Asset[] => { -// switch (assetGroup) { -// case AssetGroups.Token: -// break; -// case AssetGroups.Account: -// break; -// case AssetGroups.Chain: -// break; -// case AssetGroups.Source: -// break; -// case AssetGroups.Amount: -// break; -// case AssetGroups.Value: -// break; -// } -// } +const makeGroups = (assetGroups: { [key: string]: Asset[] }, type: AssetGroups): GroupedAsset[] => { + return Object.entries(assetGroups).reduce((groups, [identifier, groupAssets]) => { + const groupItem = new GroupedAsset(groupAssets, identifier, type); + return [...groups, groupItem]; + }, [] as GroupedAsset[]); +}; + +const groupAssets = ( + assets: Asset[], + selector: (asset: Asset) => string, + type: AssetGroups +): GroupedAsset[] => { + const reduced = assets.reduce((assets, currentAsset) => { + const identifier = selector(currentAsset); + return { + ...assets, + [identifier]: [...(assets[identifier] ?? []), currentAsset] + }; + }, {} as { [key: string]: Asset[] }); + + return makeGroups(reduced, type); +}; + +const groupAssetsBy = (assets: Asset[], assetGroup: AssetGroups): GroupedAsset[] => { + let selector = (_: Asset) => ''; + let noop = false; + switch (assetGroup) { + case AssetGroups.Token: + selector = (asset: Asset) => asset.ticker; + break; + case AssetGroups.Account: + selector = (asset: Asset) => asset.origin.account; + break; + case AssetGroups.Chain: + selector = (asset: Asset) => asset.origin.chain; + break; + case AssetGroups.Source: + selector = (asset: Asset) => asset.origin.source; + break; + default: + noop = true; + break; + } + if (noop) return []; + return groupAssets(assets, selector, assetGroup); +}; export const AssetList = ({ assets, accounts, apiRegistry }: AssetListProps) => { const [sortOrder, setSortOrder] = useState(AssetGroups.Value); const [asc, setAsc] = useState(false); + const [groupBy, setGroupBy] = useState(AssetGroups.Token); const filteredAssets = useMemo(() => { return assets.filter(filterZeroAmount).sort(sortTable(sortOrder, asc)); - // if(!groupBy) return sortedAndFiltered; - // return sortedAndFiltered.reduce(groupAssetsBy(groupBy), []) }, [assets, sortOrder, asc]); const updateSortOrder = useCallback( @@ -121,6 +151,11 @@ export const AssetList = ({ assets, accounts, apiRegistry }: AssetListProps) => [sortOrder] ); + useEffect(() => { + const groupedAssets = groupAssetsBy(filteredAssets, groupBy); + console.log(groupedAssets); + }, [groupBy, filteredAssets, groupAssetsBy]); + if (filteredAssets.length <= 0) return
No Valued Asset found
; diff --git a/ui/src/components/Assets/GroupedAsset.tsx b/ui/src/components/Assets/GroupedAsset.tsx new file mode 100644 index 0000000..2230baa --- /dev/null +++ b/ui/src/components/Assets/GroupedAsset.tsx @@ -0,0 +1,32 @@ +import { Asset } from 'polkadot-portfolio-core'; +import { AssetGroups } from '../../utils/constants'; + +export default class GroupedAsset { + assets: Asset[]; + identifier: string; + type: AssetGroups; + transferableAssets: Asset[]; + floatValue: number; + euroValue: number; + + constructor(assets: Asset[], identifier: string, type: AssetGroups) { + this.assets = assets; + this.identifier = identifier; + this.type = type; + this.floatValue = this.calculateFloatValue(assets); + this.euroValue = this.calculateEuroValue(assets); + this.transferableAssets = assets.filter((item) => item.transferrable); + } + + refreshPrice = async (): Promise => { + await Promise.allSettled(this.assets.map((item) => item.refreshPrice())); + }; + + private calculateFloatValue = (assets: Asset[]): number => { + return assets.reduce((sum, currentAsset) => sum + currentAsset.floatAmount(), 0); + }; + + private calculateEuroValue = (assets: Asset[]): number => { + return assets.reduce((sum, currentAsset) => sum + currentAsset.euroValue(), 0); + }; +} From 00a6d0541f471bb9a37c57b7a4e3feb20cbbc60e Mon Sep 17 00:00:00 2001 From: Hosein Emrani Date: Tue, 16 Aug 2022 20:09:23 +0100 Subject: [PATCH 2/2] add group toolbar --- ui/src/components/Assets/AssetList.tsx | 11 +++-- ui/src/components/Assets/index.tsx | 64 ++++++++++++++++++-------- 2 files changed, 50 insertions(+), 25 deletions(-) diff --git a/ui/src/components/Assets/AssetList.tsx b/ui/src/components/Assets/AssetList.tsx index 4311d59..202d1d3 100644 --- a/ui/src/components/Assets/AssetList.tsx +++ b/ui/src/components/Assets/AssetList.tsx @@ -132,10 +132,9 @@ const groupAssetsBy = (assets: Asset[], assetGroup: AssetGroups): GroupedAsset[] return groupAssets(assets, selector, assetGroup); }; -export const AssetList = ({ assets, accounts, apiRegistry }: AssetListProps) => { +export const AssetList = ({ assets, accounts, apiRegistry, groupBy }: AssetListProps) => { const [sortOrder, setSortOrder] = useState(AssetGroups.Value); const [asc, setAsc] = useState(false); - const [groupBy, setGroupBy] = useState(AssetGroups.Token); const filteredAssets = useMemo(() => { return assets.filter(filterZeroAmount).sort(sortTable(sortOrder, asc)); }, [assets, sortOrder, asc]); @@ -152,8 +151,10 @@ export const AssetList = ({ assets, accounts, apiRegistry }: AssetListProps) => ); useEffect(() => { - const groupedAssets = groupAssetsBy(filteredAssets, groupBy); - console.log(groupedAssets); + if (groupBy) { + const groupedAssets = groupAssetsBy(filteredAssets, groupBy); + console.log(groupedAssets); + } }, [groupBy, filteredAssets, groupAssetsBy]); if (filteredAssets.length <= 0) @@ -161,7 +162,7 @@ export const AssetList = ({ assets, accounts, apiRegistry }: AssetListProps) => return (
-
+
{tableHeads.map((th, index) => ( @@ -28,10 +37,19 @@ const Assets = () => { }, [filteredAssets]); const [groupBy, setGroupBy] = useState(null); - // const groupAssetsBy = useCallback((gb: AssetGroups | null) => () => { - // if(groupBy === gb) setGroupBy(null) - // else setGroupBy(gb) - // }, [groupBy]) + const groupAssetsBy = useCallback( + (gb: AssetGroups | null) => () => { + if (!(gb && GroupableAssets.includes(gb))) return; + if (groupBy === gb) setGroupBy(null); + else setGroupBy(gb); + }, + [groupBy] + ); + + const groupHeads = useMemo( + () => tableHeads.filter((item) => GroupableAssets.includes(item.assetGroup)), + [tableHeads] + ); return (
@@ -43,22 +61,28 @@ const Assets = () => { {totalAssetValuesInAllChains}
- {/*
-
-
Group Assets:
-
- {tableHeads.map((item, index) => ( - - {item.title} - - ))} -
-
-
*/} +
+
+
+ +
+
+ {groupHeads.map((item, index) => ( + + {item.title} + + ))} +
+
+