working lint with fixes

Author: jonesmac

eslint.config.mjs

@@ -0,0 +1,40 @@
+import {
+  typescriptConfig,
+  unicornConfig,
+  workspacesConfig,
+  rulesConfig,
+  sonarConfig,
+  importConfig,
+} from '@xylabs/eslint-config-flat'
+
+export default [
+  { ignores: ['.yarn', '**/dist', '**/build', 'scripts', 'node_modules', '*.cjs', '*.mjs'] },
+  { files: ['**/*.ts'] },
+  unicornConfig,
+  workspacesConfig,
+  rulesConfig,
+  typescriptConfig,
+  sonarConfig,
+  {
+    ...importConfig,
+    rules: {
+      ...importConfig.rules,
+      'import-x/no-internal-modules': ['warn', { allow: ['*/index.ts'] }],
+      'import-x/no-unresolved': ['off'],
+      'import-x/no-relative-packages': ['error'],
+      'import-x/no-self-import': ['error'],
+      'import-x/no-useless-path-segments': ['warn'],
+      'sonarjs/prefer-single-boolean-return': ['off'],
+    },
+  },
+  {
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_', varsIgnorePattern: '^_', ignoreRestSiblings: true,
+        },
+      ],
+    },
+  },
+]

package.json

@@ -22,6 +22,7 @@
   "type": "module",
   "scripts": {
     "build": "vite build --mode production",
+    "lint": "eslint",
     "package-build": "npm run build",
     "serve": "npm run build && npx serve ./build",
     "start-cli": "npx xl1 --logLevel='warn'",
@@ -49,8 +50,11 @@
     "@types/react": "~19.1.10",
     "@types/react-dom": "~19.1.7",
     "@vitejs/plugin-react-swc": "~4.0.0",
+    "@xylabs/eslint-config-flat": "~7.1.7",
     "@xylabs/tsconfig-react": "~7.1.3",
     "@xyo-network/xl1-cli": "^1.12.6",
+    "eslint": "~9.33.0",
+    "eslint-import-resolver-typescript": "~4.4.4",
     "dotenv": "~17.2.1",
     "npm-check-updates": "~18.0.2",
     "typescript": "~5.9.2",

src/Sample.tsx

@@ -1,14 +1,16 @@
 import {
   Alert,
-  Container, Stack
+  Container, Stack,
 } from '@mui/material'
 import { assertEx } from '@xylabs/assert'
 import type { Hash } from '@xylabs/hex'
 import { isHash } from '@xylabs/hex'
 import { isUndefined } from '@xylabs/typeof'
 import { useState } from 'react'
 
-import { Onboarding, SubmitTransactionButton, TxConfirmedAlert, WelcomeStack } from './components/index.ts'
+import {
+  Onboarding, SubmitTransactionButton, TxConfirmedAlert, WelcomeStack,
+} from './components/index.ts'
 import { buildSamplePayloads } from './helpers/index.ts'
 import { useDefaultGateway } from './hooks/index.ts'
 
@@ -44,7 +46,7 @@ export const XL1BrowserSample = () => {
         {error ? <Alert severity="error">{error.message}</Alert> : null}
         <WelcomeStack />
         <Onboarding />
-        <SubmitTransactionButton onClick={() => void submitTransaction()} disabled={isUndefined(gateway)}>Submit Transaction</SubmitTransactionButton>  
+        <SubmitTransactionButton onClick={() => void submitTransaction()} disabled={isUndefined(gateway)}>Submit Transaction</SubmitTransactionButton>
         <TxConfirmedAlert hash={confirmed} />
       </Stack>
 

src/components/Onboarding.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
+
 import { useOnBoarding } from '../hooks/index.ts'
-import { WalletAlerts } from './alerts/index.ts'
-import { RunProducerAlerts } from './alerts/index.ts'
+import { RunProducerAlerts, WalletAlerts } from './alerts/index.ts'
 
 export const Onboarding: React.FC = () => {
   const {
@@ -10,11 +10,13 @@ export const Onboarding: React.FC = () => {
     walletIsNotInstalled,
   } = useOnBoarding()
 
-  return <>
-    {producerIsReachable ? <RunProducerAlerts.Found /> : <RunProducerAlerts.NotFound />}
-    {producerIsReachable && <RunProducerAlerts.CopyPhrase />}
-    {walletIsNotInstalled === true && <WalletAlerts.NotInstalled />}
-    {walletIsInstalled === true && <WalletAlerts.Installed />}
-    {walletIsInstalled === true && <WalletAlerts.Setup />}
-  </>
-}
+  return (
+    <>
+      {producerIsReachable ? <RunProducerAlerts.Found /> : <RunProducerAlerts.NotFound />}
+      {producerIsReachable && <RunProducerAlerts.CopyPhrase />}
+      {walletIsNotInstalled === true && <WalletAlerts.NotInstalled />}
+      {walletIsInstalled === true && <WalletAlerts.Installed />}
+      {walletIsInstalled === true && <WalletAlerts.Setup />}
+    </>
+  )
+}

src/components/WelcomeStack.tsx

@@ -1,4 +1,6 @@
-import { Stack, StackProps, Typography } from "@mui/material";
+import type { StackProps } from '@mui/material'
+import { Stack, Typography } from '@mui/material'
+
 // eslint-disable-next-line import-x/no-internal-modules
 import Xl13DLogo from '../images/XL1_3D_Token_Mainnet.svg'
 
@@ -12,4 +14,4 @@ export const WelcomeStack: React.FC<StackProps> = (props) => {
       <Typography variant="subtitle1">This is a sample page for adding payloads to the XL1 chain for the browser environment.</Typography>
     </Stack>
   )
-}
+}

