GoodDocs
  • Welcome to GoodDocs!
  • GoodDollar Ecosystem Vision
  • About the Protocol
    • Usage
    • Tokenomics
    • Sybil-Resistance
    • Protocol V3 Documentation
      • Architecture & Value Flow
      • System's Elements
      • Core Contracts & API
        • GoodDollar
        • GoodCompoundStaking V2 (DAI)
        • GoodAaveStaking V2 (USDC)
        • GoodReserveCDai
        • GoodFundManager
        • GoodMarketMaker
        • ContributionCalculation
        • UBIScheme
        • Identity
        • FirstClaimPool
        • AdminWallet
        • OneTimePayments
        • DonationsStaking
        • NameService
        • GReputation
        • CompoundVotingMachine
        • StakersDistribution
        • UniswapV2SwapHelper
        • Invites
        • GovernanceStaking
        • ClaimersDistribution
        • CompoundStakingFactory
        • AaveStakingFactory
        • ExchangeHelper
        • FuseFaucet
        • GoodDollarMintBurnWrapper
      • Previous Protocol Versions
        • Protocol V1
          • Architecture & Value Flow
          • Core Contracts & API
        • Protocol V2
          • Architecture & Value Flow
          • System's Elements
            • 1. The token (G$)
            • 2. The Reserve
            • 3. The Trust
            • 4. Staking rewards (APR)
            • 5. The Fund Manager
            • 6. The Distribution Contract (DisCo)
            • 7. Governance (DAO)
          • Core Contracts & API
            • GoodDollar
            • GoodCompoundStaking V2 (DAI)
            • GoodAaveStaking V2 (USDC)
            • GoodReserveCDai
            • GoodFundManager
            • GoodMarketMaker
            • ContributionCalculation
            • UBIScheme
            • Identity
            • FirstClaimPool
            • AdminWallet
            • OneTimePayments
            • DonationsStaking
            • NameService
            • GReputation
            • CompoundVotingMachine
            • StakersDistribution
            • UniswapV2SwapHelper
            • Invites
            • GovernanceStaking
            • ClaimersDistribution
            • CompoundStakingFactory
            • AaveStakingFactory
            • ExchangeHelper
            • FuseFaucet
  • User Guides
    • Buy & Sell G$
    • Stake to create UBI
    • Claim GOOD and G$X
    • Bridge GoodDollars
    • Connect another wallet address to identity
  • Liquidity
  • Wallet and Products
    • GoodWallet
    • GoodDapp
    • New GoodWallet
    • GoodCollective
    • GoodID & GoodOffers
    • 3rd Party Partners and Integrations
  • Frequently Asked Questions
    • Web3 basic knowledge and security tips - by Consensys
    • About GoodDollar
    • GoodDollar Protocol & G$ Token
    • Using GoodDollar
    • GoodDollar Community
    • Troubleshooting
  • For Developers
    • Contributing to GoodDollar
    • GoodDapp Developer Guides
      • Deploy your own GoodDapp UI
      • How to integrate the G$ token
      • Use G$ streaming
      • Ethers V5/useDapp Context Setup
    • APIs & SDKs
      • UBI
        • Claim UBI (Ethers v5/ React)
        • Claim UBI (Viem/Wagmi)
        • Claim UBI (Web-components)
      • Sybil Resistance
        • Identity (Ethers v5 / React)
        • Identity (Viem/Wagmi)
  • Useful Links
    • GoodDollar.org
    • GoodDapp
    • GoodWallet
    • GoodDollar User Guides
    • Statistics Dashboard
    • GoodDollar Whitepaper
    • GoodDollar Litepaper
    • GoodDollar Litepaper - Español
Powered by GitBook
On this page
  • Claim Button Web Component
  • What It Does
  • Prerequisites
  • How to Use It
  • Configurable Options
  • Interactive Demo
  • Additional Notes

Was this helpful?

  1. For Developers
  2. APIs & SDKs
  3. UBI

Claim UBI (Web-components)

PreviousClaim UBI (Viem/Wagmi)NextSybil Resistance

Last updated 2 days ago

Was this helpful?

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

  • 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 . 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 <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:

  1. Install the Package: Add the @goodsdks/ui-components package to your project.

    npm install @goodsdks/ui-components
  2. Import the Component: Import it in your JavaScript or TypeScript file.

    import "@goodsdks/ui-components"
  3. For use in HTML: Place the <claim-button> tag in your template.

    <claim-button environment="production"></claim-button>
  4. 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>
  • 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:

      // 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.

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)

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)

  • Supported Chains: Works on Celo and Fuse networks.

  • Feedback: Displays loading states, success messages, errors, and a countdown timer as needed.

Face-Verification flow
re-own cloud dashboard