From 41bccf35aeb418d3b2d78d3e0bfeabb15afbb3e7 Mon Sep 17 00:00:00 2001
From: toniocodo <antoine@originprotocol.com>
Date: Fri, 29 Sep 2023 18:10:57 +0200
Subject: [PATCH 01/14] fix: ens name in AccountLabel, check amount on update

---
 libs/oeth/swap/src/hooks.ts                          |  6 ++++--
 .../providers/src/wagmi/components/AddressLabel.tsx  | 12 ++++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/libs/oeth/swap/src/hooks.ts b/libs/oeth/swap/src/hooks.ts
index 2508f7ac7..97287999e 100644
--- a/libs/oeth/swap/src/hooks.ts
+++ b/libs/oeth/swap/src/hooks.ts
@@ -22,8 +22,10 @@ export const useHandleAmountInChange = () => {
     (amount: bigint) => {
       setSwapState(
         produce((state) => {
-          state.amountIn = amount;
-          state.isSwapRoutesLoading = amount !== 0n;
+          if (state.amountIn !== amount) {
+            state.amountIn = amount;
+            state.isSwapRoutesLoading = amount !== 0n;
+          }
         }),
       );
     },
diff --git a/libs/shared/providers/src/wagmi/components/AddressLabel.tsx b/libs/shared/providers/src/wagmi/components/AddressLabel.tsx
index 05d0c79b3..26900dd47 100644
--- a/libs/shared/providers/src/wagmi/components/AddressLabel.tsx
+++ b/libs/shared/providers/src/wagmi/components/AddressLabel.tsx
@@ -26,12 +26,6 @@ export const AddressLabel = ({
     chainId: mainnet.id,
   });
 
-  if (short) {
-    return (
-      <MiddleTruncated {...rest}>{middleTruncate(address)}</MiddleTruncated>
-    );
-  }
-
   if (enableEnsName) {
     return isEnsNameLoading ? (
       <Skeleton sx={{ minWidth: 100, ...rest?.sx }} />
@@ -42,5 +36,11 @@ export const AddressLabel = ({
     );
   }
 
+  if (short) {
+    return (
+      <MiddleTruncated {...rest}>{middleTruncate(address)}</MiddleTruncated>
+    );
+  }
+
   return <MiddleTruncated textProps={{ ...rest }}>{address}</MiddleTruncated>;
 };

From 62696a086cc2ab4a67f380258e66b7111703ba42 Mon Sep 17 00:00:00 2001
From: toniocodo <antoine@originprotocol.com>
Date: Sat, 30 Sep 2023 00:41:41 +0200
Subject: [PATCH 02/14] fix: account for short and ens name

---
 .../src/wagmi/components/AddressLabel.tsx     | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/libs/shared/providers/src/wagmi/components/AddressLabel.tsx b/libs/shared/providers/src/wagmi/components/AddressLabel.tsx
index 26900dd47..4d7046f16 100644
--- a/libs/shared/providers/src/wagmi/components/AddressLabel.tsx
+++ b/libs/shared/providers/src/wagmi/components/AddressLabel.tsx
@@ -1,6 +1,6 @@
 import { Skeleton } from '@mui/material';
 import { MiddleTruncated } from '@origin/shared/components';
-import { middleTruncate } from '@origin/shared/utils';
+import { isNilOrEmpty, middleTruncate } from '@origin/shared/utils';
 import { mainnet, useEnsName } from 'wagmi';
 
 import type { MiddleTruncatedProps } from '@origin/shared/components';
@@ -26,21 +26,16 @@ export const AddressLabel = ({
     chainId: mainnet.id,
   });
 
-  if (enableEnsName) {
-    return isEnsNameLoading ? (
-      <Skeleton sx={{ minWidth: 100, ...rest?.sx }} />
-    ) : (
-      <MiddleTruncated textProps={{ ...rest }}>
-        {ensName ?? address}
-      </MiddleTruncated>
-    );
-  }
+  const label =
+    enableEnsName && !isNilOrEmpty(ensName)
+      ? ensName
+      : short
+      ? middleTruncate(address)
+      : address;
 
-  if (short) {
-    return (
-      <MiddleTruncated {...rest}>{middleTruncate(address)}</MiddleTruncated>
-    );
+  if (enableEnsName && isEnsNameLoading) {
+    return <Skeleton sx={{ minWidth: 100, ...rest?.sx }} />;
   }
 
-  return <MiddleTruncated textProps={{ ...rest }}>{address}</MiddleTruncated>;
+  return <MiddleTruncated textProps={{ ...rest }}>{label}</MiddleTruncated>;
 };

From 9122f4f14f516300051a057b3a1ae3fba830eb93 Mon Sep 17 00:00:00 2001
From: toniocodo <antoine@originprotocol.com>
Date: Sat, 30 Sep 2023 21:48:59 +0200
Subject: [PATCH 03/14] fix: swap card styles, topnav padding block

---
 apps/oeth/src/App.tsx                         |   6 +-
 apps/oeth/src/components/Topnav.tsx           | 312 +++++++++---------
 libs/oeth/swap/src/components/BestRoutes.tsx  |   2 +-
 .../swap/src/components/SwapRouteCard.tsx     | 204 ++++++------
 4 files changed, 260 insertions(+), 264 deletions(-)

diff --git a/apps/oeth/src/App.tsx b/apps/oeth/src/App.tsx
index e6f6fbea7..04f67ea27 100644
--- a/apps/oeth/src/App.tsx
+++ b/apps/oeth/src/App.tsx
@@ -11,12 +11,8 @@ export const App = () => {
         <Topnav />
         <Container
           sx={{
-            mt: { xs: 3.25, md: 3 },
+            mt: 3,
             mb: 10,
-            pt: (theme) => ({
-              xs: '112px',
-              md: `${theme.mixins.toolbar.height}px`,
-            }),
           }}
           maxWidth="sm"
         >
diff --git a/apps/oeth/src/components/Topnav.tsx b/apps/oeth/src/components/Topnav.tsx
index 035e03fae..703d55a8f 100644
--- a/apps/oeth/src/components/Topnav.tsx
+++ b/apps/oeth/src/components/Topnav.tsx
@@ -31,177 +31,187 @@ export function Topnav(props: BoxProps) {
     useState<HTMLButtonElement | null>(null);
 
   return (
-    <Box
-      component="nav"
-      {...props}
-      sx={(theme) => ({
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: 1,
-        zIndex: theme.zIndex.appBar,
-        backgroundColor: alpha(theme.palette.background.default, 0.6),
-        backdropFilter: 'blur(15px)',
-        height: {
-          xs: '112px',
-          md: `${theme.mixins.toolbar.height}px`,
-        },
-        display: 'grid',
-        borderBottom: {
-          xs: 'none',
-          md: `1px solid ${theme.palette.background.paper}`,
-        },
-        columnGap: { xs: 1, md: 10 },
-        rowGap: { xs: 0, md: 10 },
-        alignItems: 'center',
-        px: {
-          xs: 1.5,
-          md: 3,
-        },
-        pt: {
-          xs: 1.5,
-          md: 0,
-        },
-        gridTemplateColumns: {
-          xs: '1fr 1fr',
-          md: 'auto 1fr auto',
-        },
-      })}
-    >
+    <>
       <Box
-        component={Link}
-        to="/"
+        sx={{
+          height: (theme) => ({
+            xs: '112px',
+            md: `${theme.mixins.toolbar.height}px`,
+          }),
+        }}
+      />
+      <Box
+        component="nav"
+        {...props}
         sx={(theme) => ({
-          '& img': {
-            maxHeight: {
-              xs: '1rem',
-              md: '1.5rem',
-            },
-            maxWidth: {
-              xs: theme.typography.pxToRem(100),
-              sm: theme.typography.pxToRem(120),
-              md: theme.typography.pxToRem(180),
-            },
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: 1,
+          zIndex: theme.zIndex.appBar,
+          backgroundColor: alpha(theme.palette.background.default, 0.6),
+          backdropFilter: 'blur(15px)',
+          height: {
+            xs: '112px',
+            md: `${theme.mixins.toolbar.height}px`,
           },
-        })}
-      >
-        <img src="/images/origin-ether-logo.svg" alt="Origin logo" />
-      </Box>
-      <Tabs
-        value={location.pathname}
-        onChange={(_, value) => {
-          navigate(value);
-        }}
-        sx={{
-          order: {
-            xs: 2,
-            md: 0,
+          display: 'grid',
+          borderBottom: {
+            xs: 'none',
+            md: `1px solid ${theme.palette.background.paper}`,
           },
-          gridColumn: {
-            xs: 'span 2',
-            md: 'span 1',
+          columnGap: { xs: 1, md: 10 },
+          rowGap: { xs: 0, md: 10 },
+          alignItems: 'center',
+          px: {
+            xs: 1.5,
+            md: 3,
           },
-          marginBlockStart: {
-            xs: 2,
+          pt: {
+            xs: 1.5,
             md: 0,
           },
-          '& .MuiTabs-flexContainer': {
-            justifyContent: {
-              xs: 'center',
-              md: 'flex-start',
-            },
+          gridTemplateColumns: {
+            xs: '1fr 1fr',
+            md: 'auto 1fr auto',
           },
-        }}
-      >
-        {routes[0].children.map((route) => (
-          <Tab
-            key={route?.path ?? '/'}
-            value={route?.path ?? '/'}
-            label={intl.formatMessage(route.handle.label)}
-          />
-        ))}
-      </Tabs>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'flex-end',
-          alignItems: 'center',
-          gap: { xs: 1, md: 2 },
-        }}
+        })}
       >
-        <MuiLink
-          href="https://oeth.on.fleek.co/"
-          target="_blank"
-          noWrap
+        <Box
+          component={Link}
+          to="/"
+          sx={(theme) => ({
+            '& img': {
+              maxHeight: {
+                xs: '1rem',
+                md: '1.5rem',
+              },
+              maxWidth: {
+                xs: theme.typography.pxToRem(100),
+                sm: theme.typography.pxToRem(120),
+                md: theme.typography.pxToRem(180),
+              },
+            },
+          })}
+        >
+          <img src="/images/origin-ether-logo.svg" alt="Origin logo" />
+        </Box>
+        <Tabs
+          value={location.pathname}
+          onChange={(_, value) => {
+            navigate(value);
+          }}
           sx={{
-            borderRadius: 25,
-            paddingX: {
-              md: 3,
+            order: {
               xs: 2,
+              md: 0,
             },
-            paddingY: {
-              md: 1,
-              xs: 0.75,
+            gridColumn: {
+              xs: 'span 2',
+              md: 'span 1',
             },
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontWeight: 500,
-            minHeight: { xs: 36, md: 44 },
-            background: `linear-gradient(0deg, ${alpha(
-              theme.palette.common.white,
-              0.05,
-            )} 0%, ${alpha(theme.palette.common.white, 0.05)} 100%), ${
-              theme.palette.background.paper
-            };`,
-            '&:hover': {
-              background: (theme) => theme.palette.background.paper,
+            marginBlockStart: {
+              xs: 2,
+              md: 0,
+            },
+            '& .MuiTabs-flexContainer': {
+              justifyContent: {
+                xs: 'center',
+                md: 'flex-start',
+              },
             },
           }}
         >
-          {isMd
-            ? intl.formatMessage({ defaultMessage: 'IPFS' })
-            : intl.formatMessage({ defaultMessage: 'View on IPFS' })}
-        </MuiLink>
-        <OpenAccountModalButton
-          onClick={(e) => {
-            if (isConnected) {
-              setAccountModalAnchor(e.currentTarget);
-            }
+          {routes[0].children.map((route) => (
+            <Tab
+              key={route?.path ?? '/'}
+              value={route?.path ?? '/'}
+              label={intl.formatMessage(route.handle.label)}
+            />
+          ))}
+        </Tabs>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            gap: { xs: 1, md: 2 },
           }}
+        >
+          <MuiLink
+            href="https://oeth.on.fleek.co/"
+            target="_blank"
+            noWrap
+            sx={{
+              borderRadius: 25,
+              paddingX: {
+                md: 3,
+                xs: 2,
+              },
+              paddingY: {
+                md: 1,
+                xs: 0.75,
+              },
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontWeight: 500,
+              minHeight: { xs: 36, md: 44 },
+              background: `linear-gradient(0deg, ${alpha(
+                theme.palette.common.white,
+                0.05,
+              )} 0%, ${alpha(theme.palette.common.white, 0.05)} 100%), ${
+                theme.palette.background.paper
+              };`,
+              '&:hover': {
+                background: (theme) => theme.palette.background.paper,
+              },
+            }}
+          >
+            {isMd
+              ? intl.formatMessage({ defaultMessage: 'IPFS' })
+              : intl.formatMessage({ defaultMessage: 'View on IPFS' })}
+          </MuiLink>
+          <OpenAccountModalButton
+            onClick={(e) => {
+              if (isConnected) {
+                setAccountModalAnchor(e.currentTarget);
+              }
+            }}
+            sx={{
+              borderRadius: 25,
+              paddingX: {
+                md: 3,
+                xs: 2,
+              },
+              paddingY: {
+                md: 1,
+                xs: 0.75,
+              },
+              minWidth: 36,
+              maxWidth: { xs: isConnected ? 36 : 160, sm: 160, lg: 220 },
+              fontWeight: 500,
+              minHeight: { xs: 36, md: 44 },
+            }}
+          />
+          <AccountPopover
+            anchor={accountModalAnchor}
+            setAnchor={setAccountModalAnchor}
+          />
+        </Box>
+        <Divider
           sx={{
-            borderRadius: 25,
-            paddingX: {
-              md: 3,
-              xs: 2,
-            },
-            paddingY: {
-              md: 1,
-              xs: 0.75,
-            },
-            minWidth: 36,
-            maxWidth: { xs: isConnected ? 36 : 160, sm: 160, lg: 220 },
-            fontWeight: 500,
-            minHeight: { xs: 36, md: 44 },
+            display: { xs: 'block', md: 'none' },
+            gridColumn: 'span 2',
+            gridRowStart: 1,
+            borderColor: (theme) => theme.palette.background.paper,
+            position: 'relative',
+            width: 'calc(100% + 1.5rem)',
+            bottom: '-3rem',
+            left: '-0.75rem',
           }}
         />
-        <AccountPopover
-          anchor={accountModalAnchor}
-          setAnchor={setAccountModalAnchor}
-        />
       </Box>
-      <Divider
-        sx={{
-          display: { xs: 'block', md: 'none' },
-          gridColumn: 'span 2',
-          gridRowStart: 1,
-          borderColor: (theme) => theme.palette.background.paper,
-          position: 'relative',
-          width: 'calc(100% + 1.5rem)',
-          bottom: '-3rem',
-          left: '-0.75rem',
-        }}
-      />
-    </Box>
+    </>
   );
 }
diff --git a/libs/oeth/swap/src/components/BestRoutes.tsx b/libs/oeth/swap/src/components/BestRoutes.tsx
index 9ca8a76d3..8de1bc56e 100644
--- a/libs/oeth/swap/src/components/BestRoutes.tsx
+++ b/libs/oeth/swap/src/components/BestRoutes.tsx
@@ -17,7 +17,7 @@ export function BestRoutes(props: Grid2Props) {
   return (
     <Grid2 spacing={1} {...props} container>
       {swapRoutes.slice(0, 2).map((route, index) => (
-        <Grid2 key={route.action} xs={12} sm={6}>
+        <Grid2 key={route.action} xs={6}>
           <SwapRouteCard
             key={`bestRoute-${index}`}
             isSelected={routeEq(selectedSwapRoute, route)}
diff --git a/libs/oeth/swap/src/components/SwapRouteCard.tsx b/libs/oeth/swap/src/components/SwapRouteCard.tsx
index 04310e9df..2a18ee9d0 100644
--- a/libs/oeth/swap/src/components/SwapRouteCard.tsx
+++ b/libs/oeth/swap/src/components/SwapRouteCard.tsx
@@ -1,12 +1,4 @@
-import {
-  alpha,
-  Box,
-  Card,
-  CardHeader,
-  Skeleton,
-  Stack,
-  Typography,
-} from '@mui/material';
+import { alpha, Box, Card, Skeleton, Stack, Typography } from '@mui/material';
 import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
 import { tokens } from '@origin/shared/contracts';
 import { useGasPrice, usePrices } from '@origin/shared/providers';
@@ -68,13 +60,12 @@ export function SwapRouteCard({
     <Card
       {...rest}
       sx={{
-        paddingInline: 1.5,
-        paddingBlockEnd: 2,
-        paddingBlockStart: 3,
-        boxShadow: 'none',
+        px: 1.5,
+        pb: 2,
+        pt: 3,
         cursor: 'pointer',
-        border: (theme) => `1px solid ${theme.palette.grey[800]}`,
-        borderRadius: 1,
+        border: `1px solid transparent`,
+        position: 'relative',
         height: 1,
         ...(isSelected
           ? {
@@ -100,110 +91,109 @@ export function SwapRouteCard({
         ...rest?.sx,
       }}
       role="button"
-      onClick={() => onSelect(route)}
+      onClick={() => {
+        onSelect(route);
+      }}
     >
-      <CardHeader
-        sx={{
-          padding: 0,
-          borderBottom: 'none',
-        }}
-        title={
-          <Grid2 container spacing={0.5} position="relative">
-            <Grid2 display="flex" alignItems="center">
+      {isBest && (
+        <Box
+          sx={{
+            position: 'absolute',
+            borderBottomLeftRadius: (theme) => theme.shape.borderRadius,
+            background: (theme) => theme.palette.background.gradient1,
+            fontSize: 12,
+            top: 0,
+            right: 0,
+            px: 1,
+            pt: 0.25,
+          }}
+        >
+          {intl.formatMessage({ defaultMessage: 'Best' })}
+        </Box>
+      )}
+      <Stack height={1}>
+        <Grid2 container spacing={0.5}>
+          <Grid2 display="flex" alignItems="center">
+            {isLoading ? (
+              <Skeleton variant="circular" width={16} height={16} />
+            ) : (
+              <Box
+                component="img"
+                src={tokens.mainnet.OETH.icon}
+                height={16}
+                width={16}
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+              />
+            )}
+          </Grid2>
+          <Grid2 display="flex" alignItems="center">
+            <Typography fontWeight={500}>
               {isLoading ? (
-                <Skeleton variant="circular" width={16} height={16} />
+                <Skeleton width={100} />
               ) : (
-                <Box
-                  component="img"
-                  src={tokens.mainnet.OETH.icon}
-                  height={16}
-                  width={16}
-                  display="flex"
-                  alignItems="center"
-                  justifyContent="center"
-                />
+                formatAmount(route.estimatedAmount, route.tokenOut.decimals)
               )}
-            </Grid2>
-            <Grid2 display="flex" alignItems="center">
-              <Typography fontWeight={500}>
+            </Typography>
+          </Grid2>
+          <Grid2 display="flex" alignItems="center" xs={12} sm="auto">
+            <Typography color="text.secondary" variant="body2" noWrap>
+              {isLoading ? (
+                <Skeleton width={60} />
+              ) : (
+                `(${intl.formatNumber(convertedAmount, currencyFormat)})`
+              )}
+            </Typography>
+          </Grid2>
+        </Grid2>
+        <Stack justifyContent="space-between" height={1}>
+          <Typography
+            fontWeight={500}
+            sx={{ fontSize: 12, marginBlock: { xs: 1.5, md: 1 } }}
+          >
+            {isLoading ? (
+              <Skeleton width={80} />
+            ) : (
+              intl.formatMessage(routeActionLabel[route.action])
+            )}
+          </Typography>
+          <Stack gap={0.5}>
+            <Stack
+              direction="row"
+              gap={1}
+              alignItems="center"
+              justifyContent="space-between"
+            >
+              <Typography variant="body2" color="text.secondary">
+                {intl.formatMessage({ defaultMessage: 'Rate:' })}
+              </Typography>
+              <Typography variant="body2" fontWeight={500}>
                 {isLoading ? (
-                  <Skeleton width={100} />
+                  <Skeleton width={60} />
                 ) : (
-                  formatAmount(route.estimatedAmount, route.tokenOut.decimals)
+                  `1:${intl.formatNumber(route.rate, quantityFormat)}`
                 )}
               </Typography>
-            </Grid2>
-            <Grid2 display="flex" alignItems="center">
-              <Typography color="text.secondary" variant="body2" noWrap>
-                {isLoading ? (
+            </Stack>
+            <Stack
+              direction="row"
+              gap={1}
+              alignItems="center"
+              justifyContent="space-between"
+            >
+              <Typography variant="body2" color="text.secondary">
+                {intl.formatMessage({ defaultMessage: 'Gas:' })}
+              </Typography>
+              <Typography variant="body2" fontWeight={500}>
+                {isGasLoading ? (
                   <Skeleton width={60} />
                 ) : (
-                  `(${intl.formatNumber(convertedAmount, currencyFormat)})`
+                  `~${intl.formatNumber(gasPrice, currencyFormat)}`
                 )}
               </Typography>
-            </Grid2>
-
-            {isBest && (
-              <Box
-                sx={{
-                  position: 'absolute',
-                  borderBottomLeftRadius: (theme) => theme.shape.borderRadius,
-                  background: (theme) => theme.palette.background.gradient1,
-                  fontSize: 12,
-                  top: (theme) => theme.spacing(-3),
-                  right: (theme) => theme.spacing(-1.25),
-                  px: 1,
-                  pt: 0.25,
-                }}
-              >
-                {intl.formatMessage({ defaultMessage: 'Best' })}
-              </Box>
-            )}
-          </Grid2>
-        }
-      ></CardHeader>
-
-      <Typography fontWeight={500} sx={{ marginBlock: { xs: 1.5, md: 1 } }}>
-        {isLoading ? (
-          <Skeleton width={80} />
-        ) : (
-          intl.formatMessage(routeActionLabel[route.action])
-        )}
-      </Typography>
-      <Stack gap={0.5}>
-        <Stack
-          direction="row"
-          gap={1}
-          alignItems="center"
-          justifyContent="space-between"
-        >
-          <Typography variant="body2" color="text.secondary">
-            {intl.formatMessage({ defaultMessage: 'Rate:' })}
-          </Typography>
-          <Typography variant="body2" fontWeight={500}>
-            {isLoading ? (
-              <Skeleton width={60} />
-            ) : (
-              `1:${intl.formatNumber(route.rate, quantityFormat)}`
-            )}
-          </Typography>
-        </Stack>
-        <Stack
-          direction="row"
-          gap={1}
-          alignItems="center"
-          justifyContent="space-between"
-        >
-          <Typography variant="body2" color="text.secondary">
-            {intl.formatMessage({ defaultMessage: 'Gas:' })}
-          </Typography>
-          <Typography variant="body2" fontWeight={500}>
-            {isGasLoading ? (
-              <Skeleton width={60} />
-            ) : (
-              `~${intl.formatNumber(gasPrice, currencyFormat)}`
-            )}
-          </Typography>
+            </Stack>
+          </Stack>
         </Stack>
       </Stack>
     </Card>

From c41d592fc0db85ba0be356bb66f0dc354638f396 Mon Sep 17 00:00:00 2001
From: toniocodo <antoine@originprotocol.com>
Date: Sat, 30 Sep 2023 21:55:52 +0200
Subject: [PATCH 04/14] fix: table footer and geo fence modal paddings

---
 libs/oeth/history/src/components/HistoryTable.tsx           | 6 ++----
 .../providers/src/geoFence/components/GeoFenceProvider.tsx  | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/libs/oeth/history/src/components/HistoryTable.tsx b/libs/oeth/history/src/components/HistoryTable.tsx
index 53c8008ea..b3357bcf6 100644
--- a/libs/oeth/history/src/components/HistoryTable.tsx
+++ b/libs/oeth/history/src/components/HistoryTable.tsx
@@ -119,9 +119,7 @@ export function HistoryTable({
 
   return (
     <Stack>
-      <Table
-        sx={{ '& .MuiTableCell-root': { paddingInline: { xs: 2, md: 3 } } }}
-      >
+      <Table sx={{ '& .MuiTableCell-root': { px: { xs: 2, md: 3 } } }}>
         <TableHead>
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow
@@ -182,7 +180,7 @@ export function HistoryTable({
         alignItems="baseline"
         justifyContent="flex-end"
         gap={1}
-        sx={{ px: 3, py: 2 }}
+        sx={{ px: { xs: 2, md: 3 }, py: 2 }}
       >
         <HistoryFilterButton
           disabled={!hasPreviousPage}
diff --git a/libs/shared/providers/src/geoFence/components/GeoFenceProvider.tsx b/libs/shared/providers/src/geoFence/components/GeoFenceProvider.tsx
index b3ca518aa..8f0809559 100644
--- a/libs/shared/providers/src/geoFence/components/GeoFenceProvider.tsx
+++ b/libs/shared/providers/src/geoFence/components/GeoFenceProvider.tsx
@@ -92,7 +92,7 @@ export const GeoFenceProvider = ({ children }: GeoFenceProviderProps) => {
             sx={{ pl: 0.2 }}
           />
         </DialogContent>
-        <DialogActions sx={{ gap: 3, px: 3, pb: 3 }}>
+        <DialogActions sx={{ gap: 3, px: 3, pt: { xs: 2, sm: 0 }, pb: 3 }}>
           <Button
             href="https://oeth.com"
             variant="action"

From f8c64185bddff20a769cf6581e6d39712af59807 Mon Sep 17 00:00:00 2001
From: toniocodo <antoine@originprotocol.com>
Date: Sun, 1 Oct 2023 10:54:04 +0200
Subject: [PATCH 05/14] feat: move slippage to local storage

---
 libs/oeth/redeem/src/hooks.tsx              | 19 ++-------
 libs/oeth/redeem/src/types.ts               |  1 -
 libs/oeth/redeem/src/views/RedeemView.tsx   | 22 ++++++-----
 libs/oeth/swap/src/hooks.ts                 | 44 ++++++---------------
 libs/oeth/swap/src/types.ts                 |  1 -
 libs/oeth/swap/src/views/SwapView.tsx       | 14 +++++--
 libs/shared/providers/src/index.ts          |  1 +
 libs/shared/providers/src/slippage/index.ts |  7 ++++
 8 files changed, 46 insertions(+), 63 deletions(-)
 create mode 100644 libs/shared/providers/src/slippage/index.ts

diff --git a/libs/oeth/redeem/src/hooks.tsx b/libs/oeth/redeem/src/hooks.tsx
index 1e8b8cd90..58ff0c4e7 100644
--- a/libs/oeth/redeem/src/hooks.tsx
+++ b/libs/oeth/redeem/src/hooks.tsx
@@ -4,6 +4,7 @@ import { contracts } from '@origin/shared/contracts';
 import {
   BlockExplorerLink,
   usePushNotification,
+  useSlippage,
 } from '@origin/shared/providers';
 import { isNilOrEmpty } from '@origin/shared/utils';
 import {
@@ -35,26 +36,12 @@ export const useHandleAmountInChange = () => {
   );
 };
 
-export const useHandleSlippageChange = () => {
-  const [, setRedeemState] = useRedeemState();
-
-  return useCallback(
-    (value: number) => {
-      setRedeemState(
-        produce((state) => {
-          state.slippage = value;
-        }),
-      );
-    },
-    [setRedeemState],
-  );
-};
-
 export const useHandleRedeem = () => {
   const intl = useIntl();
+  const { value: slippage } = useSlippage();
   const pushNotification = usePushNotification();
   const { address } = useAccount();
-  const [{ amountIn, amountOut, slippage }, setRedeemState] = useRedeemState();
+  const [{ amountIn, amountOut }, setRedeemState] = useRedeemState();
   const wagmiClient = useQueryClient();
 
   return useCallback(async () => {
diff --git a/libs/oeth/redeem/src/types.ts b/libs/oeth/redeem/src/types.ts
index 415f58999..6a50aca6c 100644
--- a/libs/oeth/redeem/src/types.ts
+++ b/libs/oeth/redeem/src/types.ts
@@ -11,7 +11,6 @@ export type RedeemState = {
   split: RedeemEstimate[];
   gas: bigint;
   rate: number;
-  slippage: number;
   isEstimateLoading: boolean;
   isRedeemLoading: boolean;
 };
diff --git a/libs/oeth/redeem/src/views/RedeemView.tsx b/libs/oeth/redeem/src/views/RedeemView.tsx
index 159d12084..cc40b95f7 100644
--- a/libs/oeth/redeem/src/views/RedeemView.tsx
+++ b/libs/oeth/redeem/src/views/RedeemView.tsx
@@ -11,17 +11,17 @@ import {
 import { GasPopover } from '@origin/oeth/shared';
 import { TokenInput } from '@origin/shared/components';
 import { tokens } from '@origin/shared/contracts';
-import { ConnectedButton, usePrices } from '@origin/shared/providers';
+import {
+  ConnectedButton,
+  usePrices,
+  useSlippage,
+} from '@origin/shared/providers';
 import { composeContexts } from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
 import { useAccount, useBalance } from 'wagmi';
 
 import { RedeemRoute } from '../components/RedeemRoute';
-import {
-  useHandleAmountInChange,
-  useHandleRedeem,
-  useHandleSlippageChange,
-} from '../hooks';
+import { useHandleAmountInChange, useHandleRedeem } from '../hooks';
 import { RedeemProvider, useRedeemState } from '../state';
 
 import type { BoxProps } from '@mui/material';
@@ -55,9 +55,9 @@ export const RedeemView = () =>
 
 function RedeemViewWrapped() {
   const intl = useIntl();
+  const { value: slippage, set: setSlippage } = useSlippage();
   const { address, isConnected } = useAccount();
-  const [{ amountIn, slippage, isRedeemLoading, isEstimateLoading }] =
-    useRedeemState();
+  const [{ amountIn, isRedeemLoading, isEstimateLoading }] = useRedeemState();
   const { data: prices, isLoading: isPricesLoading } = usePrices();
   const { data: balOeth, isLoading: isBalOethLoading } = useBalance({
     address,
@@ -65,10 +65,14 @@ function RedeemViewWrapped() {
     watch: true,
     scopeKey: 'redeem_balance',
   });
-  const handleSlippageChange = useHandleSlippageChange();
+
   const handleAmountInChange = useHandleAmountInChange();
   const handleRedeem = useHandleRedeem();
 
+  const handleSlippageChange = (val: number) => {
+    setSlippage(val);
+  };
+
   const redeemButtonLabel =
     amountIn === 0n
       ? intl.formatMessage({ defaultMessage: 'Enter an amount' })
diff --git a/libs/oeth/swap/src/hooks.ts b/libs/oeth/swap/src/hooks.ts
index 97287999e..dd95fbc14 100644
--- a/libs/oeth/swap/src/hooks.ts
+++ b/libs/oeth/swap/src/hooks.ts
@@ -1,6 +1,10 @@
 import { useCallback, useMemo } from 'react';
 
-import { useCurve, usePushNotification } from '@origin/shared/providers';
+import {
+  useCurve,
+  usePushNotification,
+  useSlippage,
+} from '@origin/shared/providers';
 import { isNilOrEmpty } from '@origin/shared/utils';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { produce } from 'immer';
@@ -168,21 +172,6 @@ export const useSwapRouteAllowance = (route: SwapRoute) => {
   });
 };
 
-export const useHandleSlippageChange = () => {
-  const [, setSwapState] = useSwapState();
-
-  return useCallback(
-    (value: number) => {
-      setSwapState(
-        produce((state) => {
-          state.slippage = value;
-        }),
-      );
-    },
-    [setSwapState],
-  );
-};
-
 export const useHandleApprove = () => {
   const intl = useIntl();
   const { address } = useAccount();
@@ -265,13 +254,14 @@ export const useHandleApprove = () => {
 
 export const useHandleSwap = () => {
   const intl = useIntl();
+  const { value: slippage } = useSlippage();
   const { address } = useAccount();
   const curve = useCurve();
   const queryClient = useQueryClient();
   const wagmiClient = useWagmiClient();
   const pushNotification = usePushNotification();
   const [
-    { amountIn, amountOut, selectedSwapRoute, slippage, tokenIn, tokenOut },
+    { amountIn, amountOut, selectedSwapRoute, tokenIn, tokenOut },
     setSwapState,
   ] = useSwapState();
 
@@ -304,35 +294,25 @@ export const useHandleSwap = () => {
           title: intl.formatMessage({ defaultMessage: 'Swap complete' }),
           severity: 'success',
         });
-        setSwapState(
-          produce((draft) => {
-            draft.isSwapLoading = false;
-          }),
-        );
       },
       onError: () => {
         pushNotification({
           title: intl.formatMessage({ defaultMessage: 'Swap failed' }),
           severity: 'error',
         });
-        setSwapState(
-          produce((draft) => {
-            draft.isSwapLoading = false;
-          }),
-        );
       },
       onReject: () => {
         pushNotification({
           title: intl.formatMessage({ defaultMessage: 'Swap cancelled' }),
           severity: 'info',
         });
-        setSwapState(
-          produce((draft) => {
-            draft.isSwapLoading = false;
-          }),
-        );
       },
     });
+    setSwapState(
+      produce((draft) => {
+        draft.isSwapLoading = false;
+      }),
+    );
   }, [
     address,
     amountIn,
diff --git a/libs/oeth/swap/src/types.ts b/libs/oeth/swap/src/types.ts
index 060b23520..4cf5e9db0 100644
--- a/libs/oeth/swap/src/types.ts
+++ b/libs/oeth/swap/src/types.ts
@@ -122,7 +122,6 @@ export type SwapState = {
   tokenOut: Token;
   swapRoutes: EstimatedSwapRoute[];
   selectedSwapRoute: EstimatedSwapRoute | null;
-  slippage: number;
   isSwapRoutesLoading: boolean;
   isApproved: boolean;
   isApprovalLoading: boolean;
diff --git a/libs/oeth/swap/src/views/SwapView.tsx b/libs/oeth/swap/src/views/SwapView.tsx
index a7417ccfa..e9d9d54f4 100644
--- a/libs/oeth/swap/src/views/SwapView.tsx
+++ b/libs/oeth/swap/src/views/SwapView.tsx
@@ -15,7 +15,11 @@ import {
 } from '@mui/material';
 import { GasPopover } from '@origin/oeth/shared';
 import { TokenInput } from '@origin/shared/components';
-import { ConnectedButton, usePrices } from '@origin/shared/providers';
+import {
+  ConnectedButton,
+  usePrices,
+  useSlippage,
+} from '@origin/shared/providers';
 import { composeContexts, isNilOrEmpty } from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
 import { useAccount, useBalance } from 'wagmi';
@@ -27,7 +31,6 @@ import { routeActionLabel } from '../constants';
 import {
   useHandleAmountInChange,
   useHandleApprove,
-  useHandleSlippageChange,
   useHandleSwap,
   useHandleTokenChange,
   useHandleTokenFlip,
@@ -69,6 +72,7 @@ export const SwapView = () =>
 
 function SwapViewWrapped() {
   const intl = useIntl();
+  const { value: slippage, set: setSlippage } = useSlippage();
   const { address, isConnected } = useAccount();
   const [tokenSource, setTokenSource] = useState<TokenSource | null>(null);
   const [
@@ -78,7 +82,6 @@ function SwapViewWrapped() {
       tokenIn,
       tokenOut,
       selectedSwapRoute,
-      slippage,
       isSwapLoading,
       isSwapRoutesLoading,
       isApprovalLoading,
@@ -99,7 +102,6 @@ function SwapViewWrapped() {
     watch: true,
     scopeKey: 'swap_balance',
   });
-  const handleSlippageChange = useHandleSlippageChange();
   const handleAmountInChange = useHandleAmountInChange();
   const handleTokenChange = useHandleTokenChange();
   const handleTokenFlip = useHandleTokenFlip();
@@ -114,6 +116,10 @@ function SwapViewWrapped() {
     handleTokenChange(tokenSource, value);
   };
 
+  const handleSlippageChange = (val: number) => {
+    setSlippage(val);
+  };
+
   const needsApproval =
     isConnected &&
     amountIn > 0n &&
diff --git a/libs/shared/providers/src/index.ts b/libs/shared/providers/src/index.ts
index a2da75176..640582a17 100644
--- a/libs/shared/providers/src/index.ts
+++ b/libs/shared/providers/src/index.ts
@@ -4,4 +4,5 @@ export * from './gas';
 export * from './geoFence';
 export * from './notifications';
 export * from './prices';
+export * from './slippage';
 export * from './wagmi';
diff --git a/libs/shared/providers/src/slippage/index.ts b/libs/shared/providers/src/slippage/index.ts
new file mode 100644
index 000000000..165d74152
--- /dev/null
+++ b/libs/shared/providers/src/slippage/index.ts
@@ -0,0 +1,7 @@
+import { useLocalStorageValue } from '@react-hookz/web';
+
+export const useSlippage = () => {
+  return useLocalStorageValue('@originprotocol/oeth-slippage', {
+    defaultValue: 0.001,
+  });
+};

From ebdefab00faed767438bb1eda3a877c9e2601552 Mon Sep 17 00:00:00 2001
From: toniocodo <antoine@originprotocol.com>
Date: Sun, 1 Oct 2023 10:55:00 +0200
Subject: [PATCH 06/14] feat: leave 0.01ETH for gas on max click

---
 libs/shared/components/src/Inputs/TokenInput.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/libs/shared/components/src/Inputs/TokenInput.tsx b/libs/shared/components/src/Inputs/TokenInput.tsx
index 178340083..f3ebe587a 100644
--- a/libs/shared/components/src/Inputs/TokenInput.tsx
+++ b/libs/shared/components/src/Inputs/TokenInput.tsx
@@ -7,7 +7,7 @@ import {
   isNilOrEmpty,
 } from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
-import { formatUnits } from 'viem';
+import { formatUnits, parseEther } from 'viem';
 
 import { BigIntInput } from './BigIntInput';
 
@@ -16,6 +16,8 @@ import type { Token } from '@origin/shared/contracts';
 
 import type { BigintInputProps } from './BigIntInput';
 
+const MIN_ETH_FOR_GAS = '0.01';
+
 export type TokenInputProps = {
   amount: bigint;
   decimals?: number;
@@ -68,10 +70,17 @@ export const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
     const intl = useIntl();
 
     const handleMaxClick = () => {
-      onAmountChange(balance);
+      const max =
+        token.symbol === 'ETH'
+          ? balance - parseEther(MIN_ETH_FOR_GAS)
+          : balance;
+      onAmountChange(max);
     };
 
     const amountUsd = +formatUnits(amount, decimals) * tokenPriceUsd;
+    const maxVisible =
+      !hideMaxButton &&
+      (token.symbol === 'ETH' ? balance > parseEther(MIN_ETH_FOR_GAS) : true);
     const maxDisabled = disableMaxButton || !isConnected || isBalanceLoading;
 
     return (
@@ -148,7 +157,7 @@ export const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
                       },
                     )}
                   </Typography>
-                  {!hideMaxButton && (
+                  {maxVisible && (
                     <Button
                       onClick={handleMaxClick}
                       disabled={maxDisabled}

From 44e81fb69d67c784bf4cd6d5d8330cbd5c29f87d Mon Sep 17 00:00:00 2001
From: toniocodo <antoine@originprotocol.com>
Date: Sun, 1 Oct 2023 10:55:49 +0200
Subject: [PATCH 07/14] feat: add 1.3 factor increase on gas estimate to match
 MM

---
 libs/shared/providers/src/gas/hooks.ts | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/libs/shared/providers/src/gas/hooks.ts b/libs/shared/providers/src/gas/hooks.ts
index 569ac291c..38c498dc9 100644
--- a/libs/shared/providers/src/gas/hooks.ts
+++ b/libs/shared/providers/src/gas/hooks.ts
@@ -2,10 +2,15 @@ import { contracts } from '@origin/shared/contracts';
 import { useQuery } from '@tanstack/react-query';
 import { fetchFeeData, readContract } from '@wagmi/core';
 import { formatUnits } from 'viem';
+import { useBlockNumber } from 'wagmi';
+
+const GAS_MARGIN = 1.3;
 
 export const useGasPrice = (gasAmount = 0n) => {
+  const { data: blockNumber } = useBlockNumber();
+
   return useQuery({
-    queryKey: ['useGasPrice', gasAmount?.toString()],
+    queryKey: ['useGasPrice', gasAmount?.toString(), blockNumber?.toString()],
     queryFn: async () => {
       const [price, data] = await Promise.all([
         readContract({
@@ -17,12 +22,23 @@ export const useGasPrice = (gasAmount = 0n) => {
       ]);
 
       const gweiUsd = +formatUnits(price, 6) * 1e-9;
-      const gasPrice = +formatUnits(data.gasPrice, 9);
+      const gasPrice =
+        +formatUnits(data.gasPrice, 9) +
+        +formatUnits(data.maxPriorityFeePerGas, 9);
       const maxGasPrice = +formatUnits(data.maxFeePerGas, 9);
-      const gasCostUsd = Number(gasAmount) * gasPrice * gweiUsd;
-      const maxGasCost = Number(gasAmount) * maxGasPrice * gweiUsd;
+      const gasCostGwei = Number(gasAmount) * GAS_MARGIN * gasPrice;
+      const gasCostUsd = gasCostGwei * gweiUsd;
+      const maxGasCostGwei = Number(gasAmount) * GAS_MARGIN * maxGasPrice;
+      const maxGasCostUsd = maxGasCostGwei * gweiUsd;
 
-      return { gweiUsd, gasPrice, gasCostUsd, maxGasCost };
+      return {
+        gweiUsd,
+        gasPrice,
+        gasCostUsd,
+        gasCostGwei,
+        maxGasCostUsd,
+        maxGasCostGwei,
+      };
     },
   });
 };

From cce0971ec858f17f2c2cdd4b87962ee5d109c53c Mon Sep 17 00:00:00 2001
From: toniocodo <antoine@originprotocol.com>
Date: Sun, 1 Oct 2023 12:33:19 +0200
Subject: [PATCH 08/14] fix: feedback round 2

- label capitalization
- update options in trailing options
- add tooltip for price tolerance
---
 .../history/src/components/APYContainer.tsx   |  2 +-
 .../history/src/components/HistoryCard.tsx    |  2 +-
 .../oeth/shared/src/components/GasPopover.tsx | 14 ++++++++--
 libs/oeth/swap/src/components/ApyHeader.tsx   | 28 ++++++++++---------
 .../components/src/InfoTooltip/index.tsx      |  8 +++++-
 5 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/libs/oeth/history/src/components/APYContainer.tsx b/libs/oeth/history/src/components/APYContainer.tsx
index 3b5e28f5e..a78598026 100644
--- a/libs/oeth/history/src/components/APYContainer.tsx
+++ b/libs/oeth/history/src/components/APYContainer.tsx
@@ -53,7 +53,7 @@ export function APYContainer() {
       <Divider orientation="vertical" flexItem />
       <ValueContainer
         label={intl.formatMessage({
-          defaultMessage: 'Lifetime earnings (OETH)',
+          defaultMessage: 'Lifetime Earnings (OETH)',
         })}
         value={intl.formatNumber(
           earnings?.addressById?.earned ?? 0,
diff --git a/libs/oeth/history/src/components/HistoryCard.tsx b/libs/oeth/history/src/components/HistoryCard.tsx
index 81b8b189b..4f931353b 100644
--- a/libs/oeth/history/src/components/HistoryCard.tsx
+++ b/libs/oeth/history/src/components/HistoryCard.tsx
@@ -39,7 +39,7 @@ export function HistoryCard() {
         justifyContent="space-between"
       >
         <Typography>
-          {intl.formatMessage({ defaultMessage: 'OETH transactions' })}
+          {intl.formatMessage({ defaultMessage: 'OETH Transactions' })}
         </Typography>
         <Stack direction="row" gap={1}>
           <HistoryFilters
diff --git a/libs/oeth/shared/src/components/GasPopover.tsx b/libs/oeth/shared/src/components/GasPopover.tsx
index 7a7cdab56..510e85e97 100644
--- a/libs/oeth/shared/src/components/GasPopover.tsx
+++ b/libs/oeth/shared/src/components/GasPopover.tsx
@@ -14,7 +14,7 @@ import {
   Stack,
   useTheme,
 } from '@mui/material';
-import { PercentInput } from '@origin/shared/components';
+import { InfoTooltip, PercentInput } from '@origin/shared/components';
 import { useIntl } from 'react-intl';
 import { useFeeData } from 'wagmi';
 
@@ -89,8 +89,18 @@ export function GasPopover({
       >
         <Stack gap={1}>
           <FormControl variant="standard">
-            <InputLabel htmlFor="slippage" shrink>
+            <InputLabel
+              htmlFor="slippage"
+              shrink
+              sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}
+            >
               {intl.formatMessage({ defaultMessage: 'Price Tolerance' })}
+              <InfoTooltip
+                tooltipLabel={intl.formatMessage({
+                  defaultMessage:
+                    'Your transaction will revert if the price changes unfavorably by more than this percentage.',
+                })}
+              />
             </InputLabel>
             <Box sx={gridStyles}>
               <Stack direction="row" gap={2}>
diff --git a/libs/oeth/swap/src/components/ApyHeader.tsx b/libs/oeth/swap/src/components/ApyHeader.tsx
index 04c01e999..d2bffbfcc 100644
--- a/libs/oeth/swap/src/components/ApyHeader.tsx
+++ b/libs/oeth/swap/src/components/ApyHeader.tsx
@@ -94,19 +94,21 @@ export const ApyHeader = (props: StackProps) => {
           }}
           MenuListProps={{ dense: true }}
         >
-          {trailingOptions.map((t) => (
-            <MenuItem
-              divider
-              key={t.value}
-              selected={trailing.value === t.value}
-              onClick={() => {
-                setTrailing(t);
-                setAnchorEl(null);
-              }}
-            >
-              {intl.formatMessage(t.label)}
-            </MenuItem>
-          ))}
+          {trailingOptions
+            .filter((t) => t.value !== trailing.value)
+            .map((t) => (
+              <MenuItem
+                divider
+                key={t.value}
+                selected={trailing.value === t.value}
+                onClick={() => {
+                  setTrailing(t);
+                  setAnchorEl(null);
+                }}
+              >
+                {intl.formatMessage(t.label)}
+              </MenuItem>
+            ))}
         </Menu>
       </Stack>
     </Paper>
diff --git a/libs/shared/components/src/InfoTooltip/index.tsx b/libs/shared/components/src/InfoTooltip/index.tsx
index c625bb3c9..94bc25eb7 100644
--- a/libs/shared/components/src/InfoTooltip/index.tsx
+++ b/libs/shared/components/src/InfoTooltip/index.tsx
@@ -1,15 +1,18 @@
 import { Box, Tooltip, Typography } from '@mui/material';
 
+import type { BoxProps } from '@mui/material';
+
 export type InfoTooltipProps = {
   tooltipLabel: string;
   iconSize?: number;
   iconColor?: string;
-};
+} & BoxProps;
 
 export function InfoTooltip({
   tooltipLabel,
   iconSize = 12,
   iconColor = 'text.secondary',
+  ...rest
 }: InfoTooltipProps) {
   return (
     <Tooltip
@@ -20,6 +23,7 @@ export function InfoTooltip({
       }
     >
       <Box
+        {...rest}
         component="img"
         src="/images/info.svg"
         data-testid="swap-route-info"
@@ -27,6 +31,8 @@ export function InfoTooltip({
           width: (theme) => theme.typography.pxToRem(iconSize),
           height: (theme) => theme.typography.pxToRem(iconSize),
           color: iconColor,
+
+          ...rest?.sx,
         }}
       ></Box>
     </Tooltip>

From 26fcb43087ef8dca7cfdc07f5137c3b0b54ef0b1 Mon Sep 17 00:00:00 2001
From: toniocodo <antoine@originprotocol.com>
Date: Sun, 1 Oct 2023 12:41:05 +0200
Subject: [PATCH 09/14] fix: remove slippage from state

---
 libs/oeth/redeem/src/state.ts | 6 +++---
 libs/oeth/swap/src/state.ts   | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/libs/oeth/redeem/src/state.ts b/libs/oeth/redeem/src/state.ts
index 9591b9f82..a15ae9d57 100644
--- a/libs/oeth/redeem/src/state.ts
+++ b/libs/oeth/redeem/src/state.ts
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import { contracts, tokens, whales } from '@origin/shared/contracts';
-import { usePushNotification } from '@origin/shared/providers';
+import { usePushNotification, useSlippage } from '@origin/shared/providers';
 import { isNilOrEmpty } from '@origin/shared/utils';
 import { useDebouncedEffect } from '@react-hookz/web';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
@@ -23,13 +23,13 @@ export const { Provider: RedeemProvider, useTracked: useRedeemState } =
       split: [],
       gas: 0n,
       rate: 0,
-      slippage: 0.01,
       isEstimateLoading: false,
       isRedeemLoading: false,
     });
     const intl = useIntl();
     const queryClient = useQueryClient();
     const pushNotification = usePushNotification();
+    const { value: slippage } = useSlippage();
 
     const { data: splitAddresses } = useQuery({
       queryKey: ['assetsDecimals'],
@@ -123,7 +123,7 @@ export const { Provider: RedeemProvider, useTracked: useRedeemState } =
         const minAmountOut = parseUnits(
           (
             +formatUnits(total, MIX_TOKEN.decimals) -
-            +formatUnits(total, MIX_TOKEN.decimals) * state.slippage
+            +formatUnits(total, MIX_TOKEN.decimals) * slippage
           ).toString(),
           MIX_TOKEN.decimals,
         );
diff --git a/libs/oeth/swap/src/state.ts b/libs/oeth/swap/src/state.ts
index 089de3d8d..0e60a175f 100644
--- a/libs/oeth/swap/src/state.ts
+++ b/libs/oeth/swap/src/state.ts
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import { tokens } from '@origin/shared/contracts';
-import { useCurve } from '@origin/shared/providers';
+import { useCurve, useSlippage } from '@origin/shared/providers';
 import { useDebouncedEffect } from '@react-hookz/web';
 import { useQueryClient } from '@tanstack/react-query';
 import { produce } from 'immer';
@@ -21,13 +21,13 @@ export const { Provider: SwapProvider, useTracked: useSwapState } =
       tokenOut: tokens.mainnet.OETH,
       swapRoutes: [],
       selectedSwapRoute: null,
-      slippage: 0.001,
       isSwapRoutesLoading: false,
       isApproved: false,
       isApprovalLoading: false,
       isSwapLoading: false,
     });
     const queryClient = useQueryClient();
+    const { value: slippage } = useSlippage();
     const { CurveRegistryExchange, OethPoolUnderlyings } = useCurve();
 
     useDebouncedEffect(
@@ -55,7 +55,7 @@ export const { Provider: SwapProvider, useTracked: useSwapState } =
                 state.tokenIn.symbol,
                 state.tokenOut.symbol,
                 route.action,
-                state.slippage,
+                slippage,
                 state.amountIn.toString(),
               ] as const,
               queryFn: async () =>
@@ -65,7 +65,7 @@ export const { Provider: SwapProvider, useTracked: useSwapState } =
                   amountIn: state.amountIn,
                   amountOut: state.amountOut,
                   route,
-                  slippage: state.slippage,
+                  slippage,
                   curve: {
                     CurveRegistryExchange,
                     OethPoolUnderlyings,

From 289320308beef9d6cdbc0e2f2b53412372825058 Mon Sep 17 00:00:00 2001
From: toniocodo <antoine@originprotocol.com>
Date: Sun, 1 Oct 2023 21:41:35 +0200
Subject: [PATCH 10/14] feat: support rq options, remove update on block

---
 .../swap/src/components/SwapRouteCard.tsx     |  2 +-
 libs/shared/providers/src/gas/hooks.ts        | 25 ++++++++++++++++---
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/libs/oeth/swap/src/components/SwapRouteCard.tsx b/libs/oeth/swap/src/components/SwapRouteCard.tsx
index 2a18ee9d0..2e0bf7f83 100644
--- a/libs/oeth/swap/src/components/SwapRouteCard.tsx
+++ b/libs/oeth/swap/src/components/SwapRouteCard.tsx
@@ -41,7 +41,7 @@ export function SwapRouteCard({
     route.gas,
   );
   const { data: approvalGasPrice, isLoading: approvalGasPriceLoading } =
-    useGasPrice(route.approvalGas);
+    useGasPrice(route.approvalGas, { refetchInterval: 30e3 });
   const { data: allowance } = useSwapRouteAllowance(route);
 
   const estimatedAmount = +formatUnits(
diff --git a/libs/shared/providers/src/gas/hooks.ts b/libs/shared/providers/src/gas/hooks.ts
index 38c498dc9..3d7254b69 100644
--- a/libs/shared/providers/src/gas/hooks.ts
+++ b/libs/shared/providers/src/gas/hooks.ts
@@ -2,15 +2,31 @@ import { contracts } from '@origin/shared/contracts';
 import { useQuery } from '@tanstack/react-query';
 import { fetchFeeData, readContract } from '@wagmi/core';
 import { formatUnits } from 'viem';
-import { useBlockNumber } from 'wagmi';
+
+import type { UseQueryOptions } from '@tanstack/react-query';
 
 const GAS_MARGIN = 1.3;
 
-export const useGasPrice = (gasAmount = 0n) => {
-  const { data: blockNumber } = useBlockNumber();
+type GasPrice = {
+  gweiUsd: number;
+  gasPrice: number;
+  gasCostUsd: number;
+  gasCostGwei: number;
+  maxGasCostUsd: number;
+  maxGasCostGwei: number;
+};
 
+export const useGasPrice = (
+  gasAmount = 0n,
+  options?: UseQueryOptions<
+    GasPrice,
+    Error,
+    GasPrice,
+    [['useGasPrice', string]]
+  >,
+) => {
   return useQuery({
-    queryKey: ['useGasPrice', gasAmount?.toString(), blockNumber?.toString()],
+    queryKey: ['useGasPrice', gasAmount?.toString()] as const,
     queryFn: async () => {
       const [price, data] = await Promise.all([
         readContract({
@@ -40,5 +56,6 @@ export const useGasPrice = (gasAmount = 0n) => {
         maxGasCostGwei,
       };
     },
+    ...options,
   });
 };

From 71d0f52ccfcb11522ec3d1e8f24d3079c42ad97a Mon Sep 17 00:00:00 2001
From: toniocodo <antoine@originprotocol.com>
Date: Mon, 2 Oct 2023 13:16:07 +0200
Subject: [PATCH 11/14] feat: add native currency check

---
 libs/oeth/swap/src/views/SwapView.tsx            | 11 ++++++++++-
 libs/shared/components/src/Inputs/TokenInput.tsx | 11 ++++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/libs/oeth/swap/src/views/SwapView.tsx b/libs/oeth/swap/src/views/SwapView.tsx
index e9d9d54f4..5bdab87f2 100644
--- a/libs/oeth/swap/src/views/SwapView.tsx
+++ b/libs/oeth/swap/src/views/SwapView.tsx
@@ -22,7 +22,7 @@ import {
 } from '@origin/shared/providers';
 import { composeContexts, isNilOrEmpty } from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
-import { useAccount, useBalance } from 'wagmi';
+import { mainnet, useAccount, useBalance, useNetwork } from 'wagmi';
 
 import { ApyHeader } from '../components/ApyHeader';
 import { SwapRoute } from '../components/SwapRoute';
@@ -74,6 +74,7 @@ function SwapViewWrapped() {
   const intl = useIntl();
   const { value: slippage, set: setSlippage } = useSlippage();
   const { address, isConnected } = useAccount();
+  const { chain } = useNetwork();
   const [tokenSource, setTokenSource] = useState<TokenSource | null>(null);
   const [
     {
@@ -194,6 +195,10 @@ function SwapViewWrapped() {
               onTokenClick={() => {
                 setTokenSource('tokenIn');
               }}
+              isNativeCurrency={
+                tokenIn.symbol ===
+                (chain?.nativeCurrency.symbol ?? mainnet.nativeCurrency.symbol)
+              }
               tokenPriceUsd={prices?.[tokenIn.symbol]}
               isPriceLoading={isPriceLoading}
               isConnected={isConnected}
@@ -239,6 +244,10 @@ function SwapViewWrapped() {
               onTokenClick={() => {
                 setTokenSource('tokenOut');
               }}
+              isNativeCurrency={
+                tokenOut.symbol ===
+                (chain?.nativeCurrency.symbol ?? mainnet.nativeCurrency.symbol)
+              }
               tokenPriceUsd={prices?.[tokenOut.symbol]}
               isPriceLoading={isSwapRoutesLoading || isPriceLoading}
               isConnected={isConnected}
diff --git a/libs/shared/components/src/Inputs/TokenInput.tsx b/libs/shared/components/src/Inputs/TokenInput.tsx
index f3ebe587a..efb9466b6 100644
--- a/libs/shared/components/src/Inputs/TokenInput.tsx
+++ b/libs/shared/components/src/Inputs/TokenInput.tsx
@@ -32,6 +32,7 @@ export type TokenInputProps = {
   disableMaxButton?: boolean;
   token: Token;
   onTokenClick?: () => void;
+  isNativeCurrency?: boolean;
   isTokenClickDisabled?: boolean;
   tokenPriceUsd?: number;
   isPriceLoading?: boolean;
@@ -58,6 +59,7 @@ export const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
       disableMaxButton,
       token,
       onTokenClick,
+      isNativeCurrency = false,
       isTokenClickDisabled,
       tokenPriceUsd = 0,
       isPriceLoading,
@@ -70,17 +72,16 @@ export const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
     const intl = useIntl();
 
     const handleMaxClick = () => {
-      const max =
-        token.symbol === 'ETH'
-          ? balance - parseEther(MIN_ETH_FOR_GAS)
-          : balance;
+      const max = isNativeCurrency
+        ? balance - parseEther(MIN_ETH_FOR_GAS)
+        : balance;
       onAmountChange(max);
     };
 
     const amountUsd = +formatUnits(amount, decimals) * tokenPriceUsd;
     const maxVisible =
       !hideMaxButton &&
-      (token.symbol === 'ETH' ? balance > parseEther(MIN_ETH_FOR_GAS) : true);
+      (isNativeCurrency ? balance > parseEther(MIN_ETH_FOR_GAS) : true);
     const maxDisabled = disableMaxButton || !isConnected || isBalanceLoading;
 
     return (

From 54b3c782fe91b049856aa81f5df969de7a0de76a Mon Sep 17 00:00:00 2001
From: toniocodo <antoine@originprotocol.com>
Date: Tue, 3 Oct 2023 10:57:28 +0200
Subject: [PATCH 12/14] feat: add W/OETH balances, update CTA labels

---
 libs/oeth/redeem/src/views/RedeemView.tsx        |  2 +-
 .../shared/src/components/AccountPopover.tsx     |  2 ++
 libs/oeth/swap/src/constants.ts                  | 16 ++++++++++++++--
 libs/oeth/swap/src/views/SwapView.tsx            |  4 ++--
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/libs/oeth/redeem/src/views/RedeemView.tsx b/libs/oeth/redeem/src/views/RedeemView.tsx
index cc40b95f7..382796cac 100644
--- a/libs/oeth/redeem/src/views/RedeemView.tsx
+++ b/libs/oeth/redeem/src/views/RedeemView.tsx
@@ -78,7 +78,7 @@ function RedeemViewWrapped() {
       ? intl.formatMessage({ defaultMessage: 'Enter an amount' })
       : amountIn > balOeth?.value
       ? intl.formatMessage({ defaultMessage: 'Insufficient funds' })
-      : intl.formatMessage({ defaultMessage: 'Redeem for mix' });
+      : intl.formatMessage({ defaultMessage: 'Redeem' });
   const redeemButtonDisabled =
     isBalOethLoading ||
     isEstimateLoading ||
diff --git a/libs/oeth/shared/src/components/AccountPopover.tsx b/libs/oeth/shared/src/components/AccountPopover.tsx
index 3cac0c061..21c09a77d 100644
--- a/libs/oeth/shared/src/components/AccountPopover.tsx
+++ b/libs/oeth/shared/src/components/AccountPopover.tsx
@@ -20,6 +20,8 @@ import type { StackProps } from '@mui/material';
 import type { Token } from '@origin/shared/contracts';
 
 const balanceTokens = [
+  tokens.mainnet.OETH,
+  tokens.mainnet.WOETH,
   tokens.mainnet.WETH,
   tokens.mainnet.rETH,
   tokens.mainnet.frxETH,
diff --git a/libs/oeth/swap/src/constants.ts b/libs/oeth/swap/src/constants.ts
index 5f630efdc..55623e682 100644
--- a/libs/oeth/swap/src/constants.ts
+++ b/libs/oeth/swap/src/constants.ts
@@ -19,14 +19,26 @@ export const routeActionLabel: Record<SwapAction, MessageDescriptor> = {
   'mint-vault': defineMessage({ defaultMessage: 'Mint with Vault' }),
   'swap-curve': defineMessage({ defaultMessage: 'Swap with Curve' }),
   'swap-curve-eth': defineMessage({ defaultMessage: 'Swap with CurvePool' }),
-  'swap-zapper-eth': defineMessage({ defaultMessage: 'Zap + Mint with Vault' }),
+  'swap-zapper-eth': defineMessage({ defaultMessage: 'Mint with Vault' }),
   'swap-zapper-sfrxeth': defineMessage({
-    defaultMessage: 'Zap + Mint with Vault',
+    defaultMessage: 'Mint with Vault',
   }),
   'unwrap-woeth': defineMessage({ defaultMessage: 'Unwrap with Origin' }),
   'wrap-oeth': defineMessage({ defaultMessage: 'Wrap with Origin' }),
 };
 
+export const buttonActionLabel: Record<SwapAction, MessageDescriptor> = {
+  'mint-vault': defineMessage({ defaultMessage: 'Mint' }),
+  'swap-curve': defineMessage({ defaultMessage: 'Swap' }),
+  'swap-curve-eth': defineMessage({ defaultMessage: 'Swap' }),
+  'swap-zapper-eth': defineMessage({ defaultMessage: 'Mint' }),
+  'swap-zapper-sfrxeth': defineMessage({
+    defaultMessage: 'Mint',
+  }),
+  'unwrap-woeth': defineMessage({ defaultMessage: 'Unwrap' }),
+  'wrap-oeth': defineMessage({ defaultMessage: 'Wrap' }),
+};
+
 export const swapRoutes = [
   // Mint
   {
diff --git a/libs/oeth/swap/src/views/SwapView.tsx b/libs/oeth/swap/src/views/SwapView.tsx
index 5bdab87f2..285c7df93 100644
--- a/libs/oeth/swap/src/views/SwapView.tsx
+++ b/libs/oeth/swap/src/views/SwapView.tsx
@@ -27,7 +27,7 @@ import { mainnet, useAccount, useBalance, useNetwork } from 'wagmi';
 import { ApyHeader } from '../components/ApyHeader';
 import { SwapRoute } from '../components/SwapRoute';
 import { TokenSelectModal } from '../components/TokenSelectModal';
-import { routeActionLabel } from '../constants';
+import { buttonActionLabel } from '../constants';
 import {
   useHandleAmountInChange,
   useHandleApprove,
@@ -135,7 +135,7 @@ function SwapViewWrapped() {
       : amountIn > balTokenIn?.value
       ? intl.formatMessage({ defaultMessage: 'Insufficient funds' })
       : !isNilOrEmpty(selectedSwapRoute)
-      ? intl.formatMessage(routeActionLabel[selectedSwapRoute?.action])
+      ? intl.formatMessage(buttonActionLabel[selectedSwapRoute?.action])
       : '';
   const amountInInputDisabled = isSwapLoading || isApprovalLoading;
   const approveButtonDisabled =

From 84f8c07ec67191590c7d0743f2f1962400e56fad Mon Sep 17 00:00:00 2001
From: toniocodo <antoine@originprotocol.com>
Date: Tue, 3 Oct 2023 21:08:40 +0200
Subject: [PATCH 13/14] docs: remove punctuation

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 139f5a454..9bdb02ca2 100644
--- a/README.md
+++ b/README.md
@@ -54,7 +54,7 @@ We use `react-query` in conjunction with `graphql-codegen` for interacting with
 - run the graphql-codegen task with `pnpm nx run oeth-shared:codegen-graphql`, it will generate 
   - the global types in `libs/oeth/shared/src/generated/graphql.ts` and 
   - the generated hooks next to your graphql file (i.e. `/libs/oeth/history/src/queries.generated.tsx`)
-- use the generated hooks in your component with fully typed args and results!
+- use the generated hooks in your component with fully typed args and results
 
 Couple of things to note:
 - generated hooks receives args as first param, second param exposes all react-query api for controlling execution

From 3ee91aced187b00e9d3a4c1cc3b62c80b93a149c Mon Sep 17 00:00:00 2001
From: toniocodo <antoine@originprotocol.com>
Date: Wed, 4 Oct 2023 19:42:53 +0200
Subject: [PATCH 14/14] feat: update gas margin to 0.015

---
 libs/shared/components/src/Inputs/TokenInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/shared/components/src/Inputs/TokenInput.tsx b/libs/shared/components/src/Inputs/TokenInput.tsx
index efb9466b6..3615606ee 100644
--- a/libs/shared/components/src/Inputs/TokenInput.tsx
+++ b/libs/shared/components/src/Inputs/TokenInput.tsx
@@ -16,7 +16,7 @@ import type { Token } from '@origin/shared/contracts';
 
 import type { BigintInputProps } from './BigIntInput';
 
-const MIN_ETH_FOR_GAS = '0.01';
+const MIN_ETH_FOR_GAS = '0.015';
 
 export type TokenInputProps = {
   amount: bigint;