[Archive] WalletServicesPlugin integration on a no-modal project

[german.blasco]

Archived Content from Web3Auth Community

This topic was originally posted by german.blasco on 2/29/2024.
This content has been migrated from our previous community forum to preserve valuable discussions.

---

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:

Captura de pantalla 2024-02-29 a las 12.23.02818×494 69.6 KB

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)

Captura de pantalla 2024-02-29 a las 12.27.43816×453 57.2 KB

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

}

[TomTom]

hi @german.blasco ,

can you share with us the version of the libraries that you are using ?