Merge branch 'main' into feat/governance

OriginProtocol · Sep 19, 2023 · c75ca60 · c75ca60
2 parents d418a66 + 2bdd1a9
commit c75ca60
Show file tree

Hide file tree

Showing 15 changed files with 397 additions and 499 deletions.
diff --git a/libs/oeth/redeem/src/components/Mix.tsx b/libs/oeth/redeem/src/components/Mix.tsx
@@ -7,7 +7,7 @@ interface Props {
   sx?: SxProps;
 }
 
-export function Mix({ size = 2, sx }: Props) {
+export function Mix({ size = 1.5, sx }: Props) {
   const imgSrc = [
     '/images/currency/weth-icon-small.png',
     '/images/currency/reth-icon-small.png',

diff --git a/libs/oeth/redeem/src/components/RedeemInfo.tsx b/libs/oeth/redeem/src/components/RedeemInfo.tsx
diff --git a/libs/oeth/redeem/src/components/RedeemRoute.tsx b/libs/oeth/redeem/src/components/RedeemRoute.tsx
@@ -1,31 +1,50 @@
-import { Collapse, Stack, Typography } from '@mui/material';
-import { Card, cardStyles } from '@origin/shared/components';
+import { Collapse, Skeleton, Stack, Typography } from '@mui/material';
+import { InfoTooltip } from '@origin/shared/components';
 import { useIntl } from 'react-intl';
 
 import { useRedeemState } from '../state';
-import { RedeemInfo } from './RedeemInfo';
 import { RedeemSplitCard } from './RedeemSplitCard';
-import { RouteCard } from './RouteCard';
 
-import type { CardProps } from '@mui/material';
+import type { StackProps } from '@mui/material';
 
-export function RedeemRoute(props: Omit<CardProps, 'children'>) {
+export function RedeemRoute(props: Omit<StackProps, 'children'>) {
   const intl = useIntl();
-  const [{ amountOut }] = useRedeemState();
+  const [{ amountOut, isEstimateLoading }] = useRedeemState();
 
   const hasContent = amountOut > 0n;
 
   return (
-    <Card
+    <Stack
       {...props}
       sx={{
-        border: '1px solid',
-        borderColor: (theme) => theme.palette.background.default,
         backgroundColor: 'grey.900',
         borderRadius: 1,
+        padding: 2,
         ...props?.sx,
       }}
-      title={
+    >
+      {isEstimateLoading ? (
+        <Stack
+          direction="row"
+          alignItems="center"
+          gap={1}
+          sx={(theme) => ({ color: theme.palette.primary.contrastText })}
+        >
+          <Skeleton
+            variant="circular"
+            width="0.5rem"
+            height="0.5rem"
+            sx={{
+              backgroundColor: (theme) => theme.palette.primary.contrastText,
+            }}
+          />
+          <Typography variant="body2">
+            {intl.formatMessage({
+              defaultMessage: 'Estimating...',
+            })}
+          </Typography>
+        </Stack>
+      ) : (
         <Stack
           direction="row"
           gap={0.5}
@@ -35,27 +54,16 @@ export function RedeemRoute(props: Omit<CardProps, 'children'>) {
           color="primary.contrastText"
         >
           {intl.formatMessage({ defaultMessage: 'Route' })}
-          <RedeemInfo />
-        </Stack>
-      }
-      sxCardTitle={{ borderBottom: 'none', paddingBlock: 1, paddingInline: 2 }}
-      sxCardContent={{
-        ...(hasContent
-          ? cardStyles
-          : {
-              p: 0,
-              paddingBlock: 0,
-              paddingInline: 0,
-              '&:last-child': { pb: 0 },
-            }),
-      }}
-    >
-      <Collapse in={hasContent}>
-        <Stack spacing={1}>
-          <RouteCard />
-          <RedeemSplitCard />
+          <InfoTooltip
+            tooltipLabel={intl.formatMessage({
+              defaultMessage: 'Redeem OETH for the basket of underlying assets',
+            })}
+          />
         </Stack>
+      )}
+      <Collapse in={hasContent} sx={{ pt: hasContent ? 2 : 0 }}>
+        <RedeemSplitCard />
       </Collapse>
-    </Card>
+    </Stack>
   );
 }
diff --git a/libs/oeth/redeem/src/components/RedeemSplitCard.tsx b/libs/oeth/redeem/src/components/RedeemSplitCard.tsx
@@ -1,56 +1,129 @@
+import { Box, Divider, Skeleton, Stack, Typography } from '@mui/material';
+import { InfoTooltip } from '@origin/shared/components';
+import { tokens } from '@origin/shared/contracts';
+import { useGasPrice, usePrices } from '@origin/shared/providers';
 import {
-  Box,
-  Card,
-  CardHeader,
-  Skeleton,
-  Stack,
-  Typography,
-} from '@mui/material';
-import { usePrices } from '@origin/shared/providers';
-import { currencyFormat, formatAmount } from '@origin/shared/utils';
+  currencyFormat,
+  formatAmount,
+  quantityFormat,
+} from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
 import { formatUnits } from 'viem';
 
+import { MIX_TOKEN } from '../constants';
 import { useRedeemState } from '../state';
 import { Mix } from './Mix';
 
-import type { CardProps } from '@origin/shared/components';
+import type { StackProps } from '@mui/material';
 
-export const RedeemSplitCard = (
-  props: Omit<CardProps, 'children' | 'title'>,
-) => {
+export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
   const intl = useIntl();
   const { data: prices, isLoading: isPricesLoading } = usePrices();
-  const [{ split, isEstimateLoading }] = useRedeemState();
+  const [{ amountOut, gas, rate, split, isEstimateLoading }] = useRedeemState();
+  const { data: gasPrice, isLoading: gasPriceLoading } = useGasPrice(gas);
+
+  const estimatedAmount = +formatUnits(amountOut, MIX_TOKEN.decimals);
+  const convertedAmount =
+    (prices?.[tokens.mainnet.WETH.symbol] ?? 1) * estimatedAmount;
 
   return (
-    <Card
-      {...props}
+    <Stack
       sx={{
-        padding: 1.5,
-        boxShadow: 'none',
         borderRadius: 1,
-        height: 1,
+        border: '1px solid',
+        borderColor: 'transparent',
+        background: (theme) =>
+          `linear-gradient(${theme.palette.grey[800]}, ${theme.palette.grey[800]}) padding-box,
+ linear-gradient(90deg, var(--mui-palette-primary-main) 0%, var(--mui-palette-primary-dark) 100%) border-box;`,
         ...props?.sx,
       }}
     >
-      <CardHeader
-        sx={{
-          padding: (theme) => theme.spacing(0.5, 0, 1.5, 0),
-          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
-        }}
-        title={
-          <Stack direction="row" alignItems="center" spacing={1}>
-            <Mix />
-            <Typography>
-              {intl.formatMessage({
-                defaultMessage: 'Redeem basket of assets',
-              })}
+      <Stack direction="row" alignItems="center" spacing={1} px={2} py={1.5}>
+        <Mix />
+        <Stack flex={1} direction="column">
+          <Stack direction="row" alignItems="baseline" gap={1}>
+            <Typography color="primary.contrastText" variant="body1">
+              {isEstimateLoading ? (
+                <Skeleton width={100} />
+              ) : (
+                formatAmount(amountOut, MIX_TOKEN.decimals)
+              )}
+            </Typography>
+            <Typography color="text.secondary" variant="body2" noWrap>
+              {isEstimateLoading ? (
+                <Skeleton width={60} />
+              ) : (
+                `(${intl.formatNumber(convertedAmount, currencyFormat)})`
+              )}
+            </Typography>
+          </Stack>
+          <Typography>
+            {intl.formatMessage({
+              defaultMessage: 'Redeem for mix via OETH vault',
+            })}
+          </Typography>
+        </Stack>
+        <Stack direction="column" alignItems="flex-end" spacing={0.5}>
+          <Stack direction="row" gap={1} color="text.secondary">
+            <Typography variant="body2">
+              {intl.formatMessage({ defaultMessage: 'Gas:' })}
+            </Typography>
+            <Typography color="primary.contrastText" variant="body2">
+              {isEstimateLoading || gasPriceLoading ? (
+                <Skeleton width={60} />
+              ) : (
+                `~${intl.formatNumber(gasPrice?.gasCostUsd, currencyFormat)}`
+              )}
             </Typography>
           </Stack>
-        }
-      />
-      <Stack spacing={1} pt={3}>
+          <Stack direction="row" gap={1} color="text.secondary">
+            <Typography variant="body2">
+              {intl.formatMessage({ defaultMessage: 'Wait time:' })}
+            </Typography>
+            <Typography color="primary.contrastText" variant="body2">
+              {isEstimateLoading ? (
+                <Skeleton width={60} />
+              ) : (
+                intl.formatMessage({ defaultMessage: '~1 min' })
+              )}
+            </Typography>
+          </Stack>
+        </Stack>
+      </Stack>
+      <Divider />
+      <Stack
+        direction="row"
+        alignItems="center"
+        justifyContent="flex-end"
+        spacing={1}
+        px={1.5}
+        py={1.5}
+      >
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          gap={1}
+          color="text.secondary"
+        >
+          <Typography variant="body2">
+            {intl.formatMessage({ defaultMessage: 'Rate:' })}
+          </Typography>
+          <Typography color="primary.contrastText" variant="body2">
+            {isEstimateLoading ? (
+              <Skeleton width={60} />
+            ) : (
+              `1:${intl.formatNumber(rate, quantityFormat)}`
+            )}
+          </Typography>
+        </Stack>
+        <InfoTooltip
+          tooltipLabel={intl.formatMessage({
+            defaultMessage: 'Exchange rate',
+          })}
+        />
+      </Stack>
+      <Divider />
+      <Stack spacing={2} py={1.5} px={2}>
         {split?.map((s) => {
           const converted =
             +formatUnits(s.amount, s.token.decimals) * prices?.[s.token.symbol];
@@ -91,6 +164,6 @@ export const RedeemSplitCard = (
           );
         })}
       </Stack>
-    </Card>
+    </Stack>
   );
 };