feat: sdai wrapping (#1869)

Co-authored-by: Joaquin Battilana <[email protected]>
Co-authored-by: Nikita Boakrev <[email protected]>

package.json

@@ -30,8 +30,8 @@
     "test:coverage": "jest --coverage"
   },
   "dependencies": {
-    "@aave/contract-helpers": "1.24.0",
-    "@aave/math-utils": "1.24.0",
+    "@aave/contract-helpers": "1.25.0",
+    "@aave/math-utils": "1.25.0",
     "@bgd-labs/aave-address-book": "^2.19.0",
     "@emotion/cache": "11.10.3",
     "@emotion/react": "11.10.4",

src/components/infoTooltips/WrappedTokenToolTipContent.tsx

@@ -0,0 +1,65 @@
+import { ArrowNarrowRightIcon } from '@heroicons/react/solid';
+import { Trans } from '@lingui/macro';
+import { Box, Skeleton, Stack, SvgIcon, Typography } from '@mui/material';
+import { useTokenOutForTokenIn } from 'src/hooks/token-wrapper/useTokenWrapper';
+
+import { FormattedNumber } from '../primitives/FormattedNumber';
+
+export const WrappedTokenTooltipContent = ({
+  decimals,
+  tokenWrapperAddress,
+  tokenInSymbol,
+  tokenOutSymbol,
+}: {
+  decimals: number;
+  tokenWrapperAddress: string;
+  tokenInSymbol: string;
+  tokenOutSymbol: string;
+}) => {
+  const { isLoading: loadingExchangeRate, data: exchangeRate } = useTokenOutForTokenIn(
+    '1',
+    decimals,
+    tokenWrapperAddress
+  );
+
+  return (
+    <Stack direction="column" gap={3}>
+      <Typography variant="tooltip">
+        <Trans>
+          DAI balance will be converted via DSR contracts and then supplied as sDAI. Switching
+          incurs no additional costs and no slippage.
+        </Trans>
+      </Typography>
+      <Stack direction="row" alignItems="center" justifyContent="space-between">
+        <Box>
+          <Typography variant="secondary12">
+            <Trans>Exchange rate</Trans>
+          </Typography>
+        </Box>
+        {loadingExchangeRate ? (
+          <Skeleton variant="rectangular" width={120} height={14} />
+        ) : (
+          <Stack direction="row" alignItems="center" gap={1}>
+            <FormattedNumber
+              value="1"
+              visibleDecimals={0}
+              variant="secondary12"
+              color="text.primary"
+            />
+            <Typography variant="tooltip">{tokenInSymbol}</Typography>
+            <SvgIcon color="primary" sx={{ fontSize: '12px' }}>
+              <ArrowNarrowRightIcon />
+            </SvgIcon>
+            <FormattedNumber
+              value={exchangeRate || '0'}
+              visibleDecimals={4}
+              variant="secondary12"
+              color="text.primary"
+            />
+            <Typography variant="tooltip">{tokenOutSymbol}</Typography>
+          </Stack>
+        )}
+      </Stack>
+    </Stack>
+  );
+};

src/components/transactions/AssetInput.tsx

@@ -85,6 +85,7 @@ export interface AssetInputProps<T extends Asset = Asset> {
   selectOptionHeader?: ReactNode;
   selectOption?: (asset: T) => ReactNode;
   sx?: BoxProps;
+  exchangeRateComponent?: ReactNode;
 }
 
 export const AssetInput = <T extends Asset = Asset>({
@@ -106,6 +107,7 @@ export const AssetInput = <T extends Asset = Asset>({
   selectOptionHeader,
   selectOption,
   sx = {},
+  exchangeRateComponent,
 }: AssetInputProps<T>) => {
   const theme = useTheme();
   const trackEvent = useRootStore((store) => store.trackEvent);
@@ -131,13 +133,12 @@ export const AssetInput = <T extends Asset = Asset>({
 
       <Box
         sx={(theme) => ({
-          p: '8px 12px',
           border: `1px solid ${theme.palette.divider}`,
           borderRadius: '6px',
-          mb: 1,
+          overflow: 'hidden',
         })}
       >
-        <Box sx={{ display: 'flex', alignItems: 'center', mb: 0.5 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', mb: 0.5, px: 3, py: 2 }}>
           {loading ? (
             <Box sx={{ flex: 1 }}>
               <CircularProgress color="inherit" size="16px" />
@@ -284,7 +285,7 @@ export const AssetInput = <T extends Asset = Asset>({
           )}
         </Box>
 
-        <Box sx={{ display: 'flex', alignItems: 'center', height: '16px' }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', height: '16px', px: 3, py: 2, mb: 1 }}>
           {loading ? (
             <Box sx={{ flex: 1 }} />
           ) : (
@@ -330,6 +331,18 @@ export const AssetInput = <T extends Asset = Asset>({
             </>
           )}
         </Box>
+        {exchangeRateComponent && (
+          <Box
+            sx={{
+              background: theme.palette.background.surface,
+              borderTop: `1px solid ${theme.palette.divider}`,
+              px: 3,
+              py: 2,
+            }}
+          >
+            {exchangeRateComponent}
+          </Box>
+        )}
       </Box>
     </Box>
   );

src/components/transactions/Supply/SupplyModal.tsx

@@ -5,7 +5,7 @@ import { ModalContextType, ModalType, useModalContext } from 'src/hooks/useModal
 
 import { BasicModal } from '../../primitives/BasicModal';
 import { ModalWrapper } from '../FlowCommons/ModalWrapper';
-import { SupplyModalContent } from './SupplyModalContent';
+import { SupplyModalContentWrapper } from './SupplyModalContent';
 
 export const SupplyModal = () => {
   const { type, close, args } = useModalContext() as ModalContextType<{
@@ -20,7 +20,7 @@ export const SupplyModal = () => {
         underlyingAsset={args.underlyingAsset}
         requiredPermission={PERMISSION.DEPOSITOR}
       >
-        {(params) => <SupplyModalContent {...params} />}
+        {(params) => <SupplyModalContentWrapper {...params} />}
       </ModalWrapper>
     </BasicModal>
   );