> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Upgrade SDK from V0 to V1

<Card title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](/javascript/reference/react-quickstart) to get started.
</Card>

## From V0.19 to V1

This upgrade guide is specific to implementing the SDK itself.

### Breaking Changes

#### userWallets hooks

* connectedWallets , secondaryWallets and linkedWallets all been removed in favor of userWallets hook. See [here](/react/reference/hooks/wallets/useuserwallets) for more info.

<Tabs>
  <Tab title="Before">
    ```jsx theme={"system"}
    import { useDynamicContext, getNetwork } from '@dynamic-labs/sdk-react-core';

    const App = () => {
    const { connectedWallets } = useDynamicContext();

    useEffect(() => {
      connectedWallets.forEach(async ({ connector }) => {
      const network = await getNetwork(connector);
            ...
          });
    }, [connectedWallets]);

    ...
    }
    ```
  </Tab>

  <Tab title="After">
    ```jsx theme={"system"}
    import { useUserWallets, getNetwork } from '@dynamic-labs/sdk-react-core';

    const App = () => {
    const userWallets = useUserWallets();

    useEffect(() => {
      userWallets.forEach(async ({ connector }) => {
      const network = await getNetwork(connector);
            ...
          });
    }, [userWallets]);

    ...
    }
    ```
  </Tab>
</Tabs>

#### EthereumSmartWalletConnectors -> ZeroDevSmartWalletConnectors

* (v1 alpha -> v1) EthereumSmartWalletConnectors is now renamed to ZeroDevSmartWalletConnectors. You use this connector when you want to use AA wallets.

<Tabs>
  <Tab title="After">
    ```jsx theme={"system"}
    import {DynamicContextProvider} from "@dynamic-labs/sdk-react-core";
    import { EthereumWalletConnectors } from '@dynamic-labs/ethereum';
    import { ZeroDevSmartWalletConnectors } from '@dynamic-labs/ethereum-aa';

    const App = () => (

      <DynamicContextProvider
        settings={{
          ...
          walletConnectors: [ EthereumWalletConnectors, ZeroDevSmartWalletConnectors ],
          ...
        }}>
        <DynamicWidget />
      </DynamicContextProvider>
    );

    export default App;
    ```
  </Tab>

  <Tab title="Before">
    ```jsx theme={"system"}
    import {DynamicContextProvider} from "@dynamic-labs/sdk-react-core";
    import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
    import { EthereumSmartWalletConnectors } from "@dynamic-labs/ethereum-aa";

    const App = () => (

      <DynamicContextProvider
        settings={{
          ...
          walletConnectors: [ EthereumWalletConnectors, EthereumSmartWalletConnectors ],
          ...
        }}>
        <DynamicWidget />
      </DynamicContextProvider>
    );

    export default App;
    ```
  </Tab>
</Tabs>

#### wallets -> walletConnectorOptions

* Wallets property returned by useDynamicContext now renamed to walletConnectorOptions

<Tabs>
  <Tab title="After">
    ```jsx theme={"system"}
    import { useDynamicContext } from "@dynamic-labs/sdk-react-core";

    const App = () => {
    const { walletConnectorOptions } = useDynamicContext();
    return (

    <div>
      {walletConnectorOptions.map((wallet) => (
        <div>{wallet.name}</div>
      ))}
    </div>
    ); };

    export default App;
    ```
  </Tab>

  <Tab title="Before">
    ```jsx theme={"system"}
    import { useDynamicContext } from "@dynamic-labs/sdk-react-core";

    const App = () => {
    const { wallets } = useDynamicContext();
    return (

    <div>
      {wallets.map((wallet) => (
        <div>{wallet.name}</div>
      ))}
    </div>
    ); };

    export default App;
    ```
  </Tab>
</Tabs>

#### walletsByChain -> bridgeChains

* walletsByChain has been renamed to bridgeChains

<Tabs>
  <Tab title="After">
    ```jsx theme={"system"}
    import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";

    const App = () => {
    return (

    <DynamicContextProvider
      settings={{
        environmentId: 'ENV_ID',
        bridgeChains: [
          {
            chain: 'EVM',
          },
        ],
      }}
    >
      <DynamicWidget />
    </DynamicContextProvider>
    ); };

    export default App;
    ```
  </Tab>

  <Tab title="Before">
    ```jsx theme={"system"}
    import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";

    const App = () => {
    return (

    <DynamicContextProvider
      settings={{
        environmentId: 'ENV_ID',
        walletsByChain: [
          {
            chain: 'EVM',
          },
        ],
      }}
    >
      <DynamicWidget />
    </DynamicContextProvider>

    ); };

    export default App;
    ```
  </Tab>
