feat: feedback

- 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
OriginProtocol · Sep 27, 2023 · 78b76a3 · 78b76a3
1 parent 00ae472
commit 78b76a3
Show file tree

Hide file tree

Showing 18 changed files with 147 additions and 138 deletions.
diff --git a/apps/oeth/src/App.tsx b/apps/oeth/src/App.tsx
@@ -17,7 +17,7 @@ export const App = () => {
             height: theme.mixins.toolbar.height,
           })}
         />
-        <Container sx={{ my: 3 }} maxWidth="sm">
+        <Container sx={{ mt: 3, mb: 10 }} maxWidth="sm">
           <Outlet />
         </Container>
       </Stack>

diff --git 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
@@ -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)}
         />
       ) : (
-        <Box sx={{ height: '15rem', display: 'grid', placeContent: 'center' }}>
+        <Stack
+          sx={{
+            height: '15rem',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: 2,
+          }}
+        >
           <Typography>
             {intl.formatMessage({
               defaultMessage: 'Connect your wallet to see your history',
             })}
           </Typography>
-          <Button onClick={() => console.log('test')}>Connect</Button>
-        </Box>
+          <ConnectedButton />
+        </Stack>
       )}
     </Box>
   );

diff --git 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 */}
       <TransactionIcon type={props.type.toLowerCase()} />
       <Stack>
-        <Typography>{props.type}</Typography>
+        <Typography fontWeight="500">{props.type}</Typography>
         <Typography color="text.secondary" variant="body2">
           {intl.formatDate(new Date(props.timestamp))}
         </Typography>

diff --git 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) => (
+          <Typography textAlign="end">
+            {intl.formatNumber(info.getValue(), quantityFormat)}
+          </Typography>
+        ),
+        header: () => (
+          <Typography textAlign="end">
+            {intl.formatMessage({ defaultMessage: 'Change' })}
+          </Typography>
+        ),
       }),
       columnHelper.accessor('balance', {
         cell: (info) => (
-          <Stack
-            direction="row"
-            alignItems="center"
-            justifyContent="space-between"
-            gap={1}
-            sx={{ textAlign: 'right' }}
-          >
-            <Box
-              sx={{
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                maxWidth: '75%',
-              }}
-              component="span"
-            >
-              {intl.formatNumber(info.getValue(), quantityFormat)}
-            </Box>
-
-            <LinkIcon
-              url={`https://etherscan.io/tx/${info.row.original.txHash}`}
-              sx={{ transform: 'translateY(6.5%)' }}
-            />
-          </Stack>
+          <Typography textAlign="end">
+            {intl.formatNumber(info.getValue(), quantityFormat)}
+          </Typography>
+        ),
+        header: () => (
+          <Typography textAlign="end">
+            {intl.formatMessage({ defaultMessage: 'Balance' })}
+          </Typography>
+        ),
+      }),
+      columnHelper.display({
+        id: 'link',
+        cell: (info) => (
+          <LinkIcon
+            size={10}
+            url={`https://etherscan.io/tx/${info.row.original.txHash}`}
+          />
         ),
-        header: intl.formatMessage({ defaultMessage: 'Balance' }),
       }),
     ],
     [intl],
@@ -118,7 +118,7 @@ export function HistoryTable({
   });
 
   return (
-    <Stack gap={2}>
+    <Stack>
       <Table
         sx={{ '& .MuiTableCell-root': { paddingInline: { xs: 2, md: 3 } } }}
       >
@@ -155,12 +155,15 @@ export function HistoryTable({
                 '& > *:first-of-type': {
                   width: '50%',
                 },
+                '& > *:last-of-type': {
+                  width: '10%',
+                  pl: 0,
+                },
               }}
             >
               {row.getVisibleCells().map((cell) => (
                 <TableCell
                   key={cell.id}
-                  align="left"
                   sx={{
                     ...(cell.column.columnDef.id === 'type'
                       ? { '&:first-letter': { textTransform: 'uppercase' } }
@@ -176,16 +179,23 @@ export function HistoryTable({
       </Table>
       <Stack
         direction="row"
+        alignItems="baseline"
         justifyContent="flex-end"
         gap={1}
-        sx={{ paddingInline: 2 }}
+        sx={{ px: 3, py: 2 }}
       >
         <HistoryFilterButton
           disabled={!hasPreviousPage}
           onClick={() => setPage(page - 1)}
         >
           {intl.formatMessage({ defaultMessage: 'Previous' })}
         </HistoryFilterButton>
+        <Typography fontSize={13} px={2}>
+          {intl.formatMessage(
+            { defaultMessage: 'Page {page}' },
+            { page: page + 1 },
+          )}
+        </Typography>
         <HistoryFilterButton
           disabled={!hasNextPage}
           onClick={() => setPage(page + 1)}

diff --git 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
@@ -42,7 +42,7 @@ export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
         <Mix />
         <Stack flex={1} direction="column">
           <Stack direction="row" alignItems="baseline" gap={1}>
-            <Typography fontWeight={600}>
+            <Typography fontWeight={500}>
               {isEstimateLoading ? (
                 <Skeleton width={100} />
               ) : (
@@ -68,7 +68,7 @@ export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
             <Typography variant="body2" color="text.secondary">
               {intl.formatMessage({ defaultMessage: 'Gas:' })}
             </Typography>
-            <Typography variant="body2" fontWeight={600}>
+            <Typography variant="body2" fontWeight={500}>
               {isEstimateLoading || gasPriceLoading ? (
                 <Skeleton width={60} />
               ) : (
@@ -80,7 +80,7 @@ export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
             <Typography variant="body2" color="text.secondary">
               {intl.formatMessage({ defaultMessage: 'Wait time:' })}
             </Typography>
-            <Typography variant="body2" fontWeight={600}>
+            <Typography variant="body2" fontWeight={500}>
               {isEstimateLoading ? (
                 <Skeleton width={60} />
               ) : (
@@ -103,7 +103,7 @@ export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
           <Typography variant="body2" color="text.secondary">
             {intl.formatMessage({ defaultMessage: 'Rate:' })}
           </Typography>
-          <Typography variant="body2" fontWeight={600}>
+          <Typography variant="body2" fontWeight={500}>
             {isEstimateLoading ? (
               <Skeleton width={60} />
             ) : (
@@ -132,15 +132,15 @@ export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
             >
               <Stack direction="row" alignItems="center" spacing={1}>
                 <Box component="img" src={s.token.icon} />
-                <Typography fontWeight={600}>{s.token.symbol}</Typography>
+                <Typography fontWeight={500}>{s.token.symbol}</Typography>
               </Stack>
               <Stack
                 direction="row"
                 alignItems="center"
                 justifyContent="flex-end"
                 spacing={2}
               >
-                <Typography fontWeight={600}>
+                <Typography fontWeight={500}>
                   {isEstimateLoading ? (
                     <Skeleton width={80} />
                   ) : (
@@ -151,7 +151,7 @@ export const RedeemSplitCard = (props: Omit<StackProps, 'children'>) => {
                   <Skeleton width={80} />
                 ) : (
                   <Typography
-                    fontWeight={600}
+                    fontWeight={500}
                     color="text.subtle"
                     sx={{ minWidth: 100, textAlign: 'end' }}
                   >