feat: add TxScript component

.eslintrc.js

@@ -39,6 +39,18 @@ module.exports = {
       { prefer: 'type-imports', fixStyle: 'separate-type-imports' },
     ],
     'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
+    'import/order': [
+      'error',
+      {
+        groups: [
+          ['builtin', 'external', 'internal'],
+          ['parent'],
+          ['sibling', 'index'],
+        ],
+        'newlines-between': 'always',
+        alphabetize: { order: 'asc' },
+      },
+    ],
     'no-html-link-for-pages': 'off',
     'react-hooks/rules-of-hooks': 'off',
     'react/jsx-sort-props': [

package.json

@@ -34,11 +34,11 @@
     "lint": "run-s lint:check prettier:check",
     "lint:check": "eslint .",
     "lint:fix": "pnpm lint:check --fix",
-    "node:clean": "make -C ./docker clean",
-    "node:logs": "make -C ./docker logs",
-    "node:restart": "make -C ./docker restart",
     "node:start": "make -C ./docker start",
     "node:stop": "make -C ./docker stop",
+    "node:clean": "make -C ./docker clean",
+    "node:logs": "make -C ./docker logs",
+    "node:reset": "run-s node:stop node:clean node:start",
     "prepare": "husky install",
     "prettier:check": "prettier --check .",
     "prettier:format": "prettier --write .",
@@ -51,44 +51,44 @@
     "turbo:run": "./scripts/turbo.sh"
   },
   "dependencies": {
-    "@fuels/eslint-plugin": "^0.0.11",
-    "@fuels/jest": "^0.0.11",
-    "@fuels/prettier-config": "^0.0.11",
-    "@fuels/ts-config": "^0.0.11",
+    "@fuels/eslint-plugin": "^0.1.1",
+    "@fuels/jest": "^0.1.1",
+    "@fuels/prettier-config": "^0.1.1",
+    "@fuels/ts-config": "^0.1.1",
     "jest": "29.7.0",
-    "lint-staged": "14.0.1"
+    "lint-staged": "15.0.2"
   },
   "devDependencies": {
-    "@fuels/tsup-config": "^0.0.11",
-    "@next/eslint-plugin-next": "^13.5.3",
-    "@swc/core": "1.3.91",
+    "@fuels/tsup-config": "^0.1.1",
+    "@next/eslint-plugin-next": "^13.5.6",
+    "@swc/core": "1.3.93",
     "@swc/jest": "0.2.29",
-    "@types/jest": "29.5.5",
-    "@types/node": "20.8.2",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.7.4",
-    "eslint": "^8.50.0",
+    "@types/jest": "29.5.6",
+    "@types/node": "20.8.7",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
+    "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-node": "^0.3.9",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jest-dom": "^5.1.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^6.0.2",
+    "eslint-plugin-testing-library": "^6.1.0",
     "get-tsconfig": "4.7.2",
     "husky": "^8.0.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.3",
     "ts-node": "10.9.1",
     "tsup": "7.2.0",
-    "turbo": "^1.10.14",
+    "turbo": "^1.10.16",
     "typescript": "5.2.2",
     "updates": "^15.0.2",
-    "next": "13.5.3"
+    "next": "13.5.6"
   },
   "pnpm": {
     "peerDependencyRules": {

packages/app/.storybook/preview.tsx

@@ -2,14 +2,21 @@ import '@fontsource-variable/inter/slnt.css';
 import '@fuels/ui/styles.css';
 import '../src/app/globals.css';
 
+import React from 'react';
 import { withThemeDecorator } from 'storybook-addon-theme';
 import { Preview } from '@storybook/react';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import { Provider } from '../src/systems/Core/components/Provider';
+import { ReactNode } from 'react';
+
+function ThemeWrapper({ children }: { children: ReactNode }) {
+  const initTheme = localStorage.getItem('fuel-ui-theme') ?? 'dark';
+  return <Provider theme={initTheme}>{children}</Provider>;
+}
 
 const preview: Preview = {
-  decorators: [withThemeDecorator(Provider)],
+  decorators: [withThemeDecorator(ThemeWrapper)],
 
   parameters: {
     actions: {

packages/app/package.json

@@ -13,66 +13,67 @@
     "ts:check": "tsc --noEmit"
   },
   "dependencies": {
-    "@faker-js/faker": "8.1.0",
-    "@fontsource-variable/inter": "5.0.8",
+    "@faker-js/faker": "8.2.0",
+    "@fontsource-variable/inter": "5.0.14",
     "@fuel-explorer/graphql": "workspace:*",
-    "@fuel-ts/math": "0.60.0",
-    "@fuel-wallet/sdk": "0.13.0",
-    "@fuels/assets": "0.0.11",
+    "@fuel-ts/math": "0.63.0",
+    "@fuel-wallet/sdk": "0.13.3",
+    "@fuels/assets": "0.1.1",
     "@fuels/ui": "workspace:*",
-    "@tabler/icons-react": "2.38.0",
-    "@tanstack/react-query": "4.35.7",
+    "@tabler/icons-react": "2.39.0",
+    "@tanstack/react-query": "5.0.0",
     "clsx": "2.0.0",
     "csstype": "3.1.2",
     "dayjs": "1.11.10",
     "framer-motion": "10.16.4",
-    "fuels": "0.60.0",
+    "fuels": "0.63.0",
     "graphql": "16.8.1",
     "graphql-request": "6.1.0",
     "graphql-tag": "2.12.6",
-    "graphql-yoga": "4.0.5",
-    "next": "13.5.3",
+    "graphql-yoga": "5.0.0",
+    "next": "13.5.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-json-view-lite": "1.1.0",
     "tai64": "1.0.0",
     "tailwind-merge": "1.14.0",
     "tailwind-variants": "0.1.14",
-    "zod": "3.22.2",
+    "zod": "3.22.4",
     "zod-validation-error": "1.5.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.0",
-    "@storybook/addon-a11y": "^7.4.5",
-    "@storybook/addon-actions": "^7.4.5",
-    "@storybook/addon-essentials": "^7.4.5",
-    "@storybook/addon-interactions": "^7.4.5",
-    "@storybook/addon-links": "^7.4.5",
-    "@storybook/addon-storysource": "^7.4.5",
-    "@storybook/addon-viewport": "7.4.5",
-    "@storybook/addons": "^7.4.5",
-    "@storybook/nextjs": "^7.4.5",
-    "@storybook/react": "^7.4.5",
+    "@babel/core": "^7.23.2",
+    "@storybook/addon-a11y": "^7.5.1",
+    "@storybook/addon-actions": "^7.5.1",
+    "@storybook/addon-essentials": "^7.5.1",
+    "@storybook/addon-interactions": "^7.5.1",
+    "@storybook/addon-links": "^7.5.1",
+    "@storybook/addon-storysource": "^7.5.1",
+    "@storybook/addon-viewport": "7.5.1",
+    "@storybook/addons": "^7.5.1",
+    "@storybook/nextjs": "^7.5.1",
+    "@storybook/react": "^7.5.1",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/types": "^7.4.5",
+    "@storybook/types": "^7.5.1",
     "@svgr/webpack": "8.1.0",
     "@testing-library/dom": "9.3.3",
-    "@testing-library/jest-dom": "6.1.3",
-    "@types/node": "20.8.2",
-    "@types/react": "^18.2.24",
-    "@types/react-dom": "^18.2.8",
-    "@xstate/cli": "^0.5.2",
+    "@testing-library/jest-dom": "6.1.4",
+    "@types/node": "20.8.7",
+    "@types/react": "^18.2.30",
+    "@types/react-dom": "^18.2.14",
+    "@xstate/cli": "^0.5.7",
     "autoprefixer": "10.4.16",
     "postcss": "8.4.31",
     "postcss-import": "15.1.0",
     "radix-ui-themes-with-tailwind": "1.2.6",
-    "storybook": "^7.4.5",
+    "storybook": "^7.5.1",
     "storybook-addon-theme": "workspace:*",
     "tailwindcss": "3.3.3",
     "tailwindcss-animate": "1.0.7",
     "tailwindcss-radix": "2.8.0",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "5.2.2",
-    "vite": "^4.4.9",
+    "vite": "^4.5.0",
     "vite-tsconfig-paths": "^4.2.1"
   },
   "browser": {

packages/app/src/systems/Asset/hooks/useAsset.ts

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+import { findAssetById } from '~/systems/Core/utils/asset';
+
+export function useAsset(assetId?: string) {
+  return useMemo(() => {
+    if (!assetId) return null;
+    const found = findAssetById(assetId);
+    return {
+      assetId,
+      name: found?.name ?? 'Unknown Asset',
+      symbol: found?.symbol ?? null,
+      icon: found?.icon ?? null,
+    };
+  }, [assetId]);
+}

packages/app/src/systems/Core/components/EmptyCard/EmptyCard.tsx

@@ -4,24 +4,26 @@ import { tv } from 'tailwind-variants';
 
 import { ReactComponent as EmptySvg } from './empty.svg';
 
-export type EmptyCardProps = CardProps;
+export type EmptyCardProps = CardProps & { hideImage?: boolean };
 export type EmptyCardTitleProps = HeadingProps;
 export type EmptyCardDescriptionProps = TextProps;
 
 export const EmptyCardRoot = createComponent<EmptyCardProps, typeof Card>({
   id: 'EmptyCard',
-  render: (_, { children, className, ...props }) => {
+  render: (_, { children, className, hideImage, ...props }) => {
     const classes = styles({ className });
     return (
       <Card {...props} className={classes.root({ className })}>
-        <EmptySvg
-          width={80}
-          height={80}
-          viewBox="0 0 682.66 682.66"
-          className={classes.image({
-            className: '[&_path]:stroke-[8] text-muted',
-          })}
-        />
+        {!hideImage && (
+          <EmptySvg
+            width={80}
+            height={80}
+            viewBox="0 0 682.66 682.66"
+            className={classes.image({
+              className: '[&_path]:stroke-[8] text-muted',
+            })}
+          />
+        )}
         {children}
       </Card>
     );

packages/app/src/systems/Core/components/Layout/Layout.tsx

@@ -39,7 +39,7 @@ export function Layout({ children, hero }: LayoutProps) {
             >
               Bridge
             </Nav.MenuItem>
-            <Nav.MenuItem isActive asChild>
+            <Nav.MenuItem isActive>
               <Link href="/">Explorer</Link>
             </Nav.MenuItem>
             <Nav.MenuItem

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

@@ -0,0 +1,14 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { resolveIconPath, assets } from '@fuels/assets';
+
+export const ASSET_LIST = resolveIconPath('/assets', assets);
+
+export function findAssetById(assetId?: string) {
+  return (
+    ASSET_LIST.find((asset) => {
+      const network = asset.networks?.find((val) => val.type === 'fuel');
+      const id = network ? (network as any).assetId : null;
+      return id === assetId;
+    }) ?? null
+  );
+}

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

@@ -4,7 +4,6 @@ import {
   GroupedOutputType,
   mocks,
 } from '@fuel-explorer/graphql';
-import { assets } from '@fuels/assets';
 import { dayjs } from '~/systems/Core/utils/dayjs';
 
 const date = dayjs().subtract(1, 'day');
@@ -21,7 +20,7 @@ function input(typename: any) {
 
 export const GROUPED_INPUT_ASSET = mocks.aGroupedInput({
   type: GroupedInputType.InputCoin,
-  assetId: assets[0].assetId,
+  assetId: '0x0000000000000000000000000000000000000000',
   inputs: [input('InputCoin'), input('InputCoin'), input('InputCoin')],
 });
 
@@ -45,7 +44,7 @@ function output(typename: any) {
 export const GROUPED_OUTPUT_ASSET = mocks.aGroupedOutput({
   type: GroupedOutputType.CoinOutput,
   outputs: [output('OutputCoin'), output('OutputCoin'), output('OutputCoin')],
-  assetId: assets[0].assetId,
+  assetId: '0x0000000000000000000000000000000000000000',
 });
 
 export const GROUPED_OUTPUT_ASSET_UNKNOWN = mocks.aGroupedOutput({
@@ -56,7 +55,7 @@ export const GROUPED_OUTPUT_ASSET_UNKNOWN = mocks.aGroupedOutput({
 export const GROUPED_OUTPUT_VARIABLE_OUTPUT = mocks.aGroupedOutput({
   type: GroupedOutputType.VariableOutput,
   outputs: [output('outputCoin'), output('outputCoin'), output('outputCoin')],
-  assetId: assets[0].assetId,
+  assetId: '0x0000000000000000000000000000000000000000',
 });
 
 export const GROUPED_OUTPUT_VARIABLE_OUTPUT_UNKNOWN = mocks.aGroupedOutput({
@@ -67,7 +66,7 @@ export const GROUPED_OUTPUT_VARIABLE_OUTPUT_UNKNOWN = mocks.aGroupedOutput({
 export const GROUPED_OUTPUT_CHANGE_OUTPUT = mocks.aGroupedOutput({
   type: GroupedOutputType.ChangeOutput,
   outputs: [output('outputCoin'), output('outputCoin'), output('outputCoin')],
-  assetId: assets[0].assetId,
+  assetId: '0x0000000000000000000000000000000000000000',
 });
 
 export const GROUPED_OUTPUT_CHANGE_OUTPUT_UNKNOWN = mocks.aGroupedOutput({

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

@@ -1,4 +1,3 @@
-import { assets } from '@fuels/assets';
 import type { Meta, StoryObj } from '@storybook/react';
 import { bn } from 'fuels';
 
@@ -17,7 +16,7 @@ export const Usage: Story = {
     <TxAssetItem
       amountIn={bn(1)}
       amountOut={bn(1)}
-      assetId={assets[0].assetId}
+      assetId="0x0000000000000000000000000000000000000000"
       className="w-[300px]"
     />
   ),

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

@@ -1,11 +1,11 @@
-import { resolveIconPath, assets } from '@fuels/assets';
 import type { CardProps } from '@fuels/ui';
 import { Text, Card, EntityItem, HStack, cx } from '@fuels/ui';
 import { IconArrowDown, IconArrowUp } from '@tabler/icons-react';
 import { bn } from 'fuels';
 import type { BN } from 'fuels';
 import Image from 'next/image';
 import { useMemo } from 'react';
+import { findAssetById } from '~/systems/Core/utils/asset';
 
 import { TxIcon } from '../TxIcon/TxIcon';
 
@@ -15,7 +15,6 @@ export type TxAssetItemProps = CardProps & {
   amountOut: BN;
 };
 
-const ASSET_LIST = resolveIconPath('/assets', assets);
 const ICON_SIZE = 40;
 
 export function TxAssetItem({
@@ -25,10 +24,7 @@ export function TxAssetItem({
   amountOut,
   ...props
 }: TxAssetItemProps) {
-  const asset = useMemo(
-    () => ASSET_LIST.find((i) => i.assetId === assetId),
-    [assetId],
-  );
+  const asset = useMemo(() => findAssetById(assetId), [assetId]);
   const assetName = asset?.name ?? 'Unknown';
   const assetSymbol = asset?.symbol ?? null;
   return (