chore: add resolvers on graphql

FuelLabs · Sep 23, 2023 · 463e3ef · 463e3ef
1 parent b3763b6
commit 463e3ef
Show file tree

Hide file tree

Showing 25 changed files with 1,019 additions and 197 deletions.
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "dev": "pnpm turbo:run dev --filter=!indexer",
     "dev:app": "pnpm --filter=app dev",
     "dev:graphql": "pnpm --filter=graphql dev",
-    "dev:indexer": "pnpm --filter=indexer dev:indexer",
+    "dev:indexer": "pnpm --filter=indexer dev",
     "lint": "run-s lint:check prettier:check",
     "lint:check": "eslint .",
     "lint:fix": "pnpm lint:check --fix",

diff --git a/packages/app/src/systems/Transaction/component/TxAccountItem/TxAccountItem.stories.tsx b/packages/app/src/systems/Transaction/component/TxAccountItem/TxAccountItem.stories.tsx
@@ -3,7 +3,7 @@ import { bn } from '@fuel-ts/math';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { TxAccountTypeEnum } from '../../types';
-import { TX_CONTRACT_CALL_MOCK } from '../__mocks__/tx';
+import { TX_MOCK } from '../__mocks__/tx';
 
 import { TxAccountItem } from './TxAccountItem';
 
