Iamoskvin/vault token logos (#395)

* fix small logic error * added token logos to my deposits * added vault name
jediswaplabs · Aug 18, 2024 · 920d334 · 920d334
1 parent bafbf8e
commit 920d334
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 9 deletions.
diff --git a/src/components/FeeBadge/index.tsx b/src/components/FeeBadge/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 
-const FeeBadgeContainer = styled.div`
+export const FeeBadgeContainer = styled.div`
   display: inline-flex;
   padding: 4px 8px;
   border-radius: 4px;
@@ -12,6 +12,6 @@ const FeeBadgeContainer = styled.div`
   line-height: 1;
 `
 
-const FeeBadge = ({ children}: {children: string}) => <FeeBadgeContainer>{children}</FeeBadgeContainer>
+const FeeBadge = ({ children }: { children: string }) => <FeeBadgeContainer>{children}</FeeBadgeContainer>
 
 export default FeeBadge
diff --git a/src/pages/Vault/index.tsx b/src/pages/Vault/index.tsx
@@ -53,6 +53,8 @@ import { useQuery } from 'react-query'
 import { TOKENS_DATA } from 'apollo/queries'
 import { getClient } from 'apollo/client'
 import { findClosestPrice } from 'utils/getClosest'
+import CurrencyLogo from 'components/Logo/CurrencyLogo'
+import FeeBadge, { FeeBadgeContainer } from 'components/FeeBadge'
 
 export const DEFAULT_VAULT_SLIPPAGE_TOLERANCE = new Percent(50, 10_000)
 
@@ -339,6 +341,7 @@ 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()
@@ -435,23 +438,23 @@ export default function Vault({ className }: { className?: string }) {
       }
       default: {
         const performanceData = currentVault.performance[currentVault.mainAssetKey]
-        const token0 = new Token(
+        const token0: any = new Token(
           currentVault.token0.chainId,
           currentVault.token0.address,
           currentVault.token0.decimals,
           currentVault.token0.symbol,
           currentVault.token0.name
         )
-        // token0.logoURI = currentVault.token0.logoURI
+        token0.logoURI = currentVault.token0.logoURI
 
-        const token1 = new Token(
+        const token1: any = new Token(
           currentVault.token1.chainId,
           currentVault.token1.address,
           currentVault.token1.decimals,
           currentVault.token1.symbol,
           currentVault.token1.name
         )
-        // token1.logoURI = currentVault.token1.logoURI
+        token1.logoURI = currentVault.token1.logoURI
 
         let tvl
         let apr
@@ -485,6 +488,13 @@ export default function Vault({ className }: { className?: string }) {
 
         return (
           <AutoColumn gap={'18px'}>
+            <Flex alignItems={'center'} style={{ gap: '8px', fontSize: '1.4rem', fontWeight: 700 }}>
+              <DoubleCurrencyLogo size={24} currency0={token0} currency1={token1} />
+              <span style={{ marginLeft: '10px' }}>
+                {token0?.symbol}-{token1?.symbol}
+              </span>
+              <FeeBadgeContainer style={{ fontSize: '1.1rem' }}>{currentVault.feeTier}</FeeBadgeContainer>
+            </Flex>
             <PageContentWrapper>
               <VaultDetailsContainer>
                 <AutoColumn gap="37px">
@@ -585,11 +595,21 @@ export default function Vault({ className }: { className?: string }) {
                     </MyDeposits>
                     <MyDepositWrapperInner style={{ padding: 20 }}>
                       <MyDeposits>
-                        <span>{currency0?.symbol}</span>
-                        <span>{totalToken1Amount ? totalToken0Amount?.toSignificant() : 0}</span>
+                        <div style={{ display: 'flex' }}>
+                          {currency0 && (
+                            <CurrencyLogo style={{ marginRight: '6px' }} currency={currency0} size="24px" />
+                          )}
+                          <span>{currency0?.symbol}</span>
+                        </div>
+                        <span>{totalToken0Amount ? totalToken0Amount?.toSignificant() : 0}</span>
                       </MyDeposits>
                       <MyDeposits style={{ marginBottom: 0 }}>
-                        <span>{currency1?.symbol}</span>
+                        <div style={{ display: 'flex' }}>
+                          {currency1 && (
+                            <CurrencyLogo style={{ marginRight: '6px' }} currency={currency1} size="24px" />
+                          )}
+                          <span>{currency1?.symbol}</span>
+                        </div>
                         <span>{totalToken1Amount ? totalToken1Amount?.toSignificant() : 0}</span>
                       </MyDeposits>
                     </MyDepositWrapperInner>