Iamoskvin/vault depo fiat values (#398)

* added fiat values to deposit panel * fix link on arrow * fixed alignment
jediswaplabs · Aug 18, 2024 · f3ee3ef · f3ee3ef
1 parent 37b2e71
commit f3ee3ef
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 8 deletions.
diff --git a/src/components/CurrencyInputPanel/index.tsx b/src/components/CurrencyInputPanel/index.tsx
@@ -234,7 +234,7 @@ export default function CurrencyInputPanel({
 
   const containerStyles = hideShadow ? { boxShadow: 'none' } : {}
   const showMax = balance !== null && Number(value) !== Number(balance)
-
+  const fiatRowAlignMent = formatted ? 'space-between' : 'right'
   return (
     <InputPanel id={id} hideInput={hideInput} {...rest}>
       {!locked && (
@@ -297,7 +297,7 @@ export default function CurrencyInputPanel({
           </InputRow>
           {Boolean(!hideInput && !hideBalance && currency) && (
             <FiatRow>
-              <RowBetween>
+              <RowBetween style={{ justifyContent: fiatRowAlignMent }}>
                 {account && (
                   <RowFixed style={{ height: '17px' }}>
                     {' '}

diff --git a/src/components/vault/VaultDeposit.tsx b/src/components/vault/VaultDeposit.tsx
@@ -16,7 +16,15 @@ const DepositWrapper = styled(AutoColumn)`
   gap: 12px;
 `
 
-function VaultDeposit({ currentVault }: { currentVault: any }) {
+function VaultDeposit({
+  currentVault,
+  fiatPrice0,
+  fiatPrice1,
+}: {
+  currentVault: any
+  fiatPrice0?: number
+  fiatPrice1?: number
+}) {
   const { onFieldAInput, onFieldBInput } = useVaultActionHandlers()
   const { chainId: chainIdConnected } = useAccountDetails()
   const chainId = chainIdConnected || DEFAULT_CHAIN_ID
@@ -38,6 +46,15 @@ function VaultDeposit({ currentVault }: { currentVault: any }) {
     [independentField]: typedValue,
     [dependentField]: parsedAmounts[dependentField]?.toSignificant(6) ?? '',
   }
+  const fiatValue0 =
+    fiatPrice0 && formattedAmounts[Field.CURRENCY_A]
+      ? fiatPrice0 * Number(formattedAmounts[Field.CURRENCY_A])
+      : undefined
+  const fiatValue1 =
+    fiatPrice1 && formattedAmounts[Field.CURRENCY_B]
+      ? fiatPrice1 * Number(formattedAmounts[Field.CURRENCY_B])
+      : undefined
+
   return (
     <DepositWrapper>
       {token0All && (
@@ -47,6 +64,7 @@ function VaultDeposit({ currentVault }: { currentVault: any }) {
           showMaxButton
           currency={currencies[Field.CURRENCY_A] ?? null}
           id="add-liquidity-input-tokena"
+          fiatValue={fiatValue0}
         />
       )}
       {token1All && (
@@ -56,6 +74,7 @@ function VaultDeposit({ currentVault }: { currentVault: any }) {
           showMaxButton
           currency={currencies[Field.CURRENCY_B] ?? null}
           id="add-liquidity-input-tokenb"
+          fiatValue={fiatValue1}
         />
       )}
     </DepositWrapper>

diff --git a/src/pages/Vault/index.tsx b/src/pages/Vault/index.tsx
@@ -341,7 +341,6 @@ export default function Vault({ className }: { className?: string }) {
 
   const { data: allVaults, error: allVaultsError, isLoading: isAllVaultsLoading } = useAllVaults()
   const currentVault: any = allVaults && vaultIdFromUrl ? allVaults[vaultIdFromUrl] : {}
-  console.log('currentVault', currentVault)
   const currency0: any = useCurrency(currentVault?.token0?.address, chainId)
   const currency1: any = useCurrency(currentVault?.token1?.address, chainId)
   const vaultState = useVaultState()
@@ -401,6 +400,13 @@ export default function Vault({ className }: { className?: string }) {
     },
   })
 
+  const fiatPrice0 = separatedFiatValueofLiquidity?.data?.token0usdPrice
+    ? Number(separatedFiatValueofLiquidity.data.token0usdPrice)
+    : undefined
+  const fiatPrice1 = separatedFiatValueofLiquidity?.data?.token1usdPrice
+    ? Number(separatedFiatValueofLiquidity.data.token1usdPrice)
+    : undefined
+
   const { token0usdPrice, token1usdPrice } = useMemo(() => {
     if (!separatedFiatValueofLiquidity.data || !totalToken0Amount || !totalToken1Amount)
       return { token0usdPrice: undefined, token1usdPrice: undefined }
@@ -580,7 +586,12 @@ export default function Vault({ className }: { className?: string }) {
                 </VaultDetailsBottom>
               </VaultDetailsContainer>
               <VaultTransactionPanel>
-                <VaultElement chainId={chainId} currentVault={currentVault} />
+                <VaultElement
+                  chainId={chainId}
+                  currentVault={currentVault}
+                  fiatPrice0={fiatPrice0}
+                  fiatPrice1={fiatPrice1}
+                />
                 <MyDepositWrapperOuter>
                   <MyDepositWrapperInner>
                     <MyDeposits>
@@ -627,8 +638,9 @@ export default function Vault({ className }: { className?: string }) {
     <PageWrapper>
       <BreadcrumbsRow>
         <Breadcrumbs>
-          <ArrowLeft width={20} />
-          <BreadcrumbsNavLink to={'/vaults/'}>Back to vaults</BreadcrumbsNavLink>
+          <BreadcrumbsNavLink to={'/vaults/'} style={{ display: 'flex', alignItems: 'center' }}>
+            <ArrowLeft width={20} style={{ color: '#fff', marginRight: '8px' }} /> Back to vaults
+          </BreadcrumbsNavLink>
         </Breadcrumbs>
       </BreadcrumbsRow>
       {getContent()}
@@ -639,12 +651,16 @@ export default function Vault({ className }: { className?: string }) {
 export function VaultElement({
   chainId,
   currentVault,
+  fiatPrice0,
+  fiatPrice1,
 }: //   className,
 //   onCurrencyChange,
 //   disableTokenInputs = false,
 {
   chainId?: ChainId
   currentVault: any
+  fiatPrice0?: number
+  fiatPrice1?: number
   //   className?: string
   //   onCurrencyChange?: (selected: Pick<SwapState, Field.INPUT | Field.OUTPUT>) => void
   //   disableTokenInputs?: boolean
@@ -861,7 +877,9 @@ export function VaultElement({
       <VaultHeader activeButton={activeButton} setActiveButton={setActiveButton} chainId={chainId} />
       <FullDivider />
       <VaultInputWrapper>
-        {activeButton === 'Deposit' && <VaultDeposit currentVault={currentVault} />}
+        {activeButton === 'Deposit' && (
+          <VaultDeposit currentVault={currentVault} fiatPrice0={fiatPrice0} fiatPrice1={fiatPrice1} />
+        )}
         {activeButton === 'Withdraw' && (
           <VaultWithdraw
             currentVault={currentVault}