Convert Figma logo to code with AI

WalletConnect logowalletconnect-monorepo

WalletConnect Monorepo

1,292
645
1,292
57

Top Related Projects

Cross-platform, cross-blockchain wallet library.

:globe_with_meridians: :electric_plug: The MetaMask browser extension enables browsing Ethereum blockchain enabled websites

3,875

🌈‒ the Ethereum wallet that lives in your pocket

a free (libre) open source, mobile OS for Ethereum

Quick Overview

The WalletConnect/walletconnect-monorepo is a collection of packages and tools that enable secure communication between mobile wallets and dapps (decentralized applications) on the web. It provides a standardized protocol for connecting wallets to dapps, allowing users to interact with blockchain-based applications using their mobile devices.

Pros

  • Cross-Platform Compatibility: WalletConnect supports a wide range of mobile wallets and dapps, making it a versatile solution for connecting users to the decentralized ecosystem.
  • Secure Communication: The protocol uses end-to-end encryption to ensure secure data transfer between the wallet and the dapp, protecting user information and transactions.
  • Improved User Experience: By allowing users to interact with dapps using their mobile wallets, WalletConnect enhances the overall user experience and reduces the friction associated with web-based blockchain interactions.
  • Ecosystem Integration: The project is widely adopted by the blockchain community, with support from various wallet providers and dapp developers, making it a reliable and well-supported solution.

Cons

  • Complexity: The WalletConnect ecosystem can be complex, with multiple packages and tools that may require a learning curve for new users or developers.
  • Dependency on Mobile Wallets: The project's functionality is heavily dependent on the availability and compatibility of mobile wallets, which may limit its usefulness in certain scenarios.
  • Potential Security Risks: While the protocol aims to provide secure communication, there is always a risk of vulnerabilities or potential security breaches that could compromise user data or funds.
  • Ongoing Maintenance: As a rapidly evolving ecosystem, the WalletConnect project requires continuous maintenance and updates to keep up with the changing landscape of blockchain technologies and user needs.

Code Examples

Here are a few code examples demonstrating the usage of the WalletConnect library:

// Connecting a wallet to a dapp
import WalletConnect from "@walletconnect/client";

const connector = new WalletConnect({
  bridge: "https://bridge.walletconnect.org", // Required
  qrcodeModal: require("@walletconnect/qrcode-modal").default,
});

// Check if connection is already established
if (!connector.connected) {
  // create new session
  await connector.createSession();
}

// Subscribe to connection events
connector.on("connect", (error, payload) => {
  if (error) {
    throw error;
  }

  // Get provided accounts and chainId
  const { accounts, chainId } = payload.params[0];
});
// Sending a transaction
import WalletConnect from "@walletconnect/client";
import { ethers } from "ethers";

const connector = new WalletConnect({
  bridge: "https://bridge.walletconnect.org",
  qrcodeModal: require("@walletconnect/qrcode-modal").default,
});

// Send transaction
const txParams = {
  to: "0x...", // Required
  from: connector.accounts[0], // Required
  data: "0x...", // Optional
  value: "0x...", // Optional
  gasLimit: "0x...", // Optional
  gasPrice: "0x...", // Optional
};

const txHash = await connector.sendTransaction(txParams);
console.log(txHash);
// Signing a message
import WalletConnect from "@walletconnect/client";
import { ethers } from "ethers";

const connector = new WalletConnect({
  bridge: "https://bridge.walletconnect.org",
  qrcodeModal: require("@walletconnect/qrcode-modal").default,
});

// Sign message
const message = "Hello, WalletConnect!";
const signature = await connector.signMessage([message]);
console.log(signature);

Getting Started

To get started with the WalletConnect library, follow these steps:

  1. Install the required packages:
npm install @walletconnect/client @walletconnect/qrcode-modal
  1. Import the necessary modules and create a new WalletConnect instance:
import WalletConnect from "@walletconnect/client";
import

Competitor Comparisons

Cross-platform, cross-blockchain wallet library.

Pros of wallet-core

  • Focuses on core wallet functionality and supports multiple cryptocurrencies
  • Written in C++, offering better performance for low-level operations
  • Provides a comprehensive set of cryptographic functions and utilities

Cons of wallet-core

  • Limited to wallet-specific features, lacking broader connectivity options
  • Requires more effort to integrate with different platforms due to C++ codebase
  • Smaller community and fewer contributors compared to walletconnect-monorepo

Code Comparison

wallet-core (C++):

TWPublicKey *TWPrivateKeyGetPublicKeySecp256k1(const TWPrivateKey *pk, bool compressed) {
    try {
        const auto publicKey = pk->impl.getPublicKey(TWPublicKeyTypeSECP256k1);
        return new TWPublicKey{ PublicKey(publicKey.bytes, compressed ? PublicKey::compressed : PublicKey::uncompressed) };
    } catch (...) {
        return nullptr;
    }
}

walletconnect-monorepo (TypeScript):

