URGENT RainbowKit + Wagmi + Web3Auth + WalletService

kaliasdeveloper · January 29, 2025, 3:54pm

Hi,
I have a React TypeScript project with wagmi and RainbowKit. I would like to add Web3Auth to RainbowKit and the ability to use Wallet Service. Where can I start? Is there a complete repository with everything needed? It would also be important to be able to distinguish, perhaps with a hook, whether we are connected with Web3Auth or with other wallets. Is it possible to have Wallet Service in my case?
Thanks

w3abot · January 29, 2025, 3:55pm

Hello Kalias Dev!

It’s great to hear that you’re integrating Web3Auth with RainbowKit and Wagmi in your React TypeScript project. Starting down this path opens up exciting possibilities for wallet service integration. Let’s get you pointed in the right direction!

Getting Started:
Web3Auth offers comprehensive guides and repositories for your requirements. You can begin by exploring our Web3Auth PnP Web SDK documentation.

Repository Example:
While there might not be an up-to-date, all-in-one repository specific to combining Web3Auth, RainbowKit, Wagmi, and WalletService, you can look at similar starter kits and modify them to suit your needs.

Integration Steps:

Integrate Web3Auth: Use the PnP Web SDK to initialize Web3Auth within your React project.
Combine with RainbowKit: Customize the login options and provide Web3Auth as one of the wallet options.
Implement Wagmi Hooks: Wagmi provides excellent hooks to manage wallet connections; you might use them to check connection status.
Create a Hook for Connection Check: You can create a custom hook to determine if the connection is via Web3Auth or another wallet.

Helpful Hooks:

Use useEffect or useLazyQuery to differentiate wallet connections by checking the provider or connection type.

If you encounter any specific issues during integration, please feel free to ask. We’re here to help!

Good luck with your integration, and let us know how it goes!

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

kaliasdeveloper · January 30, 2025, 1:44pm

I used Connector, But now widget dont appaer after login (Wallet Service). I’m using last version of all packages.

connect.tsx

import { darkTheme, lightTheme, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { WagmiProvider/*, http*/ } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { getDefaultConfig } from '@rainbow-me/rainbowkit'
import { getOtherWallets, getPopularWallets, getV2Wallets } from './rainbow';
import { getWalletClient as CoreGetWalletClient } from 'wagmi/actions';
import {
  Web3AuthInnerContext,
  Web3AuthProvider,
} from "@web3auth/modal-react-hooks";
import { useWalletServicesPlugin, WalletServicesProvider } from "@web3auth/wallet-services-plugin-react-hooks";
import web3AuthContextConfig, { web3auth } from './w3aContext';
import { WalletServicesPlugin } from '@web3auth/wallet-services-plugin';

export const wagmiConfig = getDefaultConfig({
  appName: 'Kalias',
  projectId: import.meta.env.VITE_WC_PROJECT_ID,
  chains: [eth],
  wallets: [getPopularWallets({ wallets: []/* particleWallets */ }), getV2Wallets(), getOtherWallets()],
  //transports: {
  // http, 
  //},
})

const queryClient = new QueryClient()

export const getWalletClient = () => CoreGetWalletClient(wagmiConfig);

export const WalletConnect = ({ children }: PropsWithChildren<unknown>) => {
  const { colorMode } = useColorMode();

   const walletServicesPlugin = new WalletServicesPlugin({
    wsEmbedOpts: {
      
    },
    walletInitOptions: { whiteLabel: { showWidgetButton: true, buttonPosition: "top-right", hideSwap:true }, },
  });

  const initWeb3Auth = useCallback(async () => {
    try {
     // await web3auth.init(); return error
    } catch (error) {
      console.error("failed to init w3a error: " + error);
    }
    try{
    web3auth.addPlugin(walletServicesPlugin);
    web3auth.getPlugin(walletServicesPlugin.name);
    
    } catch(e){
      console.log("failed to add plugin error: " + e); // no error
    }
  }, []);

  useEffect(() => {
    initWeb3Auth();
  }, [initWeb3Auth]);

  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <Web3AuthProvider config={web3AuthContextConfig}>
          <WalletServicesProvider context={Web3AuthInnerContext}>
            <RainbowKitProvider theme={theme[colorMode]}>
              {children}
            </RainbowKitProvider>
          </WalletServicesProvider>
        </Web3AuthProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

RainbowWeb3authConnector.tsx

import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
import { Web3Auth } from "@web3auth/modal";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { CHAIN_NAMESPACES, UX_MODE, WALLET_ADAPTERS, WEB3AUTH_NETWORK } from "@web3auth/base";
import { Wallet, WalletDetailsParams } from "@rainbow-me/rainbowkit";
import { createConnector as createWagmiConnector } from "wagmi";


const clientId = "xxx";

export const chainConfig = {
  chainNamespace: CHAIN_NAMESPACES.EIP155,
  chainId: '0x' + eth.id.toString(16),
  rpcTarget: eth.rpcUrls.default.http[0],
  displayName: eth.name,
  blockExplorerUrl: eth.blockExplorers.default.url,
};

const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });

const web3AuthInstance = new Web3Auth({
  clientId,
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
  privateKeyProvider,
  uiConfig: {
    uxMode: UX_MODE.POPUP,
    modalZIndex: "99999999999999999",
  }
});


