Masset Balance

src/components/pages/Pools/Detail/PoolOverview.tsx

@@ -1,4 +1,5 @@
 import React, { FC, ReactElement, useCallback, useMemo, useState } from 'react';
+import styled from 'styled-components';
 
 import { useFeederPoolApy } from '../../../../hooks/useFeederPoolApy';
 import { useSelectedMassetPrice } from '../../../../hooks/usePrice';
@@ -21,6 +22,13 @@ import {
   CardContainer as Container,
   CardButton as Button,
 } from '../../../core/TransitionCard';
+import { useMinimumOutput } from '../../../../hooks/useOutput';
+import { BigDecimal } from '../../../../web3/BigDecimal';
+import { useEstimatedOutput } from '../../../../hooks/useEstimatedOutput';
+import { BigDecimalInputValue } from '../../../../hooks/useBigDecimalInputs';
+import { UnstyledButton } from '../../../core/Button';
+import { useToggle } from 'react-use';
+import { ThemedSkeleton } from '../../../core/ThemedSkeleton';
 
 enum Selection {
   Stake = 'stake',
@@ -30,6 +38,30 @@ enum Selection {
 
 const { Stake, Boost, Rewards } = Selection;
 
+const SwitchButton = styled(UnstyledButton)`
+  position: absolute;
+  display: block;
+  border: 1px solid ${({ theme }) => theme.color.defaultBorder};
+  color: ${({ theme }) => theme.color.body};
+  border-radius: 1rem;
+  right: -2.5rem;
+  height: 1.75rem;
+  width: 1.75rem;
+  transition: 0.25s;
+
+  :hover {
+    background: ${({ theme }) => theme.color.gold};
+    color: ${({ theme }) => theme.color.white};
+  }
+`;
+
+const BalanceContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 const UserVaultBoost: FC = () => {
   const feederPool = useSelectedFeederPoolState();
   const apy = useFeederPoolApy(feederPool.address);
@@ -68,8 +100,13 @@ export const PoolOverview: FC = () => {
   const feederPool = useSelectedFeederPoolState();
   const apy = useFeederPoolApy(feederPool.address);
   const massetPrice = useSelectedMassetPrice() ?? 1;
+  const [showMassetBalance, toggleMassetBalance] = useToggle(false);
 
-  const { vault, token } = feederPool;
+  const {
+    vault,
+    token,
+    masset: { token: massetToken },
+  } = feederPool;
   const userAmount = token.balance?.simple ?? 0;
   const userStakedAmount = vault.account?.rawBalance.simple ?? 0;
 
@@ -84,10 +121,29 @@ export const PoolOverview: FC = () => {
   );
 
   const totalUserBalance = useMemo(
-    () => (userStakedAmount + userAmount) * massetPrice,
-    [massetPrice, userAmount, userStakedAmount],
+    () =>
+      token.balance?.add(vault?.account?.rawBalance ?? BigDecimal.ZERO) ??
+      BigDecimal.ZERO,
+    [userAmount, userStakedAmount],
   );
 
+  const { estimatedOutputAmount } = useEstimatedOutput(
+    {
+      ...token,
+      amount: totalUserBalance,
+    } as BigDecimalInputValue,
+    {
+      ...massetToken,
+    } as BigDecimalInputValue,
+    false,
+  );
+
+  const handleBalanceSwitch = (e: any) => {
+    e?.stopPropagation();
+    e?.preventDefault();
+    toggleMassetBalance();
+  };
+
   return showLiquidityMessage ? (
     <ShowEarningPower>
       <LiquidityMessageContent vault={vault} apy={apy.value?.base} />
@@ -99,8 +155,33 @@ export const PoolOverview: FC = () => {
           active={selection === Stake}
           onClick={() => handleSelection(Stake)}
         >
-          <h3>Balance</h3>
-          <CountUp end={totalUserBalance} prefix="$" />
+          <h3>
+            {showMassetBalance ? `${massetToken?.symbol} Balance` : `Balance`}
+          </h3>
+          <div>
+            <BalanceContainer>
+              <SwitchButton onClick={handleBalanceSwitch}>⇄</SwitchButton>
+              {showMassetBalance ? (
+                estimatedOutputAmount?.fetching ? (
+                  <ThemedSkeleton height={20} width={100} />
+                ) : estimatedOutputAmount?.value?.simple === 0 ? (
+                  '–'
+                ) : (
+                  <CountUp
+                    end={estimatedOutputAmount?.value?.simple ?? 0}
+                    prefix={'≈'}
+                    decimals={massetToken?.decimals > 2 ? 4 : 2}
+                  />
+                )
+              ) : (
+                <CountUp
+                  end={totalUserBalance?.simple * massetPrice}
+                  prefix="$"
+                  decimals={2}
+                />
+              )}
+            </BalanceContainer>
+          </div>
         </Button>
         <Button
           active={selection === Boost}

src/components/pages/Pools/FeederPoolProvider.tsx

@@ -102,6 +102,7 @@ export const useFPVaultAddressOptions = (): AddressOption[] => {
         label: `Pool`,
         custom: true,
         symbol: token.symbol,
+        balance: token?.balance,
         tip: `${token.symbol} Pool`,
       },
     ],

src/components/pages/Save/v2/SaveOverview.tsx

@@ -29,6 +29,11 @@ import { ReactComponent as WarningBadge } from '../../../icons/badges/warning.sv
 import { SavePosition } from './SavePosition';
 import { OnboardingBanner } from './OnboardingBanner';
 import { ThemedSkeleton } from '../../../core/ThemedSkeleton';
+import { useEstimatedOutput } from '../../../../hooks/useEstimatedOutput';
+import { BigDecimalInputValue } from '../../../../hooks/useBigDecimalInputs';
+import { UnstyledButton } from '../../../core/Button';
+import { useToggle } from 'react-use';
+import { useSaveOutput } from './useSaveOutput';
 
 enum Selection {
   Balance = 'Balance',
@@ -47,6 +52,30 @@ const StyledWarningBadge = styled(WarningBadge)`
   right: -1.5rem;
 `;
 
+const SwitchButton = styled(UnstyledButton)`
+  position: absolute;
+  display: block;
+  border: 1px solid ${({ theme }) => theme.color.defaultBorder};
+  color: ${({ theme }) => theme.color.body};
+  border-radius: 1rem;
+  right: -2.5rem;
+  height: 1.75rem;
+  width: 1.75rem;
+  transition: 0.25s;
+
+  :hover {
+    background: ${({ theme }) => theme.color.gold};
+    color: ${({ theme }) => theme.color.white};
+  }
+`;
+
+const BalanceContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 const BalanceHeading = styled.div`
   display: flex;
   justify-content: center;
@@ -142,11 +171,13 @@ const components: Record<string, ReactElement> = {
 export const SaveOverview: FC = () => {
   const [selection, setSelection] = useState<Selection | undefined>();
   const massetState = useSelectedMassetState();
-  const massetPrice = useSelectedMassetPrice();
+  const massetPrice = useSelectedMassetPrice() ?? 1;
   const rewardStreams = useRewardStreams();
   const [selectedSaveVersion] = useSelectedSaveVersion();
+  const [showMassetBalance, toggleMassetBalance] = useToggle(false);
 
   const {
+    token: massetToken,
     savingsContracts: {
       v1: { savingsBalance: saveV1Balance } = {},
       v2: {
@@ -160,8 +191,9 @@ export const SaveOverview: FC = () => {
   const apy = useSaveVaultAPY(saveToken?.symbol);
   const totalEarned = rewardStreams?.amounts.earned.total ?? 0;
 
-  const userBalance = useMemo(() => {
-    if (selectedSaveVersion === 1) return saveV1Balance?.balance;
+  const totalUserBalance = useMemo(() => {
+    if (selectedSaveVersion === 1)
+      return saveV1Balance?.balance ?? BigDecimal.ZERO;
 
     return (
       boostedSavingsVault?.account?.rawBalance
@@ -185,6 +217,14 @@ export const SaveOverview: FC = () => {
     [selection],
   );
 
+  console.log(totalUserBalance?.simple);
+
+  const handleBalanceSwitch = (e: any) => {
+    e?.stopPropagation();
+    e?.preventDefault();
+    toggleMassetBalance();
+  };
+
   return (
     <Container>
       <OnboardingBanner />
@@ -196,14 +236,31 @@ export const SaveOverview: FC = () => {
           >
             <BalanceHeading>
               <div>
-                <h3>Balance</h3>
+                <h3>
+                  {showMassetBalance
+                    ? `${massetToken?.symbol} Balance`
+                    : `Balance`}
+                </h3>
                 {isSaveV1 && <StyledWarningBadge />}
               </div>
             </BalanceHeading>
-            <CountUp
-              end={(userBalance?.simple ?? 0) * (massetPrice ?? 0)}
-              prefix="$"
-            />
+            <div>
+              <BalanceContainer>
+                <SwitchButton onClick={handleBalanceSwitch}>⇄</SwitchButton>
+                {showMassetBalance ? (
+                  <CountUp
+                    end={totalUserBalance?.simple ?? 1}
+                    decimals={8}
+                    prefix={'≈'}
+                  />
+                ) : (
+                  <CountUp
+                    end={totalUserBalance?.simple * massetPrice}
+                    prefix="$"
+                  />
+                )}
+              </BalanceContainer>
+            </div>
           </Button>
           {!isSaveV1 && (
             <Button