From 655d3d9939d27828d1b6c4e09bd3a5251146a538 Mon Sep 17 00:00:00 2001
From: Jiro <jkobadev811@gmail.com>
Date: Mon, 4 Nov 2024 04:16:39 -0800
Subject: [PATCH 1/8] fix analytics chart responsive issue

---
 src/components/AreaChart/AreaChart.tsx | 54 +++++++++++++-------------
 src/components/styles/AreaChart.scss   | 14 +++++++
 2 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/src/components/AreaChart/AreaChart.tsx b/src/components/AreaChart/AreaChart.tsx
index 6add2bfe2..a1fc50f82 100644
--- a/src/components/AreaChart/AreaChart.tsx
+++ b/src/components/AreaChart/AreaChart.tsx
@@ -141,34 +141,36 @@ 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 width={1}>
+      <Box mt={2.5} width={width} className='areaChartContainer'>
+        <Box className='chartContainer'>
+          <Chart
+            options={options}
+            series={series}
+            type='area'
+            width='100%'
+            height={height}
+          />
+          <Box className='categoryValues' mt={-5} gridGap={8}>
+            {categories.map((val, ind) => (
+              <p key={ind}>{val}</p>
+            ))}
+          </Box>
         </Box>
-      </Box>
-      {yAxisValues && (
-        <Box className='yAxis'>
-          {yAxisValues.map((value, index) => (
-            <p key={index}>
-              {// this is to show small numbers less than 0.0001
+        {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>
-          ))}
-        </Box>
-      )}
+                `${yAxisTicker === '$' ? yAxisTicker : ''}${
+                  value > 0.0001 ? formatCompact(value) : formatNumber(value)
+                }${yAxisTicker === '%' ? yAxisTicker : ''}`}
+              </p>
+            ))}
+          </Box>
+        )}
+      </Box>
     </Box>
   );
 };
diff --git a/src/components/styles/AreaChart.scss b/src/components/styles/AreaChart.scss
index 8182c89ee..9c3087e3f 100644
--- a/src/components/styles/AreaChart.scss
+++ b/src/components/styles/AreaChart.scss
@@ -1,5 +1,19 @@
 @use 'styles/variables' as *;
+@use "styles/breakpoints" as *;
 
+.areaChartContainer {
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  @include media('screen', '<phone') {
+    flex-direction: row-reverse;
+  }
+
+  @include media('screen', '<tablet') {
+    flex-direction: row-reverse;
+  }
+}
 .chartContainer {
   flex: 1;
   margin-top: -20px;

From 5ed422702daee383f62d674bf8b0a09422a98d3f Mon Sep 17 00:00:00 2001
From: Jiro <jkobadev811@gmail.com>
Date: Mon, 4 Nov 2024 04:54:58 -0800
Subject: [PATCH 2/8] Fix bonds mobile scroll issue

---
 src/pages/styles/bonds.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/styles/bonds.scss b/src/pages/styles/bonds.scss
index 03b343035..cc2fa68f5 100644
--- a/src/pages/styles/bonds.scss
+++ b/src/pages/styles/bonds.scss
@@ -40,7 +40,7 @@
 .bondModalWrapper {
   padding: 16px;
   max-width: 1136px;
-  overflow: visible;
+  overflow: auto;
 }
 
 .bondModalClose {

From 69e8bc71a37e6dede7cc05d912ed76fd35cb1675 Mon Sep 17 00:00:00 2001
From: Jiro <jkobadev811@gmail.com>
Date: Mon, 4 Nov 2024 06:27:46 -0800
Subject: [PATCH 3/8] Fixnig bond mobile issues for sort and connect wallet
 buttons

---
 src/pages/BondsPage/BondActions.tsx |  6 +++++-
 src/pages/BondsPage/BondsList.tsx   |  3 ++-
 src/pages/styles/bonds.scss         | 14 ++++++++++++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/pages/BondsPage/BondActions.tsx b/src/pages/BondsPage/BondActions.tsx
index ea8d151b1..20b60904f 100644
--- a/src/pages/BondsPage/BondActions.tsx
+++ b/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
diff --git a/src/pages/BondsPage/BondsList.tsx b/src/pages/BondsPage/BondsList.tsx
index 26bc45de1..9dc0c45f1 100644
--- a/src/pages/BondsPage/BondsList.tsx
+++ b/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}
diff --git a/src/pages/styles/bonds.scss b/src/pages/styles/bonds.scss
index cc2fa68f5..6f1101521 100644
--- a/src/pages/styles/bonds.scss
+++ b/src/pages/styles/bonds.scss
@@ -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%;
+  }
+}

