Integration Guide

Installation

# with npm
npm install @relaycc/receiver
# with yarn
yarn add @relaycc/receiver

Quick start

Check out the example using create-react-app and wagmi. You can see it live at https://react.relay.cc, or run it yourself:

git clone https://github.com/relaycc/receiver-example-cra.git
cd receiver-example-cra
npm install
npm start
# Then navigate to http://localhost:3000 in your browser

Usage

The simplest case is to just add <Window /> and <Launcher /> to your app, making sure to pass in the user's connected wallet.

import { Window, Launcher } from '@relaycc/receiver';

function App() {
  return (
    <div className="App">
      // The `wallet` props here come from whatever wallet connect system you are already using.
      <Window />
      <Launcher wallet={wallet} />
    </div>
  );
}

export default App;

The <Launcher /> component, when clicked will, by default, open a Receiver <Window /> with the inbox view active. To instead jump directly into a 1:1 conversation with a specific wallet (the site's support team, for example), you can pass in the peerAddress prop:

import { Window, Launcher } from '@relaycc/receiver';

function App() {
  return (
    <div className="App">
      <Window />
      <Launcher wallet={wallet} peerAddress={'0x1800TECHSUPPORT'} />
    </div>
  );
}

export default App;

You can also use the useLaunch hook to turn any component into a Receiver launcher:

import { Window, useLaunch } from '@relaycc/receiver';

function App() {
  const launch = useLaunch(wallet);
  return (
    <div className="App">
      <Window />
      <button onClick={() => launch('0x0cb27e883E207905AD2A94F9B6eF0C7A99223C37'}>
        Talk to the Relay Founder
      </button>
      <button onClick={() => launch('0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045'}>
        Talk to Vitalik
      </button>
    </div>
  );
}

export default App;