diff --git a/.changeset/grumpy-snakes-begin.md b/.changeset/grumpy-snakes-begin.md new file mode 100644 index 0000000000..3ee52094ac --- /dev/null +++ b/.changeset/grumpy-snakes-begin.md @@ -0,0 +1,6 @@ +--- +'@kadena/graph': patch +--- + +Added chain id to transactions filter on block object; changed default value for +maximum confirmation depth diff --git a/.changeset/wild-bears-press.md b/.changeset/wild-bears-press.md new file mode 100644 index 0000000000..27e15d8553 --- /dev/null +++ b/.changeset/wild-bears-press.md @@ -0,0 +1,5 @@ +--- +'@kadena/graph-client': patch +--- + +Added Guards to Account page and updated styling; added LoaderAndError component diff --git a/packages/apps/graph-client/src/components/Common/Layout/Header/Header.tsx b/packages/apps/graph-client/src/components/Common/Layout/Header/Header.tsx index 6634c963bc..bea382059d 100644 --- a/packages/apps/graph-client/src/components/Common/Layout/Header/Header.tsx +++ b/packages/apps/graph-client/src/components/Common/Layout/Header/Header.tsx @@ -10,7 +10,7 @@ import { import { useRouter } from 'next/router'; import type { FC } from 'react'; import React, { useState } from 'react'; -import { mainStyle } from '../../main/styles.css'; +import { headerStyle } from './styles.css'; export interface IHeaderProps { title?: string; @@ -155,14 +155,14 @@ const Header: FC = (props) => { return (
-
+
router.push(routes.HOME)} @@ -250,7 +250,7 @@ const Header: FC = (props) => { -
+
); }; diff --git a/packages/apps/graph-client/src/components/Common/Layout/Header/styles.css.ts b/packages/apps/graph-client/src/components/Common/Layout/Header/styles.css.ts new file mode 100644 index 0000000000..7ee196660e --- /dev/null +++ b/packages/apps/graph-client/src/components/Common/Layout/Header/styles.css.ts @@ -0,0 +1,9 @@ +import { style } from '@vanilla-extract/css'; + +export const headerStyle = style({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + flexDirection: 'column', + paddingBottom: '2rem', +}); diff --git a/packages/apps/graph-client/src/components/Common/Layout/index.tsx b/packages/apps/graph-client/src/components/Common/Layout/index.tsx index acd45ab2c4..4619399a27 100644 --- a/packages/apps/graph-client/src/components/Common/Layout/index.tsx +++ b/packages/apps/graph-client/src/components/Common/Layout/index.tsx @@ -1,8 +1,8 @@ import Head from 'next/head'; import type { FC, ReactNode } from 'react'; import React from 'react'; -import { mainStyle } from '../main/styles.css'; import Header from './Header/Header'; +import { documentStyle } from './styles.css'; interface IProps { children?: ReactNode; @@ -12,13 +12,13 @@ const appName = 'Kadena Graph Client'; export const Layout: FC = ({ children }: IProps) => { return ( -
+
{appName}
-
{children}
+
{children}
); }; diff --git a/packages/apps/graph-client/src/components/Common/Layout/styles.css.ts b/packages/apps/graph-client/src/components/Common/Layout/styles.css.ts new file mode 100644 index 0000000000..f0e27c929a --- /dev/null +++ b/packages/apps/graph-client/src/components/Common/Layout/styles.css.ts @@ -0,0 +1,6 @@ +import { style } from '@vanilla-extract/css'; + +export const documentStyle = style({ + padding: '30px 50px 50px 50px', + fontSize: '14px', +}); diff --git a/packages/apps/graph-client/src/components/Common/main/styles.css.ts b/packages/apps/graph-client/src/components/Common/center-block/styles.css.ts similarity index 71% rename from packages/apps/graph-client/src/components/Common/main/styles.css.ts rename to packages/apps/graph-client/src/components/Common/center-block/styles.css.ts index 695cd04704..766f7a053d 100644 --- a/packages/apps/graph-client/src/components/Common/main/styles.css.ts +++ b/packages/apps/graph-client/src/components/Common/center-block/styles.css.ts @@ -1,9 +1,8 @@ import { style } from '@vanilla-extract/css'; -export const mainStyle = style({ +export const centerBlockStyle = style({ display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', - paddingBottom: '5rem', }); diff --git a/packages/apps/graph-client/src/components/LoaderAndError/loader-and-error.tsx b/packages/apps/graph-client/src/components/LoaderAndError/loader-and-error.tsx new file mode 100644 index 0000000000..54ec0f05a4 --- /dev/null +++ b/packages/apps/graph-client/src/components/LoaderAndError/loader-and-error.tsx @@ -0,0 +1,29 @@ +import type { ApolloError } from '@apollo/client'; +import React from 'react'; +import { centerBlockStyle } from '../Common/center-block/styles.css'; +import Loader from '../Common/loader/loader'; +import { ErrorBox } from '../error-box/error-box'; + +interface ILoaderAndErrorProps { + loading: boolean; + loaderText?: string; + error: ApolloError | undefined; +} + +const LoaderAndError: React.FC = (props) => { + const { loading, loaderText, error } = props; + + return ( +
+ {loading && ( + <> + + {loaderText ? loaderText : 'Loading...'} + + )} + {error && } +
+ ); +}; + +export default LoaderAndError; diff --git a/packages/apps/graph-client/src/components/chain-module-account-table/chain-module-account-table.tsx b/packages/apps/graph-client/src/components/chain-module-account-table/chain-module-account-table.tsx index f84a1b757c..6a98ae02fa 100644 --- a/packages/apps/graph-client/src/components/chain-module-account-table/chain-module-account-table.tsx +++ b/packages/apps/graph-client/src/components/chain-module-account-table/chain-module-account-table.tsx @@ -1,6 +1,6 @@ import type { GetAccountQuery } from '@/__generated__/sdk'; import routes from '@constants/routes'; -import { Link, Table } from '@kadena/react-ui'; +import { Box, ContentHeader, Link, Table } from '@kadena/react-ui'; import React from 'react'; interface IChainModuleAccountTableProps { @@ -14,31 +14,39 @@ export const ChainModuleAccountTable = ( const { moduleName, accountName, chainAccounts } = props; return ( - - - - - Chain - + <> + + + + + + Chain + Balance + Guard Predicate + Guard Keys + + + {chainAccounts.map((chainAccount, index) => ( - {chainAccount.chainId} + + {chainAccount.chainId} + + + {chainAccount.balance} + + + {chainAccount.guard.predicate} + {chainAccount.guard.keys.join(', ')} + ))} - - - - Balance - - {chainAccounts.map((chainAccount, index) => ( - - - {chainAccount.balance} - - - ))} - - - + + + ); }; diff --git a/packages/apps/graph-client/src/components/compact-transactions-table/compact-transactions-table.tsx b/packages/apps/graph-client/src/components/compact-transactions-table/compact-transactions-table.tsx index f277321b7f..6e28dfdd18 100644 --- a/packages/apps/graph-client/src/components/compact-transactions-table/compact-transactions-table.tsx +++ b/packages/apps/graph-client/src/components/compact-transactions-table/compact-transactions-table.tsx @@ -12,6 +12,7 @@ import React from 'react'; interface ICompactTransactionsTableProps { viewAllHref?: string; description?: string; + truncateColumns?: boolean; transactions: | ModuleAccountTransactionsConnection | ChainModuleAccountTransactionsConnection @@ -22,7 +23,7 @@ interface ICompactTransactionsTableProps { export const CompactTransactionsTable = ( props: ICompactTransactionsTableProps, ): JSX.Element => { - const { viewAllHref, description, transactions } = props; + const { viewAllHref, description, truncateColumns, transactions } = props; return ( <> @@ -51,7 +52,7 @@ export const CompactTransactionsTable = ( - {transactions.edges.map((edge, index) => { + {transactions.edges.slice(0, 10).map((edge, index) => { return ( {edge?.node.chainId} @@ -64,14 +65,20 @@ export const CompactTransactionsTable = ( href={`${routes.TRANSACTIONS}/${edge?.node.requestKey}`} > - {truncate(edge?.node.requestKey)} + {truncateColumns + ? truncate(edge?.node.requestKey) + : edge?.node.requestKey} {edge?.node.code ? ( - {JSON.parse(truncate(edge.node.code)!)} + {JSON.parse( + truncateColumns + ? truncate(edge.node.code)! + : edge.node.code, + )} ) : ( N/A diff --git a/packages/apps/graph-client/src/components/compact-transfers-table/compact-transfers-table.tsx b/packages/apps/graph-client/src/components/compact-transfers-table/compact-transfers-table.tsx index a19e7495e6..71004ad074 100644 --- a/packages/apps/graph-client/src/components/compact-transfers-table/compact-transfers-table.tsx +++ b/packages/apps/graph-client/src/components/compact-transfers-table/compact-transfers-table.tsx @@ -11,6 +11,7 @@ interface ICompactTransfersTableProps { moduleName: string; accountName: string; chainId?: string; + truncateColumns?: boolean; transfers: | ModuleAccountTransfersConnection | ChainModuleAccountTransfersConnection; @@ -21,7 +22,14 @@ interface ICompactTransfersTableProps { export const CompactTransfersTable = ( props: ICompactTransfersTableProps, ): JSX.Element => { - const { moduleName, accountName, chainId, transfers, description } = props; + const { + moduleName, + accountName, + chainId, + truncateColumns, + transfers, + description, + } = props; return ( <> @@ -55,7 +63,7 @@ export const CompactTransfersTable = ( - {transfers.edges.map((edge, index) => { + {transfers.edges.slice(0, 10).map((edge, index) => { /** These transfers are going to be added to their crosschain counterpart and this way we avoid repeated transfers in the table */ if (!chainId && edge?.node.transaction?.pactId) { @@ -80,7 +88,9 @@ export const CompactTransfersTable = ( href={`${routes.ACCOUNT}/${moduleName}/${edge?.node.senderAccount}`} > - {truncate(edge?.node.senderAccount)} + {truncateColumns + ? truncate(edge?.node.senderAccount) + : edge?.node.senderAccount} @@ -90,7 +100,9 @@ export const CompactTransfersTable = ( href={`${routes.ACCOUNT}/${moduleName}/${edge?.node.receiverAccount}`} > - {truncate(edge?.node.receiverAccount)} + {truncateColumns + ? truncate(edge?.node.receiverAccount) + : edge?.node.receiverAccount} ) : ( @@ -100,9 +112,11 @@ export const CompactTransfersTable = ( - {truncate( - edge?.node.crossChainTransfer.receiverAccount, - )} + {truncateColumns + ? truncate( + edge?.node.crossChainTransfer.receiverAccount, + ) + : edge?.node.crossChainTransfer.receiverAccount} )} @@ -112,18 +126,24 @@ export const CompactTransfersTable = ( href={`${routes.TRANSACTIONS}/${edge?.node.requestKey}`} > - {truncate(edge?.node.requestKey)} + {truncateColumns + ? truncate(edge?.node.requestKey) + : edge?.node.requestKey} - / {edge?.node.crossChainTransfer && ( - - - {truncate(edge?.node.crossChainTransfer.requestKey)} - - + <> +  /  + + + {truncateColumns + ? truncate(edge?.node.crossChainTransfer.requestKey) + : edge?.node.crossChainTransfer.requestKey} + + + )} diff --git a/packages/apps/graph-client/src/components/extended-transactions-table/extended-transactions-table.tsx b/packages/apps/graph-client/src/components/extended-transactions-table/extended-transactions-table.tsx index 668d19aa75..ad4c1da6f0 100644 --- a/packages/apps/graph-client/src/components/extended-transactions-table/extended-transactions-table.tsx +++ b/packages/apps/graph-client/src/components/extended-transactions-table/extended-transactions-table.tsx @@ -129,7 +129,7 @@ export const ExtendedTransactionsTable = ( }); }} disabled={!transactions.pageInfo.hasNextPage} - style={{ float: 'right' }} + style={{ float: 'right', marginTop: '25px' }} > Next Page @@ -165,7 +165,7 @@ export const ExtendedTransactionsTable = ( }); }} disabled={!transactions.pageInfo.hasPreviousPage} - style={{ float: 'right', marginRight: '10px' }} + style={{ float: 'right', marginTop: '25px', marginRight: '10px' }} > Previous Page diff --git a/packages/apps/graph-client/src/graphql/queries.graph.ts b/packages/apps/graph-client/src/graphql/queries.graph.ts index 529eff5ba1..1427ac1756 100644 --- a/packages/apps/graph-client/src/graphql/queries.graph.ts +++ b/packages/apps/graph-client/src/graphql/queries.graph.ts @@ -88,6 +88,10 @@ export const getAccount: DocumentNode = gql` ...AllAccountFields chainAccounts { ...CoreChainAccountFields + guard { + keys + predicate + } } transactions { edges { diff --git a/packages/apps/graph-client/src/pages/account/overview/[module]/[account].tsx b/packages/apps/graph-client/src/pages/account/overview/[module]/[account].tsx index fe1ec9a1e8..39371e5b23 100644 --- a/packages/apps/graph-client/src/pages/account/overview/[module]/[account].tsx +++ b/packages/apps/graph-client/src/pages/account/overview/[module]/[account].tsx @@ -3,25 +3,19 @@ import type { ModuleAccountTransfersConnection, } from '@/__generated__/sdk'; import { useGetAccountQuery } from '@/__generated__/sdk'; -import Loader from '@/components/Common/loader/loader'; -import { mainStyle } from '@/components/Common/main/styles.css'; -import { ErrorBox } from '@/components/error-box/error-box'; +import LoaderAndError from '@/components/LoaderAndError/loader-and-error'; import { ChainModuleAccountTable } from '@components/chain-module-account-table/chain-module-account-table'; import { CompactTransactionsTable } from '@components/compact-transactions-table/compact-transactions-table'; import { CompactTransfersTable } from '@components/compact-transfers-table/compact-transfers-table'; import routes from '@constants/routes'; -import { Box, Breadcrumbs, Grid, Notification, Table } from '@kadena/react-ui'; +import { Box, Breadcrumbs, Notification, Table, Tabs } from '@kadena/react-ui'; import { useRouter } from 'next/router'; import React from 'react'; const Account: React.FC = () => { const router = useRouter(); - const { - loading: loadingAccount, - data: accountQuery, - error, - } = useGetAccountQuery({ + const { loading, data, error } = useGetAccountQuery({ variables: { moduleName: router.query.module as string, accountName: router.query.account as string, @@ -29,7 +23,7 @@ const Account: React.FC = () => { }); return ( -
+ <> Home Account Overview @@ -37,85 +31,87 @@ const Account: React.FC = () => { -
+ + + {data?.account && + data?.account?.totalBalance === 0 && + data?.account?.chainAccounts.length === 0 && ( + <> + + We could not find any data on this account. Please check the + module and account name. + + + + )} + {data?.account && (
- {loadingAccount && ( -
- Retrieving account information... -
- )} - {error && } - {accountQuery?.account && - accountQuery?.account?.totalBalance === 0 && - accountQuery?.account?.chainAccounts.length === 0 && ( - <> - - We could not find any data on this account. Please check the - module and account name. - - - - )} - {accountQuery?.account && ( -
- - - - - Account Name - - {accountQuery.account.accountName} - - - - Module - - {accountQuery.account.moduleName} - - - - Balance - - {accountQuery.account.totalBalance} - - - + + + + + Account Name + + {data.account.accountName} + + + + Module + + {data.account.moduleName} + + + + Balance + + {data.account.totalBalance} + + + + + + Chain Accounts + + + Transfers + + + + + Transactions + + + - - - - - - - - - -
- )} + +
-
-
+ )} + ); }; diff --git a/packages/apps/graph-client/src/pages/account/overview/[module]/[account]/[chain].tsx b/packages/apps/graph-client/src/pages/account/overview/[module]/[account]/[chain].tsx index 6dc1482cab..9b2ff25021 100644 --- a/packages/apps/graph-client/src/pages/account/overview/[module]/[account]/[chain].tsx +++ b/packages/apps/graph-client/src/pages/account/overview/[module]/[account]/[chain].tsx @@ -3,9 +3,7 @@ import type { ChainModuleAccountTransfersConnection, } from '@/__generated__/sdk'; import { useGetChainAccountQuery } from '@/__generated__/sdk'; -import Loader from '@/components/Common/loader/loader'; -import { mainStyle } from '@/components/Common/main/styles.css'; -import { ErrorBox } from '@/components/error-box/error-box'; +import LoaderAndError from '@/components/LoaderAndError/loader-and-error'; import { CompactTransactionsTable } from '@components/compact-transactions-table/compact-transactions-table'; import { CompactTransfersTable } from '@components/compact-transfers-table/compact-transfers-table'; import routes from '@constants/routes'; @@ -16,11 +14,7 @@ import React from 'react'; const ChainAccount: React.FC = () => { const router = useRouter(); - const { - loading: loadingChainAccount, - data: chainAccountQuery, - error, - } = useGetChainAccountQuery({ + const { loading, data, error } = useGetChainAccountQuery({ variables: { moduleName: router.query.module as string, accountName: router.query.account as string, @@ -29,7 +23,7 @@ const ChainAccount: React.FC = () => { }); return ( -
+ <> Home { -
-
- {loadingChainAccount && ( -
- Retrieving account information... -
- )} - {error && } - {chainAccountQuery?.chainAccount && ( -
- - - - - Account Name - - - {chainAccountQuery.chainAccount.accountName} - - - - - Module - - - {chainAccountQuery.chainAccount.moduleName} - - - - - Chain - - - {chainAccountQuery.chainAccount.chainId} - - - - - Balance - - - {chainAccountQuery.chainAccount.balance} - - - - - Guard Predicate - - - {chainAccountQuery.chainAccount.guard.predicate} - - - - - Guard Keys - - - {chainAccountQuery.chainAccount.guard.keys} - - - - - - - - - - - - - -
- )} -
-
-
+ + + {data?.chainAccount && ( + <> + + + + + Account Name + + {data.chainAccount.accountName} + + + + Module + + {data.chainAccount.moduleName} + + + + Chain + + {data.chainAccount.chainId} + + + + Balance + + {data.chainAccount.balance} + + + + Guard Predicate + + {data.chainAccount.guard.predicate} + + + + Guard Keys + + {data.chainAccount.guard.keys} + + + + + + + + + + + + + + )} + ); }; diff --git a/packages/apps/graph-client/src/pages/account/transactions/[module]/[account].tsx b/packages/apps/graph-client/src/pages/account/transactions/[module]/[account].tsx index 8b2bb0bff1..c000e823ca 100644 --- a/packages/apps/graph-client/src/pages/account/transactions/[module]/[account].tsx +++ b/packages/apps/graph-client/src/pages/account/transactions/[module]/[account].tsx @@ -1,7 +1,5 @@ import { useGetTransactionsQuery } from '@/__generated__/sdk'; -import Loader from '@/components/Common/loader/loader'; -import { mainStyle } from '@/components/Common/main/styles.css'; -import { ErrorBox } from '@/components/error-box/error-box'; +import LoaderAndError from '@/components/LoaderAndError/loader-and-error'; import { ExtendedTransactionsTable } from '@/components/extended-transactions-table/extended-transactions-table'; import routes from '@/constants/routes'; import { Box, Breadcrumbs } from '@kadena/react-ui'; @@ -21,7 +19,7 @@ const AccountTransactions: React.FC = () => { }); return ( -
+ <> Home { -
-
- {loading && ( -
- Retrieving transactions... -
- )} - {error && } - {data?.transactions && ( - - )} -
-
-
+ + + {data?.transactions && ( + + )} + ); }; diff --git a/packages/apps/graph-client/src/pages/account/transfers/[module]/[account].tsx b/packages/apps/graph-client/src/pages/account/transfers/[module]/[account].tsx index e2e45fe9ad..672f5ee861 100644 --- a/packages/apps/graph-client/src/pages/account/transfers/[module]/[account].tsx +++ b/packages/apps/graph-client/src/pages/account/transfers/[module]/[account].tsx @@ -1,7 +1,5 @@ import { useGetTransfersQuery } from '@/__generated__/sdk'; -import Loader from '@/components/Common/loader/loader'; -import { mainStyle } from '@/components/Common/main/styles.css'; -import { ErrorBox } from '@/components/error-box/error-box'; +import LoaderAndError from '@/components/LoaderAndError/loader-and-error'; import routes from '@constants/routes'; import { Box, Breadcrumbs, Button, Link, Table } from '@kadena/react-ui'; import { useRouter } from 'next/router'; @@ -20,7 +18,7 @@ const AccountTransfers: React.FC = () => { }); return ( -
+ <> Home { -
-
- {loading && ( -
- Retrieving transfers... -
- )} - {error && } - {data?.transfers && ( - <> - - Showing 10 results per page - - - - - - - Chain - Block Height - Amount - Sender Account - Receiver Account - Request key - - - - {data.transfers.edges.map((edge, index) => { - /** These transfers are going to be added to their crosschain counterpart and - this way we avoid repeated transfers in the table */ - if (edge?.node.transaction?.pactId) { - return <>; + {data?.transfers && ( + <> + + Showing 10 results per page + + + + + + + Chain + Block Height + Amount + Sender Account + Receiver Account + Request key + + + + {data.transfers.edges.map((edge, index) => { + /** These transfers are going to be added to their crosschain counterpart and + this way we avoid repeated transfers in the table */ + if (edge?.node.transaction?.pactId) { + return <>; + } - const heightDisplay = edge?.node.crossChainTransfer - ? `${edge.node.height} / ${edge.node.crossChainTransfer.height}` - : edge?.node.height; + const chainIdDisplay = edge?.node.crossChainTransfer + ? `${edge.node.chainId} / ${edge.node.crossChainTransfer.chainId}` + : edge?.node.chainId; - return ( - - {chainIdDisplay} - {heightDisplay} - {edge?.node.amount} - - - {edge?.node.senderAccount} - - - - {edge?.node.receiverAccount ? ( - - {edge?.node.receiverAccount} - - ) : edge?.node.crossChainTransfer?.receiverAccount ? ( - - {edge?.node.crossChainTransfer.receiverAccount} - - ) : ( - N/A - )} - - + const heightDisplay = edge?.node.crossChainTransfer + ? `${edge.node.height} / ${edge.node.crossChainTransfer.height}` + : edge?.node.height; + + return ( + + {chainIdDisplay} + {heightDisplay} + {edge?.node.amount} + + + {edge?.node.senderAccount} + + + + {edge?.node.receiverAccount ? ( + + {edge?.node.receiverAccount} + + ) : edge?.node.crossChainTransfer?.receiverAccount ? ( + + {edge?.node.crossChainTransfer.receiverAccount} + + ) : ( + N/A + )} + + + + {edge?.node.requestKey} + + {edge?.node.crossChainTransfer && ( + <> +  /  - {edge?.node.requestKey} + {edge?.node.crossChainTransfer.requestKey} - / - {edge?.node.crossChainTransfer && ( - - {edge?.node.crossChainTransfer.requestKey} - - )} - - - ); - })} - - - - )} -
-
-
+ + )} + + + ); + })} + + + + )} + ); }; diff --git a/packages/apps/graph-client/src/pages/block/overview/[hash].tsx b/packages/apps/graph-client/src/pages/block/overview/[hash].tsx index 03cefe6c4b..1f5a99cc66 100644 --- a/packages/apps/graph-client/src/pages/block/overview/[hash].tsx +++ b/packages/apps/graph-client/src/pages/block/overview/[hash].tsx @@ -3,9 +3,8 @@ import { useGetBlockFromHashQuery, useGetGraphConfigurationQuery, } from '@/__generated__/sdk'; -import Loader from '@/components/Common/loader/loader'; -import { mainStyle } from '@/components/Common/main/styles.css'; -import { ErrorBox } from '@/components/error-box/error-box'; +import { centerBlockStyle } from '@/components/Common/center-block/styles.css'; +import LoaderAndError from '@/components/LoaderAndError/loader-and-error'; import { CompactTransactionsTable } from '@components/compact-transactions-table/compact-transactions-table'; import { Text } from '@components/text'; import routes from '@constants/routes'; @@ -28,200 +27,193 @@ const Block: React.FC = () => { }`; return ( -
- - Home - Block Overview - - - -
-
- {loading && ( - // Display a loading spinner next to the text without a gap -
- Waiting for block data... -
- )} - - {error && } - - {data?.block && ( -
- {/* {JSON.stringify(data)} */} - - Block Header - - - - - - - Chain ID - - {data.block.chainId} - - - - Height - - {data.block.height} - - - - Hash - - {data.block.hash} - - - - Confirmation Depth - - - {configData?.graphConfiguration?.maximumConfirmationDepth - ? data.block.confirmationDepth === - configData.graphConfiguration - ?.maximumConfirmationDepth - ? `> ${data.block.confirmationDepth - 1}` - : data.block.confirmationDepth - : data.block.confirmationDepth} - - - - - - - - - {[ - - - - - - Parent - - - - {data.block.parentHash} - - - - - - Pow Hash - - {data.block.powHash} - - - - Epoch Start - - {data.block.epoch} - - - - , - ]} - - - - - - Block Payload - - - - - - Payload Hash - - {data.block.payloadHash} - - - - No. of transactions - - {data.block.transactions.totalCount} - - - - - - {[ - - - - - - Payload Hash - - {data.block.payloadHash} - - - - - Miner Keys - - - - - {data.block.minerKeys?.map( - (minerKey, index) => ( - - {minerKey.key} - - ), - )} - - - - - - - Predicate - - {data.block.predicate} - - - - , - ]} - - - - - {data.block.transactions.totalCount > 0 && ( - - )} -
- )} -
-
+
+
+ + Home + Block Overview + + + + + + + {data?.block && ( + <> + + Block Header + + + + + + + Chain ID + + {data.block.chainId} + + + + Height + + {data.block.height} + + + + Hash + + {data.block.hash} + + + + Confirmation Depth + + + {configData?.graphConfiguration?.maximumConfirmationDepth + ? data.block.confirmationDepth === + configData.graphConfiguration?.maximumConfirmationDepth + ? `> ${data.block.confirmationDepth - 1}` + : data.block.confirmationDepth + : data.block.confirmationDepth} + + + + + + + + + {[ + + + + + + Parent + + + + {data.block.parentHash} + + + + + + Pow Hash + + {data.block.powHash} + + + + Epoch Start + + {data.block.epoch} + + + + , + ]} + + + + + + Block Payload + + + + + + Payload Hash + + {data.block.payloadHash} + + + + + No. of transactions + + {data.block.transactions.totalCount} + + + + + + {[ + + + + + + Payload Hash + + {data.block.payloadHash} + + + + + Miner Keys + + + + + {data.block.minerKeys?.map((minerKey, index) => ( + + {minerKey.key} + + ))} + + + + + + + Predicate + + {data.block.predicate} + + + + , + ]} + + + + + {data.block.transactions.totalCount > 0 && ( + + )} + + )} +
); }; diff --git a/packages/apps/graph-client/src/pages/block/transactions/[hash].tsx b/packages/apps/graph-client/src/pages/block/transactions/[hash].tsx index 941474910b..fb8708ff64 100644 --- a/packages/apps/graph-client/src/pages/block/transactions/[hash].tsx +++ b/packages/apps/graph-client/src/pages/block/transactions/[hash].tsx @@ -1,7 +1,5 @@ import { useGetTransactionsQuery } from '@/__generated__/sdk'; -import Loader from '@/components/Common/loader/loader'; -import { mainStyle } from '@/components/Common/main/styles.css'; -import { ErrorBox } from '@/components/error-box/error-box'; +import LoaderAndError from '@/components/LoaderAndError/loader-and-error'; import { ExtendedTransactionsTable } from '@/components/extended-transactions-table/extended-transactions-table'; import routes from '@/constants/routes'; import { Box, Breadcrumbs } from '@kadena/react-ui'; @@ -16,7 +14,7 @@ const BlockTransactions: React.FC = () => { }); return ( -
+ <> Home { -
-
- {loading && ( -
- Retrieving transactions... -
- )} - {error && } - {data?.transactions && ( - - )} -
-
-
+ + + + {data?.transactions && ( + + )} + ); }; diff --git a/packages/apps/graph-client/src/pages/event/[key].tsx b/packages/apps/graph-client/src/pages/event/[key].tsx index 2f562eb07a..a793cbcb44 100644 --- a/packages/apps/graph-client/src/pages/event/[key].tsx +++ b/packages/apps/graph-client/src/pages/event/[key].tsx @@ -1,6 +1,5 @@ import { useGetEventByNameSubscription } from '@/__generated__/sdk'; -import Loader from '@/components/Common/loader/loader'; -import { mainStyle } from '@/components/Common/main/styles.css'; +import LoaderAndError from '@/components/LoaderAndError/loader-and-error'; import { ErrorBox } from '@/components/error-box/error-box'; import { formatCode } from '@/utils/formatter'; import routes from '@constants/routes'; @@ -11,16 +10,12 @@ import React from 'react'; const Event: React.FC = () => { const router = useRouter(); - const { - loading: eventLoading, - data: eventSubscription, - error, - } = useGetEventByNameSubscription({ + const { loading, data, error } = useGetEventByNameSubscription({ variables: { eventName: router.query.key as string }, }); return ( -
+ <> Home Events @@ -28,92 +23,84 @@ const Event: React.FC = () => { -
-
- {eventLoading && ( -
- Waiting for event... -
- )} + - {error && } + {error && } - {eventSubscription?.event && ( -
- - - - Event Name - Parameters - Request Key - - - - {eventSubscription.event.map((event, index) => ( - - {event.qualifiedName} - - - - {JSON.parse(event.parameterText).map( - (parameter: any, index: number) => ( - - - {typeof parameter === 'string' ? ( - parameter - ) : typeof parameter === 'object' ? ( - - - {parameter.map( - ( - subparameter: any, - index: number, - ) => ( - - - {typeof subparameter === - 'string' ? ( - subparameter - ) : ( - 
-                                                      {formatCode(
-                                                        JSON.stringify(
-                                                          subparameter,
-                                                        ),
-                                                      )}
-
+ {data?.event && ( + <> + + + + Event Name + Parameters + Request Key + + + + + {data.event.map((event, index) => ( + + {event.qualifiedName} + + + + {JSON.parse(event.parameterText).map( + (parameter: any, index: number) => ( + + + {typeof parameter === 'string' ? ( + parameter + ) : typeof parameter === 'object' ? ( + + + {parameter.map( + (subparameter: any, index: number) => ( + + + {typeof subparameter === + 'string' ? ( + subparameter + ) : ( + 
+                                                  {formatCode(
+                                                    JSON.stringify(
+                                                      subparameter,
+                                                    ),
                                                   )}
-                                                
-                                              
-                                            ),
-                                          )}
-                                        
-                                      
-                                    ) : (
-                                      JSON.stringify(parameter)
-                                    )}
-                                  
-                                
-                              ),
-                            )}
-                          
-                        
-                      
-                      {event.transaction?.requestKey}
-                    
-                  ))}
-                
-              
-
- )} -
-
-
+ + )} + + + ), + )} + + + ) : ( + JSON.stringify(parameter) + )} + + + ), + )} + + + + {event.transaction?.requestKey} + + ))} + + + + )} + ); }; diff --git a/packages/apps/graph-client/src/pages/gas/estimation/index.tsx b/packages/apps/graph-client/src/pages/gas/estimation/index.tsx index e837b1f3f0..5a11d5f369 100644 --- a/packages/apps/graph-client/src/pages/gas/estimation/index.tsx +++ b/packages/apps/graph-client/src/pages/gas/estimation/index.tsx @@ -1,7 +1,5 @@ import { useEstimateGasLimitQuery } from '@/__generated__/sdk'; -import Loader from '@/components/Common/loader/loader'; -import { mainStyle } from '@/components/Common/main/styles.css'; -import { ErrorBox } from '@/components/error-box/error-box'; +import LoaderAndError from '@/components/LoaderAndError/loader-and-error'; import routes from '@/constants/routes'; import { Box, Breadcrumbs, Table } from '@kadena/react-ui'; import { useRouter } from 'next/router'; @@ -23,7 +21,7 @@ const GasEstimation: React.FC = () => { }); return ( -
+ <> Home Gas Estimation @@ -31,35 +29,31 @@ const GasEstimation: React.FC = () => { -
-
- {loading && ( -
- Waiting for gas estimation... -
- )} - {error && } - - - - Label - Value - - - - - Cmd - {cmdString} - - - Gas Estimate - {data?.gasLimitEstimate} - - - -
-
-
+ + + + + + Label + Value + + + + + Cmd + {cmdString} + + + Gas Estimate + {data?.gasLimitEstimate} + + + + ); }; diff --git a/packages/apps/graph-client/src/pages/index.tsx b/packages/apps/graph-client/src/pages/index.tsx index e0a7fe7e92..7249f8d37a 100644 --- a/packages/apps/graph-client/src/pages/index.tsx +++ b/packages/apps/graph-client/src/pages/index.tsx @@ -6,7 +6,8 @@ import { useGetRecentHeightsQuery, useGetTransactionsQuery, } from '@/__generated__/sdk'; -import { mainStyle } from '@/components/Common/main/styles.css'; +import { centerBlockStyle } from '@/components/Common/center-block/styles.css'; +import LoaderAndError from '@/components/LoaderAndError/loader-and-error'; import { CompactTransactionsTable } from '@/components/compact-transactions-table/compact-transactions-table'; import { ChainwebGraph } from '@components/chainweb'; import routes from '@constants/routes'; @@ -17,14 +18,19 @@ import isEqual from 'lodash.isequal'; import React, { useEffect } from 'react'; const Home: React.FC = () => { - const { loading: loadingNewBlocks, data: newBlocks } = - useGetBlocksSubscription(); - const { loading: loadingRecentBlocks, data: recentBlocks } = + const { + loading: loadingNewBlocks, + data: newBlocks, + error: newBlocksError, + } = useGetBlocksSubscription(); + const { data: recentBlocks, error: recentBlocksError } = useGetRecentHeightsQuery({ variables: { count: 3 } }); const previousNewBlocks = usePrevious(newBlocks); const previousRecentBlocks = usePrevious(recentBlocks); - const { data: txs } = useGetTransactionsQuery({ variables: { first: 10 } }); + const { data: txs, error: txError } = useGetTransactionsQuery({ + variables: { first: 10 }, + }); const { allBlocks, addBlocks } = useParsedBlocks(); @@ -58,28 +64,28 @@ const Home: React.FC = () => { }, [recentBlocks, addBlocks, previousRecentBlocks, addBlockToChain]); return ( -
-
+ <> + + +
+ {allBlocks && } +
+ + {txs?.transactions && (
- {loadingRecentBlocks || loadingNewBlocks ? ( - 'Loading...' - ) : ( - - )} + +
- - {txs?.transactions && ( -
- - -
- )} -
-
+ )} + ); }; diff --git a/packages/apps/graph-client/src/pages/transactions/[key].tsx b/packages/apps/graph-client/src/pages/transactions/[key].tsx index b634eef7d6..923966c77b 100644 --- a/packages/apps/graph-client/src/pages/transactions/[key].tsx +++ b/packages/apps/graph-client/src/pages/transactions/[key].tsx @@ -1,7 +1,5 @@ import { useGetTransactionByRequestKeySubscription } from '@/__generated__/sdk'; -import Loader from '@/components/Common/loader/loader'; -import { mainStyle } from '@/components/Common/main/styles.css'; -import { ErrorBox } from '@/components/error-box/error-box'; +import LoaderAndError from '@/components/LoaderAndError/loader-and-error'; import routes from '@/constants/routes'; import { formatCode, formatLisp } from '@/utils/formatter'; import { Box, Breadcrumbs, Link, Notification, Table } from '@kadena/react-ui'; @@ -11,16 +9,12 @@ import React from 'react'; const RequestKey: React.FC = () => { const router = useRouter(); - const { - loading: loadingTransaction, - data: transactionSubscription, - error, - } = useGetTransactionByRequestKeySubscription({ + const { loading, data, error } = useGetTransactionByRequestKeySubscription({ variables: { requestKey: router.query.key as string }, }); return ( -
+ <> Home @@ -30,375 +24,312 @@ const RequestKey: React.FC = () => { -
-
- {loadingTransaction && ( -
- Waiting for request key... -
- )} - {error && } - {transactionSubscription?.transaction && ( -
- {/* center content inside the div */} -
- {transactionSubscription?.transaction?.badResult && ( - - Transaction failed with status:{' '} - {typeof transactionSubscription?.transaction?.badResult} - - )} - {transactionSubscription?.transaction?.goodResult && ( - - Transaction succeeded with status: -
- 
-                      {formatCode(
-                        transactionSubscription?.transaction?.goodResult,
-                      )}
-
- - )} - {!transactionSubscription?.transaction?.goodResult && - !transactionSubscription?.transaction?.badResult && ( - - Unknown transaction status - - )} -
-
- - - - Key - Value - - - - - - Request Key - - - {transactionSubscription?.transaction?.requestKey} - - - - - Chain - - - {transactionSubscription?.transaction?.chainId} - - - - - Block - - - - {transactionSubscription?.transaction?.block?.hash} - - - - - - Code - - + + + + {data?.transaction && ( + <> + + + + Key + Value + + + + + + Status + + + {data?.transaction?.badResult && ( + + Transaction failed with status:{' '} 
-                        {formatLisp(
-                          JSON.parse(
-                            transactionSubscription?.transaction?.code,
-                          ),
+                        {JSON.stringify(
+                          JSON.parse(data?.transaction?.badResult),
+                          null,
+                          4,
                         )}
- - - - - Transaction Output - - - - - - - Gas - - - {transactionSubscription?.transaction?.gas} - - - - - Result - - - 
-                                {transactionSubscription?.transaction
-                                  ?.goodResult
-                                  ? formatCode(
-                                      transactionSubscription.transaction
-                                        .goodResult,
-                                    )
-                                  : transactionSubscription?.transaction
-                                      ?.badResult
-                                  ? formatCode(
-                                      transactionSubscription.transaction
-                                        .badResult,
-                                    )
-                                  : 'Unknown'}
-
- - - - - Logs - - - {transactionSubscription?.transaction?.logs} - - - - - Metadata - - - {transactionSubscription?.transaction?.metadata} - - - - - Continuation - - - 
-                                {transactionSubscription?.transaction
-                                  ?.continuation
-                                  ? formatCode(
-                                      transactionSubscription.transaction
-                                        .continuation,
-                                    )
-                                  : 'None'}
-
- - - - - Transaction ID - - - { - transactionSubscription?.transaction - ?.transactionId - } - - - - - - - - - Events - - - {transactionSubscription?.transaction?.events?.map( - (event, index) => ( - - - - - Name - - {event.qualifiedName} - - - - Parameters - - - 
{formatCode(event.parameterText)}
- - - - - ), - )} - - - - - Data - - - 
-                        {transactionSubscription?.transaction?.data &&
-                          JSON.stringify(
-                            JSON.parse(
-                              transactionSubscription.transaction.data,
-                            ),
-                            null,
-                            4,
-                          )}
-
- - - - - Nonce - - - 
{transactionSubscription?.transaction?.nonce}
- - - - - Meta - - - - - - - Chain - - - {transactionSubscription?.transaction?.chainId} - - - - - Sender - - - { - transactionSubscription?.transaction - ?.senderAccount - } - - - - - Gas Price - - - {transactionSubscription?.transaction?.gasPrice} - - - - - Gas Limit - - - {transactionSubscription?.transaction?.gasLimit} - - - - - TTL - - - {transactionSubscription?.transaction?.ttl} - - - - - Creation Time - - - { - transactionSubscription?.transaction - ?.creationTime - } - - - - - Height - - - {transactionSubscription?.transaction?.height} - - - - - Pact ID - - - {transactionSubscription?.transaction?.pactId} - - - - - Proof - - - {transactionSubscription?.transaction?.proof} - - - - - Rollback - - - {transactionSubscription?.transaction?.rollback} - - - - - Step - - - {transactionSubscription?.transaction?.step} - - - - - - - - - Signers - - - {transactionSubscription?.transaction?.signers?.map( - (signer) => { - return signer.publicKey; - }, - )} - - - - - Signatures - - - {transactionSubscription?.transaction?.signers?.map( - (signer) => { - return signer.signature; - }, + + )} + {data?.transaction?.goodResult && ( + + Transaction succeeded with status: +
+ 
{formatCode(data?.transaction?.goodResult)}
+ + )} + {!data?.transaction?.goodResult && + !data?.transaction?.badResult && ( + + Unknown transaction status + + )} + + + + + Request Key + + {data?.transaction?.requestKey} + + + + Chain + + {data?.transaction?.chainId} + + + + Block + + + + {data?.transaction?.block?.hash} + + + + + + Code + + + 
{formatLisp(JSON.parse(data?.transaction?.code))}
+ + + + + Transaction Output + + + + + + + Gas + + {data?.transaction?.gas} + + + + Result + + + 
+                            {data?.transaction?.goodResult
+                              ? formatCode(data.transaction.goodResult)
+                              : data?.transaction?.badResult
+                              ? formatCode(data.transaction.badResult)
+                              : 'Unknown'}
+
+ + + + + Logs + + {data?.transaction?.logs} + + + + Metadata + + {data?.transaction?.metadata} + + + + Continuation + + + 
+                            {data?.transaction?.continuation
+                              ? formatCode(data.transaction.continuation)
+                              : 'None'}
+
+ + + + + Transaction ID + + {data?.transaction?.transactionId} + + + + + + + + Events + + + {data?.transaction?.events?.map((event, index) => ( + + + + + Name + + {event.qualifiedName} + + + + Parameters + + + 
{formatCode(event.parameterText)}
+ + + + + ))} + + + + + Data + + + 
+                    {data?.transaction?.data &&
+                      JSON.stringify(
+                        JSON.parse(data.transaction.data),
+                        null,
+                        4,
                       )}
-                    
-                  
-                
-              
-
- )} -
-
-
+ + + + + + Nonce + + + 
{data?.transaction?.nonce}
+ + + + + Meta + + + + + + + Chain + + {data?.transaction?.chainId} + + + + Sender + + {data?.transaction?.senderAccount} + + + + Gas Price + + {data?.transaction?.gasPrice} + + + + Gas Limit + + {data?.transaction?.gasLimit} + + + + TTL + + {data?.transaction?.ttl} + + + + Creation Time + + {data?.transaction?.creationTime} + + + + Height + + {data?.transaction?.height} + + + + Pact ID + + {data?.transaction?.pactId} + + + + Proof + + {data?.transaction?.proof} + + + + Rollback + + {data?.transaction?.rollback} + + + + Step + + {data?.transaction?.step} + + + + + + + + Signers + + + {data?.transaction?.signers + ?.map((signer) => { + return signer.publicKey; + }) + .join(', ')} + + + + + Signatures + + + {data?.transaction?.signers + ?.map((signer) => { + return signer.signature; + }) + .join(', ')} + + + + + + )} + ); }; diff --git a/packages/apps/graph-client/src/pages/transactions/index.tsx b/packages/apps/graph-client/src/pages/transactions/index.tsx index f5aae3a0c7..3daa1e509a 100644 --- a/packages/apps/graph-client/src/pages/transactions/index.tsx +++ b/packages/apps/graph-client/src/pages/transactions/index.tsx @@ -1,9 +1,7 @@ import { Box, Breadcrumbs } from '@kadena/react-ui'; import { useGetTransactionsQuery } from '@/__generated__/sdk'; -import Loader from '@/components/Common/loader/loader'; -import { mainStyle } from '@/components/Common/main/styles.css'; -import { ErrorBox } from '@/components/error-box/error-box'; +import LoaderAndError from '@/components/LoaderAndError/loader-and-error'; import { ExtendedTransactionsTable } from '@/components/extended-transactions-table/extended-transactions-table'; import routes from '@/constants/routes'; import React from 'react'; @@ -14,30 +12,27 @@ const Transactions: React.FC = () => { }); return ( -
+ <> Home Transactions -
-
- {loading && ( -
- Retrieving transactions... -
- )} - {error && } - {data?.transactions && ( - - )} -
-
-
+ + + + {data?.transactions && ( + + )} + ); }; diff --git a/packages/apps/graph-client/src/utils/formatter.ts b/packages/apps/graph-client/src/utils/formatter.ts index 141f0690cc..eb7dd34b3d 100644 --- a/packages/apps/graph-client/src/utils/formatter.ts +++ b/packages/apps/graph-client/src/utils/formatter.ts @@ -15,5 +15,5 @@ export function formatLisp(code: string): string { insertSpaces: true, }); - return formattedCode; + return formattedCode.slice(1); } diff --git a/packages/apps/graph/.env.example b/packages/apps/graph/.env.example index 44b935561b..ae6d47bf35 100644 --- a/packages/apps/graph/.env.example +++ b/packages/apps/graph/.env.example @@ -4,8 +4,8 @@ CHAIN_COUNT=20 NETWORK_HOST="localhost:8080" NETWORK_ID="fast-development" -# This variable determines the maximum calculated block confirmation depth. The default is 51. -MAX_CALCULATED_BLOCK_CONFIRMATION_DEPTH=51 +# This variable determines the maximum calculated block confirmation depth. The default is 11. +MAX_CALCULATED_BLOCK_CONFIRMATION_DEPTH=11 # Database configuration. The default value is postgresql://devnet@localhost:5432/devnet. DATABASE_URL="postgresql://devnet@localhost:5432/devnet" diff --git a/packages/apps/graph/src/graph/objects/Block.ts b/packages/apps/graph/src/graph/objects/Block.ts index 89b850be33..a9ec9dd425 100644 --- a/packages/apps/graph/src/graph/objects/Block.ts +++ b/packages/apps/graph/src/graph/objects/Block.ts @@ -50,6 +50,7 @@ export default builder.prismaNode('Block', { return await prismaClient.transaction.count({ where: { blockHash: parent.hash, + chainId: parent.chainId, }, }); } catch (error) {