i am using the “@web3auth/no-modal”: “^9.1.0” SDK
in a Web environment in Vue
My dApp already has a wallet connection to metamask and other providers through the browser extensions. I’ve already implemented the no-modal connection to web3auth, i am implementing now the Wallet Services, and i want to know if i can connect a metamask wallet to the fiat on ramp feature still using the no-modal SDK
here is my web3auth connector:
import { Web3AuthNoModal } from '@web3auth/no-modal'
import { CHAIN_NAMESPACES, type IProvider, WALLET_ADAPTERS, WEB3AUTH_NETWORK } from '@web3auth/base'
import { WalletConnector, type ChainId, numberToHex, ChainIds, chainRegistry, EthErrors } from '@ryze-blockchain/ethereum'
import { AuthAdapter } from '@web3auth/auth-adapter'
import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider'
import { WalletServicesPlugin } from '@web3auth/wallet-services-plugin'
import { type NuxtEnv } from '~/nuxt.types'
const initialChainId = ChainIds.ARBITRUM
const initialChain = chainRegistry[initialChainId]
const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: numberToHex(initialChain.id),
rpcTarget: initialChain.rpcList[0],
displayName: initialChain.name,
blockExplorerUrl: initialChain.explorer,
ticker: initialChain.currency.symbol,
tickerName: initialChain.name,
logo: `/images/chains/${ initialChain.name.toLowerCase() }.svg`,
}
export class Web3AuthConnector extends WalletConnector<IProvider> {
public readonly id: string = 'web3auth'
public readonly name: string = 'Login with Google'
private static initialized = false
private static web3auth: Web3AuthNoModal | null = null
private static walletServicesPlugin: WalletServicesPlugin | null = null
private async initializeWeb3Auth(): Promise<void> {
if (Web3AuthConnector.initialized) return
const config = useRuntimeConfig()
const { web3AuthClientId } = config.public as unknown as NuxtEnv['public']
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: { chainConfig },
})
Web3AuthConnector.web3auth = new Web3AuthNoModal({
clientId: web3AuthClientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
privateKeyProvider,
uiConfig: {
appName: 'DefiHub',
appUrl: 'https://defihub.fi',
logoLight: 'https://web3auth.io/images/web3authlog.png',
logoDark: 'https://web3auth.io/images/web3authlogodark.png',
defaultLanguage: 'en',
mode: 'dark',
theme: {
primary: '#AAAAAA',
},
useLogoLoader: true,
},
})
const authAdapter = new AuthAdapter()
Web3AuthConnector.web3auth.configureAdapter(authAdapter)
Web3AuthConnector.walletServicesPlugin = new WalletServicesPlugin({
wsEmbedOpts: {},
walletInitOptions: { whiteLabel: { showWidgetButton: true } },
})
Web3AuthConnector.web3auth.addPlugin(Web3AuthConnector.walletServicesPlugin)
try {
await Web3AuthConnector.web3auth.init()
Web3AuthConnector.initialized = true
}
catch (initError) {
throw new Error(`Fail to initialize web3auth: ${ (initError as Error).message }`)
}
}
public async getProvider(): Promise<IProvider> {
await this.initializeWeb3Auth()
const web3auth = Web3AuthConnector.web3auth!
if (!web3auth.connected) {
try {
await web3auth.connectTo(WALLET_ADAPTERS.AUTH, { loginProvider: 'google' })
}
catch (connectError) {
throw new Error(`Failed to connect with Google login: ${ (connectError as Error).message }`)
}
}
const web3authProvider = web3auth.provider
if (!web3authProvider)
throw new Error(EthErrors.PROVIDER_UNAVAILABLE)
return web3authProvider
}
public async addChain(chainId: ChainId): Promise<void> {
const chain = chainRegistry[chainId]
if (!chain)
throw new Error(`Chain ID ${ chainId } not supported`)
const isTestnet = chainId === ChainIds.BNB_TESTNET || chainId === ChainIds.ARBITRUM_TESTNET
const chainData = {
chainId: numberToHex(chain.id),
displayName: chain.name,
chainNamespace: CHAIN_NAMESPACES.EIP155,
tickerName: chain.name,
ticker: chain.currency.symbol,
decimals: 18,
rpcTarget: chain.rpcList[0],
blockExplorerUrl: chain.explorer,
logo: `/images/chains/${ chain.name.toLowerCase() }.svg`,
isTestnet,
}
await Web3AuthConnector.web3auth!.addChain(chainData)
}
public async disconnect(): Promise<void> {
await Web3AuthConnector.web3auth?.logout()
}
public async setChain(chain: ChainId): Promise<void> {
await this.addChain(chain)
await Web3AuthConnector.web3auth?.switchChain({ chainId: numberToHex(chain) })
// The web3auth provider does not emit the chainChanged event, so we have to do it manually
Web3AuthConnector.web3auth?.provider?.emit('chainChanged', numberToHex(chain))
}
public async showWalletUI(): Promise<void> {
await Web3AuthConnector.walletServicesPlugin?.showWalletUi()
}
public async showWalletConnectScanner(): Promise<void> {
await Web3AuthConnector.walletServicesPlugin?.showWalletConnectScanner()
}
public async showCheckout(): Promise<void> {
await Web3AuthConnector.walletServicesPlugin?.showCheckout()
}
}
