Merge pull request #245 from QuickSwap/dev

Merge dev to master

.env

@@ -8,6 +8,7 @@ REACT_APP_FORTMATIC_KEY="pk_live_F937DF033A1666BF"
 REACT_APP_MOONPAY_KEY="pk_live_72EGoobLnlgc8WB7AaxyiWu2S43dj8eY"
 REACT_APP_TRANSAK_KEY="258960cf-1e17-4419-bf7f-77443282f5da"
 REACT_APP_GRAPH_API_URL="https://api.fura.org/subgraphs/name/quickswap"
+REACT_APP_TX_GRAPH_API_URL="https://api.thegraph.com/subgraphs/name/sameepsi/quickswap03"
 REACT_APP_PRDT_URL="https://prdt-quickswap-main.pages.dev/"
 REACT_APP_SCAN_BASE_URL="https://polygonscan.com"
 REACT_APP_TOKEN_LIST_DEFAULT_URL="https://unpkg.com/quickswap-default-token-list@latest/build/quickswap-default.tokenlist.json"

package.json

@@ -101,7 +101,11 @@
     "ejs": "^3.1.7",
     "cross-fetch": "^3.1.5",
     "eventsource": "^2.0.2",
-    "protobufjs": "^6.11.3"
+    "protobufjs": "^6.11.3",
+    "shell-quote": "^1.7.3",
+    "terser": "^4.8.1",
+    "got": "^11.8.5",
+    "jpeg-js": "^0.4.4"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",

src/apollo/client.js

@@ -10,17 +10,9 @@ export const client = new ApolloClient({
   shouldBatch: true,
 });
 
