@cookillabs/wallet-adapter

⚠️ COMMUNITY PACKAGE DISCLAIMER
This is a community-maintained wallet adapter, NOT an official Rialo package.
For official Rialo packages, see: @rialo/frost

Universal wallet adapter for Rialo blockchain dApps. Connect to Rialo Wallet and other compatible wallets with a simple, unified API.

Installation

npm install @cookillabs/wallet-adapter
# or
yarn add @cookillabs/wallet-adapter
# or
bun add @cookillabs/wallet-adapter

Quick Start

React (Recommended)

import { WalletProvider, ConnectButton, WalletModal, useWallet } from '@cookillabs/wallet-adapter/react';

function App() {
  return (
    <WalletProvider network="devnet" autoConnect>
      <ConnectButton />
      <WalletModal />
      <YourDApp />
    </WalletProvider>
  );
}

function YourDApp() {
  const { connected, activeAccount, signMessage, sendTransaction } = useWallet();

  const handleSign = async () => {
    const result = await signMessage('Hello Rialo!');
    console.log('Signature:', result.signature);
  };

  const handleSend = async () => {
    const result = await sendTransaction({
      to: 'RecipientBase58Address...', // Base58 address
      value: '1000000000', // 1 RLO in kelvins
    });
    console.log('TX Hash:', result.hash);
  };

  if (!connected) return <p>Please connect your wallet</p>;

  return (
    <div>
      <p>Connected: {activeAccount?.address}</p>
      <button onClick={handleSign}>Sign Message</button>
      <button onClick={handleSend}>Send 1 RLO</button>
    </div>
  );
}

Vanilla JavaScript

import { RialoWallet, isRialoInstalled, formatBalance } from '@cookillabs/wallet-adapter';

const wallet = new RialoWallet();

// Check if installed
if (!isRialoInstalled()) {
  console.log('Please install Rialo Wallet from https://rialo.io/wallet');
}

// Connect
const accounts = await wallet.connect();
console.log('Connected:', accounts[0].address);

// Get balance
const balance = await wallet.getBalance();
console.log('Balance:', formatBalance(balance), 'RLO');

// Sign message
const signed = await wallet.signMessage('Hello Rialo!');
console.log('Signature:', signed.signature);

// Send transaction
const tx = await wallet.signAndSendTransaction({
  to: 'RecipientBase58Address...', // Base58 address
  value: '1000000000', // 1 RLO
});
console.log('TX Hash:', tx.hash);

Direct Provider Access

// Access the injected provider directly
if (window.rialo) {
  const accounts = await window.rialo.connect();
  const balance = await window.rialo.getBalance();
  
  const tx = await window.rialo.signAndSendTransaction({
    to: 'RecipientBase58Address...',
    value: '1000000000',
  });
}

React Hooks

useWallet

Main hook with all functionality:

const {
  // State
  connected,        // boolean - connection status
  connecting,       // boolean - connection in progress
  accounts,         // WalletAccount[] - all accounts
  activeAccount,    // WalletAccount | null - current account
  network,          // 'mainnet' | 'testnet' | 'devnet' | 'localnet'
  balance,          // string | null - balance in kelvins
  
  // Actions
  connect,          // () => Promise<WalletAccount[]>
  disconnect,       // () => Promise<void>
  switchNetwork,    // (network) => Promise<void>
  
  // Transactions
  signMessage,      // (message: string) => Promise<SignedMessage>
  signTransaction,  // (tx) => Promise<string>
  sendTransaction,  // (tx) => Promise<TransactionResult>
  signAndSendTransaction, // (tx) => Promise<TransactionResult>
  
  // Modal
  isModalOpen,
  openModal,
  closeModal,
} = useWallet();

Specialized Hooks

// Connection status
const connected = useIsConnected();

// Active account
const account = useActiveAccount();

// All accounts
const accounts = useAccounts();

// Balance
const { balance, formatted } = useBalance();

// Network
const { network, config } = useNetwork();

// Connect with loading state
const { connect, connecting, isInstalled } = useConnectWallet();

// Sign message with state
const { sign, signing, signature, error } = useSignMessage();

// Send transaction with state
const { send, sending, txHash, error } = useSendTransaction();

Components

ConnectButton

<ConnectButton
  connectLabel="Connect Wallet"  // Button text
  showAddress={true}             // Show address when connected
  className="my-button"          // Custom class
  style={{ ... }}                // Custom styles
/>

WalletModal

<WalletModal
  title="Select Wallet"   // Modal title
  className="my-modal"    // Custom class
/>

WalletProvider

<WalletProvider
  network="devnet"          // Default network
  autoConnect={true}        // Auto-connect on mount
  wallets={[customWallet]}  // Additional wallets
  onConnect={(accounts) => console.log('Connected', accounts)}
  onDisconnect={() => console.log('Disconnected')}
  onError={(error) => console.error(error)}