@@ -19,7 +19,7 @@ export const Usage: Story = {
   render: () => (
     <TxAccountItem
       className="max-w-[300px]"
-      id={TX_CONTRACT_CALL_MOCK.transaction.id}
+      id={TX_MOCK.id}
       spent={bn(1)}
       type="Contract"
     />
@@ -36,7 +36,7 @@ export const AllTypes: Story = {
         <TxAccountItem
           key={type}
           className="max-w-[300px]"
-          id={TX_CONTRACT_CALL_MOCK.transaction.id}
+          id={TX_MOCK.id}
           spent={bn(1)}
           type={type}
         />

diff --git a/packages/app/src/systems/Transaction/component/TxCard/TxCard.stories.tsx b/packages/app/src/systems/Transaction/component/TxCard/TxCard.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { TX_CONTRACT_CALL_MOCK } from '../__mocks__/tx';
+import { TX_MOCK } from '../__mocks__/tx';
 
 import { TxCard } from './TxCard';
 
@@ -13,10 +13,5 @@ export default meta;
 type Story = StoryObj<typeof TxCard>;
 
 export const Usage: Story = {
-  render: () => (
-    <TxCard
-      className="w-[350px]"
-      transaction={TX_CONTRACT_CALL_MOCK['transaction']}
-    />
-  ),
+  render: () => <TxCard className="w-[350px]" transaction={TX_MOCK} />,
 };
diff --git a/packages/app/src/systems/Transaction/component/TxCard/TxCard.tsx b/packages/app/src/systems/Transaction/component/TxCard/TxCard.tsx
@@ -13,26 +13,25 @@ import {
 import { tv } from 'tailwind-variants';
 import { fromNow } from '~/systems/Core/utils/dayjs';
 
-import { useTx } from '../../hooks/useTx';
-import type { TransactionNode } from '../../types';
+import type { TransactionNode, TxStatus } from '../../types';
 import { TxIcon } from '../TxIcon/TxIcon';
 
 type TxCardProps = BaseProps<{
   transaction: TransactionNode;
 }>;
 
-export function TxCard({ transaction, className, ...props }: TxCardProps) {
+export function TxCard({ transaction: tx, className, ...props }: TxCardProps) {
   const classes = styles();
-  const tx = useTx(transaction);
-
+  const title = tx.title as string;
+  const time = fromNow(tx.time as string);
   return (
     <Card {...props} className={classes.root({ className })}>
       <Card.Header>
         <EntityItem>
           <EntityItem.Slot>
-            <TxIcon status={tx.status} type={tx.type} />
+            <TxIcon status={tx.statusType as TxStatus} type={title} />
           </EntityItem.Slot>
-          <EntityItem.Info id={tx.transaction?.id} title={tx.title} />
+          <EntityItem.Info id={tx.id} title={title} />
         </EntityItem>
       </Card.Header>
       <Card.Body className={classes.body()}>
@@ -42,7 +41,7 @@ export function TxCard({ transaction, className, ...props }: TxCardProps) {
         <Flex className={classes.row()} justify="between">
           <Text leftIcon={IconTransfer}>{tx.totalOperations} operations</Text>
           <Text className={classes.small()} leftIcon={IconClockHour1}>
-            {fromNow(tx.timestamp)}
+            {time}
           </Text>
         </Flex>
         <Flex className={classes.row()} justify="between">

diff --git a/packages/app/src/systems/Transaction/component/TxIcon/TxIcon.tsx b/packages/app/src/systems/Transaction/component/TxIcon/TxIcon.tsx
@@ -43,7 +43,7 @@ export const TX_STATUS_MAP: Record<TxStatus, string> = {
 
 type TxIconProps = VariantProps<typeof styles> &
   BaseProps<{
-    type: TxType | TxAccountType;
+    type: string;
     status?: TxStatus;
     color?: BadgeProps['color'];
     label?: string;

diff --git a/packages/app/src/systems/Transaction/component/TxSummary/TxSummary.stories.tsx b/packages/app/src/systems/Transaction/component/TxSummary/TxSummary.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { TX_CONTRACT_CALL_MOCK } from '../__mocks__/tx';
+import { TX_MOCK } from '../__mocks__/tx';
 
 import { TxSummary } from './TxSummary';
 
@@ -14,10 +14,7 @@ type Story = StoryObj<typeof TxSummary>;
 
 export const Usage: Story = {
   render: () => (
-    <TxSummary
-      className="max-w-screen"
-      transaction={TX_CONTRACT_CALL_MOCK['transaction']}
-    >
+    <TxSummary className="max-w-screen" transaction={TX_MOCK}>
       <TxSummary.Details />
       <TxSummary.Params />
     </TxSummary>

diff --git a/packages/app/src/systems/Transaction/component/TxSummary/TxSummary.tsx b/packages/app/src/systems/Transaction/component/TxSummary/TxSummary.tsx
@@ -22,25 +22,23 @@ import { createContext, useContext } from 'react';
 import { tv } from 'tailwind-variants';
 import { fromNow, fullTime } from '~/systems/Core/utils/dayjs';
 
-import { useTx } from '../../hooks/useTx';
-import type { TransactionNode, TxItem } from '../../types';
+import type { TransactionNode, TxStatus } from '../../types';
 import { TX_INTENT_MAP, TxIcon } from '../TxIcon/TxIcon';
 
 export type TxSummaryProps = BaseProps<{ transaction: TransactionNode }>;
 export type TxSummaryDetailsProps = CardProps;
 export type TxSummaryParamsProps = CardProps;
 
-type Context = { tx: TxItem };
+type Context = TxSummaryProps;
 const ctx = createContext<Context>({} as Context);
 
 export const TxSummaryRoot = createComponent<TxSummaryProps, typeof HStack>({
   id: 'TxSummary',
   baseElement: HStack,
   render: (Comp, { transaction, className, ...props }) => {
     const classes = styles();
-    const tx = useTx(transaction);
     return (
-      <ctx.Provider value={{ tx }}>
+      <ctx.Provider value={{ transaction }}>
         <Comp {...props} className={classes.root({ className })} />
       </ctx.Provider>
     );
@@ -69,28 +67,30 @@ export const TxSummaryDetails = createComponent<
   id: 'TxSummaryDetails',
   baseElement: Card,
   render: (Comp, { className, ...props }) => {
-    const { tx } = useContext(ctx);
+    const { transaction: tx } = useContext(ctx);
     const classes = styles();
+    const title = tx.title as string;
+    const status = tx.statusType as TxStatus;
     return (
       <Comp {...props} className={classes.details({ className })}>
         <Card.Body as={VStack} className="p-0">
           <TxSummaryRow label="Type">
             <EntityItem>
               <EntityItem.Slot>
-                <TxIcon status={tx.status} type={tx.type} />
+                <TxIcon status={tx.statusType as TxStatus} type={title} />
               </EntityItem.Slot>
-              <EntityItem.Info id={tx.transaction?.id} title={tx.title} />
+              <EntityItem.Info id={tx.id} title={title} />
             </EntityItem>
           </TxSummaryRow>
           <TxSummaryRow label="Timestamp">
-            <Text as="span">{fromNow(tx.timestamp)}</Text>
+            <Text as="span">{fromNow(tx.time as string)}</Text>
             <Text as="span" iconColor="text-muted" leftIcon={IconCalendar}>
-              {fullTime(tx.timestamp)}
+              {fullTime(tx.time as string)}
             </Text>
           </TxSummaryRow>
           <TxSummaryRow label="Status">
-            <Badge color={TX_INTENT_MAP[tx.status]} size="2">
-              {tx.status}
+            <Badge color={TX_INTENT_MAP[status]} size="2">
+              {status}
             </Badge>
           </TxSummaryRow>
           <TxSummaryRow label="Block">
@@ -118,7 +118,7 @@ export const TxSummaryParams = createComponent<
   id: 'TxSummaryParams',
   baseElement: Card,
   render: (Comp, { className, ...props }) => {
-    const { tx } = useContext(ctx);
+    const { transaction: tx } = useContext(ctx);
     const classes = styles();
     return (
       <Comp {...props} className={classes.params({ className })}>

diff --git a/packages/app/src/systems/Transaction/component/__mocks__/tx.ts b/packages/app/src/systems/Transaction/component/__mocks__/tx.ts
@@ -1,39 +1,19 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+import { mocks } from '@fuel-explorer/graphql';
 import { bn } from '@fuel-ts/math';
-import { dayjs } from '~/systems/Core/utils/dayjs';
 
-import { TxTypeEnum, TxStatusEnum } from '../../types';
+const status = mocks.aSuccessStatus({
+  __typename: 'SuccessStatus',
+  block: mocks.aBlock({
+    transactions: [],
+  }),
+});
 
-export const TX_CONTRACT_CALL_MOCK = {
-  type: TxTypeEnum.ContractCall,
-  status: TxStatusEnum.Success,
-  gasUsed: bn(1),
-  timestamp: String(dayjs().subtract(10, 'minute').unix()),
+export const TX_MOCK = mocks.aTransaction({
+  id: '0x78d13f111bf301324f34f2a7eaffc546d39598d156af38e7c4ef9fe61ea2c46a',
+  time: status.time,
+  totalAccounts: 2,
   totalAssets: 3,
-  totalOperations: 2,
-  totalAccounts: 1,
-  transaction: {
-    __typename: 'Transaction',
-    id: '0x78d13f111bf301324f34f2a7eaffc546d39598d156af38e7c4ef9fe61ea2c46a',
-    isCreate: false,
-    isMint: false,
-    isScript: true,
-    status: {
-      __typename: 'SuccessStatus',
-      time: '4611686020099207033',
-      block: {
-        id: '0xa89cdecc118758816dfdc65c831a748d95b7.4.38cbb729e6315f374c91b43fc',
-      },
-    },
-    outputs: [],
-    inputs: [
-      {
-        contract: {
-          id: '0xfc69a2f25c26312fbecc7fce531eca80a2d315482c03fbc00d36b5cf065a0ac3',
-          bytecode: '0x74000003',
-          salt: '0x0000000000',
-        },
-      },
-    ],
-  },
-} as any;
+  totalOperations: 4,
+  gasUsed: bn(1),
+  status,
+});
diff --git a/packages/app/src/systems/Transaction/hooks/useTx.tsx b/packages/app/src/systems/Transaction/hooks/useTx.tsx
diff --git a/packages/app/src/systems/Transaction/types.ts b/packages/app/src/systems/Transaction/types.ts
@@ -1,5 +1,4 @@
 import type { TransactionItemFragment } from '@fuel-explorer/graphql';
-import type { BNInput } from '@fuel-ts/math';
 
 export enum TxTypeEnum {
   ContractCall = 'ContractCall',
@@ -14,7 +13,6 @@ export enum TxStatusEnum {
   Info = 'Info',
   Warning = 'Warning',
 }
-
 export enum TxAccountTypeEnum {
   Wallet = 'Wallet',
   Contract = 'Contract',
@@ -29,17 +27,3 @@ export const TX_TYPES = Object.keys({ ...TxTypeEnum, ...TxAccountTypeEnum });
 export const TX_STATUS = Object.keys(TxStatusEnum);
 
 export type TransactionNode = TransactionItemFragment;
-
-export type TxItem = {
-  // From indexer
-  transaction: TransactionNode;
-  // Parsed Props
-  title: TxAccountType | TxType;
-  type: TxType;
-  status: TxStatus;
-  gasUsed: BNInput;
-  timestamp: string;
-  totalAssets: number;
-  totalOperations: number;
-  totalAccounts: number;
-};