From 3db095fc99b249ffd36ce5c9319bdb6c429dc954 Mon Sep 17 00:00:00 2001
From: Jiro <jkobadev811@gmail.com>
Date: Mon, 4 Nov 2024 23:16:15 -0800
Subject: [PATCH 4/8] Fixing analytics mobile issue

---
 src/components/AreaChart/AreaChart.tsx |  2 +-
 src/components/BarChart/BarChart.tsx   | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/AreaChart/AreaChart.tsx b/src/components/AreaChart/AreaChart.tsx
index a1fc50f82..1f880b373 100644
--- a/src/components/AreaChart/AreaChart.tsx
+++ b/src/components/AreaChart/AreaChart.tsx
@@ -151,7 +151,7 @@ const AreaChart: React.FC<AreaChartProps> = ({
             width='100%'
             height={height}
           />
-          <Box className='categoryValues' mt={-5} gridGap={8}>
+          <Box className='categoryValues' mt={-5} gridGap={2}>
             {categories.map((val, ind) => (
               <p key={ind}>{val}</p>
             ))}
diff --git a/src/components/BarChart/BarChart.tsx b/src/components/BarChart/BarChart.tsx
index 73ced2eed..7e34f3c2b 100755
--- a/src/components/BarChart/BarChart.tsx
+++ b/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'>
+      <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>
           ))}

From a17bdbde8d1a16d327d289c367a2a424a1cd1fdb Mon Sep 17 00:00:00 2001
From: Jiro <jkobadev811@gmail.com>
Date: Tue, 5 Nov 2024 04:36:00 -0800
Subject: [PATCH 5/8] update desktop view and adding gap in analytics

