Merge pull request #42 from OriginProtocol/feat/redeem-page

[TAS-270] Feat/redeem page

apps/oeth/src/routes.ts

@@ -1,4 +1,5 @@
 import { HistoryView } from '@origin/oeth/history';
+import { RedeemView } from '@origin/oeth/redeem';
 import { SwapView } from '@origin/oeth/swap';
 import { defineMessage } from 'react-intl';
 
@@ -16,6 +17,11 @@ export const routes: RouteObject[] = [
         Component: SwapView,
         handle: { label: defineMessage({ defaultMessage: 'Swap' }) },
       },
+      {
+        path: '/redeem',
+        Component: RedeemView,
+        handle: { label: defineMessage({ defaultMessage: 'Redeem' }) },
+      },
       {
         path: '/history',
         Component: HistoryView,

libs/oeth/redeem/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/oeth/redeem/.eslintrc.json

@@ -0,0 +1,34 @@
+{
+  "extends": [
+    "plugin:@nx/react",
+    "../../../.eslintrc.json"
+  ],
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts",
+        "*.tsx",
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {}
+    }
+  ]
+}

libs/oeth/redeem/README.md

@@ -0,0 +1,7 @@
+# redeem
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test redeem` to execute the unit tests via [Jest](https://jestjs.io).

libs/oeth/redeem/project.json

@@ -0,0 +1,20 @@
+{
+  "name": "oeth-redeem",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/oeth/redeem/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": [
+        "{options.outputFile}"
+      ],
+      "options": {
+        "lintFilePatterns": [
+          "libs/oeth/redeem/**/*.{ts,tsx,js,jsx}"
+        ]
+      }
+    }
+  }
+}

libs/oeth/redeem/src/components/Mix.tsx

@@ -0,0 +1,43 @@
+import { Box, Stack } from '@mui/material';
+
+import type { SxProps } from '@mui/material';
+
+interface Props {
+  size?: number;
+  sx?: SxProps;
+}
+
+export function Mix({ size = 2, sx }: Props) {
+  const imgSrc = [
+    '/images/currency/weth-icon-small.png',
+    '/images/currency/reth-icon-small.png',
+    '/images/currency/steth-icon-small.svg',
+    '/images/currency/frxeth-icon-small.svg',
+  ];
+
+  return (
+    <Stack
+      direction="row"
+      sx={{
+        width: `calc(${imgSrc.length * size}rem - ${
+          (size / 2.66666) * (imgSrc.length - 1)
+        }rem)`,
+        ...sx,
+      }}
+    >
+      {imgSrc.map((img, index, arr) => (
+        <Box
+          key={img}
+          sx={{
+            height: `${size}rem`,
+            width: `${size}rem`,
+            zIndex: arr.length - index,
+            transform: `translateX(-${(index * size) / 2.66666}rem)`,
+          }}
+          src={img}
+          component="img"
+        />
+      ))}
+    </Stack>
+  );
+}

libs/oeth/redeem/src/components/RedeemInfo.tsx

@@ -0,0 +1,43 @@
+import { Box, Tooltip, Typography } from '@mui/material';
+import { useIntl } from 'react-intl';
+
+import type { Theme } from '@mui/material';
+
+export function RedeemInfo() {
+  const intl = useIntl();
+
+  return (
+    <Tooltip
+      title={
+        <Typography color="text.secondary" variant="body2">
+          {intl.formatMessage({
+            defaultMessage: 'Redeem OETH for the basket of underlying assets',
+          })}
+        </Typography>
+      }
+      componentsProps={{
+        tooltip: {
+          sx: {
+            paddingInline: 2,
+            paddingBlock: 1.5,
+            borderRadius: 2,
+            border: '1px solid',
+            borderColor: (theme) => theme.palette.grey[500],
+            boxShadow: (theme: Theme) => theme.shadows[23],
+          },
+        },
+      }}
+    >
+      <Box
+        component="img"
+        src="/images/info.svg"
+        data-testid="swap-route-info"
+        sx={{
+          width: (theme) => theme.typography.pxToRem(12),
+          height: (theme) => theme.typography.pxToRem(12),
+          color: (theme) => theme.palette.text.secondary,
+        }}
+      ></Box>
+    </Tooltip>
+  );
+}

libs/oeth/redeem/src/components/RedeemRoute.tsx

@@ -0,0 +1,61 @@
+import { Collapse, Stack, Typography } from '@mui/material';
+import { Card, cardStyles } 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';
+
+export function RedeemRoute(props: Omit<CardProps, 'children'>) {
+  const intl = useIntl();
+  const [{ amountOut }] = useRedeemState();
+
+  const hasContent = amountOut > 0n;
+
+  return (
+    <Card
+      {...props}
+      sx={{
+        border: '1px solid',
+        borderColor: (theme) => theme.palette.background.default,
+        backgroundColor: 'grey.900',
+        borderRadius: 1,
+        ...props?.sx,
+      }}
+      title={
+        <Stack
+          direction="row"
+          gap={0.5}
+          component={Typography}
+          variant="body2"
+          alignItems="center"
+          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 />
+        </Stack>
+      </Collapse>
+    </Card>
+  );
+}

libs/oeth/redeem/src/components/RedeemSplitCard.tsx

@@ -0,0 +1,96 @@
+import {
+  Box,
+  Card,
+  CardHeader,
+  Skeleton,
+  Stack,
+  Typography,
+} from '@mui/material';
+import { usePrices } from '@origin/shared/providers';
+import { currencyFormat, formatAmount } from '@origin/shared/utils';
+import { useIntl } from 'react-intl';
+import { formatUnits } from 'viem';
+
+import { useRedeemState } from '../state';
+import { Mix } from './Mix';
+
+import type { CardProps } from '@origin/shared/components';
+
+export const RedeemSplitCard = (
+  props: Omit<CardProps, 'children' | 'title'>,
+) => {
+  const intl = useIntl();
+  const { data: prices, isLoading: isPricesLoading } = usePrices();
+  const [{ split, isEstimateLoading }] = useRedeemState();
+
+  return (
+    <Card
+      {...props}
+      sx={{
+        padding: 1.5,
+        boxShadow: 'none',
+        borderRadius: 1,
+        height: 1,
+        ...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',
+              })}
+            </Typography>
+          </Stack>
+        }
+      />
+      <Stack spacing={1} pt={3}>
+        {split?.map((s) => {
+          const converted =
+            +formatUnits(s.amount, s.token.decimals) * prices?.[s.token.symbol];
+
+          return (
+            <Stack
+              key={s.token.symbol}
+              direction="row"
+              justifyContent="space-between"
+              alignItems="center"
+            >
+              <Stack direction="row" alignItems="center" spacing={1}>
+                <Box component="img" src={s.token.icon} />
+                <Typography>{s.token.symbol}</Typography>
+              </Stack>
+              <Stack
+                direction="row"
+                alignItems="center"
+                justifyContent="flex-end"
+                spacing={2}
+              >
+                <Typography color="primary.contrastText">
+                  {isEstimateLoading ? (
+                    <Skeleton width={80} />
+                  ) : (
+                    formatAmount(s.amount, s.token.decimals)
+                  )}
+                </Typography>
+                {isPricesLoading || isEstimateLoading ? (
+                  <Skeleton width={80} />
+                ) : (
+                  <Typography sx={{ minWidth: 100, textAlign: 'end' }}>
+                    {intl.formatNumber(converted, currencyFormat)}
+                  </Typography>
+                )}
+              </Stack>
+            </Stack>
+          );
+        })}
+      </Stack>
+    </Card>
+  );
+};