@notifi-network/notifi-react-wallet-target-plugin

@notifi-network/notifi-react-wallet-target-plugin

A plugin for @notifi-network/notifi-react that enables advanced wallet-based notification targets.

This package provides the NotifiContextProviderWithWalletTargetPlugin context component, allowing seamless integration of Wallet Target functionality into Notifi’s React context system. By utilizing the toggleTargetAvailability.wallet prop within NotifiTargetContext, you can dynamically enable or disable wallet-based targeting at runtime and leverage the plugin’s capabilities.

Important Note

This package is a plugin for @notifi-network/notifi-react and cannot be used independently. Ensure that you have @notifi-network/notifi-react installed before integrating this plugin.

Key Benefits

• Maintains the same interface style as notifi-react, ensuring minimal changes when integrating.
• Modular design allows developers to opt-in only if Wallet Target functionality is needed.
• Works alongside the primary NotifiContextProvider, adding a specialized layer for detecting and handling Wallet Target contexts.
• Provides flexibility: use the core package for standard notification flows or extend with this plugin for wallet-based targeting.

Usage (with @notifi-network/notifi-react)

Below is a minimal example demonstrating how to replace the standard Notifi provider with the plugin-based provider:

import { NotifiContextProviderWithWalletTargetPlugin } from '@notifi-network/notifi-react-wallet-target-plugin';
import React from 'react';

function App() {
  return (
    <NotifiContextProviderWithWalletTargetPlugin
    /* Same props as NotifiContextProvider */
    >
      {/* Include Notifi features like NotifiCardModal or custom forms here */}
      {children}
    </NotifiContextProviderWithWalletTargetPlugin>
  );
}

export default App;

When toggleTargetAvailability.wallet is set to true, the plugin enables wallet-specific notification targets (e.g., Coinbase). To utilize this functionality, ensure your app is wrapped with NotifiContextProviderWithWalletTargetPlugin instead of the standard NotifiContextProvider when wallet targeting is required.

Additional Configuration

This plugin is powered by @xmtp-react-sdk, which requires requires specific configuration to handle the wasm file. The following configuration is required in nextjs (the recommended framework).

• Nextjs version 14.2.0 or above

  nextConfig = {
    experimental: {
      serverComponentsExternalPackages: [
        '@xmtp/user-preferences-bindings-wasm',
      ],
    },
  };
  
  // ...other configs
  

• Nextjs version below 14.2.0

  It requires manual copy of the wasm file to the server chunk folder. We will need to grab the user_preferences_bindings_wasm_bg.wasm file from @xmtp/user-preferences-bindings-wasm npm package: Code > dist > bundler > user_preferences_bindings_wasm_bg.wasm. And put it in the public/wasm directory. Then add the following configuration in the next.config.js file.

  nextConfig = {
    ...nextConfig,
    webpack: (config) => {
      config.plugins.push(
        new CopyPlugin({
          patterns: [{ from: 'public/wasm', to: './server/chunks' }],
        }),
      );
      return config;
    },
  };
  // ...other configs
  

The projects might encounter the following error if the above configuration is not set up properly.

Error: ENOENT: no such file or directory, open '/path/to/project/.next/server/vendor-chunks/user_preferences_bindings_wasm_bg.wasm'

Reference:

• official xmpt example
• Notifi React Example config

Advanced Usage

Instead of using NotifiContextProviderWithWalletTargetPlugin, which wraps NotifiContextProvider, you can use NotifiWalletTargetContext independently. This is useful when integrating NotifiWalletTargetContext into a different part of your app or pairing it with another context provider.

import { NotifiTargetContextProvider } from '@notifi-network/notifi-react';
import { NotifiWalletTargetContext } from '@notifi-network/notifi-react-wallet-target-plugin';

// ... other imports

function App() {
  return (
    <NotifiWalletTargetContext {...props}>
      <NotifiTargetContextProvider toggleTargetAvailability={{ wallet: true }}>
        {/* Add Notifi components like NotifiCardModal or custom forms here */}
        {children}
      </NotifiTargetContextProvider>
    </NotifiWalletTargetContext>
  );
}

This approach gives you more flexibility in managing notification contexts within your application.