Skip to content

Commit

Permalink
chore: upgrade nextjs, typescript, eslint and other toolings (#146)
Browse files Browse the repository at this point in the history
Fixes #141 

- Upgrade from Next 13 to 15
- Upgrade `eslint` and `typescript` and other toolings
- Change `eslint` file to `eslint.config.mjs`
- Removed unused `error` variables in `catch`
- Removed `swcMinify` in `next.js.config`, since it comes by default
(https://github.com/vercel/next.js/blob/3d5aa278e6e0f8a5330f21a8d2f9fe305c1e36a1/docs/03-architecture/nextjs-compiler.mdx?plain=1#L243-L254)

Copy from [warp-ui
#311](hyperlane-xyz/hyperlane-warp-ui-template#311)
  • Loading branch information
Xaroz authored Dec 10, 2024
1 parent 4103c31 commit 54b3938
Show file tree
Hide file tree
Showing 17 changed files with 2,200 additions and 1,009 deletions.
7 changes: 0 additions & 7 deletions .eslintignore

This file was deleted.

46 changes: 0 additions & 46 deletions .eslintrc

This file was deleted.

88 changes: 88 additions & 0 deletions eslint.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import { FlatCompat } from '@eslint/eslintrc';
import js from '@eslint/js';
import typescriptEslint from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';
import globals from 'globals';
import path from 'node:path';
import { fileURLToPath } from 'node:url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
recommendedConfig: js.configs.recommended,
allConfig: js.configs.all,
});

export default [
{
ignores: [
'**/node_modules',
'**/dist',
'**/build',
'**/coverage',
'**/postcss.config.js',
'**/next.config.js',
'**/tailwind.config.js',
],
},
...compat.extends(
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:@tanstack/eslint-plugin-query/recommended',
'next',
'next/core-web-vitals',
'prettier',
),
{
plugins: {
'@typescript-eslint': typescriptEslint,
},

languageOptions: {
globals: {
...globals.node,
...globals.browser,
},

parser: tsParser,
ecmaVersion: 12,
sourceType: 'module',

parserOptions: {
project: './tsconfig.json',
},
},

rules: {
camelcase: ['error'],
'guard-for-in': ['error'],
'import/no-cycle': ['error'],
'import/no-self-import': ['error'],
'no-console': ['warn'],
'no-eval': ['error'],
'no-ex-assign': ['error'],
'no-extra-boolean-cast': ['error'],
'no-constant-condition': ['off'],
'no-multiple-empty-lines': ['error'],
'jsx-a11y/alt-text': ['off'],

'@typescript-eslint/ban-ts-comment': ['off'],
'@typescript-eslint/explicit-module-boundary-types': ['off'],
'@typescript-eslint/no-explicit-any': ['off'],
'@typescript-eslint/no-non-null-assertion': ['off'],
'@typescript-eslint/no-require-imports': ['warn'],

'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
caughtErrorsIgnorePattern: '^_',
},
],

'@next/next/no-img-element': ['off'],
},
},
];
2 changes: 1 addition & 1 deletion next-env.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
13 changes: 6 additions & 7 deletions next.config.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/** @type {import('next').NextConfig} */

const { version } = require('./package.json')
const { version } = require('./package.json');

const isDev = process.env.NODE_ENV !== 'production'
const isDev = process.env.NODE_ENV !== 'production';

const securityHeaders = [
{
Expand All @@ -27,7 +27,7 @@ const securityHeaders = [
isDev ? " 'unsafe-eval'" : ''
}; connect-src *; img-src 'self' data: https://raw.githubusercontent.com; style-src 'self' 'unsafe-inline'; font-src 'self' data:; base-uri 'self'; form-action 'self'`,
},
]
];

const nextConfig = {
async headers() {
Expand All @@ -36,15 +36,14 @@ const nextConfig = {
source: '/(.*)',
headers: securityHeaders,
},
]
];
},

env: {
NEXT_PUBLIC_VERSION: version,
},

reactStrictMode: true,
swcMinify: true,
}
};