</Tabs>

### New Features

* eip6963 is now fully supported without any need for changes on your end!

* Listening to changes in wallet connectors is now supported via a hook called useWalletConnectorEvent. See [here](/react/reference/hooks/wallets/usewalletconnectorevent) for more info.

* You can now trigger the onramp flow programmatically using the useOnramp hook. See [here](/react/reference/hooks/funding/useonramp) for more info.

* Support for account recovery via a hook has been added. See [here](/react/reference/hooks/legacy-embedded-wallets/usepasskeyrecovery) for more info.

* We now generate HD wallets by default, there is nothing you need to do to take advantage of this.

* You can now generate smart contract wallets (SCWs) using our Smart Wallet integrations. See [here](/react/smart-wallets/add-smart-wallets) for more info.

* All of the copy which is used in the UI from the SDK is now completely editable. See [here](/react/using-our-ui/design-customizations/customizing-copy-translations) for more info.

* You can control what kind of signup/login options are shown in your UI on a programmatic basis regardless of what is enabled in the dashboard. See [here](/react/using-our-ui/design-customizations/views) for more info.

* Embedded wallets has been split up into the generation step and the claim step which means you can now give a user a wallet but without them adding a passkey until they make their first transaction.

* Along the same lines as above, you can also pregenerate a wallet for a user without any interaction from them by using our API directly. See [here](https://dynamic.xyz/docs/api-reference/wallets/createWallet) for more info.

* Webhooks are now offered out of the box! You do not need to make any SDK changes to take advantage of this. See [here](/overview/developer-dashboard/webhooks) for more info.

## From V0.18 to V0.19

### *Summary*

This upgrade guide is specific to implementing the SDK itself.

There are a number of breaking changes in v0.19, mainly to the way the SDK is structured. To upgrade you should follow three steps, which are outlined in the breaking changes section below.

<Steps>
  <Step title="Switch to sdk-react-core">
    Uninstall sdk-react (if used) and [install the latest sdk-react-core](/react/reference/upgrade/v4#sdk-react-sdk-react-core).
  </Step>

  <Step title="Add walletConnectors">
    [Install the WalletConnectors you need](/react/reference/upgrade/v4#walletconnectors)
    alongside the SDK and [use them in the
    DynamicContextProvider](/react/reference/upgrade/v4#using-walletconnectors).
  </Step>

  <Step title="Viem as default">
    If you're happy for Viem to be the default instead of Ethers, do nothing. Otherwise, [use the Ethers extension](/react/reference/upgrade/v4#ethers-viem).
  </Step>
</Steps>

### Breaking Changes

#### sdk-react -> sdk-react-core

Previously you could use the SDK in two ways. The first was by installing `sdk-react` which came with all of the possible WalletConnectors pre-bundled. The second was by installing `sdk-react-core` and then adding WalletConnectors yourself alongside it.

While the first was helpful in getting started, the general feedback was that the bundle size was too large. So we've decided to remove the `sdk-react` package and make `sdk-react-core` the main way of installing the SDK.

To get started in this way, you should uninstall `sdk-react` and install `sdk-react-core` instead. If you're already using `sdk-react-core`, it's worth upgrading it to the latest version.

```bash theme={"system"}
npm uninstall @dynamic-labs/sdk-react

npm install @dynamic-labs/sdk-react-core
```

#### WalletConnectors

As mentioned above, `sdk-react-core` doesn't come with any WalletConnectors pre-bundled.

There are also no more `all` packages available.

You should install them according to the table below.

| Package Name           | Chain  | WalletConnector to include |
| :--------------------- | :----- | -------------------------- |
| @dynamic-labs/ethereum | EVM    | `EthereumWalletConnectors` |
| @dynamic-labs/algorand | ALGO   | `AlgorandWalletConnectors` |
| @dynamic-labs/solana   | SOL    | `SolanaWalletConnectors`   |
| @dynamic-labs/flow     | FLOW   | `FlowWalletConnectors`     |
| @dynamic-labs/starknet | STARK  | `StarknetWalletConnectors` |
| @dynamic-labs/cosmos   | COSMOS | `CosmosWalletConnectors`   |

##### EVM Addon Wallets

| Package Name             | Which Wallets | WalletConnector to include  |
| :----------------------- | :------------ | :-------------------------- |
| @dynamic-labs/magic      | *magic*       | `MagicWalletConnectors`     |
| @dynamic-labs/blocto-evm | *blocto*      | `BloctoEvmWalletConnectors` |

<Warning>
  Magic and Blocto were previously available via the `ethereum-all` package
  which is now deprecated, please note that you will no longer get Magic &
  Blocto with the `ethereum` package - use the above packages instead.
</Warning>

Here's an example for Ethereum & Flow:

```bash theme={"system"}
npm install @dynamic-labs/ethereum @dynamic-labs/flow
```

#### Using WalletConnectors

Using WalletConnectors looks like the following (ethereum and flow example):

```jsx theme={"system"}
import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
import { FlowWalletConnectors } from "@dynamic-labs/flow";

const App = () => (
  <DynamicContextProvider
     settings={{
       ...
       walletConnectors: [ EthereumWalletConnectors, FlowWalletConnectors ],
  		 ...
    }}>
    <DynamicWidget />
  </DynamicContextProvider>
);

export default App;
```

#### Ethers -> Viem

We've also changed the way we interact with the BlockChain RPC and the Wallet. Previously we used Ethers.js by default and gave you a Viem version if you needed, but with Viem now rising further in popularity and functionality, we've now moved to Viem as the default library.

<Info>
  Please not that since Viem is now a peer dependancy of the SDK, it will be
  installed even if you use Ethers.
</Info>

If you're happy to use Viem, this should not have much of an effect on you. If you would still like to use Ethers or do not want to migrate your own application to using Viem, we have provided an extension for accessing Ethers within our Connectors:

```bash theme={"system"}
npm i @dynamic-labs/ethers-v5
```

```jsx theme={"system"}
import { EthersExtension } from '@dynamic-labs/ethers-v5'

return (
  <DynamicContextProvider
    settings={{
      environmentId: 'XXXXX',
      walletConnectorExtensions: [EthersExtension],
    }}
  >
    <App />
  </DynamicContextProvider>
)
```

You can then access the signer like so:

```jsx theme={"system"}
const signer = await primaryWallet.connector.ethers?.getSigner()
```

<Tip>
  If you want to use Ethers V6 instead of V5, it's as simple as using
  `@dynamic-labs/ethers-v6` instead of `@dynamic-labs/ethers-v5`.
</Tip>

#### WalletConnector methods naming

Since the move to Viem, we have also updated the method names on the WalletConnector as they previously used Ethers Terminology.

| V0.18               | V0.19               |
| :------------------ | :------------------ |
| `getWeb3Provider()` | `getPublicClient()` |
| `getRpcProvider()`  | `getWalletClient()` |

#### onConnectSuccess -> onConnect

We've also renamed the `onConnectSuccess` callback to `onConnect`.

#### WalletIcon

| V0.18                                                                | V0.19                                         |
| :------------------------------------------------------------------- | :-------------------------------------------- |
| `<WalletIcon walletName={normalizeWalletName(walletConnector.name)}` | `<WalletIcon walletKey={walletConnector.key}` |

```bash theme={"system"}
npm i @dynamic-labs/wallet-book
```

```jsx theme={"system"}
import { useDynamicContext } from '@dynamic-labs/sdk-react-core'
import { WalletIcon } from '@dynamic-labs/wallet-book'

const { primaryWallet } = useDynamicContext()

return <WalletIcon walletKey={primaryWallet.connector.key} />
```

### Non-breaking changes

#### New Callbacks added

* [onSignedMessage](/react/reference/events/onsignedmessage)

* onEmailVerificationSuccess (since replaced with "onotpverificationresult")

* onEmailVerificationFailure (since replaced with "onotpverificationresult")

#### New Hooks added

* [useEmbeddedWallet](/react/reference/hooks/legacy-embedded-wallets/useembeddedwallet)

## From V0.17 to V0.18

#### *Summary*

There are no major breaking changes in V0.18. There are a few minor changes in V0.18.x, which you can find below.

#### *Updates to API URIs*

Our api is served now from [www.dynamicauth.com](http://www.dynamicauth.com) instead of [www.dynamic.xyz](http://www.dynamic.xyz), which should reduce issues for end users behind specific firewall providers.. Please update any rules and validations that you might have on the dynamic.xyz URIs.

#### *Changes to ​​DynamicContextProvider*

##### *Prop rename from: displayTermsOfService to: displaySiweStatement.*

This affects `DynamicContextProvider`. If you're passing `displayTermsOfService` to `DynamicContextProvider`, you should update your code like so:

<CodeGroup>
  ```jsx Before theme={"system"}
  <DynamicContextProvider
    settings={{
      environmentId: "1234abcd-1234-abcd-1234-abcd12343abc",
      displayTermsOfService: false,
      ...
    }}
  >
  </DynamicContextProvider>
  ```

  ```jsx After theme={"system"}
  <DynamicContextProvider
    settings={{
      environmentId: "1234abcd-1234-abcd-1234-abcd12343abc",
      displaySiweStatement: false,
      ...
    }}
    >
  </DynamicContextProvider>
  ```
</CodeGroup>

<br />

##### *Multiwallet prop has been removed.*

If you have multiwallet enabled please enable it in your dashboard:

<CodeGroup>
  ```jsx Before theme={"system"}
  <DynamicContextProvider
    settings={{
      multiWallet: true,
      ...
    }}
  >
    {...}
  </DynamicContextProvider>
  ```

  ```jsx After theme={"system"}
  {/* Enable multiwallet in your dashboard */}
  {/* (Advanced wallet options) section of Configurations tab*/}
  <DynamicContextProvider
    settings={{
      ...
    }}
  >
    {...}
  </DynamicContextProvider>
  ```
</CodeGroup>

#### *Changes to DynamicContext*

##### *ConnectedWallets*

connectedWallets now represents all the wallets that are actually connected

```jsx theme={"system"}
const { connectedWallets } = useDynamicContext()
```

##### *LinkedWallets*

Used to be called ConnectedWallets now only represents that wallets that are linked to the account (only relevant to connect-and-auth flow)

```jsx theme={"system"}
const { linkedWallets } = useDynamicContext()
```

#### *Updates to Walletbook*

If you have a dependancy on [@dynamic-labs/walletbook](https://www.npmjs.com/package/@dynamic-labs/wallet-book?activeTab=versions) \< v0.19, please remove it from your dependancies as it should now be included by default alongside the sdk-react package.

## From V0.16 to V0.17

### Breaking Changes

* In favor of supporting MagicLink Wallets we removed the support for Fortmatic.

* `chainName` on EvmNetwork is deprecated in favor of `name`. If you're passing `evmNetworks` to `DynamicContextProvider` or `DynamicWagmiConnector`, you should update your code like so:

```ts theme={"system"}
<DynamicContextProvider
  settings={{
    environmentId: 'YOUR_ENV_ID',
    evmNetworks: [
      {
        blockExplorerUrls: [],
        chainId: 1,
        iconUrls: [],
     -  chainName: 'Ethereum',
     +  name: 'Ethereum',
        nativeCurrency: {
          decimals: 18,
          name: 'Ether',
          symbol: 'ETH',
        },
        networkId: 1,
        rpcUrls: [],
      },
    ],
  }}
>
  <HomePage />
</DynamicContextProvider>
```

<Note>
  {' '}

  `chainName` is a deprecated field on the EVMchain (and will be removed on v18),
  but if you pass a custom EVM network you will need to change to `name`.
</Note>

* the `multiWallet` prop on DynamicContextProvider is deprecated in favor of the Dashboard settings. See [here](/react/wallets/external-wallets/multi-wallet) for more info.

## From V0.15 to V0.16

### Breaking Change

* With the introduction of email login and social verification we moved to `verifiedCredentials` instead of `blockchainAccounts`. `blockChainAccounts` was removed from the [user's object](/react/reference/objects/userprofile).

## From V0.14 to V0.15

### Breaking Change

* Based on your feedback, our team has been hard at work to completely redesign our SDK UI and move it to ShadowDom. Now in addition, to the default customizations that we provide in the our admin dashboard, you have full control and ability to customize any element in the Dynamic's SDK to your liking. If you previously used any CSS Classes to override our previous SDK modal you will need to update them to the current CSS classes.
  For more info see: [Custom CSS](/react/using-our-ui/design-customizations/css/custom-css).

* As we introduced more callbacks, we now require all the callbacks to be nested under events. See [Callbacks](/react/reference/events/events-introduction) for more info.

* We removed user.walletPublicKey, instead please use primaryWallet.address, which you can access from [useDynamicContext](/react/reference/hooks/usedynamiccontext).