feat: paraswap feature updates

package.json

@@ -32,8 +32,8 @@
     "test:ci": "jest --ci"
   },
   "dependencies": {
-    "@aave/contract-helpers": "1.5.1",
-    "@aave/math-utils": "1.5.1",
+    "@aave/contract-helpers": "1.6.0",
+    "@aave/math-utils": "1.6.0",
     "@apollo/client": "^3.5.10",
     "@emotion/cache": "11.10.3",
     "@emotion/react": "11.10.4",

src/components/transactions/AssetInput.tsx

@@ -74,6 +74,7 @@ export interface AssetInputProps<T extends Asset = Asset> {
   maxValue?: string;
   isMaxSelected?: boolean;
   inputTitle?: ReactNode;
+  balanceText?: string;
 }
 
 export const AssetInput = <T extends Asset = Asset>({
@@ -89,6 +90,7 @@ export const AssetInput = <T extends Asset = Asset>({
   maxValue,
   inputTitle,
   isMaxSelected,
+  balanceText,
 }: AssetInputProps<T>) => {
   const handleSelect = (event: SelectChangeEvent) => {
     const newAsset = assets.find((asset) => asset.symbol === event.target.value) as T;
@@ -198,6 +200,7 @@ export const AssetInput = <T extends Asset = Asset>({
                   '&.AssetInput__select .MuiOutlinedInput-notchedOutline': { display: 'none' },
                   '&.AssetInput__select .MuiSelect-icon': {
                     color: 'text.primary',
+                    right: '0%',
                   },
                 }}
                 renderValue={(symbol) => {
@@ -248,15 +251,15 @@ export const AssetInput = <T extends Asset = Asset>({
             compact
             symbol="USD"
             variant="secondary12"
-            color="text.disabled"
-            symbolsColor="text.disabled"
+            color="text.muted"
+            symbolsColor="text.muted"
             flexGrow={1}
           />
 
           {asset.balance && onChange && (
             <>
               <Typography component="div" variant="secondary12" color="text.secondary">
-                <Trans>Balance</Trans>{' '}
+                <Trans>{balanceText || 'Balance'}</Trans>{' '}
                 <FormattedNumber
                   value={asset.balance}
                   compact
@@ -265,14 +268,16 @@ export const AssetInput = <T extends Asset = Asset>({
                   symbolsColor="text.disabled"
                 />
               </Typography>
-              <Button
-                size="small"
-                sx={{ minWidth: 0, ml: '7px', p: 0 }}
-                onClick={() => onChange('-1')}
-                disabled={disabled || isMaxSelected}
-              >
-                <Trans>Max</Trans>
-              </Button>
+              {!disableInput && (
+                <Button
+                  size="small"
+                  sx={{ minWidth: 0, ml: '7px', p: 0 }}
+                  onClick={() => onChange('-1')}
+                  disabled={disabled || isMaxSelected}
+                >
+                  <Trans>Max</Trans>
+                </Button>
+              )}
             </>
           )}
         </Box>

src/components/transactions/Borrow/BorrowModalContent.tsx

@@ -74,7 +74,7 @@ const BorrowModeSwitch = ({
         value={interestRateMode}
         exclusive
         onChange={(_, value) => setInterestRateMode(value)}
-        sx={{ width: '100%', mt: 0.5 }}
+        sx={{ width: '100%', height: '36px', p: '2px', mt: 0.5 }}
       >
         <StyledToggleButton
           value={InterestRate.Variable}

src/components/transactions/FlowCommons/TxModalDetails.tsx

@@ -16,9 +16,14 @@ import { GasStation } from '../GasStation/GasStation';
 
 export interface TxModalDetailsProps {
   gasLimit?: string;
+  slippageSelector?: ReactNode;
 }
 
-export const TxModalDetails: React.FC<TxModalDetailsProps> = ({ gasLimit, children }) => {
+export const TxModalDetails: React.FC<TxModalDetailsProps> = ({
+  gasLimit,
+  slippageSelector,
+  children,
+}) => {
   return (
     <Box sx={{ pt: 5 }}>
       <Typography sx={{ mb: 1 }} color="text.secondary">
@@ -37,8 +42,10 @@ export const TxModalDetails: React.FC<TxModalDetailsProps> = ({ gasLimit, childr
       >
         {children}
       </Box>
-
-      <GasStation gasLimit={parseUnits(gasLimit || '0', 'wei')} />
+      <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+        <GasStation gasLimit={parseUnits(gasLimit || '0', 'wei')} />
+        {slippageSelector}
+      </Box>
     </Box>
   );
 };
@@ -87,6 +94,7 @@ interface DetailsNumberLineWithSubProps {
   futureValueUSD: string;
   hideSymbolSuffix?: boolean;
   color?: string;
+  tokenIcon?: string;
 }
 
 export const DetailsNumberLineWithSub = ({
@@ -98,6 +106,7 @@ export const DetailsNumberLineWithSub = ({
   futureValueUSD,
   hideSymbolSuffix,
   color,
+  tokenIcon,
 }: DetailsNumberLineWithSubProps) => {
   return (
     <Row caption={description} captionVariant="description" mb={4} align="flex-start">
@@ -116,6 +125,7 @@ export const DetailsNumberLineWithSub = ({
               </SvgIcon>
             </>
           )}
+          {tokenIcon && <TokenIcon symbol={tokenIcon} sx={{ mr: 1, fontSize: '14px' }} />}
           <FormattedNumber value={futureValue} variant="secondary14" color={color} />
           {!hideSymbolSuffix && (
             <Typography ml={1} variant="secondary14">
@@ -209,15 +219,17 @@ export const DetailsIncentivesLine = ({
   if (!incentives || incentives.filter((i) => i.incentiveAPR !== '0').length === 0) return null;
   return (
     <Row caption={<Trans>Rewards APR</Trans>} captionVariant="description" mb={4} minHeight={24}>
-      <IncentivesButton incentives={incentives} symbol={symbol} />
-      {futureSymbol && (
-        <>
-          <SvgIcon color="primary" sx={{ fontSize: '14px', mx: 1 }}>
-            <ArrowNarrowRightIcon />
-          </SvgIcon>
-          <IncentivesButton incentives={futureIncentives} symbol={futureSymbol} />
-        </>
-      )}
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <IncentivesButton incentives={incentives} symbol={symbol} />
+        {futureSymbol && (
+          <>
+            <SvgIcon color="primary" sx={{ fontSize: '14px', mx: 1 }}>
+              <ArrowNarrowRightIcon />
+            </SvgIcon>
+            <IncentivesButton incentives={futureIncentives} symbol={futureSymbol} />
+          </>
+        )}
+      </Box>
     </Row>
   );
 };

src/components/transactions/Repay/CollateralRepayActions.tsx

@@ -1,12 +1,8 @@
 import { InterestRate } from '@aave/contract-helpers';
-import { normalize } from '@aave/math-utils';
 import { Trans } from '@lingui/macro';
 import { BoxProps } from '@mui/material';
-import { OptimalRate } from 'paraswap-core';
 import { useTransactionHandler } from 'src/helpers/useTransactionHandler';
 import { ComputedReserveData } from 'src/hooks/app-data-provider/useAppDataProvider';
-import { useProtocolDataContext } from 'src/hooks/useProtocolDataContext';
-import { getRepayCallData } from 'src/hooks/useSwap';
 import { useTxBuilderContext } from 'src/hooks/useTxBuilder';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 
@@ -21,11 +17,11 @@ export interface RepayActionProps extends BoxProps {
   isWrongNetwork: boolean;
   customGasPrice?: string;
   symbol: string;
-  priceRoute: OptimalRate | null;
   repayAllDebt: boolean;
   useFlashLoan: boolean;
   blocked: boolean;
-  maxSlippage: number;
+  swapCallData: string;
+  augustus: string;
 }
 
 export const CollateralRepayActions = ({
@@ -37,36 +33,25 @@ export const CollateralRepayActions = ({
   sx,
   symbol,
   rateMode,
-  priceRoute,
   repayAllDebt,
   useFlashLoan,
   blocked,
-  maxSlippage,
+  swapCallData,
+  augustus,
   ...props
 }: RepayActionProps) => {
   const { lendingPool } = useTxBuilderContext();
-  const { currentChainId: chainId, currentNetworkConfig } = useProtocolDataContext();
   const { currentAccount } = useWeb3Context();
 
   const { approval, action, requiresApproval, loadingTxns, approvalTxState, mainTxState } =
     useTransactionHandler({
       handleGetTxns: async () => {
-        const { swapCallData, augustus, srcAmountWithSlippage } = await getRepayCallData({
-          srcToken: fromAssetData.underlyingAsset,
-          srcDecimals: fromAssetData.decimals,
-          destToken: poolReserve.underlyingAsset,
-          destDecimals: poolReserve.decimals,
-          user: currentAccount,
-          route: priceRoute as OptimalRate,
-          chainId: currentNetworkConfig.underlyingChainId || chainId,
-          maxSlippage,
-        });
         return lendingPool.paraswapRepayWithCollateral({
           user: currentAccount,
           fromAsset: fromAssetData.underlyingAsset,
           fromAToken: fromAssetData.aTokenAddress,
           assetToRepay: poolReserve.underlyingAsset,
-          repayWithAmount: normalize(srcAmountWithSlippage, fromAssetData.decimals),
+          repayWithAmount,
           repayAmount,
           repayAllDebt,
           rateMode,
@@ -79,7 +64,6 @@ export const CollateralRepayActions = ({
       deps: [
         repayWithAmount,
         repayAmount,
-        priceRoute,
         poolReserve.underlyingAsset,
         fromAssetData.underlyingAsset,
         repayAllDebt,
@@ -91,7 +75,7 @@ export const CollateralRepayActions = ({
   return (
     <TxActionsWrapper
       preparingTransactions={loadingTxns}
-      symbol={poolReserve.symbol}
+      symbol={fromAssetData.symbol}
       mainTxState={mainTxState}
       approvalTxState={approvalTxState}
       requiresAmount