diff --git a/libs/defi/oeth/src/components/Swap/SwapRouteAccordion.tsx b/libs/defi/oeth/src/components/Swap/SwapRouteAccordion.tsx
index 96d6816cc..b6e06e465 100644
--- a/libs/defi/oeth/src/components/Swap/SwapRouteAccordion.tsx
+++ b/libs/defi/oeth/src/components/Swap/SwapRouteAccordion.tsx
@@ -31,7 +31,6 @@ export function SwapRouteAccordion({ routes, selected, onSelect, sx }: Props) {
backgroundColor: 'grey.900',
paddingInline: 2,
paddingBlock: 1,
- borderColor: 'grey.800',
},
...sx,
diff --git a/libs/defi/oeth/src/components/Swap/SwapRouteAccordionItem.tsx b/libs/defi/oeth/src/components/Swap/SwapRouteAccordionItem.tsx
index 2ee3f1c41..a5583d354 100644
--- a/libs/defi/oeth/src/components/Swap/SwapRouteAccordionItem.tsx
+++ b/libs/defi/oeth/src/components/Swap/SwapRouteAccordionItem.tsx
@@ -27,23 +27,11 @@ export function SwapRouteAccordionItem({
borderRadius: 1,
backgroundColor: 'background.paper',
border: '1px solid',
+ // @ts-expect-error complains that color is redefined in hover state
borderColor: 'grey.800',
paddingInline: 2,
paddingBlock: 1,
- ':hover': {
- borderColor: 'transparent',
- background: (theme) =>
- `linear-gradient(${theme.palette.grey[800]}, ${
- theme.palette.grey[800]
- }) padding-box,
- linear-gradient(90deg, ${alpha(
- theme.palette.primary.main,
- 0.4,
- )} 0%, ${alpha(
- theme.palette.primary.dark,
- 0.4,
- )} 100%) border-box;`,
- },
+
...(selected === index
? {
borderColor: 'transparent',
@@ -51,7 +39,22 @@ export function SwapRouteAccordionItem({
`linear-gradient(${theme.palette.grey[800]}, ${theme.palette.grey[800]}) padding-box,
linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.dark} 100%) border-box;`,
}
- : {}),
+ : {
+ ':hover': {
+ borderColor: 'transparent',
+ background: (theme) =>
+ `linear-gradient(${theme.palette.grey[800]}, ${
+ theme.palette.grey[800]
+ }) padding-box,
+ linear-gradient(90deg, ${alpha(
+ theme.palette.primary.main,
+ 0.4,
+ )} 0%, ${alpha(
+ theme.palette.primary.dark,
+ 0.4,
+ )} 100%) border-box;`,
+ },
+ }),
}}
onClick={() => onSelect(index)}
role="button"
@@ -65,7 +68,7 @@ export function SwapRouteAccordionItem({
= {
component: APY,
title: 'OETH/APY',
args: {
- tokenIcon: ' /images/oeth.svg',
value: 8.71,
balance: 250.1937,
pendingYield: 0.0023,
diff --git a/libs/defi/oeth/src/components/shared/APY.tsx b/libs/defi/oeth/src/components/shared/APY.tsx
index 15ef8e6f0..362a5608f 100644
--- a/libs/defi/oeth/src/components/shared/APY.tsx
+++ b/libs/defi/oeth/src/components/shared/APY.tsx
@@ -10,26 +10,18 @@ import {
Stack,
Typography,
} from '@mui/material';
-import { Icon } from '@origin/shared/components';
import { useIntl } from 'react-intl';
const days = [7, 30];
interface Props {
value: number;
- tokenIcon: string;
balance: number;
pendingYield: number;
earnings: number;
}
-export function APY({
- value,
- tokenIcon,
- balance,
- pendingYield,
- earnings,
-}: Props) {
+export function APY({ value, balance, pendingYield, earnings }: Props) {
const intl = useIntl();
const [selectedPeriod, setSelectedPeriod] = useState(30);
const [anchorEl, setAnchorEl] = React.useState(null);
@@ -126,7 +118,8 @@ export function APY({
marginInlineStart: 1,
alignSelf: 'center',
position: 'relative',
- height: '26px',
+ height: '1rem',
+ width: '1rem',
borderRadius: '100%',
top: '-2px',
}}
@@ -147,7 +140,6 @@ export function APY({
direction="row"
>
@@ -191,7 +183,6 @@ export function APY({
function ValueContainer({
text,
value,
- icon,
}: {
text: string;
value: string;
@@ -219,17 +210,6 @@ function ValueContainer({
},
}}
>
- {icon ? (
-
- ) : undefined}
-
{value}
diff --git a/libs/defi/oeth/src/views/History.tsx b/libs/defi/oeth/src/views/History.tsx
index 3d9ab326e..23f534ce3 100644
--- a/libs/defi/oeth/src/views/History.tsx
+++ b/libs/defi/oeth/src/views/History.tsx
@@ -3,13 +3,7 @@ import { APY, HistoryCard } from '../components';
export function HistoryView() {
return (
<>
-
+
>
);
diff --git a/libs/defi/oeth/src/views/Swap.tsx b/libs/defi/oeth/src/views/Swap.tsx
index 13b0bf7cb..8b5625709 100644
--- a/libs/defi/oeth/src/views/Swap.tsx
+++ b/libs/defi/oeth/src/views/Swap.tsx
@@ -5,13 +5,7 @@ import { APY, Swap } from '../components';
export function SwapView() {
return (
<>
-
+
diff --git a/libs/defi/oeth/src/views/Wrap.tsx b/libs/defi/oeth/src/views/Wrap.tsx
index e1527e6a2..364480292 100644
--- a/libs/defi/oeth/src/views/Wrap.tsx
+++ b/libs/defi/oeth/src/views/Wrap.tsx
@@ -8,13 +8,7 @@ export function WrapView() {
const intl = useIntl();
return (
<>
-
+
theme.shape.borderRadius,
@@ -91,8 +94,6 @@ export function Input({
alignSelf: 'end',
borderImageWidth: 0,
boxSizing: 'border-box',
- position: 'relative',
- bottom: '-4px',
'& .MuiInputBase-input': {
padding: 0,
lineHeight: '1.5rem',
@@ -114,10 +115,7 @@ export function Input({
}}
data-testid="swap-input"
/>
-
+
- {intl.formatMessage(
- { defaultMessage: 'Balance: {number}' },
- { number: intl.formatNumber(baseTokenBalance, currencyFormat) },
- )}
- {/*
+ {intl.formatMessage(
+ { defaultMessage: 'Balance: {number}' },
+ {
+ number: intl.formatNumber(baseTokenBalance || 0, currencyFormat),
+ },
+ )}
+ {/*
max
*/}
-
- ) : undefined}
+
);
diff --git a/libs/shared/components/src/Cards/SwapCard/Output.tsx b/libs/shared/components/src/Cards/SwapCard/Output.tsx
index e9f24a3f1..fa36df1be 100644
--- a/libs/shared/components/src/Cards/SwapCard/Output.tsx
+++ b/libs/shared/components/src/Cards/SwapCard/Output.tsx
@@ -41,6 +41,9 @@ export function Output({
backgroundColor: (theme) => alpha(theme.palette.grey[400], 0.2),
...cardStyles,
paddingBlock: 3.0625,
+ height: '6.6875rem',
+ maxHeight: '6.6875rem',
+ boxSizing: 'border-box',
}}
>
@@ -54,7 +57,6 @@ export function Output({
fontStyle: 'normal',
fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif',
lineHeight: '1.5rem',
- marginBlockStart: 0.4,
color: (theme) =>
exchangeTokenQuantity === 0
? theme.palette.text.secondary
diff --git a/libs/shared/components/src/Cards/SwapCard/SwapButton.tsx b/libs/shared/components/src/Cards/SwapCard/SwapButton.tsx
index 2aee2c706..b1e586d50 100644
--- a/libs/shared/components/src/Cards/SwapCard/SwapButton.tsx
+++ b/libs/shared/components/src/Cards/SwapCard/SwapButton.tsx
@@ -18,16 +18,15 @@ export function SwapButton({ onClick, sx, ...rest }: Props) {
zIndex: 2,
width: { md: '3rem', xs: '2rem' },
height: { md: '3rem', xs: '2rem' },
- fill: (theme) => theme.palette.background.paper,
strokeWidth: (theme) => theme.typography.pxToRem(2),
stroke: (theme) => theme.palette.grey[700],
transform: { xs: 'translateY(-20%)', md: 'translateY(-8%)' },
- backgroundColor: (theme) => theme.palette.divider,
+ backgroundColor: (theme) => theme.palette.background.paper,
'& img': {
transition: (theme) => theme.transitions.create('transform'),
},
'&:hover': {
- backgroundColor: (theme) => theme.palette.background.default,
+ backgroundColor: (theme) => theme.palette.background.paper,
'& img': {
transform: 'rotate(-180deg)',
},
diff --git a/libs/shared/components/src/Cards/SwapCard/SwapCard.tsx b/libs/shared/components/src/Cards/SwapCard/SwapCard.tsx
index bc2e2a65e..13e3ff0c9 100644
--- a/libs/shared/components/src/Cards/SwapCard/SwapCard.tsx
+++ b/libs/shared/components/src/Cards/SwapCard/SwapCard.tsx
@@ -59,7 +59,13 @@ export function SwapCard({
}: Props) {
const [isSwapped, setSwapState] = useState(false);
return (
-
+
diff --git a/libs/shared/theme/src/theme.tsx b/libs/shared/theme/src/theme.tsx
index 9b90ffdd0..9271ac922 100644
--- a/libs/shared/theme/src/theme.tsx
+++ b/libs/shared/theme/src/theme.tsx
@@ -140,6 +140,13 @@ export const theme = extendTheme({
},
},
},
+ MuiPaper: {
+ styleOverrides: {
+ root: {
+ backgroundImage: 'none',
+ },
+ },
+ },
MuiTab: {
styleOverrides: {
root: ({ theme }) => ({
@@ -246,11 +253,12 @@ export const theme = extendTheme({
borderRadius: theme.shape.borderRadius,
backgroundColor: theme.palette.grey[900],
border: '1px solid',
- borderColor: alpha(theme.palette.grey[200], 0.2),
+ borderColor: theme.palette.grey[800],
boxShadow: 'none',
'&:before': {
height: 0,
},
+ backgroundImage: 'none',
}),
},
},