diff --git a/docs/advanced/walletconnectmodal/resources.mdx b/docs/advanced/walletconnectmodal/resources.mdx index 74f923920..c9dc97c37 100644 --- a/docs/advanced/walletconnectmodal/resources.mdx +++ b/docs/advanced/walletconnectmodal/resources.mdx @@ -5,10 +5,8 @@ import PlatformTabItem from '../../components/PlatformTabItem' Valuable assets for developers and users interested in integrating Web3Wallet into their applications. - - - [Awesome WalletConnect](https://github.com/WalletConnect/awesome-walletconnect) - Community-curated collection of WalletConnect-enabled wallets, libraries, and tools. -- [AppKit Laboratory](https://lab.web3modal.com) - A place to test your wallet integrations against various setups of AppKit. +- [AppKit Laboratory](https://appkit-lab.reown.com/) - A place to test your wallet integrations against various setups of AppKit. - [Web3Wallet GitHub](https://github.com/WalletConnect/walletconnect-monorepo/tree/v2.0/packages/web3wallet) - Web3Wallet GitHub repository. ## Implementation Examples diff --git a/docs/appkit/android/core/actions.mdx b/docs/appkit/android/core/actions.mdx index e7ff847df..2b23c3d7d 100644 --- a/docs/appkit/android/core/actions.mdx +++ b/docs/appkit/android/core/actions.mdx @@ -4,16 +4,16 @@ ### Get selected chain -You can get selected chain by calling the `getSelectedChain()` on the `Web3Modal` object. +You can get selected chain by calling the `getSelectedChain()` on the `AppKit` object. ```kotlin -Web3Modal.getSelectedChain() +AppKit.getSelectedChain() ``` -## Web3Modal.ModalDelegate +## AppKit.ModalDelegate ```kotlin -val web3ModalModalDelegate = object : Web3Modal.ModalDelegate { +val appKitModalDelegate = object : AppKit.ModalDelegate { override fun onSessionApproved(approvedSession: Modal.Model.ApprovedSession) { // Triggered when receives the session approval from wallet } @@ -60,10 +60,10 @@ val web3ModalModalDelegate = object : Web3Modal.ModalDelegate { } ``` -You have set delegate on Web3Modal to start getting updates from Wallet. +You have set delegate on AppKit to start getting updates from Wallet. ```kotlin - Web3Modal.setDelegate(web3ModalModalDelegate) + AppKit.setDelegate(appKitModalDelegate) ``` ## Actions @@ -72,7 +72,7 @@ You have set delegate on Web3Modal to start getting updates from Wallet. ```kotlin -Web3Modal.disconnect( +AppKit.disconnect( onSuccess = { /* callback that letting you know that you have successfully disconnected */ }, @@ -90,7 +90,7 @@ val requestParams = Modal.Params.Request( params = /* Method params */, ) -Web3Modal.request( +AppKit.request( request = requestParams, onSuccess = { /* callback that letting you know that you have successful request */ @@ -103,10 +103,10 @@ Web3Modal.request( ### Get Active Account -Returns the current active account connected via Web3Modal +Returns the current active account connected via AppKit ```kotlin -Web3Modal.getAccount() +AppKit.getAccount() ``` ### Get Connection type @@ -114,5 +114,5 @@ Web3Modal.getAccount() Return information about the type of our connection ```kotlin -Web3Modal.getConnectorType() +AppKit.getConnectorType() ``` diff --git a/docs/appkit/android/core/components.mdx b/docs/appkit/android/core/components.mdx index 3a1dab1e6..d436a3d17 100644 --- a/docs/appkit/android/core/components.mdx +++ b/docs/appkit/android/core/components.mdx @@ -3,7 +3,7 @@ import TabItem from '@theme/TabItem' # Components -You can use predefined Web3ModalComponent and add it in your application. As a view, dialog or modal. +You can use predefined AppKitComponent and add it in your application. As a view, dialog or modal. ```kotlin import androidx.compose.material.ExperimentalMaterialApi @@ -20,7 +20,7 @@ setContent { ModalBottomSheetLayout( sheetContent = { - Web3ModalComponent( + AppKitComponent( shouldOpenChooseNetwork = true | false, closeModal = { coroutineScope.launch { modalSheetState.hide() } ) @@ -44,15 +44,15 @@ You can add ready made button components to your application ```kotlin -import com.walletconnect.web3.modal.ui.components.button.Web3Button -import com.walletconnect.web3.modal.ui.components.button.ConnectButtonSize -import com.walletconnect.web3.modal.ui.components.button.AccountButtonType -import com.walletconnect.web3.modal.ui.components.button.rememberWeb3ModalState +import com.reown.appkit.ui.components.button.Web3Button +import com.reown.appkit.ui.components.button.ConnectButtonSize +import com.reown.appkit.ui.components.button.AccountButtonType +import com.reown.appkit.ui.components.button.rememberAppKitState YourAppScreen(navController: NavController) { - val web3ModalState = rememberWeb3ModalState(navController = navController) + val appKitState = rememberAppKitState(navController = navController) Web3Button( - state = web3ModalState, + state = appKitState, accountButtonType = AccountButtonType.NORMAL || AccountButtonType.MIXED, connectButtonSize = ConnectButtonSize.NORMAL || ConnectButtonSize.SMALL ) @@ -72,7 +72,7 @@ YourAppScreen(navController: NavController) { android:gravity="center" android:orientation="vertical"> - ```kotlin -import com.walletconnect.web3.modal.ui.components.button.NetworkButton -import com.walletconnect.web3.modal.ui.components.button.rememberWeb3ModalState +import com.reown.appkit.ui.components.button.NetworkButton +import com.reown.appkit.ui.components.button.rememberAppKitState YourAppScreen(navController: NavController) { - val web3ModalState = rememberWeb3ModalState(navController = navController) - NetworkButton(state = web3ModalState) + val appKitState = rememberAppKitState(navController = navController) + NetworkButton(state = appKitState) } ``` @@ -114,7 +114,7 @@ YourAppScreen(navController: NavController) { android:gravity="center" android:orientation="vertical"> - @@ -133,14 +133,14 @@ YourAppScreen(navController: NavController) { ```kotlin -import com.walletconnect.web3.modal.ui.components.button.ConnectButton -import com.walletconnect.web3.modal.ui.components.button.ConnectButtonSize -import com.walletconnect.web3.modal.ui.components.button.rememberWeb3ModalState +import com.reown.appkit.ui.components.button.ConnectButton +import com.reown.appkit.ui.components.button.ConnectButtonSize +import com.reown.appkit.ui.components.button.rememberAppKitState YourAppScreen(navController: NavController) { - val web3ModalState = rememberWeb3ModalState(navController = navController) + val appKitState = rememberAppKitState(navController = navController) ConnectButton( - state = web3ModalState, + state = appKitState, buttonSize = ConnectButtonSize.NORMAL || ConnectButtonSize.SMALL ) } @@ -159,7 +159,7 @@ YourAppScreen(navController: NavController) { android:gravity="center" android:orientation="vertical"> - ```kotlin -import com.walletconnect.web3.modal.ui.components.button.AccountButton -import com.walletconnect.web3.modal.ui.components.button.AccountButtonType -import com.walletconnect.web3.modal.ui.components.button.rememberWeb3ModalState +import com.reown.appkit.ui.components.button.AccountButton +import com.reown.appkit.ui.components.button.AccountButtonType +import com.reown.appkit.ui.components.button.rememberAppKitState YourAppScreen(navController: NavController) { - val web3ModalState = rememberWeb3ModalState(navController = navController) + val appKitState = rememberAppKitState(navController = navController) AccountButton( - state = web3ModalState, + state = appKitState, buttonSize = AccountButtonType.NORMAL || AccountButtonType.MIXED ) } @@ -205,7 +205,7 @@ YourAppScreen(navController: NavController) { android:gravity="center" android:orientation="vertical"> - -### Web3Modal State +### AppKit State -Web3modalState is an object that ensures communication between your application and the state of the Web3Modal. +AppKitState is an object that ensures communication between your application and the state of the AppKit. -#### Create web3ModalState: +#### Create appKitState: -NavController is required to create Web3ModalState +NavController is required to create appKitState ```kotlin - val web3modalState = rememberWeb3ModalState(navController) + val appKitState = rememberAppKitState(navController) ``` -#### Web3ModalState methods +#### AppKitState methods ```kotlin - web3ModalState.isOpen + appKitState.isOpen ``` -returns `StateFlow` whose value is updated depending on whether the web3modal component is open +returns `StateFlow` whose value is updated depending on whether the appkit component is open ```kotlin - web3modalState.isConnected + appKitState.isConnected ``` -returns `StateFlow` whose value depends on the active session in Web3Modal +returns `StateFlow` whose value depends on the active session in AppKit diff --git a/docs/appkit/android/core/installation.mdx b/docs/appkit/android/core/installation.mdx index 41e7fd4a7..e52d69fc4 100644 --- a/docs/appkit/android/core/installation.mdx +++ b/docs/appkit/android/core/installation.mdx @@ -2,9 +2,9 @@ Kotlin implementation of AppKit for Android applications. -Android Core ![Maven Central](https://img.shields.io/maven-central/v/com.walletconnect/android-core) +Android Core ![Maven Central](https://img.shields.io/maven-central/v/com.reown/android-core) -Web3Modal ![Maven Central](https://img.shields.io/maven-central/v/com.walletconnect/web3modal) +AppKit ![Maven Central](https://img.shields.io/maven-central/v/com.reown/appkit) ### Requirements @@ -27,7 +27,7 @@ allprojects { app/build.gradle.kts ```gradle -implementation(platform("com.walletconnect:android-bom:$BOM_VERSION")) -implementation("com.walletconnect:android-core") -implementation("com.walletconnect:web3modal") +implementation(platform("com.reown:android-bom:$BOM_VERSION")) +implementation("com.reown:android-core") +implementation("com.reown:appkit") ``` diff --git a/docs/appkit/android/core/one-click-auth.mdx b/docs/appkit/android/core/one-click-auth.mdx index 67aa0f87e..f3488b3df 100644 --- a/docs/appkit/android/core/one-click-auth.mdx +++ b/docs/appkit/android/core/one-click-auth.mdx @@ -13,10 +13,10 @@ Connecting a wallet, proving control of an address with an off-chain signature, ## Configure your AppKit Client -To integrate SIWE with AppKit, you need to configure your Web3Modal client using `Modal.Model.AuthPayloadParams`, which are required to create a SIWE message for the user to sign: +To integrate SIWE with AppKit, you need to configure your AppKit client using `Modal.Model.AuthPayloadParams`, which are required to create a SIWE message for the user to sign: ```kotlin - Web3Modal.setAuthRequestParams(authPayloadParams) + AppKit.setAuthRequestParams(authPayloadParams) ``` #### Example of AuthRequestParams @@ -33,9 +33,9 @@ To integrate SIWE with AppKit, you need to configure your Web3Modal client using ) ``` -Configuring your Web3Modal client with Modal.Model.AuthPayloadParams will prioritize authentication requests over regular session proposals. If the wallet supports One-Click Auth, the session will be created and the user will automatically authenticate without needing to send another SIWE request over personal_sign. If the wallet does not support One-Click Auth, it will fall back to the session proposal. In this case, to authenticate the user, AppKit will send another session request to prove address ownership. +Configuring your AppKit client with Modal.Model.AuthPayloadParams will prioritize authentication requests over regular session proposals. If the wallet supports One-Click Auth, the session will be created and the user will automatically authenticate without needing to send another SIWE request over personal_sign. If the wallet does not support One-Click Auth, it will fall back to the session proposal. In this case, to authenticate the user, AppKit will send another session request to prove address ownership. -To check whether the user has signed a SIWE message, check `onSessionAuthenticateResponse` callback from `Web3Modal.ModalDelegate`: +To check whether the user has signed a SIWE message, check `onSessionAuthenticateResponse` callback from `AppKit.ModalDelegate`: ```kotlin fun onSessionAuthenticateResponse(response: Modal.Model.SessionAuthenticateResponse) { @@ -85,15 +85,15 @@ CoreClient.initialize( ... ) -Web3Modal.initialize(Modal.Params.Init(core = CoreClient)) +AppKit.initialize(Modal.Params.Init(core = CoreClient)) ``` Once link mode is configured, your dApp will connect and send requests to wallets via app links after receiving proof from the wallet that it also supports link mode. -The wallet will also send responses using app links. Your app needs to pass these responses to the Web3Modal client so it can process them. +The wallet will also send responses using app links. Your app needs to pass these responses to the AppKit client so it can process them. ```kotlin -Web3Modal.handleDeepLink(url) { error -> +AppKit.handleDeepLink(url) { error -> //handle error } diff --git a/docs/appkit/android/core/options.mdx b/docs/appkit/android/core/options.mdx index c20fa3162..4a2cbe728 100644 --- a/docs/appkit/android/core/options.mdx +++ b/docs/appkit/android/core/options.mdx @@ -12,7 +12,7 @@ val recommendedWalletsIds = listOf( val initParams = Modal.Params.Init(core = CoreClient, recommendedWalletsIds = recommendedWalletsIds) -Web3Modal.initialize( +AppKit.initialize( init = initParams, onSuccess = { // Callback will be called if initialization is successful @@ -35,7 +35,7 @@ val excludedWalletIds = listOf( val initParams = Modal.Params.Init(core = CoreClient, excludedWalletIds = excludedWalletIds) -Web3Modal.initialize( +AppKit.initialize( init = initParams, onSuccess = { // Callback will be called if initialization is successful @@ -76,7 +76,7 @@ Coinbase has been added since version 1.2.0 ```kotlin val initParams = Modal.Params.Init(core = CoreClient, coinbaseEnabled = true) -Web3Modal.initialize( +AppKit.initialize( init = initParams, onSuccess = { // Callback will be called if initialization is successful @@ -87,12 +87,12 @@ Web3Modal.initialize( ) ``` -Coinbase Wallet SDK requires Web3Modal registration in Activity to receive responses from Coinbase wallet +Coinbase Wallet SDK requires AppKit registration in Activity to receive responses from Coinbase wallet ```kotlin fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) - Web3Modal.register(this) + AppKit.register(this) // Your content } ``` diff --git a/docs/appkit/android/core/theming.mdx b/docs/appkit/android/core/theming.mdx index fd1fc9487..be2bd2bce 100644 --- a/docs/appkit/android/core/theming.mdx +++ b/docs/appkit/android/core/theming.mdx @@ -11,21 +11,21 @@ import TabItem from '@theme/TabItem' > -Wrap your composable component with `Web3ModalTheme` +Wrap your composable component with `AppKitTheme` ```kotlin -import com.walletconnect.web3.modal.ui.Web3ModalTheme +import com.reown.appkit.ui.AppKitTheme -Web3ModalTheme( - mode = Web3ModalTheme.Mode.AUTO || Web3ModalTheme.Mode.LIGHT || Web3ModalTheme.Mode.DARK, - lightColors = Web3ModalTheme.provideLightWeb3ModalColors( +AppKitTheme( + mode = AppKitTheme.Mode.AUTO || AppKitTheme.Mode.LIGHT || AppKitTheme.Mode.DARK, + lightColors = AppKitTheme.provideLightAppKitColors( // Override colors ), - darkColors = Web3ModalTheme.provideDarkWeb3ModalColors( + darkColors = AppKitTheme.provideDarkAppKitColors( // Override colors ) ) { - /* any Web3Modal component or graph */ + /* any AppKit component or graph */ } ``` @@ -34,12 +34,12 @@ Web3ModalTheme( -You can define Web3ModalTheme in yours `style.xml` files +You can define AppKitTheme in yours `style.xml` files ```xml - @@ -89,9 +89,9 @@ You can define Web3ModalTheme in yours `style.xml` files > -Customizable colors in Web3ModalTheme. -To override colors you need to use methods `Web3ModalTheme.provideLightWeb3ModalColors` or Web3ModalTheme.provideDarkWeb3ModalColors -To override foreground or background `ColorPalette` you can define new palette or use one of the Web3ModalTheme methods to provide Palette and override selected colors +Customizable colors in AppKitTheme. +To override colors you need to use methods `AppKitTheme.provideLightAppKitColors` or AppKitTheme.provideDarkAppKitColors +To override foreground or background `ColorPalette` you can define new palette or use one of the AppKitTheme methods to provide Palette and override selected colors ```kotlin interface Colors { @@ -129,7 +129,7 @@ ColorPalette ```xml -You can override those values in Web3ModalTheme in your style.xml file +You can override those values in AppKitTheme in your style.xml file diff --git a/docs/appkit/android/core/usage.mdx b/docs/appkit/android/core/usage.mdx index 97a174950..93c1b0c4f 100644 --- a/docs/appkit/android/core/usage.mdx +++ b/docs/appkit/android/core/usage.mdx @@ -3,7 +3,7 @@ import TabItem from '@theme/TabItem' # Usage -`Web3Modal` is a singleton that interacts with the WalletConnectModal SDK. +`AppKit` is a singleton that interacts with the AppKit SDK. ## Implementation @@ -13,16 +13,16 @@ import TabItem from '@theme/TabItem' val connectionType = ConnectionType.AUTOMATIC or ConnectionType.MANUAL val projectId = "" // Get Project ID at https://cloud.walletconnect.com/ val appMetaData = Core.Model.AppMetaData( - name = "Kotlin.Web3Modal", - description = "Kotlin Web3Modal Implementation", - url = "kotlin.walletconnect.com", - icons = listOf("https://raw.githubusercontent.com/WalletConnect/walletconnect-assets/master/Icon/Gradient/Icon.png"), - redirect = "kotlin-web3modal://request" + name = "Kotlin.AppKit", + description = "Kotlin AppKit Implementation", + url = "kotlin.reown.com", + icons = listOf("https://gblobscdn.gitbook.com/spaces%2F-LJJeCjcLrr53DcT1Ml7%2Favatar.png?alt=media"), + redirect = "kotlin-modal-wc://request" ) CoreClient.initialize(projectId = projectId, connectionType = connectionType, application = this, metaData = appMetaData) -Web3Modal.initialize( +AppKit.initialize( init = Modal.Params.Init(CoreClient), onSuccess = { // Callback will be called if initialization is successful @@ -35,16 +35,16 @@ Web3Modal.initialize( #### Session properties -You can define session properties by calling the `setSessionProperties` method on the `Web3Modal` object. +You can define session properties by calling the `setSessionProperties` method on the `AppKit` object. #### Chains This example of define ethereum chain. You can define the chains you want to use. The chain must be EVM compatible. ```kotlin -Example of definition chains: https://github.com/WalletConnect/WalletConnectKotlinV2/blob/master/product/web3modal/src/main/kotlin/com/walletconnect/web3/modal/presets/Web3ModalChainsPresets.kt +Example of definition chains: https://github.com/reown-com/reown-kotlin/blob/main/product/appkit/src/main/kotlin/com/reown/appkit/presets/AppKitChainsPresets.kt -Web3Modal.setChains(Web3ModalChainsPresets.ethChains.values.toList()) +AppKit.setChains(AppKitChainsPresets.ethChains.values.toList()) ``` **IMPORTANT**: `Chains` must be set before opening the modal. @@ -67,7 +67,7 @@ import com.google.accompanist.navigation.material.BottomSheetNavigator import com.google.accompanist.navigation.material.ExperimentalMaterialNavigationApi import com.google.accompanist.navigation.material.ModalBottomSheetLayout import com.google.accompanist.navigation.material.bottomSheet -import com.walletconnect.web3.modal.ui.web3ModalGraph +import com.reown.appkit.ui.appKitGraph setContent { val modalSheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden, skipHalfExpanded = true) @@ -82,18 +82,18 @@ setContent { composable("home") { HomeScreen() } - web3ModalGraph(navController) + appKitGraph(navController) } } } ``` -**IMPORTANT**: Web3Modal uses accompanist navigation material inside. `ModalBottomSheetLayout` should be imported from [Accompanist Navigation Material](https://google.github.io/accompanist/navigation-material/) +**IMPORTANT**: AppKit uses accompanist navigation material inside. `ModalBottomSheetLayout` should be imported from [Accompanist Navigation Material](https://google.github.io/accompanist/navigation-material/) ```kotlin -import com.walletconnect.web3.modal.ui.openWeb3Modal +import com.reown.appkit.ui.openAppKit -navController().openWeb3Modal( +navController().openAppKit( shouldOpenChooseNetwork = true | false onError = { } ) @@ -118,7 +118,7 @@ setContent { ModalBottomSheetLayout( sheetContent = { - Web3ModalComponent( + AppKitComponent( shouldOpenChooseNetwork = true | false, closeModal = { coroutineScope.launch { modalSheetState.hide() } ) @@ -136,19 +136,19 @@ setContent { ```kotlin import androidx.navigation.createGraph import androidx.navigation.fragment.fragment -import com.walletconnect.web3.modal.ui.web3ModalGraph +import com.reown.appkit.ui.appKitGraph navController.graph = navController.createGraph("Home") { fragment("Home") - web3Modal() + appKit() } ``` ```kotlin import androidx.navigation.fragment.findNavController -import com.walletconnect.web3.modal.ui.openWeb3Modal +import com.reown.appkit.ui.openAppKit -findNavController().openWeb3Modal( +findNavController().openAppKit( shouldOpenChooseNetwork = true | false onError = { } ) @@ -161,18 +161,18 @@ findNavController().openWeb3Modal( + android:name="com.reown.sample.HomeFragment"> - + ``` ```kotlin import androidx.navigation.fragment.findNavController -import com.walletconnect.web3.modal.ui.openWeb3Modal +import com.reown.appkit.ui.openAppKit -findNavController().openWeb3Modal( +findNavController().openAppKit( shouldOpenChooseNetwork = true | false onError = { } ) diff --git a/docs/appkit/features/multichain.mdx b/docs/appkit/features/multichain.mdx new file mode 100644 index 000000000..68db356e7 --- /dev/null +++ b/docs/appkit/features/multichain.mdx @@ -0,0 +1,57 @@ +--- +pagination_next: appkit/react/core/installation +title: Multichain +--- + +import Button from '../../components/button' +import Wrapper from '../../components/Home/Wrapper' +import useBaseUrl from '@docusaurus/useBaseUrl' + +import reactLogo from '../../../static/assets/home/reactLogo.png' +import nextjsLogo from '../../../static/assets/home/nextjsLogo.png' +import vueLogo from '../../../static/assets/home/vueLogo.png' +import javascriptLogo from '../../../static/assets/home/javascriptLogo.png' + +# Multichain + +AppKit is now multichain. The architecture is designed to support both EVM and non-EVM blockchains. This will allow developers and projects to choose and configure multiple blockchain networks within their instance of AppKit, extending beyond just Ethereum-based (EVM) networks. + + } ``` diff --git a/docs/appkit/javascript/core/multichain.mdx b/docs/appkit/javascript/core/multichain.mdx new file mode 100644 index 000000000..f1465ccc5 --- /dev/null +++ b/docs/appkit/javascript/core/multichain.mdx @@ -0,0 +1,9 @@ +--- +title: Multichain +--- + +import Multichain from '../../shared/multichain.mdx' +import PlatformTabs from '../../../components/PlatformTabs' +import PlatformTabItem from '../../../components/PlatformTabItem' + + \ No newline at end of file diff --git a/docs/appkit/javascript/core/siwe.mdx b/docs/appkit/javascript/core/siwe.mdx index ec176ad17..027757cef 100644 --- a/docs/appkit/javascript/core/siwe.mdx +++ b/docs/appkit/javascript/core/siwe.mdx @@ -23,7 +23,7 @@ WalletConnect uses permissions expressed as ReCaps to enable a One-Click Authent ```bash npm2yarn -npm i @web3modal/siwe +npm i @reown/appkit-siwe siwe ``` @@ -36,7 +36,7 @@ For a better UX we recommend using One-Click Auth. Install the AppKit SIWE package, additionally we also recommend installing [siwe](https://docs.login.xyz/) which will abstract a lot of the required logic. ```bash npm2yarn -npm i @web3modal/siwe siwe +npm i @reown/appkit-siwe siwe ``` @@ -49,10 +49,17 @@ npm i @web3modal/siwe siwe ## Initialize AppKit with your `siweConfig` ```ts -createWeb3Modal({ - //.. - siweConfig -}) +// Pass your siweConfig inside the createAppKit() function + const modal = createAppKit({ + adapters: [wagmiAdapter], //or your Ethers adapter + projectId, + caipNetworks: [mainnet, arbitrum], + defaultCaipNetwork: mainnet, + features: { + analytics: true, // Optional - defaults to your Cloud configuration + }, + siweConfig: siweConfig // pass your siweConfig + }) ``` ## SIWE Config Parameters diff --git a/docs/appkit/javascript/ethers/about/implementation.mdx b/docs/appkit/javascript/ethers/about/implementation.mdx index c5fd7988a..21d9b164c 100644 --- a/docs/appkit/javascript/ethers/about/implementation.mdx +++ b/docs/appkit/javascript/ethers/about/implementation.mdx @@ -1,50 +1,36 @@ import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem' -In your `main.ts` file set up the following configuration. +In your `main.js` file set up the following configuration. ```ts -import { createWeb3Modal, defaultConfig } from '@web3modal/ethers' +import { createAppKit } from '@reown/appkit' +import { EVMEthersClient } from '@reown/appkit-adapter-ethers' +import { mainnet, arbitrum } from '@reown/appkit/chains' // 1. Get projectId from https://cloud.walletconnect.com const projectId = 'YOUR_PROJECT_ID' -// 2. Set chains -const mainnet = { - chainId: 1, - name: 'Ethereum', - currency: 'ETH', - explorerUrl: 'https://etherscan.io', - rpcUrl: 'https://cloudflare-eth.com' -} +// 2. Set up Ethers adapter +const ethersAdapter = new EVMEthersClient() // 3. Create your application's metadata object const metadata = { - name: 'My Website', - description: 'My Website description', - url: 'https://mywebsite.com', // url must match your domain & subdomain - icons: ['https://avatars.mywebsite.com/'] + name: 'AppKit', + description: 'AppKit Example', + url: 'https://web3modal.com', // origin must match your domain & subdomain + icons: ['https://avatars.githubusercontent.com/u/37784886'] } -// 4. Create Ethers config -const ethersConfig = defaultConfig({ - /*Required*/ +// 4. Create a AppKit instance +const modal = createAppKit({ + adapters: [ethersAdapter], + caipNetworks: [mainnet, arbitrum], metadata, - - /*Optional*/ - enableEIP6963: true, // true by default - enableInjected: true, // true by default - enableCoinbase: true, // true by default - rpcUrl: '...', // used for the Coinbase SDK - defaultChainId: 1 // used for the Coinbase SDK -}) - -// 5. Create a AppKit instance -const modal = createWeb3Modal({ - ethersConfig, - chains: [mainnet], projectId, - enableAnalytics: true // Optional - defaults to your Cloud configuration + features: { + analytics: true // Optional - defaults to your Cloud configuration + } }) ``` diff --git a/docs/appkit/javascript/ethers/about/triggermodal.mdx b/docs/appkit/javascript/ethers/about/triggermodal.mdx index 41a60a82a..d288ae60b 100644 --- a/docs/appkit/javascript/ethers/about/triggermodal.mdx +++ b/docs/appkit/javascript/ethers/about/triggermodal.mdx @@ -9,8 +9,10 @@ To open AppKit you can use our [**web component**](../../core/components.mdx) or ```html
+ /* highlight-add-start */ - + + /* highlight-add-end */
@@ -26,7 +28,7 @@ Web components are global html elements that don't require importing. -You can trigger the modal by calling the `open` function from a modal instance returned by `createWeb3Modal`. +You can trigger the modal by calling the `open` function from a modal instance returned by `createAppKit`. Let's first add two html button elements into our `index.html` file: @@ -38,16 +40,24 @@ Let's first add two html button elements into our `index.html` file: HTML Example - - +
+ + + /* highlight-add-start */ + + + /* highlight-add-end */ +
``` -Following with our `main.ts` file, we can now add the needed logic to open the modal: +Following with our `main.js` file, we can now add the needed logic to open the modal: ```ts +// Trigger modal programaticaly +// Add this code inside `main.js` file at the end of the code file const openConnectModalBtn = document.getElementById('open-connect-modal') const openNetworkModalBtn = document.getElementById('open-network-modal') diff --git a/docs/appkit/javascript/ethers/actions.mdx b/docs/appkit/javascript/ethers/actions.mdx index 0b0ce0312..99752e008 100644 --- a/docs/appkit/javascript/ethers/actions.mdx +++ b/docs/appkit/javascript/ethers/actions.mdx @@ -23,9 +23,20 @@ const chainId = modal.getChainId() ### switchNetwork ```ts -const chainId = 137 - -modal.switchNetwork(chainId) +import { createAppKit } from '@reown/appkit/react' +import { mainnet, arbitrum, polygon } from '@reown/appkit/chains' + +const modal = createAppKit({ + adapters: [wagmiAdapter], + projectId, + caipNetworks: [mainnet, arbitrum], + metadata: metadata, + features: { + analytics: true, + } +}) + +modal.switchNetwork(polygon) ``` ### getIsConnected diff --git a/docs/appkit/javascript/ethers5/implementation.mdx b/docs/appkit/javascript/ethers5/implementation.mdx index ac3c385c3..55d7afaa7 100644 --- a/docs/appkit/javascript/ethers5/implementation.mdx +++ b/docs/appkit/javascript/ethers5/implementation.mdx @@ -1,22 +1,18 @@ import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem' -In your `main.ts` file set up the following configuration. +In your `main.js` file set up the following configuration. ```ts -import { createWeb3Modal, defaultConfig } from '@web3modal/ethers5' +import { EVMEthers5Client } from '@reown/appkit-adapter-ethers5' +import { mainnet, arbitrum } from '@reown/appkit/chains' +import { createAppKit } from '@reown/appkit' // 1. Get projectId at https://cloud.walletconnect.com const projectId = 'YOUR_PROJECT_ID' -// 2. Set chains -const mainnet = { - chainId: 1, - name: 'Ethereum', - currency: 'ETH', - explorerUrl: 'https://etherscan.io', - rpcUrl: 'https://cloudflare-eth.com' -} +// 2. Create the Ethers5 Adapter +const ethers5Adapter = new EVMEthers5Client() // 3. Create your application's metadata object const metadata = { @@ -26,25 +22,15 @@ const metadata = { icons: ['https://avatars.mywebsite.com/'] } -// 4. Create Ethers config -const ethersConfig = defaultConfig({ - /*Required*/ - metadata, - - /*Optional*/ - enableEIP6963: true, // true by default - enableInjected: true, // true by default - enableCoinbase: true, // true by default - rpcUrl: '...', // used for the Coinbase SDK - defaultChainId: 1 // used for the Coinbase SDK -}) - -// 5. Create a AppKit instance -const modal = createWeb3Modal({ - ethersConfig, - chains: [mainnet], +// 4. Create a AppKit instance +const modal = createAppKit({ + adapters: [ethers5Adapter], + metadata: metadata, + caipNetworks: [mainnet, arbitrum], projectId, - enableAnalytics: true // Optional - defaults to your Cloud configuration + features: { + analytics: true // Optional - defaults to your Cloud configuration + } }) ``` diff --git a/docs/appkit/javascript/solana/about/implementation.mdx b/docs/appkit/javascript/solana/about/implementation.mdx index 95d0ce339..7944ca250 100644 --- a/docs/appkit/javascript/solana/about/implementation.mdx +++ b/docs/appkit/javascript/solana/about/implementation.mdx @@ -6,16 +6,20 @@ AppKit Solana is built on top of the AppKit library and provides a set of compon On top of your app set up the following configuration, making sure that all functions are called outside any React component to avoid unwanted rerenders. ```tsx -import { createWeb3Modal, defaultSolanaConfig } from '@web3modal/solana' -import { solana, solanaTestnet, solanaDevnet } from '@web3modal/solana/chains' - -// 0. Setup chains -const chains = [solana, solanaTestnet, solanaDevnet] +import { createAppKit, type CaipNetwork } from '@reown/appkit/react' +import { SolanaWeb3JsClient } from '@reown/appkit-adapter-solana/react' +import { solana, solanaTestnet, solanaDevnet } from '@reown/appkit/chains' +import { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets' + +// 0. Set up Solana Adapter +const solanaWeb3JsAdapter = new SolanaWeb3JsClient({ + wallets: [new PhantomWalletAdapter(), new SolflareWalletAdapter()] +}) // 1. Get projectId from https://cloud.walletconnect.com const projectId = 'YOUR_PROJECT_ID' -// 2. Create solanaConfig +// 2. Create a metadata object - optional const metadata = { name: 'AppKit', description: 'AppKit Solana Example', @@ -23,19 +27,14 @@ const metadata = { icons: ['https://avatars.githubusercontent.com/u/37784886'] } -const solanaConfig = defaultSolanaConfig({ - metadata, - chains, - projectId -}) - // 3. Create modal -const modal = createWeb3Modal({ - solanaConfig, - chains, +createAppKit({ + adapters: [solanaWeb3JsAdapter], + caipNetworks: [solana, solanaTestnet, solanaDevnet], + metadata: metadata, projectId, - wallets: [ - // Solana wallet adapters (check Custom connectors for more info) - ] + features: { + analytics: true, // Optional - defaults to your Cloud configuration + } }) ``` diff --git a/docs/appkit/javascript/solana/about/programs.mdx b/docs/appkit/javascript/solana/about/programs.mdx index 79eff32cf..668688d23 100644 --- a/docs/appkit/javascript/solana/about/programs.mdx +++ b/docs/appkit/javascript/solana/about/programs.mdx @@ -11,7 +11,7 @@ import { TransactionInstruction, LAMPORTS_PER_SOL } from '@solana/web3.js' -import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/solana/react' +import { useAppKitAccount, useAppKitProvider } from '@reown/appkit/react' function deserializeCounterAccount(data) { if (data?.byteLength !== 8) { @@ -23,8 +23,8 @@ function deserializeCounterAccount(data) { } } -const { address, currentChain } = useWeb3ModalAccount() -const { walletProvider, connection } = useWeb3ModalProvider() +const { address, currentChain } = useAppKitAccount() +const { walletProvider, connection } = useAppKitProvider() async function onIncrementCounter() { const PROGRAM_ID = new PublicKey('Cb5aXEgXptKqHHWLifvXu5BeAuVLjojQ5ypq6CfQj1hy') diff --git a/docs/appkit/javascript/solana/about/triggermodal.mdx b/docs/appkit/javascript/solana/about/triggermodal.mdx index 398645c7c..e88566366 100644 --- a/docs/appkit/javascript/solana/about/triggermodal.mdx +++ b/docs/appkit/javascript/solana/about/triggermodal.mdx @@ -14,7 +14,7 @@ In this example we are going to use the `` component. /* highlight-add-start */ /* highlight-add-end */ - + ``` diff --git a/docs/appkit/javascript/wagmi/about/implementation.mdx b/docs/appkit/javascript/wagmi/about/implementation.mdx index acc978aee..7a2d03981 100644 --- a/docs/appkit/javascript/wagmi/about/implementation.mdx +++ b/docs/appkit/javascript/wagmi/about/implementation.mdx @@ -1,36 +1,45 @@ -For a quick integration you can use `defaultWagmiConfig` function which wraps Wagmi's [`createConfig`](https://wagmi.sh/core/api/createConfig) function with a predefined configuration. +For a quick integration, you can use the `createAppKit` function with a unified configuration. This automatically applies the predefined configurations for different adapters like Wagmi, Ethers, or Solana, so you no longer need to manually configure each one individually. Simply pass the common parameters such as `projectId`, `chains`, `metadata`, etc., and the function will handle the adapter-specific configurations under the hood. + This includes WalletConnect, Coinbase and Injected connectors, and the [Blockchain API](../../../../cloud/blockchain-api.mdx) as a [transport](https://wagmi.sh/core/api/createConfig#transports) -In your `main.ts` file set up the following configuration. +In your `main.js` file set up the following configuration. ```ts -import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi' - -import { mainnet, arbitrum } from 'viem/chains' -import { reconnect } from '@wagmi/core' +import { createAppKit } from '@reown/appkit' +import { mainnet, arbitrum } from '@reown/appkit/chains' +import { EVMWagmiClient } from '@reown/appkit-adapter-wagmi' // 1. Get a project ID at https://cloud.walletconnect.com const projectId = 'YOUR_PROJECT_ID' -// 2. Create wagmiConfig +// 2. Set up Wagmi adapter +const wagmiAdapter = new EVMWagmiClient() + +// 3. Configure the metadata const metadata = { name: 'AppKit', description: 'AppKit Example', - url: 'https://web3modal.com', // origin must match your domain & subdomain. + url: 'https://web3modal.com', // origin must match your domain & subdomain icons: ['https://avatars.githubusercontent.com/u/37784886'] } -const chains = [mainnet, arbitrum] as const -export const config = defaultWagmiConfig({ - chains, - projectId, +// 3. Create the modal +createAppKit({ + adapters: [wagmiAdapter], + caipNetworks: [mainnet, arbitrum], metadata, -}) -reconnect(config) - -// 3. Create modal -const modal = createWeb3Modal({ - wagmiConfig: config, projectId, + features: { + analytics: true // Optional - defaults to your Cloud configuration + } }) + +// 4. Trigger modal programaticaly +const openConnectModalBtn = document.getElementById('open-connect-modal') +const openNetworkModalBtn = document.getElementById('open-network-modal') + +openConnectModalBtn.addEventListener('click', () => modal.open()) +openNetworkModalBtn.addEventListener('click', () => modal.open({ view: 'Networks' })) + +// 5. Alternatively use w3m component buttons within the index.html file ``` diff --git a/docs/appkit/javascript/wagmi/about/triggermodal.mdx b/docs/appkit/javascript/wagmi/about/triggermodal.mdx index 398645c7c..a511630b4 100644 --- a/docs/appkit/javascript/wagmi/about/triggermodal.mdx +++ b/docs/appkit/javascript/wagmi/about/triggermodal.mdx @@ -11,10 +11,15 @@ In this example we are going to use the `` component. HTML Example - /* highlight-add-start */ - - /* highlight-add-end */ - +
+ + + /* highlight-add-start */ + + + /* highlight-add-end */ +
+ ``` diff --git a/docs/appkit/next/core/custom-connectors.mdx b/docs/appkit/next/core/custom-connectors.mdx index 081f33eca..17de049e9 100644 --- a/docs/appkit/next/core/custom-connectors.mdx +++ b/docs/appkit/next/core/custom-connectors.mdx @@ -10,10 +10,19 @@ Add custom connectors for Ethers or Wagmi If you already have Wagmi integrated into your application or would like more control over Wagmi's configuration, you can integrate AppKit on top of it. +Adding custom connectors like WalletConnect and Coinbase is optional. + +By default, [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) and WC connectors are provided out of the box. ```tsx -import { createConfig, cookieStorage, createStorage, http } from 'wagmi' -import { sepolia } from 'wagmi/chains' -import { walletConnect } from 'wagmi/connectors' +import { createAppKit } from '@reown/appkit/react' +import { EVMWagmiClient } from '@reown/appkit-adapter-wagmi' + +import { http, WagmiProvider, CreateConnectorFn } from 'wagmi' +import { sepolia } from '@reown/appkit/chains' +import { walletConnect, coinbaseWallet, injected } from 'wagmi/connectors' +import { QueryClient, QueryClientProvider } from '@tanstack/react-query' + +const queryClient = new QueryClient() export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID @@ -21,21 +30,40 @@ const metadata = { //... } -// Create wagmiConfig -export const config = createConfig({ - chains: [sepolia], +// create the connectors (delete the ones you don't need) +const connectors: CreateConnectorFn[] = [] +connectors.push(walletConnect({ projectId, metadata, showQrModal: false })) // showQrModal must be false +connectors.push(injected({ shimDisconnect: true })) +connectors.push( + coinbaseWallet({ + appName: metadata.name, + appLogoUrl: metadata.icons[0] + }) +) + +export const wagmiAdapter = new EVMWagmiClient({ + storage: transports: { [sepolia.id]: http() }, - connectors: [ - walletConnect({ projectId, metadata, showQrModal: false }), // showQrModal must be false. - // Other connectors... - ], - ssr: true, - storage: createStorage({ - storage: cookieStorage - }) + connectors +}) + +export const config = wagmiAdapter.wagmiConfig + +createAppKit({ + adapters: [wagmiAdapter], + projectId, + caipNetworks: [sepolia] }) + +export function ContextProvider({ children }) { + return ( + + {children} + + ) +} ``` @@ -48,43 +76,38 @@ Coming soon... Add custom wallet adapters for Solana wallets by first installing the wallet adapter package and then including the adapters in the wallets array. You can find a more Solana wallet adapters [here](https://github.com/anza-xyz/wallet-adapter/tree/master/packages/wallets). ```bash npm2yarn -npm install @solana/wallet-adapter-solflare +npm install @solana/wallet-adapter-wallets ``` ```ts -import { createWeb3Modal, defaultSolanaConfig } from '@web3modal/solana/react' -import { solana, solanaTestnet, solanaDevnet } from '@web3modal/solana/chains' -import { SolflareWalletAdapter } from '@solana/wallet-adapter-solflare' +import { createAppKit } from '@reown/appkit/react' +import { SolanaWeb3JsClient } from '@reown/appkit-adapter-solana/react' +import { solana, solanaTestnet, solanaDevnet } from '@reown/appkit/chains' -// 0. Setup chains -const chains = [solana, solanaTestnet, solanaDevnet] +import { SolflareWalletAdapter, PhantomWalletAdapter } from '@solana/wallet-adapter-wallets' + +// 0. Set up Solana adapter +const solanaWeb3JsAdapter = new SolanaWeb3JsClient({ + wallets: [new PhantomWalletAdapter(), new SolflareWalletAdapter()] +}) // 1. Get projectId from https://cloud.walletconnect.com const projectId = 'YOUR_PROJECT_ID' -// 2. Create solanaConfig +// 2. Set up the metadata const metadata = { //... } -const solanaConfig = defaultSolanaConfig({ - chains, - projectId, - metadata -}) - -// 3. Create modal -const modal = createWeb3Modal({ - solanaConfig, - projectId: projectId, +// 3. Create the modal +const modal = createAppKit({ + adapters: [solanaWeb3JsAdapter], + caipNetworks: [solana, solanaTestnet, solanaDevnet], metadata: metadata, - chains, - enableAnalytics: true, - termsConditionsUrl: 'https://walletconnect.com/terms', - privacyPolicyUrl: 'https://walletconnect.com/privacy', - wallets: [ - new SolflareWalletAdapter(), - ] + projectId, + features: { + analytics: true, + } }) ``` diff --git a/docs/appkit/next/core/hooks.mdx b/docs/appkit/next/core/hooks.mdx index 287a991c4..ca5760cfb 100644 --- a/docs/appkit/next/core/hooks.mdx +++ b/docs/appkit/next/core/hooks.mdx @@ -10,19 +10,19 @@ import SolanaHooks from '../solana/hooks.mdx' Hooks are functions that will help you control the modal, subscribe to wallet events and interact with them and smart contracts. -## useWeb3Modal +## useAppKit -Control the modal with the `useWeb3Modal` hook +Control the modal with the `useAppKit` hook ```ts -import { useWeb3Modal } from '@web3modal/wagmi/react' +import { useAppKit } from '@reown/appkit/react' export default function Component() { - const { open, close } = useWeb3Modal() + const { open, close } = useAppKit() open() @@ -34,10 +34,10 @@ export default function Component() { ```ts -import { useWeb3Modal } from '@web3modal/ethers5/react' +import { useAppKit } from '@reown/appkit/react' export default function Component() { - const { open, close } = useWeb3Modal() + const { open, close } = useAppKit() open() @@ -49,10 +49,10 @@ export default function Component() { ```ts -import { useWeb3Modal } from '@web3modal/ethers/react' +import { useAppKit } from '@reown/appkit/react' export default function Component() { - const { open, close } = useWeb3Modal() + const { open, close } = useAppKit() open() @@ -64,10 +64,10 @@ export default function Component() { ```ts -import { useWeb3Modal } from '@web3modal/solana/react' +import { useAppKit } from '@reown/appkit/react' export default function Component() { - const { open, close } = useWeb3Modal() + const { open, close } = useAppKit() open() @@ -134,7 +134,7 @@ disconnect() Metadata information from the connected wallet ```ts -import { useWalletInfo } from '@web3modal/wagmi/react' +import { useWalletInfo } from '@reown/appkit/react' export default Component(){ @@ -161,7 +161,7 @@ export default Component(){ -## useWeb3ModalState +## useAppKitState Get the current value of the modal's state @@ -169,36 +169,36 @@ Get the current value of the modal's state ```ts -import { useWeb3ModalState } from '@web3modal/wagmi/react' +import { useAppKitState } from '@reown/appkit/react' -const { open, selectedNetworkId } = useWeb3ModalState() +const { open, selectedNetworkId } = useAppKitState() ``` ```ts -import { useWeb3ModalState } from '@web3modal/ethers5/react' +import { useAppKitState } from '@reown/appkit/react' -const { open, selectedNetworkId } = useWeb3ModalState() +const { open, selectedNetworkId } = useAppKitState() ``` ```ts -import { useWeb3ModalState } from '@web3modal/ethers/react' +import { useAppKitState } from '@reown/appkit/react' -const { open, selectedNetworkId } = useWeb3ModalState() +const { open, selectedNetworkId } = useAppKitState() ``` ```ts -import { useWeb3ModalState } from '@web3modal/solana/react' +import { useAppKitState } from '@reown/appkit/react' -const { open, selectedNetworkId } = useWeb3ModalState() +const { open, selectedNetworkId } = useAppKitState() ``` @@ -222,10 +222,11 @@ The modal state consists of two reactive values: ]} /> -## useWeb3ModalTheme +## useAppKitTheme ```ts -const { themeMode, themeVariables, setThemeMode, setThemeVariables } = useWeb3ModalTheme() +import { useAppKitTheme } from '@reown/appkit/react' +const { themeMode, themeVariables, setThemeMode, setThemeVariables } = useAppKitTheme() setThemeMode('dark') @@ -238,7 +239,7 @@ setThemeVariables({ ## Track modal events ```ts -import { useWeb3ModalEvents } from '@web3modal/wagmi/react' +import { useAppKitEvents } from '@reown/appkit/react' -const events = useWeb3ModalEvents() +const events = useAppKitEvents() ``` diff --git a/docs/appkit/next/core/installation.mdx b/docs/appkit/next/core/installation.mdx index e60152bee..3bf2bbcd9 100644 --- a/docs/appkit/next/core/installation.mdx +++ b/docs/appkit/next/core/installation.mdx @@ -34,28 +34,28 @@ These steps are specific to [Next.js](https://nextjs.org/) app router. For other ```bash npm2yarn -npm install @web3modal/wagmi wagmi viem @tanstack/react-query +npm install @reown/appkit-adapter-wagmi wagmi viem @tanstack/react-query ``` ```bash npm2yarn -npm install @web3modal/ethers5 ethers@5.7.2 +npm install @reown/appkit-adapter-ethers5 ethers@5.7.2 ``` ```bash npm2yarn -npm install @web3modal/ethers ethers +npm install @reown/appkit-adapter-ethers ethers ``` ```bash npm2yarn -npm install @web3modal/solana +npm install @reown/appkit-adapter-solana ``` @@ -147,7 +147,7 @@ Read more about Wagmi hooks for smart contract interaction [here](https://wagmi. [Ethers](https://docs.ethers.org/v6/) can help us interact with wallets and smart contracts: ```tsx -import { useWeb3ModalProvider, useWeb3ModalAccount } from '@web3modal/ethers/react' +import { useAppKitProvider, useAppKitAccount } from "@reown/appkit/react" import { BrowserProvider, Contract, formatUnits } from 'ethers' const USDTAddress = '0x617f3112bf5397D0467D315cC709EF968D9ba546' @@ -163,8 +163,8 @@ const USDTAbi = [ ] function Components() { - const { address, chainId, isConnected } = useWeb3ModalAccount() - const { walletProvider } = useWeb3ModalProvider() + const { address, chainId, isConnected } = useAppKitAccount() + const { walletProvider } = useAppKitProvider() async function getBalance() { if (!isConnected) throw Error('User disconnected') diff --git a/docs/appkit/next/core/multichain.mdx b/docs/appkit/next/core/multichain.mdx new file mode 100644 index 000000000..f1465ccc5 --- /dev/null +++ b/docs/appkit/next/core/multichain.mdx @@ -0,0 +1,9 @@ +--- +title: Multichain +--- + +import Multichain from '../../shared/multichain.mdx' +import PlatformTabs from '../../../components/PlatformTabs' +import PlatformTabItem from '../../../components/PlatformTabItem' + + \ No newline at end of file diff --git a/docs/appkit/next/core/siwe.mdx b/docs/appkit/next/core/siwe.mdx index aa8794422..83c328ebd 100644 --- a/docs/appkit/next/core/siwe.mdx +++ b/docs/appkit/next/core/siwe.mdx @@ -29,7 +29,7 @@ It is designed from the ground up to support Next.js and Serverless. We can use ```bash npm2yarn -npm i @web3modal/siwe next-auth +npm i @reown/appkit-siwe next-auth ``` @@ -42,7 +42,7 @@ For a better UX we recommend using One-Click Auth. Install the AppKit SIWE package, additionally we also recommend installing [siwe](https://docs.login.xyz/) which will abstract a lot of the required logic. ```bash npm2yarn -npm i @web3modal/siwe siwe next-auth +npm i @reown/appkit-siwe siwe next-auth ``` @@ -55,9 +55,9 @@ npm i @web3modal/siwe siwe next-auth ```ts import { getCsrfToken, signIn, signOut, getSession } from 'next-auth/react' -import type { SIWEVerifyMessageArgs, SIWECreateMessageArgs, SIWESession } from '@web3modal/siwe' -import { createSIWEConfig, formatMessage } from '@web3modal/siwe' -import { mainnet, sepolia } from 'viem/chains' +import type { SIWEVerifyMessageArgs, SIWECreateMessageArgs, SIWESession } from '@reown/appkit-siwe' +import { createSIWEConfig, formatMessage } from '@reown/appkit-siwe' +import { mainnet, sepolia } from '@reown/appkit/chains' export const siweConfig = createSIWEConfig({ getMessageParams: async () => ({ @@ -118,7 +118,7 @@ export const siweConfig = createSIWEConfig({ Verify a SIWE signature. ```ts -import { verifySignature } from '@web3modal/siwe' +import { verifySignature } from '@reown/appkit-siwe' const isValid = await verifySignature({ address, message, signature, chainId, projectId }) ``` @@ -128,7 +128,7 @@ const isValid = await verifySignature({ address, message, signature, chainId, pr Get the chain ID from the SIWE message. ```ts -import { getChainIdFromMessage } from '@web3modal/siwe' +import {getChainIdFromMessage} from '@reown/appkit-siwe' const chainId = getChainIdFromMessage(message) ``` @@ -138,7 +138,7 @@ const chainId = getChainIdFromMessage(message) Get the address from the SIWE message. ```ts -import { getAddressFromMessage } from '@web3modal/siwe' +import { getAddressFromMessage } from '@reown/appkit-siwe' const address = getAddressFromMessage(message) ``` @@ -159,8 +159,8 @@ import { getCsrfToken, signIn, signOut, getSession } from 'next-auth/react' import { SiweMessage } from 'siwe' -import type { SIWEVerifyMessageArgs, SIWECreateMessageArgs } from '@web3modal/siwe' -import { createSIWEConfig } from '@web3modal/siwe' +import type { SIWEVerifyMessageArgs, SIWECreateMessageArgs } from '@reown/appkit-siwe' +import { createSIWEConfig, formatMessage } from '@reown/appkit-siwe' export const siweConfig = createSIWEConfig({ createMessage: ({ nonce, address, chainId }: SIWECreateMessageArgs) => @@ -231,7 +231,7 @@ import { verifySignature, getChainIdFromMessage, getAddressFromMessage -} from '@web3modal/siwe' +} from '@reown/appkit-siwe' declare module 'next-auth' { interface Session extends SIWESession { @@ -326,7 +326,7 @@ import credentialsProvider from 'next-auth/providers/credentials' import { getCsrfToken } from 'next-auth/react' import NextAuth from 'next-auth/next' -import type { SIWESession } from '@web3modal/siwe' +import type { SIWESession } from '@reown/appkit-siwe' import { SiweMessage } from 'siwe' declare module 'next-auth' { @@ -421,10 +421,17 @@ export { handler as GET, handler as POST } ## Initialize AppKit with your `siweConfig`. ```js -createWeb3Modal({ - //.. - siweConfig -}) +// Pass your siweConfig inside the createAppKit() function + const modal = createAppKit({ + adapters: [wagmiAdapter], //or your Ethers adapter + projectId, + caipNetworks: [mainnet, arbitrum], + defaultCaipNetwork: mainnet, + features: { + analytics: true, // Optional - defaults to your Cloud configuration + }, + siweConfig: siweConfig // pass your siweConfig + }) ``` ### SIWE Config reference diff --git a/docs/appkit/next/ethers/about/implementation.mdx b/docs/appkit/next/ethers/about/implementation.mdx index f3d7e3f13..f9b13c89f 100644 --- a/docs/appkit/next/ethers/about/implementation.mdx +++ b/docs/appkit/next/ethers/about/implementation.mdx @@ -6,19 +6,15 @@ In this example we will create a new file called `context/web3modal.tsx` outside ```tsx 'use client' -import { createWeb3Modal, defaultConfig } from '@web3modal/ethers/react' +import { createAppKit } from '@reown/appkit/react' +import { EVMEthersClient } from '@reown/appkit-adapter-ethers' +import { mainnet, arbitrum } from '@reown/appkit/chains' -// 1. Get projectId from https://cloud.walletconnect.com +// 1. Get projectId at https://cloud.walletconnect.com const projectId = 'YOUR_PROJECT_ID' -// 2. Set chains -const mainnet = { - chainId: 1, - name: 'Ethereum', - currency: 'ETH', - explorerUrl: 'https://etherscan.io', - rpcUrl: 'https://cloudflare-eth.com' -} +// 2. Set Ethers adapters +const ethers5Adapter = new EVMEthers5Client() // 3. Create a metadata object const metadata = { @@ -27,29 +23,22 @@ const metadata = { url: 'https://mywebsite.com', // origin must match your domain & subdomain icons: ['https://avatars.mywebsite.com/'] } -// 4. Create Ethers config -const ethersConfig = defaultConfig({ - /*Required*/ - metadata, - - /*Optional*/ - enableEIP6963: true, // true by default - enableInjected: true, // true by default - enableCoinbase: true, // true by default - rpcUrl: '...', // used for the Coinbase SDK - defaultChainId: 1 // used for the Coinbase SDK -}) -// 5. Create a AppKit instance -createWeb3Modal({ - ethersConfig, - chains: [mainnet], +// 4. Create the AppKit instance +createAppKit({ + adapters: [ethers5Adapter], + metadata: metadata, + caipNetworks: [mainnet, arbitrum], projectId, - enableAnalytics: true // Optional - defaults to your Cloud configuration + features: { + analytics: true // Optional - defaults to your Cloud configuration + } }) -export function AppKit({ children }) { - return children +export function AppKit() { + return ( + //make sure you have configured the inside + ) } ``` diff --git a/docs/appkit/next/ethers/about/triggermodal.mdx b/docs/appkit/next/ethers/about/triggermodal.mdx index 1bf4ac4b3..4edf53111 100644 --- a/docs/appkit/next/ethers/about/triggermodal.mdx +++ b/docs/appkit/next/ethers/about/triggermodal.mdx @@ -1,7 +1,7 @@ import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem' -To open AppKit you can use our [**web component**](../../core/components.mdx) or build your own button with AppKit [**hooks**](../../core/hooks.mdx#useweb3modal). +To open AppKit you can use our [**web component**](../../core/components.mdx) or build your own button with AppKit [**hooks**](../../core/hooks.mdx#useAppKit). @@ -21,14 +21,14 @@ Web components are global html elements that don't require importing. -You can trigger the modal by calling the `open` function from `useWeb3Modal` hook. +You can trigger the modal by calling the `open` function from `useAppKit` hook. ```tsx -import { useWeb3Modal } from '@web3modal/ethers/react' +import { useAppKit } from '@reown/appkit/react' export default function ConnectButton() { // 4. Use modal hook - const { open } = useWeb3Modal() + const { open } = useAppKit() return ( <> diff --git a/docs/appkit/next/ethers/hooks.mdx b/docs/appkit/next/ethers/hooks.mdx index 05787ab35..13719237a 100644 --- a/docs/appkit/next/ethers/hooks.mdx +++ b/docs/appkit/next/ethers/hooks.mdx @@ -1,41 +1,48 @@ import Button from '../../../components/button' -### useWeb3ModalAccount +### useAppKitAccount Hook that returns the client's information. ```tsx -import { useWeb3ModalAccount } from '@web3modal/ethers/react' +import { useAppKitAccount } from '@reown/appkit/react' function Components() { - const { address, chainId, isConnected } = useWeb3ModalAccount() + const { address, chainId, isConnected } = useAppKitAccount() //... } ``` -### useSwitchNetwork +### switchNetwork ```tsx -import { useSwitchNetwork } from '@web3modal/ethers/react' - -const chainId = 137 - -const { switchNetwork } = useSwitchNetwork() +import { createAppKit } from '@reown/appkit/react' +import { mainnet, arbitrum, polygon } from '@reown/appkit/chains' + +const modal = createAppKit({ + adapters: [wagmiAdapter], + projectId, + caipNetworks: [mainnet, arbitrum], + metadata: metadata, + features: { + analytics: true, + } +}) -switchNetwork(chainId) +modal.switchNetwork(polygon) ``` -### useWeb3ModalProvider +### useAppKitProvider Hook that returns the `walletProvider` and the `WalletProviderType`. ```tsx import { BrowserProvider } from 'ethers' -import { useWeb3ModalProvider } from '@web3modal/ethers/react' +import { useAppKitProvider } from '@reown/appkit/react' function Components() { - const { walletProvider } = useWeb3ModalProvider() + const { walletProvider } = useAppKitProvider() async function onSignMessage() { const provider = new BrowserProvider(walletProvider) @@ -48,14 +55,11 @@ function Components() { } ``` -### useWeb3ModalError +### getError ```ts -import { useWeb3ModalError } from '@web3modal/ethers/react' - function Components() { - const { error } = useWeb3ModalError() - + const error = modal.getError(); //... } ``` diff --git a/docs/appkit/next/ethers5/implementation.mdx b/docs/appkit/next/ethers5/implementation.mdx index 4f8cc7372..2cecd82d8 100644 --- a/docs/appkit/next/ethers5/implementation.mdx +++ b/docs/appkit/next/ethers5/implementation.mdx @@ -6,19 +6,15 @@ In this example we will create a new file called `context/web3modal.tsx` outside ```tsx 'use client' -import { createWeb3Modal, defaultConfig } from '@web3modal/ethers5/react' +import { createAppKit } from '@reown/appkit/react' +import { EVMEthers5Client } from '@reown/appkit-adapter-ethers5' +import { mainnet, arbitrum } from '@reown/appkit/chains' // 1. Get projectId at https://cloud.walletconnect.com const projectId = 'YOUR_PROJECT_ID' -// 2. Set chains -const mainnet = { - chainId: 1, - name: 'Ethereum', - currency: 'ETH', - explorerUrl: 'https://etherscan.io', - rpcUrl: 'https://cloudflare-eth.com' -} +// 2. Set Ethers adapters +const ethers5Adapter = new EVMEthers5Client() // 3. Create a metadata object const metadata = { @@ -28,29 +24,21 @@ const metadata = { icons: ['https://avatars.mywebsite.com/'] } -// 4. Create Ethers config -const ethersConfig = defaultConfig({ - /*Required*/ - metadata, - - /*Optional*/ - enableEIP6963: true, // true by default - enableInjected: true, // true by default - enableCoinbase: true, // true by default - rpcUrl: '...', // used for the Coinbase SDK - defaultChainId: 1 // used for the Coinbase SDK -}) - -// 5. Create a AppKit instance -createWeb3Modal({ - ethersConfig, - chains: [mainnet], +// 4. Create the AppKit instance +createAppKit({ + adapters: [ethers5Adapter], + metadata: metadata, + caipNetworks: [mainnet, arbitrum], projectId, - enableAnalytics: true // Optional - defaults to your Cloud configuration + features: { + analytics: true // Optional - defaults to your Cloud configuration + } }) -export function AppKit({ children }) { - return children +export function AppKit() { + return ( + //make sure you have configured the inside + ) } ``` diff --git a/docs/appkit/next/ethers5/triggermodal.mdx b/docs/appkit/next/ethers5/triggermodal.mdx index 86965df4b..b27acb00e 100644 --- a/docs/appkit/next/ethers5/triggermodal.mdx +++ b/docs/appkit/next/ethers5/triggermodal.mdx @@ -1,7 +1,7 @@ import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem' -To open AppKit you can use our [**web component**](../core/components.mdx) or build your own button with AppKit [**hooks**](../core/hooks.mdx#useweb3modal). +To open AppKit you can use our [**web component**](../core/components.mdx) or build your own button with AppKit [**hooks**](../core/hooks.mdx#useAppKit). @@ -21,14 +21,14 @@ Web components are global html elements that don't require importing. -You can trigger the modal by calling the `open` function from `useWeb3Modal` hook. +You can trigger the modal by calling the `open` function from `useAppKit` hook. ```tsx -import { useWeb3Modal } from '@web3modal/ethers/react' +import { useAppKit } from '@reown/appkit/react' export default function ConnectButton() { // 4. Use modal hook - const { open } = useWeb3Modal() + const { open } = useAppKit() return ( <> diff --git a/docs/appkit/next/solana/about/implementation.mdx b/docs/appkit/next/solana/about/implementation.mdx index 9fd7b7858..0275b1a4b 100644 --- a/docs/appkit/next/solana/about/implementation.mdx +++ b/docs/appkit/next/solana/about/implementation.mdx @@ -7,17 +7,20 @@ On top of your app set up the following configuration, making sure that all func ```tsx // App.tsx - -import { createWeb3Modal, defaultSolanaConfig } from '@web3modal/solana/react' -import { solana, solanaTestnet, solanaDevnet } from '@web3modal/solana/chains' - -// 0. Setup chains -const chains = [solana, solanaTestnet, solanaDevnet] +import { createAppKit, type CaipNetwork } from '@reown/appkit/react' +import { SolanaWeb3JsClient } from '@reown/appkit-adapter-solana/react' +import { solana, solanaTestnet, solanaDevnet } from '@reown/appkit/chains' +import { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets' + +// 0. Set up Solana Adapter +const solanaWeb3JsAdapter = new SolanaWeb3JsClient({ + wallets: [new PhantomWalletAdapter(), new SolflareWalletAdapter()] +}) // 1. Get projectId from https://cloud.walletconnect.com const projectId = 'YOUR_PROJECT_ID' -// 2. Create solanaConfig +// 2. Create a metadata object - optional const metadata = { name: 'AppKit', description: 'AppKit Solana Example', @@ -25,20 +28,15 @@ const metadata = { icons: ['https://avatars.githubusercontent.com/u/37784886'] } -const solanaConfig = defaultSolanaConfig({ - metadata, - chains, - projectId -}) - // 3. Create modal -createWeb3Modal({ - solanaConfig, - chains, +createAppKit({ + adapters: [solanaWeb3JsAdapter], + caipNetworks: [solana, solanaTestnet, solanaDevnet], + metadata: metadata, projectId, - wallets: [ - // Solana wallet adapters (check Custom connectors for more info) - ] + features: { + analytics: true, // Optional - defaults to your Cloud configuration + } }) export default function App() { diff --git a/docs/appkit/next/solana/about/programs.mdx b/docs/appkit/next/solana/about/programs.mdx index b17eb0129..13da8c731 100644 --- a/docs/appkit/next/solana/about/programs.mdx +++ b/docs/appkit/next/solana/about/programs.mdx @@ -11,7 +11,7 @@ import { TransactionInstruction, LAMPORTS_PER_SOL } from '@solana/web3.js' -import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/solana/react' +import { useAppKitAccount, useAppKitProvider } from '@reown/appkit/react' function deserializeCounterAccount(data?: Buffer): { count: number } { if (data?.byteLength !== 8) { @@ -23,8 +23,8 @@ function deserializeCounterAccount(data?: Buffer): { count: number } { } } -const { address, currentChain } = useWeb3ModalAccount() -const { walletProvider, connection } = useWeb3ModalProvider() +const { address, currentChain } = useAppKitAccount() +const { walletProvider, connection } = useAppKitProvider() async function onIncrementCounter() { const PROGRAM_ID = new PublicKey('Cb5aXEgXptKqHHWLifvXu5BeAuVLjojQ5ypq6CfQj1hy') diff --git a/docs/appkit/next/solana/about/triggermodal.mdx b/docs/appkit/next/solana/about/triggermodal.mdx index 47c87e344..c9ca57f2a 100644 --- a/docs/appkit/next/solana/about/triggermodal.mdx +++ b/docs/appkit/next/solana/about/triggermodal.mdx @@ -21,14 +21,14 @@ Web components are global html elements that don't require importing. -You can trigger the modal by calling the `open` function from `useWeb3Modal` hook. +You can trigger the modal by calling the `open` function from `useAppKit` hook. ```tsx -import { useWeb3Modal } from '@web3modal/solana/react' +import { useAppKit } from '@reown/appkit/react' export default function ConnectButton() { // 4. Use modal hook - const { open } = useWeb3Modal() + const { open } = useAppKit() return ( <> diff --git a/docs/appkit/next/solana/hooks.mdx b/docs/appkit/next/solana/hooks.mdx index d244ad3a6..e61ce7c46 100644 --- a/docs/appkit/next/solana/hooks.mdx +++ b/docs/appkit/next/solana/hooks.mdx @@ -1,30 +1,30 @@ import Button from '../../../components/button' -### useWeb3ModalAccount +### useAppKitAccount Hook that returns the client's information. ```tsx -import { useWeb3ModalAccount } from '@web3modal/solana/react' +import { useAppKitAccount } from '@web3modal/solana/react' function Components() { - const { address, chainId, isConnected } = useWeb3ModalAccount() + const { address, chainId, isConnected } = useAppKitAccount() //... } ``` -### useWeb3ModalProvider +### useAppKitProvider Hook that returns the `walletProvider` and the `WalletProviderType`. ```tsx -import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/solana/react' +import { useAppKitAccount, useAppKitProvider } from '@web3modal/solana/react' function SignMessage() { // 0. Get account and provider - const { address } = useWeb3ModalAccount() - const { walletProvider } = useWeb3ModalProvider() + const { address } = useAppKitAccount() + const { walletProvider } = useAppKitProvider() // 1. Create a function to sign a message async function onSignMessage() { @@ -48,13 +48,13 @@ function SignMessage() { } ``` -### useWeb3ModalError +### useAppKitError ```ts -import { useWeb3ModalError } from '@web3modal/solana/react' +import { useAppKitError } from '@web3modal/solana/react' function Components() { - const { error } = useWeb3ModalError() + const { error } = useAppKitError() //... } diff --git a/docs/appkit/next/wagmi/about/implementation.mdx b/docs/appkit/next/wagmi/about/implementation.mdx index 5bc4a0d6b..a5c049746 100644 --- a/docs/appkit/next/wagmi/about/implementation.mdx +++ b/docs/appkit/next/wagmi/about/implementation.mdx @@ -1,4 +1,5 @@ -For a quick integration you can use `defaultWagmiConfig` function which wraps Wagmi's [`createConfig`](https://wagmi.sh/core/api/createConfig) function with a predefined configuration. +For a quick integration, you can use the `createAppKit` function with a unified configuration. This automatically applies the predefined configurations for different adapters like Wagmi, Ethers, or Solana, so you no longer need to manually configure each one individually. Simply pass the common parameters such as projectId, chains, metadata, etc., and the function will handle the adapter-specific configurations under the hood. + This includes WalletConnect, Coinbase and Injected connectors, and the [Blockchain API](../../../../cloud/blockchain-api.mdx) as a [transport](https://wagmi.sh/core/api/createConfig#transports) ### Wagmi config @@ -8,39 +9,29 @@ Create a new file for your Wagmi configuration, since we are going to be calling For this example we will create a file called `config/index.tsx` outside our app directory and set up the following configuration ```tsx -import { defaultWagmiConfig } from '@web3modal/wagmi/react/config' - -import { cookieStorage, createStorage } from 'wagmi' -import { mainnet, sepolia } from 'wagmi/chains' +import { cookieStorage, createStorage, http } from '@wagmi/core' +import { EVMWagmiClient } from '@reown/appkit-adapter-wagmi' // Get projectId from https://cloud.walletconnect.com export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID -if (!projectId) throw new Error('Project ID is not defined') - -export const metadata = { - name: 'AppKit', - description: 'AppKit Example', - url: 'https://web3modal.com', // origin must match your domain & subdomain - icons: ['https://avatars.githubusercontent.com/u/37784886'] +if (!projectId) { + throw new Error('Project ID is not defined') } -// Create wagmiConfig -const chains = [mainnet, sepolia] as const -export const config = defaultWagmiConfig({ - chains, - projectId, - metadata, - ssr: true, +//Set up the Wagmi Adapter (Config) +export const wagmiAdapter = new EVMWagmiClient({ storage: createStorage({ storage: cookieStorage }), + ssr: true, }) + +export const config = wagmiAdapter.wagmiConfig ``` :::info -- Notice that we are using here the [recommended configuration from Wagmi for SSR](https://wagmi.sh/react/guides/ssr). - Using cookies is completely optional and by default Wagmi will use `localStorage` instead if the `storage` param is not defined. - The `ssr` flag will delay the hydration of the Wagmi's store to avoid hydration mismatch errors. ::: @@ -49,81 +40,92 @@ export const config = defaultWagmiConfig({ ### Context Provider -Let's create now a context provider that will wrap our application and initialized AppKit (`createWeb3Modal` needs to be called inside a React Client Component file). +Let's create now a context provider that will wrap our application and initialized AppKit (`createAppKit` needs to be called inside a Next Client Component file). In this example we will create a file called `context/index.tsx` outside our app directory and set up the following configuration ```tsx 'use client' -import React, { ReactNode } from 'react' -import { config, projectId, metadata } from '@/config' - -import { createWeb3Modal } from '@web3modal/wagmi/react' - +import { wagmiAdapter, projectId } from '@/config' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { createAppKit } from '@reown/appkit/react' +import { mainnet, arbitrum, avalanche, base, optimism, polygon } from '@reown/appkit/chains' +import React, { type ReactNode } from 'react' +import { cookieToInitialState, WagmiProvider, type Config } from 'wagmi' -import { State, WagmiProvider } from 'wagmi' - -// Setup queryClient +// Set up queryClient const queryClient = new QueryClient() -if (!projectId) throw new Error('Project ID is not defined') +if (!projectId) { + throw new Error('Project ID is not defined') +} + +// Set up metadata +const metadata = { + name: "appkit-example-scroll", + description: "AppKit Example - Scroll", + url: "https://scrollapp.com", // origin must match your domain & subdomain + icons: ["https://avatars.githubusercontent.com/u/37784886"] +} -// Create modal -createWeb3Modal({ - metadata, - wagmiConfig: config, +// Create the modal +const modal = createAppKit({ + adapters: [wagmiAdapter], projectId, - enableAnalytics: true // Optional - defaults to your Cloud configuration + caipNetworks: [mainnet, arbitrum, avalanche, base, optimism, polygon], + defaultCaipNetwork: mainnet, + metadata: metadata, + features: { + analytics: true, // Optional - defaults to your Cloud configuration + } }) -export default function AppKitProvider({ - children, - initialState -}: { - children: ReactNode - initialState?: State -}) { +function ContextProvider({ children, cookies }: { children: ReactNode; cookies: string | null }) { + const initialState = cookieToInitialState(wagmiAdapter.wagmiConfig as Config, cookies) + return ( - + {children} ) } + +export default ContextProvider ``` ### Layout -Next, in our `app/layout.tsx` file, we will import our `AppKitProvider` component and call [the Wagmi's function `cookieToInitialState`.](https://wagmi.sh/react/guides/ssr#_2-hydrate-the-cookie) +Next, in our `app/layout.tsx` file, we will import our `ContextProvider` component and call [the Wagmi's function `cookieToInitialState`.](https://wagmi.sh/react/guides/ssr#_2-hydrate-the-cookie) The `initialState` returned by `cookieToInitialState`, contains the optimistic values that will populate the Wagmi's store both on the server and client. ```tsx -import './globals.css' -import type { Metadata } from 'next' -import { headers } from 'next/headers' +import type { Metadata } from "next"; +import { Inter } from "next/font/google"; +import "./globals.css"; -import { cookieToInitialState } from 'wagmi' +const inter = Inter({ subsets: ["latin"] }); -import { config } from '@/config' -import AppKitProvider from '@/context' +import { headers } from "next/headers"; // added +import ContextProvider from '@/context' export const metadata: Metadata = { - title: 'Create Next App', - description: 'Generated by create next app' -} + title: "AppKit Example App", + description: "Powered by WalletConnect" +}; export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { - const initialState = cookieToInitialState(config, headers().get('cookie')) + const cookies = headers().get('cookie') + return ( - - {children} + + {children} ) diff --git a/docs/appkit/next/wagmi/about/triggermodal.mdx b/docs/appkit/next/wagmi/about/triggermodal.mdx index f527e7a06..b63561111 100644 --- a/docs/appkit/next/wagmi/about/triggermodal.mdx +++ b/docs/appkit/next/wagmi/about/triggermodal.mdx @@ -1,4 +1,4 @@ -To open AppKit you can use our [**web component**](../../core/components.mdx) or build your own button with AppKit [**hooks**](../../core/hooks.mdx#useweb3modal). +To open AppKit you can use our [**web component**](../../core/components.mdx) or build your own button with AppKit [**hooks**](../../core/hooks.mdx#useAppKit). In this example we are going to use the `` component. Web components are global html elements that don't require importing. diff --git a/docs/appkit/react-native/core/components.mdx b/docs/appkit/react-native/core/components.mdx index ac1e61549..c1f39ef74 100644 --- a/docs/appkit/react-native/core/components.mdx +++ b/docs/appkit/react-native/core/components.mdx @@ -6,9 +6,12 @@ title: Components import Table from '../../../components/Table' +AppKit comes with a set of components in case you want to integrate fast. +You can import them from `@reown/appkit-wagmi-react-native` or `@reown/appkit-ethers-react-native` + ### List of components available in AppKit package -### `` +### `` -### `` +### ``
-### `` +### ``
-### `` +### ``
```ts -import { useWeb3Modal } from '@web3modal/wagmi-react-native' +import { useAppKit } from '@reown/appkit-wagmi-react-native' export default function Component() { - const { open, close } = useWeb3Modal() + const { open, close } = useAppKit() open() @@ -31,10 +31,10 @@ export default function Component() { ```ts -import { useWeb3Modal } from '@web3modal/ethers-react-native' +import { useAppKit } from '@reown/appkit-ethers-react-native' export default function Component() { - const { open, close } = useWeb3Modal() + const { open, close } = useAppKit() open() @@ -46,10 +46,10 @@ export default function Component() { ```ts -import { useWeb3Modal } from '@web3modal/ethers5-react-native' +import { useAppKit } from '@reown/appkit-ethers5-react-native' export default function Component() { - const { open, close } = useWeb3Modal() + const { open, close } = useAppKit() open() @@ -95,7 +95,7 @@ List of views you can select ]} /> -## useWeb3ModalState +## useAppKitState Get the current value of the modal's state @@ -103,26 +103,26 @@ Get the current value of the modal's state ```ts -import { useWeb3ModalState } from '@web3modal/wagmi-react-native' +import { useAppKitState } from '@reown/appkit-wagmi-react-native' -const { open, selectedNetworkId } = useWeb3ModalState() +const { open, selectedNetworkId } = useAppKitState() ```` ```ts -import { useWeb3ModalState } from '@web3modal/ethers-react-native' +import { useAppKitState } from '@reown/appkit-ethers-react-native' -const { open, selectedNetworkId } = useWeb3ModalState() +const { open, selectedNetworkId } = useAppKitState() ```` ```ts -import { useWeb3ModalState } from '@web3modal/ethers5-react-native' +import { useAppKitState } from '@reown/appkit-ethers5-react-native' -const { open, selectedNetworkId } = useWeb3ModalState() +const { open, selectedNetworkId } = useAppKitState() ```` @@ -147,7 +147,7 @@ The modal state consists of two reactive values: /> -## useWeb3ModalEvents +## useAppKitEvents Get the last tracked modal event @@ -155,26 +155,26 @@ Get the last tracked modal event ```ts -import { useWeb3ModalEvents } from '@web3modal/wagmi-react-native' +import { useAppKitEvents } from '@reown/appkit-wagmi-react-native' -const event = useWeb3ModalEvents() +const event = useAppKitEvents() ```` ```ts -import { useWeb3ModalEvents } from '@web3modal/ethers-react-native' +import { useAppKitEvents } from '@reown/appkit-ethers-react-native' -const event = useWeb3ModalEvents() +const event = useAppKitEvents() ```` ```ts -import { useWeb3ModalEvents } from '@web3modal/ethers5-react-native' +import { useAppKitEvents } from '@reown/appkit-ethers5-react-native' -const event = useWeb3ModalEvents() +const event = useAppKitEvents() ```` @@ -189,7 +189,7 @@ Get the metadata information from the connected wallet ```ts -import { useWalletInfo } from '@web3modal/wagmi-react-native' +import { useWalletInfo } from '@reown/appkit-wagmi-react-native' const { walletInfo } = useWalletInfo() ```` @@ -198,7 +198,7 @@ const { walletInfo } = useWalletInfo() ```ts -import { useWalletInfo } from '@web3modal/ethers-react-native' +import { useWalletInfo } from '@reown/appkit-ethers-react-native' const { walletInfo } = useWalletInfo() ```` @@ -206,7 +206,7 @@ const { walletInfo } = useWalletInfo() ```ts -import { useWalletInfo } from '@web3modal/ethers5-react-native' +import { useWalletInfo } from '@reown/appkit-ethers5-react-native' const { walletInfo } = useWalletInfo() ```` diff --git a/docs/appkit/react-native/core/installation.mdx b/docs/appkit/react-native/core/installation.mdx index 4cb905d0d..2b3690a58 100644 --- a/docs/appkit/react-native/core/installation.mdx +++ b/docs/appkit/react-native/core/installation.mdx @@ -310,19 +310,19 @@ yarn add @coinbase/wallet-mobile-sdk react-native-mmkv ``` -yarn add @web3modal/coinbase-wagmi-react-native +yarn add @reown/appkit-coinbase-wagmi-react-native ``` ``` -yarn add @web3modal/coinbase-ethers-react-native +yarn add @reown/appkit-coinbase-ethers-react-native ``` ``` -yarn add @web3modal/coinbase-ethers-react-native +yarn add @reown/appkit-coinbase-ethers-react-native ``` diff --git a/docs/appkit/react-native/core/options.mdx b/docs/appkit/react-native/core/options.mdx index 86ac86290..143488474 100644 --- a/docs/appkit/react-native/core/options.mdx +++ b/docs/appkit/react-native/core/options.mdx @@ -4,10 +4,10 @@ import PlatformTabItem from '../../../components/PlatformTabItem' # Options -The following options can be passed to the `createWeb3Modal` function: +The following options can be passed to the `createAppKit` function: ```ts -createWeb3Modal({ projectId, chains, ...options }) +createAppKit({ projectId, chains, ...options }) ``` ## defaultChain @@ -20,7 +20,7 @@ You can set a desired chain for the initial connection: ```ts import { mainnet } from '@wagmi/core/chains' -createWeb3Modal({ +createAppKit({ //... defaultChain: mainnet }) @@ -37,7 +37,7 @@ const mainnet = { rpcUrl: 'https://cloudflare-eth.com', }; -createWeb3Modal({ +createAppKit({ //... defaultChain: mainnet }) @@ -55,7 +55,7 @@ const mainnet = { rpcUrl: 'https://cloudflare-eth.com', }; -createWeb3Modal({ +createAppKit({ //... defaultChain: mainnet }) @@ -71,7 +71,7 @@ Use your preferred clipboard library to allow AppKit use the clipboard to copy a ```ts import * as Clipboard from 'expo-clipboard' // or `@react-native-clipboard/clipboard` -createWeb3Modal({ +createAppKit({ //... clipboardClient: { setString: async (value: string) => { @@ -86,7 +86,7 @@ createWeb3Modal({ You can select tokens for AppKit to show the user's balance of. Each key represents the chain id of the token's blockchain. ```ts -createWeb3Modal({ +createAppKit({ //... tokens: { 1: { @@ -104,7 +104,7 @@ createWeb3Modal({ Add custom wallets to the modal's main view. `customWallets` is an array of objects, where each object contains specific information of a custom wallet. ```ts -createWeb3Modal({ +createAppKit({ //... customWallets: [ { @@ -113,6 +113,7 @@ createWeb3Modal({ homepage: 'www.mycustomwallet.com', // Optional image_url: 'my_custom_wallet_image', // Optional mobile_link: 'mobile_link', // Optional - Deeplink or universal + link_mode: 'universal_link', // Optional - Universal link if the wallet supports link-mode desktop_link: 'desktop_link', // Optional - Deeplink webapp_link: 'webapp_link', // Optional app_store: 'app_store', // Optional @@ -129,7 +130,7 @@ These wallets will also show up first in `All Wallets` view. You can find the wallets ids in [WalletConnect Explorer](https://walletconnect.com/explorer?type=wallet) ```ts -createWeb3Modal({ +createAppKit({ //... featuredWalletIds: [ '1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369', // Rainbow @@ -146,7 +147,7 @@ Unlike `featuredWalletIds`, these wallets will be the **only** ones shown in `Al You can get these ids from the explorer link mentioned before by clicking on a copy icon of desired wallet card. ```ts -createWeb3Modal({ +createAppKit({ //... includeWalletIds: [ '1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369', // Rainbow @@ -163,7 +164,7 @@ All other wallets will be shown in respective places. You can get these ids from the explorer link mentioned before by clicking on a copy icon of desired wallet card. ```ts -createWeb3Modal({ +createAppKit({ //... excludeWalletIds: [ '4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0', // Trust @@ -177,7 +178,7 @@ createWeb3Modal({ Enable analytics to get more insights on your users activity within your [WalletConnect Cloud's dashboard](https://cloud.walletconnect.com) ```ts -createWeb3Modal({ +createAppKit({ //... enableAnalytics: true }) @@ -188,7 +189,7 @@ createWeb3Modal({ Add or override the modal's network images. ```ts -createWeb3Modal({ +createAppKit({ // ... chainImages: { 1: 'https://my.images.com/eth.png' diff --git a/docs/appkit/react-native/core/siwe.mdx b/docs/appkit/react-native/core/siwe.mdx index 4dab4481d..6285a22bd 100644 --- a/docs/appkit/react-native/core/siwe.mdx +++ b/docs/appkit/react-native/core/siwe.mdx @@ -8,7 +8,7 @@ import Button from '../../../components/button' # Sign In With Ethereum -AppKit provides a simple solution for integrating with "Sign In With Ethereum" (SIWE), a new form of authentication that enables users to control their digital identity with their Ethereum account. +AppKit provides a simple solution for integrating with "Sign In With Ethereum" (SIWE), a form of authentication that enables users to control their digital identity with their Ethereum account. SIWE is a standard also known as [EIP-4361](https://docs.login.xyz/general-information/siwe-overview/eip-4361). ## One-Click Auth @@ -32,7 +32,7 @@ import { formatMessage, type SIWEVerifyMessageArgs, type SIWECreateMessageArgs -} from '@web3modal/siwe-react-native'; +} from '@reown/appkit-siwe-react-native'; export const siweConfig = createSIWEConfig({ getNonce: async (): Promise => { @@ -96,12 +96,12 @@ export const siweConfig = createSIWEConfig({ ``` ## Initialize AppKit with your `siweConfig` -Add the siwe configuration in `createWeb3Modal` initialization +Add the siwe configuration in `createAppKit` initialization ```ts import { siweConfig } from './siweConfig.ts' -createWeb3Modal({ +createAppKit({ //.. /* highlight-add-start */ siweConfig @@ -159,7 +159,7 @@ interface SIWEConfig { Verify a SIWE signature. Internally it calls your backend verification method. ```ts -import { verifySignature } from '@web3modal/siwe-react-native' +import { verifySignature } from '@reown/appkit-siwe-react-native' const isValid = await verifySignature({ address, message, signature, chainId, projectId }) ``` @@ -169,7 +169,7 @@ const isValid = await verifySignature({ address, message, signature, chainId, pr Get the chain ID from the SIWE message. ```ts -import { getChainIdFromMessage } from '@web3modal/siwe-react-native' +import { getChainIdFromMessage } from '@reown/appkit-siwe-react-native' const chainId = getChainIdFromMessage(message) ``` @@ -179,7 +179,7 @@ const chainId = getChainIdFromMessage(message) Get the address from the SIWE message. ```ts -import { getAddressFromMessage } from '@web3modal/siwe-react-native' +import { getAddressFromMessage } from '@reown/appkit-siwe-react-native' const address = getAddressFromMessage(message) ``` \ No newline at end of file diff --git a/docs/appkit/react-native/ethers/about/coinbase.mdx b/docs/appkit/react-native/ethers/about/coinbase.mdx index 9216f4290..2d140e708 100644 --- a/docs/appkit/react-native/ethers/about/coinbase.mdx +++ b/docs/appkit/react-native/ethers/about/coinbase.mdx @@ -1,7 +1,7 @@ 8. Initialize `CoinbaseProvider` and add it in the default config ```tsx -import { CoinbaseProvider } from '@web3modal/coinbase-ethers-react-native' +import { CoinbaseProvider } from '@reown/appkit-coinbase-ethers-react-native' const coinbaseProvider = new CoinbaseProvider({ redirect: 'YOUR_APP_SCHEME://', diff --git a/docs/appkit/react-native/ethers/about/implementation.mdx b/docs/appkit/react-native/ethers/about/implementation.mdx index 987441464..d8cc52341 100644 --- a/docs/appkit/react-native/ethers/about/implementation.mdx +++ b/docs/appkit/react-native/ethers/about/implementation.mdx @@ -1,8 +1,8 @@ import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem' -Start by importing `createWeb3Modal`, and wagmi packages, then create your configs as shown below. -Finally, pass your configuration to `createWeb3Modal`. +Start by importing `createAppKit` and create your configs as shown below. +Finally, pass your configuration to `createAppKit`. :::info Note @@ -13,7 +13,7 @@ Make sure you import `@walletconnect/react-native-compat` before using our packa ```tsx import '@walletconnect/react-native-compat' -import { createWeb3Modal, defaultConfig, Web3Modal } from '@web3modal/ethers-react-native' +import { createAppKit, defaultConfig, AppKit } from '@reown/appkit-ethers-react-native' // 1. Get projectId from https://cloud.walletconnect.com const projectId = 'YOUR_PROJECT_ID' @@ -22,7 +22,7 @@ const projectId = 'YOUR_PROJECT_ID' const metadata = { name: 'AppKit RN', description: 'AppKit RN Example', - url: 'https://walletconnect.com', + url: 'https://example.com', icons: ['https://avatars.githubusercontent.com/u/37784886'], redirect: { native: 'YOUR_APP_SCHEME://' @@ -51,7 +51,7 @@ const polygon = { const chains = [mainnet, polygon] // 4. Create modal -createWeb3Modal({ +createAppKit({ projectId, chains, config, @@ -62,7 +62,7 @@ export default function App() { return ( <> // Rest of your app... - + ) } @@ -74,16 +74,16 @@ To open AppKit modal you can use our **default** button component or build your -You can use default components to open the modal +You can use our components to open the modal ```tsx -import { W3mButton } from '@web3modal/ethers-react-native' +import { AppKitButton } from '@reown/appkit-ethers-react-native' export default function ConnectView() { return ( <> ...rest of your view - + ) } @@ -94,14 +94,14 @@ Learn more about the AppKit components [here](../../core/components.mdx) -You can trigger the modal by calling the `open` function from `useWeb3Modal` hook. +You can trigger the modal by calling the `open` function from `useAppKit` hook. ```tsx import { Pressable, Text } from 'react-native' -import { useWeb3Modal } from '@web3modal/ethers-react-native' +import { useAppKit } from '@reown/appkit-ethers-react-native' export default function ConnectView() { - const { open } = useWeb3Modal() + const { open } = useAppKit() return ( <> diff --git a/docs/appkit/react-native/ethers/about/installation-expo.mdx b/docs/appkit/react-native/ethers/about/installation-expo.mdx index 6d77a0c70..872d3b6af 100644 --- a/docs/appkit/react-native/ethers/about/installation-expo.mdx +++ b/docs/appkit/react-native/ethers/about/installation-expo.mdx @@ -1,7 +1,7 @@ import AdditionalExpo from '../../expo/additional-expo48.mdx' ``` -npx expo install @web3modal/ethers-react-native ethers +npx expo install @reown/appkit-ethers-react-native ethers ``` Additionally add these extra packages to help with async storage, polyfills, and SVG's. diff --git a/docs/appkit/react-native/ethers/about/installation.mdx b/docs/appkit/react-native/ethers/about/installation.mdx index 16b135aa7..544053420 100644 --- a/docs/appkit/react-native/ethers/about/installation.mdx +++ b/docs/appkit/react-native/ethers/about/installation.mdx @@ -1,5 +1,5 @@ ``` -yarn add @web3modal/ethers-react-native ethers +yarn add @reown/appkit-ethers-react-native ethers ``` Additionally add these extra packages to help with async storage, polyfills, and SVG's. diff --git a/docs/appkit/react-native/ethers/email.mdx b/docs/appkit/react-native/ethers/email.mdx index 30997b791..99d386915 100644 --- a/docs/appkit/react-native/ethers/email.mdx +++ b/docs/appkit/react-native/ethers/email.mdx @@ -4,7 +4,7 @@ import TabItem from '@theme/TabItem' ### Install packages ``` -yarn add react-native-webview @web3modal/email-ethers-react-native +yarn add react-native-webview @reown/appkit-auth-ethers-react-native ``` On iOS, use CocoaPods to add the native modules to your project: @@ -13,19 +13,19 @@ On iOS, use CocoaPods to add the native modules to your project: npx pod-install ``` -### Add the email connector in `defaultConfig` +### Add the auth connector in `defaultConfig` ```ts /* highlight-add-start */ -import { EmailProvider } from '@web3modal/email-ethers-react-native' +import { AuthProvider } from '@reown/appkit-auth-ethers-react-native' -const emailProvider = new EmailProvider({ projectId, metadata }) +const authProvider = new AuthProvider({ projectId, metadata }) /* highlight-add-end */ const config = defaultConfig({ metadata, /* highlight-add-start */ - extraConnectors: [emailProvider] + extraConnectors: [authProvider] /* highlight-add-end */ }) ``` diff --git a/docs/appkit/react-native/ethers/hooks.mdx b/docs/appkit/react-native/ethers/hooks.mdx index e25730f43..eb5ad73e9 100644 --- a/docs/appkit/react-native/ethers/hooks.mdx +++ b/docs/appkit/react-native/ethers/hooks.mdx @@ -1,29 +1,29 @@ import Button from '../../../components/button' -#### useWeb3ModalAccount +#### useAppKitAccount Hook that returns the client's information. ```tsx -import { useWeb3ModalAccount } from '@web3modal/ethers-react-native' +import { useAppKitAccount } from '@reown/appkit-ethers-react-native' function Components() { - const { address, chainId, isConnected } = useWeb3ModalAccount() + const { address, chainId, isConnected } = useAppKitAccount() //... } ``` -#### useWeb3ModalProvider +#### useAppKitProvider Hook that returns the `walletProvider` and the `WalletProviderType`. ```tsx import { BrowserProvider } from 'ethers' -import { useWeb3ModalProvider } from '@web3modal/ethers-react-native' +import { useAppKitProvider } from '@reown/appkit-ethers-react-native' function Components() { - const { walletProvider } = useWeb3ModalProvider() + const { walletProvider } = useAppKitProvider() async function onSignMessage() { const ethersProvider = new BrowserProvider(walletProvider) @@ -37,13 +37,13 @@ function Components() { } ``` -#### useWeb3ModalError +#### useAppKitError ```ts -import { useWeb3ModalError } from '@web3modal/ethers-react-native' +import { useAppKitError } from '@reown/appkit-ethers-react-native' function Components() { - const { error } = useWeb3ModalError() + const { error } = useAppKitError() //... } diff --git a/docs/appkit/react-native/ethers5/about/coinbase.mdx b/docs/appkit/react-native/ethers5/about/coinbase.mdx index 9216f4290..2d140e708 100644 --- a/docs/appkit/react-native/ethers5/about/coinbase.mdx +++ b/docs/appkit/react-native/ethers5/about/coinbase.mdx @@ -1,7 +1,7 @@ 8. Initialize `CoinbaseProvider` and add it in the default config ```tsx -import { CoinbaseProvider } from '@web3modal/coinbase-ethers-react-native' +import { CoinbaseProvider } from '@reown/appkit-coinbase-ethers-react-native' const coinbaseProvider = new CoinbaseProvider({ redirect: 'YOUR_APP_SCHEME://', diff --git a/docs/appkit/react-native/ethers5/about/implementation.mdx b/docs/appkit/react-native/ethers5/about/implementation.mdx index f21150a2a..7072ebcac 100644 --- a/docs/appkit/react-native/ethers5/about/implementation.mdx +++ b/docs/appkit/react-native/ethers5/about/implementation.mdx @@ -1,8 +1,8 @@ import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem' -Start by importing `createWeb3Modal`, and wagmi packages, then create your configs as shown below. -Finally, pass your configuration to `createWeb3Modal`. +Start by importing `createAppKit` and create your configs as shown below. +Finally, pass your configuration to `createAppKit`. :::info Note @@ -14,7 +14,7 @@ Make sure you import `@walletconnect/react-native-compat` and `@ethersproject/sh import '@walletconnect/react-native-compat' import '@ethersproject/shims' -import { createWeb3Modal, defaultConfig, Web3Modal } from '@web3modal/ethers5-react-native' +import { createAppKit, defaultConfig, AppKit } from '@reown/appkit-ethers5-react-native' // 1. Get projectId from https://cloud.walletconnect.com const projectId = 'YOUR_PROJECT_ID' @@ -52,7 +52,7 @@ const polygon = { const chains = [mainnet, polygon] // 4. Create modal -createWeb3Modal({ +createAppKit({ projectId, chains, config, @@ -63,7 +63,7 @@ export default function App() { return ( <> // Rest of your app... - + ) } @@ -75,16 +75,16 @@ To open AppKit modal you can use our **default** button component or build your -You can use default components to open the modal +You can use our components to open the modal ```tsx -import { W3mButton } from '@web3modal/ethers5-react-native' +import { AppKitButton } from '@reown/appkit-ethers5-react-native' export default function ConnectView() { return ( <> ...rest of your view - + ) } @@ -95,14 +95,14 @@ Learn more about the AppKit components [here](../../core/components.mdx) -You can trigger the modal by calling the `open` function from `useWeb3Modal` hook. +You can trigger the modal by calling the `open` function from `useAppKit` hook. ```tsx import { Pressable, Text } from 'react-native' -import { useWeb3Modal } from '@web3modal/ethers5-react-native' +import { useAppKit } from '@reown/appkit-ethers5-react-native' export default function ConnectView() { - const { open } = useWeb3Modal() + const { open } = useAppKit() return ( <> diff --git a/docs/appkit/react-native/ethers5/about/installation-expo.mdx b/docs/appkit/react-native/ethers5/about/installation-expo.mdx index c68c52a78..4b716bc14 100644 --- a/docs/appkit/react-native/ethers5/about/installation-expo.mdx +++ b/docs/appkit/react-native/ethers5/about/installation-expo.mdx @@ -1,7 +1,7 @@ import AdditionalExpo from '../../expo/additional-expo48.mdx' ``` -npx expo install @web3modal/ethers5-react-native ethers@5.7.2 +npx expo install @reown/appkit-ethers5-react-native ethers@5.7.2 ``` Additionally add these extra packages to help with async storage, polyfills, and SVG's. diff --git a/docs/appkit/react-native/ethers5/about/installation.mdx b/docs/appkit/react-native/ethers5/about/installation.mdx index 840bc835a..947f96b93 100644 --- a/docs/appkit/react-native/ethers5/about/installation.mdx +++ b/docs/appkit/react-native/ethers5/about/installation.mdx @@ -1,5 +1,5 @@ ``` -yarn add @web3modal/ethers5-react-native ethers@5.7.2 +yarn add @reown/appkit-ethers5-react-native ethers@5.7.2 ``` Additionally add these extra packages to help with async storage, polyfills, and SVG's. diff --git a/docs/appkit/react-native/ethers5/hooks.mdx b/docs/appkit/react-native/ethers5/hooks.mdx index 7370aefaf..eb12f6c82 100644 --- a/docs/appkit/react-native/ethers5/hooks.mdx +++ b/docs/appkit/react-native/ethers5/hooks.mdx @@ -1,29 +1,29 @@ import Button from '../../../components/button' -#### useWeb3ModalAccount +#### useAppKitAccount Hook that returns the client's information. ```tsx -import { useWeb3ModalAccount } from '@web3modal/ethers5-react-native' +import { useAppKitAccount } from '@reown/appkit-ethers5-react-native' function Components() { - const { address, chainId, isConnected } = useWeb3ModalAccount() + const { address, chainId, isConnected } = useAppKitAccount() //... } ``` -#### useWeb3ModalProvider +#### useAppKitProvider Hook that returns the `walletProvider` and the `WalletProviderType`. ```tsx import { ethers } from 'ethers' -import { useWeb3ModalProvider } from '@web3modal/ethers5-react-native' +import { useAppKitProvider } from '@reown/appkit-ethers5-react-native' function Components() { - const { walletProvider } = useWeb3ModalProvider() + const { walletProvider } = useAppKitProvider() async function onSignMessage() { const provider = new ethers.providers.Web3Provider(walletProvider) @@ -36,13 +36,13 @@ function Components() { } ``` -#### useWeb3ModalError +#### useAppKitError ```ts -import { useWeb3ModalError } from '@web3modal/ethers5-react-native' +import { useAppKitError } from '@reown/appkit-ethers5-react-native' function Components() { - const { error } = useWeb3ModalError() + const { error } = useAppKitError() //... } diff --git a/docs/appkit/react-native/expo/additional-expo48.mdx b/docs/appkit/react-native/expo/additional-expo48.mdx index 10b1fdc6f..6459f649c 100644 --- a/docs/appkit/react-native/expo/additional-expo48.mdx +++ b/docs/appkit/react-native/expo/additional-expo48.mdx @@ -44,7 +44,7 @@ const webCrypto = typeof crypto !== 'undefined' ? crypto : new Crypto() import './crypto-polyfill.js' import '@walletconnect/react-native-compat'; ... -import { createWeb3Modal } from '@web3modal/...' +import { createAppKit } from '@reown/appkit-...' ``` diff --git a/docs/appkit/react-native/wagmi/about/coinbase.mdx b/docs/appkit/react-native/wagmi/about/coinbase.mdx index 1a0d0d43c..a020150e4 100644 --- a/docs/appkit/react-native/wagmi/about/coinbase.mdx +++ b/docs/appkit/react-native/wagmi/about/coinbase.mdx @@ -1,7 +1,7 @@ 8. Initialize `coinbaseConnector` and add it in `extraConnectors` ```tsx -import { coinbaseConnector } from '@web3modal/coinbase-wagmi-react-native' +import { coinbaseConnector } from '@reown/appkit-coinbase-wagmi-react-native' const coinbase = coinbaseConnector({ redirect: 'YOUR_APP_SCHEME://' diff --git a/docs/appkit/react-native/wagmi/about/implementation.mdx b/docs/appkit/react-native/wagmi/about/implementation.mdx index 22da9c03d..a24692673 100644 --- a/docs/appkit/react-native/wagmi/about/implementation.mdx +++ b/docs/appkit/react-native/wagmi/about/implementation.mdx @@ -1,8 +1,8 @@ import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem' -Start by importing `createWeb3Modal`, and wagmi packages, then create your configs as shown below. -Finally, pass your configuration to `createWeb3Modal`. +Start by importing `createAppKit`, and wagmi packages, then create your configs as shown below. +Finally, pass your configuration to `createAppKit`. :::info Note @@ -15,7 +15,7 @@ import '@walletconnect/react-native-compat' import { WagmiProvider } from 'wagmi' import { mainnet, polygon, arbitrum } from '@wagmi/core/chains' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' -import { createWeb3Modal, defaultWagmiConfig, Web3Modal } from '@web3modal/wagmi-react-native' +import { createAppKit, defaultWagmiConfig, AppKit } from '@reown/appkit-wagmi-react-native' // 0. Setup queryClient const queryClient = new QueryClient() @@ -40,7 +40,7 @@ const chains = [mainnet, polygon, arbitrum] as const const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata }) // 3. Create modal -createWeb3Modal({ +createAppKit({ projectId, wagmiConfig, defaultChain: mainnet, // Optional @@ -52,7 +52,7 @@ export default function App() { // Rest of your app... - + ) @@ -65,16 +65,16 @@ To open AppKit modal you can use our **default** button component or build your -You can use default components to open the modal +You can use our components to open the modal ```tsx -import { W3mButton } from '@web3modal/wagmi-react-native' +import { AppKitButton } from '@reown/appkit-wagmi-react-native' export default function ConnectView() { return ( <> ...rest of your view - + ) } @@ -85,14 +85,14 @@ Learn more about the AppKit components [here](../../core/components.mdx) -You can trigger the modal by calling the `open` function from `useWeb3Modal` hook. +You can trigger the modal by calling the `open` function from `useAppKit` hook. ```tsx import { Pressable, Text } from 'react-native' -import { useWeb3Modal } from '@web3modal/wagmi-react-native' +import { useAppKit } from '@reown/appkit-wagmi-react-native' export default function ConnectView() { - const { open } = useWeb3Modal() + const { open } = useAppKit() return ( <> diff --git a/docs/appkit/react-native/wagmi/about/installation-expo.mdx b/docs/appkit/react-native/wagmi/about/installation-expo.mdx index c1ad1f469..ea572abc8 100644 --- a/docs/appkit/react-native/wagmi/about/installation-expo.mdx +++ b/docs/appkit/react-native/wagmi/about/installation-expo.mdx @@ -1,7 +1,7 @@ import AdditionalExpo from '../../expo/additional-expo48.mdx' ``` -npx expo install @web3modal/wagmi-react-native wagmi viem @tanstack/react-query +npx expo install @reown/appkit-wagmi-react-native wagmi viem @tanstack/react-query ``` Additionally add these extra packages to help with async storage, polyfills, and SVG's. diff --git a/docs/appkit/react-native/wagmi/about/installation.mdx b/docs/appkit/react-native/wagmi/about/installation.mdx index 3e75c31ba..7cc90c074 100644 --- a/docs/appkit/react-native/wagmi/about/installation.mdx +++ b/docs/appkit/react-native/wagmi/about/installation.mdx @@ -1,5 +1,5 @@ ``` -yarn add @web3modal/wagmi-react-native wagmi viem @tanstack/react-query +yarn add @reown/appkit-wagmi-react-native wagmi viem @tanstack/react-query ``` Additionally add these extra packages to help with async storage, polyfills, and SVG's. diff --git a/docs/appkit/react-native/wagmi/email.mdx b/docs/appkit/react-native/wagmi/email.mdx index 22d5df664..109ca89d5 100644 --- a/docs/appkit/react-native/wagmi/email.mdx +++ b/docs/appkit/react-native/wagmi/email.mdx @@ -4,7 +4,7 @@ import TabItem from '@theme/TabItem' ### Install packages ``` -yarn add @web3modal/email-wagmi-react-native react-native-webview +yarn add @reown/appkit-auth-wagmi-react-native react-native-webview ``` On iOS, use CocoaPods to add the native modules to your project: @@ -13,13 +13,13 @@ On iOS, use CocoaPods to add the native modules to your project: npx pod-install ``` -### Add the email connector in `defaultWagmiConfig` +### Add the auth connector in `defaultWagmiConfig` ```ts /* highlight-add-start */ -import { emailConnector } from '@web3modal/email-wagmi-react-native' +import { authConnector } from '@reown/appkit-auth-wagmi-react-native' -const email = emailConnector({ projectId, metadata }) +const auth = authConnector({ projectId, metadata }) /* highlight-add-end */ const wagmiConfig = defaultWagmiConfig({ @@ -27,7 +27,7 @@ const wagmiConfig = defaultWagmiConfig({ projectId, metadata, /* highlight-add-start */ - extraConnectors: [email] + extraConnectors: [auth] /* highlight-add-end */ }) ``` diff --git a/docs/appkit/react/core/custom-connectors.mdx b/docs/appkit/react/core/custom-connectors.mdx index e239a0e06..367796462 100644 --- a/docs/appkit/react/core/custom-connectors.mdx +++ b/docs/appkit/react/core/custom-connectors.mdx @@ -10,12 +10,16 @@ Custom connectors, such as social logins, WalletConnect QR, Coinbasewallet, etc. If you already have Wagmi integrated into your application or would like more control over Wagmi's configuration, you can integrate AppKit on top of it. +Adding custom connectors like WalletConnect and Coinbase is optional. + +By default, [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) and WC connectors are provided out of the box. ```tsx -import { createWeb3Modal } from '@web3modal/wagmi/react' +import { createAppKit } from '@reown/appkit/react' +import { EVMWagmiClient } from '@reown/appkit-adapter-wagmi' -import { http, createConfig, WagmiProvider } from 'wagmi' -import { sepolia } from 'wagmi/chains' -import { walletConnect } from 'wagmi/connectors' +import { http, WagmiProvider, CreateConnectorFn } from 'wagmi' +import { sepolia } from '@reown/appkit/chains' +import { walletConnect, coinbaseWallet, injected } from 'wagmi/connectors' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' @@ -38,27 +42,20 @@ connectors.push( }) ) -connectors.push( - authConnector({ - options: { projectId }, - socials: ['google', 'x', 'github', 'discord', 'apple', 'facebook', 'farcaster'], // add Social logins - showWallets: true, - email: true, - walletFeatures: false - }) -) - -const config = createConfig({ - chains: [sepolia], +export const wagmiAdapter = new EVMWagmiClient({ + storage: transports: { [sepolia.id]: http() }, connectors }) -createWeb3Modal({ - wagmiConfig: config, - projectId +export const config = wagmiAdapter.wagmiConfig + +createAppKit({ + adapters: [wagmiAdapter], + projectId, + caipNetworks: [sepolia] }) export function ContextProvider({ children }) { @@ -76,49 +73,30 @@ Check our React Wagmi demo in [Github](https://github.com/WalletConnect/web-exam ```tsx -import { createWeb3Modal, defaultConfig } from '@web3modal/ethers/react' +import { createAppKit } from '@reown/appkit/react' +import { EVMEthersClient} from '@reown/appkit-adapter-ethers' +import { sepolia } from '@reown/appkit/chains' -const projectId = 'YOUR_PROJECT_ID' -// Set chains -const mainnet = { - chainId: 1, - name: 'Ethereum', - currency: 'ETH', - explorerUrl: 'https://etherscan.io', - rpcUrl: 'https://cloudflare-eth.com' -} +const projectId = 'YOUR_PROJECT_ID' // Create a metadata object const metadata = { //... } -// Create Ethers config -const ethersConfig = defaultConfig({ - /*Required*/ - metadata, - - /*Optional*/ - enableEIP6963: true, // true by default - enableInjected: true, // true by default - enableCoinbase: true, // true by default - rpcUrl: '...', // used for the Coinbase SDK - defaultChainId: 1, // used for the Coinbase SDK - auth: { - email: true, - socials: ['google', 'x', 'github', 'discord', 'apple', 'facebook', 'farcaster'], // add social logins - showWallets: true, - walletFeatures: false - } -}) +// Create Ethers adapter +const ethersAdapter = new EVMEthersClient() // Create a AppKit instance -createWeb3Modal({ - ethersConfig, - chains: [mainnet], +createAppKit({ + adapters: [ethersAdapter], + caipNetworks: [sepolia], + metadata: metadata, projectId, - enableAnalytics: true // Optional - defaults to your Cloud configuration + features: { + analytics: true, // Optional - defaults to your Cloud configuration + } }) // Now, you can render connect button @@ -136,43 +114,38 @@ Check our React ethers demo in [Github](https://github.com/WalletConnect/web-exa Add custom wallet adapters for Solana wallets by first installing the wallet adapter package and then including the adapters in the wallets array. You can find a more Solana wallet adapters [here](https://github.com/anza-xyz/wallet-adapter/tree/master/packages/wallets). ```bash npm2yarn -npm install @solana/wallet-adapter-solflare +npm install @solana/wallet-adapter-wallets ``` ```ts -import { createWeb3Modal, defaultSolanaConfig } from '@web3modal/solana/react' -import { solana, solanaTestnet, solanaDevnet } from '@web3modal/solana/chains' -import { SolflareWalletAdapter } from '@solana/wallet-adapter-solflare' +import { createAppKit } from '@reown/appkit/react' +import { SolanaWeb3JsClient } from '@reown/appkit-adapter-solana/react' +import { solana, solanaTestnet, solanaDevnet } from '@reown/appkit/chains' -// 0. Setup chains -const chains = [solana, solanaTestnet, solanaDevnet] +import { SolflareWalletAdapter, PhantomWalletAdapter } from '@solana/wallet-adapter-wallets' + +// 0. Set up Solana adapter +const solanaWeb3JsAdapter = new SolanaWeb3JsClient({ + wallets: [new PhantomWalletAdapter(), new SolflareWalletAdapter()] +}) // 1. Get projectId from https://cloud.walletconnect.com const projectId = 'YOUR_PROJECT_ID' -// 2. Create solanaConfig +// 2. Set up the metadata const metadata = { //... } -const solanaConfig = defaultSolanaConfig({ - chains, - projectId, - metadata -}) - -// 3. Create modal -const modal = createWeb3Modal({ - solanaConfig, - projectId: projectId, +// 3. Create the modal +const modal = createAppKit({ + adapters: [solanaWeb3JsAdapter], + caipNetworks: [solana, solanaTestnet, solanaDevnet], metadata: metadata, - chains, - enableAnalytics: true, - termsConditionsUrl: 'https://walletconnect.com/terms', - privacyPolicyUrl: 'https://walletconnect.com/privacy', - wallets: [ - new SolflareWalletAdapter(), - ] + projectId, + features: { + analytics: true, + } }) ``` diff --git a/docs/appkit/react/core/hooks.mdx b/docs/appkit/react/core/hooks.mdx index 9e9b5e05d..f776e867a 100644 --- a/docs/appkit/react/core/hooks.mdx +++ b/docs/appkit/react/core/hooks.mdx @@ -10,18 +10,18 @@ import SolanaHooks from '../solana/hooks.mdx' Hooks are functions that will help you control the modal, subscribe to wallet events and interact with them and smart contracts. -## useWeb3Modal +## useAppKit -Control the modal with the `useWeb3Modal` hook +Control the modal with the `useAppKit` hook ```ts -import { useWeb3Modal } from '@web3modal/wagmi/react' +import { useAppKit } from '@reown/appkit/react' export default function Component() { - const { open, close } = useWeb3Modal() + const { open, close } = useAppKit() open() @@ -33,10 +33,10 @@ export default function Component() { ```ts -import { useWeb3Modal } from '@web3modal/ethers5/react' +import { useAppKit } from '@reown/appkit/react' export default function Component() { - const { open, close } = useWeb3Modal() + const { open, close } = useAppKit() open() @@ -48,10 +48,10 @@ export default function Component() { ```ts -import { useWeb3Modal } from '@web3modal/ethers/react' +import { useAppKit } from '@reown/appkit/react' export default function Component() { - const { open, close } = useWeb3Modal() + const { open, close } = useAppKit() open() @@ -63,10 +63,10 @@ export default function Component() { ```ts -import { useWeb3Modal } from '@web3modal/solana/react' +import { useAppKit } from '@reown/appkit/react' export default function Component() { - const { open, close } = useWeb3Modal() + const { open, close } = useAppKit() open() @@ -123,6 +123,9 @@ List of views you can select ## useDisconnect ```ts +// import useDisconnect from wagmi if on EVM +//import useDisconnect from @reown/appkit-solana/react if on Solana + const { disconnect } = useDisconnect() disconnect() @@ -133,7 +136,7 @@ disconnect() Metadata information from the connected wallet ```ts -import { useWalletInfo } from '@web3modal/wagmi/react' +import { useWalletInfo } from '@reown/appkit/react' export default Component(){ @@ -160,7 +163,7 @@ export default Component(){ -## useWeb3ModalState +## useAppKitState Get the current value of the modal's state @@ -168,45 +171,45 @@ Get the current value of the modal's state ```ts -import { useWeb3ModalState } from '@web3modal/wagmi/react' +import { useAppKitState } from '@reown/appkit/react' -const { open, selectedNetworkId } = useWeb3ModalState() +const { open, selectedNetworkId } = useAppKitState() ``` ```ts -import { useWeb3ModalState } from '@web3modal/wagmi/react' +import { useAppKitState } from '@reown/appkit/react' -const { open, selectedNetworkId } = useWeb3ModalState() +const { open, selectedNetworkId } = useAppKitState() ``` ```ts -import { useWeb3ModalState } from '@web3modal/ethers5/react' +import { useAppKitState } from '@reown/appkit/react' -const { open, selectedNetworkId } = useWeb3ModalState() +const { open, selectedNetworkId } = useAppKitState() ``` ```ts -import { useWeb3ModalState } from '@web3modal/ethers/react' +import { useAppKitState } from '@reown/appkit/react' -const { open, selectedNetworkId } = useWeb3ModalState() +const { open, selectedNetworkId } = useAppKitState() ``` ```ts -import { useWeb3ModalState } from '@web3modal/solana/react' +import { useAppKitState } from '@reown/appkit/react' -const { open, selectedNetworkId } = useWeb3ModalState() +const { open, selectedNetworkId } = useAppKitState() ``` @@ -230,10 +233,11 @@ The modal state consists of two reactive values: ]} /> -## useWeb3ModalTheme +## useAppKitTheme ```ts -const { themeMode, themeVariables, setThemeMode, setThemeVariables } = useWeb3ModalTheme() +import { useAppKitTheme } from '@reown/appkit/react' +const { themeMode, themeVariables, setThemeMode, setThemeVariables } = useAppKitTheme() setThemeMode('dark') @@ -246,7 +250,7 @@ setThemeVariables({ ## Track modal events ```ts -import { useWeb3ModalEvents } from '@web3modal/wagmi/react' +import { useAppKitEvents } from '@reown/appkit/react' -const events = useWeb3ModalEvents() +const events = useAppKitEvents() ``` diff --git a/docs/appkit/react/core/installation.mdx b/docs/appkit/react/core/installation.mdx index 1912ef1b7..76fd30c30 100644 --- a/docs/appkit/react/core/installation.mdx +++ b/docs/appkit/react/core/installation.mdx @@ -31,28 +31,28 @@ Choose one of these ethereum libraries or solana to get started. ```bash npm2yarn -npm install @web3modal/wagmi wagmi viem @tanstack/react-query +npm install @reown/appkit-adapter-wagmi wagmi viem @tanstack/react-query ``` ```bash npm2yarn -npm install @web3modal/ethers5 ethers@5.7.2 +npm install @reown/appkit-adapter-ethers5 ethers@5.7.2 ``` ```bash npm2yarn -npm install @web3modal/ethers ethers +npm install @reown/appkit-adapter-ethers ethers ``` ```bash npm2yarn -npm install @web3modal/solana +npm install @reown/appkit-adapter-solana ``` @@ -60,7 +60,7 @@ npm install @web3modal/solana ## Cloud Configuration -Create a new project on WalletConnect Cloud at https://cloud.walletconnect.com and obtain a new project ID. +Create a new project on reown Cloud at https://cloud.walletconnect.com and obtain a new project ID. @@ -144,7 +144,7 @@ Read more about Wagmi hooks for smart contract interaction [here](https://wagmi. [Ethers](https://docs.ethers.org/v6/) can help us interact with wallets and smart contracts: ```tsx -import { useWeb3ModalProvider, useWeb3ModalAccount } from '@web3modal/ethers/react' +import { useAppKitProvider, useAppKitAccount } from "@reown/appkit/react"; import { BrowserProvider, Contract, formatUnits } from 'ethers' const USDTAddress = '0x617f3112bf5397D0467D315cC709EF968D9ba546' @@ -160,8 +160,8 @@ const USDTAbi = [ ] function Components() { - const { address, chainId, isConnected } = useWeb3ModalAccount() - const { walletProvider } = useWeb3ModalProvider() + const { address, isConnected } = useAppKitAccount() + const { walletProvider } = useAppKitProvider() async function getBalance() { if (!isConnected) throw Error('User disconnected') diff --git a/docs/appkit/react/core/multichain.mdx b/docs/appkit/react/core/multichain.mdx new file mode 100644 index 000000000..f1465ccc5 --- /dev/null +++ b/docs/appkit/react/core/multichain.mdx @@ -0,0 +1,9 @@ +--- +title: Multichain +--- + +import Multichain from '../../shared/multichain.mdx' +import PlatformTabs from '../../../components/PlatformTabs' +import PlatformTabItem from '../../../components/PlatformTabItem' + + \ No newline at end of file diff --git a/docs/appkit/react/core/siwe.mdx b/docs/appkit/react/core/siwe.mdx index 23bf222e1..e1da9adb0 100644 --- a/docs/appkit/react/core/siwe.mdx +++ b/docs/appkit/react/core/siwe.mdx @@ -17,7 +17,7 @@ SIWE is a standard also known as [EIP-4361](https://docs.login.xyz/general-infor **One-Click Auth** represents a key advancement within WalletConnect v2, streamlining the user authentication process in AppKit by enabling them to seamlessly connect with a wallet and sign a SIWE message with just one click. Connecting a wallet, proving control of an address with an off-chain signature, authorizing specific actions. These are the kinds of authorizations that can be encoded as ["ReCaps"](https://eips.ethereum.org/EIPS/eip-5573). ReCaps are permissions for a specific website or dapp that can be compactly encoded as a long string in the message you sign and translated by any wallet into a straight-forward one-sentence summary. -WalletConnect uses permissions expressed as ReCaps to enable a One-Click Authentication. +reown uses permissions expressed as ReCaps to enable a One-Click Authentication. ## Installation @@ -25,7 +25,7 @@ WalletConnect uses permissions expressed as ReCaps to enable a One-Click Authent ```bash npm2yarn -npm i @web3modal/siwe +npm i @reown/appkit-siwe siwe ``` @@ -38,7 +38,7 @@ For a better UX we recommend using One-Click Auth. Install the AppKit SIWE package, additionally we also recommend installing [siwe](https://docs.login.xyz/) which will abstract a lot of the required logic. ```bash npm2yarn -npm i @web3modal/siwe siwe +npm i @reown/appkit-siwe siwe ``` @@ -49,13 +49,20 @@ npm i @web3modal/siwe siwe ## Initialize AppKit with your `siweConfig` -Add the `siweConfig` to your createWeb3Modal parameters +Add the `siweConfig` to your createAppKit parameters ```ts -createWeb3Modal({ - //.. - siweConfig -}) +// Pass your siweConfig inside the createAppKit() function + const modal = createAppKit({ + adapters: [wagmiAdapter], //or your Ethers adapter + projectId, + caipNetworks: [mainnet, arbitrum], + defaultCaipNetwork: mainnet, + features: { + analytics: true, // Optional - defaults to your Cloud configuration + }, + siweConfig: siweConfig // pass your siweConfig + }) ``` ## SIWE Config Parameters diff --git a/docs/appkit/react/ethers/about/implementation.mdx b/docs/appkit/react/ethers/about/implementation.mdx index 329e6a230..dcb79ce69 100644 --- a/docs/appkit/react/ethers/about/implementation.mdx +++ b/docs/appkit/react/ethers/about/implementation.mdx @@ -4,21 +4,38 @@ import TabItem from '@theme/TabItem' On top of your app set up the following configuration, making sure that all functions are called outside any React component to avoid unwanted rerenders. ```tsx -import { createWeb3Modal, defaultConfig } from '@web3modal/ethers/react' +import { createAppKit } from '@reown/appkit/react' +import { EVMEthers5Client } from '@reown/appkit-adapters-ethers' // 1. Get projectId const projectId = 'YOUR_PROJECT_ID' -// 2. Set chains -const mainnet = { - chainId: 1, - name: 'Ethereum', - currency: 'ETH', - explorerUrl: 'https://etherscan.io', - rpcUrl: 'https://cloudflare-eth.com' +// 2. Create a function to fetch the Blockchain API RPC URL +function getBlockchainApiRpcUrl(chainId: number) { + return `https://rpc.walletconnect.org/v1/?chainId=eip155:${chainId}&projectId=${projectId}` } -// 3. Create a metadata object +// 3. Set the chains +const chains = [ + { + chainId: 1, + name: 'Ethereum', + currency: 'ETH', + explorerUrl: 'https://etherscan.io', + rpcUrl: getBlockchainApiRpcUrl(1), + chainNamespace: 'eip155' + }, + { + chainId: 42161, + name: 'Arbitrum', + currency: 'ETH', + explorerUrl: 'https://arbiscan.io', + rpcUrl: getBlockchainApiRpcUrl(42161), + chainNamespace: 'eip155' + } +] + +// 3. Create a metadata object - optional const metadata = { name: 'My Website', description: 'My Website description', @@ -26,29 +43,21 @@ const metadata = { icons: ['https://avatars.mywebsite.com/'] } -// 4. Create Ethers config -const ethersConfig = defaultConfig({ - /*Required*/ - metadata, - - /*Optional*/ - enableEIP6963: true, // true by default - enableInjected: true, // true by default - enableCoinbase: true, // true by default - rpcUrl: '...', // used for the Coinbase SDK - defaultChainId: 1 // used for the Coinbase SDK -}) +// 4. Create Ethers Adapter +const ethersAdapter = new EVMEthersClient() // 5. Create a AppKit instance -createWeb3Modal({ - ethersConfig, - chains: [mainnet], +createAppKit({ + adapters: [ethersAdapter], + caipNetworks: chains, projectId, - enableAnalytics: true // Optional - defaults to your Cloud configuration + features: { + analytics: true // Optional - defaults to your Cloud configuration + } }) export default function App() { - return + return //make sure you have configured the inside } ``` diff --git a/docs/appkit/react/ethers/about/triggermodal.mdx b/docs/appkit/react/ethers/about/triggermodal.mdx index 1bf4ac4b3..4edf53111 100644 --- a/docs/appkit/react/ethers/about/triggermodal.mdx +++ b/docs/appkit/react/ethers/about/triggermodal.mdx @@ -1,7 +1,7 @@ import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem' -To open AppKit you can use our [**web component**](../../core/components.mdx) or build your own button with AppKit [**hooks**](../../core/hooks.mdx#useweb3modal). +To open AppKit you can use our [**web component**](../../core/components.mdx) or build your own button with AppKit [**hooks**](../../core/hooks.mdx#useAppKit). @@ -21,14 +21,14 @@ Web components are global html elements that don't require importing. -You can trigger the modal by calling the `open` function from `useWeb3Modal` hook. +You can trigger the modal by calling the `open` function from `useAppKit` hook. ```tsx -import { useWeb3Modal } from '@web3modal/ethers/react' +import { useAppKit } from '@reown/appkit/react' export default function ConnectButton() { // 4. Use modal hook - const { open } = useWeb3Modal() + const { open } = useAppKit() return ( <> diff --git a/docs/appkit/react/ethers/hooks.mdx b/docs/appkit/react/ethers/hooks.mdx index 05787ab35..7e011c18b 100644 --- a/docs/appkit/react/ethers/hooks.mdx +++ b/docs/appkit/react/ethers/hooks.mdx @@ -1,41 +1,48 @@ import Button from '../../../components/button' -### useWeb3ModalAccount +### useAppKitAccount Hook that returns the client's information. ```tsx -import { useWeb3ModalAccount } from '@web3modal/ethers/react' +import { useAppKitAccount } from '@reown/base/react' function Components() { - const { address, chainId, isConnected } = useWeb3ModalAccount() + const { address, status, isConnected } = useAppKitAccount() //... } ``` -### useSwitchNetwork +### switchNetwork ```tsx -import { useSwitchNetwork } from '@web3modal/ethers/react' - -const chainId = 137 - -const { switchNetwork } = useSwitchNetwork() +import { createAppKit } from '@reown/appkit/react' +import { mainnet, arbitrum, polygon } from '@reown/appkit/chains' + +const modal = createAppKit({ + adapters: [wagmiAdapter], + projectId, + caipNetworks: [mainnet, arbitrum], + metadata: metadata, + features: { + analytics: true, + } +}) -switchNetwork(chainId) +modal.switchNetwork(polygon) ``` -### useWeb3ModalProvider +### useAppKitProvider Hook that returns the `walletProvider` and the `WalletProviderType`. ```tsx import { BrowserProvider } from 'ethers' -import { useWeb3ModalProvider } from '@web3modal/ethers/react' +import { useAppKitProvider } from '@reown/appkit/react' function Components() { - const { walletProvider } = useWeb3ModalProvider() + const { walletProvider } = useAppKitProvider() async function onSignMessage() { const provider = new BrowserProvider(walletProvider) @@ -48,14 +55,11 @@ function Components() { } ``` -### useWeb3ModalError +### getError ```ts -import { useWeb3ModalError } from '@web3modal/ethers/react' - function Components() { - const { error } = useWeb3ModalError() - + const error = modal.getError(); //... } ``` diff --git a/docs/appkit/react/ethers5/implementation.mdx b/docs/appkit/react/ethers5/implementation.mdx index 6c3316ad3..df0cafd40 100644 --- a/docs/appkit/react/ethers5/implementation.mdx +++ b/docs/appkit/react/ethers5/implementation.mdx @@ -4,21 +4,17 @@ import TabItem from '@theme/TabItem' On top of your app set up the following configuration, making sure that all functions are called outside any React component to avoid unwanted rerenders. ```tsx -import { createWeb3Modal, defaultConfig } from '@web3modal/ethers5/react' +import { createAppKit } from '@reown/appkit/react' +import { EVMEthers5Client } from '@reown/appkit-adapter-ethers5' +import { mainnet, arbitrum } from '@reown/appkit/chains' // 1. Get projectId const projectId = 'YOUR_PROJECT_ID' -// 2. Set chains -const mainnet = { - chainId: 1, - name: 'Ethereum', - currency: 'ETH', - explorerUrl: 'https://etherscan.io', - rpcUrl: 'https://cloudflare-eth.com' -} +// 2. Set Ethers adapters +const ethers5Adapter = new EVMEthers5Client() -// 3. Create a metadata object +// 3. Create a metadata object - optional const metadata = { name: 'My Website', description: 'My Website description', @@ -26,29 +22,19 @@ const metadata = { icons: ['https://avatars.mywebsite.com/'] } -// 4. Create Ethers config -const ethersConfig = defaultConfig({ - /*Required*/ - metadata, - - /*Optional*/ - enableEIP6963: true, // true by default - enableInjected: true, // true by default - enableCoinbase: true, // true by default - rpcUrl: '...', // used for the Coinbase SDK - defaultChainId: 1 // used for the Coinbase SDK -}) - -// 5. Create a AppKit instance -createWeb3Modal({ - ethersConfig, - chains: [mainnet], +// 4. Create the AppKit instance +createAppKit({ + adapters: [ethers5Adapter], + metadata: metadata, + caipNetworks: [mainnet, arbitrum], projectId, - enableAnalytics: true // Optional - defaults to your Cloud configuration + features: { + analytics: true // Optional - defaults to your Cloud configuration + } }) export default function App() { - return + return //make sure you have configured the inside } ``` diff --git a/docs/appkit/react/ethers5/triggermodal.mdx b/docs/appkit/react/ethers5/triggermodal.mdx index 0cf3d6bd1..5f947e10a 100644 --- a/docs/appkit/react/ethers5/triggermodal.mdx +++ b/docs/appkit/react/ethers5/triggermodal.mdx @@ -1,7 +1,7 @@ import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem' -To open AppKit you can use our [**web component**](../core/components.mdx) or build your own button with AppKit [**hooks**](../core/hooks.mdx#useweb3modal). +To open AppKit you can use our [**web component**](../core/components.mdx) or build your own button with AppKit [**hooks**](../core/hooks.mdx#useAppKit). @@ -21,14 +21,14 @@ Web components are global html elements that don't require importing. -You can trigger the modal by calling the `open` function from `useWeb3Modal` hook. +You can trigger the modal by calling the `open` function from `useAppKit` hook. ```tsx -import { useWeb3Modal } from '@web3modal/ethers5/react' +import { useAppKit } from '@reown/appkit/react' export default function ConnectButton() { // 4. Use modal hook - const { open } = useWeb3Modal() + const { open } = useAppKit() return ( <> diff --git a/docs/appkit/react/solana/about/implementation.mdx b/docs/appkit/react/solana/about/implementation.mdx index 9fd7b7858..0275b1a4b 100644 --- a/docs/appkit/react/solana/about/implementation.mdx +++ b/docs/appkit/react/solana/about/implementation.mdx @@ -7,17 +7,20 @@ On top of your app set up the following configuration, making sure that all func ```tsx // App.tsx - -import { createWeb3Modal, defaultSolanaConfig } from '@web3modal/solana/react' -import { solana, solanaTestnet, solanaDevnet } from '@web3modal/solana/chains' - -// 0. Setup chains -const chains = [solana, solanaTestnet, solanaDevnet] +import { createAppKit, type CaipNetwork } from '@reown/appkit/react' +import { SolanaWeb3JsClient } from '@reown/appkit-adapter-solana/react' +import { solana, solanaTestnet, solanaDevnet } from '@reown/appkit/chains' +import { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets' + +// 0. Set up Solana Adapter +const solanaWeb3JsAdapter = new SolanaWeb3JsClient({ + wallets: [new PhantomWalletAdapter(), new SolflareWalletAdapter()] +}) // 1. Get projectId from https://cloud.walletconnect.com const projectId = 'YOUR_PROJECT_ID' -// 2. Create solanaConfig +// 2. Create a metadata object - optional const metadata = { name: 'AppKit', description: 'AppKit Solana Example', @@ -25,20 +28,15 @@ const metadata = { icons: ['https://avatars.githubusercontent.com/u/37784886'] } -const solanaConfig = defaultSolanaConfig({ - metadata, - chains, - projectId -}) - // 3. Create modal -createWeb3Modal({ - solanaConfig, - chains, +createAppKit({ + adapters: [solanaWeb3JsAdapter], + caipNetworks: [solana, solanaTestnet, solanaDevnet], + metadata: metadata, projectId, - wallets: [ - // Solana wallet adapters (check Custom connectors for more info) - ] + features: { + analytics: true, // Optional - defaults to your Cloud configuration + } }) export default function App() { diff --git a/docs/appkit/react/solana/about/programs.mdx b/docs/appkit/react/solana/about/programs.mdx index b17eb0129..13da8c731 100644 --- a/docs/appkit/react/solana/about/programs.mdx +++ b/docs/appkit/react/solana/about/programs.mdx @@ -11,7 +11,7 @@ import { TransactionInstruction, LAMPORTS_PER_SOL } from '@solana/web3.js' -import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/solana/react' +import { useAppKitAccount, useAppKitProvider } from '@reown/appkit/react' function deserializeCounterAccount(data?: Buffer): { count: number } { if (data?.byteLength !== 8) { @@ -23,8 +23,8 @@ function deserializeCounterAccount(data?: Buffer): { count: number } { } } -const { address, currentChain } = useWeb3ModalAccount() -const { walletProvider, connection } = useWeb3ModalProvider() +const { address, currentChain } = useAppKitAccount() +const { walletProvider, connection } = useAppKitProvider() async function onIncrementCounter() { const PROGRAM_ID = new PublicKey('Cb5aXEgXptKqHHWLifvXu5BeAuVLjojQ5ypq6CfQj1hy') diff --git a/docs/appkit/react/solana/hooks.mdx b/docs/appkit/react/solana/hooks.mdx index d244ad3a6..7493adacf 100644 --- a/docs/appkit/react/solana/hooks.mdx +++ b/docs/appkit/react/solana/hooks.mdx @@ -1,30 +1,30 @@ import Button from '../../../components/button' -### useWeb3ModalAccount +### useAppKitAccount Hook that returns the client's information. ```tsx -import { useWeb3ModalAccount } from '@web3modal/solana/react' +import { useAppKitAccount } from '@web3modal/solana/react' function Components() { - const { address, chainId, isConnected } = useWeb3ModalAccount() + const { address, chainId, isConnected } = useAppKitAccount() //... } ``` -### useWeb3ModalProvider +### useAppKitProvider Hook that returns the `walletProvider` and the `WalletProviderType`. ```tsx -import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/solana/react' +import { useAppKitAccount, useAppKitrovider } from '@web3modal/solana/react' function SignMessage() { // 0. Get account and provider - const { address } = useWeb3ModalAccount() - const { walletProvider } = useWeb3ModalProvider() + const { address } = useAppKitAccount() + const { walletProvider } = useAppKitProvider() // 1. Create a function to sign a message async function onSignMessage() { @@ -48,13 +48,13 @@ function SignMessage() { } ``` -### useWeb3ModalError +### useAppKitError ```ts -import { useWeb3ModalError } from '@web3modal/solana/react' +import { useAppKitError } from '@web3modal/solana/react' function Components() { - const { error } = useWeb3ModalError() + const { error } = useAppKitError() //... } diff --git a/docs/appkit/react/solana/implementation.mdx b/docs/appkit/react/solana/implementation.mdx index 07b4df7b1..b291b3ed9 100644 --- a/docs/appkit/react/solana/implementation.mdx +++ b/docs/appkit/react/solana/implementation.mdx @@ -4,7 +4,7 @@ import TabItem from '@theme/TabItem' On top of your app set up the following configuration, making sure that all functions are called outside any React component to avoid unwanted rerenders. ```tsx -import { createWeb3Modal, defaultConfig } from '@web3modal/solana/react' +import { createAppKit, defaultConfig } from '@web3modal/solana/react' // 1. Get projectId const projectId = 'YOUR_PROJECT_ID' @@ -37,7 +37,7 @@ const solanaConfig = defaultConfig({ }) // 5. Create a Web3Modal instance -createWeb3Modal({ +createAppKit({ solanaConfig, chains: [mainnet], projectId, diff --git a/docs/appkit/react/solana/triggermodal.mdx b/docs/appkit/react/solana/triggermodal.mdx index eb2d9c5ac..cd0dc9d7d 100644 --- a/docs/appkit/react/solana/triggermodal.mdx +++ b/docs/appkit/react/solana/triggermodal.mdx @@ -1,7 +1,7 @@ import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem' -To open Web3Modal you can use our [**web component**](../core/components.mdx) or build your own button with Web3Modal [**hooks**](../core/hooks.mdx#useweb3modal). +To open Web3Modal you can use our [**web component**](../core/components.mdx) or build your own button with Web3Modal [**hooks**](../core/hooks.mdx#useAppKit). @@ -21,14 +21,14 @@ Web components are global html elements that don't require importing. -You can trigger the modal by calling the `open` function from `useWeb3Modal` hook. +You can trigger the modal by calling the `open` function from `useAppKit` hook. ```tsx -import { useWeb3Modal } from '@web3modal/ethers5/react' +import { useAppKit } from '@web3modal/ethers5/react' export default function ConnectButton() { // 4. Use modal hook - const { open } = useWeb3Modal() + const { open } = useAppKit() return ( <> diff --git a/docs/appkit/react/wagmi/about/implementation.mdx b/docs/appkit/react/wagmi/about/implementation.mdx index 0943126c7..dc0cb7152 100644 --- a/docs/appkit/react/wagmi/about/implementation.mdx +++ b/docs/appkit/react/wagmi/about/implementation.mdx @@ -1,15 +1,16 @@ -For a quick integration you can use `defaultWagmiConfig` function which wraps Wagmi's [`createConfig`](https://wagmi.sh/core/api/createConfig) function with a predefined configuration. +For a quick integration, you can use the `createAppKit` function with a unified configuration. This automatically applies the predefined configurations for different adapters like Wagmi, Ethers, or Solana, so you no longer need to manually configure each one individually. Simply pass the common parameters such as `projectId`, `chains`, `metadata`, etc., and the function will handle the adapter-specific configurations under the hood. + This includes WalletConnect, Coinbase and Injected connectors, and the [Blockchain API](../../../../cloud/blockchain-api.mdx) as a [transport](https://wagmi.sh/core/api/createConfig#transports) On top of your app set up the following configuration, making sure that all functions are called **outside** any React component to avoid unwanted rerenders. ```tsx -import { createWeb3Modal } from '@web3modal/wagmi/react' -import { defaultWagmiConfig } from '@web3modal/wagmi/react/config' +import { createAppKit } from '@reown/appkit/react' import { WagmiProvider } from 'wagmi' -import { arbitrum, mainnet } from 'wagmi/chains' +import { arbitrum, mainnet } from '@reown/appkit/chains' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { EVMWagmiClient } from '@reown/appkit-adapter-wagmi' // 0. Setup queryClient const queryClient = new QueryClient() @@ -17,7 +18,7 @@ const queryClient = new QueryClient() // 1. Get projectId from https://cloud.walletconnect.com const projectId = 'YOUR_PROJECT_ID' -// 2. Create wagmiConfig +// 2. Create a metadata object - optional const metadata = { name: 'AppKit', description: 'AppKit Example', @@ -25,24 +26,25 @@ const metadata = { icons: ['https://avatars.githubusercontent.com/u/37784886'] } -const chains = [mainnet, arbitrum] as const -const config = defaultWagmiConfig({ - chains, - projectId, - metadata, +// 3. Create Wagmi Adapter +const wagmiConfig = new EVMWagmiClient({ + ssr: true }) -// 3. Create modal -createWeb3Modal({ +// 4. Create modal +createAppKit({ + adapters: [wagmiConfig], + caipNetworks: [mainnet, arbitrum], metadata, - wagmiConfig: config, projectId, - enableAnalytics: true // Optional - defaults to your Cloud configuration + features: { + analytics: true // Optional - defaults to your Cloud configuration + } }) export function AppKitProvider({ children }) { return ( - + {children} ) diff --git a/docs/appkit/react/wagmi/about/triggermodal.mdx b/docs/appkit/react/wagmi/about/triggermodal.mdx index f527e7a06..b63561111 100644 --- a/docs/appkit/react/wagmi/about/triggermodal.mdx +++ b/docs/appkit/react/wagmi/about/triggermodal.mdx @@ -1,4 +1,4 @@ -To open AppKit you can use our [**web component**](../../core/components.mdx) or build your own button with AppKit [**hooks**](../../core/hooks.mdx#useweb3modal). +To open AppKit you can use our [**web component**](../../core/components.mdx) or build your own button with AppKit [**hooks**](../../core/hooks.mdx#useAppKit). In this example we are going to use the `` component. Web components are global html elements that don't require importing. diff --git a/docs/appkit/shared/multichain.mdx b/docs/appkit/shared/multichain.mdx new file mode 100644 index 000000000..4e229c14d --- /dev/null +++ b/docs/appkit/shared/multichain.mdx @@ -0,0 +1,213 @@ +--- +title: Multichain +--- + +import PlatformTabs from '../../components/PlatformTabs' +import PlatformTabItem from '../../components/PlatformTabItem' + +AppKit is now multichain. The architecture is designed to support both EVM and non-EVM blockchains. This will allow developers and projects to choose and configure multiple blockchain networks within their instance of AppKit, extending beyond just Ethereum-based (EVM) networks. + +Currently, AppKit supports one non-EVM, **Solana**. Soon, AppKit will support Bitcoin, Polkadot, and Cosmos, allowing projects to tap into users from these different blockchain ecosystems. This will enable developers and projects to reach a broader audience and interact with multiple blockchain networks, all through a single wallet provider. + +## Installation + + + + +```bash npm2yarn +npm install @reown/appkit-adapter-wagmi @reown/appkit-adapter-solana @solana/wallet-adapter-wallets +``` + + + + +```bash npm2yarn +npm install @reown/appkit-adapter-ethers5 @reown/appkit-adapter-solana @solana/wallet-adapter-wallets +``` + + + + +```bash npm2yarn +npm install @reown/appkit-adapter-ethers @reown/appkit-adapter-solana @solana/wallet-adapter-wallets +``` + + + + +```bash npm2yarn +npm install @reown/appkit +``` + + + + + +## Integration + +The AppKit instance allows you to support multiple chains by importing the respective chains, creating the respective network adapters and passing these within the `createAppKit()` function. + +Depending on the network adapter of your preference (`Wagmi`, `Ethers`, `Ethers5`), the integration may vary. Let's look at what the integration will look like. + + + +```ts +import { createAppKit } from '@reown/appkit' +import { SolanaWeb3JsClient } from '@reown/appkit-adapter-solana' +import { EVMWagmiClient } from '@reown/appkit-adapter-wagmi' + +import { solana, solanaTestnet, solanaDevnet } from '@reown/appkit/chains' +import { mainnet, arbitrum, sepolia } from '@reown/appkit/chains' + +import { SolflareWalletAdapter, PhantomWalletAdapter } from '@solana/wallet-adapter-wallets' + +// 0. Create the Wagmi adapter +export const wagmiAdapter = new EVMWagmiClient({ + ssr: true, +}) + +// 1. Create Solana adapter +const solanaWeb3JsAdapter = new SolanaWeb3JsClient({ + wallets: [new PhantomWalletAdapter(), new SolflareWalletAdapter()] +}) + +// 2. Get projectId from https://cloud.walletconnect.com +const projectId = 'YOUR_PROJECT_ID' + +// 3. Set up the metadata - Optional +const metadata = { + name: 'AppKit', + description: 'AppKit Example', + url: 'https://web3modal.com', // origin must match your domain & subdomain + icons: ['https://avatars.githubusercontent.com/u/37784886'] +} + +// 4. Create the AppKit instance +const modal = createAppKit({ + adapters: [wagmiAdapter, solanaWeb3JsAdapter], + caipNetworks: [mainnet, arbitrum, sepolia, solana, solanaTestnet, solanaDevnet], + metadata: metadata, + projectId, + features: { + analytics: true, + } +}) +``` + + + +```ts +import { createAppKit } from '@reown/appkit' +import { SolanaWeb3JsClient } from '@reown/appkit-adapter-solana' +import { EVMEthersClient } from '@reown/appkit-adapter-ethers' + +import { solana, solanaTestnet, solanaDevnet } from '@reown/appkit/chains' +import { mainnet, arbitrum, sepolia } from '@reown/appkit/chains' + +import { SolflareWalletAdapter, PhantomWalletAdapter } from '@solana/wallet-adapter-wallets' + +// 0. Create the Ethers adapter +export const ethersAdapter = new EVMEthersClient() + +// 1. Create Solana adapter +const solanaWeb3JsAdapter = new SolanaWeb3JsClient({ + wallets: [new PhantomWalletAdapter(), new SolflareWalletAdapter()] +}) + +// 2. Get projectId from https://cloud.walletconnect.com +const projectId = 'YOUR_PROJECT_ID' + +// 3. Set up the metadata - Optional +const metadata = { + name: 'AppKit', + description: 'AppKit Example', + url: 'https://web3modal.com', // origin must match your domain & subdomain + icons: ['https://avatars.githubusercontent.com/u/37784886'] +} + +// 4. Create the AppKit instance +const modal = createAppKit({ + adapters: [ethersAdapter, solanaWeb3JsAdapter], + caipNetworks: [mainnet, arbitrum, sepolia, solana, solanaTestnet, solanaDevnet], + metadata: metadata, + projectId, + features: { + analytics: true, + } +}) +``` + + + +```ts +import { createAppKit } from '@reown/appkit' +import { SolanaWeb3JsClient } from '@reown/appkit-adapter-solana' +import { EVMEthersClient } from '@reown/appkit-adapter-ethers' + +import { solana, solanaTestnet, solanaDevnet } from '@reown/appkit/chains' +import { mainnet, arbitrum, sepolia } from '@reown/appkit/chains' + +import { SolflareWalletAdapter, PhantomWalletAdapter } from '@solana/wallet-adapter-wallets' + +// 0. Create the Ethers adapter +export const ethersAdapter = new EVMEthersClient() + +// 1. Create Solana adapter +const solanaWeb3JsAdapter = new SolanaWeb3JsClient({ + wallets: [new PhantomWalletAdapter(), new SolflareWalletAdapter()] +}) + +// 2. Get projectId from https://cloud.walletconnect.com +const projectId = 'YOUR_PROJECT_ID' + +// 3. Set up the metadata - Optional +const metadata = { + name: 'AppKit', + description: 'AppKit Example', + url: 'https://web3modal.com', // origin must match your domain & subdomain + icons: ['https://avatars.githubusercontent.com/u/37784886'] +} + +// 4. Create the AppKit instance +const modal = createAppKit({ + adapters: [ethersAdapter, solanaWeb3JsAdapter], + caipNetworks: [mainnet, arbitrum, sepolia, solana, solanaTestnet, solanaDevnet], + metadata: metadata, + projectId, + features: { + analytics: true, + } +}) +``` + + + +```ts +import { createAppKit } from '@reown/appkit' +import { solana, solanaTestnet, solanaDevnet } from '@reown/appkit/chains' +import { mainnet, arbitrum, sepolia } from '@reown/appkit/chains' + +// 1. Get projectId from https://cloud.walletconnect.com +const projectId = '299026629319f442a1a118d6d08dcd50' + +// 2. Set up the metadata - Optional +const metadata = { + name: 'AppKit', + description: 'AppKit Example', + url: 'https://web3modal.com', // origin must match your domain & subdomain + icons: ['https://avatars.githubusercontent.com/u/37784886'] +} + +// 3. Create the AppKit instance +const modal = createAppKit({ + caipNetworks: [mainnet, arbitrum, sepolia, solana, solanaTestnet, solanaDevnet], + metadata: metadata, + projectId, + features: { + analytics: true, + } +}) +``` + + + \ No newline at end of file diff --git a/docs/appkit/shared/onramp.mdx b/docs/appkit/shared/onramp.mdx index b885dcc1b..3d3ae1b2a 100644 --- a/docs/appkit/shared/onramp.mdx +++ b/docs/appkit/shared/onramp.mdx @@ -12,19 +12,22 @@ On-Ramp is supported in the latest version of AppKit. If you are using an older The On-Ramp feature is enabled by default, so no additional configuration is required. -If you prefer to disable it, set the `enableOnramp` flag to `false` in the configuration of the `createWeb3Modal` function. +If you prefer to disable it, set the `onramp` flag to `false` in the configuration of the `createAppKit` function. :::info Note On-Ramp is now available on **Solana**. The configuration for On-Ramp on both EVM and Solana is the same. Please refer to the code snippet below. ::: ```ts -const modal = createWeb3Modal({ - //... - chains: [mainnet], +const modal = createAppKit({ + adapters: [wagmiAdapter], projectId, - /* highlight-add-start */ - enableOnramp: false // Optional - true by default - /* highlight-add-end */ + caipNetworks: [mainnet, arbitrum], + metadata: metadata, + features{ + /* highlight-add-start */ + onramp: false // Optional - true by default + /* highlight-add-end */ + } }) ``` diff --git a/docs/appkit/shared/options.mdx b/docs/appkit/shared/options.mdx index 29a007d47..eb4e50f28 100644 --- a/docs/appkit/shared/options.mdx +++ b/docs/appkit/shared/options.mdx @@ -7,13 +7,13 @@ import TabItem from '@theme/TabItem' # Options -The following options can be passed to the `createWeb3Modal` function: +The following options can be passed to the `createAppKit` function: ```ts -createWeb3Modal({ wagmiConfig, projectId, chains, ...options }) +createAppKit({ adapters, projectId, caipNetworks, ...options }) ``` -## defaultChain +## defaultCaipNetwork You can set a desired chain for the initial connection: @@ -21,11 +21,11 @@ You can set a desired chain for the initial connection: ```ts -import { mainnet } from 'viem/chains' +import { mainnet } from '@reown/appkit/chains' -createWeb3Modal({ +createAppKit({ //... - defaultChain: mainnet + defaultCaipNetwork: mainnet }) ``` @@ -41,9 +41,9 @@ const mainnet = { rpcUrl: 'https://cloudflare-eth.com' } -createWeb3Modal({ +createAppKit({ //... - defaultChain: mainnet + defaultCaipNetwork: mainnet }) ``` @@ -51,11 +51,11 @@ createWeb3Modal({ ```ts -import { solana } from '@web3modal/solana/chains' +import { solana } from '@reown/appkit/chains' -createWeb3Modal({ +createAppKit({ //... - defaultChain: solana + defaultCaipNetwork: solana }) ``` @@ -70,7 +70,7 @@ These wallets will also show up first in `All Wallets` view. You can find the wallets ids in [WalletConnect Explorer](https://walletconnect.com/explorer?type=wallet) ```ts -createWeb3Modal({ +createAppKit({ //... featuredWalletIds: [ '1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369', @@ -84,7 +84,7 @@ createWeb3Modal({ Allow users to switch to an unsupported chain. ```ts -createWeb3Modal({ +createAppKit({ //... allowUnsupportedChain: true }) @@ -95,7 +95,7 @@ createWeb3Modal({ You can select tokens for AppKit to show the user's balance of. Each key represents the chain id of the token's blockchain. ```ts -createWeb3Modal({ +createAppKit({ //... tokens: { 1: { @@ -117,7 +117,7 @@ If you would like to remove default wallets completely, you can set the `feature Add or override the modal's network images. ```ts -createWeb3Modal({ +createAppKit({ // ... chainImages: { 1: 'https://my.images.com/eth.png' @@ -133,10 +133,10 @@ createWeb3Modal({ Set or override the images of any [connector](https://wagmi.sh/core/connectors/injected). The key of each property must match the id of the connector. ```ts -createWeb3Modal({ +createAppKit({ connectorImages: { coinbaseWallet: 'https://images.mydapp.com/coinbase.png', - metamask: 'https://images.mydapp.com/metamask.png' + metaMask: 'https://images.mydapp.com/metamask.png' } }) ``` @@ -147,7 +147,7 @@ createWeb3Modal({ Set or override the images of any connector. ```ts -createWeb3Modal({ +createAppKit({ connectorImages: { coinbaseWallet: 'https://images.mydapp.com/coinbase.png', walletConnect: 'https://images.mydapp.com/walletconnect.png' @@ -161,7 +161,7 @@ createWeb3Modal({ Set or override the images of any connector. ```ts -createWeb3Modal({ +createAppKit({ connectorImages: { coinbaseWallet: 'https://images.mydapp.com/coinbase.png', phantom: 'https://images.mydapp.com/phantom.png', @@ -178,7 +178,7 @@ createWeb3Modal({ You can add an url for the _terms and conditions_ link. ```ts -createWeb3Modal({ +createAppKit({ //... termsConditionsUrl: 'https://www.mytermsandconditions.com' }) @@ -189,53 +189,60 @@ createWeb3Modal({ You can add an url for the _privacy policy_ link. ```ts -createWeb3Modal({ +createAppKit({ //... privacyPolicyUrl: 'https://www.myprivacypolicy.com' }) ``` - -## enableAnalytics +## features +This allows you to toggle (enable or disable) additional features provided by AppKit. Features such as analytics, email and social logins, On-ramp, swaps, etc., can be enabled using this parameter. +### analytics Enable analytics to get more insights on your users activity within your [WalletConnect Cloud's dashboard](https://cloud.walletconnect.com) ```ts -createWeb3Modal({ +createAppKit({ //... - enableAnalytics: true + features: { + analytics: true, + } }) ``` +