Merge pull request #233 from jediswaplabs/167-show-usd-value-for-toke…

…ns-in-swap-page-and-lp-page 167 show usd value for tokens in swap page and lp page
jediswaplabs · May 3, 2024 · eda41a7 · eda41a7
2 parents dabcfbf + 3a6d9fe
commit eda41a7
Show file tree

Hide file tree

Showing 15 changed files with 527 additions and 132 deletions.
diff --git a/package.json b/package.json
@@ -230,6 +230,8 @@
     "@web3-react/walletconnect-v2": "^8.5.1",
     "ajv": "^8.11.0",
     "ajv-formats": "^2.1.1",
+    "apollo-cache-inmemory": "^1.6.6",
+    "apollo-link-http": "^1.5.17",
     "array.prototype.flat": "^1.2.4",
     "array.prototype.flatmap": "^1.2.4",
     "cids": "^1.0.0",
@@ -263,6 +265,7 @@
     "qs": "^6.9.4",
     "rc-slider": "^10.0.1",
     "react": "^18.2.0",
+    "react-apollo": "^3.1.5",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.8",
     "react-helmet": "^6.1.0",

diff --git a/src/apollo/client.js b/src/apollo/client.js
@@ -0,0 +1,46 @@
+import { ApolloClient } from '@apollo/client'
+import { ChainId } from '@vnaysn/jediswap-sdk-core'
+import { InMemoryCache } from 'apollo-cache-inmemory'
+import { HttpLink } from 'apollo-link-http'
+
+const cache = new InMemoryCache({
+  dataIdFromObject: (object) => {
+    switch (object.__typename) {
+      case 'TokenDayData': {
+        return `${object.tokenAddress}${object.datetime}`
+      }
+      case 'FactoryDayData': {
+        return `${object.id}${object.dayId}`
+      }
+      case 'Token': {
+        return `${object.tokenAddress}${object.name}`
+      }
+      case 'Pool': {
+        return `${object.poolAddress}${object.datetime}`
+      }
+      default: {
+        return object.id || object._id
+      }
+    }
+  },
+})
+
+export const jediSwapClient = new ApolloClient({
+  link: new HttpLink({
+    uri: 'https://api.v2.jediswap.xyz/graphql',
+  }),
+  cache,
+  shouldBatch: true,
+})
+
+export const jediSwapClientSepolia = new ApolloClient({
+  link: new HttpLink({
+    uri: 'https://api.v2.sepolia.jediswap.xyz/graphql',
+  }),
+  cache,
+  shouldBatch: true,
+})
+
+export const getClient = (chainId) => {
+  return !chainId || chainId === ChainId.MAINNET ? jediSwapClient : jediSwapClientSepolia
+}
diff --git a/src/apollo/queries.js b/src/apollo/queries.js
@@ -0,0 +1,32 @@
+import gql from 'graphql-tag'
+
+const TokenFields = `
+  fragment TokenFields on Token {
+    tokenAddress
+    name
+    symbol
+    derivedETH
+    volume
+    volumeUSD
+    untrackedVolumeUSD
+    totalValueLocked
+    totalValueLockedUSD
+    txCount
+    feesUSD
+  }
+`
+
+export const TOKENS_DATA = ({ tokenIds = [] }) => {
+  const tokenString = `[${tokenIds.map((token) => `"${token}"`).join(',')}]`
+
+  let queryString = `
+    ${TokenFields}
+    query tokensData {
+      tokensData(first: 500, where: {tokenAddressIn: ${tokenString}}) {
+        token{...TokenFields}
+        period
+      }
+    }
+  `
+  return gql(queryString)
+}
diff --git a/src/components/CurrencyInputPanel/FiatValue.tsx b/src/components/CurrencyInputPanel/FiatValue.tsx
@@ -10,63 +10,41 @@ import { ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 import { warningSeverity } from 'utils/prices'
 
-const FiatLoadingBubble = styled(LoadingBubble)`
-  border-radius: 4px;
-  width: 4rem;
-  height: 1rem;
+const USDPriceContainer = styled.div`
+  display: flex;
 `
 
-export function FiatValue({
-  fiatValue,
-  priceImpact,
-}: {
-  fiatValue: { data?: number; isLoading: boolean }
-  priceImpact?: Percent
-}) {
-  const { formatNumber, formatPercent } = useFormatter()
-
-  const priceImpactColor = useMemo(() => {
-    if (!priceImpact) {
-      return undefined
-    }
-    if (priceImpact.lessThan('0')) {
-      return 'success'
-    }
-    const severity = warningSeverity(priceImpact)
-    if (severity < 1) {
-      return 'neutral3'
-    }
-    if (severity < 3) {
-      return 'deprecated_yellow1'
-    }
-    return 'critical'
-  }, [priceImpact])
+const USDPriceDifferenceText = styled.div<{ difference: number }>`
+  color: ${({ difference }) => (difference > 0 ? 'green' : 'red')};
+  margin-left: 2px;
+`
 
-  if (fiatValue.isLoading) {
-    return <FiatLoadingBubble />
-  }
+export function FiatValue({ fiatValue, usdPriceDifference }: { fiatValue: number; usdPriceDifference?: number }) {
+  const { formatNumber } = useFormatter()
 
   return (
     <Row gap="sm">
       <ThemedText.LabelSmall color="neutral1">
-        {fiatValue.data ? (
-          formatNumber({
-            input: fiatValue.data,
-            type: NumberType.FiatTokenPrice,
-          })
+        {fiatValue ? (
+          <USDPriceContainer>
+            ~{formatNumber({ input: fiatValue, type: NumberType.FiatTokenPrice })}{' '}
+            {usdPriceDifference && (
+              <USDPriceDifferenceText difference={usdPriceDifference}>({usdPriceDifference}%)</USDPriceDifferenceText>
+            )}
+          </USDPriceContainer>
         ) : (
           <MouseoverTooltip text={<Trans>Not enough liquidity to show accurate USD value.</Trans>}>-</MouseoverTooltip>
         )}
       </ThemedText.LabelSmall>
-      {priceImpact && (
+      {/* {priceImpact && (
         <ThemedText.BodySmall color={priceImpactColor}>
           <MouseoverTooltip
             text={<Trans>The estimated difference between the USD values of input and output amounts.</Trans>}
           >
             (<Trans>{formatPercent(priceImpact.multiply(-1))}</Trans>)
           </MouseoverTooltip>
         </ThemedText.BodySmall>
-      )}
+      )} */}
     </Row>
   )
 }
diff --git a/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx b/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
@@ -222,7 +222,8 @@ interface SwapCurrencyInputPanelProps {
   pair?: Pair | null
   hideInput?: boolean
   otherCurrency?: Currency | null
-  fiatValue?: { data?: number; isLoading: boolean }
+  usdPriceDifference?: number | undefined
+  fiatValue?: number
   priceImpact?: Percent
   id: string
   showCommonBases?: boolean
@@ -249,6 +250,7 @@ const SwapCurrencyInputPanel = forwardRef<HTMLInputElement, SwapCurrencyInputPan
       onCurrencySelect,
       currency,
       otherCurrency,
+      usdPriceDifference,
       id,
       showCommonBases,
       showCurrencyAmount,
@@ -289,7 +291,7 @@ const SwapCurrencyInputPanel = forwardRef<HTMLInputElement, SwapCurrencyInputPan
 
     const chainAllowed = isSupportedChain(chainId)
 
-    const { formatted, balance } = useAccountBalance(currency as Currency)
+    const { formatted } = useAccountBalance(currency as Currency)
 
     // reset tooltip state when currency changes
     useEffect(() => setTooltipVisible(false), [currency])
@@ -398,7 +400,9 @@ const SwapCurrencyInputPanel = forwardRef<HTMLInputElement, SwapCurrencyInputPan
                   <span />
                 )}
                 <LoadingOpacityContainer $loading={loading}>
-                  {fiatValue && <FiatValue fiatValue={fiatValue} priceImpact={priceImpact} />}
+                  {fiatValue === 0 || (parseFloat(value) && fiatValue === undefined)
+                    ? 'N/A'
+                    : fiatValue && <FiatValue fiatValue={fiatValue} usdPriceDifference={usdPriceDifference} />}
                 </LoadingOpacityContainer>
               </RowBetween>
             </FiatRow>

diff --git a/src/components/CurrencyInputPanel/index.tsx b/src/components/CurrencyInputPanel/index.tsx
@@ -47,8 +47,7 @@ const Container = styled.div<{ hideInput: boolean; disabled: boolean }>`
   ${({ theme, hideInput, disabled }) =>
     !disabled &&
     `
-    :focus,
-    :hover {
+    :focus{
       border: 1px solid ${hideInput ? ' transparent' : theme.surface2};
     }
   `}
@@ -179,7 +178,7 @@ interface CurrencyInputPanelProps {
   pair?: Pair | null
   hideInput?: boolean
   otherCurrency?: Currency | null
-  fiatValue?: { data?: number; isLoading: boolean }
+  fiatValue?: number | undefined
   id: string
   showCommonBases?: boolean
   showCurrencyAmount?: boolean
@@ -310,9 +309,11 @@ export default function CurrencyInputPanel({
                     </ThemedText.DeprecatedBody>
                   </RowFixed>
                 )}
-                {/* <LoadingOpacityContainer $loading={loading}>
-                  {fiatValue && <FiatValue fiatValue={fiatValue} />}
-                </LoadingOpacityContainer> */}
+                <LoadingOpacityContainer $loading={loading}>
+                  {fiatValue === 0 || (parseFloat(value) && fiatValue === undefined)
+                    ? 'N/A'
+                    : fiatValue && <FiatValue fiatValue={fiatValue} />}
+                </LoadingOpacityContainer>
               </RowBetween>
             </FiatRow>
           )}

