UI Components

PrizePoolWidget

Displays pot information like Current Pot Size, Total Pot Size in ETH for the current pot.

Light

Dark

import { PrizePoolWidget } from '@rps-labs/lotto-sdk';

Usage

import { PrizePoolWidget } from '@rps-labs/lotto-sdk';

function App() {
  return (
    <PrizePoolWidget />
  );
}

Activities

Displays ongoing activities like tickets generated, wallet address, and the timestamp.

Light

Dark

import { Acvitities } from '@rps-labs/lotto-sdk';

Usage

import { Activities } from '@rps-labs/lotto-sdk';

function App() {
  return (
    <Activities />
  );
}

Leaderboard

Light

Dark

import { Leaderboard } from '@rps-labs/lotto-sdk';

Usage

Render the Leaderboard component with an optional prop to display the top 3 ranking users.

user: The address of the user.

import { Leaderboard } from '@rps-labs/lotto-sdk';

function App() {
  const userAddress = "0x123456789"; 

  return (
    <Leaderboard user={userAddress} />
  );
}

PastWinners

Light

Dark

import { PastWinners } from '@rps-labs/lotto-sdk';

Usage

import { PastWinners } from '@rps-labs/lotto-sdk';

function App() {

  return (
    <PastWinners />
  );
}

Tickets

Normal Tickets

Tickets with pending amount

CurrentTickets

Light

Dark

import { CurrentTickets } from '@rps-labs/lotto-sdk';

Usage

Render the CurrentTickets component with a required prop to display the tickets that the user holds

user: The address of the user.

import { CurrentTickets } from '@rps-labs/lotto-sdk';

function App() {
  const userAddress = "0x123456789"; 

  return (
    <CurrentTickets user={userAddress} />
  );
}

PastTickets

Light

Dark

import { PastTickets } from '@rps-labs/lotto-sdk';

Usage

Render the PastTickets component with a required prop to display the past tickets that the user holds

user: The address of the user.

import { PastTickets } from '@rps-labs/lotto-sdk';

function App() {
  const userAddress = "0x123456789"; 

  return (
    <PastTickets user={userAddress} />
  );
}

ResultsModal

Light

Dark

Use it to check the results of the raffle draw and claim a prize if the user has a winning ticket.

You can also use the tabs in thePastTickets component to claim the prize of the winning ticket.

import { ResultsModal } from '@rps-labs/lotto-sdk';

Usage

Configure modal for checking the results of a raffle draw in your react app and also claim the prize.

import { useState } from 'react'
import { ResultsModal } from '@rps-labs/lotto-sdk';

const openState = useState(true)
const userAddress = "0x123456789"; 

  <ResultsModal
    trigger={
      <button>
        Check Results
      </button>
    }
    user={userAddress} 
    potId={1}
    openState={openState}
    onClaimComplete={(data) => {
    console.log('Claim Complete', data)
  }}
    onClaimError={(error, data) => {
    console.log('Claim Error', error, data)
  }}
    onClose={(data, stepData, currentStep) => {
    console.log('ResultsModal Closed')
  }}
  />

Parameters

Prop	Description	Required
trigger	A react node that will be presented to the user, usually a button or something clickable.	Y
user	Wallet address of the user .	Y
potId	ID of the pot that has drawn the raffle.	Y
openState	This is a state tuple from react's useState, you can use this to programmatically open or close the modal. The modal will use this state when determining if the modal is open or closed.	N
onClaimComplete	Triggered when the prize was claimed successfully.	N
onClaimError	Triggered when the calling the claim function resulted in an error, returns the error and the claim data.	N
onClose	Triggered when the modal was closed. Returns some useful data about the results as well as the step data and the current step.	N