Merge pull request #144 from OriginProtocol/next

OriginProtocol · Jun 13, 2024 · 2ece488 · 2ece488
2 parents 3d655dc + ab21185
commit 2ece488
Show file tree

Hide file tree

Showing 55 changed files with 2,745 additions and 1,459 deletions.
diff --git a/apps/defi/src/components/Topnav/components/AccountPopover.tsx b/apps/defi/src/components/Topnav/components/AccountPopover.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import { Button, Divider, Stack, Tab, Tabs, Typography } from '@mui/material';
+import { ActivityTile, useActivityState } from '@origin/defi/shared';
 import {
   BadgeIcon,
   ClickAwayPopover,
@@ -16,14 +17,8 @@ import {
 } from '@origin/shared/icons';
 import {
   AddressLabel,
-  ApprovalNotification,
-  BridgeNotification,
   getTokenPriceKey,
-  RedeemNotification,
-  SwapNotification,
   ThemeModeIconButton,
-  TransactionNotification,
-  useActivityState,
   useFormat,
   UserAvatar,
   useTokenPrices,
@@ -36,12 +31,9 @@ import { formatUnits } from 'viem';
 import { useAccount, useDisconnect } from 'wagmi';
 
 import type { StackProps } from '@mui/material';
-import type {
-  ClickAwayPopoverProps,
-  NotificationSnackProps,
-} from '@origin/shared/components';
+import type { Activity } from '@origin/defi/shared';
+import type { ClickAwayPopoverProps } from '@origin/shared/components';
 import type { Token } from '@origin/shared/contracts';
-import type { Activity } from '@origin/shared/providers';
 
 export const AccountPopover = (
   props: Omit<ClickAwayPopoverProps, 'children'>,
@@ -171,7 +163,7 @@ function BalanceList(props: StackProps) {
         <BalanceRow
           key={tok.symbol}
           token={tok}
-          balance={+formatUnits(balances?.[tok.symbol] ?? 0n, tok.decimals)}
+          balance={+formatUnits(balances?.[tok.id] ?? 0n, tok.decimals)}
           price={prices?.[getTokenPriceKey(tok)] ?? 0}
           isBalanceLoading={balancesLoading}
           isPriceLoading={isPricesLoading}
@@ -246,11 +238,10 @@ function BalanceRow({
 }
 
 function ActivityList(props: StackProps) {
-  const intl = useIntl();
   const [{ activities, maxVisible }] = useActivityState();
 
   const sortedActivities = pipe(
-    sort(descend((a: Activity) => a.createdOn)),
+    sort(descend((a: Activity) => a?.createdOn ?? a.status)),
     take(maxVisible),
   )(activities) as Activity[];
 
@@ -270,43 +261,17 @@ function ActivityList(props: StackProps) {
         ...props?.sx,
       }}
     >
-      {sortedActivities.map(
-        (a) =>
-          ({
-            approval: (
-              <ApprovalNotification key={a.id} {...a} {...notificationProps} />
-            ),
-            bridge: (
-              <BridgeNotification key={a.id} {...a} {...notificationProps} />
-            ),
-            redeem: (
-              <RedeemNotification key={a.id} {...a} {...notificationProps} />
-            ),
-            swap: <SwapNotification key={a.id} {...a} {...notificationProps} />,
-            transaction: (
-              <TransactionNotification
-                key={a.id}
-                {...a}
-                title={
-                  a?.title ??
-                  intl.formatMessage({
-                    defaultMessage: 'New transaction',
-                  })
-                }
-                subtitle={a?.subtitle ?? ''}
-                {...notificationProps}
-              />
-            ),
-          })[a.type],
-      )}
+      {sortedActivities.map((a) => (
+        <ActivityTile
+          key={a.id}
+          activity={a}
+          sx={{ width: 1, px: 3, py: 1.5 }}
+        />
+      ))}
     </Stack>
   );
 }
 
-const notificationProps: Partial<NotificationSnackProps> = {
-  sx: { width: 1, px: 3, py: 1.5 },
-};
-
 function EmptyActivity(props: StackProps) {
   const intl = useIntl();
 

diff --git a/apps/defi/src/components/Topnav/components/HoverMenu.tsx b/apps/defi/src/components/Topnav/components/HoverMenu.tsx
@@ -61,8 +61,6 @@ const NavMenuItem = ({ route, ...rest }: NavMenuItemProps) => {
   const anchorEl = useRef(null);
   const [open, setOpen] = useState(false);
   const navigate = useNavigate();
-  const match = useMatch({ path: route?.path ?? '/', end: route.index });
-  const isSelected = !isNilOrEmpty(match);
 
   const handleListKeyDown = (event: KeyboardEvent) => {
     if (event.key === 'Escape') {

diff --git a/apps/defi/src/components/Topnav/components/Topnav.tsx b/apps/defi/src/components/Topnav/components/Topnav.tsx
@@ -4,17 +4,21 @@ import {
   alpha,
   Box,
   Button,
+  CircularProgress,
   Drawer,
+  Stack,
+  Typography,
   useMediaQuery,
   useTheme,
 } from '@mui/material';
 import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
-import { trackEvent } from '@origin/defi/shared';
+import { trackEvent, useActivitiesStatus } from '@origin/defi/shared';
 import { FaBarsRegular, OriginLabel } from '@origin/shared/icons';
 import {
   ChainMenuButton,
   OpenAccountModalButton,
 } from '@origin/shared/providers';
+import { useIntl } from 'react-intl';
 import { Link as RouterLink } from 'react-router-dom';
 import { useAccount } from 'wagmi';
 
@@ -23,13 +27,17 @@ import { DrawerMenu } from './DrawerMenu';
 import { HoverMenu } from './HoverMenu';
 
 export const Topnav = () => {
+  const intl = useIntl();
   const { isConnected } = useAccount();
   const theme = useTheme();
   const isMd = useMediaQuery(theme.breakpoints.down('lg'));
   const isSm = useMediaQuery(theme.breakpoints.down('md'));
   const accountMenuAnchorEl = useRef(null);
   const [accountMenuOpen, setAccountMenuOpen] = useState(false);
   const [drawerOpen, setDrawerOpen] = useState(false);
+  const { status, pendingCount } = useActivitiesStatus();
+
+  const isLoading = status === 'pending' && pendingCount > 0;
 
   return (
     <>
@@ -151,7 +159,21 @@ export const Topnav = () => {
                 sx: { '&&&': { minWidth: 80, borderRadius: 2 } },
               }}
               hideAddress={isMd}
-            />
+            >
+              {isLoading ? (
+                <Stack direction="row" alignItems="center" spacing={1}>
+                  <CircularProgress size={16} />
+                  {!isMd && (
+                    <Typography noWrap color="primary.main">
+                      {intl.formatMessage(
+                        { defaultMessage: '{pendingCount} pending' },
+                        { pendingCount },
+                      )}
+                    </Typography>
+                  )}
+                </Stack>
+              ) : null}
+            </OpenAccountModalButton>
             <AccountPopover
               open={accountMenuOpen}
               anchorEl={accountMenuAnchorEl}