Merge pull request #256 from QuickSwap/dev

Merge dev to master

Author: sameepsi

.env

@@ -12,7 +12,7 @@ REACT_APP_TX_GRAPH_API_URL="https://api.thegraph.com/subgraphs/name/sameepsi/qui
 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"
-REACT_APP_STAKING_LIST_DEFAULT_URL="https://unpkg.com/quickswap-default-staking-list@latest/build/quickswap-default.lpfarms.json"
-REACT_APP_DUAL_STAKING_LIST_DEFAULT_URL="https://unpkg.com/quickswap-default-staking-list@latest/build/quickswap-default.dualfarms.json"
-REACT_APP_SYRUP_LIST_DEFAULT_URL="https://unpkg.com/quickswap-default-staking-list@latest/build/quickswap-default.syrups.json"
+REACT_APP_STAKING_LIST_DEFAULT_URL="https://unpkg.com/quickswap-default-staking-list-address@latest/build/quickswap-default.lpfarms.json"
+REACT_APP_DUAL_STAKING_LIST_DEFAULT_URL="https://unpkg.com/quickswap-default-staking-list-address@latest/build/quickswap-default.dualfarms.json"
+REACT_APP_SYRUP_LIST_DEFAULT_URL="https://unpkg.com/quickswap-default-staking-list-address@latest/build/quickswap-default.syrups.json"
 REACT_APP_LEGACY_APP_URL="https://legacy.quickswap.exchange"

src/components/FarmCard/FarmCardDetails.tsx

@@ -277,11 +277,13 @@ const FarmCardDetails: React.FC<{
                       ${(isLPFarm ? lpRewards : dualRewards).toLocaleString()} /
                       {t('day')}
                     </small>
+                    <br />
                     {isLPFarm ? (
                       <small>{lpPoolRate}</small>
                     ) : (
                       <>
                         <small>{dualPoolRateA}</small>
+                        <br />
                         <small>{dualPoolRateB}</small>
                       </>
                     )}
@@ -299,7 +301,7 @@ const FarmCardDetails: React.FC<{
               </>
             )}
             {!stakingInfo.ended && (
-              <Box className='buttonWrapper' mt={isMobile ? 2 : 0}>
+              <Box className='buttonWrapper'>
                 <Box className='flex justify-between'>
                   <small>{t('inwallet')}:</small>
                   <Box className='flex flex-col items-end'>

src/components/RewardSlider/RewardSlider.tsx

@@ -25,15 +25,21 @@ const RewardSlider: React.FC = () => {
   const dualrewardItems = useDualStakingInfo(defaultChainId, null, 0, 1);
   const [bulkPairs, setBulkPairs] = useState<any>(null);
 
-  const stakingPairLists = useMemo(() => {
+  const stakingPairListStr = useMemo(() => {
     return lprewardItems
       .map((item) => item.pair)
-      .concat(dualrewardItems.map((item) => item.pair));
+      .concat(dualrewardItems.map((item) => item.pair))
+      .join(',');
   }, [dualrewardItems, lprewardItems]);
 
+  const stakingPairLists = stakingPairListStr.split(',');
+
   useEffect(() => {
-    getBulkPairData(stakingPairLists).then((data) => setBulkPairs(data));
-  }, [stakingPairLists]);
+    const stakingPairLists = stakingPairListStr.split(',');
+    if (stakingPairListStr) {
+      getBulkPairData(stakingPairLists).then((data) => setBulkPairs(data));
+    }
+  }, [stakingPairListStr]);
 
   const stakingAPYs = useMemo(() => {
     if (bulkPairs && stakingPairLists.length > 0) {

src/components/SyrupCard/SyrupCardDetails.tsx

@@ -155,16 +155,16 @@ const SyrupCardDetails: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
       {syrup && (
         <>
           <Divider />
-          <Box padding={3}>
+          <Box padding={isMobile ? 2 : 3}>
             {isMobile && (
-              <Box mb={3}>
-                <Box className='flex justify-between' mb={2}>
+              <Box mb={2}>
+                <Box className='flex justify-between' mb={1.5}>
                   <small className='text-secondary'>
                     {syrup.stakingToken.symbol} {t('deposits')}:
                   </small>
                   <small>{depositAmount}</small>
                 </Box>
-                <Box className='flex justify-between' mb={2}>
+                <Box className='flex justify-between' mb={1.5}>
                   <small className='text-secondary'>{t('dailyRewards')}:</small>
                   <small>
                     {syrup.rate >= 1000000
@@ -174,10 +174,10 @@ const SyrupCardDetails: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
                     <span className='text-secondary'> / {t('day')}</span>
                   </small>
                 </Box>
-                <Box mb={2}>
+                <Box mb={1.5}>
                   <SyrupTimerLabel exactEnd={exactEnd} isEnded={syrup?.ended} />
                 </Box>
-                <Box className='flex justify-between' mb={3}>
+                <Box className='flex justify-between' mb={2}>
                   <Box className='flex items-center'>
                     <small className='text-secondary'>{t('apr')}:</small>
                     <Box ml={0.5} height={16}>
@@ -191,7 +191,7 @@ const SyrupCardDetails: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
                 <Divider />
               </Box>
             )}
-            <Box className='flex items-center justify-between' mb={1}>
+            <Box className='flex items-center justify-between' mb={1.5}>
               <small className='text-secondary'>{t('inwallet')}</small>
               <small>
                 {userLiquidityUnstaked
@@ -209,7 +209,7 @@ const SyrupCardDetails: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
                 </small>
               </small>
             </Box>
-            <Box className='flex items-center justify-between' mb={1}>
+            <Box className='flex items-center justify-between' mb={1.5}>
               <small className='text-secondary'>{t('staked')}</small>
               <small>
                 {formatTokenAmount(syrup.stakedAmount)}{' '}

src/components/SyrupCard/SyrupTimerLabel.tsx

@@ -41,7 +41,7 @@ const SyrupTimerLabel: React.FC<{ exactEnd: number; isEnded: boolean }> = ({
       {!isEnded && Number.isFinite(timeRemaining) && (
         <Box
           className={
-            isMobile ? 'flex flex-wrap items-center justify-center' : ''
+            isMobile ? 'flex flex-wrap items-center justify-between' : ''
           }
         >
           <p className={`text-secondary ${isMobile ? 'small' : 'caption'}`}>

src/components/styles/FarmCard.scss

@@ -126,7 +126,7 @@
   align-items: center;
 }
 .farmCardMobileRow {
-  margin-top: 16px;
+  margin-bottom: 16px;
   width: 100%;
   display: flex;
   justify-content: space-between;

src/components/styles/SyrupCard.scss

@@ -9,6 +9,9 @@
   & .dailyRateWrapper {
     margin-bottom: 0;
     margin-top: 16px;
+    @include media("screen", "<phone") {
+      margin-top: 6px;
+    }
   }
 }
 .syrupCardContent {