Signing Transactions

The Multicahain Wallet Connector tool enables developers to seamlessly integrate Ethereum-compatible transaction signing into their dApps. This section guides you through how to perform this task using two primary environments:

• Framework-based environments (e.g., Webpack, Vite, Next.js)

• CommonJS / Vanilla HTML via CDN (ideal for rapid prototyping or lightweight apps)

📦 1. Framework Usage

📁 Installation

First, install the NPM library in your project:

npm install multichain-wallet-connector

Or if you use Yarn:

yarn add multichain-wallet-connector

This will:

• Add the library to your node_modules

• Automatically include all required dependencies (e.g., ethers.js, js-sha3)

• Enable both ES Module (import) and CommonJS (require) usage

🧠 Code Example (Framework/ES6)

Here's a minimal setup for connecting to a wallet and signing a transaction:

import { connectWallet, signTransaction } from 'multichain-wallet-connector';

let provider, account;

async function connectWallet() {
  const response = await WalletConnector.connectWallet({ chainId: 10 }); // Optimism chain
  provider = response.provider;
  account = response.account;
}

async function signTransaction() {
  if (!provider || !account) await connectWallet();

  const txHash = await signTransaction(provider, {
    from: account,
    to: '0x3c04611245Ec9E2A7596733Cd2547B8F4E824d54', // Replace with recipient address
    value: '0x' + (0.00000001 * 1e18).toString(16),   // Convert ETH to Wei
    gasLimit: '0x5208', // 21000 gas (standard for ETH transfer)
    gasPrice: '0x' + (50 * 1e9).toString(16), // 50 Gwei
  });

  console.log('Transaction Hash:', txHash);
}

For typescript users, declare as a module in your types file:

declare module 'multichain-wallet-connector';

💡 Notes

• Always check for wallet connection before signing.

• Pass in the correct chainId (e.g., 10 for Optimism).

🌐 2. CommonJS via CDN (HTML/Vanilla JS)

For static or simple projects, include the WalletConnector SDK via CDN

✅ Embedding the Script

<script src="https://cdn.jsdelivr.net/gh/Nworah-Gabriel/multichain-wallet-connector@v1.0.3/dist/connector.umd.min.js"></script>

Ensure this is added before your custom scripts in the HTML body.

🧠 Code Example (CDN/Vanilla JS)

<script>
  let PROVIDER, ACCOUNT;

  async function connect() {
    const response = await WalletConnector.connectWallet({ chainId: 10 });
    PROVIDER = response.provider;
    ACCOUNT = response.account;
  }

  async function SignTransaction() {
    if (!PROVIDER || !ACCOUNT) await connect();

    const txHash = await WalletConnector.signTransaction(PROVIDER, {
      from: ACCOUNT,
      to: '0x3c04611245Ec9E2A7596733Cd2547B8F4E824d54',
      value: '0x' + (0.00000001 * 1e18).toString(16),
      gasLimit: '0x5208',
      gasPrice: '0x' + (50 * 1e9).toString(16)
    });

    console.log('Transaction sent:', txHash);
  }
</script>

<button onclick="SignTransaction()">Sign Transaction</button>

🛠 Best Practices

• Always confirm the user’s network before submitting a transaction.

• Catch and handle user rejection errors gracefully.

• Display a loader or toast notification while the transaction is pending.

• Validate ETH input and addresses on the frontend before passing to signTransaction.

📬 Conclusion

This library abstracts away complex provider logic while preserving full control over EVM-compatible transactions. Whether you're working with a complex JavaScript framework or just plain HTML, signing transactions is quick and reliable using the approaches outlined above.