fix(deps): update dependency react-toastify to v10

[renovate[bot]]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
react-toastify	^9.0.5 -> ^10.0.0

---

Release Notes

fkhadra/react-toastify (react-toastify)

### [`v10.0.1`](https://togithub.com/fkhadra/react-toastify/compare/v10.0.0...v10.0.1) [Compare Source](https://togithub.com/fkhadra/react-toastify/compare/v10.0.0...v10.0.1) ### [`v10.0.0`](https://togithub.com/fkhadra/react-toastify/releases/tag/v10.0.0) [Compare Source](https://togithub.com/fkhadra/react-toastify/compare/v9.1.3...v10.0.0) ### What is new in v10 The code for this release has been sitting on my computer for almost a year but with so many things going on it was hard for me to release it but it's finally there! A good chunk of the code has been rewritten, a bunch of bugs have been fixed. I've also addressed the oldest open feature request (Jan 10, 2020) 😆.  #### Features ##### Play or pause the timer programmatically By default, when the notification is hovered or the window loses focus, the timer for dismissing the notification is paused. There are many other situations where you might want to pause the timer as well. For instance, consider wanting to toggle the notification timer based on the document's visibility. This wasn't possible to do previously, but with the new API, it's a breeze. ```tsx document.addEventListener("visibilitychange", () => { if (document.visibilityState === "visible") { toast.play({ id: "123" }); } else { toast.pause({ id: "123" }); } }); ``` More usages: - Play/pause all toasts ```tsx toast.play() toast.pause() ``` - Play/pause all toasts for a given container ```tsx toast.play({ containerId: "123" }) toast.pause({ containerId: "123" }) ``` - Play/pause toast that has a given id regardless the container ```tsx toast.play({ id: "123" }) toast.pause({ id: "123" }) ``` - Play/pause toast that has a given id for a specific container ```tsx toast.play({ id: "123", containerId: "12" }) toast.pause({ id: "123", containerId: "12" }) ``` ##### Remove notification from a given container This feature was the oldest one in the backlog (Jan 10, 2020). I don't know if the user who requested this feature is still using the library but I bet thanks to her/him, a bunch of user will be happy. - Remove all toasts that belongs to a given container ```tsx toast.dismiss({ container: "123" }) ``` - Remove toast that has a given id for a specific container ```tsx toast.dismiss({ id: "123", containerId: "12" }) ``` The method is backward compatible. `toast.dismis()` and `toast.dismiss("123")` work as usual. ##### Check if a notification is active for a given container You can limit the call to `toast.isActive` to a specific container. ```tsx toast.isActive(toastId, containerId) ``` ##### Better typescript inference when using data When providing data to the notification, the content of data is correctly infered by typescript. ```tsx toast((props) => { return

