> For the complete documentation index, see [llms.txt](/llms.txt).

# PnP Modal SDK - v6 to v7

## General[​](#general "Direct link to General")

### `web3auth.connect()` now returns a provider of type `IProvider`[​](#web3authconnect-now-returns-a-provider-of-type-iprovider "Direct link to web3authconnect-now-returns-a-provider-of-type-iprovider")

#### The new provider object now works with the latest version of `web3.js`.[​](#the-new-provider-object-now-works-with-the-latest-version-of-web3js "Direct link to the-new-provider-object-now-works-with-the-latest-version-of-web3js")

With V7, the `connect()` method now returns a provider of type `IProvider` which is a hard-coded provider, ensuring compatibility with the latest version of web3.js. Previously, we had been using a proxy provider that is, `SafeEventEmitterProvider` which gave errors with the breaking changes that came with web3.js v4. Remember, you can import the type `IProvider` from the `@web3auth/base` package.

```
// With V7
connect(): Promise<IProvider | null>;

```

### `appLogo` is replaced by `logoLight` and `logoDark`[​](#applogo-is-replaced-by-logolight-and-logodark "Direct link to applogo-is-replaced-by-logolight-and-logodark")

#### `uiConfig` is in line with the `whitelabel` object in `OpenLoginAdapter`.[​](#uiconfig-is-in-line-with-the-whitelabel-object-in-openloginadapter "Direct link to uiconfig-is-in-line-with-the-whitelabel-object-in-openloginadapter")

With v7, the `uiConfig` object now accepts `logoLight` and `logoDark` instead of `appLogo`. This is done to bring consistency to the naming convention.

```
const web3auth = new Web3Auth({
  clientId,
  chainConfig: {
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: '0x1',
    rpcTarget: 'https://rpc.ethereum.org', // This is the public RPC we have added, please pass on your own endpoint while creating an app
  },
  // uiConfig refers to the whitelabeling options, which is available only on Growth Plan and above
  // Please remove this parameter if you're on the Base Plan
  uiConfig: {
    appName: 'W3A',
    theme: {
      primary: 'red',
    },
    mode: 'dark',
    logoLight: 'https://web3auth.io/images/web3auth-logo.svg',
    logoDark: 'https://web3auth.io/images/web3auth-logo---Dark.svg',
    defaultLanguage: 'en', // en, de, ja, ko, zh, es, fr, pt, nl
    loginGridCol: 3,
    primaryButton: 'externalLogin', // "externalLogin" | "socialLogin" | "emailLogin"
  },
  web3AuthNetwork: 'sapphire_mainnet',
})

```

## OpenLoginAdapter[​](#openloginadapter "Direct link to OpenLoginAdapter")

### Change in the naming of some whitelabel parameters for `OpenLoginAdapter`[​](#change-in-the-naming-of-some-whitelabel-parameters-for-openloginadapter "Direct link to change-in-the-naming-of-some-whitelabel-parameters-for-openloginadapter")

#### `name` and `url` are now `appName` and `appUrl`, respectively.[​](#name-and-url-are-now-appname-and-appurl-respectively "Direct link to name-and-url-are-now-appname-and-appurl-respectively")

In `adapterSettings`, the `whitelabel` object now accepts `appName` and `appUrl` instead of `name` and `url`, respectively. This is done to bring consistency to the naming convention.

#### Light and dark mode is now toggled by the `mode` parameter instead of `dark`.[​](#light-and-dark-mode-is-now-toggled-by-the-mode-parameter-instead-of-dark "Direct link to light-and-dark-mode-is-now-toggled-by-the-mode-parameter-instead-of-dark")

`mode` accepts a string from the following options: `auto`, `light` or `dark`. This replaces the `dark` boolean parameter from previous versions.

```
const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    whiteLabel: {
      appName: 'W3A Heroes',
      appUrl: 'https://web3auth.io',
      logoLight: 'https://web3auth.io/images/web3auth-logo.svg',
      logoDark: 'https://web3auth.io/images/web3auth-logo---Dark.svg',
      defaultLanguage: 'en', // en, de, ja, ko, zh, es, fr, pt, nl
      mode: 'auto', // whether to enable dark mode. defaultValue: false
      theme: {
        primary: '#768729',
      },
      useLogoLoader: true,
    },
  },
  privateKeyProvider,
})

```

## Other changes[​](#other-changes "Direct link to Other changes")

### Extra parameters for `solana-provider` and `xrpl-provider`[​](#extra-parameters-for-solana-provider-and-xrpl-provider "Direct link to extra-parameters-for-solana-provider-and-xrpl-provider")

#### For Solana[​](#for-solana "Direct link to For Solana")

For Solana, SolanaWallet in package "@web3auth/solana-provider", the request typings require both input and output now use `string[]` when input placeholder is needed

```
// With V7
const connectionConfig = await solanaWallet.request<string[], CustomChainConfig>({
  method: 'solana_provider_config',
  params: [],
})
const conn = new Connection(connectionConfig.rpcTarget)

```

#### For XRPL[​](#for-xrpl "Direct link to For XRPL")

For XRPL, after the change of "@web3auth/xrpl-provider" version to v7, the request typings require both input and output now so use `never` when input or output placeholder is needed

```
// With V7
const txSign = await this.provider.request<{ signature: string }, never>({
  method: 'xrpl_signMessage',
  params: {
    signature: hexMsg,
  },
})

const accounts = await this.provider.request<never, string[]>({
  method: 'xrpl_getAccounts',
})

```

### `wallet-connect-v2-adapter` requires different parameters[​](#wallet-connect-v2-adapter-requires-different-parameters "Direct link to wallet-connect-v2-adapter-requires-different-parameters")

With the deprecation of `@wallet-connect/qr-code-modal`, `wallet-connect-v2-adapter` now requires `@walletconnect/modal`.

```
import { WalletConnectModal } from '@walletconnect/modal'
import {
  getWalletConnectV2Settings,
  WalletConnectV2Adapter,
} from '@web3auth/wallet-connect-v2-adapter'

const defaultWcSettings = await getWalletConnectV2Settings(
  'eip155',
  [1],
  '04309ed1007e77d1f119b85205bb779d'
)
const walletConnectModal = new WalletConnectModal({
  projectId: '04309ed1007e77d1f119b85205bb779d',
})
const walletConnectV2Adapter = new WalletConnectV2Adapter({
  adapterSettings: { qrcodeModal: walletConnectModal, ...defaultWcSettings.adapterSettings },
  loginSettings: { ...defaultWcSettings.loginSettings },
})

```