make notes modular

Author: AyushBherwani1998

docs/sdk/pnp/android/custom-authentication.mdx

@@ -7,37 +7,36 @@ description: "Web3Auth PnP Android SDK - Using Custom Authentication | Documenta
 
 import TabItem from "@theme/TabItem";
 import Tabs from "@theme/Tabs";
+import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
 
-To use custom authentication (Using Social providers or Login providers like Auth0, AWS Cognito, Firebase etc. or even your own custom JWT login) you
-can add the configuration to the `loginConfig` parameter of the `Web3AuthOptions` object during the initialization.
+To use custom authentication (Using Social providers or Login providers like Auth0, AWS Cognito,
+Firebase etc. or even your own custom JWT login) you can add the configuration to the `loginConfig`
+parameter of the `Web3AuthOptions` object during the initialization.
 
-The `loginConfig` parameter is a key value map. The key should be one of the `Web3AuthProvider` in its string form, and the value should be a
-`LoginConfigItem` instance.
+The `loginConfig` parameter is a key value map. The key should be one of the `Web3AuthProvider` in
+its string form, and the value should be a `LoginConfigItem` instance.
 
 First, configure your own verifier in the Web3Auth Dashboard to use custom authentication.
 
-:::note
-
-This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this SDK in a production environment is the **Growth
-Plan**. You can use this feature in the development environment for free.
-
-:::
+<GrowthPlanNote />
 
 :::tip Create Custom Verifier
 
-Check out how to create a **[Custom Verifier](/auth-provider-setup/verifiers)** on the Web3Auth Dashboard.
+Check out how to create a **[Custom Verifier](/auth-provider-setup/verifiers)** on the Web3Auth
+Dashboard.
 
 :::
 
 :::info using dapp share
 
 - dApp Share is only returned for the Custom verifiers.
-- Also, 2FA should be enabled for the account using it. Use `mfaLevel = MFALevel.MANDATORY` in the `LoginParams` during login. See
-  **[MFA](/sdk/pnp/android/mfa)** for more details.
+- Also, 2FA should be enabled for the account using it. Use `mfaLevel = MFALevel.MANDATORY` in the
+  `LoginParams` during login. See **[MFA](/sdk/pnp/android/mfa)** for more details.
 
 :::
 
-Then, you should specify the details of your verifier in the `LoginConfigItem` struct, the details of this struct are as follows:
+Then, you should specify the details of your verifier in the `LoginConfigItem` struct, the details
+of this struct are as follows:
 
 ## `LoginConfigItem`
 