-export const healthClient = new ApolloClient({
-  link: new HttpLink({
-    uri: process.env.REACT_APP_GRAPH_API_URL,
-  }),
-  cache: new InMemoryCache(),
-  shouldBatch: true,
-});
-
 export const txClient = new ApolloClient({
   link: new HttpLink({
-    uri: process.env.REACT_APP_GRAPH_API_URL,
+    uri: process.env.REACT_APP_TX_GRAPH_API_URL,
   }),
   cache: new InMemoryCache(),
   shouldBatch: true,

src/apollo/queries.ts

@@ -682,13 +682,11 @@ export const FILTERED_TRANSACTIONS = gql`
 `;
 
 export const SWAP_TRANSACTIONS = gql`
-  query($allPairs: [Bytes]!, $skip: Int!, $lastTime: Int!) {
+  query($allPairs: [Bytes]!, $lastTime: Int!) {
     swaps(
       first: 1000
       where: { pair_in: $allPairs, timestamp_gte: $lastTime }
-      skip: $skip
       orderBy: timestamp
-      orderDirection: desc
     ) {
       transaction {
         id

src/components/AddLiquidity/AddLiquidity.tsx

@@ -355,7 +355,9 @@ const AddLiquidity: React.FC<{
           </small>
         </Box>
         <Box className='swapButtonWrapper'>
-          <Button onClick={onAddLiquidity}>{t('confirmSupply')}</Button>
+          <Button fullWidth onClick={onAddLiquidity}>
+            {t('confirmSupply')}
+          </Button>
         </Box>
       </Box>
     );

src/components/CurrencyLogo/CurrencyLogo.tsx

@@ -28,7 +28,7 @@ const CurrencyLogo: React.FC<CurrencyLogoProps> = ({
 
     if (currency instanceof Token) {
       if (currency instanceof WrappedTokenInfo) {
-        return [...getTokenLogoURL(currency.address), ...uriLocations];
+        return [...uriLocations, ...getTokenLogoURL(currency.address)];
       }
 
       return getTokenLogoURL(currency.address);

src/components/RewardSlider/RewardSlider.tsx

@@ -5,12 +5,15 @@ import { useTheme } from '@material-ui/core/styles';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import { StakingInfo } from 'types';
-import { useStakingInfo, getBulkPairData } from 'state/stake/hooks';
+import {
+  useStakingInfo,
+  getBulkPairData,
+  useDualStakingInfo,
+} from 'state/stake/hooks';
 import RewardSliderItem from './RewardSliderItem';
 import { useActiveWeb3React } from 'hooks';
 import { getOneYearFee } from 'utils';
 import 'components/styles/RewardSlider.scss';
-import { useDefaultFarmList } from 'state/farms/hooks';
 import { ChainId } from '@uniswap/sdk';
 
 const RewardSlider: React.FC = () => {
@@ -19,26 +22,25 @@ const RewardSlider: React.FC = () => {
   const tabletWindowSize = useMediaQuery(theme.breakpoints.down('md'));
   const mobileWindowSize = useMediaQuery(theme.breakpoints.down('sm'));
   const defaultChainId = chainId ?? ChainId.MATIC;
-  const rewardItems = useStakingInfo(defaultChainId, null, 0, 5);
+  const lprewardItems = useStakingInfo(defaultChainId, null, 0, 2);
+  const dualrewardItems = useDualStakingInfo(defaultChainId, null, 0, 1);
   const [bulkPairs, setBulkPairs] = useState<any>(null);
-  const farms = useDefaultFarmList()[defaultChainId];
 
   const stakingPairLists = useMemo(() => {
-    return Object.values(farms)
-      .filter((item) => !item.ended)
-      .slice(0, 5)
-      .map((item) => item.pair);
-  }, [farms]);
+    return lprewardItems
+      .map((item) => item.pair)
+      .concat(dualrewardItems.map((item) => item.pair));
+  }, [dualrewardItems, lprewardItems]);
 
   useEffect(() => {
     getBulkPairData(stakingPairLists).then((data) => setBulkPairs(data));
   }, [stakingPairLists]);
 
   const stakingAPYs = useMemo(() => {
-    if (bulkPairs && rewardItems.length > 0) {
-      return rewardItems.map((info: StakingInfo) => {
-        const oneDayVolume = bulkPairs[info.pair]?.oneDayVolumeUSD;
-        const reserveUSD = bulkPairs[info.pair]?.reserveUSD;
+    if (bulkPairs && stakingPairLists.length > 0) {
+      return stakingPairLists.map((pair) => {
+        const oneDayVolume = bulkPairs[pair]?.oneDayVolumeUSD;
+        const reserveUSD = bulkPairs[pair]?.reserveUSD;
         if (oneDayVolume && reserveUSD) {
           return getOneYearFee(oneDayVolume, reserveUSD);
         } else {
@@ -48,7 +50,7 @@ const RewardSlider: React.FC = () => {
     } else {
       return [];
     }
-  }, [bulkPairs, rewardItems]);
+  }, [bulkPairs, stakingPairLists]);
 
   const rewardSliderSettings = {
     dots: false,
@@ -62,7 +64,14 @@ const RewardSlider: React.FC = () => {
 
   return (
     <Slider {...rewardSliderSettings} className='rewardsSlider'>
-      {rewardItems.map((item, index) => (
+      {lprewardItems.map((item, index) => (
+        <RewardSliderItem
+          key={index}
+          stakingAPY={stakingAPYs[index]}
+          info={item}
+        />
+      ))}
+      {dualrewardItems.map((item, index) => (
         <RewardSliderItem
           key={index}
           stakingAPY={stakingAPYs[index]}

src/components/RewardSlider/RewardSliderItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, Button } from '@material-ui/core';
 import { useHistory } from 'react-router-dom';
-import { StakingInfo } from 'types';
+import { DualStakingInfo, StakingInfo } from 'types';
 import { DoubleCurrencyLogo } from 'components';
 import { ReactComponent as HelpIcon } from 'assets/images/HelpIcon.svg';
 import {
@@ -13,7 +13,7 @@ import {
 import { useTranslation } from 'react-i18next';
 
 interface RewardSliderItemProps {
-  info: StakingInfo;
+  info: StakingInfo | DualStakingInfo;
   stakingAPY: number;
 }
 
@@ -30,7 +30,12 @@ const RewardSliderItem: React.FC<RewardSliderItemProps> = ({
     stakedAmounts?.totalStakedBase,
   );
 
-  const rewards = info.rate * info.rewardTokenPrice;
+  const lpInfo = info as StakingInfo;
+  const dualInfo = info as DualStakingInfo;
+  const lprewards = lpInfo.rate * lpInfo.rewardTokenPrice;
+  const dualrewards =
+    dualInfo.rateA * dualInfo.rewardTokenAPrice +
+    dualInfo.rateB * dualInfo.rewardTokenBPrice;
 
   let apyWithFee;
   if (stakingAPY && stakingAPY > 0) {
@@ -61,7 +66,7 @@ const RewardSliderItem: React.FC<RewardSliderItemProps> = ({
       <Box className='row'>
         <p className='text-gray22'>{t('rewards')}</p>
         <p>
-          ${rewards.toLocaleString()} / {t('day')}
+          ${(lprewards ? lprewards : dualrewards).toLocaleString()} / {t('day')}
         </p>
       </Box>
       <Box className='row'>

src/components/SwapTokenDetails/SwapTokenDetails.tsx

@@ -4,14 +4,17 @@ import Skeleton from '@material-ui/lab/Skeleton';
 import { ArrowDropUp, ArrowDropDown } from '@material-ui/icons';
 import { useTheme } from '@material-ui/core/styles';
 import { CurrencyLogo } from 'components';
-import { useBlockNumber, useTokenDetails } from 'state/application/hooks';
+import {
+  useBlockNumber,
+  useEthPrice,
+  useTokenDetails,
+} from 'state/application/hooks';
 import useCopyClipboard from 'hooks/useCopyClipboard';
 import { ReactComponent as CopyIcon } from 'assets/images/CopyIcon.svg';
 import {
   shortenAddress,
   formatCompact,
   getTokenInfo,
-  getEthPrice,
   getIntervalTokenData,
   formatNumber,
 } from 'utils';
@@ -36,9 +39,10 @@ const SwapTokenDetails: React.FC<{
   const priceUpPercent = Number(tokenData?.priceChangeUSD).toFixed(2);
   const [isCopied, setCopied] = useCopyClipboard();
   const prices = priceData ? priceData.map((price: any) => price.close) : [];
+  const { ethPrice } = useEthPrice();
 
   useEffect(() => {
-    async function fetchTokenData() {
+    (async () => {
       const tokenDetail = tokenDetails.find(
         (item) => item.address === tokenAddress,
       );
@@ -57,22 +61,26 @@ const SwapTokenDetails: React.FC<{
       );
       setPriceData(tokenPriceData);
 
-      const [newPrice, oneDayPrice] = await getEthPrice();
-      const tokenInfo = await getTokenInfo(newPrice, oneDayPrice, tokenAddress);
-      if (tokenInfo) {
-        const token0 = tokenInfo[0];
-        setTokenData(token0);
-        const tokenDetailToUpdate = {
-          address: tokenAddress,
-          tokenData: token0,
-          priceData: tokenPriceData,
-        };
-        updateTokenDetails(tokenDetailToUpdate);
+      if (ethPrice.price && ethPrice.oneDayPrice) {
+        const tokenInfo = await getTokenInfo(
+          ethPrice.price,
+          ethPrice.oneDayPrice,
+          tokenAddress,
+        );
+        if (tokenInfo) {
+          const token0 = tokenInfo[0];
+          setTokenData(token0);
+          const tokenDetailToUpdate = {
+            address: tokenAddress,
+            tokenData: token0,
+            priceData: tokenPriceData,
+          };
+          updateTokenDetails(tokenDetailToUpdate);
+        }
       }
-    }
-    fetchTokenData();
+    })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tokenAddress]);
+  }, [tokenAddress, ethPrice.price, ethPrice.oneDayPrice]);
 
   return (
     <Box>

src/components/TopMovers/TopMovers.tsx

@@ -5,32 +5,38 @@ import Skeleton from '@material-ui/lab/Skeleton';
 import { Token, ChainId } from '@uniswap/sdk';
 import { getAddress } from '@ethersproject/address';
 import { CurrencyLogo } from 'components';
-import { getEthPrice, getTopTokens, getPriceClass, formatNumber } from 'utils';
+import { getTopTokens, getPriceClass, formatNumber } from 'utils';
 import 'components/styles/TopMovers.scss';
 import { useTranslation } from 'react-i18next';
+import { useEthPrice } from 'state/application/hooks';
 
 interface TopMoversProps {
   hideArrow?: boolean;
 }
 const TopMovers: React.FC<TopMoversProps> = ({ hideArrow = false }) => {
   const { t } = useTranslation();
   const [topTokens, updateTopTokens] = useState<any[] | null>(null);
+  const { ethPrice } = useEthPrice();
 
   const topMoverTokens = useMemo(
     () => (topTokens && topTokens.length >= 5 ? topTokens.slice(0, 5) : null),
     [topTokens],
   );
 
   useEffect(() => {
-    async function fetchTopTokens() {
-      const [newPrice, oneDayPrice] = await getEthPrice();
-      const topTokensData = await getTopTokens(newPrice, oneDayPrice, 5);
-      if (topTokensData) {
-        updateTopTokens(topTokensData);
+    (async () => {
+      if (ethPrice.price && ethPrice.oneDayPrice) {
+        const topTokensData = await getTopTokens(
+          ethPrice.price,
+          ethPrice.oneDayPrice,
+          5,
+        );
+        if (topTokensData) {
+          updateTopTokens(topTokensData);
+        }
       }
-    }
-    fetchTopTokens();
-  }, [updateTopTokens]);
+    })();
+  }, [updateTopTokens, ethPrice.price, ethPrice.oneDayPrice]);
 
   return (
     <Box className='bg-palette topMoversWrapper'>

src/components/styles/Header.scss

@@ -62,6 +62,9 @@
     height: 36px;
     padding: 0 24px;
     overflow: hidden;
+    small {
+      white-space: nowrap;
+    }
     .menuItemSparkle {
       position: absolute;
       transition: all 0.5s;

src/constants/index.ts

@@ -288,7 +288,7 @@ export const GlobalValue = {
       WBTC: new Token(
         ChainId.MATIC,
         '0x1BFD67037B42Cf73acF2047067bd4F2C47D9BfD6',
-        18,
+        8,
         'wBTC',
         'Wrapped Bitcoin',
       ),