---
 src/components/AreaChart/AreaChart.tsx | 28 +++++++++++++-------------
 src/components/styles/AreaChart.scss   | 10 ++++-----
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/AreaChart/AreaChart.tsx b/src/components/AreaChart/AreaChart.tsx
index 1f880b373..c0dd703c2 100644
--- a/src/components/AreaChart/AreaChart.tsx
+++ b/src/components/AreaChart/AreaChart.tsx
@@ -143,20 +143,6 @@ const AreaChart: React.FC<AreaChartProps> = ({
   return (
     <Box width={1}>
       <Box mt={2.5} width={width} className='areaChartContainer'>
-        <Box className='chartContainer'>
-          <Chart
-            options={options}
-            series={series}
-            type='area'
-            width='100%'
-            height={height}
-          />
-          <Box className='categoryValues' mt={-5} gridGap={2}>
-            {categories.map((val, ind) => (
-              <p key={ind}>{val}</p>
-            ))}
-          </Box>
-        </Box>
         {yAxisValues && (
           <Box className='yAxis'>
             {yAxisValues.map((value, index) => (
@@ -170,6 +156,20 @@ const AreaChart: React.FC<AreaChartProps> = ({
             ))}
           </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>
   );
diff --git a/src/components/styles/AreaChart.scss b/src/components/styles/AreaChart.scss
index 9c3087e3f..b67d7f3d3 100644
--- a/src/components/styles/AreaChart.scss
+++ b/src/components/styles/AreaChart.scss
@@ -3,15 +3,15 @@
 
 .areaChartContainer {
   display: flex;
-  overflow-x: auto;
   overflow-y: hidden;
+  overflow-x: hidden;
 
   @include media('screen', '<phone') {
-    flex-direction: row-reverse;
+    overflow-x: auto;
   }
 
   @include media('screen', '<tablet') {
-    flex-direction: row-reverse;
+    overflow-x: auto;
   }
 }
 .chartContainer {
@@ -23,8 +23,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;

From 9bc32dec6aef150dc3abf166bf6a42e2a830899f Mon Sep 17 00:00:00 2001
From: Jiro <jkobadev811@gmail.com>
Date: Tue, 5 Nov 2024 04:55:23 -0800
Subject: [PATCH 6/8] Fixing overflow issue on desktop

---
 src/components/AreaChart/AreaChart.tsx |  7 ++++++-
 src/components/BarChart/BarChart.tsx   |  2 +-
 src/components/styles/AreaChart.scss   | 10 ++--------
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/AreaChart/AreaChart.tsx b/src/components/AreaChart/AreaChart.tsx
index c0dd703c2..c915449e1 100644
--- a/src/components/AreaChart/AreaChart.tsx
+++ b/src/components/AreaChart/AreaChart.tsx
@@ -142,7 +142,12 @@ const AreaChart: React.FC<AreaChartProps> = ({
 
   return (
     <Box width={1}>
-      <Box mt={2.5} width={width} className='areaChartContainer'>
+      <Box
+        mt={2.5}
+        width={width}
+        className='areaChartContainer'
+        paddingBottom={2}
+      >
         {yAxisValues && (
           <Box className='yAxis'>
             {yAxisValues.map((value, index) => (
diff --git a/src/components/BarChart/BarChart.tsx b/src/components/BarChart/BarChart.tsx
index 7e34f3c2b..40e8a27d6 100755
--- a/src/components/BarChart/BarChart.tsx
+++ b/src/components/BarChart/BarChart.tsx
@@ -26,7 +26,7 @@ const BarChart: React.FC<BarChartProps> = ({
       : '100%';
   console.log('areaWidth', areaWidth);
   return (
-    <Box onMouseLeave={onMouseLeave} overflow='auto'>
+    <Box onMouseLeave={onMouseLeave} overflow='auto' paddingBottom={2}>
       <Box
         className='flex items-end justify-between'
         width={`calc(${areaWidth})`}
diff --git a/src/components/styles/AreaChart.scss b/src/components/styles/AreaChart.scss
index b67d7f3d3..2c097de52 100644
--- a/src/components/styles/AreaChart.scss
+++ b/src/components/styles/AreaChart.scss
@@ -5,15 +5,9 @@
   display: flex;
   overflow-y: hidden;
   overflow-x: hidden;
-
-  @include media('screen', '<phone') {
-    overflow-x: auto;
-  }
-
-  @include media('screen', '<tablet') {
-    overflow-x: auto;
-  }
+  overflow-x: auto;
 }
+
 .chartContainer {
   flex: 1;
   margin-top: -20px;

From e33cdde39211548ccedfd6f4f3a16059b77e0fe9 Mon Sep 17 00:00:00 2001
From: Jiro <jkobadev811@gmail.com>
Date: Tue, 5 Nov 2024 06:15:04 -0800
Subject: [PATCH 7/8] fixing bridge menu issue

---
 src/components/Header/Header.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 211884dc1..0b1a2ab90 100644
--- a/src/components/Header/Header.tsx
+++ b/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',

From 5a686da354f5f8a95efc12fb3956bee206cda00e Mon Sep 17 00:00:00 2001
From: 0xoscario <0xoscario@gmail.com>
Date: Fri, 8 Nov 2024 08:21:17 -0500
Subject: [PATCH 8/8] Fix: Apr sort issue

---
 src/pages/FarmPage/V3/AllMerklFarms.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/FarmPage/V3/AllMerklFarms.tsx b/src/pages/FarmPage/V3/AllMerklFarms.tsx
index 9b46be3a9..2d59cb934 100644
--- a/src/pages/FarmPage/V3/AllMerklFarms.tsx
+++ b/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,