feat: update prettify, eslint and tsconfig to use fuels packs (#858)

.changeset/config.json

@@ -14,7 +14,7 @@
   "access": "public",
   "baseBranch": "master",
   "updateInternalDependencies": "patch",
-  "ignore": ["docs", "asset-list", "@fuel-wallet/config"],
+  "ignore": ["docs", "asset-list"],
   "snapshot": {
     "useCalculatedVersion": true,
     "prereleaseTemplate": "{tag}-{commit}"

.changeset/rich-ligers-thank.md

@@ -0,0 +1,2 @@
+---
+---

.eslintrc

@@ -0,0 +1,12 @@
+{
+  "extends": ["plugin:@fuels/base"],
+  "rules": {
+    "import/prefer-default-export": "off",
+    "import/no-named-as-default": "off",
+    "import/export": "off",
+    "import/default": "off",
+    "no-console": "error",
+    "@typescript-eslint/no-empty-function": "off",
+    "jsx-a11y/alt-text": "off"
+  }
+}

.prettierrc

@@ -1,8 +1 @@
-{
-  "printWidth": 80,
-  "semi": true,
-  "tabWidth": 2,
-  "useTabs": false,
-  "singleQuote": true,
-  "bracketSpacing": true
-}
+"@fuels/prettier-config"

package.json

@@ -78,6 +78,9 @@
     "@babel/core": "^7.22.10",
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.2",
+    "@fuels/eslint-plugin": "0.0.9",
+    "@fuels/prettier-config": "0.0.9",
+    "@fuels/ts-config": "0.0.9",
     "@jest/types": "29.6.1",
     "@playwright/test": "^1.37.1",
     "@swc/core": "1.3.75",

packages/app/jest.config.ts

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import baseDefaultConfig from '@fuel-ui/test-utils/config';
 import type { JestConfigWithTsJest } from 'ts-jest';
 import { defaultsESM as tsjPreset } from 'ts-jest/presets';

packages/app/package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@fontsource/source-code-pro": "^5.0.8",
-    "@fuel-ts/wallet-manager": "0.56.1",
+    "@fuel-ts/wallet-manager": "0.57.0",
     "@fuel-ui/config": "0.17.0",
     "@fuel-ui/css": "0.19.1",
     "@fuel-ui/icons": "0.19.1",
@@ -46,7 +46,7 @@
     "events": "^3.3.0",
     "fake-indexeddb": "^4.0.2",
     "framer-motion": "^10.16.1",
-    "fuels": "0.56.1",
+    "fuels": "0.57.0",
     "graphql": "^16.8.0",
     "graphql-request": "^6.1.0",
     "graphql-tag": "^2.12.6",

packages/app/src/App.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
+import { Providers } from '~/systems/Core';
 
 import { IS_DEVELOPMENT, IS_TEST } from './config';
 import { getRoutes } from './routes';
 
-import { Providers } from '~/systems/Core';
-
 const ThrowError = React.lazy(
   () => import('./systems/Error/components/ThrowError')
 );

packages/app/src/routes.tsx

@@ -1,4 +1,9 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
+import { assetRoutes } from '~/systems/Asset';
+import { PrivateRoute, PublicRoute } from '~/systems/Core';
+import { Pages } from '~/systems/Core/types';
+import { homeRoutes } from '~/systems/Home';
+import { signUpRoutes } from '~/systems/SignUp';
 
 import { IS_CRX, IS_CRX_POPUP } from './config';
 import { CRXPrivateRoute, CRXPublicRoute } from './systems/CRX/components';
@@ -8,12 +13,6 @@ import { settingsRoutes } from './systems/Settings';
 import { transactionRoutes } from './systems/Transaction/routes';
 import { UnlockGuard } from './systems/Unlock';
 
-import { assetRoutes } from '~/systems/Asset';
-import { PrivateRoute, PublicRoute } from '~/systems/Core';
-import { Pages } from '~/systems/Core/types';
-import { homeRoutes } from '~/systems/Home';
-import { signUpRoutes } from '~/systems/SignUp';
-
 const walletRoutes = (
   <>
     {homeRoutes}

packages/app/src/systems/Account/__mocks__/accounts.tsx

@@ -1,11 +1,10 @@
 import { WalletManager } from '@fuel-ts/wallet-manager';
 import { Wallet } from 'fuels';
+import { db, Storage } from '~/systems/Core';
 
 import { AccountService } from '../services';
 import { IndexedDBStorage } from '../utils';
 
-import { db, Storage } from '~/systems/Core';
-
 const wallet1 = Wallet.generate();
 const wallet2 = Wallet.generate();
 const wallet3 = Wallet.generate();

packages/app/src/systems/Account/components/AccountForm/AccountForm.tsx

@@ -1,9 +1,8 @@
 import { Box, HelperIcon, Input } from '@fuel-ui/react';
+import { ControlledField } from '~/systems/Core';
 
 import type { UseAccountFormReturn } from '../../hooks/useAccountForm';
 
-import { ControlledField } from '~/systems/Core';
-
 export type AccountFormProps = {
   isLoading?: boolean;
   form: UseAccountFormReturn;

packages/app/src/systems/Account/components/AccountInfo/AccountInfo.stories.tsx

@@ -1,10 +1,9 @@
 import { Box } from '@fuel-ui/react';
 import type { StoryFn, Meta } from '@storybook/react';
+import { MOCK_ACCOUNTS } from '~/systems/Account';
 
 import { AccountInfo } from './AccountInfo';
 
-import { MOCK_ACCOUNTS } from '~/systems/Account';
-
 export default {
   component: AccountInfo,
   title: 'DApp/Components/AccountInfo',

packages/app/src/systems/Account/components/AccountInfo/AccountInfo.test.tsx

@@ -1,10 +1,9 @@
 import { render, screen, testA11y, waitFor } from '@fuel-ui/test-utils';
-
-import { AccountInfo } from './AccountInfo';
-
 import { AccountService, MOCK_ACCOUNTS } from '~/systems/Account';
 import { shortAddress, TestWrapper } from '~/systems/Core';
 
+import { AccountInfo } from './AccountInfo';
+
 const PROPS = {
   account: MOCK_ACCOUNTS[0],
   headerText: 'Connect to',

packages/app/src/systems/Account/components/AccountInfo/AccountInfo.tsx

@@ -1,11 +1,10 @@
 import { cssObj } from '@fuel-ui/css';
 import { Card } from '@fuel-ui/react';
 import type { Account } from '@fuel-wallet/types';
+import { AccountItem } from '~/systems/Account';
 
 import { AccountInfoLoader } from './AccountInfoLoader';
 
-import { AccountItem } from '~/systems/Account';
-
 export type AccountInfoProps = {
   headerText: string;
   account?: Account;

packages/app/src/systems/Account/components/AccountInfo/AccountInfoLoader.tsx

@@ -1,6 +1,5 @@
 import type { ContentLoaderProps } from '@fuel-ui/react';
 import { Card, ContentLoader } from '@fuel-ui/react';
-
 import { AccountItemLoader } from '~/systems/Account/components/AccountItem/AccountItemLoader';
 
 export const AccountInfoLoader = (props: ContentLoaderProps) => (

packages/app/src/systems/Account/components/AccountItem/AccountItem.test.tsx

@@ -1,11 +1,10 @@
 import { render, screen, testA11y } from '@fuel-ui/test-utils';
+import { shortAddress } from '~/systems/Core';
 
 import { MOCK_ACCOUNTS } from '../../__mocks__';
 
 import { AccountItem } from './AccountItem';
 
-import { shortAddress } from '~/systems/Core';
-
 const ACCOUNT = MOCK_ACCOUNTS[0];
 const SHORT_ADDRESS = shortAddress(ACCOUNT.address);
 

packages/app/src/systems/Account/components/AccountItem/AccountItem.tsx

@@ -12,11 +12,10 @@ import {
 } from '@fuel-ui/react';
 import type { Account } from '@fuel-wallet/types';
 import type { FC } from 'react';
+import { FuelAddress } from '~/systems/Account';
 
 import { AccountItemLoader } from './AccountItemLoader';
 
-import { FuelAddress } from '~/systems/Account';
-
 export type AccountItemProps = {
   css?: ThemeUtilsCSS;
   account: Account;

packages/app/src/systems/Account/components/AccountList/AccountList.test.tsx

@@ -1,11 +1,10 @@
 import { render, screen, testA11y } from '@fuel-ui/test-utils';
+import { store } from '~/store';
 
 import { MOCK_ACCOUNTS } from '../../__mocks__';
 
 import { AccountList } from './AccountList';
 
-import { store } from '~/store';
-
 describe('AccountList', () => {
   it('a11y', async () => {
     await testA11y(

packages/app/src/systems/Account/components/BalanceWidget/BalanceWidget.test.tsx

@@ -1,14 +1,13 @@
 import { screen, testA11y } from '@fuel-ui/test-utils';
 import { fireEvent } from '@storybook/testing-library';
 import { act } from 'react-dom/test-utils';
+import { shortAddress, TestWrapper } from '~/systems/Core';
+import { renderWithProvider } from '~/systems/Core/__tests__/utils';
 
 import { MOCK_ACCOUNTS } from '../../__mocks__';
 
 import { BalanceWidget } from './BalanceWidget';
 
-import { shortAddress, TestWrapper } from '~/systems/Core';
-import { renderWithProvider } from '~/systems/Core/__tests__/utils';
-
 const ACCOUNT = {
   ...MOCK_ACCOUNTS[0],
   balance: '4999989994',

packages/app/src/systems/Account/components/BalanceWidget/BalanceWidget.tsx

@@ -2,15 +2,14 @@ import { cssObj } from '@fuel-ui/css';
 import { Avatar, Box, Button, Heading, Icon, Text } from '@fuel-ui/react';
 import type { Account } from '@fuel-wallet/types';
 import type { ReactNode } from 'react';
+import { FuelAddress } from '~/systems/Account';
+import type { Maybe } from '~/systems/Core';
+import { AmountVisibility, VisibilityButton } from '~/systems/Core';
 
 import { useAccounts } from '../../hooks';
 
 import { BalanceWidgetLoader } from './BalanceWidgetLoader';
 
-import { FuelAddress } from '~/systems/Account';
-import type { Maybe } from '~/systems/Core';
-import { AmountVisibility, VisibilityButton } from '~/systems/Core';
-
 type BalanceWidgetWrapperProps = {
   top: ReactNode;
   bottom: ReactNode;

packages/app/src/systems/Account/components/EthAddress/EthAddress.tsx

@@ -2,7 +2,6 @@ import type { ThemeUtilsCSS } from '@fuel-ui/css';
 import { cssObj } from '@fuel-ui/css';
 import { Copyable, Box, Text, Tooltip } from '@fuel-ui/react';
 import { bn } from 'fuels';
-
 import { isValidEthAddress, shortAddress } from '~/systems/Core';
 
 export type EthAddressProps = {

packages/app/src/systems/Account/components/FuelAddress/FuelAddress.tsx

@@ -2,7 +2,6 @@ import type { ThemeUtilsCSS } from '@fuel-ui/css';
 import { cssObj } from '@fuel-ui/css';
 import { Box, Copyable, Text, Tooltip } from '@fuel-ui/react';
 import { Address, isB256, isBech32 } from 'fuels';
-
 import { shortAddress } from '~/systems/Core';
 
 export type AddressProps = {

packages/app/src/systems/Account/components/ImportAccountForm/ImportAccountForm.tsx

@@ -1,9 +1,8 @@
 import { Box, HelperIcon, Input } from '@fuel-ui/react';
+import { ControlledField } from '~/systems/Core';
 
 import type { UseImportAccountFormReturn } from '../../hooks/useImportAccountForm';
 
-import { ControlledField } from '~/systems/Core';
-
 export type ImportAccountFormProps = {
   isLoading?: boolean;
   form: UseImportAccountFormReturn;

packages/app/src/systems/Account/events.tsx

@@ -1,5 +1,4 @@
 import type { Account } from '@fuel-wallet/types';
-
 import type { Store } from '~/store';
 import { Services } from '~/store';
 

packages/app/src/systems/Account/hooks/useAccountForm.ts

@@ -1,14 +1,12 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
 import type { Account } from '@fuel-wallet/types';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import * as yup from 'yup';
+import type { Maybe } from '~/systems/Core';
 
 import { useAccountFormName } from './useAccountFormName';
 
-import type { Maybe } from '~/systems/Core';
-
 export type AccountFormValues = {
   name: string;
 };

packages/app/src/systems/Account/hooks/useAccounts.tsx

@@ -1,13 +1,12 @@
 import type { Asset } from '@fuel-wallet/types';
 import { bn } from 'fuels';
 import { useEffect, useRef } from 'react';
-
-import type { AccountsMachineState } from '../machines';
-
 import { store, Services } from '~/store';
 import { useAssets } from '~/systems/Asset';
 import { useOverlay } from '~/systems/Overlay';
 
+import type { AccountsMachineState } from '../machines';
+
 enum AccountStatus {
   idle = 'idle',
   loading = 'loading',

packages/app/src/systems/Account/hooks/useEditAccount.tsx

@@ -1,11 +1,10 @@
 import { useMachine, useSelector } from '@xstate/react';
+import type { AccountInputs } from '~/systems/Account';
+import { useOverlay } from '~/systems/Overlay';
 
 import type { EditAccountMachineState } from '../machines';
 import { editAccountMachine } from '../machines';
 
-import type { AccountInputs } from '~/systems/Account';
-import { useOverlay } from '~/systems/Overlay';
-
 const selectors = {
   account: (state: EditAccountMachineState) => state.context?.account,
   isLoading: (state: EditAccountMachineState) => state.hasTag('loading'),

packages/app/src/systems/Account/hooks/useExportAccount.tsx

@@ -1,5 +1,4 @@
 import { useMachine, useSelector } from '@xstate/react';
-
 import type { ExportAccountMachineState } from '~/systems/Account';
 import { exportAccountMachine } from '~/systems/Account';
 import { useOverlay } from '~/systems/Overlay';

packages/app/src/systems/Account/hooks/useImportAccount.tsx

@@ -1,10 +1,9 @@
 import { useMachine, useSelector } from '@xstate/react';
+import type { AccountInputs } from '~/systems/Account';
 
 import type { ImportAccountMachineState } from '../machines';
 import { importAccountMachine } from '../machines';
 
-import type { AccountInputs } from '~/systems/Account';
-
 const selectors = {
   isLoading: (state: ImportAccountMachineState) => state.hasTag('loading'),
 };

packages/app/src/systems/Account/hooks/useImportAccountForm.ts

@@ -3,11 +3,10 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { isB256 } from 'fuels';
 import { useForm } from 'react-hook-form';
 import * as yup from 'yup';
+import type { Maybe } from '~/systems/Core';
 
 import { useAccountFormName } from './useAccountFormName';
 
-import type { Maybe } from '~/systems/Core';
-
 export type ImportAccountFormValues = {
   privateKey: string;
   name: string;

packages/app/src/systems/Account/machines/accountsMachine.test.ts

@@ -1,5 +1,7 @@
 import { bn } from 'fuels';
 import { interpret } from 'xstate';
+import { db, Storage } from '~/systems/Core';
+import { expectStateMatch } from '~/systems/Core/__tests__/utils';
 
 import { MOCK_ACCOUNTS, createMockAccount } from '../__mocks__';
 import { AccountService } from '../services';
@@ -10,9 +12,6 @@ import type {
 } from './accountsMachine';
 import { accountsMachine } from './accountsMachine';
 
-import { db, Storage } from '~/systems/Core';
-import { expectStateMatch } from '~/systems/Core/__tests__/utils';
-
 const MOCK_ACCOUNT = {
   ...MOCK_ACCOUNTS[0],
   balance: bn(0),