# UI Components

## PrizePoolWidget

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

{% tabs %}
{% tab title="Light" %}
<figure><img src="https://2790841056-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRoqaBCJPwLDKi5l47uHX%2Fuploads%2FTFKLQxThLwxu2wiGOhac%2FPot%20size%20-%20Light.png?alt=media&#x26;token=18592c54-a351-41a5-abac-5e9a17e6e27c" alt="" width="375"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Dark" %}
<figure><img src="https://2790841056-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRoqaBCJPwLDKi5l47uHX%2Fuploads%2FwJ885zuwv2mGT8h5Cp5h%2FPot%20size%20-%20Dark.png?alt=media&#x26;token=c87cd352-fa3a-4462-ae2c-6e13abad9606" alt="" width="375"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

### Usage

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

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

## Activities

Displays ongoing activities like tickets generated, wallet address, and the timestamp.&#x20;

{% tabs %}
{% tab title="Light" %}
<figure><img src="https://2790841056-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRoqaBCJPwLDKi5l47uHX%2Fuploads%2FxzGOxiMwZ5ahOOWRQgAo%2FActivities%20-%20Light.png?alt=media&#x26;token=d7de1ae1-9fa3-4235-ba5f-c27cb20b8084" alt="" width="375"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Dark" %}
<figure><img src="https://2790841056-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRoqaBCJPwLDKi5l47uHX%2Fuploads%2FEqzWdGJqhEENu8Sldtep%2FActivities%20-%20Dark.png?alt=media&#x26;token=8ed768c3-cf73-49ca-a258-574b1377412f" alt="" width="375"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

### Usage

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

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

## Leaderboard

{% tabs %}
{% tab title="Light" %}
<figure><img src="https://2790841056-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRoqaBCJPwLDKi5l47uHX%2Fuploads%2F5fNCBD7TRZ5Tx1CQsMSl%2FLeaderboard%20-%20Light.png?alt=media&#x26;token=2d0d2cd4-4d82-4ae9-918d-1ccb3b40d01f" alt="" width="375"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Dark" %}
<figure><img src="https://2790841056-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRoqaBCJPwLDKi5l47uHX%2Fuploads%2FfwJAKvnckbvCXS7AEJWY%2FLeaderboard%20-%20Dark.png?alt=media&#x26;token=9c1ac92d-47b8-44c9-a2ca-6c55b49d17da" alt="" width="375"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

```typescript
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.&#x20;

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

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

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

## PastWinners

{% tabs %}
{% tab title="Light" %}
<figure><img src="https://2790841056-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRoqaBCJPwLDKi5l47uHX%2Fuploads%2FVYHW6ahjaDGQNpM5tU03%2FPast%20winners%20-%20Light.png?alt=media&#x26;token=cdb65288-c4e8-4567-aae1-c0a7423e528b" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Dark" %}
<figure><img src="https://2790841056-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRoqaBCJPwLDKi5l47uHX%2Fuploads%2FsliBT5nPQZjI2LlInNtY%2FPast%20winners%20-%20Dark.png?alt=media&#x26;token=cd7aa178-b188-4b22-aee1-4ea7ec36b62a" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

### Usage

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

function App() {

  return (
    <PastWinners />
  );
}
```

## Tickets

#### Normal Tickets

<div align="left"><figure><img src="https://2790841056-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRoqaBCJPwLDKi5l47uHX%2Fuploads%2FLNHth9p1FvFHatlHtEJ8%2FTickets%20(1).png?alt=media&#x26;token=6f043474-84db-4f64-8e40-59ded8b3ce7e" alt="" width="84"><figcaption></figcaption></figure></div>

#### Tickets with pending amount

<div align="left"><figure><img src="https://2790841056-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRoqaBCJPwLDKi5l47uHX%2Fuploads%2FR2s6G7JOFfuv5Avv7g47%2FTickets.png?alt=media&#x26;token=1dc9f2d1-ca1e-4237-b078-d527235b77e7" alt="" width="84"><figcaption></figcaption></figure></div>

## CurrentTickets

{% tabs %}
{% tab title="Light" %}
<figure><img src="https://2790841056-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRoqaBCJPwLDKi5l47uHX%2Fuploads%2F1mSI5XIcueHEinDdSx63%2FCurrent%20Pot%20-%20Light.png?alt=media&#x26;token=ed207478-f604-4089-899b-4acf672ce74b" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Dark" %}
<figure><img src="https://2790841056-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRoqaBCJPwLDKi5l47uHX%2Fuploads%2FuMbXQ21vaphXTeHhCo7S%2FCurrent%20Pot%20-%20Light%20(1).png?alt=media&#x26;token=8392030b-7acc-4c92-ac11-cb5f2f7e8986" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

