ngx-wagmi v0.0.5
ngx-wagmi
ngx-wagmi is a wagmi-compatible library for Angular 18, built entirely with Signal. It empowers Angular developers to seamlessly integrate Web3 functionality into their applications. With ngx-wagmi, you get a powerful suite of tools to interact with wallets, contracts, and blockchain networksβall optimized for Angular's reactive architecture.
π Features
ngx-wagmi supports a comprehensive set of Web3 functions, enabling robust blockchain interactions:
π Account Management
account.tsβ Get the current account details.accountEffect.tsβ Reactively handle account changes.switchAccount.tsβ Switch between connected accounts.disconnect.tsβ Disconnect the wallet.
π’ Balances & Transactions
balance.tsβ Fetch the balance of an account.transaction.tsβ Retrieve transaction details.transactionCount.tsβ Get the number of transactions from an account.transactionConfirmations.tsβ Check the number of confirmations for a transaction.sendTransaction.tsβ Send a transaction.waitForTransactionReceipt.tsβ Wait for a transaction receipt.
π Blockchain Data
block.tsβ Fetch block details.blockTransactionCount.tsβ Get the transaction count for a block.feeHistory.tsβ Retrieve historical fee data.gasPrice.tsβ Get the current gas price.estimateGas.tsβ Estimate gas usage for a transaction.
π¦ Contracts
deployContract.tsβ Deploy a smart contract.readContract.tsβ Read from a smart contract.readContracts.tsβ Read multiple smart contracts in a single call.simulateContract.tsβ Simulate a contract interaction.writeContract.tsβ Write data to a smart contract.
π§βπ€ ENS (Ethereum Name Service)
ensAddress.tsβ Resolve an ENS name to an address.ensName.tsβ Get the ENS name for an address.ensAvatar.tsβ Fetch the avatar for an ENS profile.ensResolver.tsβ Get the resolver for an ENS name.ensText.tsβ Retrieve ENS text records.
π οΈ Utility Functions
bytecode.tsβ Retrieve contract bytecode.storageAt.tsβ Read raw storage data at a given position.prepareTransactionRequest.tsβ Prepare a transaction request.proof.tsβ Generate a proof for a Merkle tree.
π Verification
verifyMessage.tsβ Verify a signed message.verifyTypedData.tsβ Verify typed data signatures.
π Reactivity
watchBlockNumber.tsβ Watch for new block numbers.watchBlocks.tsβ Watch for new blocks.watchPendingTransactions.tsβ Watch for pending transactions.watchContractEvent.tsβ Listen to contract events.
π‘οΈ Chain & Wallet Management
chains.tsβ Access supported chains.switchChain.tsβ Switch to a different chain.connect.tsβ Connect to a wallet.connections.tsβ Manage multiple connections.connectorClient.tsβ Access the connector client.walletClient.tsβ Use the wallet client.watchAsset.tsβ Add a token to the wallet.
π¦ Installation
Install ngx-wagmi via npm:
npm install ngx-wagmiπ οΈ Usage
1. Setup injection tokens
Highly recommended setup with ngx-seedkit for ready-to-use ConnectWallet supports widely-known wallets
In your app.config.ts. Check advanced example from demo page
import { http, createConfig } from '@wagmi/core'
import { mainnet, sepolia } from '@wagmi/core/chains'
import { provideTanStackQuery, QueryClient, withDevtools } from '@tanstack/angular-query-experimental';
import { provideWagmiConfig } from 'ngx-wagmi';
const config = createConfig({
chains: [mainnet, sepolia],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})
export const appConfig: ApplicationConfig = {
providers: [
...
provideTanStackQuery(new QueryClient(), withDevtools()),
provideWagmiConfig(config),
...
]
}2. Import ngx-wagmi and start using its functionalities in your Angular application:
import { injectConnect } from 'ngx-wagmi';
...
// Example: Connect to a wallet
connectM = injectConnect()
constructor() {
connectM.connect()
// or
await connectM.connectAsync()
}...π Documentation
WIP
π€ Contributing
Contributions are welcome! Feel free to open issues or submit pull requests on GitHub.
π License
This library is released under the MIT License.