search

web3ui / web3uikit

Lightweight reusable Web3 UI components for dapps.
https://web3uikit.com
MIT License
1.71k stars 265 forks source link

dispatch function from useNotification is not working correctly #764

Closed sadityakumar9211 closed 2 years ago

sadityakumar9211 commented 2 years ago

I have used the useNotification() hook for notifications. The notification position is not working correctly in the deployed application. https://medichain.vercel.app/ The Github repository of this deployed site is: https://github.com/sadityakumar9211/medichain-nextjs

In the localhost, it is coming in the correct position in the bottom-right, but in the deployed file, it is coming on top of the header and shifting all the content down for the time it remains there.

ghost commented 2 years ago

has nothing to do with the uikit itself, you have to setup styled components to work with next js. you can follow this repo next js styled components

sadityakumar9211 commented 2 years ago

Hey @iuliannov I am not getting how using the styled component will help resolve my issue. Can you please explain a little more.

ghost commented 2 years ago

The components from web3uikit are built with styled-components, which doesnt work out of the box with nextjs. You have to setup nextjs to support styled-components so you can build your app successfully. Its easy to do, check next.config.js and _document.tsx. These are the only thing you have to add to make it work

AbhinavMV commented 2 years ago

@sadityakumar9211 let us know if this fixes the issue. TY for using the kit 😄

TY @iuliannov for your help 🙌🏻

AbhinavMV commented 2 years ago

Hey @sadityakumar9211 I am closing the issue since one of our community members was able to solve this same issue by the above solution by @iuliannov 🥳 Ping us on moralis web3uikit channel on discord if you are still facing this issue 🙌🏻 TY for using the kit 😄