kadena-community · MRVDH · Nov 6, 2023 · Nov 1, 2023 · Nov 2, 2023 · Nov 2, 2023
diff --git a/packages/apps/graph-client/src/components/error-box/error-box.tsx b/packages/apps/graph-client/src/components/error-box/error-box.tsx
@@ -0,0 +1,43 @@
+import { ApolloError } from '@apollo/client';
+import { Box, Notification } from '@kadena/react-ui';
+import React from 'react';
+
+interface IErrorBoxProps {
+  error: ApolloError;
+}
+
+export const ErrorBox = (props: IErrorBoxProps): JSX.Element => {
+  const { error } = props;
+
+  let errorTitle = 'Unknown Error Occured';
+  let errorMessage = error.message;
+  let errorExtra;
+
+  if (error.graphQLErrors.length > 0) {
+    const mainError = error.graphQLErrors[0];
+
+    if (mainError.extensions) {
+      errorTitle = (mainError.extensions.message as string) ?? errorTitle;
+      errorMessage =
+        (mainError.extensions.description as string) ?? errorMessage;
+
+      if (!mainError.extensions.description) {
+        errorExtra = JSON.stringify(mainError.extensions.data);
+      }
+    }
+  }
+
+  return (
+    <Notification.Root color="negative" icon="Close">
+      {errorTitle}
+      <Box marginBottom="$4" />
+      {errorMessage}
+      {errorExtra !== undefined && (
+        <>
+          <Box marginBottom="$4" />
+          <code>{errorExtra}</code>
+        </>
+      )}
+    </Notification.Root>
+  );
+};
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
@@ -1,6 +1,7 @@
 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 { 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';
@@ -39,15 +40,18 @@ const Account: React.FC = () => {
               <Loader /> <span>Retrieving account information...</span>
             </div>
           )}
