Parasail Widget

Parasail Widget is a React component library that supports staking on multiple DePIN (Decentralized Physical Infrastructure Network) projects, providing a unified user interface and interaction experience.

Example Screenshot

Features

• 🚀 Support for multiple mainstream DePIN projects
• 🎨 Customizable themes and styles
• 📱 Responsive design
• 🎯 Event system support
• 🧩 Flexible slot system

Supported Projects

• Aethir - Decentralized cloud computing infrastructure
• Hivello - Decentralized communication network
• Silencio - Noise monitoring network
• Swan - Decentralized storage network
• Filecoin - Decentralized storage network
• Fluence - Decentralized computing platform
• Peaq - IoT blockchain network

Installation

npm install @parasail/widget
# or
yarn add @parasail/widget

API Reference

WidgetProps

| Property | Type | Required | Default | Description | |----------|------|----------|---------|-------------| | signer | ethers.Signer | No | - | Ethers.js signer instance | | theme | Partial<Theme> | No | - | Custom theme configuration | | project | string | Yes | - | Project name | | isTestnet | boolean | False | - | use testnet | | integrator | string | Yes | - | Integrator identifier | | connectedChainId | number | No | - | Current blockchain network ID | | slots | Slots | No | - | Slot configuration | | events | WidgetEvents | No | - | Event handlers | | contracts | ProjectContracts | No | - | Custome contracts |

Project Configuration

Supported project names (case-insensitive):

'aethir' | 'hivello' | 'silencio' | 'swan' | 'filecoin' | 'fluence' | 'peaq'

Theme Configuration

interface ThemeConfig {
  mode?: 'light' | 'dark'
  fontFamily: 'Roboto',
  colors: {
    primary: '#336CEC',
    secondary: 'rgba(51, 108, 236, 0.15)',
    background: '#FFFFFF',
    border: '#DDDDDE',
    text: '#9C9C9C',
    textSecondary: '#7C7C7C',
    disabled: 'rgba(0, 0, 0, 0.12)',
  }
}

Slot System

interface Slots {
  header?: React.ReactNode          // Header slot
  tabStyles?: {                     // Tab styles
    [key: string]: React.CSSProperties
  }
  buttonStyles?: {                  // Button styles
    [key: string]: React.CSSProperties
  }
}

Event System

interface WidgetEvents {
  onConnect?: () => Promise<void>
  onDisconnect?: () => Promise<void>
  onDeposit?: (amount: string) => Promise<void> // after successfully deposited
  onWithdraw?: (amount: string) => Promise<void> // after successfully withdrawn
  onClaim?: (amount: string) => Promise<void>
  onSwitchChain?: (chainId: number) => Promise<void> // on switch chain required
}

Important Notes

1. integrator parameter is required - Used to identify the integrator, will show unauthorized page if not provided
2. Project names are case-insensitive - Both 'Filecoin' and 'filecoin' work
3. Uses testnet by default - Current version connects to test networks by default
4. Requires Web3 environment - Ensure users have MetaMask or other Web3 wallets installed

Examples

Complete Integration Example

import React, { useState, useEffect, useMemo } from 'react'
import ParasailWidget from '@parasail/widget'
import { useAccount, useConnect, useDisconnect, WagmiProvider, Config, useClient, useConnectorClient } from 'wagmi'
import { ethers } from 'ethers'
import type { Account, Chain, Client, Transport } from 'viem'

function clientToSigner(client: Client<Transport, Chain, Account>) {
  const { account, chain, transport } = client
  if (!chain) {
    return null
  }
  const network = {
    chainId: chain.id,
    name: chain.name,
    ensAddress: chain.contracts?.ensRegistry?.address,
  }
  const provider = new providers.Web3Provider(transport, network)
  const signer = provider.getSigner(account?.address)
  return signer
}

/** Hook to convert a Viem Client to an ethers.js Signer. */
function useEthersSigner({ chainId }: { chainId?: number } = {}) {
  const { data: client } = useConnectorClient<Config>({ chainId })
  return useMemo(() => (client ? clientToSigner(client) : undefined), [client])
}

function MyDApp() {
  const { chainId } = useAccount()
  const { switchChain } = useSwitchChain()
  const { disconnect } = useDisconnect()
  const { openConnectModal } = useConnectModal()
  const signer = useEthersSigner()

 
  const widgetEvents = {
    onConnect: openConnectModal,
    onDisconnect: disconnect,
    onSwitchChain: (chainId) => {
      switchChain({
        chainId: chainId,
      })
    }
  }

  const customSlots = {
    header: (
      <div style={{ padding: '16px', textAlign: 'center' }}>
        <h2>My DePIN Dashboard</h2>
      </div>
    )
  }

  return (
    <div className="app">
      <ParasailWidget
        signer={signer}
        project="silencio"
        integrator="my-depin-app"
        connectedChainId={chainId}
        theme={{
          mode: 'dark', 
          colors: {
            primary: '#00D4FF'
          }
        }}
        slots={customSlots}
        events={widgetEvents}
      />
    </div>
  )
}

export default MyDApp

Common Issues

Widget shows "Not Authorized" message

• Ensure the integrator prop is provided
• Contact Parasail team to register your integrator ID

Wallet connection fails

• Check if Web3 wallet is installed and unlocked
• Verify the currentChainId matches the wallet's network
• Ensure proper signer is passed to the widget

Styling issues

• Check if theme configuration is properly formatted
• Verify slot styles don't conflict with widget's default styles
• Use browser dev tools to inspect CSS conflicts

Project not loading

• Verify project name is spelled correctly and supported
• Check network connectivity for testnet access
• Ensure all required dependencies are installed

Built with ❤️ by the Parasail Network team