diff --git a/apps/hubble-stats/app/page.tsx b/apps/hubble-stats/app/page.tsx index 159fbd0f1b..a7271cb765 100644 --- a/apps/hubble-stats/app/page.tsx +++ b/apps/hubble-stats/app/page.tsx @@ -8,7 +8,9 @@ export default async function Index() { return (
+ {/* @ts-expect-error Server Component */} + {/* @ts-expect-error Server Component */}
); diff --git a/apps/hubble-stats/app/pool/[slug]/page.tsx b/apps/hubble-stats/app/pool/[slug]/page.tsx index 61487e4eaa..ab07da116f 100644 --- a/apps/hubble-stats/app/pool/[slug]/page.tsx +++ b/apps/hubble-stats/app/pool/[slug]/page.tsx @@ -12,16 +12,22 @@ export default function Pool({ params }: { params: { slug: string } }) {
- + {/* TypeScript doesn't understand async components. */} + {/* Current approach: https://github.com/vercel/next.js/issues/42292#issuecomment-1298459024 */} + {/* @ts-expect-error Server Component */} +
- + {/* @ts-expect-error Server Component */} + - + {/* @ts-expect-error Server Component */} + - + {/* @ts-expect-error Server Component */} +
); } diff --git a/apps/hubble-stats/components/Breadcrumbs/Breadcrumbs.tsx b/apps/hubble-stats/components/Breadcrumbs/Breadcrumbs.tsx index 7bbd8b2aa7..e8b8b84d80 100644 --- a/apps/hubble-stats/components/Breadcrumbs/Breadcrumbs.tsx +++ b/apps/hubble-stats/components/Breadcrumbs/Breadcrumbs.tsx @@ -13,15 +13,19 @@ import { BreadcrumbType } from './types'; const Breadcrumbs: FC = () => { const pathname = usePathname(); + const parts = pathname.split('/'); + let activeItem = parts[parts.length - 1]; - const breadCrumbs = useMemo(() => { - const parts = pathname.split('/'); - const activeItem = parts[parts.length - 1]; + if (parts.length === 3 && parts[0] === '' && parts[1] === 'pool') { + // TODO: handle getting pool name from address and redirect user if invalid address + activeItem = 'webbParachain'; + } + const breadCrumbs = useMemo(() => { const breadCrumbItems: BreadcrumbType[] = [ { label: 'Hubble Overview', - isLast: activeItem !== '' ? false : true, + isLast: activeItem === '', icon: ( ), @@ -39,7 +43,7 @@ const Breadcrumbs: FC = () => { } return breadCrumbItems; - }, [pathname]); + }, [activeItem]); return ( diff --git a/apps/hubble-stats/components/NetworkPoolTable/NetworkPoolTable.tsx b/apps/hubble-stats/components/NetworkPoolTable/NetworkPoolTable.tsx index 38309c5a32..d9175151a0 100644 --- a/apps/hubble-stats/components/NetworkPoolTable/NetworkPoolTable.tsx +++ b/apps/hubble-stats/components/NetworkPoolTable/NetworkPoolTable.tsx @@ -52,8 +52,8 @@ const staticColumns: ColumnDef[] = [ ]; const NetworkPoolTable: FC = ({ - typedChainIds, - data, + typedChainIds = [], + data = [], prefixUnit = '$', }) => { const sortedTypedChainIds = useMemo( diff --git a/apps/hubble-stats/components/NetworkPoolTable/types.ts b/apps/hubble-stats/components/NetworkPoolTable/types.ts index f90b36b4f5..2a45df211e 100644 --- a/apps/hubble-stats/components/NetworkPoolTable/types.ts +++ b/apps/hubble-stats/components/NetworkPoolTable/types.ts @@ -19,12 +19,12 @@ export interface NetworkPoolTableProps { /** * The list of all available chains */ - typedChainIds: number[]; + typedChainIds?: number[]; /** * The data for whole table */ - data: Array; + data?: Array; /** * The prefix unit of all the values on the table diff --git a/apps/hubble-stats/components/NetworkTokenTable/NetworkTokenTable.tsx b/apps/hubble-stats/components/NetworkTokenTable/NetworkTokenTable.tsx index c03bd6c523..223d8bab01 100644 --- a/apps/hubble-stats/components/NetworkTokenTable/NetworkTokenTable.tsx +++ b/apps/hubble-stats/components/NetworkTokenTable/NetworkTokenTable.tsx @@ -71,13 +71,15 @@ const staticColumns: ColumnDef[] = [ className="text-mono-200 dark:text-mono-0" /> ), - cell: (props) => , + cell: (props) => ( + + ), }), ]; const NetworkTokenTable: FC = ({ - typedChainIds, - data, + typedChainIds = [], + data = [], prefixUnit = '$', }) => { const sortedTypedChainIds = useMemo( @@ -106,6 +108,7 @@ const NetworkTokenTable: FC = ({ ) : ( diff --git a/apps/hubble-stats/components/NetworkTokenTable/types.ts b/apps/hubble-stats/components/NetworkTokenTable/types.ts index ed01c60d2b..a08ece464e 100644 --- a/apps/hubble-stats/components/NetworkTokenTable/types.ts +++ b/apps/hubble-stats/components/NetworkTokenTable/types.ts @@ -29,12 +29,12 @@ export interface NetworkTokenTableProps { /** * The list of all available chains */ - typedChainIds: number[]; + typedChainIds?: number[]; /** * The data for whole table (list of tokens and subTokens) */ - data: Array; + data?: Array; /** * The prefix unit of all the values on the table diff --git a/apps/hubble-stats/components/PoolMetadataTable/PoolMetadataTable.tsx b/apps/hubble-stats/components/PoolMetadataTable/PoolMetadataTable.tsx index 60f36892ad..d269678669 100644 --- a/apps/hubble-stats/components/PoolMetadataTable/PoolMetadataTable.tsx +++ b/apps/hubble-stats/components/PoolMetadataTable/PoolMetadataTable.tsx @@ -1,6 +1,7 @@ 'use client'; import { FC } from 'react'; +import cx from 'classnames'; import { createColumnHelper, useReactTable, @@ -36,27 +37,28 @@ const columns: ColumnDef[] = [ - {props.getValue() ? ( - props.row.original.isAddress ? ( -
- {shortenHex(props.getValue())} - {props.row.original.externalLink && ( - - - - )} -
- ) : ( - props.getValue() - ) - ) : ( + {props.getValue() === undefined ? ( '-' + ) : props.row.original.isAddress ? ( + <> + {shortenHex(props.getValue())} + {props.row.original.externalLink && ( + + + + )} + + ) : ( + props.getValue() )} ), diff --git a/apps/hubble-stats/components/PoolOverviewItem/PoolOverviewItem.tsx b/apps/hubble-stats/components/PoolOverviewItem/PoolOverviewItem.tsx index f4f97f81f2..9bd1794576 100644 --- a/apps/hubble-stats/components/PoolOverviewItem/PoolOverviewItem.tsx +++ b/apps/hubble-stats/components/PoolOverviewItem/PoolOverviewItem.tsx @@ -18,7 +18,7 @@ const PoolOverviewItem: FC = ({
{value && (prefix ?? '')} - {getRoundedAmountString(value, 2, { + {getRoundedAmountString(value, 1, { roundingFunction: Math.floor, totalLength: 0, })} @@ -42,7 +42,7 @@ const PoolOverviewItem: FC = ({ 'rotate-90 !fill-red-70': changeRate < 0, })} /> - {getRoundedAmountString(Math.abs(changeRate), 2)}% + {getRoundedAmountString(Math.abs(changeRate), 1)}% )}
diff --git a/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx b/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx index 2c6dda3fc1..562aa13706 100644 --- a/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx +++ b/apps/hubble-stats/components/PoolTransactionsTable/PoolTransactionsTable.tsx @@ -12,6 +12,7 @@ import { Table as RTTable, } from '@tanstack/react-table'; import { Table, fuzzyFilter, ChainChip } from '@webb-tools/webb-ui-components'; +import { chainsConfig } from '@webb-tools/dapp-config/chains'; import { PoolTransactionType, PoolTransactionsTableProps } from './types'; import { @@ -45,16 +46,18 @@ const columns: ColumnDef[] = [ /> ), }), - columnHelper.accessor('source', { + columnHelper.accessor('sourceTypedChainId', { header: () => , cell: (props) => ( ), }), - columnHelper.accessor('destination', { + columnHelper.accessor('destinationTypedChainId', { header: () => , cell: (props) => , }), diff --git a/apps/hubble-stats/components/PoolTransactionsTable/types.ts b/apps/hubble-stats/components/PoolTransactionsTable/types.ts index 792f4727a6..e4b6068cc6 100644 --- a/apps/hubble-stats/components/PoolTransactionsTable/types.ts +++ b/apps/hubble-stats/components/PoolTransactionsTable/types.ts @@ -1,4 +1,3 @@ -import { ChainGroup } from '@webb-tools/dapp-config'; import { ActivityType } from '../table/types'; export type PoolTransactionType = { @@ -6,10 +5,9 @@ export type PoolTransactionType = { activity: ActivityType; tokenAmount: number; tokenSymbol: string; - source: string; - sourceChainType: ChainGroup; - destination: string; - time: number; + sourceTypedChainId: number; + destinationTypedChainId?: number; + time?: string; }; export interface PoolTransactionsTableProps { diff --git a/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx b/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx index 61d04eca8b..8ba82d1b97 100644 --- a/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx +++ b/apps/hubble-stats/components/ShieldedAssetsTable/ShieldedAssetsTable.tsx @@ -71,7 +71,7 @@ const columns: ColumnDef[] = [ ]; const ShieldedAssetsTable: FC = ({ - data, + data = [], pageSize, }) => { const table = useReactTable({ diff --git a/apps/hubble-stats/components/ShieldedAssetsTable/types.ts b/apps/hubble-stats/components/ShieldedAssetsTable/types.ts index 5480baab6b..ce6ba1a9ac 100644 --- a/apps/hubble-stats/components/ShieldedAssetsTable/types.ts +++ b/apps/hubble-stats/components/ShieldedAssetsTable/types.ts @@ -12,6 +12,6 @@ export interface ShieldedAssetType { } export interface ShieldedAssetsTableProps { - data: ShieldedAssetType[]; + data?: ShieldedAssetType[]; pageSize: number; } diff --git a/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx b/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx index 681c4a1034..3c5737b7be 100644 --- a/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx +++ b/apps/hubble-stats/components/ShieldedPoolsTable/ShieldedPoolsTable.tsx @@ -42,7 +42,9 @@ const columns: ColumnDef[] = [ }), columnHelper.accessor('token', { header: () => , - cell: (props) => , + cell: (props) => ( + + ), }), columnHelper.accessor('deposits24h', { header: () => , @@ -65,7 +67,7 @@ const columns: ColumnDef[] = [ ]; const ShieldedPoolsTable: FC = ({ - data, + data = [], pageSize, }) => { const table = useReactTable({ diff --git a/apps/hubble-stats/components/ShieldedPoolsTable/types.ts b/apps/hubble-stats/components/ShieldedPoolsTable/types.ts index e1db285fc8..f5352c2a3b 100644 --- a/apps/hubble-stats/components/ShieldedPoolsTable/types.ts +++ b/apps/hubble-stats/components/ShieldedPoolsTable/types.ts @@ -11,6 +11,6 @@ export interface ShieldedPoolType { } export interface ShieldedPoolsTableProps { - data: ShieldedPoolType[]; + data?: ShieldedPoolType[]; pageSize: number; } diff --git a/apps/hubble-stats/components/table/types.ts b/apps/hubble-stats/components/table/types.ts index 8f3d774d8b..2e982e1784 100644 --- a/apps/hubble-stats/components/table/types.ts +++ b/apps/hubble-stats/components/table/types.ts @@ -25,7 +25,7 @@ export interface ActivityCellProps { } export interface TimeCellProps { - time?: number; + time?: string; className?: string; } diff --git a/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx b/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx index de097005c9..04c44b3bb6 100644 --- a/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx +++ b/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx @@ -1,9 +1,47 @@ -import { FC } from 'react'; import cx from 'classnames'; import { KeyMetricItem } from '../../components'; +import { getKeyMetricsData } from '../../data'; + +export default async function KeyMetricsTableContainer() { + const { + totalTx, + txChangeRate, + tvl, + tvlChangeRate, + volume, + volumeChangeRate, + fees, + } = await getKeyMetricsData(); + + const TotalTx = ( + + ); + + const Tvl = ( + + ); + + const Volume = ( + + ); + + const Fees = ; -const KeyMetricsTableContainer: FC = () => { return (
{ > {/* Tablet and Desktop */}
- - - - + {TotalTx} + {Tvl} + {Volume} + {Fees}
{/* Mobile */}
- - + {TotalTx} + {Tvl}
- - + {Volume} + {Fees}
); -}; - -export default KeyMetricsTableContainer; +} diff --git a/apps/hubble-stats/containers/Layout/Layout.tsx b/apps/hubble-stats/containers/Layout/Layout.tsx index 78aff88d72..a33de09f26 100644 --- a/apps/hubble-stats/containers/Layout/Layout.tsx +++ b/apps/hubble-stats/containers/Layout/Layout.tsx @@ -15,6 +15,9 @@ const Layout: FC<{ children?: React.ReactNode }> = ({ children }) => { + {/* TypeScript doesn't understand async components. */} + {/* Current approach: https://github.com/vercel/next.js/issues/42292#issuecomment-1298459024 */} + {/* @ts-expect-error Server Component */} diff --git a/apps/hubble-stats/containers/NetworkTablesContainer/NetworkTablesContainer.tsx b/apps/hubble-stats/containers/NetworkTablesContainer/NetworkTablesContainer.tsx index b0696dc80f..43a538a6c6 100644 --- a/apps/hubble-stats/containers/NetworkTablesContainer/NetworkTablesContainer.tsx +++ b/apps/hubble-stats/containers/NetworkTablesContainer/NetworkTablesContainer.tsx @@ -1,21 +1,16 @@ -import { FC } from 'react'; import { TableAndChartTabs, Typography } from '@webb-tools/webb-ui-components'; import { NetworkPoolTable, NetworkTokenTable } from '../../components'; -import { NetworkPoolType } from '../../components/NetworkPoolTable/types'; -import { NetworkTokenType } from '../../components/NetworkTokenTable/types'; +import { getNetworkTablesData } from '../../data'; -interface NetworkTablesContainerProps { - typedChainIds?: number[]; - networkPoolData?: NetworkPoolType[]; - networkTokenData?: NetworkTokenType[]; -} +export default async function NetworkTablesContainer({ + poolAddress, +}: { + poolAddress: string; +}) { + const { networkPoolData, networkTokenData, typedChainIds } = + await getNetworkTablesData(poolAddress); -const NetworkTablesContainer: FC = ({ - typedChainIds = [], - networkPoolData = [], - networkTokenData = [], -}) => { return (
= ({ data={networkTokenData} /> - {typedChainIds.length > 0 && ( + {typedChainIds !== undefined && typedChainIds.length > 0 && ( = ({
); -}; - -export default NetworkTablesContainer; +} diff --git a/apps/hubble-stats/containers/OverviewChipsContainer/OverviewChipsContainer.tsx b/apps/hubble-stats/containers/OverviewChipsContainer/OverviewChipsContainer.tsx index ea6e3cb1c6..56599300e7 100644 --- a/apps/hubble-stats/containers/OverviewChipsContainer/OverviewChipsContainer.tsx +++ b/apps/hubble-stats/containers/OverviewChipsContainer/OverviewChipsContainer.tsx @@ -1,29 +1,23 @@ -import { FC } from 'react'; +import numbro from 'numbro'; import { Chip } from '@webb-tools/webb-ui-components'; import { BlockIcon } from '@webb-tools/icons'; -interface OverviewChipsContainerProps { - tvlValue?: number; - volumeValue?: number; -} +import { getOverviewChipsData } from '../../data'; + +export default async function OverviewChipsContainer() { + const { tvl, volume } = await getOverviewChipsData(); -const OverviewChipsContainer: FC = ({ - tvlValue, - volumeValue, -}) => { return (
- TVL: {tvlValue ? `${tvlValue}` : ' - '} + TVL: ${numbro(tvl).format({ thousandSeparated: true })} - Volume: {volumeValue ? `${volumeValue}` : ' - '} + Volume: ${numbro(volume).format({ thousandSeparated: true })}
); -}; - -export default OverviewChipsContainer; +} diff --git a/apps/hubble-stats/containers/PoolMetadataTableContainer/PoolMetadataTableContainer.tsx b/apps/hubble-stats/containers/PoolMetadataTableContainer/PoolMetadataTableContainer.tsx index 1d501a43eb..f3d494fbb8 100644 --- a/apps/hubble-stats/containers/PoolMetadataTableContainer/PoolMetadataTableContainer.tsx +++ b/apps/hubble-stats/containers/PoolMetadataTableContainer/PoolMetadataTableContainer.tsx @@ -1,45 +1,68 @@ -import { FC } from 'react'; import { Typography } from '@webb-tools/webb-ui-components'; import { PoolMetadataTable } from '../../components'; import { PoolAttributeType } from '../../components/PoolMetadataTable/types'; +import { getPoolMetadataData } from '../../data'; -const metadata: PoolAttributeType[] = [ - { - name: 'Pool name', - }, - { - name: 'Pool symbol', - }, - { - name: 'Signature Bridge', - isAddress: true, - externalLink: '#', - }, - { - name: 'VAnchor', - isAddress: true, - externalLink: '#', - }, - { - name: 'Fungible Token', - isAddress: true, - externalLink: '#', - }, - { - name: 'Treasury Address', - isAddress: true, - externalLink: '#', - }, - { - name: 'Wrapping Fees', - }, - { - name: 'Creation date', - }, -]; +export default async function PoolMetadataTableContainer({ + poolAddress, +}: { + poolAddress: string; +}) { + const { + name, + symbol, + signatureBridge, + vAnchor, + fungibleToken, + treasuryAddress, + wrappingFees, + creationDate, + } = await getPoolMetadataData(poolAddress); + + const metadata: PoolAttributeType[] = [ + { + name: 'Pool name', + detail: name, + }, + { + name: 'Pool symbol', + detail: symbol, + }, + { + name: 'Signature Bridge', + detail: signatureBridge, + isAddress: true, + externalLink: '#', + }, + { + name: 'VAnchor', + detail: vAnchor, + isAddress: true, + externalLink: '#', + }, + { + name: 'Fungible Token', + detail: fungibleToken, + isAddress: true, + externalLink: '#', + }, + { + name: 'Treasury Address', + detail: treasuryAddress, + isAddress: true, + externalLink: '#', + }, + { + name: 'Wrapping Fees', + detail: `${wrappingFees}%`, + }, + { + name: 'Creation date', + detail: creationDate, + }, + ]; -const PoolMetadataTableContainer: FC = () => { return (
@@ -48,6 +71,4 @@ const PoolMetadataTableContainer: FC = () => {
); -}; - -export default PoolMetadataTableContainer; +} diff --git a/apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx b/apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx index 307b1e316c..2ed4631aa9 100644 --- a/apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx +++ b/apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx @@ -1,4 +1,3 @@ -import { FC } from 'react'; import cx from 'classnames'; import { Typography } from '@webb-tools/webb-ui-components'; import { shortenHex } from '@webb-tools/webb-ui-components/utils'; @@ -9,22 +8,24 @@ import { } from '@webb-tools/icons'; import { PoolTypeChip, PoolOverviewItem } from '../../components'; -import { PoolType } from '../../components/PoolTypeChip/types'; +import { getPoolOverviewData } from '../../data'; -type PoolOverviewType = { - name: string; - address: string; - type: PoolType; - deposits24h: number; - depositsChangeRate: number; - tvl: number; - tvlChangeRate: number; - fees24h: number; -}; +export default async function PoolOverviewContainer({ + poolAddress, +}: { + poolAddress: string; +}) { + const { + name, + url, + type, + deposits24h, + depositsChangeRate, + tvl, + tvlChangeRate, + fees24h, + } = await getPoolOverviewData(poolAddress); -const PoolOverviewContainer: FC<{ poolOverviewData?: PoolOverviewType }> = ({ - poolOverviewData = undefined, -}) => { return (
= ({ {/* Name */} - {poolOverviewData?.name ?? '-'} + {name} {/* Address */} @@ -58,26 +59,18 @@ const PoolOverviewContainer: FC<{ poolOverviewData?: PoolOverviewType }> = ({ variant="body1" className="text-mono-140 dark:text-mono-40" > - {poolOverviewData?.address - ? shortenHex(poolOverviewData.address, 4) - : '-'} + {shortenHex(poolAddress)} - {poolOverviewData?.address && ( - - - - )} + + +
{/* Type */} @@ -85,26 +78,24 @@ const PoolOverviewContainer: FC<{ poolOverviewData?: PoolOverviewType }> = ({
); -}; - -export default PoolOverviewContainer; +} diff --git a/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableCmp.tsx b/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableCmp.tsx new file mode 100644 index 0000000000..3d6564aeff --- /dev/null +++ b/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableCmp.tsx @@ -0,0 +1,55 @@ +'use client'; + +import { useMemo } from 'react'; +import { TableAndChartTabs } from '@webb-tools/webb-ui-components'; + +import { PoolTransactionsTable } from '../../components'; +import { FilterButton } from '../../components/table'; +import { PoolTransactionType } from '../../components/PoolTransactionsTable/types'; + +const pageSize = 10; + +const PoolTransactionsTableCmp = ({ + transactions, +}: { + transactions: PoolTransactionType[]; +}) => { + const filterButton = useMemo( + () => ( + { + return; + }} + sourceChains={[]} + selectedSourceChains={[]} + setSelectedSourceChains={() => { + return; + }} + destinationChains={[]} + selectedDestinationChains={[]} + setSelectedDestinationChains={() => { + return; + }} + showAllFn={() => { + return; + }} + /> + ), + [] + ); + + return ( + + + + ); +}; + +export default PoolTransactionsTableCmp; diff --git a/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx b/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx index 7016810b30..120e12607d 100644 --- a/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx +++ b/apps/hubble-stats/containers/PoolTransactionsTableContainer/PoolTransactionsTableContainer.tsx @@ -1,57 +1,12 @@ -'use client'; +import PoolTransactionsTableCmp from './PoolTransactionsTableCmp'; +import { getPoolTransactionsData } from '../../data'; -import { FC, useMemo } from 'react'; -import { TableAndChartTabs } from '@webb-tools/webb-ui-components'; +export default async function PoolTransactionsTableContainer({ + poolAddress, +}: { + poolAddress: string; +}) { + const { transactions } = await getPoolTransactionsData(poolAddress); -import { PoolTransactionsTable } from '../../components'; -import { FilterButton } from '../../components/table'; -import { PoolTransactionType } from '../../components/PoolTransactionsTable/types'; - -interface PoolTransactionsTableContainerProps { - poolsData?: PoolTransactionType[]; + return ; } - -const pageSize = 10; - -const PoolTransactionsTableContainer: FC< - PoolTransactionsTableContainerProps -> = ({ poolsData = [] }) => { - const filterButton = useMemo( - () => ( - { - return; - }} - sourceChains={[]} - selectedSourceChains={[]} - setSelectedSourceChains={() => { - return; - }} - destinationChains={[]} - selectedDestinationChains={[]} - setSelectedDestinationChains={() => { - return; - }} - showAllFn={() => { - return; - }} - /> - ), - [] - ); - - return ( - - - - ); -}; - -export default PoolTransactionsTableContainer; diff --git a/apps/hubble-stats/containers/ShieldedTablesContainer/ShieldedTablesContainer.tsx b/apps/hubble-stats/containers/ShieldedTablesContainer/ShieldedTablesContainer.tsx index a85c97ec15..a2bc50214d 100644 --- a/apps/hubble-stats/containers/ShieldedTablesContainer/ShieldedTablesContainer.tsx +++ b/apps/hubble-stats/containers/ShieldedTablesContainer/ShieldedTablesContainer.tsx @@ -1,23 +1,15 @@ -import { FC } from 'react'; import { TableAndChartTabs, TabContent } from '@webb-tools/webb-ui-components'; import { ShieldedAssetsTable, ShieldedPoolsTable } from '../../components'; -import { ShieldedAssetType } from '../../components/ShieldedAssetsTable/types'; -import { ShieldedPoolType } from '../../components/ShieldedPoolsTable/types'; - -interface ShieldedTablesContainerProps { - assetsData?: ShieldedAssetType[]; - poolsData?: ShieldedPoolType[]; -} +import { getShieldedTablesData } from '../../data'; const pageSize = 5; const assetsTableTab = 'Shielded Assets'; const poolsTableTab = 'Shielded Pools'; -const ShieldedTablesContainer: FC = ({ - assetsData = [], - poolsData = [], -}) => { +export default async function ShieldedTablesContainer() { + const { assetsData, poolsData } = await getShieldedTablesData(); + return ( = ({ ); -}; - -export default ShieldedTablesContainer; +} diff --git a/apps/hubble-stats/data/getKeyMetricsData.ts b/apps/hubble-stats/data/getKeyMetricsData.ts new file mode 100644 index 0000000000..bc7dcb1e2a --- /dev/null +++ b/apps/hubble-stats/data/getKeyMetricsData.ts @@ -0,0 +1,24 @@ +import { randNumber, randFloat } from '@ngneat/falso'; + +type KeyMetricDataType = { + totalTx: number; + txChangeRate: number; + tvl: number; + tvlChangeRate: number; + volume: number; + volumeChangeRate: number; + fees: number; +}; + +export default async function getKeyMetricsData(): Promise { + await new Promise((r) => setTimeout(r, 1000)); + return { + totalTx: randNumber({ min: 1000, max: 9999 }), + txChangeRate: randFloat({ min: -20, max: 20, fraction: 2 }), + tvl: randNumber({ min: 1_000_000, max: 50_000_000 }), + tvlChangeRate: randFloat({ min: -20, max: 20, fraction: 2 }), + volume: randNumber({ min: 20_000_000, max: 99_999_999 }), + volumeChangeRate: randFloat({ min: -20, max: 20, fraction: 2 }), + fees: randNumber({ min: 1000, max: 99_999 }), + }; +} diff --git a/apps/hubble-stats/data/getNetworkTablesData.ts b/apps/hubble-stats/data/getNetworkTablesData.ts new file mode 100644 index 0000000000..91f27352bc --- /dev/null +++ b/apps/hubble-stats/data/getNetworkTablesData.ts @@ -0,0 +1,79 @@ +import { randNumber } from '@ngneat/falso'; + +import { NetworkPoolType } from '../components/NetworkPoolTable/types'; +import { NetworkTokenType } from '../components/NetworkTokenTable/types'; + +type NetworkTablesDataType = { + typedChainIds?: number[]; + networkPoolData?: NetworkPoolType[]; + networkTokenData?: NetworkTokenType[]; +}; + +const typedChainIds = [ + 1099511627781, 1099511628196, 1099511629063, 1099511670889, 1099511707777, + 1099512049389, 1099512162129, 1099522782887, +]; + +const getNewPool = (): NetworkPoolType => { + return { + symbol: 'webbPRC', + aggregate: randNumber({ min: 1_000_000, max: 20_000_000 }), + chainsData: typedChainIds.reduce( + (data, typedChainId) => ({ + ...data, + [typedChainId]: randNumber({ min: 1_000_000, max: 20_000_000 }), + }), + {} + ), + }; +}; + +const getNewToken = (): NetworkTokenType => { + return { + symbol: 'webbPRC', + aggregate: randNumber({ min: 1_000_000, max: 20_000_000 }), + chainsData: typedChainIds.reduce( + (data, typedChainId) => ({ + ...data, + [typedChainId]: randNumber({ min: 1_000_000, max: 20_000_000 }), + }), + {} + ), + tokens: [ + { + symbol: 'eth', + compositionPercentage: randNumber({ min: 0, max: 100 }), + aggregate: randNumber({ min: 1_000_000, max: 20_000_000 }), + chainsData: typedChainIds.reduce( + (data, typedChainId) => ({ + ...data, + [typedChainId]: randNumber({ min: 1_000, max: 2_000_000 }), + }), + {} + ), + }, + { + symbol: 'usdt', + compositionPercentage: randNumber({ min: 0, max: 100 }), + aggregate: randNumber({ min: 1_000_000, max: 20_000_000 }), + chainsData: typedChainIds.reduce( + (data, typedChainId) => ({ + ...data, + [typedChainId]: randNumber({ min: 1_000, max: 2_000_000 }), + }), + {} + ), + }, + ], + }; +}; + +export default async function getNetworkTablesData( + poolAddress: string +): Promise { + return { + typedChainIds, + networkPoolData: [getNewPool()], + networkTokenData: [getNewToken()], + }; +} diff --git a/apps/hubble-stats/data/getOverviewChipsData.ts b/apps/hubble-stats/data/getOverviewChipsData.ts new file mode 100644 index 0000000000..18e8d87698 --- /dev/null +++ b/apps/hubble-stats/data/getOverviewChipsData.ts @@ -0,0 +1,14 @@ +import { randNumber } from '@ngneat/falso'; + +type OverviewChipsDataType = { + tvl: number; + volume: number; +}; + +export default async function getOverviewChipsData(): Promise { + await new Promise((r) => setTimeout(r, 1000)); + return { + tvl: randNumber({ min: 10_000_000, max: 99_999_999 }), + volume: randNumber({ min: 1_000_000, max: 9_999_999 }), + }; +} diff --git a/apps/hubble-stats/data/getPoolMetadataData.ts b/apps/hubble-stats/data/getPoolMetadataData.ts new file mode 100644 index 0000000000..87e0f50463 --- /dev/null +++ b/apps/hubble-stats/data/getPoolMetadataData.ts @@ -0,0 +1,28 @@ +import { randNumber, randEthereumAddress } from '@ngneat/falso'; + +type PoolMetadataDataType = { + name: string; + symbol: string; + signatureBridge: string; + vAnchor: string; + fungibleToken: string; + treasuryAddress: string; + wrappingFees: number; + creationDate: string; +}; + +export default async function getPoolMetadataData( + poolAddress: string +): Promise { + await new Promise((r) => setTimeout(r, 1000)); + return { + name: 'Webb Parachain', + symbol: 'webbPRC', + signatureBridge: randEthereumAddress(), + vAnchor: randEthereumAddress(), + fungibleToken: randEthereumAddress(), + treasuryAddress: randEthereumAddress(), + wrappingFees: randNumber({ min: 1, max: 99 }), + creationDate: '13 August 2023', + }; +} diff --git a/apps/hubble-stats/data/getPoolOverviewData.ts b/apps/hubble-stats/data/getPoolOverviewData.ts new file mode 100644 index 0000000000..91f8498bbd --- /dev/null +++ b/apps/hubble-stats/data/getPoolOverviewData.ts @@ -0,0 +1,29 @@ +import { rand, randNumber } from '@ngneat/falso'; + +import { PoolType } from '../components/PoolTypeChip/types'; + +type PoolOverviewType = { + name: string; + url: string; + type: PoolType; + deposits24h: number; + depositsChangeRate: number; + tvl: number; + tvlChangeRate: number; + fees24h: number; +}; + +export default async function getPoolOverviewData( + poolAddress: string +): Promise { + return { + name: 'webbParachain', + url: '#', + type: rand(['single', 'multi']), + deposits24h: randNumber({ min: 1000, max: 9999 }), + depositsChangeRate: randNumber({ min: -20, max: 20, fraction: 2 }), + tvl: randNumber({ min: 1_000_000, max: 50_000_000 }), + tvlChangeRate: randNumber({ min: -20, max: 20, fraction: 2 }), + fees24h: randNumber({ min: 1000, max: 99_999 }), + }; +} diff --git a/apps/hubble-stats/data/getPoolTransactionsData.ts b/apps/hubble-stats/data/getPoolTransactionsData.ts new file mode 100644 index 0000000000..e803b1724d --- /dev/null +++ b/apps/hubble-stats/data/getPoolTransactionsData.ts @@ -0,0 +1,38 @@ +import { + rand, + randEthereumAddress, + randNumber, + randFloat, +} from '@ngneat/falso'; +import { arrayFrom } from '@webb-tools/webb-ui-components/utils'; + +import { PoolTransactionType } from '../components/PoolTransactionsTable/types'; + +const typedChainIds = [ + 1099511627781, 1099511628196, 1099511629063, 1099511670889, 1099511707777, + 1099512049389, 1099512162129, 1099522782887, +]; + +type PoolTransactionDataType = { + transactions: PoolTransactionType[]; +}; + +const getNewTx = (): PoolTransactionType => { + return { + txHash: randEthereumAddress(), + activity: rand(['deposit', 'transfer', 'withdraw']), + tokenAmount: randFloat({ min: 0, max: 20, fraction: 2 }), + tokenSymbol: rand(['ETH', 'WETH', 'webbPRC']), + sourceTypedChainId: rand(typedChainIds), + destinationTypedChainId: undefined, + time: 'Today', + }; +}; + +export default async function getPoolTransactionsData( + poolAddress: string +): Promise { + return { + transactions: arrayFrom(15, () => getNewTx()), + }; +} diff --git a/apps/hubble-stats/data/getShieldedTablesData.ts b/apps/hubble-stats/data/getShieldedTablesData.ts new file mode 100644 index 0000000000..d8bed839a3 --- /dev/null +++ b/apps/hubble-stats/data/getShieldedTablesData.ts @@ -0,0 +1,77 @@ +import { rand, randEthereumAddress, randNumber } from '@ngneat/falso'; +import { arrayFrom } from '@webb-tools/webb-ui-components/utils'; + +import { ShieldedAssetType } from '../components/ShieldedAssetsTable/types'; +import { ShieldedPoolType } from '../components/ShieldedPoolsTable/types'; + +type ShieldedTablesDataType = { + assetsData: ShieldedAssetType[]; + poolsData: ShieldedPoolType[]; +}; + +const typedChainIds = [ + 1099511627781, 1099511628196, 1099511629063, 1099511670889, 1099511707777, + 1099512049389, 1099512162129, 1099522782887, +]; + +const tokens = [ + 'dai', + 'eth', + 'usdc', + 'usdt', + 'moondev', + 'matic', + 'weth', + 'op', + 'arbitrum', +]; + +const getNewAsset = (): ShieldedAssetType => { + return { + address: randEthereumAddress(), + symbol: 'webbParachain', + url: '#', + poolType: rand(['single', 'multi']), + composition: [ + ...new Set( + rand(tokens, { + length: randNumber({ min: 2, max: 4 }), + }) + ), + ], + deposits24h: randNumber({ min: 1000, max: 9999 }), + tvl: randNumber({ min: 1_000_000, max: 50_000_000 }), + typedChainIds: [ + ...new Set( + rand(typedChainIds, { + length: randNumber({ min: 2, max: typedChainIds.length }), + }) + ), + ], + }; +}; + +const getNewPool = (): ShieldedPoolType => { + return { + address: randEthereumAddress(), + symbol: 'MASP-1', + poolType: rand(['single', 'multi']), + token: randNumber({ min: 1, max: 4 }), + deposits24h: randNumber({ min: 1000, max: 9999 }), + tvl: randNumber({ min: 1_000_000, max: 50_000_000 }), + typedChainIds: [ + ...new Set( + rand(typedChainIds, { + length: randNumber({ min: 2, max: typedChainIds.length }), + }) + ), + ], + }; +}; + +export default async function getShieldedTablesData(): Promise { + await new Promise((r) => setTimeout(r, 1000)); + const assetsData = arrayFrom(8, () => getNewAsset()); + const poolsData = arrayFrom(8, () => getNewPool()); + return { assetsData, poolsData }; +} diff --git a/apps/hubble-stats/data/index.ts b/apps/hubble-stats/data/index.ts new file mode 100644 index 0000000000..247414480f --- /dev/null +++ b/apps/hubble-stats/data/index.ts @@ -0,0 +1,7 @@ +export { default as getKeyMetricsData } from './getKeyMetricsData'; +export { default as getNetworkTablesData } from './getNetworkTablesData'; +export { default as getOverviewChipsData } from './getOverviewChipsData'; +export { default as getPoolMetadataData } from './getPoolMetadataData'; +export { default as getPoolOverviewData } from './getPoolOverviewData'; +export { default as getPoolTransactionsData } from './getPoolTransactionsData'; +export { default as getShieldedTablesData } from './getShieldedTablesData'; diff --git a/libs/icons/src/chains/optimism-goerli.svg b/libs/icons/src/chains/optimism-goerli.svg index e558decedf..72bf242962 100644 --- a/libs/icons/src/chains/optimism-goerli.svg +++ b/libs/icons/src/chains/optimism-goerli.svg @@ -1,11 +1,25 @@ - - - - + + + + + + + + +