Merge pull request #15 from QuickSwap/feature/analytics-pair-details

Analytics pair details page
QuickSwap · Dec 29, 2021 · 8dbe3bf · 8dbe3bf
2 parents b2c237e + 4eacc81
commit 8dbe3bf
Show file tree

Hide file tree

Showing 32 changed files with 1,476 additions and 108 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -16,6 +16,7 @@ import {
   PoolsPage,
   SwapPage,
   AnalyticsTokenDetails,
+  AnalyticsPairDetails,
 } from 'pages';
 import { PageLayout } from 'layouts';
 import { getLibrary } from 'utils';
@@ -133,6 +134,11 @@ const App: React.FC = () => {
                         <AnalyticsTokenDetails />
                       </PageLayout>
                     </Route>
+                    <Route exact path='/analytics/pair/:id'>
+                      <PageLayout>
+                        <AnalyticsPairDetails />
+                      </PageLayout>
+                    </Route>
                   </Switch>
                 </Web3ReactManager>
               </Gelato>

diff --git a/src/apollo/client.js b/src/apollo/client.js
@@ -18,6 +18,14 @@ export const healthClient = new ApolloClient({
   shouldBatch: true,
 });
 
+export const txClient = new ApolloClient({
+  link: new HttpLink({
+    uri: 'https://polygon.furadao.org/subgraphs/name/quickswap',
+  }),
+  cache: new InMemoryCache(),
+  shouldBatch: true,
+});
+
 export const v1Client = new ApolloClient({
   link: new HttpLink({
     uri: 'https://api.thegraph.com/subgraphs/name/ianlapham/uniswap',

diff --git a/src/apollo/queries.ts b/src/apollo/queries.ts
@@ -127,22 +127,60 @@ export const TOKEN_CHART = gql`
   }
 `;
 
+export const PAIR_CHART = gql`
+  query pairDayDatas($pairAddress: Bytes!, $skip: Int!, $startTime: Int!) {
+    pairDayDatas(
+      first: 1000
+      skip: $skip
+      orderBy: date
+      orderDirection: asc
+      where: { pairAddress: $pairAddress, date_gt: $startTime }
+    ) {
+      id
+      date
+      dailyVolumeToken0
+      dailyVolumeToken1
+      dailyVolumeUSD
+      reserveUSD
+    }
+  }
+`;
+
+export const HOURLY_PAIR_RATES = (pairAddress: string, blocks: any[]) => {
+  let queryString = 'query blocks {';
+  queryString += blocks.map(
+    (block) => `
+      t${block.timestamp}: pair(id:"${pairAddress}", block: { number: ${block.number} }) { 
+        token0Price
+        token1Price
+      }
+    `,
+  );
+
+  queryString += '}';
+  return gql(queryString);
+};
+
 const PairFields = `
   fragment PairFields on Pair {
     id
     trackedReserveETH
+    reserve0
+    reserve1
     volumeUSD
     reserveUSD
     totalSupply
     token0 {
       symbol
       id
       decimals
+      derivedETH
     }
     token1 {
       symbol
       id
       decimals
+      derivedETH
     }
   }
 `;
@@ -487,3 +525,88 @@ export const GET_BLOCKS: any = (timestamps: number[]) => {
   queryString += '}';
   return gql(queryString);
 };
+
+export const FILTERED_TRANSACTIONS = gql`
+  query($allPairs: [Bytes]!) {
+    mints(
+      first: 20
+      where: { pair_in: $allPairs }
+      orderBy: timestamp
+      orderDirection: desc
+    ) {
+      transaction {
+        id
+        timestamp
+      }
+      pair {
+        token0 {
+          id
+          symbol
+        }
+        token1 {
+          id
+          symbol
+        }
+      }
+      to
+      liquidity
+      amount0
+      amount1
+      amountUSD
+    }
+    burns(
+      first: 20
+      where: { pair_in: $allPairs }
+      orderBy: timestamp
+      orderDirection: desc
+    ) {
+      transaction {
+        id
+        timestamp
+      }
+      pair {
+        token0 {
+          id
+          symbol
+        }
+        token1 {
+          id
+          symbol
+        }
+      }
+      sender
+      liquidity
+      amount0
+      amount1
+      amountUSD
+    }
+    swaps(
+      first: 30
+      where: { pair_in: $allPairs }
+      orderBy: timestamp
+      orderDirection: desc
+    ) {
+      transaction {
+        id
+        timestamp
+      }
+      id
+      pair {
+        token0 {
+          id
+          symbol
+        }
+        token1 {
+          id
+          symbol
+        }
+      }
+      amount0In
+      amount0Out
+      amount1In
+      amount1Out
+      amountUSD
+      to
+    }
+  }
+`;
diff --git a/src/components/CurrencySearchModal/CurrencySearch.tsx b/src/components/CurrencySearchModal/CurrencySearch.tsx
@@ -37,7 +37,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
     flexDirection: 'column',
     background: palette.background.paper,
     backdropFilter: 'blur(9.9px)',
-    border: '1px solid #3e4252',
+    border: `1px solid ${palette.grey.A400}`,
     [breakpoints.down('xs')]: {
       height: '90vh',
     },

diff --git a/src/components/FarmDualCard/FarmDualCard.tsx b/src/components/FarmDualCard/FarmDualCard.tsx
@@ -64,7 +64,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
     },
   },
   buttonToken: {
-    backgroundColor: '#3e4252',
+    backgroundColor: palette.grey.A400,
     borderRadius: '10px',
     height: '50px',
     display: 'flex',

diff --git a/src/components/FarmLPCard/FarmLPCard.tsx b/src/components/FarmLPCard/FarmLPCard.tsx
@@ -53,7 +53,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
     },
   },
   buttonToken: {
-    backgroundColor: '#3e4252',
+    backgroundColor: palette.grey.A400,
     borderRadius: '10px',
     height: '50px',
     display: 'flex',

diff --git a/src/components/FarmLPCard/FarmLPCardDetails.tsx b/src/components/FarmLPCard/FarmLPCardDetails.tsx
@@ -60,7 +60,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
     },
   },
   buttonToken: {
-    backgroundColor: '#3e4252',
+    backgroundColor: palette.grey.A400,
     borderRadius: '10px',
     height: '50px',
     display: 'flex',

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -134,7 +134,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
     },
   },
   accountDetails: {
-    border: `solid 1px #3e4252`,
+    border: `solid 1px ${palette.grey.A400}`,
     padding: '0 16px',
     height: 36,
     cursor: 'pointer',

diff --git a/src/components/PairsTable/PairsTable.tsx b/src/components/PairsTable/PairsTable.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Box, Typography, Divider } from '@material-ui/core';
+import { Link } from 'react-router-dom';
 import { ChainId, Token } from '@uniswap/sdk';
 import { getAddress } from '@ethersproject/address';
 import { DoubleCurrencyLogo, CustomTable } from 'components';
