widgets

Different widgets / plugins for capabilities like airdrop claiming, token locks

Widgets are built with preact and preactement

Check the interactive demo here

Airdrop Claim Widget

All supported parameters: WidgetInput

Example

<sf-airdrop-claim
    name="CROP-G"
    distributor-id="8bzG3zcHcWCSBvJwDNr7SwCD7u1cNkSyPTrqERgHFEaw"
    endpoint="<YOUR_RPC_ENDPOINT>"
    token-decimals="9"
    token-symbol="CROP-G"
></sf-airdrop-claim>

<script
    src="https://widgets.streamflow.finance/widgets/airdrop-claim/airdrop-claim-0-0-1.js"
    type="module"
></script>

Copy

Example with theming enabled

<sf-airdrop-claim
    name="CROP-G"
    distributor-id="8bzG3zcHcWCSBvJwDNr7SwCD7u1cNkSyPTrqERgHFEaw"
    endpoint="<YOUR_RPC_ENDPOINT>"
    token-decimals="9"
    token-symbol="CROP-G"
></sf-airdrop-claim>

<script
    src="https://widgets.streamflow.finance/widgets/airdrop-claim/airdrop-claim-0-0-1.js"
    type="module"
></script>

<style>
  sf-airdrop-claim {
    --brand: 255 0 0;
    --text: 12 96 244;
  }
</style>

Copy

Developers

React + Widgets

• React Integration Example: CodeSandbox. There are some specifics about React + Web Components integration. They lie mostly in a way of handling Custom Events. A custom hook example presented in CodeSandbox.

Preact + Widgets

• Internal Playground app might be a reference for it.
• Almost similar to the previous example with React, but event handling of Custom Events with Preact is much easier. Just use regular on syntax

<sf-airdrop-claim
  onInit={(event) => {
    /* handling */
  }}
></sf-airdrop-claim>
Copy

Framer Adapter

• The widget could be integrated with SaaS websites builders, like Framer.
  • Framer docs on how to integrate shared components - link→
  • Shared Component link for the airdrop claim widget - link→

Contributions

• npm run dev - Starts a dev server at http://localhost:5173/

• npm run build - Builds for production, emitting to dist/

• npm run preview - Starts a server at http://localhost:4173/ to test production build locally