export async function signPersonalMessage(
  privateKey: string,
  message: string
): Promise<string> {
  const msgHash = hashPersonalMessage(message)
  const sig = ecsign(msgHash, Buffer.from(privateKey, 'hex'))
  return encodeSignature([sig.v, sig.r, sig.s])
}

The code snippets demonstrate the different approaches and languages used in each project, with wallet-core focusing on low-level key operations and walletconnect-monorepo providing higher-level signing functions.

:globe_with_meridians: :electric_plug: The MetaMask browser extension enables browsing Ethereum blockchain enabled websites

Pros of metamask-extension

  • More established and widely adopted browser extension for Ethereum interactions
  • Extensive features including token swaps, NFT support, and multi-chain compatibility
  • Active development with frequent updates and improvements

Cons of metamask-extension

  • Limited to browser environments, not suitable for mobile or native applications
  • Higher complexity due to its comprehensive feature set
  • Potential security risks as it manages private keys directly in the browser

Code Comparison

metamask-extension:

const provider = await detectEthereumProvider();
if (provider) {
  console.log('Ethereum successfully detected!');
  // Initialize your app
} else {
  console.log('Please install MetaMask!');
}

walletconnect-monorepo:

import WalletConnect from "@walletconnect/client";
const connector = new WalletConnect({
  bridge: "https://bridge.walletconnect.org",
  qrcodeModal: QRCodeModal
});

The metamask-extension code focuses on detecting the Ethereum provider injected by the extension, while walletconnect-monorepo initializes a connection using a bridge and QR code modal, showcasing its platform-agnostic approach.

3,875

🌈‒ the Ethereum wallet that lives in your pocket

Pros of Rainbow

  • More user-friendly interface, focused on end-user experience
  • Supports a wider range of tokens and NFTs
  • Includes additional features like portfolio tracking and price alerts

Cons of Rainbow

  • Less flexible for developers looking to integrate wallet functionality
  • More opinionated design choices, which may not suit all projects
  • Potentially slower to adopt new blockchain standards or protocols

Code Comparison

WalletConnect-monorepo (TypeScript):

import WalletConnect from "@walletconnect/client";
import QRCodeModal from "@walletconnect/qrcode-modal";

const connector = new WalletConnect({
  bridge: "https://bridge.walletconnect.org",
  qrcodeModal: QRCodeModal,
});

Rainbow (React Native):

import { rainbow } from '@rainbow-me/rainbow-kit';

const App = () => (
  <rainbow.WalletProvider>
    <YourApp />
  </rainbow.WalletProvider>
);

The WalletConnect-monorepo code shows a more low-level implementation, allowing for greater customization. Rainbow's code demonstrates a higher-level abstraction, simplifying integration but potentially limiting flexibility.

a free (libre) open source, mobile OS for Ethereum

Pros of status-mobile

  • Comprehensive mobile app for Ethereum interactions, including messaging and wallet functionality
  • Active development with frequent updates and community engagement
  • Extensive documentation and guides for contributors

Cons of status-mobile

  • Larger codebase and more complex architecture due to broader feature set
  • Steeper learning curve for new developers compared to walletconnect-monorepo
  • Mobile-specific focus may limit cross-platform compatibility

Code Comparison

status-mobile (React Native):

import React from 'react';
import { View, Text } from 'react-native';
import { connect } from 'react-redux';

const WalletScreen = ({ balance }) => (
  <View>
    <Text>Balance: {balance}</Text>
  </View>
);

walletconnect-monorepo (TypeScript):

import WalletConnect from "@walletconnect/client";

const connector = new WalletConnect({
  bridge: "https://bridge.walletconnect.org",
  qrcodeModal: QRCodeModal
});

connector.on("connect", (error, payload) => {
  console.log("Connected!");
});

The status-mobile code snippet showcases a React Native component for displaying wallet balance, while the walletconnect-monorepo example demonstrates the setup of a WalletConnect client. status-mobile focuses on mobile app development, whereas walletconnect-monorepo provides a more generic connection solution for various wallet types.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

WalletConnect v2.x.x

Open protocol for connecting Wallets to Dapps - https://walletconnect.com

Setup

  1. Ensure nodejs and npm
  2. Clone the repository
  3. Install all package dependencies, by running npm install from the root folder

Running checks for all packages

To ensure all packages lint, build and test correctly, we can run the following command from the root folder:

For tests to pass in the following command, you will need your own TEST_PROJECT_ID value, which will be generated for you when you set up a new project on WalletConnect Cloud.

TEST_PROJECT_ID=YOUR_PROJECT_ID npm run check

Command Overview

  • clean - Removes build folders from all packages
  • lint - Runs eslint checks
  • prettier - Runs prettier checks
  • build - Builds all packages
  • test - Tests all packages
  • check - Shorthand to run lint, build and test commands
  • reset - Shorthand to run clean and check commands

Troubleshooting

  1. If you are experiencing issues with installation ensure you install npm i -g node-gyp
  2. You will need to have xcode command line tools installed
  3. If there are issues with xcode command line tools try running
sudo xcode-select --switch /Library/Developer/CommandLineTools
sudo xcode-select --reset

License

Apache 2.0

NPM DownloadsLast 30 Days