ReactJS

Onramper Example

Using React

The oreid-js library provides all the help you need to add ORE ID to your Javascript app

The oreid-webpopup adds a pop-up user experience to handle common flows like login and sign transaction.

The oreid-react library adds helpful hooks and components for your React app

See React sample apps here

Step 1 - Install components

yarn add oreid-js oreid-webpopup oreid-react

Step 2 - Initialize

import { OreId } from "oreid-js";
import { WebPopup } from "oreid-webpopup";
import { OreidProvider } from "oreid-react";

const oreId = new OreId({ appId, apiKey, plugins:{popup: WebPopup()}});
await oreId.init()

Step 3 - Launch Login

// Wrap your App with OreidProvider
<OreidProvider oreId={oreId}>
   <App />
</OreidProvider>

// Example Login Component 
export const Login: React.FunctionComponent = () => {
  const oreId = useOreId();
   const onClick = () => {
       oreId.popup.auth({ provider: 'google' })
       .then(onSuccess)
       .catch(onError);
   };
   return <button onClick={onClick}>Login to Google</button>;
};

  ...

// access user data
const userData = await oreid.auth.user.getData()
console.log(`Hello ${userData.name}`)

Step 4 - Launch OnRamper Flow

  const signTransaction = async () => {
    const userChainAccounts = oreId.auth.user.data.chainAccounts;
    // Select the currency account that you would like to default to in the OnRamper flow
    // The user can select a different account using a dropdown menu if they wish
    const ethAccount = userChainAccounts.find(ca => ca.chainNetwork === 'eth_main')

    // These are the properties required to launch the popup
    const onramperBuy = {
      chainAccount: ethAccount.chainAccount,
      chainNetwork: ethAccount.chainNetwork,
    };
    try {
      // launch the OnRamper flow
      await oreId.popup.buy({ onramperBuy })
    } catch (error) {
      console.log(error)
    }
 }