Group assets by ticker, chain, account, source

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,58 @@ 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;
-//   }
-// }
-
-export const AssetList = ({ assets, accounts, apiRegistry }: AssetListProps) => {
+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, groupBy }: AssetListProps) => {
 	const [sortOrder, setSortOrder] = useState<AssetGroups>(AssetGroups.Value);
 	const [asc, setAsc] = useState<boolean>(false);
 	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,12 +150,19 @@ export const AssetList = ({ assets, accounts, apiRegistry }: AssetListProps) =>
 		[sortOrder]
 	);
 
+	useEffect(() => {
+		if (groupBy) {
+			const groupedAssets = groupAssetsBy(filteredAssets, groupBy);
+			console.log(groupedAssets);
+		}
+	}, [groupBy, filteredAssets, groupAssetsBy]);
+
 	if (filteredAssets.length <= 0)
 		return <div className={styles.emptyBox}>No Valued Asset found</div>;
 
 	return (
 		<div>
-			<div className={styles.tableBody}>
+			<div className={classNames('bg-white sticky top-0', styles.tableBody)}>
 				{tableHeads.map((th, index) => (
 					<span
 						key={`${index}__${th.title.toLowerCase()}`}

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<void> => {
+		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);
+	};
+}

ui/src/components/Assets/index.tsx

@@ -5,6 +5,15 @@ import { IVisibility } from '../../store/store';
 import { Asset, currencyFormat } from 'polkadot-portfolio-core';
 import { AssetGroups, tableHeads } from '../../utils/constants';
 import { AssetList } from './AssetList';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faLayerGroup } from '@fortawesome/free-solid-svg-icons';
+
+const GroupableAssets = [
+	AssetGroups.Account,
+	AssetGroups.Chain,
+	AssetGroups.Source,
+	AssetGroups.Token
+];
 
 const filterVisibility =
 	(visibility: IVisibility) =>
@@ -28,10 +37,19 @@ const Assets = () => {
 	}, [filteredAssets]);
 
 	const [groupBy, setGroupBy] = useState<AssetGroups | null>(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 (
 		<div>
@@ -43,22 +61,28 @@ const Assets = () => {
 							<span className="mr-4">{totalAssetValuesInAllChains}</span>
 						</div>
 					</div>
-					{/* <div className='inline-flex items-center justify-between'>
-            <div className='selects'>
-              <div>Group Assets:</div>
-              <div>
-                {tableHeads.map((item, index) => (
-                  <span
-                    className={classNames('cursor-pointer mr-2 hover:text-cyan-800', {
-                      'text-cyan-800': groupBy === item.assetGroup
-                    })}
-                    key={'th_group__' + index} onClick={groupAssetsBy(item.assetGroup)}>
-                    {item.title}
-                  </span>
-                ))}
-              </div>
-            </div>
-          </div> */}
+					<div className="inline-flex items-center justify-between">
+						<div className="flex items-center">
+							<div className="mr-2" title="Group assets by">
+								<FontAwesomeIcon icon={faLayerGroup} />
+							</div>
+							<div>
+								{groupHeads.map((item, index) => (
+									<span
+										className={classNames(
+											'inline-block rounded-xl py-1 px-2 border border-transparent cursor-pointer mr-2 hover:text-cyan-800 hover:border-cyan-700',
+											{
+												'text-cyan-800 border-cyan-800': groupBy === item.assetGroup
+											}
+										)}
+										key={'th_group__' + index}
+										onClick={groupAssetsBy(item.assetGroup)}>
+										{item.title}
+									</span>
+								))}
+							</div>
+						</div>
+					</div>
 				</div>
 				<div>
 					<AssetList