How to use @tg-wagmi/wagmi ?

[lifecoder1988]

Backgroud

@tg-wagmi/wagmi is a library that is a fork of the original @Wagmi package. The key difference in this fork is the added support for the Uxuy Wallet.

Like the original @Wagmi library, @tg-wagmi/wagmi provides utilities for building React-based decentralized applications (dApps) that interact with Ethereum and other EVM-compatible blockchains. It abstracts away many complexities related to wallet connections, contract interactions, and blockchain events.

In addition to the standard features offered by @Wagmi, the @tg-wagmi/wagmi fork extends functionality specifically to accommodate Uxuy Wallet, a multi-chain wallet solution. This makes it easier for developers who are integrating Uxuy Wallet into their dApps to use familiar wagmi components and APIs while benefiting from the additional wallet support.

There are two integration approaches for incorporating @tg-wagmi/wagmi into your project:

1. For New Projects:

• This approach is suitable for brand-new projects that have not yet integrated any blockchain wallet libraries. It is designed to be a straightforward setup where you can directly use @tg-wagmi/wagmi from the start. This library includes built-in support for the Uxuy Wallet, making it ideal for developers who want to integrate Uxuy from the outset without needing additional modifications.

step 1:

npm install @tg-wagmi/wagmi @tg-wagmi/connectors

step 2:

import { createConfig, http } from '@tg-wagmi/wagmi'
import { mainnet, sepolia } from '@tg-wagmi/wagmi/chains'
import { uxuyWallet } from '@tg-wagmi/wagmi/connectors'

export const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [uxuyWallet()],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

console.log(config)

2. For Existing Projects Using @wagmi:

• This approach is intended for projects that have already integrated the original @wagmi library. If your project is already using @wagmi and you want to add Uxuy Wallet support without disrupting the existing setup, you can replace the @wagmi package with @tg-wagmi/wagmi. This allows you to retain all existing functionalities while extending the project to support the Uxuy Wallet. The transition can be seamless since the two libraries share a common base, with @tg-wagmi/wagmi offering additional features specific to Uxuy.

step1 alias your existing package module:

{
  "dependencies": {
    "@wagmi/connectors": "npm:@tg-wagmi/connectors@^6.0.1",
    "wagmi": "npm:@tg-wagmi/wagmi@^3.0.1"
  }
}

step2 the code is just same as integrate wagmi:

//  check this doc  https://wagmi.sh/react/api/connectors/coinbaseWallet

import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { uxuyWallet } from 'wagmi/connectors'

export const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [uxuyWallet()],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

console.log(config)

In summary:

• Approach 1: Best for new projects, with direct integration of Uxuy Wallet support.
• Approach 2: Ideal for existing projects that need to extend support for Uxuy while maintaining existing wagmi functionality.