module.exports = nextConfig
module.exports = nextConfig;
38 changes: 19 additions & 19 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,18 @@
"@hyperlane-xyz/sdk": "7.1.0",
"@hyperlane-xyz/utils": "7.1.0",
"@hyperlane-xyz/widgets": "7.1.0",
"@tanstack/react-query": "^5.35.5",
"@tanstack/react-query": "^5.62.3",
"bignumber.js": "^9.1.2",
"buffer": "^6.0.3",
"clsx": "^2.1.1",
"ethers": "^5.7.2",
"formik": "^2.2.9",
"formik": "^2.4.6",
"graphql": "^16.6.0",
"next": "^13.5.7",
"next": "^15.0.4",
"nextjs-cors": "^2.1.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-toastify": "^9.1.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-toastify": "^10.0.6",
"react-tooltip": "^5.26.3",
"urql": "^3.0.3",
"yaml": "^2.4.5",
Expand All @@ -30,23 +30,23 @@
"devDependencies": {
"@tanstack/eslint-plugin-query": "^5.28.6",
"@types/jest": "^29.5.3",
"@types/node": "^18.11.18",
"@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10",
"@typescript-eslint/eslint-plugin": "^6.7.0",
"@typescript-eslint/parser": "^6.7.0",
"autoprefixer": "^10.4.15",
"eslint": "^8.41.0",
"eslint-config-next": "^13.4.19",
"eslint-config-prettier": "^8.8.0",
"@types/node": "^22.10.1",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@typescript-eslint/eslint-plugin": "^8.13.0",
"@typescript-eslint/parser": "^8.13.0",
"autoprefixer": "^10.4.20",
"eslint": "^9.16.0",
"eslint-config-next": "^15.0.4",
"eslint-config-prettier": "^9.1.0",
"jest": "^29.6.3",
"postcss": "^8.4.21",
"postcss": "^8.4.49",
"prettier": "^3.2.5",
"prettier-plugin-organize-imports": "^4.1.0",
"prettier-plugin-tailwindcss": "^0.6.8",
"tailwindcss": "^3.4.13",
"ts-node": "^10.9.1",
"typescript": "^5.5.4"
"tailwindcss": "^3.4.16",
"ts-node": "^10.9.2",
"typescript": "^5.7.2"
},
"homepage": "https://www.hyperlane.xyz",
"license": "Apache-2.0",
Expand Down
22 changes: 11 additions & 11 deletions src/features/debugger/debugMessage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
import { BigNumber, utils as ethersUtils, providers } from 'ethers';

