Add DTK tutorial for creating an invite link

gator-sidebar.js

@@ -115,6 +115,11 @@ const sidebar = {
           label: "Create a custom caveat enforcer",
           href: "/tutorials/create-custom-caveat-enforcer"
         },
+        {
+          type: "link",
+          label: "Create a social invite link",
+          href: "/tutorials/create-invite-link"
+        },
       ],
     },
     {

sdk/connect/react-native.md

@@ -176,12 +176,12 @@ For example:
 import { useSDK } from "@metamask/sdk-react"
 
 function App() {
-  const { connect, terminate, account, chainId, ethereum } = useSDK()
+  const { account, chainId, ethereum, sdk } = useSDK()
 
   // Connect to MetaMask
   const connectWallet = async () => {
     try {
-      await connect()
+      await sdk?.connect()
     } catch (error) {
       console.error("Failed to connect wallet:", error)
     }
@@ -196,7 +196,7 @@ function App() {
 
   // Disconnect wallet
   const disconnectWallet = async () => {
-    await terminate()
+    await sdk?.terminate()
   }
 
   return (

sdk/guides/use-deeplinks.md

@@ -23,14 +23,14 @@ This page highlights deeplinks available for the MetaMask mobile app.
 <TabItem value="Deeplink">
 
 ```text
-https://metamask.app.link/dapp/{dappUrl}
+https://link.metamask.io/dapp/{dappUrl}
 ```
 
 </TabItem>
 <TabItem value="Example">
 
 ```text
-https://metamask.app.link/dapp/app.uniswap.org
+https://link.metamask.io/dapp/app.uniswap.org
 ```
 
 </TabItem>
@@ -51,14 +51,14 @@ The example navigates to `app.uniswap.org` in the in-app browser.
 <TabItem value="Deeplink">
 
 ```text
-https://metamask.app.link/send/{recipient}@{chainId}
+https://link.metamask.io/send/{recipient}@{chainId}
 ```
 
 </TabItem>
 <TabItem value="Example">
 
 ```text
-https://metamask.app.link/send/0x0000000@137?value=1e16
+https://link.metamask.io/send/0x0000000@137?value=1e16
 ```
 
 </TabItem>
@@ -84,14 +84,14 @@ The example displays the confirmation screen to send 0.01 POL (`1e16` wei) in Po
 <TabItem value="Deeplink">
 
 ```text
-https://metamask.app.link/send/{contractAddress}@{chainId}/transfer
+https://link.metamask.io/send/{contractAddress}@{chainId}/transfer
 ```
 
 </TabItem>
 <TabItem value="Example">
 
 ```text
-https://metamask.app.link/send/0x176211869cA2b568f2A7D4EE941E073a821EE1ff@59144/transfer?address=0x0000000&uint256=1e6
+https://link.metamask.io/send/0x176211869cA2b568f2A7D4EE941E073a821EE1ff@59144/transfer?address=0x0000000&uint256=1e6
 ```
 
 </TabItem>
@@ -118,14 +118,14 @@ The example displays the confirmation screen to send 1 USDC (`1e6` units, contra
 <TabItem value="Deeplink">
 
 ```text
-https://metamask.app.link/buy
+https://link.metamask.io/buy
 ```
 
 </TabItem>
 <TabItem value="Example">
 
 ```text
-https://metamask.app.link/buy?chainId=59144&address=0x176211869cA2b568f2A7D4EE941E073a821EE1ff&amount=100
+https://link.metamask.io/buy?chainId=59144&address=0x176211869cA2b568f2A7D4EE941E073a821EE1ff&amount=100
 ```
 
 </TabItem>
@@ -154,14 +154,14 @@ You can use the `/buy` or `/buy-crypto` path for this deeplink.
 <TabItem value="Deeplink">
 
 ```text
-https://metamask.app.link/sell
+https://link.metamask.io/sell
 ```
 
 </TabItem>
 <TabItem value="Example">
 
 ```text
-https://metamask.app.link/sell?chainId=59144&amount=125
+https://link.metamask.io/sell?chainId=59144&amount=125
 ```
 
 </TabItem>

src/pages/quickstart/builder/embedded-wallets/angular/stepContent/angularBundlerIssues.mdx

@@ -1,5 +1,7 @@
-### Fixing Bundler Issues
+### Fix bundler issues
 
-While using any web3 library in Angular, you may run into issues building. This issue occurs because some core packages like `eccrypto` have certain dependencies which are not present within the browser build environment.
+Some web3 packages (for example, `eccrypto`) rely on Node.js modules that aren't available in the
+browser.
 
-To solve this, please have a look at our troubleshooting pages about [Webpack 5 Issues](/troubleshooting/webpack-issues)
+To resolve this, see the
+[Webpack 5 troubleshooting issues](/embedded-wallets/troubleshooting/webpack-issues#angular) page.

src/pages/quickstart/builder/embedded-wallets/angular/stepContent/angularQuickStart.mdx

@@ -1,15 +1,18 @@
-### MetaMask Embedded Wallets Angular Quick Start
+### MetaMask Embedded Wallets Angular quickstart
 
-Integrate secure and seamless Web3 authentication into your Angular app using MetaMask Embedded Wallet SDKs.
+Add Web3 authentication to your Angular app with the MetaMask Embedded Wallets SDK.
 
-Clone the Angular Quick Start Application
+To view a quickstart for a different platform, select the dropdown in the menu bar and choose your
+target (for example, Android, React, Flutter, iOS, or others).
+
+Clone the Angular quickstart application:
 
 ```shell
 npx degit Web3Auth/web3auth-examples/quick-starts/angular-quick-start w3a-quick-start
 ```
 
-:::info
+:::info Get help
 
-If you face any problem anytime, you can always find help in the [**Web3Auth Community**](https://web3auth.io/community/c/help-pnp/pnp-web/7).
+Visit the [**Web3Auth community**](https://web3auth.io/community/).
 
 :::

src/pages/quickstart/builder/embedded-wallets/angular/stepContent/blockchainCalls.mdx

@@ -1,9 +1,11 @@
-### Making Blockchain Calls
+### Make blockchain calls
 
-This example demonstrates the connection for an EVM Chain with Web3Auth. You can choose the library of your choice and configure it according the steps given in the respective RPC Files.
+This example shows how to connect to an EVM chain with Web3Auth. Choose your preferred library and
+configure it by following the steps in the relevant RPC files.
 
-:::tip Other Blockchains
+:::tip Connect any blockchain
 
-Web3Auth supports all blockchains. Have a look at our [Connect Blockchain](/connect-blockchain/) section of the documentation and choose your blockchain to get started.
+Refer to the [blockchain documentation](/embedded-wallets/connect-blockchain/) to learn more about making calls on
+any supported blockchain.
 
 :::

src/pages/quickstart/builder/embedded-wallets/angular/stepContent/config.mdx

@@ -1,9 +1,11 @@
 ### Configure Web3Auth
 
-Create a basic config for Web3Auth and pass the `clientId` & `web3AuthNetwork` from your Web3Auth Dashboard Project Settings.
+Create a basic Web3Auth configuration and pass the client ID and network details from your
+project settings in the Web3Auth dashboard.
 
 :::info
 
-This is where you can also configure any major settings of your integration as well. Visit our [**configuration section**](/embedded-wallets/sdk/js/config) of the sdk reference to learn more about the different options available.
+Configure other major settings here as needed. See the [**configuration section**](/embedded-wallets/sdk/js/advanced/)
+for available options.
 
 :::

src/pages/quickstart/builder/embedded-wallets/angular/stepContent/initialize.mdx

@@ -1,3 +1,4 @@
 ### Initialize Web3Auth
 
-Web3Auth's Instance needs to be initialized as soon as your app loads up to enable the user to log in. Preferably done within a constructor.
+Initialize the `Web3Auth` instance when your app loads to enable sign-in. We recommend
+doing this within a constructor.

src/pages/quickstart/builder/embedded-wallets/angular/stepContent/installation.mdx

@@ -1,8 +1,7 @@
-### Install MetaMask Embedded Wallet SDK
+### Install MetaMask Embedded Wallets Angular SDK
 
-Install the Web3Auth Angular SDK package in your project.
-
-> Additionally, for blockchain calls, this example can run with `viem` or `ethers`, you can choose your preferred library.
+Install the SDK package in your project. For blockchain calls, this example can run with `viem` or
+`ethers`, you can choose your preferred library.
 
 ```bash npm2yarn
 npm install --save @web3auth/modal viem

src/pages/quickstart/builder/embedded-wallets/angular/stepContent/login.mdx

@@ -1,3 +1,4 @@
-### Logging in your User
+### Sign in the user
 
-Use the `connect` function in the Web3Auth Instance to display the modal. The modal will prompt the user to login with their wallet and handle the authentication for you.
+Use the [`connect`](/embedded-wallets/sdk/js/usage/connect) function to display the sign-in modal.
+The modal prompts the user to sign in with their wallet and handles the authentication.

src/pages/quickstart/builder/embedded-wallets/angular/stepContent/logout.mdx

@@ -1,9 +1,11 @@
-### Log the user out
+### Sign out the user
 
-Use the `useWeb3AuthDisconnect` composable to log the user out. This will also delete the session information from the local storage of the browser.
+Use the `useWeb3AuthDisconnect` composable to sign out the user. This also clears session information
+from the browser's local storage.
 
 :::info
 
-There are multiple other functions available in the Web3Auth SDK. Visit our [**functions section**](/embedded-wallets/sdk/js/functions) of the sdk reference to learn more about the different functions available.
+The SDK provides additional functions.
+See the [**functions reference**](/embedded-wallets/sdk/js/usage) for details.
 
 :::

src/pages/quickstart/builder/embedded-wallets/react/stepContent/config.mdx

@@ -1,9 +1,11 @@
 ### Configure Web3Auth
 
-Create a basic config for Web3Auth and pass the `clientId` & `web3AuthNetwork` from your Web3Auth Dashboard Project Settings.
+Create a basic Web3Auth configuration and pass the client ID and network details from your project
+settings in the Web3Auth dashboard.
 
 :::info
 
-This is where you can also configure any major settings of your integration as well. Visit our [**configuration section**](/embedded-wallets/sdk/react) of the sdk reference to learn more about the different options available.
+Configure other major settings here as needed.
+See the [configuration section](/embedded-wallets/sdk/react/advanced/) for available options.
 
 :::

src/pages/quickstart/builder/embedded-wallets/react/stepContent/installation.mdx

@@ -1,6 +1,6 @@
-### Install MetaMask Embedded Wallet SDK
+### Install MetaMask Embedded Wallets SDK
 
-Install the Web3Auth React SDK package in your project.
+Install the MetaMask Embedded Wallets SDK (Web3Auth) package in your project.
 
 Additionally, for blockchain calls, we're using `wagmi` for this example.
 

src/pages/quickstart/builder/embedded-wallets/react/stepContent/login.mdx

@@ -1,3 +1,5 @@
-### Logging in your User
+### Sign in the user
 
-Use the `useWeb3AuthConnect` hook to get access to the login functionality. The modal will prompt the user to login with their wallet and handle the authentication for you.
+Use the [`useWeb3AuthConnect` hook](/embedded-wallets/sdk/react/hooks/useWeb3AuthConnect) to access
+the login functionality. The modal prompts the user to sign in with their wallet and
+handles the authentication.

src/pages/quickstart/builder/embedded-wallets/react/stepContent/logout.mdx

@@ -1,9 +1,11 @@
-### Log the user out
+### Sign out the user
 
-Use the `useWeb3AuthDisconnect` hook to log the user out. This will also delete the session information from the local storage of the browser.
+Use the [`useWeb3AuthDisconnect` hook](/embedded-wallets/sdk/react/hooks/useWeb3AuthDisconnect) to
+sign out the user. This also clears the session information from the browser's local storage.
 
 :::info
 
-There are multiple other hooks available in the Web3Auth React SDK. Visit our [**hooks section**](/embedded-wallets/sdk/react/hooks) of the sdk reference to learn more about the different hooks available.
+The React SDK provides additional hooks.
+See the [hooks reference](/embedded-wallets/sdk/react/hooks) for more information.
 
 :::

src/pages/quickstart/builder/embedded-wallets/react/stepContent/reactBundlerIssues.mdx

@@ -1,11 +1,13 @@
 ### Troubleshooting
 
-While using any web3 library in React, you may run into issues building. This issue occurs because some core packages like `eccrypto` have certain dependencies which are not present within the browser build environment.
+When using web3 libraries in React, you may encounter build errors. This happens because some packages
+(for example, `eccrypto`) depend on Node.js modules that aren't available in the browser build
+environment.
 
-To solve this, please have a look at our troubleshooting pages about [Vite Issues](/troubleshooting/vite-issues)
+To resolve these errors, see the [Vite issues](/embedded-wallets/troubleshooting/vite-issues/) page.
 
 :::info
 
-If you face any problem anytime, you can always find help in the [**Web3Auth Community**](https://web3auth.io/community/c/help-pnp/pnp-web/7).
+If you need help, visit the [**Web3Auth community**](https://web3auth.io/community/c/help-pnp/pnp-web/7).
 
 :::

src/pages/quickstart/builder/embedded-wallets/react/stepContent/reactQuickStart.mdx

@@ -1,9 +1,15 @@
-### MetaMask Embedded Wallets Quick Start
+### MetaMask Embedded Wallets React quickstart
 
-Add social login and wallet connection functionality to your React app using the MetaMask Embedded Wallet SDKs.
+Add social login and wallet connection functionality to your React app with the MetaMask
+Embedded Wallets SDK (Web3Auth).
 
-Clone the Quick Start in your terminal.
+To view the quickstart for a different platform, select the dropdown in the menu bar and choose
+your target platform. For example, Android, Flutter, Angular, iOS,and others.
+
+Clone the quickstart:
 
 ```bash
 npx degit Web3Auth/web3auth-examples/quick-starts/react-quick-start w3a-quick-start
 ```
+
+If you need help, visit the [Web3Auth community](https://web3auth.io/community/).

src/pages/quickstart/builder/embedded-wallets/react/stepContent/setupWagmiProvider.mdx

@@ -1,9 +1,12 @@
-### Setup Wagmi Provider
+### Set up the Wagmi provider
 
-Since we're using `wagmi` for this example, we need to setup the `WagmiProvider` component. Please use the `WagmiProvider` component from `@web3auth/modal/react/wagmi` to wrap your application.
+Since this example uses `wagmi`, wrap your app with the `WagmiProvider` from
+`@web3auth/modal/react/wagmi`.
 
 ```tsx
 import { WagmiProvider } from '@web3auth/modal/react/wagmi'
 ```
 
-> Apart from that, the standard wagmi setup is being used. You do not need to create any wagmi config, since the Web3Auth config is being used directly. Refer to the [wagmi docs](https://wagmi.sh/react/getting-started) for more information.
+This example uses the standard Wagmi setup. You don't need to create a Wagmi config; the Web3Auth
+config is used directly. See the [Wagmi docs](https://wagmi.sh/react/getting-started) for more
+information.

src/pages/quickstart/builder/embedded-wallets/react/stepContent/setupWeb3AuthProvider.mdx

@@ -1,3 +1,4 @@
-### Setup Web3Auth Provider
+### Set up the Web3Auth provider
 
-To enable the hooks across your application, you need to wrap your application with the `Web3AuthProvider` component. This involves using the configuration created in the previous step.
+Wrap your app with the `Web3AuthProvider` to enable hooks across your application. Use the configuration
+from the previous step.

src/pages/quickstart/builder/embedded-wallets/react/stepContent/wagmiCalls.mdx

@@ -1,15 +1,15 @@
-### Making Blockchain Calls
+### Make blockchain calls
 
-Since Wagmi is configured in this application, you can directly use the wagmi hooks to make blockchain calls. We have demonstrated some commonly used hooks like `useBalance`, `useAccount`, `useSignMessage`, `useSendTransaction` and `useSwitchChain`.
+Because Wagmi is configured in this application, you can use Wagmi hooks to make
+blockchain calls. This example demonstrates common hooks:
+`useBalance`, `useAccount`, `useSignMessage`, `useSendTransaction`, and `useSwitchChain`.
 
-:::info
+See the [Wagmi documentation](https://wagmi.sh/react/api/hooks) for more information on the
+hooks.
 
-You can refer to the [**wagmi docs**](https://wagmi.sh/react/api/hooks) for more information on the hooks.
+:::tip Connect any blockchain
 
-:::
-
-:::tip Other Blockchains
-
-Web3Auth supports all blockchains. Have a look at our [Connect Blockchain](/connect-blockchain/) section of the documentation and choose your blockchain to get started.
+Refer to the [blockchain documentation](/embedded-wallets/connect-blockchain)
+to learn more about making calls on any supported blockchain.
 
 :::

src/pages/quickstart/commonSteps/registerApp.mdx

@@ -11,9 +11,9 @@ Visit the Web3Auth dashboard and create a new project. Use the client ID of the
 integration.
 
 <a
-  className="button"
+  className="button button--primary button--sm"
   href="https://dashboard.web3auth.io"
   target="_blank"
   rel="noreferrer noopener">
-  <span>Go to the Developer dashboard</span>
+  Go to the Developer dashboard
 </a>

src/pages/quickstart/commonSteps/walletAggregatorOnly.mdx

@@ -12,9 +12,9 @@ To use Web3Auth as a wallet aggregator only (without social logins), disable soc
 Navigate to **Authentication > Social Connections** and turn off all social login providers to use Web3Auth purely as a wallet aggregator.
 
 <a
-  className="button"
+  className="button button--primary button--sm"
   href="https://dashboard.web3auth.io"
   target="_blank"
   rel="noreferrer noopener">
-  <span>Configure in Dashboard</span>
+  Configure in Dashboard
 </a>