Hello, I’m trying to add wallet services to the no-modal sdk and i’m facing some issues.
First of all, I’ve successfully integrated the web3auth custom authentication login.
Once I did that, I tried to add the WalletServicesPlugin, but I got this error:
logoDark and logoLight are required in whiteLabel config
at WalletServicesPlugin.initWithWeb3Auth
After that, I’ve added the two logo versions as the documentation said:
const uiConfig: WhiteLabelData = {
appName: 'name',
defaultLanguage: "en",
logoLight: "https://web3auth.io/images/web3authlog.png",
logoDark: "https://web3auth.io/images/web3authlogodark.png",
mode: "light",
}
const options: Web3AuthNoModalOptions = {
clientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
chainConfig,
uiConfig
}
but now I get this error without any details:
TypeError: Failed to construct 'URL': Invalid URL
at eIe (index-VbLeAWHL.js:100:4781)
at e (Frame-vX2mi_79.js:1:2305)
this error makes reference to this code snippet:
.authorizeSession()
, eIe = async t=>{
try {
const e = new URL(`${uce[t.network]}/api/feature-access`);
e.searchParams.append("client_id", t.clientId),
e.searchParams.append("network", t.network),
e.searchParams.append("is_wallet_service", "true"),
e.searchParams.append("enable_gating", "true"),
t.isWhitelabel && e.searchParams.append("is_whitelabel", String(t.isWhitelabel)),
await vi(e.href)
} catch (e) {
if (e instanceof Response) {
const r = await e.json();
Ne.error("ERROR:", r.error)
}
throw e
}
}
- SDK Version: 8.0.0
- Platform: Nuxt 3 (vite and vue 3)
- Browser Console Screenshots:
This is my current web3auth config:
const {Web3AuthNoModal} = await import('@web3auth/no-modal')
const chainConfig = {
chainId: "0x1",
chainNamespace: CHAIN_NAMESPACES.EIP155,
rpcTarget: "https://rpc.ankr.com/multichain/xxxxxxxxxxxxxxxxxxxxxx",
}
const uiConfig: WhiteLabelData = {
appName: 'name',
defaultLanguage: "en",
logoLight: "https://web3auth.io/images/web3authlog.png",
logoDark: "https://web3auth.io/images/web3authlogodark.png",
mode: "light",
}
const options: Web3AuthNoModalOptions = {
clientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
chainConfig,
uiConfig
}
const web3auth = new Web3AuthNoModal(options);
const otherProvider = new CommonPrivateKeyProvider({config: {chainConfig}})
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
network: "sapphire_devnet",
uxMode: "popup",
loginConfig: {
jwt: {
verifier: "api-develop-xxxxxxxxx-web",
typeOfLogin: "jwt",
clientId: 'xxxxxxxxxxxxxxxxxxxxx'
},
},
},
privateKeyProvider: otherProvider,
});
web3auth.configureAdapter(openloginAdapter);
const walletServicesPlugin = new WalletServicesPlugin()
web3auth.addPlugin(walletServicesPlugin)
await web3auth.init();
And also here are my login and wallet logic:
async function login(idToken: string) {
if (web3auth.connected) return
return await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
loginProvider: 'jwt',
extraLoginOptions: {
domain: '',
id_token,
verifierIdField: "sub", // same as your JWT Verifier ID
},
}).catch((e: WalletLoginError) => console.error(e))
}
async function loadWalletUI() {
return await walletServicesPlugin.showWalletUi().catch(e => console.error(e))
}