{props.data.foo}

},{ data: { foo: "bar" } }) ``` ##### IconProps now receives isLoading When providing your own logic to display the icon, you now have access to the `isLoading` field. ```tsx const CustomIcon = props => { if (props.isLoading) return ; switch (props.type) { case 'info': return ; case 'success': return ; case 'error': return ; case 'warning': return ; default: return undefined; } }; ``` ##### Stacked Notifications The initial release for this feature was planned right after the release of the v9. The code was their but things happen in life and I wasn't able to focus on the project that much. That being said, I'm glad to finally release it.  To enable it, add the `stacked` prop to the `ToastContainer`. I also suggest to disable the progress bar :). ```tsx ``` ##### Progress bar background trail The progress bar leaves a background trail by default. The opacity of the trail can be customized by overriding the css variable `--toastify-color-progress-bgo`. ```css // disable the trail --toastify-color-progress-bgo: 0; // increase the opacity --toastify-color-progress-bgo: .8; ``` #### Breaking Changes ##### React 18 is the minimum required version, but... The minimun version of react required is now `18`. This version has been released for more than a year. Nextjs, react-query already did this move as well, so I believe it's a good time for the library as well. That being said, I know that not all code base have the chance to be running on the latest version of react, so I'm considering to have a package for `v17` if the demand is high enough. ##### The enableMultiContainer prop has been removed The `enableMultiContainer` props is not needed anymore and has been removed. As long as your container has an `id` assigned then you are good to go. ```tsx // before // now 🎉 ``` ##### The toast.position and toast.type constants have been removed The `toast.POSITION` and `toast.TYPE` constants have been removed. Typescript came a long way since the initial release of the library. The ecosystem has matured to a point where such constants are not needed anymore. ##### Change for some defaults The `closeOnClick` prop is now `false` by default instead of `true`. When using the library I keep on turning this feature off which make me realize that it was not a good default in the first place. To turn it on do as follow ```tsx ``` The `draggable` prop is set to `touch` by default instead of `true`. Which means that, by default, notifications are only draggable on touch devices (most likely mobiles and tablets). While swipping a notification on mobile feels natural, dragging on desktop is not. If you want your notification to be draggable regardless of the device type just set draggable to `true`. ```tsx ``` #### Bug Fixes and Chore - Remove defaultProps on ToastContainer as it's deprecated [#​970](https://togithub.com/fkhadra/react-toastify/issues/970) - Fix className from ToastOptions overrides the toastClassName in ToastContainer props instead of appending [#​956](https://togithub.com/fkhadra/react-toastify/issues/956) - Rewrite tests using component testing [#​923](https://togithub.com/fkhadra/react-toastify/issues/923) - Memory leak while using multiple containers are goes on in v9.1.1 [#​910](https://togithub.com/fkhadra/react-toastify/issues/910) - React toast is showing multiple time. [#​744](https://togithub.com/fkhadra/react-toastify/issues/744) - onClose event trigger 2 times. [#​741](https://togithub.com/fkhadra/react-toastify/issues/741) ### [`v9.1.3`](https://togithub.com/fkhadra/react-toastify/releases/tag/v9.1.3) [Compare Source](https://togithub.com/fkhadra/react-toastify/compare/v9.1.2...v9.1.3) ### Release note - Add support for RSC (next app router): [#​951](https://togithub.com/fkhadra/react-toastify/issues/951) - Partially address `Toast is undefined || Uncaught TypeError: Cannot read properties of undefined (reading 'content')` [#​858](https://togithub.com/fkhadra/react-toastify/issues/858) [#​952](https://togithub.com/fkhadra/react-toastify/issues/952) - Bump dependencies ### [`v9.1.2`](https://togithub.com/fkhadra/react-toastify/releases/tag/v9.1.2) [Compare Source](https://togithub.com/fkhadra/react-toastify/compare/v9.1.1...v9.1.2) ### Release notes Mainly bug fixes as I'm working on the next major release. #### 🕷Bugfixes - fix resetting options [#​921](https://togithub.com/fkhadra/react-toastify/issues/921) [#​920](https://togithub.com/fkhadra/react-toastify/issues/920) - fix autoClose on update [#​918](https://togithub.com/fkhadra/react-toastify/issues/918) - fix invalid CSS translate [#​925](https://togithub.com/fkhadra/react-toastify/issues/925) ### [`v9.1.1`](https://togithub.com/fkhadra/react-toastify/compare/v9.1.0...v9.1.1) [Compare Source](https://togithub.com/fkhadra/react-toastify/compare/v9.1.0...v9.1.1) ### [`v9.1.0`](https://togithub.com/fkhadra/react-toastify/releases/tag/v9.1.0) [Compare Source](https://togithub.com/fkhadra/react-toastify/compare/v9.0.8...v9.1.0) ### Release notes #### 🚀 Features - `toast.promise` let you type `data` for each state. This is useful when rendering something based on the response. For example: ```tsx interface Success { username: string } interface Error { err: string } toast.promise(myPromise, { success: { render({ data }) { return data.username; } }, error: { render({ data }) { return data.err; } } }) ``` - `toast.update` accepts a generic as well to specify the data type ```tsx interface TData { username: string } toast.update(id, { data: payload, render({ data }) { return `hello ${data.username}` } }) ``` #### 🕷 Bugfixes - fix progress countdown stops on mobile [#​580](https://togithub.com/fkhadra/react-toastify/issues/580) - prevent clash with ios native gesture [#​397](https://togithub.com/fkhadra/react-toastify/issues/397) - fix toast when a word is too long [#​864](https://togithub.com/fkhadra/react-toastify/issues/864) - fix missing types declarations in exports [#​843](https://togithub.com/fkhadra/react-toastify/issues/843) - fix `toast.done` not dismissing toast [#​853](https://togithub.com/fkhadra/react-toastify/issues/853) - fix cursor when close on click is false [#​839](https://togithub.com/fkhadra/react-toastify/issues/839) #### 🚨 Deprecated API Added deprecation notice for the API below. They will be removed in the next major release | API | Why | Alternative | |-----|-----|-------------| | `onClick` | Not used that much, it's increasing the API surface for nothing | Can easily be implemented in userland. Just render a react component and attach the handler to it. `toast(