src/components/alerts/TxConfirmedAlert.tsx

@@ -8,15 +8,17 @@ export interface TxConfirmedAlertProps extends AlertProps {
 }
 
 export const TxConfirmedAlert: React.FC<TxConfirmedAlertProps> = ({ hash, ...props }) => {
-  return hash ? (
-    <Alert severity="success" {...props}>
-      <AlertTitle>Transaction successfully confirmed!</AlertTitle>
-      See your local
-      {' '}
-      <Link href={`https://explore.xyo.network/xl1/local/transaction/${hash}`} target="_blank">transaction</Link>
-      {' '}
-      through our Blockchain Explorer.
-      {' '}
-    </Alert>
-  ) : null
+  return hash
+    ? (
+        <Alert severity="success" {...props}>
+          <AlertTitle>Transaction successfully confirmed!</AlertTitle>
+          See your local
+          {' '}
+          <Link href={`https://explore.xyo.network/xl1/local/transaction/${hash}`} target="_blank">transaction</Link>
+          {' '}
+          through our Blockchain Explorer.
+          {' '}
+        </Alert>
+      )
+    : null
 }

src/components/buttons/SubmitTransactionButton.tsx

@@ -1,10 +1,14 @@
-import { Button, ButtonProps } from "@mui/material";
-import { useDefaultGateway, useOnBoarding } from "../../hooks/index.ts";
-import { isUndefined } from "@xylabs/typeof";
+import type { ButtonProps } from '@mui/material'
+import { Button } from '@mui/material'
+import { isUndefined } from '@xylabs/typeof'
+
+import { useDefaultGateway, useOnBoarding } from '../../hooks/index.ts'
 
 export const SubmitTransactionButton: React.FC<ButtonProps> = (props) => {
   const { gateway } = useDefaultGateway()
   const { showSubmitTransaction } = useOnBoarding()
 
-  return showSubmitTransaction ? <Button variant="contained" disabled={isUndefined(gateway)} sx={{ alignSelf: 'start' }} {...props}>Submit Transaction</Button> : null
-}
+  return showSubmitTransaction
+    ? <Button variant="contained" disabled={isUndefined(gateway)} sx={{ alignSelf: 'start' }} {...props}>Submit Transaction</Button>
+    : null
+}

src/components/buttons/index.ts

@@ -1 +1 @@
-export * from './SubmitTransactionButton.tsx'
+export * from './SubmitTransactionButton.tsx'

src/components/index.ts

@@ -1,4 +1,4 @@
 export * from './alerts/index.ts'
+export * from './buttons/index.ts'
 export * from './Onboarding.tsx'
 export * from './WelcomeStack.tsx'
-export * from './buttons/index.ts'

src/helpers/buildSamplePayloads.ts

@@ -1,6 +1,6 @@
-import { Id } from "@xyo-network/id-payload-plugin"
-import { PayloadBuilder } from "@xyo-network/payload-builder"
-import { HashPayload } from "@xyo-network/xl1-protocol"
+import type { Id } from '@xyo-network/id-payload-plugin'
+import { PayloadBuilder } from '@xyo-network/payload-builder'
+import type { HashPayload } from '@xyo-network/xl1-protocol'
 
 export const buildSamplePayloads = async () => {
   // Data to store off-chain
@@ -15,4 +15,4 @@ export const buildSamplePayloads = async () => {
     hash: await PayloadBuilder.hash(offChainPayloads[index]),
   })))
   return { offChainPayloads, hashPayloads }
-}
+}