```typescript
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.&#x20;

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

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

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

## PastTickets

{% tabs %}
{% tab title="Light" %}
<figure><img src="https://2790841056-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRoqaBCJPwLDKi5l47uHX%2Fuploads%2FnNzdod8ipNOjNGSZKBxB%2FPast%20Pot%20-%20Light.png?alt=media&#x26;token=1baeddca-942b-45d9-a89f-8251690a2dde" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Dark" %}
<figure><img src="https://2790841056-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRoqaBCJPwLDKi5l47uHX%2Fuploads%2F8AdxnlQnaUwnyRPwFvvG%2FPast%20Pot%20-%20Dark.png?alt=media&#x26;token=eae3436d-329c-4e41-a7e9-d86e806ed669" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

```typescript
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.&#x20;

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

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

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

## ResultsModal

{% tabs %}
{% tab title="Light" %}
<div><figure><img src="https://2790841056-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRoqaBCJPwLDKi5l47uHX%2Fuploads%2FSxK7pSgmknbeYL576cws%2FTweet%20to%20claim%20-%20light.png?alt=media&#x26;token=1d64ee1d-ff04-4ad0-9880-5bbe0264cc97" alt=""><figcaption></figcaption></figure> <figure><img src="https://2790841056-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRoqaBCJPwLDKi5l47uHX%2Fuploads%2Fc2cbZQhYPhEwoSx22yR6%2FClaimed%20light.png?alt=media&#x26;token=b21b2c4c-ea67-4661-9152-e9dcbf7c60cd" alt=""><figcaption></figcaption></figure> <figure><img src="https://2790841056-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRoqaBCJPwLDKi5l47uHX%2Fuploads%2FwwBaI41UXxR3Uqa0Ntio%2FLost%20ticket%20-light.png?alt=media&#x26;token=61587b5d-2d1f-4ae4-9b29-55b947f691c5" alt=""><figcaption></figcaption></figure></div>
{% endtab %}

{% tab title="Dark" %}
<div><figure><img src="https://2790841056-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRoqaBCJPwLDKi5l47uHX%2Fuploads%2FG085btz72kIlQLXzQtAw%2FTweet%20to%20claim%20-%20dark.png?alt=media&#x26;token=c063ecd6-49f2-4588-90cc-d6c7c51016d3" alt=""><figcaption></figcaption></figure> <figure><img src="https://2790841056-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRoqaBCJPwLDKi5l47uHX%2Fuploads%2Fn6MdxHIQhBLdvi97xn8O%2FClaimed%20(dark).png?alt=media&#x26;token=3c3cf1cb-96d9-4046-aa5d-d20aa578201f" alt=""><figcaption></figcaption></figure> <figure><img src="https://2790841056-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRoqaBCJPwLDKi5l47uHX%2Fuploads%2Ff5hQOjZDZTzyiNoqCJ4S%2FLost%20ticket%20-%20dark.png?alt=media&#x26;token=e0ab9df7-d4c6-45ad-bb8d-4cccaef304af" alt=""><figcaption></figcaption></figure></div>
{% endtab %}
{% endtabs %}

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

{% hint style="info" %}
You can also use the tabs in the`PastTickets` component to claim the prize of the winning ticket.&#x20;
{% endhint %}

```typescript
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.&#x20;

```typescript
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

<table><thead><tr><th width="187">Prop</th><th width="404.3333333333333">Description</th><th>Required</th></tr></thead><tbody><tr><td>trigger</td><td>A react node that will be presented to the user, usually a button or something clickable.</td><td>Y</td></tr><tr><td>user</td><td>Wallet address of the user .</td><td>Y</td></tr><tr><td>potId</td><td>ID of the pot that has drawn the raffle.</td><td>Y</td></tr><tr><td>openState</td><td>This is a state tuple from react's <a href="https://reactjs.org/docs/hooks-state.html">useState</a>, 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.</td><td>N</td></tr><tr><td>onClaimComplete</td><td>Triggered when the prize was claimed successfully.</td><td>N</td></tr><tr><td>onClaimError</td><td>Triggered when the calling the claim function resulted in an error, returns the error and the claim data.</td><td>N</td></tr><tr><td>onClose</td><td>Triggered when the modal was closed. Returns some useful data about the results as well as the step data and the current step.</td><td>N</td></tr></tbody></table>

