Upgrade Next to v15, Typescript to 5.6, and other deps

next-env.d.ts

@@ -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.

package.json

@@ -4,7 +4,7 @@
   "version": "5.1.0",
   "author": "J M Rossy",
   "dependencies": {
-    "@chakra-ui/next-js": "^2.2.0",
+    "@chakra-ui/next-js": "^2.4.2",
     "@chakra-ui/react": "^2.8.2",
     "@cosmjs/cosmwasm-stargate": "^0.32.4",
     "@cosmjs/stargate": "^0.32.4",
@@ -14,9 +14,9 @@
     "@cosmos-kit/leap": "^2.12.2",
     "@cosmos-kit/react": "^2.18.0",
     "@drift-labs/snap-wallet-adapter": "^0.3.0",
-    "@emotion/react": "^11.13.0",
+    "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@headlessui/react": "^1.7.14",
+    "@headlessui/react": "^2.2.0",
     "@hyperlane-xyz/registry": "5.0.0",
     "@hyperlane-xyz/sdk": "5.6.2",
     "@hyperlane-xyz/utils": "5.6.2",
@@ -26,53 +26,54 @@
     "@metamask/post-message-stream": "6.1.2",
     "@metamask/providers": "10.2.1",
     "@rainbow-me/rainbowkit": "1.3.0",
-    "@sentry/nextjs": "^7.118.0",
+    "@sentry/nextjs": "^8.37.1",
     "@solana/spl-token": "^0.3.8",
     "@solana/wallet-adapter-base": "^0.9.22",
     "@solana/wallet-adapter-react": "^0.15.32",
     "@solana/wallet-adapter-react-ui": "^0.9.31",
     "@solana/wallet-adapter-wallets": "^0.19.16",
     "@solana/web3.js": "^1.77.0",
-    "@tanstack/react-query": "^4.29.7",
-    "@vercel/analytics": "^1.1.1",
-    "bignumber.js": "^9.1.1",
+    "@tanstack/react-query": "^5.59.19",
+    "@vercel/analytics": "^1.3.2",
+    "@vercel/functions": "^1.5.0",
+    "bignumber.js": "^9.1.2",
     "buffer": "^6.0.3",
     "cosmjs-types": "^0.9.0",
-    "formik": "^2.4.5",
+    "formik": "^2.4.6",
     "framer-motion": "^10.16.4",
-    "next": "^13.5.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-toastify": "^9.1.3",
+    "next": "^15.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-toastify": "^10.0.6",
     "viem": "1.20.0",
     "wagmi": "^1.4.12",
-    "zod": "^3.21.4",
-    "zustand": "^4.3.9"
+    "zod": "3.21.4",
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^14.2.5",
+    "@next/bundle-analyzer": "^15.0.2",
     "@tanstack/eslint-plugin-query": "^5.28.6",
-    "@types/jest": "^29.5.3",
+    "@types/jest": "^29.5.14",
     "@types/node": "^18.11.18",
-    "@types/react": "^18.2.7",
-    "@types/react-dom": "^18.2.4",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.49.0",
-    "eslint-config-next": "^13.4.3",
+    "eslint-config-next": "^15.0.2",
     "eslint-config-prettier": "^8.8.0",
-    "jest": "^29.6.3",
+    "jest": "^29.7.0",
     "jest-transform-yaml": "^1.1.2",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.47",
     "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.3.3",
-    "yaml": "^2.3.4",
-    "yaml-loader": "^0.8.0"
+    "tailwindcss": "^3.4.14",
+    "ts-node": "^10.9.2",
+    "typescript": "5.6.3",
+    "yaml": "^2.6.0",
+    "yaml-loader": "^0.8.1"
   },
   "homepage": "https://www.hyperlane.xyz",
   "license": "Apache-2.0",
@@ -97,6 +98,7 @@
   "resolutions": {
     "@solana/web3.js": "^1.78.4",
     "axios": "0.27.2",
+    "bignumber": "9.1.2",
     "bn.js": "^5.2",
     "cosmjs-types": "0.9",
     "ethers": "^5.7",

src/features/transfer/TransfersDetailsModal.tsx

@@ -196,9 +196,7 @@ export function TransfersDetailsModal({
         <div className="flex flex-col items-center justify-center py-4">
           <Spinner />
           <div
-            className={`mt-5 text-center text-sm ${
-              status === TransferStatus.Failed ? 'text-red-600' : 'text-gray-600'
-            }`}
+            className={`mt-5 text-center text-sm ${isFailed ? 'text-red-600' : 'text-gray-600'}`}
           >
             {statusDescription}
           </div>

src/features/transfer/maxAmount.ts

@@ -21,7 +21,7 @@ export function useFetchMaxAmount() {
   const mutation = useMutation({
     mutationFn: (params: FetchMaxParams) => fetchMaxAmount(params),
   });
-  return { fetchMaxAmount: mutation.mutateAsync, isLoading: mutation.isLoading };
+  return { fetchMaxAmount: mutation.mutateAsync, isLoading: mutation.isPending };
 }
 
 async function fetchMaxAmount({ accounts, balance, destination, origin }: FetchMaxParams) {

src/middleware.ts

@@ -1,3 +1,4 @@
+import { geolocation } from '@vercel/functions';
 import { NextRequest, NextResponse } from 'next/server';
 
 export const config = {
@@ -44,8 +45,7 @@ const BLOCKED_REGIONS = [
 ];
 
 export function middleware(req: NextRequest) {
-  const country = req.geo?.country;
-  const region = req.geo?.region;
+  const { country, region } = geolocation(req);
 
   if (country && BLOCKED_COUNTRIES.includes(country)) {
     return NextResponse.redirect(new URL('/blocked', req.url));

src/pages/_app.tsx

@@ -1,10 +1,10 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Analytics } from '@vercel/analytics/react';
 import type { AppProps } from 'next/app';
-import { ToastContainer, Zoom, toast } from 'react-toastify';
+import { ToastContainer, Zoom } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import 'src/vendor/inpage-metamask';
-import 'src/vendor/polyfill';
+import '../vendor/inpage-metamask';
+import '../vendor/polyfill';
 
 import '@hyperlane-xyz/widgets/styles.css';
 
@@ -48,11 +48,7 @@ export default function App({ Component, pageProps }: AppProps) {
                     <Component {...pageProps} />
                     <Analytics />
                   </AppLayout>
-                  <ToastContainer
-                    transition={Zoom}
-                    position={toast.POSITION.BOTTOM_RIGHT}
-                    limit={2}
-                  />
+                  <ToastContainer transition={Zoom} position="bottom-right" limit={2} />
                 </CosmosWalletContext>
               </SolanaWalletContext>
             </EvmWalletContext>