hello

)` | | `onOpen` | Does not play well with `useEffect` behavior in react18 (runs twice in dev mode) see [#​741](https://togithub.com/fkhadra/react-toastify/issues/741) | A better approach is to use `toast.onChange` see https://fkhadra.github.io/react-toastify/listen-for-changes/ | | `onClose` | Does not play well with `useEffect` behavior in react18 (runs twice in dev mode) see [#​741](https://togithub.com/fkhadra/react-toastify/issues/741) | A better approach is to use `toast.onChange` see https://fkhadra.github.io/react-toastify/listen-for-changes/ | | `toast.POSITION` | Reduce bundle size :) | Thanks to typescript, we now have autocomplete | | `toast.TYPE` | Reduce bundle size :) | Thanks to typescript, we now have autocomplete | #### ⚙️ Chore - bump dependencies - refactor internal ### [`v9.0.8`](https://togithub.com/fkhadra/react-toastify/releases/tag/v9.0.8) [Compare Source](https://togithub.com/fkhadra/react-toastify/compare/v9.0.7...v9.0.8) ### Release notes #### 🐞Bugfixes - fix draggable in strict mode [#​752](https://togithub.com/fkhadra/react-toastify/issues/752) - fix sass import [#​771](https://togithub.com/fkhadra/react-toastify/issues/771) - fix progress bar overflow for WebKit browser(safari, ios...) [#​791](https://togithub.com/fkhadra/react-toastify/issues/791) - fix dismissed toasts while the container is unmounted still appear when the container is mounted [#​811](https://togithub.com/fkhadra/react-toastify/issues/811) - fix AutoClose doesn't work on update [#​810](https://togithub.com/fkhadra/react-toastify/issues/810) [#​782](https://togithub.com/fkhadra/react-toastify/issues/782) [#​720](https://togithub.com/fkhadra/react-toastify/issues/720) #### Chore - master branch renamed to main 💖 ### [`v9.0.7`](https://togithub.com/fkhadra/react-toastify/releases/tag/v9.0.7) [Compare Source](https://togithub.com/fkhadra/react-toastify/compare/v9.0.6...v9.0.7) ### Release note #### Bugfix - fix memory leak when multiple containers are used [#​772](https://togithub.com/fkhadra/react-toastify/issues/772), thanks to [@​roblotter](https://togithub.com/roblotter) #### Chore - build artifacts are no longer minified. This was causing issues with some bundlers like vitejs [#​797](https://togithub.com/fkhadra/react-toastify/issues/797) ### [`v9.0.6`](https://togithub.com/fkhadra/react-toastify/releases/tag/v9.0.6) [Compare Source](https://togithub.com/fkhadra/react-toastify/compare/v9.0.5...v9.0.6) ### Release note #### Bugfix - fix missing generic in `useNotificationCenter` typing [#​796](https://togithub.com/fkhadra/react-toastify/issues/796)

---

Configuration

📅 Schedule: Branch creation - "before 4am on Monday" (UTC), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• [ ] If you want to rebase/retry this PR, check this box

---

This PR has been generated by Mend Renovate. View repository job log here.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
staked-celo-web-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 18, 2024 1:29pm

[socket-security[bot]]

Updated dependencies detected. Learn more about Socket for GitHub ↗︎

Packages	Version	New capabilities	Transitives	Size	Publisher
react-toastify	9.0.5...10.0.3	None	+1/-0	415 kB	sniphpet

[github-actions[bot]]

📦 Next.js Bundle Analysis for staked-celo-app

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
global	512.03 KB (🟡 +138 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

One Page Changed Size

The following page changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (350 KB)
/connect	1.41 KB	513.45 KB	146.70% (+/- <0.01%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

[renovate[bot]]

Edited/Blocked Notification

Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR.

You can manually request rebase by checking the rebase/retry box above.

⚠ Warning: custom changes will be lost.

[github-actions[bot]]

📦 Next.js Bundle Analysis for staked-celo-app

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
global	512.03 KB (🟡 +138 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

One Page Changed Size

The following page changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (350 KB)
/connect	1.41 KB	513.45 KB	146.70% (+/- <0.01%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

[github-actions[bot]]

📦 Next.js Bundle Analysis for staked-celo-app

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
global	512.03 KB (🟡 +138 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

One Page Changed Size

The following page changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (350 KB)
/connect	1.41 KB	513.45 KB	146.70% (+/- <0.01%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.