Testing notifications overview

This section explores various ways by which you can test your notifications.

Push is an interoperable network which already have live integrations from Push Metamask snap, Unstoppable web / mobile app, Push dapp / mobile app / extension among other dapps, extensions and mobile apps. This means notifs are already received by wallets that are on those platforms as they have integrated Push protocol.

Receiving notifications

Best way to experience notification is with a frontend that already supports Push Protocol, here are few of our favorite crypto wallets —

Prod Environment

Staging Environment

note

iOS doesn't have a public staging app (only production app is available on the App Store).

Best way to test staging on iOS would be to join 👉 Push Discord Channel 👈 and ask a team member to provide you with a testflight beta link.

Live playground

customPropMinimized = 'true';
// DO NOT FORGET TO IMPORT LIBRARIES
// NOT NEEDED HERE SINCE PLAYGROUND IMPORTS INTERNALLY

// import { ethers } from ethers;
// import { PushAPI, CONSTANTS } from @pushprotocol/restapi;
// import { NotificationItem } from @pushprotocol/uiweb;

function App(props) {
  const [wallet, setWallet] = useState(
    '0xD8634C39BBFd4033c0d3289C4515275102423681'
  );
  const [notifItems, setNotifItems] = useState([]);

  const walletRef = useRef();

  useEffect(() => {
    if (walletRef.current) {
      walletRef.current.value = wallet;
    }
  }, [wallet]);

  const fetchNotification = async () => {
    const walletText = walletRef.current.value;

    // Demo only supports MetaMask (or other browser based wallets) and gets provider that injects as window.ethereum into each page
    const provider = new ethers.providers.Web3Provider(window.ethereum);

    // Switch to sepolia
    await provider.send('wallet_switchEthereumChain', [
      { chainId: '0xAA36A7' },
    ]);

    // Get provider
    await provider.send('eth_requestAccounts', []);

    // Grabbing signer from provider
    const signer = provider.getSigner();

    // Initialize user for push
    const userAlice = await PushAPI.initialize(signer, {
      env: CONSTANTS.ENV.STAGING,
    });

    // retrieve notifications for users
    const inboxNotifications = await userAlice.notification.list('INBOX', {
      account: `eip155:11155111:${wallet}`,
      limit: 5,
    });

    // set notifItems state so that react can render
    setNotifItems(inboxNotifications);
  };

  function NotificationInterface() {
    const inputStyle = {
      padding: '10px',
      margin: '10px 0',
      width: '100%',
      boxSizing: 'border-box',
    };

    const textareaStyle = {
      ...inputStyle,
      height: '100px',
      resize: 'vertical',
    };

    const buttonStyle = {
      padding: '10px 20px',
      backgroundColor: '#dd44b9',
      color: '#FFF',
      border: 'none',
      borderRadius: '5px',
      cursor: 'pointer',
      marginTop: '20px',
    };

    return (
      <div style={{ width: 'auto', margin: '20px auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <div style={{ flex: 1 }}>
            <h2>Fetch notifcations on frontend</h2>
            <p />
            <label>
              Put any wallet address and click on fetch notifications to see the
              live results. Click to expand <b>Live Editor</b> tab to see the
              code and play with it. For this demo, You will need Metamask (or
              equivalent browser injected wallet), you will also need to sign a
              transaction to see the notifications.
            </label>
            <p />
            <label>Wallet address</label>
            <input
              type='text'
              placeholder='Enter wallet address'
              style={inputStyle}
              ref={walletRef}
              maxLength={80}
            />
          </div>
        </div>
        <button style={buttonStyle} onClick={fetchNotification}>
          Fetch Notifications
        </button>

        <p />
        <p />

        {notifItems.length > 0 ? (
          <h3>{`Notification Items for ${wallet}`}</h3>
        ) : (
          <></>
        )}

        {notifItems.map((notifItemSingular, idx) => {
          const {
            cta,
            title,
            message,
            app,
            icon,
            image,
            url,
            blockchain,
            notification,
          } = notifItemSingular;

          return (
            <NotificationItem
              key={idx} // any unique id
              notificationTitle={title}
              notificationBody={message}
              cta={cta}
              app={app}
              icon={icon}
              image={image}
              url={url}
              theme={'light'} // or can be dark
              chainName={blockchain}
              // chainName={blockchain as chainNameType} // if using Typescript
            />
          );
        })}
      </div>
    );
  }

  return (
    <>
      <NotificationInterface />
    </>
  );
}

LIVE PREVIEW