export const rainbowWeb3AuthConnector = (): Wallet => ({
  id: "web3auth",
  name: "social",
  rdns: "web3auth",
  iconUrl: "https://web3auth.io/images/web3authlog.png",
  iconBackground: "#fff",
  installed: true,
  downloadUrls: {},
  createConnector: (walletDetails: WalletDetailsParams) =>
    createWagmiConnector((config) => ({
      ...Web3AuthConnector({
        web3AuthInstance,
        modalConfig: {
          [WALLET_ADAPTERS.AUTH]: {
            label: "openlogin",
            loginMethods: {
              google: {
                name: "google",
                showOnModal: true,
                mainOption: true
              },
              email_passwordless: {
                name: "email_passwordless",
                showOnModal: true,
              },            },
          },
        },}
        )(config),
      ...walletDetails,
    })),
});

w3aContext.tsx


import { WEB3AUTH_NETWORK } from "@web3auth/base";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { Web3Auth, Web3AuthOptions } from "@web3auth/modal";
import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
import { chainConfig } from "./RainbowWeb3authConnector";

const clientId = "xxx";

const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: {
    chainConfig,
  },
});

const web3AuthOptions: Web3AuthOptions = {
  chainConfig,
  clientId,
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
  privateKeyProvider,
};

 const walletServicesPlugin = new WalletServicesPlugin({
  wsEmbedOpts: {},
  walletInitOptions: { whiteLabel: { showWidgetButton: true, buttonPosition: "top-right", hideSwap:true }, },
});

export const web3auth = new Web3Auth(web3AuthOptions);

const web3AuthContextConfig = {
  web3AuthOptions,
  plugins: [walletServicesPlugin],
};

export default web3AuthContextConfig;

yashovardhan · February 3, 2025, 12:30pm

Hi @kaliasdeveloper,

I noticed that the wallet services widget does show up in our example app. Could you please take a look at the configuration? The web3auth instance has all the code you need.

Here’s the code: web3auth-pnp-examples/web-modal-sdk/wagmi-examples/wagmi-modal-example/src/Web3AuthConnectorInstance.tsx at main · Web3Auth/web3auth-pnp-examples · GitHub

You can also try this app: https://wagmi-modal-example.vercel.app/

kaliasdeveloper · February 4, 2025, 11:10am

Hi @yashovardhan
I added connector to rainbow:

RainbowWeb3authConnector.tsx

export const rainbowWeb3AuthConnector = (): Wallet => ({
  id: "web3auth",
  name: "Google & Email",
  rdns: "web3auth",
  iconUrl: "https://web3auth.io/images/web3authlog.png",
  iconBackground: "#fff",
  installed: true,
  downloadUrls: {},
  createConnector: (walletDetails: WalletDetailsParams) =>
    createWagmiConnector((config) => ({
      ...Web3AuthConnectorInstance()(config),
      ...walletDetails,
    })),
});

Your suggestion here:

w3aConnectorInstance.tsx

import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
import { Web3Auth } from "@web3auth/modal";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK, WALLET_ADAPTERS, UX_MODE } from "@web3auth/base";
import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";

const clientId =
  "xxx";

export default function Web3AuthConnectorInstance() {
  // Create Web3Auth Instance
  const name = "My App Name";
  const chainConfig = {
    name,
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: '0x' + eth.id.toString(16),
    rpcTarget: eth.rpcUrls.default.http[0],
    displayName: eth.name,
    blockExplorerUrl: eth.blockExplorers.default.url,
  };

  const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });

  const web3AuthInstance = new Web3Auth({
    clientId,
    web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
    privateKeyProvider,
    uiConfig: {
      //   useLogoLoader: true,
      //   logoLight: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
      //   logoDark: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
      //   defaultLanguage: "en",
      //   theme: {
      //     primary: "primary",
      //   },
      uxMode: UX_MODE.POPUP,
      modalZIndex: "99999999999999999",
    }
  });

  const walletServicesPlugin = new WalletServicesPlugin({
    walletInitOptions: {
      whiteLabel: {
        showWidgetButton: true,
        buttonPosition: "top-right",
        hideSwap: true
      }
    }
  });
  web3AuthInstance.addPlugin(walletServicesPlugin);

  const modalConfig = {
    [WALLET_ADAPTERS.AUTH]: {
      label: "openlogin",
      loginMethods: {
        google: {
          name: "google",
          showOnModal: true,
          mainOption: true
        },
        sms_passwordless: {
          name: "sms_passwordless",
          showOnModal: false
        }
      },
      showOnModal: true,
    },
  }

  return Web3AuthConnector({
    web3AuthInstance,
    modalConfig,
  });
}

connect.tsx

export const WalletConnect = ({ children }: PropsWithChildren<unknown>) => {
  const { colorMode } = useColorMode();
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider theme={theme[colorMode]}>
          {children}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

App.tsx

const App = ({ children }: { children: React.ReactNode }) => {
  return (
    <ChakraProvider
      theme={theme}
      colorModeManager={customLocalStorageManager as any}
      toastOptions={{ defaultOptions: TOAST_BASE_OPTIONS }}
    >
      <ToastContainer />
      <WalletConnect>
        <GlobalModalManager.Provider>
          <ColorModeScript initialColorMode='dark' />
          <Layout>{children}</Layout>
        </GlobalModalManager.Provider>
      </WalletConnect>
    </ChakraProvider>
  );
};

On rainbow I see web3auth, I connect correctly but in the end I don’t see the widget of web3auth (Wallet Service)

kaliasdeveloper · February 4, 2025, 3:39pm

mhh button seems built but is empty and I dont see it on page. I also setted svg as logo.
@yashovardhan

index.html

<div class="absolute top-4 right-4">
    <!---->
</div>