From e1277f063e50af8bb2133e0468c6d8b2ce11188b Mon Sep 17 00:00:00 2001
From: toniocodo <antoine@originprotocol.com>
Date: Wed, 20 Sep 2023 22:11:58 +0200
Subject: [PATCH 1/2] fix: null check balance

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

diff --git a/libs/oeth/shared/src/components/AccountPopover.tsx b/libs/oeth/shared/src/components/AccountPopover.tsx
index 4aa20e34f..19eddff31 100644
--- a/libs/oeth/shared/src/components/AccountPopover.tsx
+++ b/libs/oeth/shared/src/components/AccountPopover.tsx
@@ -140,7 +140,7 @@ export function AccountPopover({ anchor, setAnchor }: Props) {
         <Stack sx={padding} gap={2}>
           <BalanceRow
             token={tokens.mainnet.ETH}
-            balance={eth.value}
+            balance={eth?.value}
             isBalanceLoading={ethLoading}
           />
           {balanceTokens.map((tok, i) => (

From 4809f116b2ca10a08a638b6919654d4fb1591923 Mon Sep 17 00:00:00 2001
From: toniocodo <antoine@originprotocol.com>
Date: Thu, 21 Sep 2023 08:35:16 +0200
Subject: [PATCH 2/2] fix: watch balances, update slippage input layout

---
 .../shared/src/components/AccountPopover.tsx  |   3 +
 .../oeth/shared/src/components/GasPopover.tsx | 112 +++++++++---------
 2 files changed, 59 insertions(+), 56 deletions(-)

diff --git a/libs/oeth/shared/src/components/AccountPopover.tsx b/libs/oeth/shared/src/components/AccountPopover.tsx
index 19eddff31..8c0962399 100644
--- a/libs/oeth/shared/src/components/AccountPopover.tsx
+++ b/libs/oeth/shared/src/components/AccountPopover.tsx
@@ -44,6 +44,7 @@ export function AccountPopover({ anchor, setAnchor }: Props) {
     address,
     token: tokens.mainnet.ETH.address,
     enabled: isConnected,
+    watch: true,
   });
   const { data: balances, isLoading: balancesLoading } = useContractReads({
     contracts: balanceTokens.map((t) => ({
@@ -52,6 +53,8 @@ export function AccountPopover({ anchor, setAnchor }: Props) {
       functionName: 'balanceOf',
       args: [address],
     })),
+    watch: true,
+    enabled: isConnected,
     select: map(prop('result')),
   });
 
diff --git a/libs/oeth/shared/src/components/GasPopover.tsx b/libs/oeth/shared/src/components/GasPopover.tsx
index d9b471025..e89a61ed5 100644
--- a/libs/oeth/shared/src/components/GasPopover.tsx
+++ b/libs/oeth/shared/src/components/GasPopover.tsx
@@ -90,70 +90,70 @@ export function GasPopover({
           },
         }}
       >
-        <Stack gap={2}>
+        <Stack gap={1}>
           <FormControl variant="standard">
             <InputLabel htmlFor="slippage" shrink>
               {intl.formatMessage({ defaultMessage: 'Slippage' })}
             </InputLabel>
             <Box sx={gridStyles}>
-              <PercentInput
-                value={slippage}
-                onChange={onSlippageChange}
-                fullWidth
-                sx={{
-                  borderColor: (theme) => theme.palette.secondary.main,
-                  backgroundColor: (theme) =>
-                    alpha(theme.palette.secondary.main, 0.05),
-                  paddingInlineEnd: 2,
-                  '& .MuiInputBase-input': {
-                    textAlign: 'right',
-                    color: 'primary.contrastText',
+              <Stack direction="row" gap={2}>
+                <PercentInput
+                  value={slippage}
+                  onChange={onSlippageChange}
+                  fullWidth
+                  sx={{
+                    borderColor: (theme) => theme.palette.secondary.main,
+                    backgroundColor: (theme) =>
+                      alpha(theme.palette.secondary.main, 0.05),
+                    paddingInlineEnd: 2,
+                    '& .MuiInputBase-input': {
+                      textAlign: 'right',
+                      color: 'primary.contrastText',
 
-                    '&::placeholder': {
-                      color: 'text.primary',
-                      opacity: 1,
+                      '&::placeholder': {
+                        color: 'text.primary',
+                        opacity: 1,
+                      },
                     },
-                  },
-                }}
-              />
-
-              <Button
-                variant="contained"
-                sx={{
-                  borderRadius: 20,
-                  height: '38px',
-                  color: 'primary.contrastText',
-                  bgColor:
-                    'linear-gradient(90deg, var(--mui-palette-primary-main) 0%, var(--mui-palette-primary-dark) 100%)',
-                  '&:disabled': {
-                    opacity: 0.3,
-                  },
-                }}
-                fullWidth
-                disabled={slippage === DEFAULT_SLIPPAGE}
-                onClick={() => {
-                  onSlippageChange(DEFAULT_SLIPPAGE);
-                }}
-              >
-                {intl.formatMessage({ defaultMessage: 'Auto' })}
-              </Button>
+                  }}
+                />
+                <Button
+                  variant="contained"
+                  sx={{
+                    borderRadius: 20,
+                    height: '38px',
+                    color: 'primary.contrastText',
+                    bgColor:
+                      'linear-gradient(90deg, var(--mui-palette-primary-main) 0%, var(--mui-palette-primary-dark) 100%)',
+                    '&:disabled': {
+                      opacity: 0.3,
+                    },
+                  }}
+                  fullWidth
+                  disabled={slippage === DEFAULT_SLIPPAGE}
+                  onClick={() => {
+                    onSlippageChange(DEFAULT_SLIPPAGE);
+                  }}
+                >
+                  {intl.formatMessage({ defaultMessage: 'Auto' })}
+                </Button>
+              </Stack>
             </Box>
-            {slippage > WARNING_THRESHOLD ? (
-              <FormHelperText
-                sx={{
-                  gridColumn: 'span 2',
-                  mt: 1.25,
-                  fontSize: (theme) => theme.typography.pxToRem(12),
-                  color: (theme) => theme.palette.warning.main,
-                  fontWeight: 400,
-                  fontStyle: 'normal',
-                }}
-              >
-                {intl.formatMessage({
-                  defaultMessage: 'Your transaction may be frontrun',
-                })}
-              </FormHelperText>
-            ) : null}
+            <FormHelperText
+              sx={{
+                gridColumn: 'span 2',
+                mt: 1.25,
+                fontSize: (theme) => theme.typography.pxToRem(12),
+                color: (theme) => theme.palette.warning.main,
+                fontWeight: 400,
+                fontStyle: 'normal',
+                ...(slippage <= WARNING_THRESHOLD && { visibility: 'hidden' }),
+              }}
+            >
+              {intl.formatMessage({
+                defaultMessage: 'Your transaction may be frontrun',
+              })}
+            </FormHelperText>
           </FormControl>
           <FormControl>
             <InputLabel htmlFor="gas" shrink>