kadena-community · nil-amrutlal · Nov 15, 2023 · Nov 9, 2023 · Nov 9, 2023 · Nov 9, 2023
diff --git a/.changeset/grumpy-snakes-begin.md 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
@@ -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
@@ -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<IHeaderProps> = (props) => {
 
   return (
     <div>
-      <main className={mainStyle}>
+      <header className={headerStyle}>
         <Text
           as="h1"
           css={{
             display: 'block',
             color: '$mauve12',
             fontSize: 48,
-            my: '$12',
+            marginBottom: '$6',
             cursor: 'pointer',
           }}
           onClick={() => router.push(routes.HOME)}
@@ -250,7 +250,7 @@ const Header: FC<IHeaderProps> = (props) => {
             </Button>
           </Grid.Item>
         </Grid.Root>
-      </main>
+      </header>
     </div>
   );
 };

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
@@ -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
@@ -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<IProps> = ({ children }: IProps) => {
   return (
-    <div>
+    <div className={documentStyle}>
       <Head>
         <title>{appName}</title>
         <link rel="icon" href="/favicon.png" />
       </Head>
       <Header title={appName} />
-      <main className={mainStyle}>{children}</main>
+      <main>{children}</main>
     </div>
   );
 };

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
@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const documentStyle = style({
+  padding: '30px 50px 50px 50px',
+  fontSize: '14px',
+});
diff --git a/.../src/components/Common/main/styles.css.ts → ...ponents/Common/center-block/styles.css.ts b/.../src/components/Common/main/styles.css.ts → ...ponents/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
@@ -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<ILoaderAndErrorProps> = (props) => {
+  const { loading, loaderText, error } = props;
+
+  return (
+    <div className={centerBlockStyle}>
+      {loading && (
+        <>
+          <Loader />
+          <span>{loaderText ? loaderText : 'Loading...'}</span>
+        </>
+      )}
+      {error && <ErrorBox error={error} />}
+    </div>
+  );
+};
+
+export default LoaderAndError;
diff --git a/...pps/graph-client/src/components/chain-module-account-table/chain-module-account-table.tsx b/...pps/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 (
-    <Table.Root wordBreak="break-all">
-      <Table.Body>
-        <Table.Tr>
-          <Table.Td>
-            <strong>Chain</strong>
-          </Table.Td>
+    <>
+      <ContentHeader
+        heading="Chain Accounts"
+        icon="Link"
+        description="All chains where this account was found"
+      />
+      <Box margin={'$4'} />
+      <Table.Root wordBreak="break-all">
+        <Table.Head>
+          <Table.Tr>
+            <Table.Th>Chain</Table.Th>
+            <Table.Th>Balance</Table.Th>
+            <Table.Th>Guard Predicate</Table.Th>
+            <Table.Th>Guard Keys</Table.Th>
+          </Table.Tr>
+        </Table.Head>
+        <Table.Body>
           {chainAccounts.map((chainAccount, index) => (
-            <Table.Td key={index}>{chainAccount.chainId}</Table.Td>
+            <Table.Tr key={index}>
+              <Table.Td>{chainAccount.chainId}</Table.Td>
+              <Table.Td>
+                <Link
+                  href={`${routes.ACCOUNT}/${moduleName}/${accountName}/${chainAccount.chainId}`}
+                >
+                  {chainAccount.balance}
+                </Link>
+              </Table.Td>
+              <Table.Td>{chainAccount.guard.predicate}</Table.Td>
+              <Table.Td>{chainAccount.guard.keys.join(', ')}</Table.Td>
+            </Table.Tr>
           ))}
-        </Table.Tr>
-        <Table.Tr>
-          <Table.Td>
-            <strong>Balance</strong>
-          </Table.Td>
-          {chainAccounts.map((chainAccount, index) => (
-            <Table.Td key={index}>
-              <Link
-                href={`${routes.ACCOUNT}/${moduleName}/${accountName}/${chainAccount.chainId}`}
-              >
-                {chainAccount.balance}
-              </Link>
-            </Table.Td>
-          ))}
-        </Table.Tr>
-      </Table.Body>
-    </Table.Root>
+        </Table.Body>
+      </Table.Root>
+    </>
   );
 };
