Integrating Notifi React card
To see the source code, look at the Notifi SDK.
note
You will need a card config to use the Notifi React Card, which can be created in the Admin Portal. Follow the guide here to create a card config.
Installation
npm
npm install @notifi-network/notifi-react
yarn
yarn add @notifi-network/notifi-react
Import the following CSS file into your component to get baseline styling:
import '@notifi-network/notifi-react/dist/index.css';
Design Guidelines
We have design recommendations on how to best present the UI to your dapp users. Check them out here: Figma.
Tips
-
Embed the bell icon by the wallet login section:
-
There should be a state for the bell icon when connected/not connected: If not connected, the bell icon should be hidden.
-
Make sure that there is enough contrast between color selections.
-
Styling should be consistent with your current UI.