Remove nprogress + use next-nprogress-bar (#943)

packages/nextjs/components/ScaffoldEthAppWithProviders.tsx

@@ -3,13 +3,13 @@
 import { useEffect, useState } from "react";
 import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowkit";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AppProgressBar as ProgressBar } from "next-nprogress-bar";
 import { useTheme } from "next-themes";
 import { Toaster } from "react-hot-toast";
 import { WagmiProvider } from "wagmi";
 import { Footer } from "~~/components/Footer";
 import { Header } from "~~/components/Header";
 import { BlockieAvatar } from "~~/components/scaffold-eth";
-import { ProgressBar } from "~~/components/scaffold-eth/ProgressBar";
 import { useInitializeNativeCurrencyPrice } from "~~/hooks/scaffold-eth";
 import { wagmiConfig } from "~~/services/web3/wagmiConfig";
 
@@ -48,7 +48,7 @@ export const ScaffoldEthAppWithProviders = ({ children }: { children: React.Reac
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-        <ProgressBar />
+        <ProgressBar height="3px" color="#2299dd" />
         <RainbowKitProvider
           avatar={BlockieAvatar}
           theme={mounted ? (isDarkMode ? darkTheme() : lightTheme()) : lightTheme()}

packages/nextjs/package.json

@@ -23,8 +23,8 @@
     "burner-connector": "^0.0.8",
     "daisyui": "4.12.10",
     "next": "^14.2.11",
+    "next-nprogress-bar": "^2.3.13",
     "next-themes": "^0.3.0",
-    "nprogress": "^0.2.0",
     "qrcode.react": "^3.1.0",
     "react": "^18.3.1",
     "react-copy-to-clipboard": "^5.1.0",
@@ -39,7 +39,6 @@
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/node": "^18.19.50",
-    "@types/nprogress": "^0",
     "@types/react": "^18.3.5",
     "@typescript-eslint/eslint-plugin": "^5.39.0",
     "abitype": "1.0.6",

yarn.lock

@@ -2235,7 +2235,6 @@ __metadata:
     "@tanstack/react-query": ^5.28.6
     "@trivago/prettier-plugin-sort-imports": ^4.1.1
     "@types/node": ^18.19.50
-    "@types/nprogress": ^0
     "@types/react": ^18.3.5
     "@typescript-eslint/eslint-plugin": ^5.39.0
     "@uniswap/sdk-core": ^4.0.1
@@ -2250,8 +2249,8 @@ __metadata:
     eslint-config-prettier: ^8.5.0
     eslint-plugin-prettier: ^4.2.1
     next: ^14.2.11
+    next-nprogress-bar: ^2.3.13
     next-themes: ^0.3.0
-    nprogress: ^0.2.0
     postcss: ^8.4.45
     prettier: ^2.8.4
     qrcode.react: ^3.1.0
@@ -2882,13 +2881,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/nprogress@npm:^0":
-  version: 0.2.1
-  resolution: "@types/nprogress@npm:0.2.1"
-  checksum: fe9db499f3d9cff90bad9f49336ff82ea444a51ca336a25ec401d18cc8fb12e546b622bdc11379491475c22cd4d9fb1195c805055cacb365627c667e52d618b1
-  languageName: node
-  linkType: hard
-
 "@types/pbkdf2@npm:^3.0.0":
   version: 3.1.0
   resolution: "@types/pbkdf2@npm:3.1.0"
@@ -10680,6 +10672,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"next-nprogress-bar@npm:^2.3.13":
+  version: 2.3.13
+  resolution: "next-nprogress-bar@npm:2.3.13"
+  dependencies:
+    nprogress: ^0.2.0
+  checksum: be217d4a28a4b8681f647b1baebae040949bb38824ae93ca83f11f037bc3e34c3ddae18a123878ebfda2eb6b7e42d9ae25468b23c2a80980aec6564101921d4d
+  languageName: node
+  linkType: hard
+
 "next-themes@npm:^0.3.0":
   version: 0.3.0
   resolution: "next-themes@npm:0.3.0"