-          {error && (
-            <Notification.Root color="negative" icon="Close">
-              Unknown error:
-              <Box marginBottom="$4" />
-              <code>{error.message}</code>
-              <Box marginBottom="$4" />
-              Check if the Graph server is running.
-            </Notification.Root>
-          )}
+          {error && <ErrorBox error={error} />}
+          {accountQuery?.account &&
+            accountQuery?.account?.totalBalance === 0 &&
+            accountQuery?.account?.chainAccounts.length === 0 && (
+              <>
+                <Notification.Root color="info">
+                  We could not find any data on this account. Please check the
+                  module and account name.
+                </Notification.Root>
+                <Box margin={'$4'} />
+              </>
+            )}
           {accountQuery?.account && (
             <div>
               <Table.Root wordBreak="break-all">

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
@@ -1,10 +1,11 @@
 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 { 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, Grid, Table } from '@kadena/react-ui';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -46,15 +47,7 @@ const ChainAccount: React.FC = () => {
               <Loader /> <span>Retrieving account information...</span>
             </div>
           )}
-          {error && (
-            <Notification.Root color="negative" icon="Close">
-              Unknown error:
-              <Box marginBottom="$4" />
-              <code>{error.message}</code>
-              <Box marginBottom="$4" />
-              Check if the Graph server is running.
-            </Notification.Root>
-          )}
+          {error && <ErrorBox error={error} />}
           {chainAccountQuery?.chainAccount && (
             <div>
               <Table.Root wordBreak="break-all">

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
@@ -1,9 +1,10 @@
 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 { ExtendedTransactionsTable } from '@/components/extended-transactions-table/extended-transactions-table';
 import routes from '@/constants/routes';
-import { Box, Breadcrumbs, Notification } from '@kadena/react-ui';
+import { Box, Breadcrumbs } from '@kadena/react-ui';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -42,15 +43,7 @@ const AccountTransactions: React.FC = () => {
               <Loader /> <span>Retrieving transactions...</span>
             </div>
           )}
-          {error && (
-            <Notification.Root color="negative" icon="Close">
-              Unknown error:
-              <Box marginBottom="$4" />
-              <code>{error.message}</code>
-              <Box marginBottom="$4" />
-              Check if the Graph server is running.
-            </Notification.Root>
-          )}
+          {error && <ErrorBox error={error} />}
           {data?.transactions && (
             <ExtendedTransactionsTable
               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
@@ -1,15 +1,9 @@
 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 routes from '@constants/routes';
-import {
-  Box,
-  Breadcrumbs,
-  Button,
-  Link,
-  Notification,
-  Table,
-} from '@kadena/react-ui';
+import { Box, Breadcrumbs, Button, Link, Table } from '@kadena/react-ui';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -47,15 +41,7 @@ const AccountTransfers: React.FC = () => {
               <Loader /> <span>Retrieving transfers...</span>
             </div>
           )}
-          {error && (
-            <Notification.Root color="negative" icon="Close">
-              Unknown error:
-              <Box marginBottom="$4" />
-              <code>{error.message}</code>
-              <Box marginBottom="$4" />
-              Check if the Graph server is running.
-            </Notification.Root>
-          )}
+          {error && <ErrorBox error={error} />}
           {data?.transfers && (
             <>
               <Box marginBottom="$3">

diff --git a/packages/apps/graph-client/src/pages/block/overview/[hash].tsx b/packages/apps/graph-client/src/pages/block/overview/[hash].tsx
@@ -4,6 +4,7 @@ import {
 } 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 { CompactTransactionsTable } from '@components/compact-transactions-table/compact-transactions-table';
 import { Text } from '@components/text';
 import routes from '@constants/routes';
@@ -49,15 +50,7 @@ const Block: React.FC = () => {
             </div>
           )}
 
-          {error && (
-            <Notification.Root color="negative" icon="Close">
-              Unknown error:
-              <Box marginBottom="$4" />
-              <code>{error.message}</code>
-              <Box marginBottom="$4" />
-              Check if the Graph server is running.
-            </Notification.Root>
-          )}
+          {error && <ErrorBox error={error} />}
 
           {data?.block && (
             <div style={{ maxWidth: '1000px' }}>

diff --git a/packages/apps/graph-client/src/pages/block/transactions/[hash].tsx b/packages/apps/graph-client/src/pages/block/transactions/[hash].tsx
@@ -1,9 +1,10 @@
 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 { ExtendedTransactionsTable } from '@/components/extended-transactions-table/extended-transactions-table';
 import routes from '@/constants/routes';
-import { Box, Breadcrumbs, Notification } from '@kadena/react-ui';
+import { Box, Breadcrumbs } from '@kadena/react-ui';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -34,15 +35,7 @@ const BlockTransactions: React.FC = () => {
               <Loader /> <span>Retrieving transactions...</span>
             </div>
           )}
-          {error && (
-            <Notification.Root color="negative" icon="Close">
-              Unknown error:
-              <Box marginBottom="$4" />
-              <code>{error.message}</code>
-              <Box marginBottom="$4" />
-              Check if the Graph server is running.
-            </Notification.Root>
-          )}
+          {error && <ErrorBox error={error} />}
           {data?.transactions && (
             <ExtendedTransactionsTable
               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
@@ -1,6 +1,7 @@
 import { useGetEventByNameSubscription } 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 { formatCode } from '@/utils/formatter';
 import routes from '@constants/routes';
 import { Box, Breadcrumbs, Notification, Table } from '@kadena/react-ui';
@@ -35,17 +36,7 @@ const Event: React.FC = () => {
             </div>
           )}
 
-          {error && (
-            <Notification.Root color="negative" icon="Close" variant="outlined">
-              Unknown error:
-              <br />
-              <br />
-              <code>{error.message}</code>
-              <br />
-              <br />
-              Check if the Graph server is running.
-            </Notification.Root>
-          )}
+          {error && <ErrorBox error={error} />}
 
           {eventSubscription?.event && (
             <div style={{ maxWidth: '1000px' }}>

diff --git a/packages/apps/graph-client/src/pages/transactions/[key].tsx b/packages/apps/graph-client/src/pages/transactions/[key].tsx
@@ -1,6 +1,7 @@
 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 routes from '@/constants/routes';
 import { formatCode, formatLisp } from '@/utils/formatter';
 import { Box, Breadcrumbs, Link, Notification, Table } from '@kadena/react-ui';
@@ -36,15 +37,7 @@ const RequestKey: React.FC = () => {
               <Loader /> <span>Waiting for request key...</span>
             </div>
           )}
-          {error && (
-            <Notification.Root color="negative" icon="Close" variant="outlined">
-              Unknown error:
-              <Box marginBottom="$4" />
-              <code>{error.message}</code>
-              <Box marginBottom="$4" />
-              Check if the Graph server is running.
-            </Notification.Root>
-          )}
+          {error && <ErrorBox error={error} />}
           {transactionSubscription?.transaction && (
             <div style={{ maxWidth: '1000px' }}>
               {/* center content inside the div */}

diff --git a/packages/apps/graph-client/src/pages/transactions/index.tsx b/packages/apps/graph-client/src/pages/transactions/index.tsx
@@ -1,8 +1,9 @@
-import { Box, Breadcrumbs, Notification } from '@kadena/react-ui';
+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 { ExtendedTransactionsTable } from '@/components/extended-transactions-table/extended-transactions-table';
 import routes from '@/constants/routes';
 import React from 'react';
@@ -27,15 +28,7 @@ const Transactions: React.FC = () => {
               <Loader /> <span>Retrieving transactions...</span>
             </div>
           )}
-          {error && (
-            <Notification.Root color="negative" icon="Close">
-              Unknown error:
-              <Box marginBottom="$4" />
-              <code>{error.message}</code>
-              <Box marginBottom="$4" />
-              Check if the Graph server is running.
-            </Notification.Root>
-          )}
+          {error && <ErrorBox error={error} />}
           {data?.transactions && (
             <ExtendedTransactionsTable
               transactions={data.transactions}

diff --git a/packages/apps/graph/generated-schema.graphql b/packages/apps/graph/generated-schema.graphql
@@ -150,9 +150,9 @@ scalar PositiveFloat
 
 type Query {
   account(accountName: String!, moduleName: String!): ModuleAccount!
-  block(hash: String!): Block!
+  block(hash: String!): Block
   blocksFromHeight(chainIds: [Int!], startHeight: Int!): [Block!]!
-  chainAccount(accountName: String!, chainId: String!, moduleName: String!): ChainModuleAccount!
+  chainAccount(accountName: String!, chainId: String!, moduleName: String!): ChainModuleAccount
   completedBlockHeights(chainIds: [String!], completedHeights: Boolean, heightCount: Int): [Block!]!
   lastBlockHeight: BigInt
   maximumConfirmationDepth: Int!

diff --git a/packages/apps/graph/package.json b/packages/apps/graph/package.json
@@ -48,6 +48,7 @@
     "graphql-scalars": "~1.22.2",
     "graphql-yoga": "~4.0.4",
     "json-bigint-patch": "~0.0.8",
+    "module-alias": "^2.2.3",
     "prisma": "^5.1.1",
     "seedrandom": "~3.0.5"
   },
@@ -65,5 +66,8 @@
     "prettier": "~3.0.3",
     "ts-node": "~10.8.2",
     "typescript": "5.2.2"
+  },
+  "_moduleAliases": {
+    "@src": "src"
   }
 }
diff --git a/packages/apps/graph/src/graph/Query/account.ts b/packages/apps/graph/src/graph/Query/account.ts
@@ -8,7 +8,7 @@ builder.queryField('account', (t) => {
       moduleName: t.arg.string({ required: true }),
     },
     type: Account,
-    resolve: async (parent, args) => {
+    resolve(__parent, args) {
       return {
         id: `Account:${args.accountName}`,
         accountName: args.accountName,

diff --git a/packages/apps/graph/src/graph/Query/block.ts b/packages/apps/graph/src/graph/Query/block.ts
@@ -1,6 +1,7 @@
+import { prismaClient } from '@src/db/prismaClient';
+import { normalizeError } from '@src/utils/errors';
 import type { Debugger } from 'debug';
 import _debug from 'debug';
-import { prismaClient } from '../../db/prismaClient';
 import { builder } from '../builder';
 import Block from '../objects/Block';
 
@@ -11,23 +12,24 @@ builder.queryField('block', (t) => {
     args: {
       hash: t.arg.string({ required: true }),
     },
-
     type: Block,
+    nullable: true,
+    async resolve(__query, __parent, args) {
+      try {
+        log('searching for block with hash:', args.hash);
 
-    resolve: async (__query, __parent, { hash }) => {
-      log('searching for block with hash:', hash);
+        const block = await prismaClient.block.findUnique({
+          where: {
+            hash: args.hash,
+          },
+        });
 
-      const block = await prismaClient.block.findUnique({
-        where: {
-          hash,
-        },
-      });
+        log(`block with hash '${args.hash}' ${block ? '' : 'not'} found`);
 
-      log('found block', block);
-      if (!block) {
-        throw new Error(`Block not found for hash: ${hash}`);
+        return block;
+      } catch (error) {
+        throw normalizeError(error);
       }
-      return block;
     },
   });
 });