From a0d03e45791d41801c110f2d50fb0c8dfd5ada38 Mon Sep 17 00:00:00 2001
From: coffee-converter <coffee.becomes.code@gmail.com>
Date: Thu, 23 Jul 2020 14:14:36 -0500
Subject: [PATCH 1/2] reorg: calc pool liquidity/userLiquidity/volume separate
 from their displays

---
 src/components/Home/LiquidityPanel.tsx | 129 ++++++++++++-------------
 1 file changed, 62 insertions(+), 67 deletions(-)

diff --git a/src/components/Home/LiquidityPanel.tsx b/src/components/Home/LiquidityPanel.tsx
index 7683ec8..339473f 100644
--- a/src/components/Home/LiquidityPanel.tsx
+++ b/src/components/Home/LiquidityPanel.tsx
@@ -219,73 +219,68 @@ const LiquidityPanel = observer((props: Props) => {
                 );
             });
 
-            return (
-                <React.Fragment>
-                    {poolsShown.map(pool => {
-                        let liquidityText = '-';
-                        let userLiquidityText = '-';
-                        let volumeText = '-';
-
-                        const poolLiquidity = marketStore.getPortfolioValue(
-                            pool
-                        );
-                        liquidityText = formatCurrency(poolLiquidity);
-
-                        if (account) {
-                            const userLiquidity = poolStore.calcUserLiquidity(
-                                pool.address,
-                                account
-                            );
-
-                            if (userLiquidity) {
-                                userLiquidityText = formatCurrency(
-                                    userLiquidity
-                                );
-                            }
-                        }
-
-                        // const volume = marketStore.getPoolVolume(pool);
-
-                        volumeText = formatCurrency(pool.lastSwapVolume);
-
-                        return (
-                            <PoolLink
-                                key={pool.address}
-                                to={`/pool/${pool.address}`}
-                            >
-                                <PoolRow>
-                                    <TableCellHideMobile>
-                                        <IdenticonText>
-                                            {shortenAddress(pool.address)}
-                                        </IdenticonText>
-                                    </TableCellHideMobile>
-                                    <AssetCell>
-                                        <PieChartWrapper>
-                                            <Pie
-                                                type={'doughnut'}
-                                                data={formatPoolAssetChartData(
-                                                    pool,
-                                                    contractMetadataStore.contractMetadata
-                                                )}
-                                                options={options}
-                                            />
-                                        </PieChartWrapper>
-                                        <BreakdownContainer>
-                                            {renderAssetPercentages(pool)}
-                                        </BreakdownContainer>
-                                    </AssetCell>
-                                    <TableCellHideMobile>
-                                        {formatFee(pool.swapFee)}
-                                    </TableCellHideMobile>
-                                    <TableCellRight>{`$ ${liquidityText}`}</TableCellRight>
-                                    <TableCellRightHideMobile>{`$ ${userLiquidityText}`}</TableCellRightHideMobile>
-                                    <TableCellRightHideMobile>{`$ ${volumeText}`}</TableCellRightHideMobile>
-                                </PoolRow>
-                            </PoolLink>
-                        );
-                    })}
-                </React.Fragment>
-            );
+            const poolInfos = poolsShown.map(pool => {
+                const poolLiquidity = marketStore.getPortfolioValue(pool);
+
+                const userLiquidity = account
+                    ? poolStore.calcUserLiquidity(pool.address, account)
+                    : null;
+
+                // const volume = marketStore.getPoolVolume(pool);
+                const volume = pool.lastSwapVolume;
+
+                return Object.assign(
+                    {
+                        liquidity: poolLiquidity,
+                        userLiquidity: userLiquidity,
+                        volume: volume,
+                    },
+                    pool
+                );
+            });
+
+            const poolRows = poolInfos.map(pool => {
+                const liquidityText = formatCurrency(pool.liquidity);
+                const userLiquidityText = pool.userLiquidity
+                    ? formatCurrency(pool.userLiquidity)
+                    : '-';
+                const volumeText = formatCurrency(pool.volume);
+
+                return (
+                    <PoolLink key={pool.address} to={`/pool/${pool.address}`}>
+                        <PoolRow>
+                            <TableCellHideMobile>
+                                <IdenticonText>
+                                    {shortenAddress(pool.address)}
+                                </IdenticonText>
+                            </TableCellHideMobile>
+                            <AssetCell>
+                                <PieChartWrapper>
+                                    <Pie
+                                        type={'doughnut'}
+                                        data={formatPoolAssetChartData(
+                                            pool,
+                                            contractMetadataStore.contractMetadata
+                                        )}
+                                        options={options}
+                                    />
+                                </PieChartWrapper>
+                                <BreakdownContainer>
+                                    {renderAssetPercentages(pool)}
+                                </BreakdownContainer>
+                            </AssetCell>
+                            <TableCellHideMobile>
+                                {formatFee(pool.swapFee)}
+                            </TableCellHideMobile>
+                            <TableCellRight>{`$ ${liquidityText}`}</TableCellRight>
+                            <TableCellRightHideMobile>{`$ ${userLiquidityText}`}</TableCellRightHideMobile>
+                            <TableCellRightHideMobile>{`$ ${volumeText}`}</TableCellRightHideMobile>
+                        </PoolRow>
+                    </PoolLink>
+                );
+            });
+
+            return <React.Fragment>{poolRows}</React.Fragment>;
         }
     };
 

