@easyweb3/react

React components for integrating Web3 widgets into your application.

Installation

npm install @easyweb3/react
# or
yarn add @easyweb3/react
# or
pnpm add @easyweb3/react

Usage

Setup

Wrap your app with the EasyWeb3Provider:

import { EasyWeb3Provider } from '@easyweb3/react'

function App() {
  return (
    <EasyWeb3Provider apiKey="your_api_key">
      {/* Your app */}
    </EasyWeb3Provider>
  )
}

Wallet Connect Widget

import { WalletConnectWidget } from '@easyweb3/react'

function MyComponent() {
  return (
    <WalletConnectWidget
      chains={['avalanche', 'ethereum', 'polygon']}
      wallets={['metamask', 'walletconnect', 'coinbase']}
      buttonText="Connect Wallet"
      onConnect={(address) => console.log('Connected:', address)}
      onDisconnect={() => console.log('Disconnected')}
      onError={(error) => console.error(error)}
    />
  )
}

NFT Gate Widget

import { NFTGateWidget } from '@easyweb3/react'

function MyComponent() {
  return (
    <NFTGateWidget
      contractAddress="0x..."
      requiredTokenIds={[1, 2, 3]}
      minBalance={1}
      onVerified={(hasAccess) => console.log('Access:', hasAccess)}
    >
      <div>Your gated content here</div>
    </NFTGateWidget>
  )
}

Token Payment Widget

import { TokenPaymentWidget } from '@easyweb3/react'

function MyComponent() {
  return (
    <TokenPaymentWidget
      price={0.1}
      tokens={['AVAX', 'ETH']}
      recipientAddress="0x..."
      onSuccess={(txHash) => console.log('Payment successful:', txHash)}
      onError={(error) => console.error(error)}
    />
  )
}

Social Login Widget

import { SocialLoginWidget } from '@easyweb3/react'

function MyComponent() {
  return (
    <SocialLoginWidget
      providers={['google', 'twitter', 'discord']}
      redirectUrl="/dashboard"
      onLogin={(user) => console.log('Logged in:', user)}
      onError={(error) => console.error(error)}
    />
  )
}

Styling

All widgets accept a style prop for customization:

<WalletConnectWidget
  style={{
    buttonColor: '#3b82f6',
    buttonSize: 'lg',
    borderRadius: '12px',
    fontFamily: 'Inter, sans-serif',
  }}
/>

API Reference

See the full documentation for detailed API reference.

License

MIT