@maharshi I couldn’t find DM option, here is some core files
import { WEB3AUTH_CLIENT_ID } from '@/config/env';
import { CHAIN_NAMESPACES } from '@web3auth/base';
import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider';
import { Web3AuthNoModal } from '@web3auth/no-modal';
import {
LOGIN_PROVIDER,
OPENLOGIN_NETWORK,
OpenloginAdapter,
} from '@web3auth/openlogin-adapter';
import { Web3AuthConnector } from '@web3auth/web3auth-wagmi-connector';
import { Chain } from 'wagmi';
export const getWeb3AuthConnectorInstance = (
chains: Chain[],
idToken: string,
) => {
const clientId = WEB3AUTH_CLIENT_ID || '';
// Create Web3Auth Instance
const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: '0x' + chains[0].id.toString(16),
rpcTarget: chains[0].rpcUrls.default.http[0], // This is the public RPC we have added, please pass on your own endpoint while creating an app
displayName: chains[0].name,
tickerName: chains[0].nativeCurrency?.name,
ticker: chains[0].nativeCurrency?.symbol,
blockExplorer: chains[0].blockExplorers?.default.url[0] as string,
};
const web3AuthInstance = new Web3AuthNoModal({
clientId,
chainConfig,
web3AuthNetwork: OPENLOGIN_NETWORK.SAPPHIRE_DEVNET,
});
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: { chainConfig },
});
// Add openlogin adapter for customisations
const openloginAdapterInstance = new OpenloginAdapter({
privateKeyProvider,
loginSettings: {
mfaLevel: 'optional',
},
adapterSettings: {
uxMode: 'redirect',
redirectUrl: window.location.origin,
loginConfig: {
// Firebase
jwt: {
verifier: 'our-firebase-twitter',
typeOfLogin: 'jwt',
clientId,
},
},
whiteLabel: {
appName: 'OUR',
appUrl: 'https://abc.xyz',
defaultLanguage: 'en',
logoLight:
'https://pbs.twimg.com/profile_images/1732757244389789696/4z4FrXv2_400x400.jpg',
logoDark:
'https://pbs.twimg.com/profile_images/1732757244389789696/4z4FrXv2_400x400.jpg',
mode: 'auto',
useLogoLoader: true,
},
mfaSettings: {
// deviceShareFactor: {
// enable: true,
// priority: 1,
// mandatory: true,
// },
socialBackupFactor: {
enable: true,
priority: 1,
mandatory: false,
},
passwordFactor: {
enable: true,
priority: 2,
mandatory: false,
},
backUpShareFactor: {
enable: true,
priority: 3,
mandatory: false,
},
},
},
});
web3AuthInstance.configureAdapter(openloginAdapterInstance);
const connector = new Web3AuthConnector({
chains: chains,
options: {
web3AuthInstance,
loginParams: {
loginProvider: LOGIN_PROVIDER.JWT,
extraLoginOptions: {
id_token: idToken,
verifierIdField: 'sub',
},
},
},
});
return connector;
};
package.json
{
"name": "",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint --fix",
"format": "prettier --write .",
"prepare": "husky install"
},
"engines": {
"yarn": ">=1.22.17",
"node": ">=18.18.0",
"npm": "please-use-yarn"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-brands-svg-icons": "^6.5.1",
"@fortawesome/free-regular-svg-icons": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@nextui-org/react": "^2.2.9",
"@react-stately/data": "^3.11.2",
"@reduxjs/toolkit": "^2.0.1",
"@tanstack/react-query": "^5.18.0",
"@tanstack/react-query-devtools": "^5.18.0",
"@tanstack/react-query-next-experimental": "^5.18.0",
"@types/luxon": "^3.4.2",
"@web3-react/core": "^8.2.3",
"@web3-react/metamask": "^8.2.4",
"@web3auth/base": "^7.2.1",
"@web3auth/ethereum-provider": "^7.2.1",
"@web3auth/no-modal": "^7.2.1",
"@web3auth/openlogin-adapter": "^7.2.1",
"@web3auth/web3auth-wagmi-connector": "^5.0.1",
"ably": "^2.0.1",
"ahooks": "^3.7.8",
"clsx": "^2.1.0",
"emoji-picker-react": "^4.8.0",
"ethers": "^6.11.1",
"firebase": "^10.7.1",
"firebase-admin": "^12.0.0",
"framer-motion": "^10.18.0",
"html5-qrcode": "^2.3.8",
"luxon": "^3.4.4",
"next": "14.1.4",
"qrcode.react": "^3.1.0",
"react": "^18",
"react-dom": "^18",
"react-hot-toast": "^2.4.1",
"react-infinite-scroll-component": "^6.1.0",
"react-qr-reader": "^3.0.0-beta-1",
"react-query-kit": "^3.1.0",
"react-redux": "^9.1.0",
"react-use": "^17.4.2",
"recharts": "^2.11.0",
"redux": "^5.0.1",
"redux-persist": "^6.0.0",
"sharp": "^0.33.2",
"socket.io-client": "^4.7.5",
"tailwind-merge": "^2.2.1",
"tailwind-variants": "^0.1.20",
"tailwindcss-animate": "^1.0.7",
"ts-deepmerge": "^7.0.0",
"twitter-lite": "^1.1.0",
"type-fest": "^4.10.2",
"viem": "1.21.4",
"wagmi": "^1.4.13"
},
"devDependencies": {
"@tanstack/eslint-plugin-query": "^5.18.0",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.4.16",
"eslint": "^8.56.0",
"eslint-config-next": "14.0.4",
"eslint-config-prettier": "^9.1.0",
"husky": "^8.0.3",
"lint-staged": "^15.2.0",
"postcss": "^8.4.32",
"prettier": "^3.2.1",
"prettier-plugin-organize-imports": "^3.2.4",
"prettier-plugin-tailwindcss": "^0.5.11",
"tailwindcss": "^3.3.0",
"tailwindcss-gradient": "^1.0.1",
"tw-colors": "^3.3.1",
"typescript": "^5.3.3"
},
"resolutions": {
"strip-ansi": "6.0.1",
"wagmi": "^1.4.13"
},
"lint-staged": {
"src/**/*.{js,ts,jsx,tsx}": [
"prettier --write",
"eslint --fix"
],
"*.{json,css}": [
"prettier --write"
]
}
}