From 76cb425b4cbc19e44e68636e2537203f91521c7e Mon Sep 17 00:00:00 2001
From: coffee-converter <coffee.becomes.code@gmail.com>
Date: Thu, 23 Jul 2020 14:18:51 -0500
Subject: [PATCH 2/2] adds total row to My Liquidity table

---
 src/components/Home/LiquidityPanel.tsx | 47 ++++++++++++++++++++++++--
 src/components/Home/MyLiquidity.tsx    |  1 +
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/src/components/Home/LiquidityPanel.tsx b/src/components/Home/LiquidityPanel.tsx
index 339473f..3f4069f 100644
--- a/src/components/Home/LiquidityPanel.tsx
+++ b/src/components/Home/LiquidityPanel.tsx
@@ -12,6 +12,7 @@ import {
     formatFee,
 } from '../../utils/helpers';
 import { formatPoolAssetChartData } from '../../utils/chartFormatter';
+import { BigNumber } from '../../utils/bignumber';
 
 const Wrapper = styled.div`
     border: 1px solid var(--panel-border);
@@ -143,6 +144,7 @@ const AssetDot = styled.div`
 interface Props {
     pools: Pool[];
     dataSource: LiquidityPanelDataSource;
+    showTotalRow?: boolean;
 }
 
 export enum LiquidityPanelDataSource {
@@ -159,7 +161,7 @@ const LiquidityPanel = observer((props: Props) => {
     const {
         root: { poolStore, providerStore, marketStore, contractMetadataStore },
     } = useStores();
-    const { pools, dataSource } = props;
+    const { pools, dataSource, showTotalRow } = props;
     const account = providerStore.providerStatus.account;
 
     const options = {
@@ -280,7 +282,48 @@ const LiquidityPanel = observer((props: Props) => {
                 );
             });
 
-            return <React.Fragment>{poolRows}</React.Fragment>;
+            let totalRow;
+            if (showTotalRow) {
+                const poolTotals = poolInfos.reduce(
+                    (acc, p) => {
+                        acc.liquidity = acc.liquidity.plus(p.liquidity);
+                        acc.userLiquidity = acc.userLiquidity.plus(
+                            p.userLiquidity
+                        );
+                        acc.volume = acc.volume.plus(p.volume);
+                        return acc;
+                    },
+                    {
+                        liquidity: new BigNumber(0),
+                        userLiquidity: new BigNumber(0),
+                        volume: new BigNumber(0),
+                    }
+                );
+
+                const totalLiquidityText = formatCurrency(poolTotals.liquidity);
+                const totalUserLiquidityText = poolTotals.userLiquidity
+                    ? formatCurrency(poolTotals.userLiquidity)
+                    : '-';
+                const totalVolumeText = formatCurrency(poolTotals.volume);
+
+                totalRow = (
+                    <HeaderRow>
+                        <TableCellHideMobile>Totals</TableCellHideMobile>
+                        <AssetCell />
+                        <TableCellHideMobile />
+                        <TableCellRight>{`$ ${totalLiquidityText}`}</TableCellRight>
+                        <TableCellRightHideMobile>{`$ ${totalUserLiquidityText}`}</TableCellRightHideMobile>
+                        <TableCellRightHideMobile>{`$ ${totalVolumeText}`}</TableCellRightHideMobile>
+                    </HeaderRow>
+                );
+            }
+
+            return (
+                <React.Fragment>
+                    {poolRows}
+                    {totalRow}
+                </React.Fragment>
+            );
         }
     };
 
diff --git a/src/components/Home/MyLiquidity.tsx b/src/components/Home/MyLiquidity.tsx
index 5ecd5e3..faada78 100644
--- a/src/components/Home/MyLiquidity.tsx
+++ b/src/components/Home/MyLiquidity.tsx
@@ -61,6 +61,7 @@ const MyLiquidity = observer(() => {
             <LiquidityPanel
                 pools={pools}
                 dataSource={LiquidityPanelDataSource.ACCOUNT}
+                showTotalRow={true}
             />
         </Wrapper>
     );