>
  {children}
</WalletProvider>

Adding Custom Wallets

import { WalletProvider, WalletInfo } from '@cookillabs/wallet-adapter/react';

const customWallets: WalletInfo[] = [
  {
    id: 'phantom-rialo',
    name: 'Phantom (Rialo)',
    icon: 'https://phantom.app/icon.png',
    installed: !!window.phantom?.rialo,
    downloadUrl: 'https://phantom.app',
  },
];

function App() {
  return (
    <WalletProvider wallets={customWallets}>
      {children}
    </WalletProvider>
  );
}

Wallet Standard

For advanced integrations using the Wallet Standard:

import { 
  RialoWalletStandard,
  registerRialoWallet,
  getRialoWallet,
  RIALO_SIGN_MESSAGE,
  RIALO_SIGN_TRANSACTION,
} from '@cookillabs/wallet-adapter/standard';

// Get registered wallet
const wallet = getRialoWallet();

if (wallet) {
  // Connect
  const { accounts } = await wallet.features['standard:connect'].connect();
  
  // Sign message
  const message = new TextEncoder().encode('Hello Rialo!');
  const { signature } = await wallet.features[RIALO_SIGN_MESSAGE].signMessage({
    account: accounts[0],
    message,
  });
  
  // Listen for changes
  const unsubscribe = wallet.features['standard:events'].on('change', (data) => {
    console.log('Wallet changed:', data);
  });
}

Address Format

Rialo uses base58 encoded addresses (32-50 characters). Examples:

✅ Valid:   5YNmS1R9nNSCDzb5a7mMJ1dwK9uHeAAF4CmPEwKgVWr8
✅ Valid:   9xQeWvG816bUx9EPjHmaT23yvVM2ZWbrrpZb9PusVFin
❌ Invalid: rialo1abc123...  (old format, no longer used)

Networks

| Network | Chain ID | RPC URL | |----------|-----------------|----------------------------------| | Mainnet | rialo:mainnet | https://mainnet.rialo.io:4101 | | Testnet | rialo:testnet | https://testnet.rialo.io:4101 | | Devnet | rialo:devnet | https://devnet.rialo.io:4101 | | Localnet | rialo:localnet | http://localhost:4101 |

Utility Functions

import { 
  formatAddress,    // (address, chars?) => "5YNmS...VWr8"
  formatBalance,    // (kelvins, decimals?) => "1.0000"
  parseBalance,     // (rlo) => bigint (kelvins)
  isValidAddress,   // (address) => boolean (base58 validation)
  isRialoInstalled, // () => boolean
  getRialoProvider, // () => RialoProvider | undefined
  NETWORKS,         // Network configurations
} from '@cookillabs/wallet-adapter';

TypeScript

Full TypeScript support included:

import type {
  WalletAccount,
  TransactionRequest,
  TransactionResult,
  SignedMessage,
  NetworkConfig,
  WalletInfo,
  RialoProvider,
  RialoNetwork,
  RialoChain,
} from '@cookillabs/wallet-adapter';

Building a Compatible Wallet

To make your wallet compatible with this adapter, inject a provider at window.rialo:

window.rialo = {
  isRialo: true,
  version: '1.0.0',
  
  // Connection
  connect: async () => ['5YNmS1R9nNSCDzb5a7mMJ1dwK9uHeAAF4CmPEwKgVWr8'],
  disconnect: async () => {},
  isConnected: async () => true,
  getAccounts: async () => ['5YNmS1R9nNSCDzb5a7mMJ1dwK9uHeAAF4CmPEwKgVWr8'],
  
  // Transactions - MUST use real signing via window.rialo provider
  signTransaction: async (tx) => ({ signature: '...real signature...' }),
  sendTransaction: async (tx) => ({ hash: '...real tx hash...', status: 'pending' }),
  signAndSendTransaction: async (tx) => ({ hash: '...real tx hash...', status: 'pending' }),
  
  // Message signing
  signMessage: async (message) => ({ 
    signature: '...real signature...', 
    message, 
    address: '5YNmS1R9nNSCDzb5a7mMJ1dwK9uHeAAF4CmPEwKgVWr8' 
  }),
  
  // Network
  getNetwork: async () => 'rialo:devnet',
  switchNetwork: async (network) => {},
  getBalance: async (address) => '1000000000',
  
  // Events
  on: (event, callback) => () => {},
  removeListener: (event, callback) => {},
  removeAllListeners: (event) => {},
};

Publishing to NPM

cd packages/wallet-adapter
npm install
npm run build
npm publish --access public

License

MIT © Cookillabs