feat: add TxInput component (#55)

Author: pedronauck

.eslintignore

@@ -18,4 +18,6 @@ storybook
 **/storybook/**
 .turbo
 pnpm-lock.yaml
-
+**/**/.*
+.*/
+packages/app/public/**

.eslintrc.js

@@ -2,8 +2,8 @@ const { resolve } = require('path');
 const { dependencies } = require('./packages/app/package.json');
 
 const project = [
-  resolve(__dirname, 'tsconfig.json'),
-  resolve(__dirname, 'packages/**/tsconfig.json'),
+  resolve(__dirname, './tsconfig.json'),
+  resolve(__dirname, './packages/**/tsconfig.json'),
 ];
 
 module.exports = {
@@ -14,6 +14,7 @@ module.exports = {
     'plugin:@fuels/react',
   ],
   parserOptions: {
+    tsconfigRootDir: __dirname,
     project,
   },
   settings: {

.npmrc

@@ -29,4 +29,5 @@ public-hoist-pattern[]=*framer-motion*
 public-hoist-pattern[]=*@react-aria/interactions*
 public-hoist-pattern[]=*eslint*
 public-hoist-pattern[]=*prettier*
+public-hoist-pattern[]=*ts-node*
 public-hoist-pattern[]=@types*

package.json

@@ -63,7 +63,7 @@
     "@swc/core": "1.3.89",
     "@swc/jest": "0.2.29",
     "@types/jest": "29.5.5",
-    "@types/node": "20.6.5",
+    "@types/node": "20.7.0",
     "deepmerge-json": "1.5.0",
     "@next/eslint-plugin-next": "^13.5.3",
     "@typescript-eslint/eslint-plugin": "^6.7.3",

packages/app/package.json

@@ -13,6 +13,7 @@
     "ts:check": "tsc --noEmit"
   },
   "dependencies": {
+    "@faker-js/faker": "8.1.0",
     "@fontsource-variable/inter": "5.0.8",
     "@fuel-explorer/graphql": "workspace:*",
     "@fuel-ts/math": "0.59.0",
@@ -51,8 +52,8 @@
     "@storybook/types": "^7.4.5",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.3",
-    "@types/node": "20.6.5",
-    "@types/react": "^18.2.22",
+    "@types/node": "20.7.0",
+    "@types/react": "^18.2.23",
     "@types/react-dom": "^18.2.7",
     "@xstate/cli": "^0.5.2",
     "autoprefixer": "10.4.16",

packages/app/src/systems/Core/utils/sdk.ts

@@ -0,0 +1,5 @@
+import { getSdk } from '@fuel-explorer/graphql';
+import { GraphQLClient } from 'graphql-request';
+
+const graphql = new GraphQLClient(process.env.GRAPHQL_API!);
+export const sdk = getSdk(graphql);

packages/app/src/systems/Transaction/__mocks__/tx.ts

@@ -0,0 +1,79 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { faker } from '@faker-js/faker';
+import { GroupInputType, mocks } from '@fuel-explorer/graphql';
+import { bn } from '@fuel-ts/math';
+import { assets } from '@fuels/assets';
+import { dayjs } from '~/systems/Core/utils/dayjs';
+
+const date = dayjs().subtract(1, 'day');
+const status = mocks.aSuccessStatus({
+  __typename: 'SuccessStatus',
+  block: mocks.aBlock({
+    transactions: [],
+  }),
+});
+
+const genInput = (typename: any) =>
+  mocks.anInputCoin({
+    __typename: typename,
+    amount: bn(1),
+    utxoId: faker.string.uuid(),
+  });
+
+export const GROUPED_INPUT_ASSET = mocks.aGroupedInput({
+  __typename: 'GroupedInput',
+  type: GroupInputType.InputCoin,
+  inputs: [genInput('InputCoin'), genInput('InputCoin'), genInput('InputCoin')],
+  assetId: assets[0].assetId,
+  totalAmount: bn(3),
+  owner: `0x${faker.string.alpha(32)}`,
+});
+
+export const GROUPED_INPUT_ASSET_UNKNOWN = mocks.aGroupedInput({
+  __typename: 'GroupedInput',
+  type: GroupInputType.InputCoin,
+  inputs: [genInput('InputCoin'), genInput('InputCoin'), genInput('InputCoin')],
+  owner: `0x${faker.string.alpha(32)}`,
+  assetId: `0x${faker.string.alpha(32)}`,
+  totalAmount: bn(3),
+});
+
+export const GROUPED_INPUT_CONTRACT = mocks.aGroupedInput({
+  __typename: 'GroupedInput',
+  type: GroupInputType.InputContract,
+  inputs: [
+    genInput('InputContract'),
+    genInput('InputContract'),
+    genInput('InputContract'),
+  ],
+  contractId: assets[0].assetId,
+  totalAmount: bn(3),
+});
+
+export const GROUPED_INPUT_MESSAGE = mocks.aGroupedInput({
+  __typename: 'GroupedInput',
+  type: GroupInputType.InputMessage,
+  sender: `0x${faker.string.alpha(40)}`,
+  recipient: `0x${faker.string.alpha(40)}`,
+  data: `0x${faker.string.alpha(160)}`,
+});
+
+export const TX_MOCK = mocks.aTransaction({
+  id: '0x78d13f111bf301324f34f2a7eaffc546d39598d156af38e7c4ef9fe61ea2c46a',
+  time: {
+    __typename: 'ParsedTime',
+    fromNow: date.fromNow(),
+    full: dayjs().format('DD MMM YYYY - HH:mm:ss A'),
+  },
+  totalAccounts: 2,
+  totalAssets: 3,
+  totalOperations: 4,
+  gasUsed: bn(1),
+  status,
+  groupedInputs: [
+    GROUPED_INPUT_ASSET,
+    GROUPED_INPUT_ASSET_UNKNOWN,
+    GROUPED_INPUT_ASSET,
+    GROUPED_INPUT_MESSAGE,
+  ],
+});

packages/app/src/systems/Transaction/actions/get-last-txs.ts

@@ -2,14 +2,14 @@
 
 import { z } from 'zod';
 import { act } from '~/systems/Core/utils/act-server';
-import { explorer } from '~/systems/explerer';
+import { sdk } from '~/systems/Core/utils/sdk';
 
 const schema = z.object({
   last: z.number().default(12).optional(),
 });
 
 export const getLastTxs = act(schema, async ({ last = 12 }) => {
-  const { data } = await explorer.getLastTransactions({ last }).catch(() => ({
+  const { data } = await sdk.getLastTransactions({ last }).catch(() => ({
     data: { transactions: { nodes: [] } },
   }));
   return data.transactions.nodes;

packages/app/src/systems/Transaction/component/TxAccountItem/TxAccountItem.stories.tsx

@@ -2,8 +2,8 @@ import { bn } from '@fuel-ts/math';
 import { VStack } from '@fuels/ui';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { TX_MOCK } from '../../__mocks__/tx';
 import { TxAccountTypeEnum } from '../../types';
-import { TX_MOCK } from '../__mocks__/tx';
 
 import { TxAccountItem } from './TxAccountItem';
 

packages/app/src/systems/Transaction/component/TxCard/TxCard.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { TX_MOCK } from '../__mocks__/tx';
+import { TX_MOCK } from '../../__mocks__/tx';
 
 import { TxCard } from './TxCard';
 

packages/app/src/systems/Transaction/component/TxIcon/TxIcon.stories.tsx

@@ -2,7 +2,7 @@ import { HStack, VStack } from '@fuels/ui';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import type { TxStatus, TxType } from '../../types';
-import { TX_STATUS, TX_TYPES } from '../../types';
+import { TX_STATUS, TX_ICON_TYPES } from '../../types';
 
 import { TxIcon } from './TxIcon';
 
@@ -17,7 +17,7 @@ type Story = StoryObj<typeof TxIcon>;
 export const Usage: Story = {
   render: () => (
     <VStack>
-      {TX_TYPES.map((type) => (
+      {TX_ICON_TYPES.map((type) => (
         <HStack key={type}>
           {TX_STATUS.map((status) => (
             <TxIcon

packages/app/src/systems/Transaction/component/TxIcon/TxIcon.tsx

@@ -4,6 +4,7 @@ import {
   IconCode,
   IconCoins,
   IconFlame,
+  IconMessageCode,
   IconScript,
   IconSwitch3,
   IconTransfer,
@@ -12,16 +13,17 @@ import {
 import type { VariantProps } from 'tailwind-variants';
 import { tv } from 'tailwind-variants';
 
-import type { TxAccountType, TxStatus, TxType } from '../../types';
+import type { TxIconType, TxStatus } from '../../types';
 
-const TX_ICON_MAP: Record<TxType | TxAccountType, IconComponent> = {
+const TX_ICON_MAP: Record<TxIconType, IconComponent> = {
   ContractCall: IconCode,
   Mint: IconCoins,
   Transfer: IconTransfer,
   Burn: IconFlame,
   Contract: IconScript,
   Wallet: IconWallet,
   Predicate: IconSwitch3,
+  Message: IconMessageCode,
 } as const;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

packages/app/src/systems/Transaction/component/TxInput/TxInput.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  GROUPED_INPUT_ASSET,
+  GROUPED_INPUT_ASSET_UNKNOWN,
+  GROUPED_INPUT_CONTRACT,
+  GROUPED_INPUT_MESSAGE,
+} from '../../__mocks__/tx';
+
+import { TxInput } from './TxInput';
+
+const meta: Meta<typeof TxInput> = {
+  title: 'Transaction/TxInput',
+  component: TxInput,
+};
+
+export default meta;
+type Story = StoryObj<typeof TxInput>;
+
+export const Asset: Story = {
+  render: () => <TxInput className="w-[500px]" input={GROUPED_INPUT_ASSET} />,
+};
+
+export const AssetUnknown: Story = {
+  render: () => (
+    <TxInput className="w-[500px]" input={GROUPED_INPUT_ASSET_UNKNOWN} />
+  ),
+};
+
+export const Contract: Story = {
+  render: () => (
+    <TxInput className="w-[500px]" input={GROUPED_INPUT_CONTRACT} />
+  ),
+};
+
+export const Message: Story = {
+  render: () => <TxInput className="w-[500px]" input={GROUPED_INPUT_MESSAGE} />,
+};