@notifi-network/notifi-graphql

About Notifi

Notifi is a cross-blockchain notification service that allows dapps to send notifications to their users.

Application owners (Developers) can push notifications to their users in various ways by leveraging Notifi protocol.

• Community messages: broadcast messages to the on-chain community by using Community Manager of Notifi Admin Portal.

• On-chain events: By using Notifi on-chain parser, Dapps can send notifications to their users based on on-chain events.

Register a new account on Notifi Admin Portal and start sending notifications to your users.

For more detailed info to get started with Notifi, please check the official documentation.

About Notifi SDK TS

This monorepo contains the following packages which are used to interact with Notifi services.

• @notifi-network/notifi-frontend-client
• @notifi-network/notifi-react
• @notifi-network/notifi-node
• @notifi-network/notifi-graphql
• @notifi-network/notifi-web-push-service-worker

Notifi Frontend Client

@notifi-network/notifi-frontend-client package is designed for frontend (application) use. It enables interaction with Notifi services by instantiating a NotifiFrontendClient object, which provides essential client methods.

• Framework-agnostic: This package can be integrated into any frontend application, regardless of the framework.
• Implementation reference: See @notifi-network/notifi-react for an example implementation.
• Type documentation: Notifi Frontend Client

Notifi React

@notifi-network/notifi-react package is a React library that provides:

• Prebuilt UI Component: An out-of-the-box UI card modal component, NotifiCardModal enabling developers to seamlessly integrate Notifi services without managing underlying implementation details.
• Custom UI Flexibility: A set of context methods that allow developers to build custom UI components to interact with Notifi services.

• Framework-specific: Designed exclusively for React based applications .
• Example implementation: Refer to the @notifi-network/notifi-react-example-v2 package for a practical example.
• Built on: This package implements the @notifi-network/notifi-frontend-client package.
• Type documentation: Notifi React

Notifi Node

@notifi-network/notifi-node package is designed for Node.js server-side use. It allows DApp owners to implement off-chain log parsing logic and send notifications to their users.

Example implementation: Refer to the @notifi-network/notifi-node-sample package for a practical example. Type documentation: Notifi Node

Notifi GraphQL

@notifi-network/notifi-graphql, powered by graphql-codegen, provides a GraphQL client with the necessary types and queries to interact with Notifi services. It is especially useful for developers looking to build custom services (SDKs) on top of Notifi's infrastructure.

Implementation reference: See @notifi-network/notifi-frontend-client for an example implementation. Type documentation: Notifi GraphQL

Notifi Web Push Service Worker (Coming soon)

@notifi-network/notifi-web-push-service-worker package introduces a Service Worker that handles the browser push notification subscription. This is useful for the cross platform applications which adopt the Progressive Web App (PWA) architecture.

Respective example packages: @notifi-network/notifi-pwa-example

Build with Notifi (for repository maintainers or contributors)

Prerequisites

• Node.js (v18.x or higher with corresponding npm version)

• NVM (Node Version Manager) is recommended to manage the node versions. Run nvm use to adopt supported node version (defined in .nvmrc).

• prettier configured in your IDE: in your vscode settings.json, add the following configuration. If you are using other IDEs, please make sure the .prettierrc file is adopted by the IDE.

  // ... other settings
  "prettier.configPath": "./.prettierrc"
  // ... other settings
  Copy

Contribute to the repository (for contributors)

Before contributing, please make sure the following steps are followed.

Code formatting

Before pushing the change, ensure the formatting is correct by running the following command

# on the root directory
npm run format
Copy

!IMPORTANT NOTE: A push may be rejected if the code formatting is incorrect, as this repository enforces a pre-push Git hook to maintain consistent formatting. If your IDE does not automatically use "prettier.configPath": "./.prettierrc" , please run npm run format and commit the changes before pushing.

Build packages

After making changes, build all packages to ensure updates are reflected in the compiled files:

# on the root directory
npm run build
Copy

Unit tests (Jest) & Component tests (Cypress)

We can run tests for all packages in the monorepo using npm run test. However, if you've only modified specific packages, you may prefer to test only those. In that case, please refer to the following details.

1. Component Tests for @notifi-network/notifi-react (Cypress):

   For changes in the @notifi-network/notifi-react package, run Cypress tests to verify UI component functionality. Execute these tests locally against the notifi-react-example-v2 package:
   

   # Run all tests
   npm run test
   
   # Open Cypress test runner
   npx lerna --scope=@notifi-network/notifi-react-example-v2 run cypress:open
   
   Copy

   Detailed scenarios can be found in the Cypress test scripts

   IMPORTANT: If you modify test scripts, please run them multiple times (at least 5–10) to confirm stability: for i in {1..10}; do npm run test; done; .

   
   

2. Unit Tests for Other Packages (Jest): For non-UI packages, run Jest tests to verify functionality. Before testing, configure the .env file in packages/notifi-node/:

   • Copy .env.example to .env and populate necessary environment variables.
   • Run tests with npm run test:node && npm run test:frontend-client
   
   

Tips: Use lerna commands to run scripts for a specific package (npx lerna --scope=@notifi-network/<package-name> run <script-name>).

• Start the development server for notifi-react-example-v2: npx lerna --scope=@notifi-network/notifi-react-example-v2 run dev
• Open Cypress test runner for notifi-react-example-v2: npx lerna --scope=@notifi-network/notifi-react-example-v2 run cypress:open

Other conventions:

• Avoid leaving commented code in the codebase. If necessary, use the following guidelines:
  • For actionable items: // TODO: <your comment>
  • For code descriptions: /* <your comment> */

Publish packages to npm (for internal maintainers)

1. Publish canary version to npm The following command will publish the all packages with canary version to npm. It will prompt you to select the version with suffix -alpha.x.

   IMPORTANT: Run npm run build before running the following command.
   

   # on the root directory
   npx lerna publish --canary --force-publish
   Copy

   
   

2. Publish official version to npm

   The following command will publish the updated packages to npm. It will prompt you to select the version for each package. IMPORTANT: Run npm run build before running the following command.
   

   # on the root directory
   npx lerna publish
   Copy

Type documentation

notifi-sdk-ts utilizes typedoc to generate the type documentation. We want to ensure that the documentation is always up-to-date by regenerating the documentation when the codebase is updated.

1. Run the command below to generate the updated typedoc.
   

   # on the root directory
   npm run docs
   Copy

2. To preview the generated documentation locally, run the following command.
   

   # on the root directory
   npm run serve-docs
   Copy

   
   

This will establish a local server by light-server to host the Type documentation page on http://localhost:4000.

Bundle size analysis

To analyze the bundle size of the Notifi packages, please run the following command:

# on the root directory
npx lerna --scope=@notifi-network/notifi-react-example-v2 run build:analyze
Copy

Advanced

We understand that not all scenarios can be solved with the current state of the SDK. When adding SDK features, we'd like to ensure we're building exactly what developers want. If you need to break out of the SDK features for more advanced interaction with Notifi, please see our Notifi GraphQL API that you can consume alongside the SDK.

Built With ❤️ and ...

• Lerna.js
• Cypress
• Nx
• React.js
• Next.js
• GraphQL-Codegen
• TypeDoc
• husky

(back to top)