Ergo Wallet Svelte Component

A Svelte component library to easily integrate Ergo wallets into your applications.

🚀 Features

• ✅ Ready-to-use Wallet Component – Connection button with dropdown info
• ✅ Multi-wallet support – Nautilus and SAFEW
• ✅ Automatic detection – Detects which wallets are installed
• ✅ Reactive state management – Using Svelte stores
• ✅ TypeScript – Fully typed
• ✅ Included UI Components – No need for shadcn-svelte

📦 Installation

Since the package is hosted on GitHub, install it with:

npm install github:ergo-basics/wallet-svelte-component
# or
pnpm add github:ergo-basics/wallet-svelte-component
# or
yarn add github:ergo-basics/wallet-svelte-component

🎯 Basic Usage

<script>
  import { WalletButton } from 'wallet-svelte-component';
</script>

<WalletButton />

📚 API

WalletButton

Main component that displays a button to connect/disconnect the wallet.

Props:

• explorerUrl (optional): Block explorer URL. Default: "https://explorer.ergoplatform.com/en/addresses/"

<WalletButton explorerUrl="https://explorer.ergoplatform.com/en/addresses/" />

Stores

You can access the wallet state using the exported stores:

<script>
  import { 
    walletConnected,
    walletAddress,
    walletBalance,
    walletManager 
  } from 'wallet-svelte-component';
</script>

{#if $walletConnected}
  <p>Address: {$walletAddress}</p>
  <p>Balance: {Number($walletBalance.nanoErgs) / 1e9} ERG</p>
{/if}

WalletManager

Handles wallet connection and state.

Methods:

• connectWallet(walletId: string): Connects a specific wallet
• disconnectWallet(): Disconnects the current wallet
• refreshBalance(): Refreshes the balance
• openModal(): Opens the wallet selection modal
• closeModal(): Closes the modal

<script>
  import { walletManager } from 'wallet-svelte-component';
  
  async function connect() {
    await walletManager.connectWallet('nautilus');
  }
</script>

WalletAddressChangeHandler

Component that detects address changes and prompts the user to refresh the page.

<script>
  import { WalletAddressChangeHandler } from 'wallet-svelte-component';
</script>

<WalletAddressChangeHandler />

🎨 Styling

The library uses Tailwind CSS for styling. Make sure Tailwind is configured in your project.

CSS variables you can customize:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
}

🔧 Development

# Install dependencies
npm install

# Package the library
npm run package

# Type checking
npm run check

📝 Full Example

<script>
  import { 
    WalletButton, 
    WalletAddressChangeHandler,
    walletConnected,
    walletAddress,
    walletBalance 
  } from 'wallet-svelte-component';
</script>

<header>
  <h1>My Ergo App</h1>
  <WalletButton />
</header>

{#if $walletConnected}
  <main>
    <h2>Welcome!</h2>
    <p>Address: {$walletAddress}</p>
    <p>Balance: {Number($walletBalance.nanoErgs) / 1e9} ERG</p>
    
    {#if $walletBalance.tokens.length > 0}
      <h3>Tokens:</h3>
      <ul>
        {#each $walletBalance.tokens as token}
          <li>{token.tokenId}: {Number(token.amount)}</li>
        {/each}
      </ul>
    {/if}
  </main>
{:else}
  <main>
    <p>Please connect your wallet to continue</p>
  </main>
{/if}

<WalletAddressChangeHandler />

🤝 Contributing

Contributions are welcome! Please open an issue or pull request.

📄 License

MIT

🔗 Links

• Ergo Platform – https://ergoplatform.org/
• Nautilus Wallet – https://github.com/capt-nemo429/nautilus-wallet
• SAFEW Wallet – https://github.com/ThierryM1212/SAFEW