Merge remote-tracking branch 'origin/main' into feat/update-tooltip-celo

Author: AGMASO

src/components/ConnectWalletPaperStaking.tsx

@@ -46,10 +46,12 @@ export const ConnectWalletPaperStaking = ({
               )}
             </Typography>
             <ConnectWalletButton funnel={'Staking page'} />
-            <Grid container spacing={1} pt={6} sx={{ maxWidth: '758px', textAlign: 'right' }}>
-              <Grid item xs={12} md={4}>
-                <StakingPanelNoWallet stakedToken={'GHO'} icon={'gho'} />
-              </Grid>
+            <Grid
+              container
+              spacing={1}
+              pt={6}
+              sx={{ maxWidth: '758px', textAlign: 'right', justifyContent: 'center' }}
+            >
               <Grid item xs={12} md={4}>
                 <StakingPanelNoWallet stakedToken={'AAVE'} icon={'aave'} />
               </Grid>

src/components/ContentWithTooltip.tsx

@@ -5,7 +5,7 @@ interface ContentWithTooltipProps {
   children: ReactNode;
   // eslint-disable-next-line
   tooltipContent: ReactElement<any, string | JSXElementConstructor<any>>;
-  placement?: 'top' | 'bottom';
+  placement?: 'right' | 'left' | 'bottom';
   withoutHover?: boolean;
   open?: boolean;
   setOpen?: (value: boolean) => void;
@@ -34,7 +34,7 @@ export const PopperComponent = styled(Popper)(({ theme }) =>
 export const ContentWithTooltip = ({
   children,
   tooltipContent,
-  placement = 'top',
+  placement = 'right',
   withoutHover,
   open,
   setOpen,
@@ -66,6 +66,12 @@ export const ContentWithTooltip = ({
                 offset: offset ?? [],
               },
             },
+            {
+              name: 'flip',
+              options: {
+                fallbackPlacements: ['left', 'bottom'],
+              },
+            },
           ],
           onClick: (e) => {
             e.stopPropagation();

src/components/transactions/Repay/RepayActions.tsx

@@ -30,6 +30,8 @@ export interface RepayActionProps extends BoxProps {
   repayWithATokens: boolean;
   blocked?: boolean;
   maxApproveNeeded: string;
+  setShowUSDTResetWarning?: (showUSDTResetWarning: boolean) => void;
+  chainId?: number;
   maxAmountToRepay: string;
 }
 
@@ -43,6 +45,8 @@ export const RepayActions = ({
   repayWithATokens,
   blocked,
   maxApproveNeeded,
+  setShowUSDTResetWarning,
+  chainId,
   maxAmountToRepay,
   ...props
 }: RepayActionProps) => {
@@ -115,7 +119,7 @@ export const RepayActions = ({
     setApprovalTxState({});
   }
 
-  const { approval } = useApprovalTx({
+  const { approval, requiresApprovalReset } = useApprovalTx({
     usePermit,
     approvedAmount,
     requiresApproval,
@@ -125,6 +129,8 @@ export const RepayActions = ({
     signatureAmount: amountToRepay,
     onApprovalTxConfirmed: fetchApprovedAmount,
     onSignTxCompleted: (signedParams) => setSignatureParams(signedParams),
+    chainId,
+    setShowUSDTResetWarning,
   });
 
   useEffect(() => {
@@ -250,6 +256,7 @@ export const RepayActions = ({
       actionText={<Trans>Repay {symbol}</Trans>}
       actionInProgressText={<Trans>Repaying {symbol}</Trans>}
       tryPermit={permitAvailable}
+      requiresApprovalReset={requiresApprovalReset}
     />
   );
 };

src/components/transactions/Repay/RepayModalContent.tsx

@@ -9,6 +9,7 @@ import { Trans } from '@lingui/macro';
 import Typography from '@mui/material/Typography';
 import { BigNumber } from 'bignumber.js';
 import React, { useEffect, useRef, useState } from 'react';
+import { Warning } from 'src/components/primitives/Warning';
 import {
   ExtendedFormattedUser,
   useAppDataContext,
@@ -67,6 +68,7 @@ export const RepayModalContent = ({
   const [repayMax, setRepayMax] = useState('');
   const [_amount, setAmount] = useState('');
   const amountRef = useRef<string>();
+  const [showUSDTResetWarning, setShowUSDTResetWarning] = useState(false);
 
   const networkConfig = getNetworkConfig(currentChainId);
 
@@ -279,6 +281,17 @@ export const RepayModalContent = ({
 
       {txError && <GasEstimationError txError={txError} />}
 
+      {showUSDTResetWarning && (
+        <Warning severity="info" sx={{ mt: 5 }}>
+          <Typography variant="caption">
+            <Trans>
+              USDT on Ethereum requires approval reset before a new approval. This will require an
+              additional transaction.
+            </Trans>
+          </Typography>
+        </Warning>
+      )}
+
       <RepayActions
         maxApproveNeeded={safeAmountToRepayAll.toString()}
         poolReserve={poolReserve}
@@ -289,6 +302,8 @@ export const RepayModalContent = ({
         isWrongNetwork={isWrongNetwork}
         symbol={modalSymbol}
         repayWithATokens={repayWithATokens}
+        setShowUSDTResetWarning={setShowUSDTResetWarning}
+        chainId={currentChainId}
         maxAmountToRepay={maxAmountToRepay.toString(10)}
       />
     </>

src/components/transactions/Supply/SupplyActions.tsx

@@ -29,6 +29,8 @@ export interface SupplyActionProps extends BoxProps {
   blocked: boolean;
   decimals: number;
   isWrappedBaseAsset: boolean;
+  setShowUSDTResetWarning?: (showUSDTResetWarning: boolean) => void;
+  chainId?: number;
 }
 
 export const SupplyActions = React.memo(
@@ -41,6 +43,8 @@ export const SupplyActions = React.memo(
     blocked,
     decimals,
     isWrappedBaseAsset,
+    setShowUSDTResetWarning,
+    chainId,
     ...props
   }: SupplyActionProps) => {
     const [
@@ -104,7 +108,7 @@ export const SupplyActions = React.memo(
 
     const usePermit = permitAvailable && walletApprovalMethodPreference === ApprovalMethod.PERMIT;
 
-    const { approval } = useApprovalTx({
+    const { approval, requiresApprovalReset } = useApprovalTx({
       usePermit,
       approvedAmount,
       requiresApproval,
@@ -114,6 +118,8 @@ export const SupplyActions = React.memo(
       signatureAmount: amountToSupply,
       onApprovalTxConfirmed: fetchApprovedAmount,
       onSignTxCompleted: (signedParams) => setSignatureParams(signedParams),
+      chainId,
+      setShowUSDTResetWarning,
     });
 
     useEffect(() => {
@@ -221,6 +227,7 @@ export const SupplyActions = React.memo(
         tryPermit={permitAvailable}
         sx={sx}
         {...props}
+        requiresApprovalReset={requiresApprovalReset}
       />
     );
   }

src/components/transactions/Supply/SupplyModalContent.tsx

@@ -19,6 +19,7 @@ import {
 import { useAssetCaps } from 'src/hooks/useAssetCaps';
 import { useModalContext } from 'src/hooks/useModal';
 import { useWrappedTokens, WrappedTokenConfig } from 'src/hooks/useWrappedTokens';
+import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { ERC20TokenType } from 'src/libs/web3-data-provider/Web3Provider';
 import { useRootStore } from 'src/store/root';
 import { GENERAL } from 'src/utils/events';
@@ -146,6 +147,7 @@ export const SupplyModalContent = React.memo(
   }: SupplyModalContentProps) => {
     const { marketReferencePriceInUsd } = useAppDataContext();
     const { mainTxState: supplyTxState, gasLimit, txError } = useModalContext();
+    const { chainId } = useWeb3Context();
     const [minRemainingBaseTokenBalance, currentMarketData, currentNetworkConfig] = useRootStore(
       useShallow((state) => [
         state.poolComputed.minRemainingBaseTokenBalance,
@@ -156,6 +158,7 @@ export const SupplyModalContent = React.memo(
 
     // states
     const [amount, setAmount] = useState('');
+    const [showUSDTResetWarning, setShowUSDTResetWarning] = useState(false);
     const supplyUnWrapped = underlyingAsset.toLowerCase() === API_ETH_MOCK_ADDRESS.toLowerCase();
 
     const walletBalance = supplyUnWrapped ? nativeBalance : tokenBalance;
@@ -201,6 +204,8 @@ export const SupplyModalContent = React.memo(
       blocked: false,
       decimals: poolReserve.decimals,
       isWrappedBaseAsset: poolReserve.isWrappedBaseAsset,
+      setShowUSDTResetWarning,
+      chainId,
     };
 
     if (supplyTxState.success)
@@ -272,6 +277,17 @@ export const SupplyModalContent = React.memo(
 
         {txError && <GasEstimationError txError={txError} />}
 
+        {showUSDTResetWarning && (
+          <Warning severity="info" sx={{ mt: 5 }}>
+            <Typography variant="caption">
+              <Trans>
+                USDT on Ethereum requires approval reset before a new approval. This will require an
+                additional transaction.
+              </Trans>
+            </Typography>
+          </Warning>
+        )}
+
         <SupplyActions {...supplyActionsProps} />
       </>
     );

src/components/transactions/Switch/SwitchActions.tsx

@@ -153,9 +153,7 @@ export const SwitchActions = ({
       0
     );
 
-    if (
-      needsUSDTApprovalReset(inputSymbol, chainId, BigInt(currentApproved), BigInt(amountToApprove))
-    ) {
+    if (needsUSDTApprovalReset(inputSymbol, chainId, currentApproved, amountToApprove)) {
       setShowUSDTResetWarning(true);
       setRequiresApprovalReset(true);
     } else {

src/components/transactions/TxActionsWrapper.tsx

@@ -22,6 +22,7 @@ interface TxActionsWrapperProps extends BoxProps {
   preparingTransactions: boolean;
   requiresAmount?: boolean;
   requiresApproval: boolean;
+  requiresApprovalReset?: boolean;
   symbol?: string;
   blocked?: boolean;
   fetchingData?: boolean;
@@ -47,6 +48,7 @@ export const TxActionsWrapper = ({
   preparingTransactions,
   requiresAmount,
   requiresApproval,
+  requiresApprovalReset,
   sx,
   symbol,
   blocked,
@@ -95,7 +97,15 @@ export const TxActionsWrapper = ({
     )
       return null;
     if (approvalTxState?.loading)
-      return { loading: true, disabled: true, content: <Trans>Approving {symbol}...</Trans> };
+      return {
+        loading: true,
+        disabled: true,
+        content: (
+          <Trans>
+            {requiresApprovalReset ? 'Resetting' : 'Approving'} {symbol}...
+          </Trans>
+        ),
+      };
     if (approvalTxState?.success)
       return {
         disabled: true,
@@ -116,7 +126,11 @@ export const TxActionsWrapper = ({
           iconSize={20}
           iconMargin={2}
           color="white"
-          text={<Trans>Approve {symbol} to continue</Trans>}
+          text={
+            <Trans>
+              {requiresApprovalReset ? 'Reset' : 'Approve'} {symbol} to continue
+            </Trans>
+          }
         />
       ),
       handleClick: handleApproval,