From d5b76ab280f1d7424887574bf19ea7667fa85c8e Mon Sep 17 00:00:00 2001 From: toniocodo Date: Tue, 26 Sep 2023 11:09:48 +0200 Subject: [PATCH 01/23] feat: theming - review theme values - adapt component to use proper theme keys - update spacings - update component structure --- apps/oeth/index.html | 2 +- apps/oeth/src/App.tsx | 28 +- apps/oeth/src/components/Topnav.tsx | 90 ++--- .../history/src/components/APYContainer.tsx | 1 - .../oeth/history/src/components/ChartCard.tsx | 149 ++++---- libs/oeth/history/src/components/Filters.tsx | 12 +- .../history/src/components/HistoryButton.tsx | 1 - .../history/src/components/HistoryCard.tsx | 4 +- .../history/src/components/HistoryCell.tsx | 2 +- .../redeem/src/components/RedeemRoute.tsx | 8 +- .../redeem/src/components/RedeemSplitCard.tsx | 10 +- libs/oeth/redeem/src/views/RedeemView.tsx | 182 +++++----- .../shared/src/components/AccountPopover.tsx | 18 +- .../oeth/shared/src/components/GasPopover.tsx | 14 +- libs/oeth/swap/src/components/ApyChart.tsx | 120 +++---- libs/oeth/swap/src/components/SwapRoute.tsx | 8 +- .../src/components/SwapRouteAccordionItem.tsx | 8 +- .../swap/src/components/SwapRouteCard.tsx | 13 +- .../swap/src/components/TokenSelectModal.tsx | 6 +- libs/oeth/swap/src/views/SwapView.tsx | 270 +++++++-------- libs/shared/assets/files/settings-icon.svg | 21 +- libs/shared/components/src/Cards/Card.tsx | 40 +-- .../components/src/Cards/SwapCard/Input.tsx | 7 +- .../components/src/Cards/SwapCard/Output.tsx | 7 +- .../components/src/Inputs/TokenInput.tsx | 50 +-- .../src/wagmi/components/AccountButton.tsx | 33 +- .../components/OpenAccountModalButton.tsx | 20 +- libs/shared/theme/src/theme.d.ts | 24 +- libs/shared/theme/src/theme.tsx | 324 ++++++++++-------- 29 files changed, 715 insertions(+), 757 deletions(-) diff --git a/apps/oeth/index.html b/apps/oeth/index.html index 84b20c80b..c7ac055cd 100644 --- a/apps/oeth/index.html +++ b/apps/oeth/index.html @@ -2,7 +2,7 @@ - Oeth + OETH { <> - - - - - + ({ + position: 'fixed', + top: 0, + left: 0, + width: 1, + height: theme.mixins.toolbar.height, + })} + /> + + diff --git a/apps/oeth/src/components/Topnav.tsx b/apps/oeth/src/components/Topnav.tsx index ec85e1b58..3e47bd31c 100644 --- a/apps/oeth/src/components/Topnav.tsx +++ b/apps/oeth/src/components/Topnav.tsx @@ -33,15 +33,15 @@ export function Topnav(props: BoxProps) { return ( ({ xs: 'none', - md: '1px solid var(--mui-palette-background-paper)', - }, + md: `1px solid ${theme.palette.background.paper}`, + }), gap: { xs: 1, md: 10 }, alignItems: 'center', - backgroundColor: 'divider', paddingInline: { xs: 1.5, md: 3, @@ -94,16 +94,6 @@ export function Topnav(props: BoxProps) { xs: 4, md: 0, }, - backgroundColor: 'transparent', - minHeight: 0, - overflow: 'visible', - '& .MuiTabs-fixed': { - overflow: 'visible !important', - }, - fontSize: { - xs: '0.875rem', - md: '1rem', - }, '& .MuiTabs-flexContainer': { justifyContent: { xs: 'center', @@ -117,50 +107,15 @@ export function Topnav(props: BoxProps) { key={route?.path ?? '/'} value={route?.path ?? '/'} label={intl.formatMessage(route.handle.label)} - sx={{ - fontSize: { - xs: '0.875rem', - md: '1rem', - }, - position: 'relative', - textTransform: 'none', - boxSizing: 'borderBox', - paddingInline: 2, - paddingBlock: { xs: 1, md: 3 }, - lineHeight: '1.6875rem', - '&:hover:after': { - content: '""', - width: '100%', - height: '2px', - background: (theme) => - `linear-gradient(90deg, ${alpha( - theme.palette.primary.main, - 0.4, - )} 0%, ${alpha(theme.palette.primary.dark, 0.4)} 100%)`, - position: 'absolute', - left: 0, - bottom: 0, - zIndex: 2, - }, - }} /> ))} - a, & > *': { - fontSize: { - xs: '0.75rem', - md: '1rem', - }, - color: (theme) => theme.palette.primary.contrastText, - lineHeight: (theme) => theme.spacing(3), - }, }} > theme.palette.background.paper, - backgroundImage: 'none', }, - color: 'primary.contrastText', - boxSizing: 'border-box', - lineHeight: '1rem', }} > {isMd @@ -205,6 +158,21 @@ export function Topnav(props: BoxProps) { setAccountModalAnchor(e.currentTarget); } }} + sx={{ + borderRadius: 25, + paddingX: { + md: 3, + xs: 2, + }, + paddingY: { + md: 1, + xs: 0.75, + }, + minWidth: 36, + maxWidth: { xs: 36, sm: 160, lg: 220 }, + fontWeight: 500, + minHeight: { xs: 36, md: 44 }, + }} /> {isLoading ? : value} diff --git a/libs/oeth/history/src/components/ChartCard.tsx b/libs/oeth/history/src/components/ChartCard.tsx index 3e4519694..3cc200aaa 100644 --- a/libs/oeth/history/src/components/ChartCard.tsx +++ b/libs/oeth/history/src/components/ChartCard.tsx @@ -1,5 +1,11 @@ -import { Stack, Typography, useTheme } from '@mui/material'; -import { Card } from '@origin/shared/components'; +import { + Card, + CardContent, + CardHeader, + Stack, + Typography, + useTheme, +} from '@mui/material'; import { Line } from 'react-chartjs-2'; import { useIntl } from 'react-intl'; @@ -13,82 +19,81 @@ export function ChartCard(props: Props) { const intl = useIntl(); return ( - {intl.formatMessage({ defaultMessage: 'APY' })}} - > - - - {intl.formatNumber(props.apyPercent / 100, { - style: 'percent', - maximumFractionDigits: 2, - })} - - - {intl.formatDate(new Date(), { - month: 'long', - day: 'numeric', - year: 'numeric', - })} - - + + + + + + {intl.formatNumber(props.apyPercent / 100, { + style: 'percent', + maximumFractionDigits: 2, + })} + + + {intl.formatDate(new Date(), { + month: 'long', + day: 'numeric', + year: 'numeric', + })} + + - ({ - x: intl.formatDate(new Date(item.timestamp), { - month: 'short', - day: 'numeric', - }), - y: item.value, - })), - pointRadius: 0, - tension: 0.5, - }, - ], - }} - /> + }} + data={{ + datasets: [ + { + data: props.apy.map((item) => ({ + x: intl.formatDate(new Date(item.timestamp), { + month: 'short', + day: 'numeric', + }), + y: item.value, + })), + pointRadius: 0, + tension: 0.5, + }, + ], + }} + /> + ); } diff --git a/libs/oeth/history/src/components/Filters.tsx b/libs/oeth/history/src/components/Filters.tsx index 420d8488c..4a3f7a01c 100644 --- a/libs/oeth/history/src/components/Filters.tsx +++ b/libs/oeth/history/src/components/Filters.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import { alpha, @@ -25,7 +25,6 @@ const styles = { fontSize: '0.75rem', fontWeight: 500, lineHeight: '1.25rem', - color: 'primary.contrastText', }; interface Props { @@ -51,7 +50,7 @@ export function HistoryFilters({ onChange }: Props) { return ( <> setAnchorEl(e.currentTarget)}> - Filters + {intl.formatMessage({ defaultMessage: 'Filters' })} - + {intl.formatMessage({ defaultMessage: 'Filters' })} @@ -111,10 +110,7 @@ export function HistoryFilters({ onChange }: Props) { }, }} > - - {label} - - + {label} theme.typography.pxToRem(12), - color: 'primary.contrastText', fontWeight: 500, fontStyle: 'normal', lineHeight: (theme) => theme.typography.pxToRem(20), diff --git a/libs/oeth/history/src/components/HistoryCard.tsx b/libs/oeth/history/src/components/HistoryCard.tsx index 65678ec3d..0e6f22a5b 100644 --- a/libs/oeth/history/src/components/HistoryCard.tsx +++ b/libs/oeth/history/src/components/HistoryCard.tsx @@ -19,7 +19,7 @@ export function HistoryCard() { const { data, isFetching } = useHistoryTableWithFiltersQuery( { - address: address.toLowerCase(), + address: address?.toLowerCase(), filters: filters.length ? filters : undefined, offset: page * PAGE_SIZE, }, @@ -37,7 +37,7 @@ export function HistoryCard() { alignItems="center" justifyContent="space-between" > - + {intl.formatMessage({ defaultMessage: 'OETH transactions' })} diff --git a/libs/oeth/history/src/components/HistoryCell.tsx b/libs/oeth/history/src/components/HistoryCell.tsx index 08fc49609..872921b7b 100644 --- a/libs/oeth/history/src/components/HistoryCell.tsx +++ b/libs/oeth/history/src/components/HistoryCell.tsx @@ -25,7 +25,7 @@ export function HistoryCell(props: Props) { {/* @ts-expect-error whatever */} - {props.type} + {props.type} {intl.formatDate(new Date(props.timestamp))} diff --git a/libs/oeth/redeem/src/components/RedeemRoute.tsx b/libs/oeth/redeem/src/components/RedeemRoute.tsx index 23c90b35e..155619451 100644 --- a/libs/oeth/redeem/src/components/RedeemRoute.tsx +++ b/libs/oeth/redeem/src/components/RedeemRoute.tsx @@ -24,12 +24,7 @@ export function RedeemRoute(props: Omit) { }} > {isEstimateLoading ? ( - ({ color: theme.palette.primary.contrastText })} - > + ) { component={Typography} variant="body2" alignItems="center" - color="primary.contrastText" > {intl.formatMessage({ defaultMessage: 'Route' })} ) => { - + {isEstimateLoading ? ( ) : ( @@ -68,7 +68,7 @@ export const RedeemSplitCard = (props: Omit) => { {intl.formatMessage({ defaultMessage: 'Gas:' })} - + {isEstimateLoading || gasPriceLoading ? ( ) : ( @@ -80,7 +80,7 @@ export const RedeemSplitCard = (props: Omit) => { {intl.formatMessage({ defaultMessage: 'Wait time:' })} - + {isEstimateLoading ? ( ) : ( @@ -108,7 +108,7 @@ export const RedeemSplitCard = (props: Omit) => { {intl.formatMessage({ defaultMessage: 'Rate:' })} - + {isEstimateLoading ? ( ) : ( @@ -145,7 +145,7 @@ export const RedeemSplitCard = (props: Omit) => { justifyContent="flex-end" spacing={2} > - + {isEstimateLoading ? ( ) : ( diff --git a/libs/oeth/redeem/src/views/RedeemView.tsx b/libs/oeth/redeem/src/views/RedeemView.tsx index bac846849..a9490a2e3 100644 --- a/libs/oeth/redeem/src/views/RedeemView.tsx +++ b/libs/oeth/redeem/src/views/RedeemView.tsx @@ -1,6 +1,15 @@ -import { alpha, Box, CircularProgress, Stack, Typography } from '@mui/material'; +import { + alpha, + Box, + Card, + CardContent, + CardHeader, + CircularProgress, + Stack, + Typography, +} from '@mui/material'; import { GasPopover } from '@origin/oeth/shared'; -import { Card, TokenInput } from '@origin/shared/components'; +import { TokenInput } from '@origin/shared/components'; import { tokens } from '@origin/shared/contracts'; import { ConnectedButton, usePrices } from '@origin/shared/providers'; import { composeContexts } from '@origin/shared/utils'; @@ -34,7 +43,7 @@ const tokenInputStyles = { fontSize: '1.5rem', fontWeight: 700, height: '1.5rem', - color: 'primary.contrastText', + color: 'text.primary', '&::placeholder': { color: 'text.secondary', opacity: 1, @@ -77,65 +86,59 @@ function RedeemViewWrapped() { amountIn === 0n; return ( - - - {intl.formatMessage({ defaultMessage: 'Redeem' })} - - - - } - > - - + + + {intl.formatMessage({ defaultMessage: 'Redeem' })} + + + + } + /> + + - `linear-gradient(${theme.palette.grey[900]}, ${ - theme.palette.grey[900] - }) padding-box, + }} + > + + `linear-gradient(${theme.palette.grey[900]}, ${ + theme.palette.grey[900] + }) padding-box, linear-gradient(90deg, ${alpha( theme.palette.primary.main, 0.4, @@ -143,38 +146,39 @@ function RedeemViewWrapped() { theme.palette.primary.dark, 0.4, )} 100%) border-box;`, - }, - '&:focus-within': { - background: (theme) => - `linear-gradient(${theme.palette.grey[900]}, ${theme.palette.grey[900]}) padding-box, + }, + '&:focus-within': { + background: (theme) => + `linear-gradient(${theme.palette.grey[900]}, ${theme.palette.grey[900]}) padding-box, linear-gradient(90deg, var(--mui-palette-primary-main) 0%, var(--mui-palette-primary-dark) 100%) border-box;`, - }, + }, + }} + /> + + + + + - - - - - - - {redeemButtonLoading ? ( - - ) : ( - redeemButtonLabel - )} - + + {redeemButtonLoading ? ( + + ) : ( + redeemButtonLabel + )} + + ); } diff --git a/libs/oeth/shared/src/components/AccountPopover.tsx b/libs/oeth/shared/src/components/AccountPopover.tsx index 8c0962399..df03149d6 100644 --- a/libs/oeth/shared/src/components/AccountPopover.tsx +++ b/libs/oeth/shared/src/components/AccountPopover.tsx @@ -99,7 +99,7 @@ export function AccountPopover({ anchor, setAnchor }: Props) { direction="row" sx={padding} > - + {intl.formatMessage({ defaultMessage: 'Account' })} - ))} + + + + {intl.formatMessage({ defaultMessage: 'APY' })} + + + {limitOptions.map((d) => ( + + ))} + - - } - > + } + /> {apiesLoading ? ( ) : ( - + {intl.formatNumber(apy, { minimumFractionDigits: 2, maximumFractionDigits: 2, @@ -290,7 +284,7 @@ export const ApyChart = (props: StackProps) => { {apiesLoading ? ( ) : ( - + {intl.formatDate(new Date(timestamp), { month: 'short', day: 'numeric', @@ -301,11 +295,17 @@ export const ApyChart = (props: StackProps) => { { ) { }} > {isSwapRoutesLoading ? ( - ({ color: theme.palette.primary.contrastText })} - > + ) { component={Typography} variant="body2" alignItems="center" - color="primary.contrastText" > {intl.formatMessage({ defaultMessage: 'Route' })} - + {intl.formatNumber(estimatedAmount, quantityFormat)}   ({intl.formatNumber(convertedAmount, currencyFormat)}) - + {intl.formatMessage(routeActionLabel[route.action])} @@ -124,14 +124,14 @@ export function SwapRouteAccordionItem({ })} />   - + 1:{intl.formatNumber(route.rate, quantityFormat)} {intl.formatMessage({ defaultMessage: 'Est gas' })}  - + ~{intl.formatNumber(gas, currencyFormat)} diff --git a/libs/oeth/swap/src/components/SwapRouteCard.tsx b/libs/oeth/swap/src/components/SwapRouteCard.tsx index 38dc30b6b..a60409aa9 100644 --- a/libs/oeth/swap/src/components/SwapRouteCard.tsx +++ b/libs/oeth/swap/src/components/SwapRouteCard.tsx @@ -121,7 +121,7 @@ export function SwapRouteCard({ )} - + {isLoading ? ( ) : ( @@ -145,7 +145,6 @@ export function SwapRouteCard({ position: 'absolute', borderBottomLeftRadius: (theme) => theme.shape.borderRadius, background: (theme) => theme.palette.background.gradient1, - color: 'primary.contrastText', fontSize: (theme) => theme.typography.pxToRem(12), top: (theme) => theme.spacing(-3), right: (theme) => theme.spacing(-2), @@ -159,11 +158,7 @@ export function SwapRouteCard({ } > - + {isLoading ? ( ) : ( @@ -180,7 +175,7 @@ export function SwapRouteCard({ {intl.formatMessage({ defaultMessage: 'Rate:' })} - + {isLoading ? ( ) : ( @@ -197,7 +192,7 @@ export function SwapRouteCard({ {intl.formatMessage({ defaultMessage: 'Gas:' })} - + {isGasLoading ? ( ) : ( diff --git a/libs/oeth/swap/src/components/TokenSelectModal.tsx b/libs/oeth/swap/src/components/TokenSelectModal.tsx index 45a8cdfe6..ac7140e1c 100644 --- a/libs/oeth/swap/src/components/TokenSelectModal.tsx +++ b/libs/oeth/swap/src/components/TokenSelectModal.tsx @@ -79,9 +79,6 @@ export const TokenSelectModal = ({ onClose({}, 'backdropClick'); onSelectToken(token); }} - sx={{ - color: 'primary.contrastText', - }} /> ))} @@ -150,7 +147,6 @@ function TokenListItem({ token, ...rest }: TokenListItemProps) { '&:hover': { background: (theme) => theme.palette.grey[700], }, - color: 'primary.contrastText', ...rest?.sx, }} > @@ -169,7 +165,7 @@ function TokenListItem({ token, ...rest }: TokenListItemProps) { - + {isBalanceLoading ? ( ) : ( diff --git a/libs/oeth/swap/src/views/SwapView.tsx b/libs/oeth/swap/src/views/SwapView.tsx index a9490a550..a438e5fba 100644 --- a/libs/oeth/swap/src/views/SwapView.tsx +++ b/libs/oeth/swap/src/views/SwapView.tsx @@ -4,6 +4,9 @@ import { alpha, Box, Button, + Card, + CardContent, + CardHeader, CircularProgress, Collapse, IconButton, @@ -11,7 +14,7 @@ import { Typography, } from '@mui/material'; import { GasPopover } from '@origin/oeth/shared'; -import { Card, TokenInput } from '@origin/shared/components'; +import { TokenInput } from '@origin/shared/components'; import { ConnectedButton, usePrices } from '@origin/shared/providers'; import { composeContexts, isNilOrEmpty } from '@origin/shared/utils'; import { useIntl } from 'react-intl'; @@ -33,20 +36,11 @@ import { } from '../hooks'; import { SwapProvider, useSwapState } from '../state'; -import type { IconButtonProps, Theme } from '@mui/material'; +import type { IconButtonProps } from '@mui/material'; import type { Token } from '@origin/shared/contracts'; import type { TokenSource } from '../types'; -const commonStyles = { - paddingBlock: 2.5, - paddingBlockStart: 2.625, - paddingInline: 2, - border: '1px solid', - borderColor: 'divider', - borderRadius: 1, -}; - const tokenInputStyles = { border: 'none', backgroundColor: 'transparent', @@ -64,7 +58,6 @@ const tokenInputStyles = { fontSize: '1.5rem', fontWeight: 700, height: '1.5rem', - color: 'primary.contrastText', '&::placeholder': { color: 'text.secondary', opacity: 1, @@ -156,141 +149,144 @@ function SwapViewWrapped() { return ( <> - + + + {intl.formatMessage({ defaultMessage: 'Swap' })} + + theme.spacing(-0.75), + svg: { width: 16, height: 16 }, + }, + }} + /> + + } + /> + + - - {intl.formatMessage({ defaultMessage: 'Swap' })} - - theme.spacing(-0.75), + { + setTokenSource('tokenIn'); + }} + tokenPriceUsd={prices?.[tokenIn.symbol]} + isPriceLoading={isPriceLoading} + isConnected={isConnected} + isAmountDisabled={amountInInputDisabled} + inputProps={{ sx: tokenInputStyles }} + sx={{ + paddingBlock: 2.5, + paddingBlockStart: 2.625, + paddingInline: 2, + border: '1px solid', + borderColor: 'divider', + borderTopLeftRadius: (theme) => theme.shape.borderRadius, + borderTopRightRadius: (theme) => theme.shape.borderRadius, + backgroundColor: 'grey.900', + borderBottomColor: 'transparent', + '&:hover, &:focus-within': { + borderColor: 'transparent', + }, + '&:hover': { + background: (theme) => + `linear-gradient(${theme.palette.grey[900]}, ${ + theme.palette.grey[900] + }) padding-box, linear-gradient(90deg, ${alpha( + theme.palette.primary.main, + 0.4, + )} 0%, ${alpha( + theme.palette.primary.dark, + 0.4, + )} 100%) border-box;`, + }, + '&:focus-within': { + background: (theme) => + `linear-gradient(${theme.palette.grey[900]}, ${theme.palette.grey[900]}) padding-box, linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.dark} 100%) border-box;`, }, }} /> - - } - > - - { - setTokenSource('tokenIn'); - }} - tokenPriceUsd={prices?.[tokenIn.symbol]} - isPriceLoading={isPriceLoading} - isConnected={isConnected} - isAmountDisabled={amountInInputDisabled} - inputProps={{ sx: tokenInputStyles }} - sx={{ - ...commonStyles, - backgroundColor: 'grey.900', - borderBottomColor: 'transparent', - '&:hover, &:focus-within': { - borderColor: 'transparent', - }, - '&:hover': { - background: (theme) => - `linear-gradient(${theme.palette.grey[900]}, ${ - theme.palette.grey[900] - }) padding-box, - linear-gradient(90deg, ${alpha( - theme.palette.primary.main, - 0.4, - )} 0%, ${alpha( - theme.palette.primary.dark, - 0.4, - )} 100%) border-box;`, - }, - '&:focus-within': { - background: (theme) => - `linear-gradient(${theme.palette.grey[900]}, ${theme.palette.grey[900]}) padding-box, - linear-gradient(90deg, var(--mui-palette-primary-main) 0%, var(--mui-palette-primary-dark) 100%) border-box;`, - }, - }} - /> - { - setTokenSource('tokenOut'); - }} - tokenPriceUsd={prices?.[tokenOut.symbol]} - isPriceLoading={isSwapRoutesLoading || isPriceLoading} - isConnected={isConnected} - hideMaxButton - inputProps={{ readOnly: true, sx: tokenInputStyles }} + { + setTokenSource('tokenOut'); + }} + tokenPriceUsd={prices?.[tokenOut.symbol]} + isPriceLoading={isSwapRoutesLoading || isPriceLoading} + isConnected={isConnected} + hideMaxButton + inputProps={{ readOnly: true, sx: tokenInputStyles }} + sx={{ + paddingBlock: 2.5, + paddingBlockStart: 2.625, + paddingInline: 2, + border: '1px solid', + borderColor: 'divider', + borderBottomLeftRadius: (theme) => theme.shape.borderRadius, + borderBottomRightRadius: (theme) => theme.shape.borderRadius, + backgroundColor: (theme) => alpha(theme.palette.grey[400], 0.2), + }} + /> + + + alpha(theme.palette.grey[400], 0.2), + mt: 1.5, + borderRadius: 1, + border: (theme) => `1px solid ${theme.palette.divider}`, }} /> - - - - - + + - {approveButtonLoading ? ( + {swapButtonLoading ? ( ) : ( - intl.formatMessage({ defaultMessage: 'Approve' }) + swapButtonLabel )} - - - - {swapButtonLoading ? ( - - ) : ( - swapButtonLabel - )} - + + theme.palette.background.paper, @@ -338,7 +334,7 @@ function ArrowButton(props: IconButtonProps) { component="img" src="/images/splitarrow.svg" sx={{ - height: { md: 'auto', xs: '1.25rem' }, + height: { md: 20, xs: 18 }, }} /> diff --git a/libs/shared/assets/files/settings-icon.svg b/libs/shared/assets/files/settings-icon.svg index b6598f93b..022c07cda 100644 --- a/libs/shared/assets/files/settings-icon.svg +++ b/libs/shared/assets/files/settings-icon.svg @@ -1,11 +1,12 @@ - - - - - - - - - - + + + + + + + + + + diff --git a/libs/shared/components/src/Cards/Card.tsx b/libs/shared/components/src/Cards/Card.tsx index f0e1d308e..5a272d5ea 100644 --- a/libs/shared/components/src/Cards/Card.tsx +++ b/libs/shared/components/src/Cards/Card.tsx @@ -1,34 +1,31 @@ import { Card as MuiCard, CardContent, CardHeader } from '@mui/material'; -import type { SxProps } from '@mui/material'; +import type { CardProps as MuiCardProps, SxProps } from '@mui/material'; import type { Theme } from '@origin/shared/theme'; - -export const cardStyles = { - paddingBlock: 2.5, - paddingInline: 2, -} as const; +import type { ReactNode } from 'react'; export type CardProps = { - title: string | React.ReactNode; - children: React.ReactNode; + title: ReactNode; sxCardContent?: SxProps; sxCardTitle?: SxProps; - sx?: SxProps; -}; +} & Omit; export function Card({ title, children, sxCardContent, sxCardTitle, - sx, + ...rest }: CardProps) { return ( - + ({ + xs: theme.spacing(2, 1.5), + md: 3, + }), borderBlockEnd: '1px solid', borderColor: 'divider', color: 'primary.contrastText', @@ -36,23 +33,16 @@ export function Card({ '& .MuiCardHeader-title': { fontSize: (theme) => theme.typography.pxToRem(14), }, - ...(sxCardTitle as SxProps), + ...sxCardTitle, }} > ({ + xs: theme.spacing(2, 1.5), md: 3, - }, - paddingBlock: { - xs: 2, - md: 3, - }, - ...(sxCardContent as SxProps), + }), + ...sxCardContent, }} > {children} diff --git a/libs/shared/components/src/Cards/SwapCard/Input.tsx b/libs/shared/components/src/Cards/SwapCard/Input.tsx index 5fe206cc2..ebf29f2ea 100644 --- a/libs/shared/components/src/Cards/SwapCard/Input.tsx +++ b/libs/shared/components/src/Cards/SwapCard/Input.tsx @@ -6,7 +6,6 @@ import { useDebouncedEffect } from '@react-hookz/web'; import { useIntl } from 'react-intl'; import { Loader } from '../../Loader'; -import { cardStyles } from '../Card'; import { SwapItem } from './SwapItem'; import { styles } from './utils'; @@ -44,7 +43,11 @@ export function Input({ ({ + xs: theme.spacing(2, 1.5), + md: 3, + }), + color: 'primary.contrastText', border: '1px solid', borderColor: 'divider', borderRadius: 1, diff --git a/libs/shared/components/src/Cards/SwapCard/Output.tsx b/libs/shared/components/src/Cards/SwapCard/Output.tsx index b30f1fbe2..45574302b 100644 --- a/libs/shared/components/src/Cards/SwapCard/Output.tsx +++ b/libs/shared/components/src/Cards/SwapCard/Output.tsx @@ -3,7 +3,6 @@ import { currencyFormat, valueFormat } from '@origin/shared/utils'; import { useIntl } from 'react-intl'; import { Loader } from '../../Loader'; -import { cardStyles } from '../Card'; import { SwapItem } from './SwapItem'; import { styles } from './utils'; @@ -39,7 +38,11 @@ export function Output({ borderStartStartRadius: 0, borderStartEndRadius: 0, backgroundColor: (theme) => alpha(theme.palette.grey[400], 0.2), - ...cardStyles, + padding: (theme) => ({ + xs: theme.spacing(2, 1.5), + md: 3, + }), + borderBlockEnd: '1px solid', paddingBlock: 2.5, paddingBlockEnd: 2.625, boxShadow: 'none', diff --git a/libs/shared/components/src/Inputs/TokenInput.tsx b/libs/shared/components/src/Inputs/TokenInput.tsx index a9ce882fd..452851339 100644 --- a/libs/shared/components/src/Inputs/TokenInput.tsx +++ b/libs/shared/components/src/Inputs/TokenInput.tsx @@ -1,14 +1,6 @@ import { forwardRef } from 'react'; -import { - alpha, - Box, - Button, - IconButton, - Skeleton, - Stack, - Typography, -} from '@mui/material'; +import { alpha, Box, Button, Skeleton, Stack, Typography } from '@mui/material'; import { currencyFormat, formatAmount, @@ -175,24 +167,25 @@ TokenInput.displayName = 'TokenInput'; type TokenButtonProps = { token: Token; isDisabled?: boolean } & StackProps; -function TokenButton({ token, isDisabled, sx, ...rest }: TokenButtonProps) { +function TokenButton({ token, isDisabled, ...rest }: TokenButtonProps) { return ( alpha(theme.palette.common.white, 0.1), fontStyle: 'normal', cursor: 'pointer', @@ -206,9 +199,8 @@ function TokenButton({ token, isDisabled, sx, ...rest }: TokenButtonProps) { 0.4, )} 0%, ${alpha(theme.palette.primary.dark, 0.4)} 100%) border-box;`, }, - ...sx, + ...rest?.sx, }} - {...rest} > {token.symbol} - {!isDisabled && ( - - - + )} ); diff --git a/libs/shared/providers/src/wagmi/components/AccountButton.tsx b/libs/shared/providers/src/wagmi/components/AccountButton.tsx index 5b8a6cb75..46a0b5941 100644 --- a/libs/shared/providers/src/wagmi/components/AccountButton.tsx +++ b/libs/shared/providers/src/wagmi/components/AccountButton.tsx @@ -1,4 +1,4 @@ -import { alpha, Box, Button, useMediaQuery, useTheme } from '@mui/material'; +import { Box, Button, useMediaQuery, useTheme } from '@mui/material'; import { jsNumberForAddress } from 'react-jazzicon'; import Jazzicon from 'react-jazzicon/dist/Jazzicon'; import { useAccount, useEnsAvatar, useEnsName } from 'wagmi'; @@ -19,35 +19,22 @@ export function AccountButton(props: Omit) { return ( ); } if (chain.unsupported) { return ( - {intl.formatMessage({ defaultMessage: 'Wrong Network', })} - + ); } diff --git a/libs/shared/theme/src/theme.d.ts b/libs/shared/theme/src/theme.d.ts index 5c6377f01..48be064ca 100644 --- a/libs/shared/theme/src/theme.d.ts +++ b/libs/shared/theme/src/theme.d.ts @@ -9,15 +9,25 @@ declare module '@mui/material/styles' { gradientSuccess: string; gradientHover: string; gradientHoverActionButton: string; + gradientSelected: string; } interface TypeBackgroundOptions { - gradient1: string; - gradient2: string; - gradient3: string; - gradientSuccess: string; - gradientHover: string; - gradientHoverActionButton: string; + gradient1?: string; + gradient2?: string; + gradient3?: string; + gradientSuccess?: string; + gradientHover?: string; + gradientHoverActionButton?: string; + gradientSelected?: string; + } + + interface TypeText { + subtle: string; + } + + interface TypeTextOptions { + subtle?: string; } interface Shape { @@ -25,7 +35,7 @@ declare module '@mui/material/styles' { } interface ShapeOptions { - cardBorderRadius: number; + cardBorderRadius?: number; } } diff --git a/libs/shared/theme/src/theme.tsx b/libs/shared/theme/src/theme.tsx index 8d02c2fcc..84f52292c 100644 --- a/libs/shared/theme/src/theme.tsx +++ b/libs/shared/theme/src/theme.tsx @@ -1,8 +1,5 @@ -import { Box } from '@mui/material'; -import { - alpha, - experimental_extendTheme as extendTheme, -} from '@mui/material/styles'; +import { alpha, Box } from '@mui/material'; +import { experimental_extendTheme as extendTheme } from '@mui/material/styles'; import shadows from '@mui/material/styles/shadows'; export const theme = extendTheme({ @@ -22,7 +19,6 @@ export const theme = extendTheme({ background: { paper: '#1E1F25', default: '#101113', - // TODO cleanup these gradients after theme is properly configured -> gradients can be generated based on css vars gradient1: 'linear-gradient(90deg,#8c66fc -28.99%,#0274f1 144.97%)', gradient2: 'linear-gradient(90deg, #8C66FC 0%, #0274F1 100%)', gradient3: @@ -33,14 +29,17 @@ export const theme = extendTheme({ 'linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%), #1E1F25', gradientHoverActionButton: 'linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(90deg, #8C66FC 0%, #0274F1 100%)', + gradientSelected: + 'linear-gradient(90deg, rgba(140, 102, 252, 0.30) 0%, rgba(2, 116, 241, 0.30) 100%)', }, action: { hoverOpacity: 0.1, disabledOpacity: 0.3, }, text: { - primary: '#828699', - secondary: '#BABDCC', + primary: '#FAFBFB', + secondary: '#828699', + subtle: '#BABDCC', }, grey: { 200: '#B5BECA', @@ -50,11 +49,14 @@ export const theme = extendTheme({ 800: '#282A32', 900: '#18191C', }, + success: { + main: '#5BFF92', + }, warning: { main: '#FFDC86', }, error: { - main: '#FF8686', + main: '#FF4E4E', }, }, }, @@ -90,6 +92,21 @@ export const theme = extendTheme({ '0px 1.7955275774002075px 5.32008171081543px 0px rgba(0, 0, 0, 0.03), 0px 6.030803203582764px 17.869047164916992px 0px rgba(0, 0, 0, 0.04), 0px 27px 80px 0px rgba(0, 0, 0, 0.07)', ], components: { + MuiAccordion: { + styleOverrides: { + root: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + backgroundColor: theme.palette.grey[900], + border: '1px solid', + borderColor: theme.palette.grey[800], + boxShadow: 'none', + '&:before': { + height: 0, + }, + backgroundImage: 'none', + }), + }, + }, MuiAlert: { defaultProps: { variant: 'standard', @@ -111,38 +128,57 @@ export const theme = extendTheme({ styleOverrides: { root: ({ theme }) => ({ backgroundColor: theme.palette.grey['900'], - color: theme.palette.primary.contrastText, + color: theme.palette.text.primary, '&&&': { border: 'none' }, }), }, }, MuiButton: { + defaultProps: { + variant: 'contained', + color: 'primary', + disableElevation: true, + }, styleOverrides: { - root: { + root: ({ theme }) => ({ + color: theme.palette.text.primary, textTransform: 'none', - }, + borderRadius: 25, + paddingX: { + md: 3, + xs: 2, + }, + paddingY: { + md: 1, + xs: 0.75, + }, + boxShadow: 'none', + }), containedPrimary: ({ theme }) => ({ - color: theme.palette.primary.contrastText, - background: theme.palette.background.gradient1, + background: `linear-gradient(0deg, ${alpha( + theme.palette.common.white, + 0.05, + )} 0%, ${alpha(theme.palette.common.white, 0.05)} 100%), ${ + theme.palette.background.paper + };`, + '&:hover': { + background: theme.palette.background.paper, + }, }), containedSecondary: ({ theme }) => ({ - color: theme.palette.primary.contrastText, - background: alpha(theme.palette.common.white, 0.1), - boxShadow: 'none', + borderRadius: theme.shape.borderRadius, + background: theme.palette.grey[700], '&:hover': { - background: theme.palette.background.paper, + background: theme.palette.grey[900], }, }), }, - defaultProps: { - disableTouchRipple: true, - }, variants: [ { props: { variant: 'action' }, style: ({ theme }) => ({ background: theme.palette.background.gradient1, - color: theme.palette.primary.contrastText, + color: theme.palette.text.primary, paddingBlock: 16, fontSize: theme.typography.pxToRem(20), lineHeight: '2rem', @@ -150,120 +186,77 @@ export const theme = extendTheme({ fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif', fontWeight: 500, fontStyle: 'normal', - boxShadow: theme.shadows[24], '&:hover': { background: theme.palette.background.gradientHoverActionButton, opacity: 1, }, '&:disabled': { - background: - 'linear-gradient(90deg, var(--mui-palette-primary-main) 0%, var(--mui-palette-primary-dark) 100%)', + background: `linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.dark} 100%)`, opacity: 0.3, - color: theme.palette.primary.contrastText, + color: theme.palette.text.primary, }, }), }, ], }, - MuiCssBaseline: { - styleOverrides: ` - body { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - } - - input[type=number] { - -moz-appearance: textfield; - } - - input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; - } - `, - }, - MuiIconButton: { + MuiButtonBase: { defaultProps: { + disableRipple: true, disableTouchRipple: true, }, }, MuiCard: { - styleOverrides: { - root: { - backgroundImage: 'none', - }, - }, - }, - MuiPaper: { - styleOverrides: { - root: { - backgroundImage: 'none', - }, - }, - }, - MuiTab: { styleOverrides: { root: ({ theme }) => ({ - minHeight: 0, - paddingBlock: theme.spacing(1), - paddingInline: theme.spacing(2.5), - '&.Mui-selected': { - color: theme.palette.primary.contrastText, - }, - }), - }, - defaultProps: { - disableRipple: true, - disableTouchRipple: true, - }, - }, - MuiTabs: { - styleOverrides: { - indicator: ({ theme }) => ({ - background: theme.palette.background.gradient2, - transition: theme.transitions.create('all', { - duration: theme.transitions.duration.shortest, - easing: theme.transitions.easing.easeInOut, - }), + padding: 0, + borderRadius: theme.shape.borderRadius, + backgroundImage: 'none', + backgroundColor: theme.palette.background.paper, }), }, }, - MuiLink: { + MuiCardHeader: { styleOverrides: { root: ({ theme }) => ({ - textDecoration: 'none', - color: theme.palette.primary.contrastText, + padding: theme.spacing(2, 3), + borderBottom: `1px solid ${theme.palette.divider}`, + [theme.breakpoints.down('md')]: { + padding: theme.spacing(1.5, 2), + }, }), + title: { + fontSize: 14, + fontWeight: 500, + }, }, }, - MuiMenuItem: { + MuiCardContent: { styleOverrides: { root: ({ theme }) => ({ - color: theme.palette.primary.contrastText, - '&.Mui-selected': { - backgroundColor: 'transparent', - color: theme.palette.text.secondary, - '&:hover': { - backgroundColor: theme.palette.grey[800], - }, - }, - '&:hover': { - backgroundColor: theme.palette.grey[800], + padding: theme.spacing(3), + [theme.breakpoints.down('md')]: { + padding: theme.spacing(1.5, 2), }, }), }, }, - MuiMenu: { - styleOverrides: { - paper: ({ theme }) => ({ - border: '1px solid', - borderColor: theme.palette.background.default, - }), - list: { - padding: 0, - }, - }, + MuiCssBaseline: { + styleOverrides: ` + body { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + } + + input[type=number] { + -moz-appearance: textfield; + } + + input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + `, }, MuiFormControl: { styleOverrides: { @@ -307,46 +300,39 @@ export const theme = extendTheme({ }), }, }, - MuiAccordion: { + MuiLink: { styleOverrides: { root: ({ theme }) => ({ - borderRadius: theme.shape.borderRadius, - backgroundColor: theme.palette.grey[900], - border: '1px solid', - borderColor: theme.palette.grey[800], - boxShadow: 'none', - '&:before': { - height: 0, - }, backgroundImage: 'none', + color: theme.palette.text.primary, + textDecoration: 'none', }), }, }, - MuiTableCell: { + MuiMenu: { styleOverrides: { - root: ({ theme }) => ({ - paddingInline: theme.spacing(3), - paddingBlock: theme.spacing(2), - color: theme.palette.primary.contrastText, - fontSize: theme.typography.pxToRem(14), - fontStyle: 'normal', - fontWeight: 400, - lineHeight: theme.typography.pxToRem(23), - }), - head: ({ theme }) => ({ - color: theme.palette.text.secondary, + paper: ({ theme }) => ({ + border: '1px solid', + borderColor: theme.palette.background.default, }), + list: { + padding: 0, + }, }, }, - MuiTooltip: { + MuiMenuItem: { styleOverrides: { - tooltip: ({ theme }) => ({ - paddingInline: theme.spacing(2), - paddingBlock: theme.spacing(1.5), - borderRadius: theme.shape.borderRadius * 2, - border: '1px solid', - borderColor: theme.palette.grey[500], - boxShadow: theme.shadows[23], + root: ({ theme }) => ({ + '&.Mui-selected': { + backgroundColor: 'transparent', + color: theme.palette.text.secondary, + '&:hover': { + backgroundColor: theme.palette.grey[800], + }, + }, + '&:hover': { + backgroundColor: theme.palette.grey[800], + }, }), }, }, @@ -355,12 +341,18 @@ export const theme = extendTheme({ outlined: ({ theme }) => ({ borderColor: theme.palette.divider, '&.Mui-selected': { - color: theme.palette.primary.contrastText, background: theme.palette.background.paper, }, }), }, }, + MuiPaper: { + styleOverrides: { + root: { + backgroundImage: 'none', + }, + }, + }, MuiPopover: { styleOverrides: { root: ({ theme }) => ({ @@ -385,6 +377,70 @@ export const theme = extendTheme({ }), }, }, + MuiTab: { + styleOverrides: { + root: ({ theme }) => ({ + minHeight: 0, + padding: theme.spacing(3, 2), + fontSize: '1rem', + textTransform: 'none', + lineHeight: '1.6875rem', + ':hover': { + color: theme.palette.text.primary, + }, + '&.Mui-selected': { + color: theme.palette.text.primary, + }, + [theme.breakpoints.down('md')]: { + padding: theme.spacing(1, 2), + fontSize: '0.875rem', + }, + }), + }, + }, + MuiTableCell: { + styleOverrides: { + root: ({ theme }) => ({ + paddingInline: theme.spacing(3), + paddingBlock: theme.spacing(2), + fontSize: theme.typography.pxToRem(14), + fontStyle: 'normal', + fontWeight: 400, + lineHeight: theme.typography.pxToRem(23), + }), + head: ({ theme }) => ({ + color: theme.palette.text.secondary, + }), + }, + }, + MuiTabs: { + styleOverrides: { + indicator: ({ theme }) => ({ + background: theme.palette.background.gradient2, + transition: theme.transitions.create('all', { + duration: theme.transitions.duration.shortest, + easing: theme.transitions.easing.easeInOut, + }), + }), + }, + }, + MuiTooltip: { + styleOverrides: { + tooltip: ({ theme }) => ({ + paddingInline: theme.spacing(2), + paddingBlock: theme.spacing(1.5), + borderRadius: theme.shape.borderRadius * 2, + border: '1px solid', + borderColor: theme.palette.grey[500], + boxShadow: theme.shadows[23], + }), + }, + }, + }, + mixins: { + toolbar: { + height: 75, + }, }, }); From 4d759686034003c61ae9c1efb015b712fc6eecf0 Mon Sep 17 00:00:00 2001 From: toniocodo Date: Tue, 26 Sep 2023 15:28:26 +0200 Subject: [PATCH 02/23] feat: design and revamp --- .../redeem/src/components/RedeemSplitCard.tsx | 37 ++++---- libs/oeth/redeem/src/views/RedeemView.tsx | 95 +++++++++---------- .../swap/src/components/SwapRouteCard.tsx | 34 +++---- .../swap/src/components/TokenSelectModal.tsx | 77 ++++++--------- libs/oeth/swap/src/views/SwapView.tsx | 8 +- .../components/src/Inputs/TokenInput.tsx | 24 +++-- libs/shared/theme/src/theme.tsx | 1 + 7 files changed, 124 insertions(+), 152 deletions(-) diff --git a/libs/oeth/redeem/src/components/RedeemSplitCard.tsx b/libs/oeth/redeem/src/components/RedeemSplitCard.tsx index 7988f9051..f7b29b1f2 100644 --- a/libs/oeth/redeem/src/components/RedeemSplitCard.tsx +++ b/libs/oeth/redeem/src/components/RedeemSplitCard.tsx @@ -42,14 +42,14 @@ export const RedeemSplitCard = (props: Omit) => { - + {isEstimateLoading ? ( ) : ( formatAmount(amountOut, MIX_TOKEN.decimals) )} - + {isEstimateLoading ? ( ) : ( @@ -64,11 +64,11 @@ export const RedeemSplitCard = (props: Omit) => { - - + + {intl.formatMessage({ defaultMessage: 'Gas:' })} - + {isEstimateLoading || gasPriceLoading ? ( ) : ( @@ -76,11 +76,11 @@ export const RedeemSplitCard = (props: Omit) => { )} - - + + {intl.formatMessage({ defaultMessage: 'Wait time:' })} - + {isEstimateLoading ? ( ) : ( @@ -99,16 +99,11 @@ export const RedeemSplitCard = (props: Omit) => { px={1.5} py={1.5} > - - + + {intl.formatMessage({ defaultMessage: 'Rate:' })} - + {isEstimateLoading ? ( ) : ( @@ -137,7 +132,7 @@ export const RedeemSplitCard = (props: Omit) => { > - {s.token.symbol} + {s.token.symbol} ) => { justifyContent="flex-end" spacing={2} > - + {isEstimateLoading ? ( ) : ( @@ -155,7 +150,11 @@ export const RedeemSplitCard = (props: Omit) => { {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 a9490a2e3..9bbe9d344 100644 --- a/libs/oeth/redeem/src/views/RedeemView.tsx +++ b/libs/oeth/redeem/src/views/RedeemView.tsx @@ -4,7 +4,6 @@ import { Card, CardContent, CardHeader, - CircularProgress, Stack, Typography, } from '@mui/material'; @@ -105,40 +104,35 @@ function RedeemViewWrapped() { } /> - - - `linear-gradient(${theme.palette.grey[900]}, ${ - theme.palette.grey[900] - }) padding-box, + backgroundColor: 'grey.900', + borderBottomColor: 'transparent', + '&:hover, &:focus-within': { + borderColor: 'transparent', + }, + '&:hover': { + background: (theme) => + `linear-gradient(${theme.palette.grey[900]}, ${ + theme.palette.grey[900] + }) padding-box, linear-gradient(90deg, ${alpha( theme.palette.primary.main, 0.4, @@ -146,15 +140,14 @@ function RedeemViewWrapped() { theme.palette.primary.dark, 0.4, )} 100%) border-box;`, - }, - '&:focus-within': { - background: (theme) => - `linear-gradient(${theme.palette.grey[900]}, ${theme.palette.grey[900]}) padding-box, + }, + '&:focus-within': { + background: (theme) => + `linear-gradient(${theme.palette.grey[900]}, ${theme.palette.grey[900]}) padding-box, linear-gradient(90deg, var(--mui-palette-primary-main) 0%, var(--mui-palette-primary-dark) 100%) border-box;`, - }, - }} - /> - + }, + }} + /> @@ -170,13 +163,11 @@ function RedeemViewWrapped() { fullWidth disabled={redeemButtonDisabled} onClick={handleRedeem} - sx={{ marginTop: 2 }} + sx={{ mt: 1.5 }} > - {redeemButtonLoading ? ( - - ) : ( - redeemButtonLabel - )} + {redeemButtonLoading + ? intl.formatMessage({ defaultMessage: 'Waiting for signature' }) + : redeemButtonLabel} @@ -193,10 +184,10 @@ function ArrowButton(props: BoxProps) { display: 'flex', justifyContent: 'center', alignItems: 'center', - top: { md: `calc(50% - ${48 / 2}px)`, xs: `calc(50% - ${32 / 2}px)` }, - left: { md: `calc(50% - ${48 / 2}px)`, xs: `calc(50% - ${32 / 2}px)` }, - width: { md: 48, xs: 32 }, - height: { md: 48, xs: 32 }, + top: { md: `calc(50% - ${40 / 2}px)`, xs: `calc(50% - ${36 / 2}px)` }, + left: { md: `calc(50% - ${40 / 2}px)`, xs: `calc(50% - ${36 / 2}px)` }, + width: { md: 40, xs: 36 }, + height: { md: 40, xs: 36 }, zIndex: 2, fill: (theme) => theme.palette.background.paper, strokeWidth: (theme) => theme.typography.pxToRem(2), @@ -211,7 +202,7 @@ function ArrowButton(props: BoxProps) { component="img" src="/images/splitarrow.svg" sx={{ - height: { md: 'auto', xs: '1.25rem' }, + height: { md: 20, xs: 18 }, }} /> diff --git a/libs/oeth/swap/src/components/SwapRouteCard.tsx b/libs/oeth/swap/src/components/SwapRouteCard.tsx index a60409aa9..cc2cfb92b 100644 --- a/libs/oeth/swap/src/components/SwapRouteCard.tsx +++ b/libs/oeth/swap/src/components/SwapRouteCard.tsx @@ -8,6 +8,7 @@ import { Typography, } from '@mui/material'; import Grid2 from '@mui/material/Unstable_Grid2/Grid2'; +import { tokens } from '@origin/shared/contracts'; import { useGasPrice, usePrices } from '@origin/shared/providers'; import { currencyFormat, @@ -17,7 +18,7 @@ import { import { useIntl } from 'react-intl'; import { formatUnits } from 'viem'; -import { routeActionLabel, routeActionLogos } from '../constants'; +import { routeActionLabel } from '../constants'; import { useSwapRouteAllowance } from '../hooks'; import { useSwapState } from '../state'; @@ -104,6 +105,7 @@ export function SwapRouteCard({ @@ -113,7 +115,7 @@ export function SwapRouteCard({ ) : ( - + {isLoading ? ( ) : ( @@ -147,7 +149,7 @@ export function SwapRouteCard({ background: (theme) => theme.palette.background.gradient1, fontSize: (theme) => theme.typography.pxToRem(12), top: (theme) => theme.spacing(-3), - right: (theme) => theme.spacing(-2), + right: (theme) => theme.spacing(-1.25), paddingInline: 1, }} > @@ -158,7 +160,7 @@ export function SwapRouteCard({ } > - + {isLoading ? ( ) : ( @@ -166,16 +168,11 @@ export function SwapRouteCard({ )} - - + + {intl.formatMessage({ defaultMessage: 'Rate:' })} - + {isLoading ? ( ) : ( @@ -183,16 +180,11 @@ export function SwapRouteCard({ )} - - + + {intl.formatMessage({ defaultMessage: 'Gas:' })} - + {isGasLoading ? ( ) : ( diff --git a/libs/oeth/swap/src/components/TokenSelectModal.tsx b/libs/oeth/swap/src/components/TokenSelectModal.tsx index ac7140e1c..5ce210f07 100644 --- a/libs/oeth/swap/src/components/TokenSelectModal.tsx +++ b/libs/oeth/swap/src/components/TokenSelectModal.tsx @@ -1,7 +1,6 @@ import { Box, Dialog, - Divider, MenuItem, MenuList, Skeleton, @@ -14,7 +13,7 @@ import { formatAmount, isNilOrEmpty, } from '@origin/shared/utils'; -import { partition, pipe, prop, reject } from 'ramda'; +import { partition, pipe, prop } from 'ramda'; import { useIntl } from 'react-intl'; import { useAccount, useBalance } from 'wagmi'; @@ -37,10 +36,7 @@ export const TokenSelectModal = ({ onClose, ...rest }: TokenSelectModalProps) => { - const intl = useIntl(); - const [swappable, unswappable] = pipe( - reject(prop('isSelected')), partition(prop('isSwappable')), )(tokens); @@ -64,52 +60,35 @@ export const TokenSelectModal = ({ onClose={onClose} > {!isNilOrEmpty(swappable) && ( - <> - - {intl.formatMessage({ - defaultMessage: 'Available swaps for this token', - })} - - - {swappable.map((token, i) => ( - { - onClose({}, 'backdropClick'); - onSelectToken(token); - }} - /> - ))} - - - )} - {!isNilOrEmpty(swappable) && !isNilOrEmpty(unswappable) && ( - + + {swappable.map((token, i) => ( + { + onClose({}, 'backdropClick'); + onSelectToken(token); + }} + /> + ))} + )} {!isNilOrEmpty(unswappable) && ( - <> - - {intl.formatMessage({ - defaultMessage: 'Unavailable swaps for this token', - })} - - - {unswappable.map((token, i) => ( - { - onClose({}, 'backdropClick'); - onSelectToken(token); - }} - sx={{ - color: 'text.secondary', - }} - /> - ))} - - + + {unswappable.map((token, i) => ( + { + onClose({}, 'backdropClick'); + onSelectToken(token); + }} + sx={{ + color: 'text.secondary', + }} + /> + ))} + )} ); diff --git a/libs/oeth/swap/src/views/SwapView.tsx b/libs/oeth/swap/src/views/SwapView.tsx index a438e5fba..3de50c31b 100644 --- a/libs/oeth/swap/src/views/SwapView.tsx +++ b/libs/oeth/swap/src/views/SwapView.tsx @@ -280,11 +280,9 @@ function SwapViewWrapped() { onClick={handleSwap} sx={{ mt: 1.5 }} > - {swapButtonLoading ? ( - - ) : ( - swapButtonLabel - )} + {swapButtonLoading + ? intl.formatMessage({ defaultMessage: 'Waiting for signature' }) + : swapButtonLabel} diff --git a/libs/shared/components/src/Inputs/TokenInput.tsx b/libs/shared/components/src/Inputs/TokenInput.tsx index 452851339..d31b09e80 100644 --- a/libs/shared/components/src/Inputs/TokenInput.tsx +++ b/libs/shared/components/src/Inputs/TokenInput.tsx @@ -37,6 +37,7 @@ export type TokenInputProps = { BigintInputProps, 'value' | 'decimals' | 'onChange' | 'isLoading' | 'isError' >; + tokenButtonProps?: TokenButtonProps; } & StackProps; export const TokenInput = forwardRef( @@ -141,16 +142,25 @@ export const TokenInput = forwardRef( {!hideMaxButton && ( )} @@ -176,7 +186,7 @@ function TokenButton({ token, isDisabled, ...rest }: TokenButtonProps) { {...rest} sx={{ alignItems: 'center', - justifyContent: 'space-evenly', + justifyContent: 'space-between', minWidth: 120, minHeight: 32, borderRadius: 25, @@ -194,7 +204,9 @@ function TokenButton({ token, isDisabled, ...rest }: TokenButtonProps) { position: 'relative', ':hover': { background: (theme) => - `linear-gradient(#3B3C3E, #3B3C3E) padding-box, linear-gradient(90deg, ${alpha( + `linear-gradient(${theme.palette.grey[600]}, ${ + theme.palette.grey[600] + }) padding-box, linear-gradient(90deg, ${alpha( theme.palette.primary.main, 0.4, )} 0%, ${alpha(theme.palette.primary.dark, 0.4)} 100%) border-box;`, diff --git a/libs/shared/theme/src/theme.tsx b/libs/shared/theme/src/theme.tsx index 84f52292c..950ca559d 100644 --- a/libs/shared/theme/src/theme.tsx +++ b/libs/shared/theme/src/theme.tsx @@ -45,6 +45,7 @@ export const theme = extendTheme({ 200: '#B5BECA', 400: '#515466', 500: '#252833', + 600: '#3B3C3E', 700: '#141519', 800: '#282A32', 900: '#18191C', From 00ae472d325cec00b45bcff9c36d6edec504319c Mon Sep 17 00:00:00 2001 From: toniocodo Date: Tue, 26 Sep 2023 16:07:55 +0200 Subject: [PATCH 03/23] feat: product team feedback --- libs/oeth/redeem/src/state.ts | 4 ++-- libs/oeth/shared/src/components/GasPopover.tsx | 2 +- libs/oeth/swap/src/actions/mintVault.ts | 4 ++-- libs/oeth/swap/src/actions/swapCurve/index.ts | 4 ++-- libs/oeth/swap/src/actions/swapCurveEth.ts | 4 ++-- libs/oeth/swap/src/actions/swapZapperEth.ts | 4 ++-- libs/oeth/swap/src/actions/swapZapperSfrxeth.ts | 4 ++-- libs/oeth/swap/src/actions/unwrapWOETH.ts | 4 ++-- libs/oeth/swap/src/actions/wrapOETH.ts | 4 ++-- libs/oeth/swap/src/constants.ts | 6 ++++-- libs/oeth/swap/src/state.ts | 2 +- 11 files changed, 22 insertions(+), 20 deletions(-) diff --git a/libs/oeth/redeem/src/state.ts b/libs/oeth/redeem/src/state.ts index fb1bab443..9591b9f82 100644 --- a/libs/oeth/redeem/src/state.ts +++ b/libs/oeth/redeem/src/state.ts @@ -158,8 +158,8 @@ export const { Provider: RedeemProvider, useTracked: useRedeemState } = draft.split.forEach((a, i) => (a.amount = splitEstimates[i])); draft.gas = gasEstimate; draft.rate = - +formatUnits(state.amountIn, tokens.mainnet.OETH.decimals) / - +formatUnits(total, MIX_TOKEN.decimals); + +formatUnits(total, MIX_TOKEN.decimals) / + +formatUnits(state.amountIn, tokens.mainnet.OETH.decimals); draft.isEstimateLoading = false; }), ); diff --git a/libs/oeth/shared/src/components/GasPopover.tsx b/libs/oeth/shared/src/components/GasPopover.tsx index 49454615f..0e19eea44 100644 --- a/libs/oeth/shared/src/components/GasPopover.tsx +++ b/libs/oeth/shared/src/components/GasPopover.tsx @@ -90,7 +90,7 @@ export function GasPopover({ - {intl.formatMessage({ defaultMessage: 'Slippage' })} + {intl.formatMessage({ defaultMessage: 'Price Tolerance' })} diff --git a/libs/oeth/swap/src/actions/mintVault.ts b/libs/oeth/swap/src/actions/mintVault.ts index 64c7c7124..331cae331 100644 --- a/libs/oeth/swap/src/actions/mintVault.ts +++ b/libs/oeth/swap/src/actions/mintVault.ts @@ -201,8 +201,8 @@ const estimateRoute: EstimateRoute = async ({ approvalGas, allowanceAmount, rate: - +formatUnits(amountIn, tokenIn.decimals) / - +formatUnits(estimatedAmount, tokenOut.decimals), + +formatUnits(estimatedAmount, tokenOut.decimals) / + +formatUnits(amountIn, tokenIn.decimals), }; }; diff --git a/libs/oeth/swap/src/actions/swapCurve/index.ts b/libs/oeth/swap/src/actions/swapCurve/index.ts index 5c8948096..680619264 100644 --- a/libs/oeth/swap/src/actions/swapCurve/index.ts +++ b/libs/oeth/swap/src/actions/swapCurve/index.ts @@ -202,8 +202,8 @@ const estimateRoute: EstimateRoute = async ({ approvalGas, allowanceAmount, rate: - +formatUnits(amountIn, tokenIn.decimals) / - +formatUnits(estimatedAmount, tokenOut.decimals), + +formatUnits(estimatedAmount, tokenOut.decimals) / + +formatUnits(amountIn, tokenIn.decimals), }; }; diff --git a/libs/oeth/swap/src/actions/swapCurveEth.ts b/libs/oeth/swap/src/actions/swapCurveEth.ts index 552ab651f..c38e8fe64 100644 --- a/libs/oeth/swap/src/actions/swapCurveEth.ts +++ b/libs/oeth/swap/src/actions/swapCurveEth.ts @@ -158,8 +158,8 @@ const estimateRoute: EstimateRoute = async ({ approvalGas, allowanceAmount, rate: - +formatUnits(amountIn, tokenIn.decimals) / - +formatUnits(estimatedAmount, tokenOut.decimals), + +formatUnits(estimatedAmount, tokenOut.decimals) / + +formatUnits(amountIn, tokenIn.decimals), }; }; diff --git a/libs/oeth/swap/src/actions/swapZapperEth.ts b/libs/oeth/swap/src/actions/swapZapperEth.ts index f89d9f153..d3799be32 100644 --- a/libs/oeth/swap/src/actions/swapZapperEth.ts +++ b/libs/oeth/swap/src/actions/swapZapperEth.ts @@ -135,8 +135,8 @@ const estimateRoute: EstimateRoute = async ({ approvalGas, allowanceAmount, rate: - +formatUnits(amountIn, tokenIn.decimals) / - +formatUnits(estimatedAmount, tokenOut.decimals), + +formatUnits(estimatedAmount, tokenOut.decimals) / + +formatUnits(amountIn, tokenIn.decimals), }; }; diff --git a/libs/oeth/swap/src/actions/swapZapperSfrxeth.ts b/libs/oeth/swap/src/actions/swapZapperSfrxeth.ts index 3f99e0a8b..5d855e988 100644 --- a/libs/oeth/swap/src/actions/swapZapperSfrxeth.ts +++ b/libs/oeth/swap/src/actions/swapZapperSfrxeth.ts @@ -145,8 +145,8 @@ const estimateRoute: EstimateRoute = async ({ approvalGas, allowanceAmount, rate: - +formatUnits(amountIn, tokenIn.decimals) / - +formatUnits(estimatedAmount, tokenOut.decimals), + +formatUnits(estimatedAmount, tokenOut.decimals) / + +formatUnits(amountIn, tokenIn.decimals), }; }; diff --git a/libs/oeth/swap/src/actions/unwrapWOETH.ts b/libs/oeth/swap/src/actions/unwrapWOETH.ts index da2a66b44..13bfdea9c 100644 --- a/libs/oeth/swap/src/actions/unwrapWOETH.ts +++ b/libs/oeth/swap/src/actions/unwrapWOETH.ts @@ -116,8 +116,8 @@ const estimateRoute: EstimateRoute = async ({ approvalGas, allowanceAmount, rate: - +formatUnits(amountIn, tokenIn.decimals) / - +formatUnits(estimatedAmount, tokenOut.decimals), + +formatUnits(estimatedAmount, tokenOut.decimals) / + +formatUnits(amountIn, tokenIn.decimals), }; }; diff --git a/libs/oeth/swap/src/actions/wrapOETH.ts b/libs/oeth/swap/src/actions/wrapOETH.ts index 8df9e1fe0..075f0e696 100644 --- a/libs/oeth/swap/src/actions/wrapOETH.ts +++ b/libs/oeth/swap/src/actions/wrapOETH.ts @@ -150,8 +150,8 @@ const estimateRoute: EstimateRoute = async ({ approvalGas, allowanceAmount, rate: - +formatUnits(amountIn, tokenIn.decimals) / - +formatUnits(estimatedAmount, tokenOut.decimals), + +formatUnits(estimatedAmount, tokenOut.decimals) / + +formatUnits(amountIn, tokenIn.decimals), }; }; diff --git a/libs/oeth/swap/src/constants.ts b/libs/oeth/swap/src/constants.ts index 8d7101d4f..5f630efdc 100644 --- a/libs/oeth/swap/src/constants.ts +++ b/libs/oeth/swap/src/constants.ts @@ -19,8 +19,10 @@ export const routeActionLabel: Record = { 'mint-vault': defineMessage({ defaultMessage: 'Mint with Vault' }), 'swap-curve': defineMessage({ defaultMessage: 'Swap with Curve' }), 'swap-curve-eth': defineMessage({ defaultMessage: 'Swap with CurvePool' }), - 'swap-zapper-eth': defineMessage({ defaultMessage: 'Swap with Zapper' }), - 'swap-zapper-sfrxeth': defineMessage({ defaultMessage: 'Swap with Zapper' }), + 'swap-zapper-eth': defineMessage({ defaultMessage: 'Zap + Mint with Vault' }), + 'swap-zapper-sfrxeth': defineMessage({ + defaultMessage: 'Zap + Mint with Vault', + }), 'unwrap-woeth': defineMessage({ defaultMessage: 'Unwrap with Origin' }), 'wrap-oeth': defineMessage({ defaultMessage: 'Wrap with Origin' }), }; diff --git a/libs/oeth/swap/src/state.ts b/libs/oeth/swap/src/state.ts index 5f200fc57..089de3d8d 100644 --- a/libs/oeth/swap/src/state.ts +++ b/libs/oeth/swap/src/state.ts @@ -21,7 +21,7 @@ export const { Provider: SwapProvider, useTracked: useSwapState } = tokenOut: tokens.mainnet.OETH, swapRoutes: [], selectedSwapRoute: null, - slippage: 0.01, + slippage: 0.001, isSwapRoutesLoading: false, isApproved: false, isApprovalLoading: false, From 78b76a3634fae8b428e7fef23a63f69c683429b4 Mon Sep 17 00:00:00 2001 From: toniocodo Date: Wed, 27 Sep 2023 08:22:09 +0200 Subject: [PATCH 04/23] feat: feedback MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - add main container margins - update History page WIP🚧 - limit apy values to after 06/06 - update fontwrights medium - theme consolidation WIP🚧 - add default address formatting --- apps/oeth/src/App.tsx | 2 +- .../history/src/components/HistoryButton.tsx | 2 +- .../history/src/components/HistoryCard.tsx | 16 +++-- .../history/src/components/HistoryCell.tsx | 2 +- .../history/src/components/HistoryTable.tsx | 72 +++++++++++-------- libs/oeth/history/src/queries.generated.ts | 4 +- .../redeem/src/components/RedeemSplitCard.tsx | 14 ++-- .../shared/src/components/AccountPopover.tsx | 49 ++++++------- .../oeth/shared/src/components/GasPopover.tsx | 2 +- .../swap/src/components/SwapRouteCard.tsx | 8 +-- .../swap/src/components/TokenSelectModal.tsx | 68 +++++++----------- libs/oeth/swap/src/queries.generated.ts | 6 +- libs/oeth/swap/src/queries.graphql | 2 +- libs/shared/components/src/LinkIcon/index.tsx | 2 +- .../src/wagmi/components/AccountButton.tsx | 1 + .../src/wagmi/components/AddressLabel.tsx | 21 ++++-- libs/shared/theme/src/theme.d.ts | 2 + libs/shared/theme/src/theme.tsx | 12 ++-- 18 files changed, 147 insertions(+), 138 deletions(-) diff --git a/apps/oeth/src/App.tsx b/apps/oeth/src/App.tsx index f2a38251e..4a56e9ec4 100644 --- a/apps/oeth/src/App.tsx +++ b/apps/oeth/src/App.tsx @@ -17,7 +17,7 @@ export const App = () => { height: theme.mixins.toolbar.height, })} /> - + diff --git a/libs/oeth/history/src/components/HistoryButton.tsx b/libs/oeth/history/src/components/HistoryButton.tsx index 954f6b005..54fd33bfc 100644 --- a/libs/oeth/history/src/components/HistoryButton.tsx +++ b/libs/oeth/history/src/components/HistoryButton.tsx @@ -34,7 +34,7 @@ export function HistoryFilterButton({ fontStyle: 'normal', lineHeight: (theme) => theme.typography.pxToRem(20), ':hover': { - background: (theme) => alpha(theme.palette.common.white, 0.1), + background: (theme) => alpha(theme.palette.common.white, 0.04), }, ...sx, }} diff --git a/libs/oeth/history/src/components/HistoryCard.tsx b/libs/oeth/history/src/components/HistoryCard.tsx index 0e6f22a5b..f945fe4cd 100644 --- a/libs/oeth/history/src/components/HistoryCard.tsx +++ b/libs/oeth/history/src/components/HistoryCard.tsx @@ -1,6 +1,7 @@ import { useState } from 'react'; -import { Box, Button, Divider, Stack, Typography } from '@mui/material'; +import { Box, Divider, Stack, Typography } from '@mui/material'; +import { ConnectedButton } from '@origin/shared/providers'; import { useIntl } from 'react-intl'; import { useAccount } from 'wagmi'; @@ -56,14 +57,21 @@ export function HistoryCard() { setPage={(page) => setPage(page)} /> ) : ( - + {intl.formatMessage({ defaultMessage: 'Connect your wallet to see your history', })} - - + + )} ); diff --git a/libs/oeth/history/src/components/HistoryCell.tsx b/libs/oeth/history/src/components/HistoryCell.tsx index 872921b7b..6524752f3 100644 --- a/libs/oeth/history/src/components/HistoryCell.tsx +++ b/libs/oeth/history/src/components/HistoryCell.tsx @@ -25,7 +25,7 @@ export function HistoryCell(props: Props) { {/* @ts-expect-error whatever */} - {props.type} + {props.type} {intl.formatDate(new Date(props.timestamp))} diff --git a/libs/oeth/history/src/components/HistoryTable.tsx b/libs/oeth/history/src/components/HistoryTable.tsx index c12d6ea70..987999311 100644 --- a/libs/oeth/history/src/components/HistoryTable.tsx +++ b/libs/oeth/history/src/components/HistoryTable.tsx @@ -1,13 +1,13 @@ import { useMemo } from 'react'; import { - Box, Stack, Table, TableBody, TableCell, TableHead, TableRow, + Typography, } from '@mui/material'; import { LinkIcon } from '@origin/shared/components'; import { quantityFormat } from '@origin/shared/utils'; @@ -64,37 +64,37 @@ export function HistoryTable({ }, }), columnHelper.accessor('value', { - cell: (info) => intl.formatNumber(info.getValue(), quantityFormat), - header: intl.formatMessage({ defaultMessage: 'Change' }), + cell: (info) => ( + + {intl.formatNumber(info.getValue(), quantityFormat)} + + ), + header: () => ( + + {intl.formatMessage({ defaultMessage: 'Change' })} + + ), }), columnHelper.accessor('balance', { cell: (info) => ( - - - {intl.formatNumber(info.getValue(), quantityFormat)} - - - - + + {intl.formatNumber(info.getValue(), quantityFormat)} + + ), + header: () => ( + + {intl.formatMessage({ defaultMessage: 'Balance' })} + + ), + }), + columnHelper.display({ + id: 'link', + cell: (info) => ( + ), - header: intl.formatMessage({ defaultMessage: 'Balance' }), }), ], [intl], @@ -118,7 +118,7 @@ export function HistoryTable({ }); return ( - + @@ -155,12 +155,15 @@ export function HistoryTable({ '& > *:first-of-type': { width: '50%', }, + '& > *:last-of-type': { + width: '10%', + pl: 0, + }, }} > {row.getVisibleCells().map((cell) => ( {intl.formatMessage({ defaultMessage: 'Previous' })} + + {intl.formatMessage( + { defaultMessage: 'Page {page}' }, + { page: page + 1 }, + )} + setPage(page + 1)} diff --git a/libs/oeth/history/src/queries.generated.ts b/libs/oeth/history/src/queries.generated.ts index 501572792..e6913fc17 100644 --- a/libs/oeth/history/src/queries.generated.ts +++ b/libs/oeth/history/src/queries.generated.ts @@ -16,6 +16,7 @@ export type HistoryTableQuery = { earned: number; isContract: boolean; rebasingOption: string; + credits: any; lastUpdated: any; history: Array<{ __typename?: 'History'; @@ -44,7 +45,6 @@ export type HistoryTableWithFiltersQuery = { earned: number; isContract: boolean; rebasingOption: string; - credits: any; lastUpdated: any; history: Array<{ __typename?: 'History'; @@ -71,6 +71,7 @@ export const HistoryTableDocument = ` earned isContract rebasingOption + credits lastUpdated history(limit: 20, orderBy: timestamp_DESC, offset: $offset) { type @@ -118,7 +119,6 @@ export const HistoryTableWithFiltersDocument = ` earned isContract rebasingOption - credits lastUpdated history( limit: 20 diff --git a/libs/oeth/redeem/src/components/RedeemSplitCard.tsx b/libs/oeth/redeem/src/components/RedeemSplitCard.tsx index f7b29b1f2..cf0dbc041 100644 --- a/libs/oeth/redeem/src/components/RedeemSplitCard.tsx +++ b/libs/oeth/redeem/src/components/RedeemSplitCard.tsx @@ -42,7 +42,7 @@ export const RedeemSplitCard = (props: Omit) => { - + {isEstimateLoading ? ( ) : ( @@ -68,7 +68,7 @@ export const RedeemSplitCard = (props: Omit) => { {intl.formatMessage({ defaultMessage: 'Gas:' })} - + {isEstimateLoading || gasPriceLoading ? ( ) : ( @@ -80,7 +80,7 @@ export const RedeemSplitCard = (props: Omit) => { {intl.formatMessage({ defaultMessage: 'Wait time:' })} - + {isEstimateLoading ? ( ) : ( @@ -103,7 +103,7 @@ export const RedeemSplitCard = (props: Omit) => { {intl.formatMessage({ defaultMessage: 'Rate:' })} - + {isEstimateLoading ? ( ) : ( @@ -132,7 +132,7 @@ export const RedeemSplitCard = (props: Omit) => { > - {s.token.symbol} + {s.token.symbol} ) => { justifyContent="flex-end" spacing={2} > - + {isEstimateLoading ? ( ) : ( @@ -151,7 +151,7 @@ export const RedeemSplitCard = (props: Omit) => { ) : ( diff --git a/libs/oeth/shared/src/components/AccountPopover.tsx b/libs/oeth/shared/src/components/AccountPopover.tsx index df03149d6..f20e4e90c 100644 --- a/libs/oeth/shared/src/components/AccountPopover.tsx +++ b/libs/oeth/shared/src/components/AccountPopover.tsx @@ -1,5 +1,4 @@ import { - alpha, Box, Button, Divider, @@ -9,9 +8,9 @@ import { Typography, useTheme, } from '@mui/material'; -import { Icon, LinkIcon, MiddleTruncated } from '@origin/shared/components'; +import { Icon, LinkIcon } from '@origin/shared/components'; import { tokens } from '@origin/shared/contracts'; -import { formatAmount } from '@origin/shared/utils'; +import { AddressLabel } from '@origin/shared/providers'; import { map, prop } from 'ramda'; import { useIntl } from 'react-intl'; import { useAccount, useBalance, useContractReads, useDisconnect } from 'wagmi'; @@ -27,8 +26,6 @@ const balanceTokens = [ tokens.mainnet.stETH, ]; -const padding = { paddingInline: 2, paddingBlock: 3 }; - interface Props { anchor: HTMLElement | null; setAnchor: (value: HTMLButtonElement | null) => void; @@ -82,7 +79,7 @@ export function AccountPopover({ anchor, setAnchor }: Props) { borderRadius: 1, width: (theme) => ({ xs: '90vw', - md: `min(${theme.typography.pxToRem(300)}, 90vw)`, + md: `min(${theme.typography.pxToRem(250)}, 90vw)`, }), [theme.breakpoints.down('md')]: { left: '0 !important', @@ -97,25 +94,12 @@ export function AccountPopover({ anchor, setAnchor }: Props) { justifyContent="space-between" alignItems="center" direction="row" - sx={padding} + sx={{ px: 2, py: 1.5 }} > {intl.formatMessage({ defaultMessage: 'Account' })} - + - {address} + - + - + {isBalanceLoading ? ( - + ) : ( - formatAmount(balance, token.decimals) + intl.formatNumber(balance, { + minimumFractionDigits: 3, + maximumFractionDigits: 3, + }) )} - {token.symbol} + {token.symbol} ); } diff --git a/libs/oeth/shared/src/components/GasPopover.tsx b/libs/oeth/shared/src/components/GasPopover.tsx index 0e19eea44..f8ed4cafc 100644 --- a/libs/oeth/shared/src/components/GasPopover.tsx +++ b/libs/oeth/shared/src/components/GasPopover.tsx @@ -20,7 +20,7 @@ import { useFeeData } from 'wagmi'; import type { IconButtonProps } from '@mui/material'; -const DEFAULT_SLIPPAGE = 0.01; +const DEFAULT_SLIPPAGE = 0.001; const WARNING_THRESHOLD = 0.05; const gridStyles = { diff --git a/libs/oeth/swap/src/components/SwapRouteCard.tsx b/libs/oeth/swap/src/components/SwapRouteCard.tsx index cc2cfb92b..5e6008e10 100644 --- a/libs/oeth/swap/src/components/SwapRouteCard.tsx +++ b/libs/oeth/swap/src/components/SwapRouteCard.tsx @@ -123,7 +123,7 @@ export function SwapRouteCard({ )} - + {isLoading ? ( ) : ( @@ -160,7 +160,7 @@ export function SwapRouteCard({ } > - + {isLoading ? ( ) : ( @@ -172,7 +172,7 @@ export function SwapRouteCard({ {intl.formatMessage({ defaultMessage: 'Rate:' })} - + {isLoading ? ( ) : ( @@ -184,7 +184,7 @@ export function SwapRouteCard({ {intl.formatMessage({ defaultMessage: 'Gas:' })} - + {isGasLoading ? ( ) : ( diff --git a/libs/oeth/swap/src/components/TokenSelectModal.tsx b/libs/oeth/swap/src/components/TokenSelectModal.tsx index 5ce210f07..4a1be21fa 100644 --- a/libs/oeth/swap/src/components/TokenSelectModal.tsx +++ b/libs/oeth/swap/src/components/TokenSelectModal.tsx @@ -8,12 +8,8 @@ import { Typography, } from '@mui/material'; import { usePrices } from '@origin/shared/providers'; -import { - currencyFormat, - formatAmount, - isNilOrEmpty, -} from '@origin/shared/utils'; -import { partition, pipe, prop } from 'ramda'; +import { currencyFormat, formatAmount } from '@origin/shared/utils'; +import { ascend, descend, prop, sortWith } from 'ramda'; import { useIntl } from 'react-intl'; import { useAccount, useBalance } from 'wagmi'; @@ -36,9 +32,10 @@ export const TokenSelectModal = ({ onClose, ...rest }: TokenSelectModalProps) => { - const [swappable, unswappable] = pipe( - partition(prop('isSwappable')), - )(tokens); + const toks = sortWith([ + ascend(prop('isSelected')), + descend(prop('isSwappable')), + ])(tokens); return ( - {!isNilOrEmpty(swappable) && ( - - {swappable.map((token, i) => ( - { - onClose({}, 'backdropClick'); - onSelectToken(token); - }} - /> - ))} - - )} - {!isNilOrEmpty(unswappable) && ( - - {unswappable.map((token, i) => ( - { - onClose({}, 'backdropClick'); - onSelectToken(token); - }} - sx={{ - color: 'text.secondary', - }} - /> - ))} - - )} + + {toks.map((token, i) => ( + { + onClose({}, 'backdropClick'); + onSelectToken(token); + }} + sx={{ + color: token.isSwappable ? 'text.primary' : 'text.secondary', + }} + /> + ))} + ); }; @@ -136,15 +118,15 @@ function TokenListItem({ token, ...rest }: TokenListItemProps) { sx={{ width: '2rem', height: '2rem' }} /> - {token?.name} - + {token?.name} + {token.symbol} - + {isBalanceLoading ? ( ) : ( diff --git a/libs/oeth/swap/src/queries.generated.ts b/libs/oeth/swap/src/queries.generated.ts index 4c5ec1771..c94d68aeb 100644 --- a/libs/oeth/swap/src/queries.generated.ts +++ b/libs/oeth/swap/src/queries.generated.ts @@ -20,7 +20,11 @@ export type ApiesQuery = { export const ApiesDocument = ` query Apies($limit: Int) { - apies(limit: $limit, orderBy: timestamp_DESC) { + apies( + limit: $limit + orderBy: timestamp_DESC + where: {timestamp_gt: "2023-06-06T12:38:47.000000Z"} + ) { id timestamp apy7DayAvg diff --git a/libs/oeth/swap/src/queries.graphql b/libs/oeth/swap/src/queries.graphql index 5e2258a0b..0fad24425 100644 --- a/libs/oeth/swap/src/queries.graphql +++ b/libs/oeth/swap/src/queries.graphql @@ -1,5 +1,5 @@ query Apies($limit: Int) { - apies(limit: $limit, orderBy: timestamp_DESC) { + apies(limit: $limit, orderBy: timestamp_DESC, where: {timestamp_gt: "2023-06-06T12:38:47.000000Z"}) { id timestamp apy7DayAvg diff --git a/libs/shared/components/src/LinkIcon/index.tsx b/libs/shared/components/src/LinkIcon/index.tsx index 96afef8c6..cb6f4dc4e 100644 --- a/libs/shared/components/src/LinkIcon/index.tsx +++ b/libs/shared/components/src/LinkIcon/index.tsx @@ -4,7 +4,7 @@ import type { LinkProps } from '@mui/material'; interface Props extends LinkProps { url: string; - size?: string; + size?: number | string; } export function LinkIcon({ diff --git a/libs/shared/providers/src/wagmi/components/AccountButton.tsx b/libs/shared/providers/src/wagmi/components/AccountButton.tsx index 46a0b5941..34dcaf123 100644 --- a/libs/shared/providers/src/wagmi/components/AccountButton.tsx +++ b/libs/shared/providers/src/wagmi/components/AccountButton.tsx @@ -59,6 +59,7 @@ export function AccountButton(props: Omit) { ; export const AddressLabel = ({ address, enableEnsName = false, monospace = false, + short = false, ...rest }: AddressLabelProps) => { const { data: ensName, isLoading: isEnsNameLoading } = useEnsName({ @@ -23,15 +26,21 @@ export const AddressLabel = ({ chainId: mainnet.id, }); - return enableEnsName ? ( - isEnsNameLoading ? ( + if (short) { + return ( + {middleTruncate(address)} + ); + } + + if (enableEnsName) { + return isEnsNameLoading ? ( ) : ( {ensName ?? address} - ) - ) : ( - {address} - ); + ); + } + + return {address}; }; diff --git a/libs/shared/theme/src/theme.d.ts b/libs/shared/theme/src/theme.d.ts index 48be064ca..4ed67770b 100644 --- a/libs/shared/theme/src/theme.d.ts +++ b/libs/shared/theme/src/theme.d.ts @@ -10,6 +10,7 @@ declare module '@mui/material/styles' { gradientHover: string; gradientHoverActionButton: string; gradientSelected: string; + gradientPaper: string; } interface TypeBackgroundOptions { @@ -20,6 +21,7 @@ declare module '@mui/material/styles' { gradientHover?: string; gradientHoverActionButton?: string; gradientSelected?: string; + gradientPaper?: string; } interface TypeText { diff --git a/libs/shared/theme/src/theme.tsx b/libs/shared/theme/src/theme.tsx index 950ca559d..82169a71c 100644 --- a/libs/shared/theme/src/theme.tsx +++ b/libs/shared/theme/src/theme.tsx @@ -31,6 +31,10 @@ export const theme = extendTheme({ 'linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(90deg, #8C66FC 0%, #0274F1 100%)', gradientSelected: 'linear-gradient(90deg, rgba(140, 102, 252, 0.30) 0%, rgba(2, 116, 241, 0.30) 100%)', + gradientPaper: `linear-gradient(0deg, ${alpha( + '#fff', + 0.05, + )} 0%, ${alpha('#fff', 0.05)} 100%), #1E1F25;`, }, action: { hoverOpacity: 0.1, @@ -156,18 +160,12 @@ export const theme = extendTheme({ boxShadow: 'none', }), containedPrimary: ({ theme }) => ({ - background: `linear-gradient(0deg, ${alpha( - theme.palette.common.white, - 0.05, - )} 0%, ${alpha(theme.palette.common.white, 0.05)} 100%), ${ - theme.palette.background.paper - };`, + background: theme.palette.background.gradientPaper, '&:hover': { background: theme.palette.background.paper, }, }), containedSecondary: ({ theme }) => ({ - borderRadius: theme.shape.borderRadius, background: theme.palette.grey[700], '&:hover': { background: theme.palette.grey[900], From c1a7acea23fff0ece3f7f273e8694fa648d1cdaf Mon Sep 17 00:00:00 2001 From: toniocodo Date: Wed, 27 Sep 2023 09:46:00 +0200 Subject: [PATCH 05/23] feat: update history filters --- libs/oeth/history/src/components/Filters.tsx | 90 +++++++++---------- .../history/src/components/HistoryCard.tsx | 5 +- 2 files changed, 48 insertions(+), 47 deletions(-) diff --git a/libs/oeth/history/src/components/Filters.tsx b/libs/oeth/history/src/components/Filters.tsx index 4a3f7a01c..f7733e186 100644 --- a/libs/oeth/history/src/components/Filters.tsx +++ b/libs/oeth/history/src/components/Filters.tsx @@ -1,23 +1,18 @@ import { useState } from 'react'; import { - alpha, Box, Button, Checkbox, Divider, - FormLabel, + FormControlLabel, Popover, Stack, Typography, useTheme, } from '@mui/material'; -import { - ActionButton, - CheckboxIcon, - EmptyCheckbox, -} from '@origin/shared/components'; -import { useIntl } from 'react-intl'; +import { CheckboxIcon, EmptyCheckbox } from '@origin/shared/components'; +import { defineMessage, useIntl } from 'react-intl'; import { HistoryFilterButton } from './HistoryButton'; @@ -27,17 +22,28 @@ const styles = { lineHeight: '1.25rem', }; +const filterOptions = [ + { label: defineMessage({ defaultMessage: 'Yield' }), value: 'Yield' }, + { label: defineMessage({ defaultMessage: 'Swap' }), value: 'Swap' }, + { label: defineMessage({ defaultMessage: 'Sent' }), value: 'Sent' }, + { label: defineMessage({ defaultMessage: 'Received' }), value: 'Received' }, +]; + interface Props { + filters: string[]; onChange: (values: string[]) => void; } -export function HistoryFilters({ onChange }: Props) { - const [selected, setSelectedTypes] = useState([]); +export function HistoryFilters({ filters, onChange }: Props) { + const [selected, setSelectedTypes] = useState(filters); const intl = useIntl(); const theme = useTheme(); const [anchorEl, setAnchorEl] = useState(null); - function selection(e: React.ChangeEvent, label: string) { + const handleSelect = ( + e: React.ChangeEvent, + label: string, + ) => { setSelectedTypes((prev) => { if (e.target.checked) { return [...prev, label]; @@ -45,7 +51,7 @@ export function HistoryFilters({ onChange }: Props) { return prev.filter((val) => val !== label); } }); - } + }; return ( <> @@ -59,7 +65,7 @@ export function HistoryFilters({ onChange }: Props) { background: (theme) => theme.palette.primary.contrastText, }} > - {selected.length} + {filters.length} - {['Yield', 'Swap', 'Sent', 'Received'].map((label) => ( + {filterOptions.map((filter) => ( theme.palette.grey[700], }, }} > - {label} - } - icon={} - sx={{ - '& svg, input': { - width: '1.25rem', - height: '1.25rem', - top: 'auto', - left: 'auto', - }, - '&:hover:has(input:checked) svg': { - fill: (theme) => alpha(theme.palette.secondary.main, 0.4), - strokeWidth: '1px', - stroke: (theme) => theme.palette.primary.main, - }, - '&:hover:has(input:not(:checked)) svg': { - fill: (theme) => alpha(theme.palette.secondary.main, 0.4), - }, - }} - onChange={(e) => selection(e, label)} + handleSelect(e, filter.value)} + checkedIcon={} + icon={} + sx={{ + ':hover': { + backgroundColor: 'transparent', + }, + }} + /> + } + sx={{ width: 1 }} + slotProps={{ typography: { width: 1 } }} /> ))} - {intl.formatMessage({ defaultMessage: 'Clear all' })} - {intl.formatMessage({ defaultMessage: 'Apply' })} - + diff --git a/libs/oeth/history/src/components/HistoryCard.tsx b/libs/oeth/history/src/components/HistoryCard.tsx index f945fe4cd..93bdc0257 100644 --- a/libs/oeth/history/src/components/HistoryCard.tsx +++ b/libs/oeth/history/src/components/HistoryCard.tsx @@ -42,7 +42,10 @@ export function HistoryCard() { {intl.formatMessage({ defaultMessage: 'OETH transactions' })} - setFilters(values)} /> + setFilters(values)} + /> From f2d9fe1536626dbb087171137e93084afc139a25 Mon Sep 17 00:00:00 2001 From: toniocodo Date: Wed, 27 Sep 2023 09:54:02 +0200 Subject: [PATCH 06/23] feat: update filter buttons disabled states --- libs/oeth/history/src/components/Filters.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/libs/oeth/history/src/components/Filters.tsx b/libs/oeth/history/src/components/Filters.tsx index f7733e186..e386ab324 100644 --- a/libs/oeth/history/src/components/Filters.tsx +++ b/libs/oeth/history/src/components/Filters.tsx @@ -12,6 +12,7 @@ import { useTheme, } from '@mui/material'; import { CheckboxIcon, EmptyCheckbox } from '@origin/shared/components'; +import { isNilOrEmpty } from '@origin/shared/utils'; import { defineMessage, useIntl } from 'react-intl'; import { HistoryFilterButton } from './HistoryButton'; @@ -53,6 +54,11 @@ export function HistoryFilters({ filters, onChange }: Props) { }); }; + const applyDisabled = + filters.length === selected.length && + filters.every((item) => selected.includes(item)); + const clearDisabled = isNilOrEmpty(selected); + return ( <> setAnchorEl(e.currentTarget)}> @@ -143,13 +149,17 @@ export function HistoryFilters({ filters, onChange }: Props) { > + + + + + ); +}; diff --git a/libs/shared/providers/src/geoFence/index.ts b/libs/shared/providers/src/geoFence/index.ts new file mode 100644 index 000000000..9555bca9a --- /dev/null +++ b/libs/shared/providers/src/geoFence/index.ts @@ -0,0 +1 @@ +export * from './components/GeoFenceProvider'; diff --git a/libs/shared/providers/src/index.ts b/libs/shared/providers/src/index.ts index d1a15bb45..a2da75176 100644 --- a/libs/shared/providers/src/index.ts +++ b/libs/shared/providers/src/index.ts @@ -1,6 +1,7 @@ export * from './chart'; export * from './curve'; export * from './gas'; +export * from './geoFence'; export * from './notifications'; export * from './prices'; export * from './wagmi'; diff --git a/libs/shared/components/src/Checkbox/CheckboxIcon.tsx b/libs/shared/theme/src/components/CheckboxIcon.tsx similarity index 100% rename from libs/shared/components/src/Checkbox/CheckboxIcon.tsx rename to libs/shared/theme/src/components/CheckboxIcon.tsx diff --git a/libs/shared/components/src/Checkbox/EmptyCheckbox.tsx b/libs/shared/theme/src/components/EmptyCheckbox.tsx similarity index 100% rename from libs/shared/components/src/Checkbox/EmptyCheckbox.tsx rename to libs/shared/theme/src/components/EmptyCheckbox.tsx diff --git a/libs/shared/theme/src/theme.tsx b/libs/shared/theme/src/theme.tsx index 233abc702..04b61f3cb 100644 --- a/libs/shared/theme/src/theme.tsx +++ b/libs/shared/theme/src/theme.tsx @@ -2,6 +2,9 @@ import { alpha, Box } from '@mui/material'; import { experimental_extendTheme as extendTheme } from '@mui/material/styles'; import shadows from '@mui/material/styles/shadows'; +import { CheckboxIcon } from './components/CheckboxIcon'; +import { EmptyCheckbox } from './components/EmptyCheckbox'; + export const theme = extendTheme({ colorSchemes: { dark: { @@ -38,7 +41,8 @@ export const theme = extendTheme({ }, action: { hoverOpacity: 0.1, - disabledOpacity: 0.3, + disabledOpacity: 0.5, + disabled: alpha('#FAFBFB', 0.5), }, text: { primary: '#FAFBFB', @@ -178,7 +182,7 @@ export const theme = extendTheme({ style: ({ theme }) => ({ background: theme.palette.background.gradient1, color: theme.palette.text.primary, - paddingBlock: 16, + padding: theme.spacing(2), fontSize: theme.typography.pxToRem(20), lineHeight: '2rem', borderRadius: theme.shape.borderRadius * 2, @@ -190,8 +194,7 @@ export const theme = extendTheme({ opacity: 1, }, '&:disabled': { - background: `linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.dark} 100%)`, - opacity: 0.3, + opacity: 0.5, color: theme.palette.text.primary, }, }), @@ -239,6 +242,19 @@ export const theme = extendTheme({ }), }, }, + MuiCheckbox: { + defaultProps: { + checkedIcon: , + icon: , + }, + styleOverrides: { + root: ({ theme }) => ({ + ':hover': { + backgroundColor: 'transparent', + }, + }), + }, + }, MuiCssBaseline: { styleOverrides: ` body { @@ -262,6 +278,27 @@ export const theme = extendTheme({ transitionDuration: 0, disableScrollLock: true, }, + styleOverrides: { + paper: ({ theme }) => ({ + borderRadius: theme.shape.borderRadius * 2, + }), + }, + }, + MuiDialogTitle: { + styleOverrides: { + root: ({ theme }) => ({ + py: 3, + fontSize: 16, + fontWeight: 700, + lineHeight: '28px', + color: theme.palette.text.primary, + }), + }, + }, + MuiDialogContentText: { + styleOverrides: { + root: ({ theme }) => ({ color: theme.palette.text.primary }), + }, }, MuiFormControl: { styleOverrides: { From 2c780683a68a7f0258134010d26ddca0a3f591d8 Mon Sep 17 00:00:00 2001 From: toniocodo Date: Thu, 28 Sep 2023 09:11:39 +0200 Subject: [PATCH 15/23] fix: gaspopover button variant to action --- libs/oeth/shared/src/components/GasPopover.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/libs/oeth/shared/src/components/GasPopover.tsx b/libs/oeth/shared/src/components/GasPopover.tsx index f8ed4cafc..6e0c143b5 100644 --- a/libs/oeth/shared/src/components/GasPopover.tsx +++ b/libs/oeth/shared/src/components/GasPopover.tsx @@ -113,15 +113,11 @@ export function GasPopover({ }} /> + { + setAnchorEl(null); + }} + MenuListProps={{ dense: true }} + > + {trailingOptions.map((t) => ( + { + setTrailing(t); + setAnchorEl(null); + }} + > + {intl.formatMessage(t.label)} + + ))} + + + + ); +}; diff --git a/libs/oeth/swap/src/views/SwapView.tsx b/libs/oeth/swap/src/views/SwapView.tsx index 11525d6f9..1f58408be 100644 --- a/libs/oeth/swap/src/views/SwapView.tsx +++ b/libs/oeth/swap/src/views/SwapView.tsx @@ -20,7 +20,7 @@ import { composeContexts, isNilOrEmpty } from '@origin/shared/utils'; import { useIntl } from 'react-intl'; import { useAccount, useBalance } from 'wagmi'; -import { ApyChart } from '../components/ApyChart'; +import { ApyHeader } from '../components/ApyHeader'; import { SwapRoute } from '../components/SwapRoute'; import { TokenSelectModal } from '../components/TokenSelectModal'; import { routeActionLabel } from '../constants'; @@ -148,7 +148,7 @@ function SwapViewWrapped() { return ( <> - + ({ - borderRadius: theme.shape.borderRadius * 22, - backgroundColor: 'grey.900', + borderRadius: 15, + backgroundColor: theme.palette.grey[800], }), }, }, From 8ebd04ed8f0720af6c30c679786c62a76e937580 Mon Sep 17 00:00:00 2001 From: toniocodo Date: Thu, 28 Sep 2023 22:18:16 +0200 Subject: [PATCH 18/23] feat: responsiveness - update fontSize and lineHeight to numerical values - update components for mobile devices - update theme with new typography variants --- apps/oeth/src/App.tsx | 2 +- .../history/src/components/APYContainer.tsx | 11 +- .../history/src/components/HistoryButton.tsx | 4 +- .../history/src/components/HistoryFilters.tsx | 4 +- .../redeem/src/components/RedeemSplitCard.tsx | 191 ++++++++++-------- libs/oeth/redeem/src/views/RedeemView.tsx | 10 +- .../oeth/shared/src/components/GasPopover.tsx | 2 +- libs/oeth/swap/src/components/ApyHeader.tsx | 35 +++- libs/oeth/swap/src/components/BestRoutes.tsx | 2 +- .../src/components/SwapRouteAccordion.tsx | 6 +- .../src/components/SwapRouteAccordionItem.tsx | 5 +- .../swap/src/components/SwapRouteCard.tsx | 2 +- libs/oeth/swap/src/views/SwapView.tsx | 8 +- libs/shared/components/src/Cards/Card.tsx | 2 +- .../src/Cards/SwapCard/ActionButton.tsx | 4 +- .../components/src/Cards/SwapCard/Input.tsx | 8 +- .../components/src/Cards/SwapCard/Output.tsx | 4 +- .../components/src/Inputs/TokenInput.tsx | 14 +- .../src/top-nav/ConnectedButton.tsx | 4 +- libs/shared/components/src/top-nav/TopNav.tsx | 14 +- libs/shared/components/src/top-nav/utils.ts | 2 +- .../geoFence/components/GeoFenceProvider.tsx | 6 +- libs/shared/theme/src/Palette.stories.tsx | 6 +- libs/shared/theme/src/theme.tsx | 94 ++++++--- 24 files changed, 245 insertions(+), 195 deletions(-) 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) => { {swapRoutes.slice(0, 2).map((route, index) => ( - + ) { theme.typography.pxToRem(14), + fontSize: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center', @@ -67,8 +67,8 @@ export function SwapRouteAccordion(props: Omit) { component="img" src="/images/arrow-down.svg" sx={{ - height: (theme) => theme.typography.pxToRem(12), - width: (theme) => theme.typography.pxToRem(12), + height: 12, + width: 12, alignSelf: 'center', }} > diff --git a/libs/oeth/swap/src/components/SwapRouteAccordionItem.tsx b/libs/oeth/swap/src/components/SwapRouteAccordionItem.tsx index 2314a0421..cf60fe9a3 100644 --- a/libs/oeth/swap/src/components/SwapRouteAccordionItem.tsx +++ b/libs/oeth/swap/src/components/SwapRouteAccordionItem.tsx @@ -84,10 +84,7 @@ export function SwapRouteAccordionItem({ theme.typography.pxToRem(24), - width: (theme) => theme.typography.pxToRem(24), - }} + sx={{ height: 24, width: 24 }} /> diff --git a/libs/oeth/swap/src/components/SwapRouteCard.tsx b/libs/oeth/swap/src/components/SwapRouteCard.tsx index dfb2f834d..04310e9df 100644 --- a/libs/oeth/swap/src/components/SwapRouteCard.tsx +++ b/libs/oeth/swap/src/components/SwapRouteCard.tsx @@ -149,7 +149,7 @@ export function SwapRouteCard({ position: 'absolute', borderBottomLeftRadius: (theme) => theme.shape.borderRadius, background: (theme) => theme.palette.background.gradient1, - fontSize: (theme) => theme.typography.pxToRem(12), + fontSize: 12, top: (theme) => theme.spacing(-3), right: (theme) => theme.spacing(-1.25), px: 1, diff --git a/libs/oeth/swap/src/views/SwapView.tsx b/libs/oeth/swap/src/views/SwapView.tsx index 1f58408be..8b284c7a9 100644 --- a/libs/oeth/swap/src/views/SwapView.tsx +++ b/libs/oeth/swap/src/views/SwapView.tsx @@ -51,13 +51,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, '&::placeholder': { color: 'text.secondary', opacity: 1, diff --git a/libs/shared/components/src/Cards/Card.tsx b/libs/shared/components/src/Cards/Card.tsx index 5a272d5ea..09f684294 100644 --- a/libs/shared/components/src/Cards/Card.tsx +++ b/libs/shared/components/src/Cards/Card.tsx @@ -31,7 +31,7 @@ export function Card({ color: 'primary.contrastText', fontWeight: 500, '& .MuiCardHeader-title': { - fontSize: (theme) => theme.typography.pxToRem(14), + fontSize: 14, }, ...sxCardTitle, }} diff --git a/libs/shared/components/src/Cards/SwapCard/ActionButton.tsx b/libs/shared/components/src/Cards/SwapCard/ActionButton.tsx index ad7f7b27d..dfd76807e 100644 --- a/libs/shared/components/src/Cards/SwapCard/ActionButton.tsx +++ b/libs/shared/components/src/Cards/SwapCard/ActionButton.tsx @@ -12,8 +12,8 @@ export function ActionButton({ sx, children, ...rest }: Props) { background: (theme) => theme.palette.background.gradient1, color: 'primary.contrastText', paddingBlock: 2, - fontSize: (theme) => theme.typography.pxToRem(20), - lineHeight: '2rem', + fontSize: 20, + lineHeight: 1.5, borderRadius: 2, fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif', fontWeight: 500, diff --git a/libs/shared/components/src/Cards/SwapCard/Input.tsx b/libs/shared/components/src/Cards/SwapCard/Input.tsx index ebf29f2ea..42d1a3115 100644 --- a/libs/shared/components/src/Cards/SwapCard/Input.tsx +++ b/libs/shared/components/src/Cards/SwapCard/Input.tsx @@ -95,11 +95,11 @@ export function Input({ boxSizing: 'border-box', '& .MuiInputBase-input': { padding: 0, - lineHeight: '1.875rem', + lineHeight: 1.5, boxSizing: 'border-box', fontStyle: 'normal', fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif', - fontSize: '1.5rem', + fontSize: 24, fontWeight: 700, height: '1.5rem', color: 'primary.contrastText', @@ -135,7 +135,7 @@ export function Input({ sx={{ fontWeight: 400, fontStyle: 'normal', - lineHeight: '1.5rem', + lineHeight: 1.6, }} > {intl.formatNumber(baseTokenValue, currencyFormat)} @@ -150,7 +150,7 @@ export function Input({ fontWeight: 400, fontStyle: 'normal', visibility: baseTokenBalance === undefined ? 'hidden' : 'visible', - lineHeight: '1.5rem', + lineHeight: 1.6, }} > {intl.formatMessage( diff --git a/libs/shared/components/src/Cards/SwapCard/Output.tsx b/libs/shared/components/src/Cards/SwapCard/Output.tsx index 45574302b..5a20f712e 100644 --- a/libs/shared/components/src/Cards/SwapCard/Output.tsx +++ b/libs/shared/components/src/Cards/SwapCard/Output.tsx @@ -60,7 +60,6 @@ export function Output({ fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif', flex: 1, alignSelf: 'end', - lineHeight: '1.875rem', color: (theme) => exchangeTokenQuantity === 0 ? theme.palette.text.secondary @@ -87,7 +86,7 @@ export function Output({ isLoading ? ( ) : ( - + {intl.formatNumber(exchangeTokenValue, currencyFormat)} ) @@ -102,7 +101,6 @@ export function Output({ }} variant="body1" color="grey.200" - lineHeight="1.5rem" > {intl.formatMessage( { defaultMessage: 'Balance: {number}' }, diff --git a/libs/shared/components/src/Inputs/TokenInput.tsx b/libs/shared/components/src/Inputs/TokenInput.tsx index 596f82ab8..0a5f85d84 100644 --- a/libs/shared/components/src/Inputs/TokenInput.tsx +++ b/libs/shared/components/src/Inputs/TokenInput.tsx @@ -117,15 +117,7 @@ export const TokenInput = forwardRef( {isPriceLoading ? ( ) : !isNilOrEmpty(tokenPriceUsd) ? ( - + {intl.formatNumber(amountUsd, currencyFormat)} ) : null} @@ -144,13 +136,9 @@ export const TokenInput = forwardRef( diff --git a/libs/shared/components/src/top-nav/ConnectedButton.tsx b/libs/shared/components/src/top-nav/ConnectedButton.tsx index e22df088e..121e778be 100644 --- a/libs/shared/components/src/top-nav/ConnectedButton.tsx +++ b/libs/shared/components/src/top-nav/ConnectedButton.tsx @@ -102,8 +102,8 @@ export function ConnectedButton({ borderRadius: 7, paddingInline: 2.375, paddingBlock: 1.25, - fontSize: '0.75rem', - lineHeight: '0.75rem', + fontSize: 12, + lineHeight: 1.25, '&:hover': { background: (theme) => alpha(theme.palette.common.white, 0.05), diff --git a/libs/shared/components/src/top-nav/TopNav.tsx b/libs/shared/components/src/top-nav/TopNav.tsx index c02f8a12e..ad81f955e 100644 --- a/libs/shared/components/src/top-nav/TopNav.tsx +++ b/libs/shared/components/src/top-nav/TopNav.tsx @@ -130,16 +130,13 @@ export function TopNav({ label={tab} to={`/${tab.toLowerCase()}`} sx={{ - fontSize: { - xs: '0.875rem', - md: '1rem', - }, + fontSize: 16, position: 'relative', textTransform: 'none', boxSizing: 'borderBox', paddingInline: 2, paddingBlock: { xs: 1, md: 3 }, - lineHeight: '1.6875rem', + lineHeight: 1.6875, '&:hover:after': { content: '""', width: '100%', @@ -166,12 +163,9 @@ export function TopNav({ alignItems: 'stretch', gap: { xs: 1, md: 2 }, '& > a, & > *': { - fontSize: { - xs: '0.75rem', - md: '1rem', - }, + fontSize: 16, color: (theme) => theme.palette.primary.contrastText, - lineHeight: (theme) => theme.spacing(3), + lineHeight: 3, }, }} > diff --git a/libs/shared/components/src/top-nav/utils.ts b/libs/shared/components/src/top-nav/utils.ts index ab7a6de0c..a6dee1939 100644 --- a/libs/shared/components/src/top-nav/utils.ts +++ b/libs/shared/components/src/top-nav/utils.ts @@ -9,7 +9,7 @@ export const styles: SxProps = { paddingInline: { xs: 2, md: 3 }, color: 'primary.contrastText', boxSizing: 'border-box', - lineHeight: '1rem', + lineHeight: 1.25, }; export const messages = { diff --git a/libs/shared/providers/src/geoFence/components/GeoFenceProvider.tsx b/libs/shared/providers/src/geoFence/components/GeoFenceProvider.tsx index 6060f724a..b3ca518aa 100644 --- a/libs/shared/providers/src/geoFence/components/GeoFenceProvider.tsx +++ b/libs/shared/providers/src/geoFence/components/GeoFenceProvider.tsx @@ -12,6 +12,8 @@ import { FormControlLabel, Stack, Typography, + useMediaQuery, + useTheme, } from '@mui/material'; import { useLocalStorageValue } from '@react-hookz/web'; import { useIntl } from 'react-intl'; @@ -22,6 +24,8 @@ export type GeoFenceProviderProps = { children: ReactNode }; export const GeoFenceProvider = ({ children }: GeoFenceProviderProps) => { const intl = useIntl(); + const theme = useTheme(); + const fullScreen = useMediaQuery(theme.breakpoints.down('sm')); const [checked, setChecked] = useState(false); const { value: geoCheck, set: setGeoCheck } = useLocalStorageValue( '@originprotocol/oeth-geo-check', @@ -33,7 +37,7 @@ export const GeoFenceProvider = ({ children }: GeoFenceProviderProps) => { return ( <> {children} - + {intl.formatMessage({ defaultMessage: 'Restricted Access' })} diff --git a/libs/shared/theme/src/Palette.stories.tsx b/libs/shared/theme/src/Palette.stories.tsx index 32ff82147..cc65d81dc 100644 --- a/libs/shared/theme/src/Palette.stories.tsx +++ b/libs/shared/theme/src/Palette.stories.tsx @@ -80,7 +80,7 @@ const PaletteElem = ({ noWrap sx={{ fontSize: 13, - lineHeight: '19px', + lineHeight: 1.5, color: 'primary.contrastText', }} > @@ -100,7 +100,7 @@ const PaletteElem = ({ sx={{ color: value, fontSize: 48, - lineHeight: '69px', + lineHeight: 1.5, fontWeight: 500, }} > @@ -155,7 +155,7 @@ const PaletteView = ({ palette, ...rest }: PaletteViewProps) => ( noWrap sx={{ fontSize: 20, - lineHeight: '29px', + lineHeight: 1.25, fontWeight: 500, color: 'primary.contrastText', }} diff --git a/libs/shared/theme/src/theme.tsx b/libs/shared/theme/src/theme.tsx index 92f349cb8..f29f15899 100644 --- a/libs/shared/theme/src/theme.tsx +++ b/libs/shared/theme/src/theme.tsx @@ -1,9 +1,10 @@ -import { alpha, Box } from '@mui/material'; +import { alpha, Box, createTheme } from '@mui/material'; import { experimental_extendTheme as extendTheme } from '@mui/material/styles'; import shadows from '@mui/material/styles/shadows'; import { CheckboxIcon } from './components/CheckboxIcon'; import { EmptyCheckbox } from './components/EmptyCheckbox'; +const base = createTheme(); export const theme = extendTheme({ colorSchemes: { @@ -71,22 +72,56 @@ export const theme = extendTheme({ }, }, typography: { - fontFamily: 'Inter, Sailec, Helvetica, Arial, sans-serif', + fontFamily: 'Inter, Helvetica, Arial, sans-serif', + + fontSize: 14, + fontWeightRegular: 400, + fontWeightMedium: 500, + fontWeightBold: 700, + + h1: { + fontFamily: 'Sailec', + fontSize: 32, + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.5, + [base.breakpoints.down('sm')]: { + fontSize: 20, + }, + }, h3: { fontFamily: 'Sailec', - fontSize: '1.5rem', + fontSize: 24, fontStyle: 'normal', fontWeight: 700, - lineHeight: '2rem', + lineHeight: 1.5, + [base.breakpoints.down('sm')]: { + fontSize: 20, + }, + }, + h4: { + fontFamily: 'Sailec', + fontSize: 20, + fontStyle: 'normal', + fontWeight: 700, + lineHeight: 1.6, + [base.breakpoints.down('sm')]: { + fontSize: 18, + lineHeight: 1.5, + }, }, body1: { - fontSize: '0.875rem', - lineHeight: '1.4375rem', + fontSize: 14, + lineHeight: 1.5, + [base.breakpoints.down('sm')]: { + fontSize: 13, + lineHeight: 1.25, + }, }, body2: { - fontSize: '0.75rem', + fontSize: 12, fontWeight: 400, - lineHeight: '1.25rem', + lineHeight: 1.6, fontStyle: 'normal', }, }, @@ -175,6 +210,12 @@ export const theme = extendTheme({ background: theme.palette.grey[900], }, }), + text: ({ theme }) => ({ + ':hover': { + color: theme.palette.common.white, + background: 'transparent', + }, + }), }, variants: [ { @@ -183,8 +224,8 @@ export const theme = extendTheme({ background: theme.palette.background.gradient1, color: theme.palette.text.primary, padding: theme.spacing(2), - fontSize: theme.typography.pxToRem(20), - lineHeight: '2rem', + fontSize: 20, + lineHeight: 1.6, borderRadius: theme.shape.borderRadius * 2, fontFamily: 'Sailec, Inter, Helvetica, Arial, sans-serif', fontWeight: 500, @@ -226,10 +267,10 @@ export const theme = extendTheme({ padding: theme.spacing(1.5, 2), }, }), - title: { - fontSize: 14, + title: ({ theme }) => ({ + fontSize: theme.typography.fontSize, fontWeight: 500, - }, + }), }, }, MuiCardContent: { @@ -256,6 +297,9 @@ export const theme = extendTheme({ }, }, MuiCssBaseline: { + defaultProps: { + enableColorScheme: true, + }, styleOverrides: ` body { -webkit-font-smoothing: antialiased; @@ -270,7 +314,7 @@ export const theme = extendTheme({ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; - } + } `, }, MuiDialog: { @@ -290,7 +334,7 @@ export const theme = extendTheme({ py: 3, fontSize: 16, fontWeight: 700, - lineHeight: '28px', + lineHeight: 1.75, color: theme.palette.text.primary, }), }, @@ -314,8 +358,8 @@ export const theme = extendTheme({ position: 'static', transform: 'none', transformOrigin: 'initial', - fontSize: theme.typography.pxToRem(14), - marginBlockEnd: '0.5rem', + fontSize: theme.typography.fontSize, + marginBlockEnd: theme.spacing(1), color: `${theme.palette.text.primary}`, }, }), @@ -334,7 +378,7 @@ export const theme = extendTheme({ '& .MuiInputBase-input': { color: theme.palette.text.primary, - fontSize: theme.typography.pxToRem(14), + fontSize: theme.typography.fontSize, }, }), input: ({ theme }) => ({ @@ -422,7 +466,7 @@ export const theme = extendTheme({ styleOverrides: { text: ({ theme }) => ({ borderRadius: 15, - backgroundColor: theme.palette.grey[800], + // backgroundColor: theme.palette.grey[900], }), }, }, @@ -431,9 +475,9 @@ export const theme = extendTheme({ root: ({ theme }) => ({ minHeight: 0, padding: theme.spacing(3, 2), - fontSize: '1rem', + fontSize: 16, textTransform: 'none', - lineHeight: '1.6875rem', + lineHeight: 1.6875, ':hover': { color: theme.palette.text.primary, }, @@ -442,7 +486,9 @@ export const theme = extendTheme({ }, [theme.breakpoints.down('md')]: { padding: theme.spacing(1, 2), - fontSize: '0.875rem', + }, + [theme.breakpoints.down('sm')]: { + fontSize: 14, }, }), }, @@ -452,10 +498,10 @@ export const theme = extendTheme({ root: ({ theme }) => ({ paddingInline: theme.spacing(3), paddingBlock: theme.spacing(2), - fontSize: theme.typography.pxToRem(14), + fontSize: theme.typography.fontSize, fontStyle: 'normal', fontWeight: 400, - lineHeight: theme.typography.pxToRem(23), + lineHeight: 1.6, }), head: ({ theme }) => ({ color: theme.palette.text.secondary, From 7349fc912b3e3b255912bedbe9e61f4500d24b94 Mon Sep 17 00:00:00 2001 From: toniocodo Date: Thu, 28 Sep 2023 22:42:57 +0200 Subject: [PATCH 19/23] fix: null check eth balance --- libs/oeth/shared/src/components/AccountPopover.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/oeth/shared/src/components/AccountPopover.tsx b/libs/oeth/shared/src/components/AccountPopover.tsx index 75704dcb6..3cac0c061 100644 --- a/libs/oeth/shared/src/components/AccountPopover.tsx +++ b/libs/oeth/shared/src/components/AccountPopover.tsx @@ -128,7 +128,7 @@ export function AccountPopover({ anchor, setAnchor }: Props) { {balanceTokens.map((tok, i) => ( From eb25bfbedef90aa8309670572dbe2eb9a61c99dc Mon Sep 17 00:00:00 2001 From: toniocodo Date: Thu, 28 Sep 2023 23:00:45 +0200 Subject: [PATCH 20/23] fix: overflow token button --- libs/shared/components/src/Inputs/TokenInput.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/libs/shared/components/src/Inputs/TokenInput.tsx b/libs/shared/components/src/Inputs/TokenInput.tsx index 0a5f85d84..178340083 100644 --- a/libs/shared/components/src/Inputs/TokenInput.tsx +++ b/libs/shared/components/src/Inputs/TokenInput.tsx @@ -79,10 +79,9 @@ export const TokenInput = forwardRef( Date: Thu, 28 Sep 2023 23:36:18 +0200 Subject: [PATCH 21/23] fix: set inputMode to decimal, remove fixed height --- libs/oeth/redeem/src/views/RedeemView.tsx | 3 +-- libs/oeth/swap/src/views/SwapView.tsx | 3 +-- libs/shared/components/src/Inputs/BigIntInput.tsx | 3 ++- libs/shared/components/src/Inputs/PercentInput.tsx | 3 ++- libs/shared/theme/src/theme.tsx | 1 - 5 files changed, 6 insertions(+), 7 deletions(-) diff --git a/libs/oeth/redeem/src/views/RedeemView.tsx b/libs/oeth/redeem/src/views/RedeemView.tsx index 19e04a794..159d12084 100644 --- a/libs/oeth/redeem/src/views/RedeemView.tsx +++ b/libs/oeth/redeem/src/views/RedeemView.tsx @@ -40,9 +40,8 @@ const tokenInputStyles = { fontStyle: 'normal', fontFamily: 'Sailec, sans-serif', fontSize: 24, - lineHeight: 1.25, + lineHeight: 1.5, fontWeight: 700, - height: 24, color: 'text.primary', '&::placeholder': { color: 'text.secondary', diff --git a/libs/oeth/swap/src/views/SwapView.tsx b/libs/oeth/swap/src/views/SwapView.tsx index 8b284c7a9..a7417ccfa 100644 --- a/libs/oeth/swap/src/views/SwapView.tsx +++ b/libs/oeth/swap/src/views/SwapView.tsx @@ -55,9 +55,8 @@ const tokenInputStyles = { fontStyle: 'normal', fontFamily: 'Sailec, sans-serif', fontSize: 24, - lineHeight: 1.25, + lineHeight: 1.5, fontWeight: 700, - height: 24, '&::placeholder': { color: 'text.secondary', opacity: 1, diff --git a/libs/shared/components/src/Inputs/BigIntInput.tsx b/libs/shared/components/src/Inputs/BigIntInput.tsx index 7c8eded0e..cf8dd505a 100644 --- a/libs/shared/components/src/Inputs/BigIntInput.tsx +++ b/libs/shared/components/src/Inputs/BigIntInput.tsx @@ -66,13 +66,14 @@ export const BigIntInput = forwardRef( placeholder="0" {...rest} inputRef={ref} - inputMode="numeric" + inputMode="decimal" value={strVal} onChange={handleChange} inputProps={{ pattern: `[0-9]*(.[0-9]{0,${decimals}})`, minLength: 0, maxLength: 30, + inputMode: 'decimal', }} /> ); diff --git a/libs/shared/components/src/Inputs/PercentInput.tsx b/libs/shared/components/src/Inputs/PercentInput.tsx index e8ae1e449..1f29b0d78 100644 --- a/libs/shared/components/src/Inputs/PercentInput.tsx +++ b/libs/shared/components/src/Inputs/PercentInput.tsx @@ -64,11 +64,12 @@ export const PercentInput = forwardRef( inputRef={ref} value={strVal} onChange={handleChange} - inputMode="numeric" + inputMode="decimal" inputProps={{ pattern: `[0-9]*(.[0-9]{0,${precision}})`, minLength: 0, maxLength: precision + 4, + inputMode: 'decimal', }} /> ); diff --git a/libs/shared/theme/src/theme.tsx b/libs/shared/theme/src/theme.tsx index f29f15899..773463223 100644 --- a/libs/shared/theme/src/theme.tsx +++ b/libs/shared/theme/src/theme.tsx @@ -115,7 +115,6 @@ export const theme = extendTheme({ lineHeight: 1.5, [base.breakpoints.down('sm')]: { fontSize: 13, - lineHeight: 1.25, }, }, body2: { From b58e285fa11b3209044e1a4974c5655801b0bec4 Mon Sep 17 00:00:00 2001 From: toniocodo Date: Fri, 29 Sep 2023 00:21:58 +0200 Subject: [PATCH 22/23] fix: input glitch on mobile --- libs/shared/components/src/Inputs/BigIntInput.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/libs/shared/components/src/Inputs/BigIntInput.tsx b/libs/shared/components/src/Inputs/BigIntInput.tsx index cf8dd505a..083c95917 100644 --- a/libs/shared/components/src/Inputs/BigIntInput.tsx +++ b/libs/shared/components/src/Inputs/BigIntInput.tsx @@ -3,6 +3,7 @@ import { forwardRef, useEffect, useState } from 'react'; import { InputBase } from '@mui/material'; import { Skeleton } from '@mui/material'; import { isNilOrEmpty } from '@origin/shared/utils'; +import { usePrevious } from '@react-hookz/web'; import { formatUnits, parseUnits } from 'viem'; import type { InputBaseProps } from '@mui/material'; @@ -19,6 +20,7 @@ export type BigintInputProps = { export const BigIntInput = forwardRef( ({ value, decimals = 18, isLoading, isError, onChange, ...rest }, ref) => { const [strVal, setStrVal] = useState(formatUnits(value, decimals)); + const prev = usePrevious(strVal); useEffect(() => { if (value === 0n && (isNilOrEmpty(strVal) || strVal === '0.')) { @@ -33,22 +35,21 @@ export const BigIntInput = forwardRef( if ( isNilOrEmpty(strVal) || strVal === '0.' || - value !== parseUnits(strVal, decimals) + value !== parseUnits(prev, decimals) ) { setStrVal(formatUnits(value, decimals)); } - }, [value, decimals, strVal]); + }, [value, decimals, strVal, prev]); const handleChange = (evt: ChangeEvent) => { if (evt.target.validity.valid) { + setStrVal(evt.target.value === '.' ? '0.' : evt.target.value); const val = isNilOrEmpty(evt.target.value) || evt.target.value === '.' ? '0' : evt.target.value.replace(/\.0+$/, ''); - try { const num = parseUnits(val, decimals); - setStrVal(evt.target.value === '.' ? '0.' : evt.target.value); if (onChange && num !== value) { onChange(num); } @@ -60,6 +61,7 @@ export const BigIntInput = forwardRef( ) : ( Date: Fri, 29 Sep 2023 10:31:45 +0200 Subject: [PATCH 23/23] refactor: meaningful renaming --- libs/oeth/swap/src/components/TokenSelectModal.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/oeth/swap/src/components/TokenSelectModal.tsx b/libs/oeth/swap/src/components/TokenSelectModal.tsx index 4a1be21fa..1148e6df5 100644 --- a/libs/oeth/swap/src/components/TokenSelectModal.tsx +++ b/libs/oeth/swap/src/components/TokenSelectModal.tsx @@ -32,7 +32,7 @@ export const TokenSelectModal = ({ onClose, ...rest }: TokenSelectModalProps) => { - const toks = sortWith([ + const sortedTokens = sortWith([ ascend(prop('isSelected')), descend(prop('isSwappable')), ])(tokens); @@ -57,7 +57,7 @@ export const TokenSelectModal = ({ onClose={onClose} > - {toks.map((token, i) => ( + {sortedTokens.map((token, i) => (