Dev2

src/components/AreaChart/AreaChart.tsx

@@ -141,34 +141,41 @@ const AreaChart: React.FC<AreaChartProps> = ({
   ];
 
   return (
-    <Box display='flex' mt={2.5} width={width}>
-      <Box className='chartContainer'>
-        <Chart
-          options={options}
-          series={series}
-          type='area'
-          width='100%'
-          height={height}
-        />
-        <Box className='categoryValues' mt={-5}>
-          {categories.map((val, ind) => (
-            <p key={ind}>{val}</p>
-          ))}
-        </Box>
-      </Box>
-      {yAxisValues && (
-        <Box className='yAxis'>
-          {yAxisValues.map((value, index) => (
-            <p key={index}>
-              {// this is to show small numbers less than 0.0001
+    <Box width={1}>
+      <Box
+        mt={2.5}
+        width={width}
+        className='areaChartContainer'
+        paddingBottom={2}
+      >
+        {yAxisValues && (
+          <Box className='yAxis'>
+            {yAxisValues.map((value, index) => (
+              <p key={index}>
+                {// this is to show small numbers less than 0.0001
 
-              `${yAxisTicker === '$' ? yAxisTicker : ''}${
-                value > 0.0001 ? formatCompact(value) : formatNumber(value)
-              }${yAxisTicker === '%' ? yAxisTicker : ''}`}
-            </p>
-          ))}
+                `${yAxisTicker === '$' ? yAxisTicker : ''}${
+                  value > 0.0001 ? formatCompact(value) : formatNumber(value)
+                }${yAxisTicker === '%' ? yAxisTicker : ''}`}
+              </p>
+            ))}
+          </Box>
+        )}
+        <Box className='chartContainer'>
+          <Chart
+            options={options}
+            series={series}
+            type='area'
+            width='100%'
+            height={height}
+          />
+          <Box className='categoryValues' mt={-4} gridGap={2}>
+            {categories.map((val, ind) => (
+              <p key={ind}>{val}</p>
+            ))}
+          </Box>
         </Box>
-      )}
+      </Box>
     </Box>
   );
 };

src/components/BarChart/BarChart.tsx

@@ -20,9 +20,17 @@ const BarChart: React.FC<BarChartProps> = ({
   onMouseLeave,
 }) => {
   const maxValue = Math.max(...data);
+  const areaWidth =
+    categories && categories.length > 12
+      ? 23 * categories.length + 'px'
+      : '100%';
+  console.log('areaWidth', areaWidth);
   return (
-    <Box onMouseLeave={onMouseLeave}>
-      <Box className='flex items-end justify-between'>
+    <Box onMouseLeave={onMouseLeave} overflow='auto' paddingBottom={2}>
+      <Box
+        className='flex items-end justify-between'
+        width={`calc(${areaWidth})`}
+      >
         {data.map((value, index) => (
           <Box
             key={index}
@@ -34,7 +42,7 @@ const BarChart: React.FC<BarChartProps> = ({
         ))}
       </Box>
       {categories && data.length > 0 && (
-        <Box className={`categoryValues`} mt={2}>
+        <Box className={`categoryValues`} mt={2} gridGap={2}>
           {categories.map((val, ind) => (
             <p key={ind}>{val}</p>
           ))}

src/components/Header/Header.tsx

@@ -259,11 +259,14 @@ const Header: React.FC<{ onUpdateNewsletter: (val: boolean) => void }> = ({
       id: 'dragons-page-link',
     });
   }
-  menuItems.push({
-    link: '/bridge',
-    text: t('Bridge'),
-    id: 'bridge-page-link',
-  });
+
+  if (isSupportedNetwork)
+    menuItems.push({
+      link: '/bridge',
+      text: t('Bridge'),
+      id: 'bridge-page-link',
+    });
+
   if (showGamingHub) {
     menuItems.push({
       link: '/gamehub',

src/components/styles/AreaChart.scss

@@ -1,4 +1,12 @@
 @use 'styles/variables' as *;
+@use "styles/breakpoints" as *;
+
+.areaChartContainer {
+  display: flex;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  overflow-x: auto;
+}
 
 .chartContainer {
   flex: 1;
@@ -9,8 +17,8 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  margin-left: 8px;
-  margin-bottom: 20px;
+  margin-right: 8px;
+  margin-bottom: 32px;
   & p {
     font-size: 10px;
     font-weight: 500;

src/pages/BondsPage/BondActions.tsx

@@ -33,7 +33,11 @@ const BondActions: React.FC<BondActionsProps> = ({
   const getBillActionButton = () => {
     switch (true) {
       case !account:
-        return <Button onClick={connectWallet}>{t('connectWallet')}</Button>;
+        return (
+          <Button className='bondConnectWalletBtn' onClick={connectWallet}>
+            {t('connectWallet')}
+          </Button>
+        );
       case purchasePath === PurchasePath.LpPurchase:
         return (
           <LPPath

src/pages/BondsPage/BondsList.tsx

@@ -11,6 +11,7 @@ import { useActiveWeb3React } from 'hooks';
 import { formatUnits } from 'ethers/lib/utils';
 import { BigNumber } from 'ethers';
 import { SortColumns } from 'components';
+import 'pages/styles/bonds.scss';
 
 interface BondsListProps {
   search: string;
@@ -229,7 +230,7 @@ const BondsList: React.FC<BondsListProps> = ({ search }) => {
   return (
     <Box pb={2} px={3}>
       {showSort && (
-        <Box padding='10px 16px'>
+        <Box padding='10px 16px' className='sortBondList'>
           <SortColumns
             sortColumns={sortByDesktopItems}
             selectedSort={sortBy}

src/pages/FarmPage/V3/AllMerklFarms.tsx

@@ -162,7 +162,10 @@ const AllMerklFarms: React.FC<Props> = ({
 
   const v3Farms = farms
     .map((item: any) => {
-      const apr = item.meanAPR;
+      // const apr = item.meanAPR;
+      const apr = Math.max(
+        ...item.alm.map((item_farm) => item_farm.poolAPR + item_farm.almAPR),
+      );
       const title = (item.symbolToken0 ?? '') + (item.symbolToken1 ?? '');
       // const rewardItems: any[] = (item?.distributionData ?? []).filter(
       //   (reward: any) => reward.isLive && !reward.isMock,

src/pages/styles/bonds.scss

@@ -40,7 +40,7 @@
 .bondModalWrapper {
   padding: 16px;
   max-width: 1136px;
-  overflow: visible;
+  overflow: auto;
 }
 
 .bondModalClose {
@@ -247,3 +247,17 @@
     border-radius: 12px;
   }
 }
+
+.sortBondList {
+  @include media('screen', '<phone') {
+    display: none;
+  }
+}
+
+.bondConnectWalletBtn {
+  border-radius: 10px;
+  margin-top: 15px;
+  @include media('screen', '<phone') {
+    width: 100%;
+  }
+}