We have implemented a custom solution in which we have three social auths(namely google, discord and twitter) and three external wallets(namely metamask, coinbase, walletconnect).
We are now able to login using all the other ones besides walletconnect.
For walletconnect, we always get this error-
Let me know what could be the fix.
Thank you.
@shubbham.jain Thanks for your recent post.
Your issue has been forwarded to our team and we will get back to with further updates once more information becomes available.
Hello @vjgee ,
Thanks for responding and forwarding our request to your team.
Let us know what could be the reason that WalletConnect is not working. This is a priority task and requires immediate attention. Please help us resolve this immediately.
Thank you.
@shubbham.jain Can you help us replicate this issue by providing your Dapp link to check once from our side ? Also, which version of WalletConnect are you using V1 or V2? Please provide your implementation code as well.
Hi @vjgee ,
Currently we don’t have the app deployed, so I won’t be available to share the link.
For WalletConnect, we are using V2. More specifically we are using package @web3auth/wallet-connect-v2-adapter with version 5.2.0.
We tried some other versions of the package but none of them solved the issue.
Implementation-
Also just to clarify we are using wagmi with web3Auth for web3 connectivity.
Web3Auth setup file with all adapters setup.
import { Chain } from "wagmi";
import { CHAIN_NAMESPACES } from "@web3auth/base";
import { Web3AuthNoModal } from "@web3auth/no-modal";
import { CoinbaseAdapter } from "@web3auth/coinbase-adapter";
import { MetamaskAdapter } from "@web3auth/metamask-adapter";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { WalletConnectV2Adapter } from "@web3auth/wallet-connect-v2-adapter";
export default function Web3AuthNoModalConnectorInstance(chains: Chain[]) {
if (typeof window !== "undefined") {
const web3AuthInstance = new Web3AuthNoModal({
clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string,
chainConfig: {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: `0x${chains[0].id.toString(16)}`,
rpcTarget: chains[0].rpcUrls.default.http[0],
displayName: chains[0].name,
tickerName: chains[0].nativeCurrency?.name,
ticker: chains[0].nativeCurrency?.symbol,
},
web3AuthNetwork: "testnet",
enableLogging: false,
});
const verifier = [verifier];
const openloginAdapter = new OpenloginAdapter({
clientId: [clientId],
adapterSettings: {
redirectUrl: [redirectUrl],
clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string,
uxMode: "popup",
loginConfig: {
google: {
name: "Google",
verifier,
verifierSubIdentifier: [google sub verifier name],
typeOfLogin: "google",
clientId: [google client Id],
},
twitterauth0: {
name: "Twitter",
verifier, // Pass the Verifier name here. eg. w3a-agg-example
verifierSubIdentifier: [twitter sub verifier name],
typeOfLogin: "twitter",
clientId: [twitter client Id],
},
discordauth0: {
name: "Discord",
verifier, // Pass the Verifier name here. eg. w3a-agg-example
verifierSubIdentifier: [discord sub verifier name],
typeOfLogin: "discord",
clientId: [discord client Id],
},
},
},
});
const metamaskAdapter = new MetamaskAdapter({
clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string,
sessionTime: 3600,
web3AuthNetwork: "testnet",
});
const walletConnectV2Adapter = new WalletConnectV2Adapter({
clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string,
sessionTime: 3600,
web3AuthNetwork: "testnet",
});
const coinbaseAdapter = new CoinbaseAdapter({
clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string,
sessionTime: 3600,
web3AuthNetwork: "testnet",
});
web3AuthInstance.configureAdapter(openloginAdapter);
web3AuthInstance.configureAdapter(metamaskAdapter);
web3AuthInstance.configureAdapter(walletConnectV2Adapter);
web3AuthInstance.configureAdapter(coinbaseAdapter);
return web3AuthInstance;
}
}
app file where we are using the above function-
"use client";
import "@/styles/globals.css";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import React from "react";
import Script from "next/script";
import { WagmiConfig, createClient } from "wagmi";
import { PriceProvider } from "@/context/PriceSelector";
import { ReactQueryDevtools } from "react-query/devtools";
import { MetaMaskConnector } from "wagmi/connectors/metaMask";
import { QueryClient, QueryClientProvider } from "react-query";
import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
import { WalletConnectConnector } from "wagmi/connectors/walletConnect";
import { CoinbaseWalletConnector } from "wagmi/connectors/coinbaseWallet";
import { ToastProvider } from "@/components/ui/toast";
import { TooltipProvider } from "@/components/ui/tooltip";
import { chains, provider, webSocketProvider } from "@/config/chains";
import Web3AuthNoModalConnectorInstance from "@/config/Web3AuthNoModalConnectorInstance";
import { CartProvider } from "@/context/Cart";
import { UserProvider } from "@/context/User";
const instance = Web3AuthNoModalConnectorInstance(chains);
const config = createClient({
autoConnect: false,
connectors: [
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
...[
instance &&
new Web3AuthConnector({
chains,
options: {
web3AuthInstance: instance,
loginParams: {
loginProvider: "discord",
mfaLevel: "optional",
getWalletKey: true,
extraLoginOptions: {
prompt: "select_account",
},
},
},
}),
instance &&
new Web3AuthConnector({
chains,
options: {
web3AuthInstance: instance,
loginParams: {
loginProvider: "google",
mfaLevel: "optional",
getWalletKey: true,
extraLoginOptions: {
prompt: "select_account",
},
},
},
}),
instance &&
new Web3AuthConnector({
chains,
options: {
web3AuthInstance: instance,
loginParams: {
loginProvider: "twitter",
mfaLevel: "optional",
getWalletKey: true,
extraLoginOptions: {
prompt: "select_account",
},
},
},
}),
instance &&
new MetaMaskConnector({
chains,
options: {
shimDisconnect: true,
shimChainChangedDisconnect: true,
},
}),
instance &&
new WalletConnectConnector({
chains,
options: {
projectId: [projectId]
qrcode: true,
},
}),
instance &&
new CoinbaseWalletConnector({
chains,
options: {
appName: [appName],
},
}),
],
],
provider,
webSocketProvider,
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export default function App({ Component, pageProps }: any) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Layout = Component.layout || (({ children }: any) => <>{children}</>);
const [queryClient] = React.useState(() => new QueryClient());
return (
<>
<WagmiConfig client={config}>
<QueryClientProvider client={queryClient}>
<ToastProvider>
<TooltipProvider>
<PriceProvider>
<UserProvider>
<CartProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</CartProvider>
</UserProvider>
</PriceProvider>
</TooltipProvider>
</ToastProvider>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
</WagmiConfig>
</>
);
}
login file where we are implementing all the web3Auth connectors-
import Navbar from "@/components/layout/Navbar";
import { verifySignature } from "@/utils/apiCalls";
import { MouseEventHandler, useEffect, useState } from "react";
import {
Connector,
useAccount,
useConnect,
useDisconnect,
useSignMessage,
} from "wagmi";
export default function Home() {
const { disconnect } = useDisconnect();
const { address, connector, isConnected } = useAccount();
const { data, signMessage, variables } = useSignMessage();
const { connect, connectors, error, isLoading, pendingConnector } =
useConnect();
const [hydrated, setHydrated] = useState(false);
const returnConnectionName = (conn: Connector) => {
return conn?.options?.loginParams?.loginProvider || conn?.name;
};
const returnValidatorForConnection = (conn: Connector) => {
if (conn.id === "web3auth") {
return (
conn?.options?.loginParams?.loginProvider ===
pendingConnector?.options?.loginParams?.loginProvider
);
}
return conn?.id === pendingConnector?.id;
};
const verifyUserSignature = async () => {
try {
const response = await verifySignature({
walletAddress: address,
message: variables?.message,
signature: data,
});
console.log(response);
} catch (err: unknown) {
console.error(err);
}
};
useEffect(() => {
setHydrated(true);
}, []);
useEffect(() => {
if (!address || !isConnected) return;
signMessage({
message: "message",
});
}, [address, isConnected]);
useEffect(() => {
if (data) {
verifyUserSignature();
}
}, [data]);
if (!hydrated) {
return null;
}
return (
<div className="main">
<Navbar />
{isConnected ? (
<div>
<div className="title">
Connected to{" "}
{connector?.options.loginParams?.loginProvider ||
connector?.name}
</div>
<div>{address}</div>
<button
type="button"
className="card"
onClick={disconnect as unknown as MouseEventHandler}
>
Disconnect
</button>
</div>
) : (
<>
<div className="flex flex-col">
{connectors &&
connectors.map((conn: Connector, index) => {
const connectionName =
returnConnectionName(conn);
const validator =
returnValidatorForConnection(conn);
return (
<div
className="flex-auto"
key={index as unknown as number}
>
<button
type="button"
disabled={!conn?.ready}
key={conn?.id}
onClick={() =>
connect({ connector: conn })
}
>
{connectionName}
{!conn?.ready && " (unsupported)"}
{isLoading &&
validator &&
" (connecting)"}
</button>
<br />
<br />
{validator && error && (
<div>{error.message}</div>
)}
</div>
);
})}
</div>
</>
)}
</div>
);
}
Let me know if any other details are needed.
Thank you.
Thanks for sharing the details. Our team will investiagate and get back when there is more information available.
Hello @vjgee ,
Let me know if there is any update on the issue as it is an urgent task for our team.
Thank you.
Hey @shubbham.jain,
I’ll encourage you to try out our new v6 SDKs.
By the way, when do you see this error? Do you see it when you scan the QR code to log in or somewhere else?
Hey @maharshi ,
I can take a look at the v6 SDKs for sure. It would be great if some resources can be shared on how to integrate it with wagmi.
The error comes up whenever we click and open walletConnect. So, when the walletConnect connector is clicked the error comes up in the console. Also the error comes in continuously.
Also from what we understand the error is due to trying to establish a connection with the wallets walletConnect offers to connect with but fails to do so and this error comes in.
Let me know what can be the proper fix for it. As walletConnect is required.
Thank you.
Hi @shubbham.jain, I think the problem is not coming from web3Auth directly since in the code you set up WalletConnectV2Adapter but when you integrate with wagmi you are using WalletConnectConnector from wagmi itself.
So the error should come from wagmi connector. If you want to connect with web3auth adapter, I think you need to use web3AuthInstance.connectTo(WALLET_ADAPTERS.WALLET_CONNECT_V2).
Hi @kai.nguyen ,
thank you for your response.
We will try to implement this in our system and let you now if it went successfully or not.
Hi @vjgee @kai.nguyen ,
I tried the solution you recommended of using web3AuthInstance.connectTo(WALLET_ADAPTERS.WALLET_CONNECT_V2).
But still the error is there.
In the below screenshot, in the first line you can see the status of web3auth instance is coming as ready, even then the wallet is not able to be connected with WalletConnect.
Let me know what could be the potential solution for this.
Thank you.
Hey @shubbham.jain, I suppose you call the connectTo function directly in your code without awaiting web3AuthInstance.init function first.
So to not make things more complicated with wagmi and web3auth, in my project I actually config the web3auth-wagmi-connector myself so that it’s able to connect to any adapter that I pass in.
My custom connector:
const walletConnectConnector = new Web3AuthConnector({
chains,
options: {
web3AuthInstance,
},
adapter: WALLET_ADAPTERS.WALLET_CONNECT_V2,
})
and inside web3auth-wagmi-connector
const isInValidOpenLoginParams =
!this.loginParams && this.adapter === WALLET_ADAPTERS.OPENLOGIN
if (!this.web3AuthInstance.connected) {
if (!isInValidOpenLoginParams) {
await this.web3AuthInstance.connectTo(this.adapter, this.loginParams)
} else {
log.error('please provide valid loginParams when using @web3auth/no-modal')
throw new UserRejectedRequestError(
'please provide valid loginParams when using @web3auth/no-modal' as unknown as Error,
)
}
}
I believe there would be other ways but this seems to be the easiest way for me.
Hi @kai.nguyen ,
If you check below updated code, we are calling the init function before calling connectTo.
(The code of this file runs when the app initialises.)
import { Chain } from "wagmi";
import { CHAIN_NAMESPACES } from "@web3auth/base";
import { Web3AuthNoModal } from "@web3auth/no-modal";
import { CoinbaseAdapter } from "@web3auth/coinbase-adapter";
import { MetamaskAdapter } from "@web3auth/metamask-adapter";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import {
WalletConnectV2Adapter,
getWalletConnectV2Settings,
} from "@web3auth/wallet-connect-v2-adapter";
export default function Web3AuthNoModalConnectorInstance(chains: Chain[]) {
if (typeof window !== "undefined") {
const web3AuthInstance = new Web3AuthNoModal({
clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string,
chainConfig: {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: `0x${chains[0].id.toString(16)}`,
rpcTarget: chains[0].rpcUrls.default.http[0],
displayName: chains[0].name,
tickerName: chains[0].nativeCurrency?.name,
ticker: chains[0].nativeCurrency?.symbol,
},
web3AuthNetwork: "testnet",
enableLogging: false,
});
const verifier = verifier;
const openloginAdapter = new OpenloginAdapter({
clientId: clientId,
adapterSettings: {
redirectUrl: url,
clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string,
uxMode: "popup",
loginConfig: {
google: {
name: "Google",
verifier,
verifierSubIdentifier: googleSubVerifier,
typeOfLogin: "google",
clientId: clientId,
},
twitterauth0: {
name: "Twitter",
verifier,
verifierSubIdentifier: twitterSubVerifier,
typeOfLogin: "twitter",
clientId: clientId,
},
discordauth0: {
name: "Discord",
verifier,
verifierSubIdentifier: discordSubVerifier,
typeOfLogin: "discord",
clientId: clientId
},
},
},
});
const metamaskAdapter = new MetamaskAdapter({
clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string,
sessionTime: 3600,
web3AuthNetwork: "testnet",
});
const coinbaseAdapter = new CoinbaseAdapter({
clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string,
sessionTime: 3600,
web3AuthNetwork: "testnet",
});
web3AuthInstance.configureAdapter(openloginAdapter);
web3AuthInstance.configureAdapter(metamaskAdapter);
web3AuthInstance.configureAdapter(coinbaseAdapter);
getWalletConnectV2Settings(
"eip155",
[80001],
projectId
).then(async defaultWcSettings => {
const walletConnectV2Adapter = new WalletConnectV2Adapter({
clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string,
sessionTime: 3600,
web3AuthNetwork: "testnet",
});
web3AuthInstance.configureAdapter(walletConnectV2Adapter);
await web3AuthInstance.init();
});
return web3AuthInstance;
}
}
Now if try to connect to WalletConnect, the instance’s status is ready. So, it should be able to connect to the WalletConnect adapter. But still the error I shared above comes in when trying to connect.
So, let me know if we are doing something wrong here and what could be the fix for this.
Thank you.