@easya/layer-ui-react NPM

@easya/layer-ui-react

A React component library for building blockchain applications with ease, focusing on XRPL integration (more coming soon).

Features

🔗 Seamless blockchain connectivity
💰 Token management components
🎨 Dark/Light mode support
🔐 Wallet integration
📊 Balance display components
🔄 Transaction handling

Installation

npm install @easya/layer-ui-react
# or
yarn add @easya/layer-ui-react

Quick Start

import { BlockchainProvider, ConnectButton } from '@easya/layer-ui-react';

const config = {
  network: 'testnet',
  blockchain: 'xrpl',
  wallet: 'crossmark'
};

function App() {
  return (
    <BlockchainProvider config={config}>
      <ConnectButton />
    </BlockchainProvider>
  );
}

Core Components:

BlockchainProvider - Provides blockchain context to all components
ConnectButton - Button to connect/disconnect wallet
AddressDisplay - Shows wallet address
BalanceDisplay - Shows XRP balance
BalancesDisplay - Shows all token balances
TransactionForm - Send tokens/XRP
IssueTokenForm - Create new fungible tokens
TrustLineForm - Create token trust lines

Setup

create a react app: npm create vite@latest your-project-name -- --template react
cd your-project-name
npm install
npm i @easya/layer-ui-react
now, we can start using it! update App.jx content to:

import { BlockchainProvider, ConnectButton } from '@easya/layer-ui-react';

const config = {
  network: 'testnet',
  blockchain: 'xrpl',
  wallet: 'crossmark'
};

function App() {
  return (
    <BlockchainProvider config={config}>
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
        <ConnectButton />
      </div>
    </BlockchainProvider>
  );
}

export default App;