diff --git a/...pps/graph-client/src/components/compact-transactions-table/compact-transactions-table.tsx b/...pps/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 = (
           </Table.Tr>
         </Table.Head>
         <Table.Body>
-          {transactions.edges.map((edge, index) => {
+          {transactions.edges.slice(0, 10).map((edge, index) => {
             return (
               <Table.Tr key={index}>
                 <Table.Td>{edge?.node.chainId}</Table.Td>
@@ -64,14 +65,20 @@ export const CompactTransactionsTable = (
                     href={`${routes.TRANSACTIONS}/${edge?.node.requestKey}`}
                   >
                     <span title={edge?.node.requestKey}>
-                      {truncate(edge?.node.requestKey)}
+                      {truncateColumns
+                        ? truncate(edge?.node.requestKey)
+                        : edge?.node.requestKey}
                     </span>
                   </Link>
                 </Table.Td>
                 <Table.Td>
                   {edge?.node.code ? (
                     <span title={edge?.node.code}>
-                      {JSON.parse(truncate(edge.node.code)!)}
+                      {JSON.parse(
+                        truncateColumns
+                          ? truncate(edge.node.code)!
+                          : edge.node.code,
+                      )}
                     </span>
                   ) : (
                     <span style={{ color: 'lightgray' }}>N/A</span>

diff --git a/...ages/apps/graph-client/src/components/compact-transfers-table/compact-transfers-table.tsx b/...ages/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 = (
           </Table.Tr>
         </Table.Head>
         <Table.Body>
-          {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}`}
                   >
                     <span title={edge?.node.senderAccount}>
-                      {truncate(edge?.node.senderAccount)}
+                      {truncateColumns
+                        ? truncate(edge?.node.senderAccount)
+                        : edge?.node.senderAccount}
                     </span>
                   </Link>
                 </Table.Td>
@@ -90,7 +100,9 @@ export const CompactTransfersTable = (
                       href={`${routes.ACCOUNT}/${moduleName}/${edge?.node.receiverAccount}`}
                     >
                       <span title={edge?.node.receiverAccount}>
-                        {truncate(edge?.node.receiverAccount)}
+                        {truncateColumns
+                          ? truncate(edge?.node.receiverAccount)
+                          : edge?.node.receiverAccount}
                       </span>
                     </Link>
                   ) : (
@@ -100,9 +112,11 @@ export const CompactTransfersTable = (
                       <span
                         title={edge?.node.crossChainTransfer.receiverAccount}
                       >
-                        {truncate(
-                          edge?.node.crossChainTransfer.receiverAccount,
-                        )}
+                        {truncateColumns
+                          ? truncate(
+                              edge?.node.crossChainTransfer.receiverAccount,
+                            )
+                          : edge?.node.crossChainTransfer.receiverAccount}
                       </span>
                     </Link>
                   )}
@@ -112,18 +126,24 @@ export const CompactTransfersTable = (
                     href={`${routes.TRANSACTIONS}/${edge?.node.requestKey}`}
                   >
                     <span title={edge?.node.requestKey}>
-                      {truncate(edge?.node.requestKey)}
+                      {truncateColumns
+                        ? truncate(edge?.node.requestKey)
+                        : edge?.node.requestKey}
                     </span>
                   </Link>
-                  /
                   {edge?.node.crossChainTransfer && (
-                    <Link
-                      href={`${routes.TRANSACTIONS}/${edge?.node.crossChainTransfer.requestKey}`}
-                    >
-                      <span title={edge?.node.crossChainTransfer.requestKey}>
-                        {truncate(edge?.node.crossChainTransfer.requestKey)}
-                      </span>
-                    </Link>
+                    <>
+                      &nbsp;/&nbsp;
+                      <Link
+                        href={`${routes.TRANSACTIONS}/${edge?.node.crossChainTransfer.requestKey}`}
+                      >
+                        <span title={edge?.node.crossChainTransfer.requestKey}>
+                          {truncateColumns
+                            ? truncate(edge?.node.crossChainTransfer.requestKey)
+                            : edge?.node.crossChainTransfer.requestKey}
+                        </span>
+                      </Link>
+                    </>
                   )}
                 </Table.Td>
               </Table.Tr>

diff --git a/...s/graph-client/src/components/extended-transactions-table/extended-transactions-table.tsx b/...s/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
         </Button>
@@ -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
         </Button>

diff --git 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 {