diff --git a/src/connectors/index.ts b/src/connectors/index.ts
@@ -3,6 +3,17 @@ import { InjectedConnector } from '@starknet-react/core'
 
 export const NETWORK_CHAIN_ID: number = parseInt(process.env.REACT_APP_CHAIN_ID ?? '5')
 
+export const isProductionEnvironment = () => {
+  if (!window.location) {
+    return false
+  }
+  if (String(window.location) === '//') {
+    return false
+  }
+  const host = new URL(String(window.location))?.host || ''
+  return host === 'app.jediswap.xyz'
+}
+
 export const isTestnetEnvironment = () => {
   if (!location) {
     return false

diff --git a/src/constants/tokens.ts b/src/constants/tokens.ts
@@ -3,6 +3,7 @@ import { ChainId, Currency, NativeCurrency, Percent, Token } from '@vnaysn/jedis
 
 // import { fortmatic, injected, portis, walletconnect, walletlink, argentX } from '../connectors'
 import JSBI from 'jsbi'
+import { isProductionEnvironment } from 'connectors'
 
 export const DEFAULT_CHAIN_ID = ChainId.MAINNET
 export const NONFUNGIBLE_POSITION_MANAGER_ADDRESSES = '0xC36442b4a4522E871399CD717aBDD847Ab11FE88'

diff --git a/src/index.tsx b/src/index.tsx
@@ -28,9 +28,6 @@ import OrderUpdater from './state/signatures/updater'
 import ThemeProvider, { ThemedGlobalStyle } from './theme'
 import TransactionUpdater from './state/transactions/updater'
 import RadialGradientByChainUpdater from './theme/components/RadialGradientByChainUpdater'
-
-import { goerli, mainnet, sepolia } from '@starknet-react/chains'
-import { StarknetConfig, publicProvider, argent, braavos } from '@starknet-react/core'
 import { StarknetProvider } from 'context/StarknetProvider'
 
 function Updaters() {
@@ -66,15 +63,13 @@ createRoot(container).render(
             <HashRouter>
               <LanguageProvider>
                 {/* <Web3Provider> */}
-                <ApolloProvider client={apolloClient}>
-                  <BlockNumberProvider>
-                    <Updaters />
-                    <ThemeProvider>
-                      <ThemedGlobalStyle />
-                      <App />
-                    </ThemeProvider>
-                  </BlockNumberProvider>
-                </ApolloProvider>
+                <BlockNumberProvider>
+                  <Updaters />
+                  <ThemeProvider>
+                    <ThemedGlobalStyle />
+                    <App />
+                  </ThemeProvider>
+                </BlockNumberProvider>
                 {/* </Web3Provider> */}
               </LanguageProvider>
             </HashRouter>