Vue Web3 Tip

A Vue 3 component for Web3 cryptocurrency tipping with multi-chain support.

Features

• 🔗 Multi-chain support (Ethereum, Polygon, Solana)
• 🦊 MetaMask integration for EVM chains
• 👻 Phantom wallet support for Solana
• 💰 Customizable preset amounts
• 🎨 Customizable styling
• 📱 Responsive design
• 🌙 Dark mode compatible
• 📦 TypeScript support

Installation

npm install vue-web3-tip
# or
pnpm add vue-web3-tip
# or
yarn add vue-web3-tip

Usage

Basic Usage

<script setup>
import { Web3Tip } from 'vue-web3-tip'
import 'vue-web3-tip/style.css'
</script>

<template>
  <Web3Tip
    ethereum-address="0x..."
    polygon-address="0x..."
    solana-address="..."
  />
</template>

With Events

<script setup>
import { Web3Tip } from 'vue-web3-tip'

function handleSuccess(txHash, amount, chain) {
  console.log(`Received ${amount} on ${chain}! TX: ${txHash}`)
}

function handleError(error) {
  console.error('Tip failed:', error)
}
</script>

<template>
  <Web3Tip
    ethereum-address="0x..."
    @success="handleSuccess"
    @error="handleError"
  />
</template>

Global Registration

// main.ts
import { createApp } from 'vue'
import VueWeb3Tip from 'vue-web3-tip'
import 'vue-web3-tip/style.css'

const app = createApp(App)
app.use(VueWeb3Tip)
app.mount('#app')

Props

Prop	Type	Default	Description
showLabel	boolean	true	Show the header label
size	'small' | 'medium' | 'large'	'medium'	Component size
ethereumAddress	string	''	Ethereum wallet address
polygonAddress	string	''	Polygon wallet address
solanaAddress	string	''	Solana wallet address
defaultChain	'ethereum' | 'polygon' | 'solana'	'ethereum'	Default selected chain
presetAmounts	string[]	['0.01', '0.05', '0.1', '0.5']	Preset amount buttons

Events

Event	Payload	Description
connected	(address: string, chain: string)	Wallet connected
disconnected	-	Wallet disconnected
success	(txHash: string, amount: string, chain: string)	Tip sent successfully
error	(error: Error)	Error occurred

Styling

The component uses CSS custom properties for easy theming:

.web3-tip {
  --web3-tip-bg: rgba(255, 255, 255, 0.1);
  --web3-tip-border: rgba(255, 255, 255, 0.2);
  --web3-tip-primary: #3b82f6;
  --web3-tip-success: #10b981;
  --web3-tip-error: #ef4444;
}

Requirements

• Vue 3.3+
• MetaMask browser extension (for Ethereum/Polygon)
• Phantom wallet (for Solana)

License

MIT © AimerFeng

Links

• GitHub
• npm
• Demo