@goodsdks/ui-components v1.0.3
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
- 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.
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:
- Download the Script: Download the
claim-button.global.js
file from the project releases or build it from the source. - Include in HTML: Add the script to your HTML file.
- Add the Component: Use the
<claim-button>
tag where you want it to appear.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Claim Button Example</title>
</head>
<body>
<claim-button id="claimBtn" environment="production"></claim-button>
<script src="path/to/claim-button.global.js"></script>
<script type="module">
// Wait for the component to be defined
customElements.whenDefined("claim-button").then(() => {
const claimBtn = document.getElementById("claimBtn")
claimBtn.appkitConfig = {
projectId: "71dd03d057d89d0af68a4c627ec59694",
metadata: {
name: "AppKit",
description: "AppKit Example",
url: "https://example.com",
icons: ["https://avatars.githubusercontent.com/u/179229932"],
},
}
})
</script>
</body>
</html>
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:
- Install the Package: Add the
@goodsdks/ui-components
package to your project.npm install @goodsdks/ui-components
- Import the Component: Import it in your JavaScript or TypeScript file.
import "@goodsdks/ui-components"
- For use in HTML: Place the
<claim-button>
tag in your template.<claim-button environment="production"></claim-button>
- For use in React": Place the
<claim-button>
tag in your render method.render(<claim-button environment="production"></claim-button>)
Configurable Options
Customize the claim-button
using these properties:
environment
: Defines the environment for contract interactions.- Values:
"production"
,"staging"
, or"development"
. - Default:
"development"
. - Example:
<claim-button environment="production"></claim-button>
- Values:
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 ametadata
object containing your app's details. - Example:
// 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.
- Expected to be an object with at least
Additional Notes
- Dependencies: The component uses
@reown/appkit
for wallet connections,@goodsdks/citizen-sdk
for claim logic,viem
for blockchain interactions, andlit
for the reactive UI. - Supported Chains: Works on Celo and Fuse networks.
- Feedback: Displays loading states, success messages, errors, and a countdown timer as needed.
This README provides all you need to get started with the claim-button
web component in your web projects!