Magic Wallet

Magic Wallet implementation

Add Magic's dependencies

The @magic-sdk has a few dependencies you need to add to your app before using the SDK in React Native. For convenience you can run:

yarn add react-native-safe-area-context@4.5.3 react-native-webview react-native-device-info && cd ios && pod install

which will install the following dependencies:

• react-native-safe-area-context
  • Note: The magic wallet requires the app to be wrapped in a SafeAreaProvider. This is something we handle in the SDK so please, if your app already has a SafeAreaProvider you can remove it and just wrap your app in our ThirdwebProvider, this will take care of the safe area context for you.
• react-native-webview
• react-native-device-info

You also need a Magic api-key to pass it as part of the wallet config.

Using the new wallet

NOTE: magicWallet has been deprecated starting in version @thirdweb-dev/react-native@0.2.49 in favor of magicLink for consistency with our React SDK.

We suggest you add magicLink as the first wallet in your supportedWallets list since the UI for it is a TextInput field:

import { Goerli } from '@thirdweb-dev/chains';
import { ThirdwebProvider, magicLink, metamaskWallet } from '@thirdweb-dev/react-native';

<ThirdwebProvider
    clientId="your-client-id"
    activeChain={Goerli}
    supportedWallets={[
    magicLink({
        apiKey: 'magic_api_key',
    }),
    metamaskWallet(),
]}>