Upgrade Next to 13 and other deps

next.config.js

@@ -45,12 +45,6 @@ const nextConfig = {
 
   reactStrictMode: true,
   swcMinify: true,
-
-  experimental: {
-    images: {
-      allowFutureImage: true,
-    },
-  },
 }
 
 module.exports = nextConfig

package.json

@@ -6,37 +6,37 @@
   "dependencies": {
     "@hyperlane-xyz/sdk": "^0.5.3",
     "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28974b4e81129bfbe3cab76308b889032a6",
-    "@rainbow-me/rainbowkit": "^0.7.4",
+    "@rainbow-me/rainbowkit": "^0.8.0",
-    "@tanstack/react-query": "^4.16.1",
+    "@tanstack/react-query": "^4.18.0",
     "buffer": "^6.0.3",
-    "ethers": "^5.6.8",
+    "ethers": "^5.7.2",
     "formik": "^2.2.9",
     "graphql": "^16.6.0",
-    "next": "^12.3.1",
+    "next": "^13.0.5",
     "react": "^18.2.0",
     "react-accessible-dropdown-menu-hook": "^3.2.0",
     "react-dom": "^18.2.0",
     "react-toastify": "^9.1.1",
     "urql": "^3.0.3",
-    "wagmi": "^0.8.4",
+    "wagmi": "^0.8.8",
     "zustand": "^4.1.4"
   },
   "devDependencies": {
-    "@trivago/prettier-plugin-sort-imports": "^3.4.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.0.0",
     "@types/node": "^18.11.9",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.27.0",
+    "@typescript-eslint/parser": "^5.45.0",
-    "autoprefixer": "^10.4.12",
+    "autoprefixer": "^10.4.13",
-    "eslint": "^8.25.0",
+    "eslint": "^8.28.0",
-    "eslint-config-next": "^12.3.1",
+    "eslint-config-next": "^13.0.5",
     "eslint-config-prettier": "^8.5.0",
-    "postcss": "^8.4.18",
+    "postcss": "^8.4.19",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.0",
     "tailwindcss": "^3.2.4",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.3"
   },
   "homepage": "https://www.hyperlane.xyz",
   "license": "Apache-2.0",
@@ -56,5 +56,8 @@
     "start": "next start",
     "prettier": "prettier --write ./src"
   },
-  "types": "dist/src/index.d.ts"
+  "types": "dist/src/index.d.ts",
+  "resolutions": {
+    "ethers": "^5.7"
+  }
 }

src/components/buttons/CopyButton.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/future/image';
+import Image from 'next/image';
 import { useState } from 'react';
 
 import CheckmarkIcon from '../../images/icons/checkmark.svg';

src/components/buttons/IconButton.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/future/image';
+import Image from 'next/image';
 import { PropsWithChildren } from 'react';
 
 export interface IconButtonProps {

src/components/icons/ChainIcon.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/future/image';
+import Image from 'next/image';
 import { memo } from 'react';
 import { chain } from 'wagmi';
 

src/components/icons/ChainToChain.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/future/image';
+import Image from 'next/image';
 import { memo } from 'react';
 
 import ArrowRightIcon from '../../images/icons/arrow-right-short.svg';

src/components/icons/InterchainAccount.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/future/image';
+import Image from 'next/image';
 import { memo } from 'react';
 
 import ArrowRightIcon from '../../images/icons/arrow-right-short.svg';

src/components/nav/Footer.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/future/image';
+import Image from 'next/image';
 import Link from 'next/link';
 
 import { links } from '../../consts/links';
@@ -51,8 +51,8 @@ function FooterLink({ href, text }: { href: string; text: string }) {
 
   if (href[0] === '/') {
     return (
-      <Link href={href}>
+      <Link href={href} className={aClasses}>
-        <a className={aClasses}>{text}</a>
+        {text}
       </Link>
     );
   } else {

src/components/nav/Header.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/future/image';
+import Image from 'next/image';
 import Link from 'next/link';
 import useDropdownMenu from 'react-accessible-dropdown-menu-hook';
 

src/components/search/SearchBar.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/future/image';
+import Image from 'next/image';
 import { ChangeEvent } from 'react';
 
 import SearchIcon from '../../images/icons/search.svg';

src/components/search/SearchError.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/future/image';
+import Image from 'next/image';
 
 import BugIcon from '../../images/icons/bug.svg';
 import ErrorIcon from '../../images/icons/error-circle.svg';

src/components/search/SearchFilterBar.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/future/image';
+import Image from 'next/image';
 import { useState } from 'react';
 import useDropdownMenu from 'react-accessible-dropdown-menu-hook';
 import { Chain } from 'wagmi';

src/features/debugger/TxDebugger.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import Image from 'next/future/image';
+import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 

src/features/messages/MessageDetails.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/future/image';
+import Image from 'next/image';
 import { useCallback, useEffect, useMemo } from 'react';
 import { toast } from 'react-toastify';
 import { useQuery } from 'urql';

src/features/messages/cards/TimelineCard.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { BigNumber } from 'ethers';
-import Image from 'next/future/image';
+import Image from 'next/image';
 import { useEffect } from 'react';
 import { toast } from 'react-toastify';