Skip to content

Commit

Permalink
feat: update subsquid v6
Browse files Browse the repository at this point in the history
- add scalars config for BigInt and DateTime
- update HistoryPage query and consumers
  • Loading branch information
toniocodo committed Oct 4, 2023
1 parent 4107322 commit 6565119
Show file tree
Hide file tree
Showing 17 changed files with 1,454 additions and 488 deletions.
2 changes: 1 addition & 1 deletion .env
Original file line number Diff line number Diff line change
@@ -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"
2 changes: 1 addition & 1 deletion .graphqlconfig
Original file line number Diff line number Diff line change
@@ -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"
}
10 changes: 6 additions & 4 deletions libs/oeth/history/src/components/APYContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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 } =
Expand Down Expand Up @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion libs/oeth/history/src/components/ExportData.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
19 changes: 10 additions & 9 deletions libs/oeth/history/src/components/HistoryCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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)}
Expand Down
35 changes: 0 additions & 35 deletions libs/oeth/history/src/components/HistoryCell.tsx

This file was deleted.

27 changes: 17 additions & 10 deletions libs/oeth/history/src/components/HistoryFilters.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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);
}
});
};
Expand Down
54 changes: 38 additions & 16 deletions libs/oeth/history/src/components/HistoryTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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' }),
Expand All @@ -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: () => (
Expand All @@ -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: () => (
Expand Down Expand Up @@ -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>
))}
Expand Down Expand Up @@ -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>
);
}
10 changes: 6 additions & 4 deletions libs/oeth/history/src/components/TransactionIcon.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { HistoryType } from '@origin/oeth/shared';

import { TransactionIcon } from './TransactionIcon';

import type { Meta, StoryObj } from '@storybook/react';
Expand All @@ -6,7 +8,7 @@ const meta: Meta<typeof TransactionIcon> = {
component: TransactionIcon,
title: 'History/TransactionIcon',
args: {
type: 'yield',
type: HistoryType.Yield,
},
};

Expand All @@ -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',
},
};
Loading

0 comments on commit 6565119

Please sign in to comment.