2487 quickstarts

src/pages/quickstart/builder/embedded-wallets/android/stepContent/index.ts

@@ -6,16 +6,12 @@ import * as jitpack from './jitpack.mdx'
 import * as installation from './installation.mdx'
 import * as login from './login.mdx'
 import * as logout from './logout.mdx'
-import * as androidQuickStart from './androidQuickStart.mdx'
-import * as requirements from './requirements.mdx'
 import * as enableInternetUsage from './enableInternetUsage.mdx'
 import * as singleTop from './singleTop.mdx'
 import * as configureDeepLink from './configureDeepLink.mdx'
 import * as initialize from './initialize.mdx'
 
 const STEPS = toSteps({
-  androidQuickStart,
-  requirements,
   installation,
   jitpack,
   enableInternetUsage,

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

@@ -1,11 +1,43 @@
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
 ### Install the MetaMask Embedded Wallets Android SDK
 
-Add the Android SDK to the dependency list of your app-level `build.gradle`
-file. Add the latest `com.github.Web3Auth:web3auth-android-sdk` package.
+**Prerequisites**
+
+- Android API version 24+
+- `targetSdk` & `compileSdk` version 34+
+
+Refer to the `android/app/build.gradle` file in your project to update the versions.
+
+You may follow along with our demo app or configure your own.
+
+<Tabs
+  defaultValue="demo"
+  values={[
+    { label: 'Demo app', value: 'demo' },
+    { label: 'Set up your app', value: 'diy' },
+  ]}>
+  <TabItem value="demo">
+
+**2.1** Clone the quickstart:
+
+```shell npm2yarn
+npx degit Web3Auth/web3auth-android-examples/android-quick-start w3a-android-quick-start
+```
+
+**2.2** Open the project in Android Studio from the `w3a-android-quick-start` directory and sync the Gradle project (or build and run).
+
+  </TabItem>
+  <TabItem value="diy">
+
+Add the Android SDK to the dependency list of your app-level `build.gradle` file. Add the latest `com.github.Web3Auth:web3auth-android-sdk` package.
+
+  </TabItem>
+</Tabs>
 
 :::warning Update to the latest SDK
 
-View the release notes to ensure you're using the [latest version](https://github.com/Web3Auth/web3auth-android-sdk/releases) of
-the Android SDK.
+View the release notes to ensure you're using the [latest version](https://github.com/Web3Auth/web3auth-android-sdk/releases) of the Android SDK.
 
 :::

src/pages/quickstart/builder/embedded-wallets/android/steps.ts

@@ -4,19 +4,11 @@ import STEPS from './stepContent'
 export default function getSteps(steps, files, replacementAggregator) {
   steps.push(
     {
-      ...STEPS.androidQuickStart,
-      pointer: replacementAggregator.highlightRange(
-        qsFileLinks.EW_PNP_ANDROID_MAINACTIVITY_KT,
-        files[qsFileLinks.EW_PNP_ANDROID_MAINACTIVITY_KT],
-        'Quick Start'
-      ),
-    },
-    {
-      ...STEPS.requirements,
+      ...STEPS.registerApp,
       pointer: replacementAggregator.highlightRange(
-        qsFileLinks.EW_PNP_ANDROID_BUILD_GRADLE,
-        files[qsFileLinks.EW_PNP_ANDROID_BUILD_GRADLE],
-        'Requirements'
+        qsFileLinks.EW_PNP_ANDROID_STRINGS_XML,
+        files[qsFileLinks.EW_PNP_ANDROID_STRINGS_XML],
+        'Get your Web3Auth Client ID from Dashboard'
       ),
     },
     {
@@ -51,14 +43,6 @@ export default function getSteps(steps, files, replacementAggregator) {
         'Enable Single Top'
       ),
     },
-    {
-      ...STEPS.registerApp,
-      pointer: replacementAggregator.highlightRange(
-        qsFileLinks.EW_PNP_ANDROID_STRINGS_XML,
-        files[qsFileLinks.EW_PNP_ANDROID_STRINGS_XML],
-        'Get your Web3Auth Client ID from Dashboard'
-      ),
-    },
     {
       ...STEPS.configureDeepLink,
       pointer: replacementAggregator.highlightRange(

src/pages/quickstart/builder/embedded-wallets/angular/stepContent/index.ts

@@ -1,6 +1,6 @@
-import * as angularQuickStart from './angularQuickStart.mdx'
 import * as angularBundlerIssues from './angularBundlerIssues.mdx'
 import * as initialization from './initialize.mdx'
+import * as runTheApp from './runTheApp.mdx'
 import * as login from './login.mdx'
 import * as logout from './logout.mdx'
 import * as blockchainCalls from './blockchainCalls.mdx'
@@ -11,10 +11,10 @@ import * as config from './config.mdx'
 import { toSteps } from '../../../../utils'
 
 const STEPS = toSteps({
-  angularQuickStart,
   angularBundlerIssues,
   installation,
   initialization,
+  runTheApp,
   config,
   registerApp,
   walletAggregatorOnly,

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

@@ -1,10 +1,40 @@
-### Install MetaMask Embedded Wallets Angular SDK
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
 
-Install the SDK package in your project. For blockchain calls, this example can run with `viem` or
-`ethers`, you can choose your preferred library.
+### Install the MetaMask Embedded Wallets Angular SDK
+
+You may follow along with our demo app or configure your own.
+
+<Tabs
+  defaultValue="demo"
+  values={[
+    { label: 'Demo app', value: 'demo' },
+    { label: 'Set up your app', value: 'diy' },
+  ]}>
+  <TabItem value="demo">
+
+**2.1** Clone the quickstart:
+
+```shell
+npx degit Web3Auth/web3auth-examples/quick-starts/angular-quick-start w3a-quick-start
+```
+
+**2.2** Install dependencies from the project root with:
+
+```bash
+npm install
+```
+
+  </TabItem>
+  <TabItem value="diy">
+
+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
 ```
 
 [![Npm package monthly downloads](https://badgen.net/npm/dm/@web3auth/modal)](https://www.npmjs.com/package/@web3auth/modal) [![](https://data.jsdelivr.com/v1/package/npm/@web3auth/modal/badge)](https://www.jsdelivr.com/package/npm/@web3auth/modal)
+
+  </TabItem>
+</Tabs>

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

@@ -0,0 +1,15 @@
+### Run the app
+
+From the project root (the cloned quickstart or your own app), run:
+
+```bash
+npm start
+```
+
+Your demo app will be available at `http://localhost:4200`.
+
+:::tip
+
+We recommend using the rest of this wizard to walk through how the demo app has been set up.
+
+:::

src/pages/quickstart/builder/embedded-wallets/angular/steps.ts

@@ -10,11 +10,11 @@ export default function getSteps(
 ) {
   steps.push(
     {
-      ...STEPS.angularQuickStart,
+      ...STEPS.registerApp,
       pointer: replacementAggregator.highlightRange(
         qsFileLinks.EW_ANGULAR_APP_COMPONENT_TS,
         files[qsFileLinks.EW_ANGULAR_APP_COMPONENT_TS],
-        'Quick Start'
+        'Dashboard Registration'
       ),
     },
     {
@@ -32,14 +32,6 @@ export default function getSteps(
         files[qsFileLinks.EW_ANGULAR_POLYFILL_TS],
         'Bundler Issues'
       ),
-    },
-    {
-      ...STEPS.registerApp,
-      pointer: replacementAggregator.highlightRange(
-        qsFileLinks.EW_ANGULAR_APP_COMPONENT_TS,
-        files[qsFileLinks.EW_ANGULAR_APP_COMPONENT_TS],
-        'Dashboard Registration'
-      ),
     }
   )
 
@@ -72,6 +64,14 @@ export default function getSteps(
         'SDK Initialization'
       ),
     },
+    {
+      ...STEPS.runTheApp,
+      pointer: replacementAggregator.highlightRange(
+        qsFileLinks.EW_ANGULAR_APP_COMPONENT_TS,
+        files[qsFileLinks.EW_ANGULAR_APP_COMPONENT_TS],
+        'Config'
+      ),
+    },
     {
       ...STEPS.login,
       pointer: replacementAggregator.highlightRange(

src/pages/quickstart/builder/embedded-wallets/flutter/stepContent/flutterQuickStart.mdx

@@ -1,22 +1,41 @@
-### MetaMask Embedded Wallets Flutter quickstart
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
 
-This guide is designed to help you quickly integrate a basic instance of MetaMask Embedded wallets
-(Web3Auth) SDKs in your Flutter app.
+### Set up your app
 
-Build the project locally:
+This guide is designed to help you quickly integrate a basic instance of MetaMask Embedded wallets
+(Web3Auth) SDKs in your Flutter app. You may follow along with our demo app or configure your own. 
 
-1. Clone the MetaMask Embedded Wallets Flutter quickstart application:
+2.1 (Optional) Clone the MetaMask Embedded Wallets Flutter quickstart application:
 
     ```shell npm2yarn
     npx degit Web3Auth/web3auth-flutter-examples/flutter-quick-start flutter-quick-start
     ```
 
-1. Change to the quickstart directory:
+2.2 Depending on the platform you wish to develop in, you will need to meet the following prerequisites:
 
-    ```shell npm2yarn
-    cd flutter-quick-start
-    ```
+<Tabs
+  defaultValue="android"
+  values={[
+    { label: 'Android', value: 'android' },
+    { label: 'iOS', value: 'ios' },
+  ]}>
+  <TabItem value="android">
+
+- Android API version 24 or later
+- `compileSdk` version 34 or later
+
+Refer to the `android/app/build.gradle` file in your Flutter project to update the versions.
+
+  </TabItem>
+  <TabItem value="ios">
+
+- iOS 14 or later
+- Xcode 12 or later
+- Swift 5 or later
+- `platform :ios` version 14.0
 
-1. Run the project in [Android Studio](https://developer.android.com/studio) or [VS Code](https://code.visualstudio.com/).
+Refer to the `ios/Podfile` file in your Flutter project to update the versions.
 
-If you need help, visit the [Web3Auth community](https://web3auth.io/community/c/help-pnp/pnp-flutter/18).
+  </TabItem>
+</Tabs>

src/pages/quickstart/builder/embedded-wallets/flutter/stepContent/index.ts

@@ -1,24 +1,22 @@
 import { toSteps } from '../../../../utils'
 import * as flutterQuickStart from './flutterQuickStart.mdx'
-import * as requirementsAndroid from './requirementsAndroid.mdx'
-import * as requirementsIOS from './requirementsIOS.mdx'
 import * as installation from './installation.mdx'
 import * as allowlist from './allowlist.mdx'
 import * as registerApp from '../../../../commonSteps/registerApp.mdx'
 import * as initialization from './initialize.mdx'
+import * as runTheApp from './runTheApp.mdx'
 import * as login from './login.mdx'
 import * as getUserInfo from '../../../../commonSteps/getUserInfo.mdx'
 import * as blockchainCalls from './blockchainCalls.mdx'
 import * as logout from './logout.mdx'
 
 const STEPS = toSteps({
   flutterQuickStart,
-  requirementsAndroid,
-  requirementsIOS,
   installation,
   registerApp,
   allowlist,
   initialization,
+  runTheApp,
   login,
   getUserInfo,
   blockchainCalls,

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

@@ -2,8 +2,8 @@
 
 You'll need a `clientId` and `network` to initialize the `Web3AuthFlutter` class.
 
-You can get your `clientId` from the previous step, whereas `network` signifies the type of
-network(`sapphire_mainnet` or `sapphire_devnet`) you want to initialize `Web3Auth` with.
+Your `clientId` was generated in the dashboard at Step 1. The `network` signifies which
+network (for example, `sapphire_mainnet`) you want to initialize `Web3Auth` with.
 
 :::info SDK reference