Merge branch 'feat/update-subsquid' into feat/activity-center

.env

@@ -1 +1 @@
-VITE_SUBSQUID_URL="https://squid.subsquid.io/origin-squid/v/v5/graphql"
+VITE_SUBSQUID_URL="https://squid.subsquid.io/origin-squid/v/v6/graphql"

.graphqlconfig

@@ -1,4 +1,4 @@
 {
   "name": "Subsquid GraphQL Schema",
-  "schemaPath": "https://squid.subsquid.io/origin-squid/v/v5/graphql"
+  "schemaPath": "https://squid.subsquid.io/origin-squid/v/v6/graphql"
 }

README.md

@@ -54,7 +54,7 @@ We use `react-query` in conjunction with `graphql-codegen` for interacting with
 - run the graphql-codegen task with `pnpm nx run oeth-shared:codegen-graphql`, it will generate 
   - the global types in `libs/oeth/shared/src/generated/graphql.ts` and 
   - the generated hooks next to your graphql file (i.e. `/libs/oeth/history/src/queries.generated.tsx`)
-- use the generated hooks in your component with fully typed args and results!
+- use the generated hooks in your component with fully typed args and results
 
 Couple of things to note:
 - generated hooks receives args as first param, second param exposes all react-query api for controlling execution

libs/oeth/history/src/components/APYContainer.tsx

@@ -2,10 +2,11 @@ import { Divider, Skeleton, Stack, Typography } from '@mui/material';
 import { tokens } from '@origin/shared/contracts';
 import { balanceFormat } from '@origin/shared/utils';
 import { useIntl } from 'react-intl';
+import { formatEther } from 'viem';
 import { useAccount, useBalance } from 'wagmi';
 
 import { usePendingYield } from '../hooks';
-import { useHistoryTableQuery } from '../queries.generated';
+import { useHistoryPageQuery } from '../queries.generated';
 
 import type { StackProps } from '@mui/material';
 
@@ -17,10 +18,11 @@ export function APYContainer() {
     token: tokens.mainnet.OETH.address,
     watch: true,
   });
-  const { data: earnings, isLoading: earningsLoading } = useHistoryTableQuery(
+  const { data, isLoading } = useHistoryPageQuery(
     { address: address?.toLowerCase(), offset: 0 },
     {
       enabled: isConnected,
+      select: (data) => data?.addresses?.at(0),
     },
   );
   const { data: pendingYield, isLoading: pendingYieldLoading } =
@@ -56,10 +58,10 @@ export function APYContainer() {
           defaultMessage: 'Lifetime Earnings (OETH)',
         })}
         value={intl.formatNumber(
-          earnings?.addressById?.earned ?? 0,
+          +formatEther(BigInt(data.earned ?? '0')),
           balanceFormat,
         )}
-        isLoading={isConnected && earningsLoading}
+        isLoading={isConnected && isLoading}
       />
     </Stack>
   );

libs/oeth/history/src/components/ExportData.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import { useCallback, useRef } from 'react';
 
 import { Box, Link } from '@mui/material';
 import { useIntl } from 'react-intl';

libs/oeth/history/src/components/HistoryCard.tsx

@@ -5,26 +5,27 @@ import { ConnectedButton } from '@origin/shared/providers';
 import { useIntl } from 'react-intl';
 import { useAccount } from 'wagmi';
 
-import { useHistoryTableWithFiltersQuery } from '../queries.generated';
+import { useHistoryPageQuery } from '../queries.generated';
 import { ExportData } from './ExportData';
 import { HistoryFilters } from './HistoryFilters';
 import { HistoryTable } from './HistoryTable';
 