@@ -241,8 +240,9 @@ web3Auth = Web3Auth (
 
 ## `ExtraLoginOptions` for special login methods
 
-Additional to the `LoginConfig` you can pass extra options to the `login` function to configure the login flow for cases requiring additional info for
-enabling login. The `ExtraLoginOptions` accepts the following parameters:
+Additional to the `LoginConfig` you can pass extra options to the `login` function to configure the
+login flow for cases requiring additional info for enabling login. The `ExtraLoginOptions` accepts
+the following parameters:
 
 <Tabs
   defaultValue="table"
@@ -314,8 +314,9 @@ data class ExtraLoginOptions(
 
 ### Using Auth0 Login
 
-Auth0 has a special login flow, called the SPA flow. This flow requires a `client_id` and `domain` to be passed, and Web3Auth will get the JWT
-`id_token` from Auth0 directly. You can pass these configurations in the `ExtraLoginOptions` object in the login function.
+Auth0 has a special login flow, called the SPA flow. This flow requires a `client_id` and `domain`
+to be passed, and Web3Auth will get the JWT `id_token` from Auth0 directly. You can pass these
+configurations in the `ExtraLoginOptions` object in the login function.
 
 ```tsx
 web3Auth = Web3Auth (
@@ -348,9 +349,10 @@ val loginCompletableFuture: CompletableFuture<Web3AuthResponse> =
 
 ### Custom JWT Login
 
-If you're using any other provider like Firebase/ AWS Cognito or deploying your own Custom JWT server, you need to put the jwt token into the
-`id_token` field of the `extraLoginOptions`, additionally, you need to pass over the `domain` field as well, which is mandatory. If you don't have a
-domain, just passover a string in that field.
+If you're using any other provider like Firebase/ AWS Cognito or deploying your own Custom JWT
+server, you need to put the jwt token into the `id_token` field of the `extraLoginOptions`,
+additionally, you need to pass over the `domain` field as well, which is mandatory. If you don't
+have a domain, just passover a string in that field.
 
 ```tsx
 web3Auth = Web3Auth (
@@ -381,7 +383,8 @@ val loginCompletableFuture: CompletableFuture<Web3AuthResponse> =
 
 ### Email Passwordless
 
-To use the `EMAIL_PASSWORDLESS` login, you need to put the email into the `login_hint` field of the `extraLoginOptions`.
+To use the `EMAIL_PASSWORDLESS` login, you need to put the email into the `login_hint` field of the
+`extraLoginOptions`.
 
 ```kotlin
 val loginCompletableFuture: CompletableFuture<Web3AuthResponse> = web3Auth.login(

docs/sdk/pnp/android/mfa.mdx

@@ -7,36 +7,40 @@ description: "Web3Auth PnP Android SDK - Multi Factor Authentication | Documenta
 
 import TabItem from "@theme/TabItem";
 import Tabs from "@theme/Tabs";
-
-At Web3Auth, we prioritize your security by offering Multi-Factor Authentication (MFA). MFA is an extra layer of protection that verifies your
-identity when accessing your account. To ensure ownership, you must provide two or more different backup factors. You have the option to choose from
-the device, social, backup factor (seed phrase), and password factors to guarantee access to your Web3 account. Once you create a recovery factor, MFA
-is enabled, and your keys are divided into three shares for off-chain multi-sig, making the key self-custodial. With backup factors, you can easily
-recover your account if you lose access to your original device or helps login into a new device.
-
-You can set the mfaLevel within the `loginParams` to customize when mfa screen should be shown to user. It currently accepts 4 values:
-
-- **`default`** - Setting the mfaLevel to default will present the MFA screen to user on every third login. `mfaLevel = MFALevel.DEFAULT`
-- **`optional`** - Setting mfaLevel to optional will present the MFA screen to user on every login but user will have the option to skip it.
-  `mfaLevel = MFALevel.OPTIONAL`
-- **`mandatory`** - Setting mfaLevel to mandatory will make it mandatory for user to setup MFA after login. `mfaLevel = MFALevel.MANDATORY`
-- **`none`** - Setting mfaLevel to none will skip the mfa setup screen totally. `mfaLevel = MFALevel.NONE`
+import MFAMinimumPlan from "@site/src/common/docs/_mfa_minimum_plan.mdx";
+
+At Web3Auth, we prioritize your security by offering Multi-Factor Authentication (MFA). MFA is an
+extra layer of protection that verifies your identity when accessing your account. To ensure
+ownership, you must provide two or more different backup factors. You have the option to choose from
+the device, social, backup factor (seed phrase), and password factors to guarantee access to your
+Web3 account. Once you create a recovery factor, MFA is enabled, and your keys are divided into
+three shares for off-chain multi-sig, making the key self-custodial. With backup factors, you can
+easily recover your account if you lose access to your original device or helps login into a new
+device.
+
+You can set the mfaLevel within the `loginParams` to customize when mfa screen should be shown to
+user. It currently accepts 4 values:
+
+- **`default`** - Setting the mfaLevel to default will present the MFA screen to user on every third
+  login. `mfaLevel = MFALevel.DEFAULT`
+- **`optional`** - Setting mfaLevel to optional will present the MFA screen to user on every login
+  but user will have the option to skip it. `mfaLevel = MFALevel.OPTIONAL`
+- **`mandatory`** - Setting mfaLevel to mandatory will make it mandatory for user to setup MFA after
+  login. `mfaLevel = MFALevel.MANDATORY`
+- **`none`** - Setting mfaLevel to none will skip the mfa setup screen totally.
+  `mfaLevel = MFALevel.NONE`
 
 To trigger the MFA flow after authentication, you can use `enableMFA` method.
 
 :::caution Note
 
-If you are using default verifiers, your users may have set up MFA on other dApps that also use default Web3Auth verifiers. In this case, the MFA
-screen will continue to appear if the user has enabled MFA on other dApps. This is because MFA cannot be turned off once it is enabled.
+If you are using default verifiers, your users may have set up MFA on other dApps that also use
+default Web3Auth verifiers. In this case, the MFA screen will continue to appear if the user has
+enabled MFA on other dApps. This is because MFA cannot be turned off once it is enabled.
 
 :::
 
-:::note Minimum Growth plan required
-
-This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this SDK in a production environment is the **Growth
-Plan**. You can use this feature in the development environment for free.
-
-:::
+<MFAMinimumPlan />
 
 ```kotlin
 web3Auth.login(LoginParams(selectedLoginProvider, mfaLevel = MFALevel.MANDATORY))
@@ -86,12 +90,14 @@ class MainActivity : AppCompatActivity() {
 
 :::note Minimum SCALE plan required
 
-This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this SDK in a production environment is the **SCALE
-Plan**. You can use this feature in the development environment for free.
+This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this
+SDK in a production environment is the **SCALE Plan**. You can use this feature in the development
+environment for free.
 
 :::
 
-You can configure the order of MFA or enable/disable MFA type by passing the `mfaSettings` object in `Web3AuthOptions`.
+You can configure the order of MFA or enable/disable MFA type by passing the `mfaSettings` object in
+`Web3AuthOptions`.
 
 `MfaSettings`
 

docs/sdk/pnp/android/whitelabel.mdx

@@ -8,16 +8,13 @@ description: "Web3Auth PnP Android SDK - Whitelabel | Documentation - Web3Auth"
 import TabItem from "@theme/TabItem";
 import Tabs from "@theme/Tabs";
 import WhiteLabelShowcase from "@site/src/common/sdk/pnp/_whitelabel_showcase.mdx";
+import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
 
-For defining custom UI, branding, and translations for your brand, you just need to specify an additional parameter within the `Web3AuthOptions`
-object called `whiteLabel`. This parameter takes object called `WhiteLabelData`.
+For defining custom UI, branding, and translations for your brand, you just need to specify an
+additional parameter within the `Web3AuthOptions` object called `whiteLabel`. This parameter takes
+object called `WhiteLabelData`.
 
-:::note
-
-This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this SDK in a production environment is the **Growth
-Plan**. You can use this feature in the development environment for free.
-
-:::
+<GrowthPlanNote />
 
 ### Arguments
 

docs/sdk/pnp/flutter/custom-authentication.mdx

@@ -7,35 +7,34 @@ description: "Web3Auth PnP Flutter SDK - Using Custom Authentication | Documenta
 
 import TabItem from "@theme/TabItem";
 import Tabs from "@theme/Tabs";
+import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
 
-To use custom authentication (Using Social providers or Login providers like Auth0, AWS Cognito, Firebase etc. or even your own custom JWT login) you
-can add the configuration to the `loginConfig` parameter of the `LoginParams` object during the initialization.
+To use custom authentication (Using Social providers or Login providers like Auth0, AWS Cognito,
+Firebase etc. or even your own custom JWT login) you can add the configuration to the `loginConfig`
+parameter of the `LoginParams` object during the initialization.
 
-The `loginConfig` parameter is a key value map. The key should be one of the `TypeOfLogin` in its string form, and the value should be a
-`LoginConfigItem` struct.
+The `loginConfig` parameter is a key value map. The key should be one of the `TypeOfLogin` in its
+string form, and the value should be a `LoginConfigItem` struct.
 
-To use custom authentication, first you'll need to configure your own verifier in the Web3Auth Dashboard in Custom Authentication section.
+To use custom authentication, first you'll need to configure your own verifier in the Web3Auth
+Dashboard in Custom Authentication section.
 
 :::tip Create Custom Verifier
 
-Check out how to create a **[Custom Verifier](/auth-provider-setup/verifiers)** on the Web3Auth Dashboard.
+Check out how to create a **[Custom Verifier](/auth-provider-setup/verifiers)** on the Web3Auth
+Dashboard.
 
 :::
 
 :::info using dapp share
 
 - dApp Share is only returned for the Custom verifiers.
-- Also, 2FA should be enabled for the account using it. Use `mfaLevel = MFALevel.MANDATORY` in the `LoginParams` during login. See
-  **[MFA](/sdk/pnp/flutter/mfa)** for more details.
+- Also, 2FA should be enabled for the account using it. Use `mfaLevel = MFALevel.MANDATORY` in the
+  `LoginParams` during login. See **[MFA](/sdk/pnp/flutter/mfa)** for more details.
 
 :::
 
-:::note
-
-This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this SDK in a production environment is the **Growth
-Plan**. You can use this feature in the development environment for free.
-
-:::
+<GrowthPlanNote />
 
 Then, specify the details of your verifier in the `LoginConfigItem` struct as follows:
 
@@ -312,8 +311,9 @@ final Web3AuthResponse response = await Web3AuthFlutter.login(
 
 ## `ExtraLoginOptions` for special login methods
 
-Additional to the `LoginConfig` you can pass extra options to the `login` function to configure the login flow for cases requiring additional info for
-enabling login. The `ExtraLoginOptions` accepts the following parameters:
+Additional to the `LoginConfig` you can pass extra options to the `login` function to configure the
+login flow for cases requiring additional info for enabling login. The `ExtraLoginOptions` accepts
+the following parameters:
 
 <Tabs
   defaultValue="table"
@@ -432,8 +432,9 @@ class ExtraLoginOptions {
 
 ### Using Auth0 Login
 
-Auth0 has a special login flow, called the SPA flow. This flow requires a `client_id` and `domain` to be passed, and Web3Auth will get the JWT
-`id_token` from Auth0 directly. You can pass these configurations in the `ExtraLoginOptions` object in the `login` function.
+Auth0 has a special login flow, called the SPA flow. This flow requires a `client_id` and `domain`
+to be passed, and Web3Auth will get the JWT `id_token` from Auth0 directly. You can pass these
+configurations in the `ExtraLoginOptions` object in the `login` function.
 
 ```dart
 Future<void> initWeb3Auth() async {
@@ -487,8 +488,8 @@ final Web3AuthResponse response = await Web3AuthFlutter.login(
 
 ### Custom JWT Login
 
-If you're using any other provider like Firebase, AWS Cognito or deploying your own Custom JWT server, you need to put the jwt token into the
-`id_token` parameter of the `ExtraLoginOptions`.
+If you're using any other provider like Firebase, AWS Cognito or deploying your own Custom JWT
+server, you need to put the jwt token into the `id_token` parameter of the `ExtraLoginOptions`.
 
 ```dart
 Future<void> initWeb3Auth() async {
@@ -540,8 +541,9 @@ final Web3AuthResponse response = await Web3AuthFlutter.login(
 
 ### Email Passwordless
 
-To use the `EMAIL_PASSWORDLESS` login, you need to put the email into the `login_hint` parameter of the `ExtraLoginOptions`. By default, the login
-flow will be `code` flow, if you want to use the `link` flow, you need to put `flow_type` into the `additionalParams` parameter of the
+To use the `EMAIL_PASSWORDLESS` login, you need to put the email into the `login_hint` parameter of
+the `ExtraLoginOptions`. By default, the login flow will be `code` flow, if you want to use the
+`link` flow, you need to put `flow_type` into the `additionalParams` parameter of the
 `ExtraLoginOptions`.
 
 ```dart

docs/sdk/pnp/flutter/mfa.mdx

@@ -7,24 +7,24 @@ description: "Web3Auth PnP Flutter SDK - Multi Factor Authentication | Documenta
 
 import TabItem from "@theme/TabItem";
 import Tabs from "@theme/Tabs";
+import MFAMinimumPlan from "@site/src/common/docs/_mfa_minimum_plan.mdx";
 
-At Web3Auth, we prioritize your security by offering Multi-Factor Authentication (MFA). MFA is an extra layer of protection that verifies your
-identity when accessing your account. To ensure ownership, you must provide two or more different backup factors. You have the option to choose from
-the device, social, backup factor (seed phrase), and password factors to guarantee access to your Web3 account. Once you create a recovery factor, MFA
-is enabled, and your keys are divided into three shares for off-chain multi-sig, making the key self-custodial. With backup factors, you can easily
-recover your account if you lose access to your original device or helps login into a new device.
+At Web3Auth, we prioritize your security by offering Multi-Factor Authentication (MFA). MFA is an
+extra layer of protection that verifies your identity when accessing your account. To ensure
+ownership, you must provide two or more different backup factors. You have the option to choose from
+the device, social, backup factor (seed phrase), and password factors to guarantee access to your
+Web3 account. Once you create a recovery factor, MFA is enabled, and your keys are divided into
+three shares for off-chain multi-sig, making the key self-custodial. With backup factors, you can
+easily recover your account if you lose access to your original device or helps login into a new
+device.
 
-:::note Minimum Growth plan required
-
-This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this SDK in a production environment is the **Growth
-Plan**. You can use this feature in the development environment for free.
-
-:::
+<MFAMinimumPlan />
 
 ## Using the `mfaLevel` to enable MFA
 
-For a dApp, we provide various options to set up Multi-Factor Authentication. You can customize the MFA screen by setting the `mfaLevel` argument. You
-can enable or disable a backup factor and change their order. Currently, there are four values for `mfaLevel`:
+For a dApp, we provide various options to set up Multi-Factor Authentication. You can customize the
+MFA screen by setting the `mfaLevel` argument. You can enable or disable a backup factor and change
+their order. Currently, there are four values for `mfaLevel`:
 
 - `default`: presents the MFA screen every third login
 - `optional`: presents the MFA screen on every login, but you can skip it
@@ -33,8 +33,9 @@ can enable or disable a backup factor and change their order. Currently, there a
 
 :::caution Note
 
-If you are using default verifiers, your users may have set up MFA on other dApps that also use default Web3Auth verifiers. In this case, the MFA
-screen will continue to appear if the user has enabled MFA on other dApps. This is because MFA cannot be turned off once it is enabled.
+If you are using default verifiers, your users may have set up MFA on other dApps that also use
+default Web3Auth verifiers. In this case, the MFA screen will continue to appear if the user has
+enabled MFA on other dApps. This is because MFA cannot be turned off once it is enabled.
 
 :::
 
@@ -84,12 +85,14 @@ final Web3AuthResponse response = await Web3AuthFlutter.login(
 
 ### Using the `mfaSettings` to configure MFA Order
 
-You can configure the order of MFA, and enable or disable MFA type by passing the `mfaSettings` object in `Web3AuthOptions`.
+You can configure the order of MFA, and enable or disable MFA type by passing the `mfaSettings`
+object in `Web3AuthOptions`.
 
 :::note Minimum SCALE plan required
 
-This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this SDK in a production environment is the **SCALE
-Plan**. You can use this feature in the development environment for free.
+This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this
+SDK in a production environment is the **SCALE Plan**. You can use this feature in the development
+environment for free.
 
 :::