# PnP Modal SDK - v6 to v7

> PnP Modal SDK - v6 to v7 | Embedded Wallets

## General

### `web3auth.connect()` now returns a provider of type `IProvider`

#### The new provider object now works with the latest version of `web3.js`.

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.

```tsx
// With V7
// focus-start
connect(): Promise<IProvider | null>;
// focus-end
```

### `appLogo` is replaced by `logoLight` and `logoDark`

#### `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.

```tsx
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',
    // focus-start
    logoLight: 'https://web3auth.io/images/web3auth-logo.svg',
    logoDark: 'https://web3auth.io/images/web3auth-logo---Dark.svg',
    // focus-end
    defaultLanguage: 'en', // en, de, ja, ko, zh, es, fr, pt, nl
    loginGridCol: 3,
    primaryButton: 'externalLogin', // "externalLogin" | "socialLogin" | "emailLogin"
  },
  web3AuthNetwork: 'sapphire_mainnet',
})
```

## OpenLoginAdapter

### Change in the naming of some whitelabel parameters for `OpenLoginAdapter`

#### `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`.

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

```tsx
const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    whiteLabel: {
      // focus-start
      appName: 'W3A Heroes',
      appUrl: 'https://web3auth.io',
      // focus-end
      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
      // focus-next-line
      mode: 'auto', // whether to enable dark mode. defaultValue: false
      theme: {
        primary: '#768729',
      },
      useLogoLoader: true,
    },
  },
  privateKeyProvider,
})
```

## Other changes

### Extra parameters for `solana-provider` and `xrpl-provider`

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

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

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

```tsx
// 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

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

```tsx

  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 },
})
```