+import type { HistoryType } from '@origin/oeth/shared';
+
 const PAGE_SIZE = 20;
 
 export function HistoryCard() {
   const intl = useIntl();
   const [page, setPage] = useState(0);
-  const [filters, setFilters] = useState<string[]>([]);
+  const [filters, setFilters] = useState<HistoryType[]>([]);
   const { address, isConnected } = useAccount();
-
-  const { data, isFetching } = useHistoryTableWithFiltersQuery(
+  const { data, isFetching, isLoading } = useHistoryPageQuery(
     {
       address: address?.toLowerCase(),
       filters: filters.length ? filters : undefined,
       offset: page * PAGE_SIZE,
     },
-    { enabled: isConnected },
+    { enabled: isConnected, select: (data) => data?.addresses?.at(0)?.history },
   );
 
   return (
@@ -46,15 +47,15 @@ export function HistoryCard() {
             filters={filters}
             onChange={(values) => setFilters(values)}
           />
-          <ExportData data={data?.addressById?.history} />
+          <ExportData data={data} />
         </Stack>
       </Stack>
       <Divider />
       {isConnected ? (
         <HistoryTable
-          rows={data?.addressById?.history || []}
-          isLoading={isFetching}
-          hasNextPage={data?.addressById?.history?.length === PAGE_SIZE}
+          rows={data || []}
+          isLoading={isFetching && isLoading}
+          hasNextPage={data?.length === PAGE_SIZE}
           hasPreviousPage={page > 0}
           page={page}
           setPage={(page) => setPage(page)}

libs/oeth/history/src/components/HistoryFilters.tsx

@@ -11,6 +11,7 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
+import { HistoryType } from '@origin/oeth/shared';
 import { isNilOrEmpty } from '@origin/shared/utils';
 import { defineMessage, useIntl } from 'react-intl';
 
@@ -23,32 +24,38 @@ const styles = {
 };
 
 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' },
+  {
+    label: defineMessage({ defaultMessage: 'Yield' }),
+    value: HistoryType.Yield,
+  },
+  { label: defineMessage({ defaultMessage: 'Swap' }), value: HistoryType.Swap },
+  { label: defineMessage({ defaultMessage: 'Sent' }), value: HistoryType.Sent },
+  {
+    label: defineMessage({ defaultMessage: 'Received' }),
+    value: HistoryType.Received,
+  },
 ];
 
 export type HistoryFiltersProps = {
-  filters: string[];
-  onChange: (values: string[]) => void;
+  filters: HistoryType[];
+  onChange: (values: HistoryType[]) => void;
 };
 
 export function HistoryFilters({ filters, onChange }: HistoryFiltersProps) {
-  const [selected, setSelectedTypes] = useState<string[]>(filters);
+  const [selected, setSelectedTypes] = useState<HistoryType[]>(filters);
   const intl = useIntl();
   const theme = useTheme();
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 
   const handleSelect = (
     e: React.ChangeEvent<HTMLInputElement>,
-    label: string,
+    value: HistoryType,
   ) => {
     setSelectedTypes((prev) => {
       if (e.target.checked) {
-        return [...prev, label];
+        return [...prev, value];
       } else {
-        return prev.filter((val) => val !== label);
+        return prev.filter((val) => val !== value);
       }
     });
   };

libs/oeth/history/src/components/HistoryTable.tsx

@@ -18,13 +18,17 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import { useIntl } from 'react-intl';
+import { formatEther } from 'viem';
 
 import { HistoryFilterButton } from './HistoryButton';
-import { HistoryCell } from './HistoryCell';
+import { TransactionIcon } from './TransactionIcon';
 
-import type { HistoryTableQuery } from '../queries.generated';
+import type { StackProps } from '@mui/material';
+import type { HistoryType } from '@origin/oeth/shared';
 
-export type Rows = HistoryTableQuery['addressById']['history'];
+import type { HistoryPageQuery } from '../queries.generated';
+
+export type Rows = HistoryPageQuery['addresses'][0]['history'];
 
 interface Props {
   rows: Rows;
@@ -49,11 +53,9 @@ export function HistoryTable({
     () => [
       columnHelper.accessor('type', {
         cell: (info) => (
-          <HistoryCell
-            // @ts-expect-error type-mismatch
+          <HistoryTypeCell
             type={info.getValue()}
             timestamp={info.row.original.timestamp}
-            transactionHash={info.row.original.txHash}
           />
         ),
         header: intl.formatMessage({ defaultMessage: 'Type' }),
@@ -66,7 +68,10 @@ export function HistoryTable({
       columnHelper.accessor('value', {
         cell: (info) => (
           <Typography textAlign="end">
-            {intl.formatNumber(info.getValue(), quantityFormat)}
+            {intl.formatNumber(
+              +formatEther(BigInt(info.getValue() ?? '0')),
+              quantityFormat,
+            )}
           </Typography>
         ),
         header: () => (
@@ -78,7 +83,10 @@ export function HistoryTable({
       columnHelper.accessor('balance', {
         cell: (info) => (
           <Typography textAlign="end">
-            {intl.formatNumber(info.getValue(), quantityFormat)}
+            {intl.formatNumber(
+              +formatEther(BigInt(info.getValue() ?? '0')),
+              quantityFormat,
+            )}
           </Typography>
         ),
         header: () => (
@@ -160,14 +168,7 @@ export function HistoryTable({
               }}
             >
               {row.getVisibleCells().map((cell) => (
-                <TableCell
-                  key={cell.id}
-                  sx={{
-                    ...(cell.column.columnDef.id === 'type'
-                      ? { '&:first-letter': { textTransform: 'uppercase' } }
-                      : {}),
-                  }}
-                >
+                <TableCell key={cell.id}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </TableCell>
               ))}
@@ -204,3 +205,24 @@ export function HistoryTable({
     </Stack>
   );
 }
+
+type HistoryTypeCellProps = {
+  timestamp: string;
+  type: HistoryType;
+} & StackProps;
+
+function HistoryTypeCell({ timestamp, type, ...rest }: HistoryTypeCellProps) {
+  const intl = useIntl();
+
+  return (
+    <Stack {...rest} direction="row" alignItems="center" gap={1.5}>
+      <TransactionIcon type={type} />
+      <Stack>
+        <Typography fontWeight="500">{type}</Typography>
+        <Typography color="text.secondary" variant="body2">
+          {intl.formatDate(new Date(timestamp))}
+        </Typography>
+      </Stack>
+    </Stack>
+  );
+}

libs/oeth/history/src/components/TransactionIcon.stories.tsx

@@ -1,3 +1,5 @@
+import { HistoryType } from '@origin/oeth/shared';
+
 import { TransactionIcon } from './TransactionIcon';
 
 import type { Meta, StoryObj } from '@storybook/react';
@@ -6,7 +8,7 @@ const meta: Meta<typeof TransactionIcon> = {
   component: TransactionIcon,
   title: 'History/TransactionIcon',
   args: {
-    type: 'yield',
+    type: HistoryType.Yield,
   },
 };
 
@@ -24,19 +26,19 @@ export const SmallScreen: StoryObj<typeof TransactionIcon> = {
 
 export const Sent: StoryObj<typeof TransactionIcon> = {
   args: {
-    type: 'sent',
+    type: HistoryType.Sent,
   },
 };
 
 export const Received: StoryObj<typeof TransactionIcon> = {
   args: {
-    type: 'received',
+    type: HistoryType.Received,
   },
 };
 
 export const Swap: StoryObj<typeof TransactionIcon> = {
   args: {
-    type: 'swap',
+    type: HistoryType.Swap,
     tokenIcon: 'https://app.oeth.com/images/currency/reth-icon-small.png',
   },
 };