Claim Button Example

# Claim UBI (Web-components) ## Claim Button Web Component The `claim-button` web component provides a simple and interactive way for users to claim Universal Basic Income (UBI) in the form of GoodDollars (G$) on supported blockchain networks (Celo and Fuse). It integrates with the GoodDollar ecosystem to manage wallet connections, eligibility checks, and token claims, offering a seamless experience for users within any web application. ### What It Does The `claim-button` enables users to: * Connect their cryptocurrency wallet (via Reown AppKit). * Check their eligibility to claim G$ tokens based on the GoodDollar protocol. * If this is a new user, they will be guided through our [Face-Verification flow](https://docs.gooddollar.org/about-the-protocol/sybil-resistance) * Claim their UBI with a single click, handling all blockchain transactions. * View their G$ token balance. * See a countdown timer until their next claim if they’ve already claimed for the current period. * Switch between supported chains (Celo and Fuse) if entitlements are available on another network. ### Prerequisites Make sure you register your wallet on [re-own cloud dashboard](https://cloud.reown.com/sign-in). You want to register an dapp which integrates 'appkit' ### How to Use It You can integrate the `claim-button` into your project in two ways: #### Option 1: Using the Standalone Script Can be used in any website, for a quick setup: 1. **Download the Script**: Download the `claim-button.global.js` file from the project releases or build it from the source. 2. **Include in HTML**: Add the script to your HTML file. 3. **Add the Component**: Use the `` tag where you want it to appear. ```html Claim Button Example

``` #### Option 2: Using ESM Modules **Note:**: see above example for the metadata configuration, for simplicity removed from\ below examples. For projects with a modern JavaScript setup: 1. **Install the Package**: Add the `@goodsdks/ui-components` package to your project. ```bash npm install @goodsdks/ui-components ``` 2. **Import the Component**: Import it in your JavaScript or TypeScript file. ```javascript import "@goodsdks/ui-components" ``` 3. **For use in HTML**: Place the `` tag in your template. ```html ``` 4. **For use in React**": Place the `` tag in your render method. ```javascript render() ``` ### Configurable Options Customize the `claim-button` using these properties: * **`environment`**: Defines the environment for contract interactions. * Values: `"production"`, `"staging"`, or `"development"`. * Default: `"development"`. * Example: ```html ``` * **`appkitConfig`**: *(Set via JavaScript property)*\ Provides configuration for wallet connection and custom branding in wallet dialogs. * Expected to be an object with at least `projectId` and a `metadata` object containing your app's details. * Example: ```js // In your JavaScript, after the component is defined: customElements.whenDefined("claim-button").then(() => { document.querySelector("claim-button").appkitConfig = { projectId: "YOUR_PROJECT_ID", metadata: { name: "YourAppName", description: "A short app description", url: "https://yourapp.example.com", icons: ["https://yourapp.example.com/icon.png"], }, } }) ``` * **Note:** `appkitConfig` cannot be set as an HTML attribute; it must be set on the element as a property from JavaScript. ### Interactive Demo Try out the `claim-button` in action using the interactive widget below. This sandbox environment lets you see how the component works in a live setting, making it easier to understand its behavior and integration. {% hint style="info" %} Below is using development contracts, so even if you have whitelisted a primary account in our apps, you'll have to do face verification again for this demo widget.\ You can see the code by clicking or sliding the left sidebar. (and it's really all the code there is)\ (Social login does not work in this demo) {% endhint %} {% embed url="" %} ### Additional Notes * **Dependencies**: The component uses `@reown/appkit` for wallet connections, `@goodsdks/citizen-sdk` for claim logic, `viem` for blockchain interactions, and `lit` for the reactive UI. * If you want to build your own widget, see [claim-ubi-viem-wagmi](https://docs.gooddollar.org/for-developers/apis-and-sdks/ubi/claim-ubi-viem-wagmi "mention") * **Supported Chains**: Works on Celo and Fuse networks. * **Feedback**: Displays loading states, success messages, errors, and a countdown timer as needed.