diff --git a/apps/oeth/src/App.tsx b/apps/oeth/src/App.tsx
index 4d9665d08..e6f6fbea7 100644
--- a/apps/oeth/src/App.tsx
+++ b/apps/oeth/src/App.tsx
@@ -7,7 +7,7 @@ export const App = () => {
return (
<>
-
+
{label}
- theme.typography.pxToRem(20),
- fontStyle: 'normal',
- fontWeight: 700,
- lineHeight: '2rem',
- textAlign: 'center',
- }}
- >
+
{isLoading ? : value}
diff --git a/libs/oeth/history/src/components/HistoryButton.tsx b/libs/oeth/history/src/components/HistoryButton.tsx
index 54fd33bfc..c92c8388c 100644
--- a/libs/oeth/history/src/components/HistoryButton.tsx
+++ b/libs/oeth/history/src/components/HistoryButton.tsx
@@ -29,10 +29,10 @@ export function HistoryFilterButton({
borderRadius: 8,
paddingInline: 2,
paddingBlock: 0.5,
- fontSize: (theme) => theme.typography.pxToRem(12),
+ fontSize: 12,
fontWeight: 500,
fontStyle: 'normal',
- lineHeight: (theme) => theme.typography.pxToRem(20),
+ lineHeight: 1.6,
':hover': {
background: (theme) => alpha(theme.palette.common.white, 0.04),
},
diff --git a/libs/oeth/history/src/components/HistoryFilters.tsx b/libs/oeth/history/src/components/HistoryFilters.tsx
index ce1635b64..a0efc550a 100644
--- a/libs/oeth/history/src/components/HistoryFilters.tsx
+++ b/libs/oeth/history/src/components/HistoryFilters.tsx
@@ -17,9 +17,9 @@ import { defineMessage, useIntl } from 'react-intl';
import { HistoryFilterButton } from './HistoryButton';
const styles = {
- fontSize: '0.75rem',
+ fontSize: 12,
fontWeight: 500,
- lineHeight: '1.25rem',
+ lineHeight: 1.6,
};
const filterOptions = [
diff --git a/libs/oeth/redeem/src/components/RedeemSplitCard.tsx b/libs/oeth/redeem/src/components/RedeemSplitCard.tsx
index 4a950f74b..cf0aae7f3 100644
--- a/libs/oeth/redeem/src/components/RedeemSplitCard.tsx
+++ b/libs/oeth/redeem/src/components/RedeemSplitCard.tsx
@@ -24,6 +24,8 @@ import { Mix } from './Mix';
import type { StackProps } from '@mui/material';
+import type { RedeemEstimate } from '../types';
+
export const RedeemSplitCard = (props: Omit) => {
const intl = useIntl();
const theme = useTheme();
@@ -56,28 +58,42 @@ export const RedeemSplitCard = (props: Omit) => {
)}
-
+
-
- {isEstimateLoading ? (
-
- ) : (
- formatAmount(amountOut, MIX_TOKEN.decimals)
- )}
-
-
- {isEstimateLoading ? (
-
- ) : (
- `(${intl.formatNumber(convertedAmount, currencyFormat)})`
- )}
-
+
+
+ {isEstimateLoading ? (
+
+ ) : (
+ formatAmount(amountOut, MIX_TOKEN.decimals)
+ )}
+
+
+ {isEstimateLoading ? (
+
+ ) : (
+ `(${intl.formatNumber(convertedAmount, currencyFormat)})`
+ )}
+
+
+
+
+ {intl.formatMessage({ defaultMessage: 'Gas:' })}
+
+
+ {isEstimateLoading || gasPriceLoading ? (
+
+ ) : (
+ `~${intl.formatNumber(gasPrice?.gasCostUsd, currencyFormat)}`
+ )}
+
+
{intl.formatMessage({
@@ -85,32 +101,6 @@ export const RedeemSplitCard = (props: Omit) => {
})}
-
-
-
- {intl.formatMessage({ defaultMessage: 'Gas:' })}
-
-
- {isEstimateLoading || gasPriceLoading ? (
-
- ) : (
- `~${intl.formatNumber(gasPrice?.gasCostUsd, currencyFormat)}`
- )}
-
-
- {/*
-
- {intl.formatMessage({ defaultMessage: 'Wait time:' })}
-
-
- {isEstimateLoading ? (
-
- ) : (
- intl.formatMessage({ defaultMessage: '~1 min' })
- )}
-
- */}
-
) => {
- {split?.map((s) => {
- const converted =
- +formatUnits(s.amount, s.token.decimals) * prices?.[s.token.symbol];
-
- return (
-
-
-
- {s.token.symbol}
-
-
-
- {isEstimateLoading ? (
-
- ) : (
- formatAmount(s.amount, s.token.decimals)
- )}
-
- {isPricesLoading || isEstimateLoading ? (
-
- ) : (
-
- {intl.formatNumber(converted, currencyFormat)}
-
- )}
-
-
- );
- })}
+ {split?.map((s) => (
+
+ ))}
);
};
+
+type SplitRowProps = {
+ estimate: RedeemEstimate;
+ price: number;
+ isEstimateLoading: boolean;
+ isPricesLoading: boolean;
+} & StackProps;
+
+function SplitRow({
+ estimate,
+ price,
+ isEstimateLoading,
+ isPricesLoading,
+ ...rest
+}: SplitRowProps) {
+ const intl = useIntl();
+
+ const converted =
+ +formatUnits(estimate.amount, estimate.token.decimals) * price;
+
+ return (
+
+
+
+ {estimate.token.symbol}
+
+
+
+ {isEstimateLoading ? (
+
+ ) : (
+ formatAmount(estimate.amount, estimate.token.decimals)
+ )}
+
+ {isPricesLoading || isEstimateLoading ? (
+
+ ) : (
+
+ {intl.formatNumber(converted, currencyFormat)}
+
+ )}
+
+
+ );
+}
diff --git a/libs/oeth/redeem/src/views/RedeemView.tsx b/libs/oeth/redeem/src/views/RedeemView.tsx
index 0b4788c64..19e04a794 100644
--- a/libs/oeth/redeem/src/views/RedeemView.tsx
+++ b/libs/oeth/redeem/src/views/RedeemView.tsx
@@ -36,13 +36,13 @@ const tokenInputStyles = {
boxSizing: 'border-box',
'& .MuiInputBase-input': {
padding: 0,
- lineHeight: '1.875rem',
boxSizing: 'border-box',
fontStyle: 'normal',
- fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif',
- fontSize: '1.5rem',
+ fontFamily: 'Sailec, sans-serif',
+ fontSize: 24,
+ lineHeight: 1.25,
fontWeight: 700,
- height: '1.5rem',
+ height: 24,
color: 'text.primary',
'&::placeholder': {
color: 'text.secondary',
@@ -115,7 +115,7 @@ function RedeemViewWrapped() {
isConnected={isConnected}
isAmountDisabled={isRedeemLoading}
inputProps={{ sx: tokenInputStyles }}
- tokenButtonProps={{ sx: { minWidth: 0, maxWidth: 120 } }}
+ tokenButtonProps={{ sx: { minWidth: 100, maxWidth: 100 } }}
sx={{
paddingBlock: 2.5,
paddingBlockStart: 2.625,
diff --git a/libs/oeth/shared/src/components/GasPopover.tsx b/libs/oeth/shared/src/components/GasPopover.tsx
index 6e0c143b5..7a7cdab56 100644
--- a/libs/oeth/shared/src/components/GasPopover.tsx
+++ b/libs/oeth/shared/src/components/GasPopover.tsx
@@ -133,7 +133,7 @@ export function GasPopover({
sx={{
gridColumn: 'span 2',
mt: 1.25,
- fontSize: (theme) => theme.typography.pxToRem(12),
+ fontSize: 12,
color: (theme) => theme.palette.warning.main,
fontWeight: 400,
fontStyle: 'normal',
diff --git a/libs/oeth/swap/src/components/ApyHeader.tsx b/libs/oeth/swap/src/components/ApyHeader.tsx
index ea104792d..04c01e999 100644
--- a/libs/oeth/swap/src/components/ApyHeader.tsx
+++ b/libs/oeth/swap/src/components/ApyHeader.tsx
@@ -40,17 +40,13 @@ export const ApyHeader = (props: StackProps) => {
direction="row"
alignItems="center"
justifyContent="space-between"
- p={(theme) => theme.spacing(2, 3)}
+ px={{ xs: 2, md: 3 }}
+ py={{ xs: 1.5, md: 2 }}
>
{apyLoading ? (
) : (
-
+
{intl.formatNumber(
trailing.value === 30 ? apy.apy30DayAvg : apy.apy7DayAvg,
{ minimumFractionDigits: 2, maximumFractionDigits: 2 },
@@ -61,17 +57,34 @@ export const ApyHeader = (props: StackProps) => {