Merge pull request #1179 from kadena-community/feat/graph-client/esti…

…mate-gas-limit-clean

[@kadena/graph] , [@kadena/graph-client] Estimate transaction gas limit (Feat)

.changeset/curly-pumas-love.md

@@ -0,0 +1,5 @@
+---
+'@kadena/graph': patch
+---
+
+Added gas estimation query and adjusted folder structure for devnet files

.changeset/twelve-donkeys-occur.md

@@ -0,0 +1,6 @@
+---
+'@kadena/graph-client': patch
+---
+
+Created gas estimation page and ajusted header component to incorporate option
+for gas. Also added necessary graph references to consume the endpoint

packages/apps/graph-client/src/components/Common/Layout/Header/Header.tsx

@@ -17,7 +17,9 @@ const Header: FC<IHeaderProps> = (props) => {
 
   const [searchType, setSearchType] = useState<string>('request-key');
   const [searchField, setSearchField] = useState<string>('');
-  const [moduleField, setModuleField] = useState<string>('coin');
+  const [secondSearchField, setSecondSearchField] = useState<string>('');
+  const [thirdSearchField, setThirdSearchField] = useState<string>('');
+  const [gridColumns, setGridColumns] = useState<number>(3);
   const [defaultHashOption, setDefaultHashOption] =
     useState<string>('request-key');
 
@@ -26,13 +28,33 @@ const Header: FC<IHeaderProps> = (props) => {
     account: 'Account',
     event: 'Event Name',
     block: 'Block Hash',
+    gasEstimation: 'Cmd',
   };
 
   const searchTypePlaceholders: Record<string, string> = {
     'request-key': 'vCiATVJgm7...',
     account: 'k:1234...',
     event: 'coin.TRANSFER',
     block: 'CA9orP2yM...',
+    gasEstimation: 'cmd',
+  };
+
+  const secondSearchTypeLabels: Record<string, string> = {
+    account: 'Module',
+    gasEstimation: 'Hash',
+  };
+
+  const secondSearchFieldPlaceholders: Record<string, string> = {
+    account: 'coin',
+    gasEstimation: 'hash',
+  };
+
+  const thirdSeachTypeLabels: Record<string, string> = {
+    gasEstimation: 'Signatures',
+  };
+
+  const thirdSearchFieldPlaceholders: Record<string, string> = {
+    gasEstimation: 'sigs',
   };
 
   const search = (): void => {
@@ -43,7 +65,7 @@ const Header: FC<IHeaderProps> = (props) => {
         break;
       case 'account':
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        router.push(`${routes.ACCOUNT}/${moduleField}/${searchField}`);
+        router.push(`${routes.ACCOUNT}/${secondSearchField}/${searchField}`);
         break;
       case 'event':
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -53,6 +75,16 @@ const Header: FC<IHeaderProps> = (props) => {
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
         router.push(`${routes.BLOCK_OVERVIEW}/${searchField}`);
         break;
+      case 'gasEstimation':
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        router.push({
+          pathname: `${routes.GAS_ESTIMATION}`,
+          query: {
+            cmd: searchField,
+            hash: secondSearchField,
+            sigs: thirdSearchField,
+          },
+        });
     }
   };
 
@@ -68,6 +100,10 @@ const Header: FC<IHeaderProps> = (props) => {
     setSearchField(event.target.value);
     const fieldValue = event.target.value;
 
+    if (searchType === 'gasEstimation') {
+      return;
+    }
+
     if (
       fieldValue.startsWith('k:') ||
       fieldValue.startsWith('w:') ||
@@ -92,9 +128,22 @@ const Header: FC<IHeaderProps> = (props) => {
     setSearchType(event.target.value);
     if (event.target.value === 'request-key') {
       setDefaultHashOption('request-key');
+      setGridColumns(3);
     }
     if (event.target.value === 'block') {
       setDefaultHashOption('block');
+      setGridColumns(3);
+    }
+    if (event.target.value === 'event') {
+      setGridColumns(3);
+    }
+    if (event.target.value === 'account') {
+      setSecondSearchField('coin');
+      setGridColumns(4);
+    }
+    if (event.target.value === 'gasEstimation') {
+      setSecondSearchField('');
+      setGridColumns(5);
     }
   };
 
@@ -115,7 +164,7 @@ const Header: FC<IHeaderProps> = (props) => {
           {title}
         </Text>
 
-        <Grid.Root columns={searchType.startsWith('account') ? 4 : 3}>
+        <Grid.Root columns={gridColumns}>
           <Grid.Item>
             <InputWrapper htmlFor="search-type" label="Search Type">
               <Select
@@ -128,9 +177,11 @@ const Header: FC<IHeaderProps> = (props) => {
                 <option value="account">Account</option>
                 <option value="event">Event</option>
                 <option value="block">Block</option>
+                <option value="gasEstimation">Gas Estimation</option>
               </Select>
             </InputWrapper>
           </Grid.Item>
+
           <Grid.Item>
             <InputWrapper
               htmlFor="search-field"
@@ -145,14 +196,37 @@ const Header: FC<IHeaderProps> = (props) => {
               />
             </InputWrapper>
           </Grid.Item>
-          {searchType.startsWith('account') && (
+
+          {(searchType.startsWith('account') ||
+            searchType.startsWith('gas')) && (
+            <Grid.Item>
+              <InputWrapper
+                htmlFor="second-search-field"
+                label={secondSearchTypeLabels[searchType]}
+              >
+                <Input
+                  id="second-search-field"
+                  value={secondSearchField}
+                  placeholder={secondSearchFieldPlaceholders[searchType]}
+                  onChange={(event) => setSecondSearchField(event.target.value)}
+                  onKeyDown={handleKeyPress}
+                />
+              </InputWrapper>
+            </Grid.Item>
+          )}
+
+          {searchType.startsWith('gas') && (
             <Grid.Item>
-              <InputWrapper htmlFor="module" label="Module name">
+              <InputWrapper
+                htmlFor="third-search-field"
+                label={thirdSeachTypeLabels[searchType]}
+              >
                 <Input
-                  id="module"
-                  value={moduleField}
-                  placeholder="coin"
-                  onChange={(event) => setModuleField(event.target.value)}
+                  id="third-search-field"
+                  value={thirdSearchField}
+                  placeholder={thirdSearchFieldPlaceholders[searchType]}
+                  onChange={(event) => setThirdSearchField(event.target.value)}
+                  onKeyDown={handleKeyPress}
                 />
               </InputWrapper>
             </Grid.Item>

packages/apps/graph-client/src/constants/routes.ts

@@ -7,4 +7,5 @@ export default {
   EVENT: '/event',
   BLOCK_OVERVIEW: '/block/overview',
   BLOCK_TRANSACTIONS: '/block/transactions',
+  GAS_ESTIMATION: '/gas/estimation',
 } as const;

packages/apps/graph-client/src/graphql/queries.graph.ts

@@ -53,7 +53,7 @@ export const getLastBlock: DocumentNode = gql`
   }
 `;
 
-export const getGraphAndChainwebData: DocumentNode = gql`
+export const getGraphConfiguration: DocumentNode = gql`
   query getGraphConfiguration {
     graphConfiguration {
       maximumConfirmationDepth
@@ -224,3 +224,8 @@ export const getTransfers: DocumentNode = gql`
     }
   }
 `;
+export const estimateGasLimit: DocumentNode = gql`
+  query estimateGasLimit($transaction: PactTransaction!) {
+    gasLimitEstimate(transaction: $transaction)
+  }
+`;

packages/apps/graph-client/src/pages/gas/estimation/index.tsx

@@ -0,0 +1,66 @@
+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 routes from '@/constants/routes';
+import { Box, Breadcrumbs, Table } from '@kadena/react-ui';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+const GasEstimation: React.FC = () => {
+  const router = useRouter();
+  const { cmd, hash, sigs } = router.query;
+
+  const cmdString = cmd as string;
+  const hashString = hash as string;
+  const sigsString = sigs as string;
+  const sigsArray = sigsString ? sigsString.split(',') : [];
+
+  const { loading, data, error } = useEstimateGasLimitQuery({
+    variables: {
+      transaction: { cmd: cmdString, hash: hashString, sigs: sigsArray },
+    },
+  });
+
+  return (
+    <div style={{ padding: '0 50px 30px 50px' }}>
+      <Breadcrumbs.Root>
+        <Breadcrumbs.Item href={`${routes.HOME}`}>Home</Breadcrumbs.Item>
+        <Breadcrumbs.Item>Gas Estimation</Breadcrumbs.Item>
+      </Breadcrumbs.Root>
+
+      <Box marginBottom="$8" />
+
+      <main className={mainStyle}>
+        <div>
+          {loading && (
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <Loader /> <span>Waiting for gas estimation...</span>
+            </div>
+          )}
+          {error && <ErrorBox error={error} />}
+          <Table.Root wordBreak="break-all">
+            <Table.Head>
+              <Table.Tr>
+                <Table.Th>Label</Table.Th>
+                <Table.Th>Value</Table.Th>
+              </Table.Tr>
+            </Table.Head>
+            <Table.Body>
+              <Table.Tr>
+                <Table.Td>Cmd</Table.Td>
+                <Table.Td>{cmdString}</Table.Td>
+              </Table.Tr>
+              <Table.Tr>
+                <Table.Td>Gas Estimate</Table.Td>
+                <Table.Td>{data?.gasLimitEstimate}</Table.Td>
+              </Table.Tr>
+            </Table.Body>
+          </Table.Root>
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default GasEstimation;

packages/apps/graph/generated-schema.graphql

@@ -150,6 +150,12 @@ input PactQueryData {
   value: String!
 }
 
+input PactTransaction {
+  cmd: String!
+  hash: String
+  sigs: [String!]
+}
+
 type PageInfo {
   endCursor: String
   hasNextPage: Boolean!
@@ -166,6 +172,8 @@ type Query {
   blocksFromHeight(chainIds: [Int!], startHeight: Int!): [Block!]!
   chainAccount(accountName: String!, chainId: String!, moduleName: String!): ChainModuleAccount
   completedBlockHeights(chainIds: [String!], completedHeights: Boolean, heightCount: Int): [Block!]!
+  gasLimitEstimate(transaction: PactTransaction!): Int!
+  gasLimitEstimates(transactions: [PactTransaction!]!): [Int!]!
   graphConfiguration: GraphConfiguration!
   lastBlockHeight: BigInt
   node(id: ID!): Node

packages/apps/graph/package.json

@@ -24,7 +24,7 @@
     "prisma:generate": "prisma generate",
     "prisma:pull": "prisma db pull",
     "prisma:studio": "prisma studio",
-    "simulate": "ts-node -T src/scripts/devnet/index.ts traffic",
+    "simulate": "ts-node -T src/devnet/simulation/index.ts traffic",
     "start": "npx ts-node-dev --respawn --no-notify --exit-child src/index.ts",
     "start:generate": "pnpm run prisma:generate && npx ts-node-dev --respawn --no-notify --exit-child src/index.ts",
     "test": "echo \"no test specified\""
@@ -70,6 +70,7 @@
   "_moduleAliases": {
     "@db": "src/db",
     "@services": "src/services",
-    "@utils": "src/utils"
+    "@utils": "src/utils",
+    "@devnet": "src/devnet"
   }
 }

packages/apps/graph/src/scripts/devnet/helper.ts → packages/apps/graph/src/devnet/helper.ts

@@ -53,6 +53,11 @@ export const pollStatus = (
 export const dirtyRead = (tx: IUnsignedCommand): Promise<ICommandResult> =>
   getClient().dirtyRead(tx);
 
+export const localReadForGasEstimation = (
+  tx: IUnsignedCommand,
+): Promise<ICommandResult> =>
+  getClient().local(tx, { preflight: true, signatureVerification: false });
+
 export const signTransaction =
   (keyPairs: IKeyPair[]) =>
   (tx: IUnsignedCommand): IUnsignedCommand | ICommand => {

packages/apps/graph/src/scripts/devnet/file.ts → packages/apps/graph/src/devnet/simulation/file.ts

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import { devnetConfig } from './config';
+import { devnetConfig } from '../config';
 
 export interface IFileData {
   timestamp: number;

packages/apps/graph/src/scripts/devnet/index.ts → packages/apps/graph/src/devnet/simulation/index.ts

@@ -1,7 +1,7 @@
 import { Command, Option } from 'commander';
-import { generateKeyPair, logger } from './helper';
+import { generateKeyPair, logger } from '../helper';
+import { transfer } from '../transfer';
 import { simulate } from './simulate';
-import { transfer } from './transfer';
 
 const program: Command = new Command();
 program

packages/apps/graph/src/scripts/devnet/simulate.ts → packages/apps/graph/src/devnet/simulation/simulate.ts

@@ -1,20 +1,20 @@
 import type { ChainId } from '@kadena/client';
-import { devnetConfig } from './config';
-import { crossChainTransfer } from './crosschain-transfer';
-import type { TransferType } from './file';
-import { appendToFile, createFile } from './file';
-import { getBalance } from './get-balance';
-import type { IAccount } from './helper';
+import { devnetConfig } from '../config';
+import { crossChainTransfer } from '../crosschain-transfer';
+import { getBalance } from '../get-balance';
+import type { IAccount } from '../helper';
 import {
   generateKeyPair,
   getRandomNumber,
   getRandomOption,
   isEqualChainAccounts,
   logger,
   seedRandom,
-} from './helper';
-import { safeTransfer } from './safe-transfer';
-import { transfer } from './transfer';
+} from '../helper';
+import { safeTransfer } from '../safe-transfer';
+import { transfer } from '../transfer';
+import type { TransferType } from './file';
+import { appendToFile, createFile } from './file';
 
 const simualtionTransferOptions: TransferType[] = [
   'xchaintransfer',
@@ -180,8 +180,6 @@ export async function simulate({
         accounts.push(nextAccount);
       }
 
-      logger.info(accounts);
-
       await new Promise((resolve) => setTimeout(resolve, transferInterval));
     }
     counter++;