From be5963458b8dc47cd252d66985f96155724aa8a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20S=C3=A1nchez?= Date: Thu, 19 Sep 2024 06:22:11 +0200 Subject: [PATCH] Remove nprogress + use next-nprogress-bar (#943) --- .../ScaffoldEthAppWithProviders.tsx | 4 +- .../components/scaffold-eth/ProgressBar.tsx | 73 ------------------- packages/nextjs/package.json | 3 +- yarn.lock | 19 ++--- 4 files changed, 13 insertions(+), 86 deletions(-) delete mode 100644 packages/nextjs/components/scaffold-eth/ProgressBar.tsx diff --git a/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx b/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx index f67c2f7b6..b3b54b392 100644 --- a/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx +++ b/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 ( - + - {` - #nprogress { - pointer-events: none; - } - #nprogress .bar { - background: ${color}; - position: fixed; - z-index: 99999; - top: 0; - left: 0; - width: 100%; - height: ${typeof height === `string` ? height : `${height}px`}; - } - /* Fancy blur effect */ - #nprogress .peg { - display: block; - position: absolute; - right: 0px; - width: 100px; - height: 100%; - box-shadow: 0 0 10px ${color}, 0 0 5px ${color}; - opacity: 1.0; - -webkit-transform: rotate(3deg) translate(0px, -4px); - -ms-transform: rotate(3deg) translate(0px, -4px); - transform: rotate(3deg) translate(0px, -4px); - } - `} - - ); - - useEffect(() => { - NProgress.configure({ showSpinner: false }); - - const handleAnchorClick = (event: MouseEvent) => { - const anchor = event.currentTarget as HTMLAnchorElement; - const targetUrl = anchor.href; - const currentUrl = location.href; - const isTargetBlank = anchor?.target === "_blank"; - if (targetUrl === currentUrl || isTargetBlank) return; - NProgress.start(); - }; - - const handleMutation: MutationCallback = () => { - const anchorElements = document.querySelectorAll("a"); - anchorElements.forEach(anchor => anchor.addEventListener("click", handleAnchorClick)); - }; - - const mutationObserver = new MutationObserver(handleMutation); - mutationObserver.observe(document, { childList: true, subtree: true }); - - window.history.pushState = new Proxy(window.history.pushState, { - apply: (target, thisArg, argArray: PushStateInput) => { - NProgress.done(); - return target.apply(thisArg, argArray); - }, - }); - }); - - return styles; -} diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json index 0cb349e29..e5d265f27 100644 --- a/packages/nextjs/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 2b222ea42..8b3f0e640 100644 --- a/yarn.lock +++ b/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"