RainbowKit + Wagmi + Web3Auth + WalletService

Help - Plug n Play PnP Web SDKs
4

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/

5

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)

6

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>
7

Hey @kaliasdeveloper

It is not possible for me to debug without being able to reproduce the issue. Is it possible for you to share a sample with me where you are facing this?

8

can you give your GitHub username and I share with you code @yashovardhan

9

Or please tell me if you want to do it another way @yashovardhan

10

I create this link with logs: @yashovardhan https://web3auth-test.vercel.app/

11

@yashovardhan any news

12

I created repo minimal if you need @yashovardhan

13

sorry, but I’m paying the scale plan but I haven’t used it yet. If you can’t fix it please let me know and I’ll understand @yashovardhan

14

Hey Kalias,

Sorry for missing your replies. I tried replicating this at that time but I wasn’t able to. I see you have created a minimal repository for this, can you share the link here directly? Also you can directly join our Office Hours and talk to us directly and we will solve this instantly during that time.

15

Can you send me github username?

16
17

invite sent in web3auth-test repo, let me know here if received @yashovardhan

18

received invite? @yashovardhan

19

Hey @kaliasdeveloper

I tested you app and was getting the issue. I have already raised it with one of our senior developers. I guess it is something in the configuration. In the meantime I have added wallet services in our rainbow kit example where it is working as expected: web3auth-pnp-examples/web-modal-sdk/wagmi-examples/rainbowkit-modal-example at main · Web3Auth/web3auth-pnp-examples · GitHub

20

Okay we got it fixed, it was a polyfill issue. I’m pushing the code on your repository.

21

oh thanks, I’m checking

22

It works now, I was curious to know why separating email and google in two connectors, the first does not work and the second does. If I exchange them the same thing. I left a comment on src- config-wallet-connect.tsx. Thanks in advance. @yashovardhan

23

I’m unsure about your question. You can use google and email passwordless together, you just need to make separate calls for them. If you are using no modal sdk then you have to make two connectors since they are individual connections for wagmi.