@@ -102,12 +103,23 @@ const PairTable: React.FC<TokensTableProps> = ({ data }) => {
               <StarUnchecked />
             )}
           </Box>
-          <DoubleCurrencyLogo currency0={token0} currency1={token1} size={28} />
-          <Box ml={1}>
-            <Typography variant='body1'>
-              {token0.symbol} / {token1.symbol}
-            </Typography>
-          </Box>
+          <Link
+            to={`/analytics/pair/${pair.id}`}
+            style={{ textDecoration: 'none' }}
+          >
+            <Box display='flex' alignItems='center'>
+              <DoubleCurrencyLogo
+                currency0={token0}
+                currency1={token1}
+                size={28}
+              />
+              <Box ml={1}>
+                <Typography variant='body1' color='textPrimary'>
+                  {token0.symbol} / {token1.symbol}
+                </Typography>
+              </Box>
+            </Box>
+          </Link>
         </Box>
         <Divider />
         <Box
@@ -174,12 +186,18 @@ const PairTable: React.FC<TokensTableProps> = ({ data }) => {
     const liquidity = pair.trackedReserveUSD
       ? pair.trackedReserveUSD
       : pair.reserveUSD;
-    const oneDayVolume = pair.oneDayVolumeUSD
-      ? pair.oneDayVolumeUSD
-      : pair.oneDayVolumeUntracked;
-    const oneWeekVolume = pair.oneWeekVolumeUSD
-      ? pair.oneWeekVolumeUSD
-      : pair.oneWeekVolumeUntracked;
+    const oneDayVolume =
+      pair.oneDayVolumeUSD && !isNaN(pair.oneDayVolumeUSD)
+        ? pair.oneDayVolumeUSD
+        : pair.oneDayVolumeUntracked && !isNaN(pair.oneDayVolumeUntracked)
+        ? pair.oneDayVolumeUntracked
+        : 0;
+    const oneWeekVolume =
+      pair.oneWeekVolumeUSD && !isNaN(pair.oneWeekVolumeUSD)
+        ? pair.oneWeekVolumeUSD
+        : pair.oneWeekVolumeUntracked && !isNaN(pair.oneWeekVolumeUntracked)
+        ? pair.oneWeekVolumeUntracked
+        : 0;
     const oneDayFee = (Number(oneDayVolume) * 0.003).toLocaleString();
     return [
       {
@@ -203,16 +221,23 @@ const PairTable: React.FC<TokensTableProps> = ({ data }) => {
                 <StarUnchecked />
               )}
             </Box>
-            <DoubleCurrencyLogo
-              currency0={token0}
-              currency1={token1}
-              size={28}
-            />
-            <Box ml={1}>
-              <Typography variant='body1'>
-                {token0.symbol} / {token1.symbol}
-              </Typography>
-            </Box>
+            <Link
+              to={`/analytics/pair/${pair.id}`}
+              style={{ textDecoration: 'none' }}
+            >
+              <Box display='flex' alignItems='center'>
+                <DoubleCurrencyLogo
+                  currency0={token0}
+                  currency1={token1}
+                  size={28}
+                />
+                <Box ml={1}>
+                  <Typography variant='body1' color='textPrimary'>
+                    {token0.symbol} / {token1.symbol}
+                  </Typography>
+                </Box>
+              </Box>
+            </Link>
           </Box>
         ),
       },

