How to use @uxuyalpha/rainbowkit ?

[lifecoder1988]

Background

@uxuyalpha/rainbowkit is a fork of the popular RainbowKit library, designed specifically to add support for the Uxuy Wallet. Much like RainbowKit, which provides a rich UI for integrating wallet connections in Ethereum and EVM-compatible dApps, @uxuyalpha/rainbowkit offers a developer-friendly interface to streamline the wallet connection process, but with enhanced compatibility for Uxuy Wallet.

Key Features:

1. Seamless Wallet Connection UI: Similar to the original RainbowKit, this fork allows developers to easily create a customizable and responsive wallet connection interface with support for a variety of Ethereum wallets.
2. Uxuy Wallet Integration: The main distinction of this fork is its out-of-the-box support for Uxuy Wallet, making it ideal for projects that require multi-chain wallet support and want to include Uxuy as one of the primary wallets for users.
3. Customizable and Extendable: Like the original RainbowKit, @uxuyalpha/rainbowkit is highly customizable, allowing developers to modify the appearance and behavior of the wallet modal to fit the branding and user experience of their dApp.

step 1 change deps:

{
  "dependencies": {
    "@rainbow-me/rainbowkit": "npm:@uxuyalpha/rainbowkit@^3.4.0"
  }
}

step 2 demo :

import {

  uxuyWallet,

} from "@rainbow-me/rainbowkit/wallets";


const popularWalletList: WalletList = [
  {
    // Group name with standard name is localized by rainbow kit
    groupName: "Popular",
    wallets: [
      uxuyWallet,
    ],
  },
];

export const getRainbowKitConfig = once(() =>
  getDefaultConfig({
    appName: APP_NAME,
    projectId: WALLET_CONNECT_PROJECT_ID,
    chains: [arbitrum, avalanche, ...(isDevelopment() ? [arbitrumGoerli, avalancheFuji] : [])],
    transports: {
      [arbitrum.id]: http(),
      [avalanche.id]: http(),
      [arbitrumGoerli.id]: http(),
      [avalancheFuji.id]: http(),
    },
    wallets: [...popularWalletList, ],
  })
);

export default function WalletProvider({ children }) {
  return (
    <QueryClientProvider client={queryClient}>
      <WagmiProvider config={getRainbowKitConfig()}>{children}</WagmiProvider>
    </QueryClientProvider>
  );
}

[flapshdev]

need compatible code for @rainbowme/[email protected]

which requires [email protected], see https://github.com/rainbow-me/rainbowkit/blob/%40rainbow-me/rainbowkit%402.1.7/package.json#L75

[lifecoder1988]

hi :) you can try repo below ：

• https://github.com/uxuyconnect/rainbowkit/tree/uxuy-2.1.7
• https://github.com/uxuycom/wagmi/tree/uxuy-2.12.9

you can do integeration in 3 steps .

1. build wagmi/tree/uxuy-2.12.9 and publish to private registery with version. [email protected] @wagmi/[email protected]
2. build rainbowkit/tree/uxuy-2.1.7 and publish to private registery with version $version [any as you want]
3. change your project deps . sth like package.json , registery url .

[lifecoder1988]

@flapshdev alternative way , i have build these package in private registery , you can download it and sync to your own .

my private demo registery info:

url : https://packages.aliyun.com/66f56b60eef79c23d7b00604/npm/npm-registry/
username : 66e2dcf58043c5959cd91058
password : K[V0HGUWcIuB

@rainbow-me/[email protected]
[email protected]
@wagmi/[email protected]

it will be maintanced only for a few days .