import {
IInterchainSecurityModule__factory,
IMailbox__factory,
IMessageRecipient__factory,
IMultisigIsm__factory,
InterchainGasPaymaster__factory,
InterchainGasPaymaster__factory as InterchainGasPaymasterFactory,
IInterchainSecurityModule__factory as InterchainSecurityModuleFactory,
IMailbox__factory as MailboxFactory,
IMessageRecipient__factory as MessageRecipientFactory,
IMultisigIsm__factory as MultisigIsmFactory,
} from '@hyperlane-xyz/core';
import { IRegistry } from '@hyperlane-xyz/registry';
import { ChainMap, ChainMetadata, MAILBOX_VERSION, MultiProvider } from '@hyperlane-xyz/sdk';
Expand Down Expand Up @@ -146,7 +146,7 @@ async function debugMessageDelivery(
senderBytes: string,
body: string,
) {
const recipientContract = IMessageRecipient__factory.connect(recipient, destProvider);
const recipientContract = MessageRecipientFactory.connect(recipient, destProvider);
const handleCalldata = recipientContract.interface.encodeFunctionData('handle', [
originDomain,
senderBytes,
Expand Down Expand Up @@ -206,23 +206,23 @@ async function checkMultisigIsmEmpty(
destMailbox: Address,
destProvider: Provider,
) {
const mailbox = IMailbox__factory.connect(destMailbox, destProvider);
const mailbox = MailboxFactory.connect(destMailbox, destProvider);
const ismAddress = await mailbox.recipientIsm(recipientAddr);
if (!isValidAddress(ismAddress)) {
logger.error(
`Recipient ${recipientAddr} on mailbox ${destMailbox} does not have a valid ISM address: ${ismAddress}`,
);
throw new Error('Recipient ISM is not a valid address');
}
const ism = IInterchainSecurityModule__factory.connect(ismAddress, destProvider);
const ism = InterchainSecurityModuleFactory.connect(ismAddress, destProvider);
const moduleType = await ism.moduleType();

const ismDetails = { ismAddress, moduleType };
if (moduleType !== IsmModuleTypes.LEGACY_MULTISIG && moduleType !== IsmModuleTypes.MULTISIG) {
return { ismDetails };
}

const multisigIsm = IMultisigIsm__factory.connect(ismAddress, destProvider);
const multisigIsm = MultisigIsmFactory.connect(ismAddress, destProvider);
const [validators, threshold] = await multisigIsm.validatorsAndThreshold(messageBytes);

if (!validators?.length) {
Expand Down Expand Up @@ -298,7 +298,7 @@ async function tryCheckIgpGasFunded(
}

async function fetchGasPaymentEvents(provider: Provider, messageId: string) {
const igpInterface = InterchainGasPaymaster__factory.createInterface();
const igpInterface = InterchainGasPaymasterFactory.createInterface();
const paymentFragment = igpInterface.getEvent('GasPayment');
const paymentTopics = igpInterface.encodeFilterTopics(paymentFragment.name, [messageId]);
const paymentLogs = (await provider.getLogs({ topics: paymentTopics })) || [];
Expand Down Expand Up @@ -332,7 +332,7 @@ async function tryCheckBytecodeHandle(provider: Provider, recipientAddress: stri
try {
// scan bytecode for handle function selector
const bytecode = await provider.getCode(recipientAddress);
const msgRecipientInterface = IMessageRecipient__factory.createInterface();
const msgRecipientInterface = MessageRecipientFactory.createInterface();
const handleFunction = msgRecipientInterface.functions[HANDLE_FUNCTION_SIG];
const handleSignature = msgRecipientInterface.getSighash(handleFunction);
return bytecode.includes(strip0x(handleSignature));
Expand Down
4 changes: 2 additions & 2 deletions src/features/deliveryStatus/fetchDeliveryStatus.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { constants } from 'ethers';

import { IMailbox__factory } from '@hyperlane-xyz/core';
import { IMailbox__factory as MailboxFactory } from '@hyperlane-xyz/core';
import { IRegistry } from '@hyperlane-xyz/registry';
import { ChainMap, ChainMetadata, MultiProvider } from '@hyperlane-xyz/sdk';

Expand Down Expand Up @@ -91,7 +91,7 @@ async function checkIsMessageDelivered(
) {
const { msgId, destinationDomainId } = message;
const provider = multiProvider.getProvider(destinationDomainId);
const mailbox = IMailbox__factory.connect(mailboxAddr, provider);
const mailbox = MailboxFactory.connect(mailboxAddr, provider);

// Try finding logs first as they have more info
try {
Expand Down
4 changes: 2 additions & 2 deletions src/features/messages/ica.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
import { BigNumber, providers, utils } from 'ethers';
import { useMemo } from 'react';

import { InterchainAccountRouter__factory } from '@hyperlane-xyz/core';
import { InterchainAccountRouter__factory as InterchainAccountRouterFactory } from '@hyperlane-xyz/core';
import { eqAddress, isValidAddress } from '@hyperlane-xyz/utils';

import { useReadyMultiProvider } from '../../store';
Expand Down Expand Up @@ -83,7 +83,7 @@ export async function tryFetchIcaAddress(
if (!ICA_ADDRESS) return null;
logger.debug('Fetching Ica address', originDomainId, sender);

const icaContract = InterchainAccountRouter__factory.connect(ICA_ADDRESS, provider);
const icaContract = InterchainAccountRouterFactory.connect(ICA_ADDRESS, provider);
const icaAddress = await icaContract['getInterchainAccount(uint32,address)'](
originDomainId,
sender,
Expand Down
Loading

0 comments on commit 54b3938

Please sign in to comment.