diff --git a/src/components/SyrupCard/SyrupCard.tsx b/src/components/SyrupCard/SyrupCard.tsx
@@ -230,7 +230,7 @@ const SyrupCard: React.FC<{ syrup: SyrupInfo }> = ({ syrup }) => {
             <Box display='flex'>
               <Box
                 borderRadius='4px'
-                border='1px solid #3e4252'
+                border={`1px solid ${palette.grey.A400}`}
                 padding='4px 6px'
                 marginTop='6px'
                 display='flex'

diff --git a/src/components/TokensTable/TokensTable.tsx b/src/components/TokensTable/TokensTable.tsx
@@ -107,11 +107,7 @@ const TokensTable: React.FC<TokensTableProps> = ({ data }) => {
             to={`/analytics/token/${tokenCurrency.address}`}
             style={{ textDecoration: 'none' }}
           >
-            <Box
-              display='flex'
-              alignItems='center'
-              style={{ cursor: 'pointer' }}
-            >
+            <Box display='flex' alignItems='center'>
               <CurrencyLogo currency={tokenCurrency} size='28px' />
               <Box ml={1}>
                 <Typography
@@ -216,11 +212,7 @@ const TokensTable: React.FC<TokensTableProps> = ({ data }) => {
               to={`/analytics/token/${tokenCurrency.address}`}
               style={{ textDecoration: 'none' }}
             >
-              <Box
-                display='flex'
-                alignItems='center'
-                style={{ cursor: 'pointer' }}
-              >
+              <Box display='flex' alignItems='center'>
                 <CurrencyLogo currency={tokenCurrency} size='28px' />
                 <Box ml={1}>
                   <Typography