Update angular quick start

Author: yashovardhan

src/common/hostedFileLinks.json

@@ -20,6 +20,8 @@
   "ANGULAR_POLYFILL_TS": "Web3Auth/web3auth-pnp-examples/refs/heads/v10-testing/quick-starts/angular-quick-start/src/polyfills.ts",
   "ANGULAR_PACKAGE_JSON": "Web3Auth/web3auth-pnp-examples/refs/heads/v10-testing/quick-starts/angular-quick-start/package.json",
   "ANGULAR_TSCONFIG_JSON": "Web3Auth/web3auth-pnp-examples/refs/heads/v10-testing/quick-starts/angular-quick-start/tsconfig.json",
+  "ANGULAR_ETHERSRPC_TS": "Web3Auth/web3auth-pnp-examples/refs/heads/v10-testing/quick-starts/angular-quick-start/src/app/ethersRPC.ts",
+  "ANGULAR_VIEMRPC_TS": "Web3Auth/web3auth-pnp-examples/refs/heads/v10-testing/quick-starts/angular-quick-start/src/app/viemRPC.ts",
   "VUE_CONFIG_JS": "Web3Auth/web3auth-pnp-examples/refs/heads/v10-testing/quick-starts/vue-quick-start/vue.config.js",
   "VUE_PACKAGE_JSON": "Web3Auth/web3auth-pnp-examples/refs/heads/v10-testing/quick-starts/vue-quick-start/package.json",
   "VUE_HOME_VUE": "Web3Auth/web3auth-pnp-examples/refs/heads/v10-testing/quick-starts/vue-quick-start/src/Home.vue",

src/pages/quick-start/builder/web/angular/index.ts

@@ -11,6 +11,8 @@ const framework = {
     filenames.push(hostedFileLinks.ANGULAR_APP_COMPONENT_HTML);
     filenames.push(hostedFileLinks.ANGULAR_POLYFILL_TS);
     filenames.push(hostedFileLinks.ANGULAR_TSCONFIG_JSON);
+    filenames.push(hostedFileLinks.ANGULAR_ETHERSRPC_TS);
+    filenames.push(hostedFileLinks.ANGULAR_VIEMRPC_TS);
 
     return { filenames, files, steps };
   },

src/pages/quick-start/builder/web/angular/stepContent/angularBundlerIssues.mdx

@@ -2,15 +2,9 @@
 title: Fixing Bundler Issues
 ---
 
-While using Web3Auth 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.
+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.
 
-:::tip Troubleshooting
-
-To solve this, please have a look at our troubleshooting pages:
-
-- [Vite Issues](/troubleshooting/vite-issues)
-- [Webpack 5 Issues](/troubleshooting/webpack-issues)
-
-:::
+> To solve this, please have a look at our troubleshooting pages about
+> [Webpack 5 Issues](/troubleshooting/webpack-issues)

src/pages/quick-start/builder/web/angular/stepContent/angularQuickStart.mdx

@@ -1,27 +1,18 @@
 ---
-title: Web3Auth PnP Modal Angular Quick Start
+title: Web3Auth Angular Quick Start
 ---
 
-This guide is designed to help you quickly integrate a basic instance of Web3Auth Plug and Play
-Modal in your Angular app.
+Integrate secure and seamless Web3 authentication into your Angular app using Web3Auth.
 
-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).
-
-:::tip building locally
+Clone the Angular Quick Start Application
 
-- Clone the PnP Modal Angular Quick Start Application
+```shell
+npx degit Web3Auth/web3auth-pnp-examples/quick-starts/angular-quick-start w3a-quick-start
+```
 
-  ```shell npm2yarn
-  npx degit Web3Auth/web3auth-pnp-examples/web-modal-sdk/quick-starts/angular-modal-quick-start w3a-quick-start
-  ```
+:::info
 
-- Install & Run
-
-  ```shell npm2yarn
-  cd w3a-quick-start
-  npm install
-  npm run start
-  ```
+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).
 
 :::

src/pages/quick-start/builder/web/angular/stepContent/blockchainCalls.mdx

@@ -0,0 +1,13 @@
+---
+title: Making 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.
+
+:::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.
+
+:::

…uilder/web/nextjs/stepContent/config.mdx …ilder/web/angular/stepContent/config.mdxsrc/pages/quick-start/builder/web/nextjs/stepContent/config.mdx renamed to src/pages/quick-start/builder/web/angular/stepContent/config.mdx src/pages/quick-start/builder/web/nextjs/stepContent/config.mdx renamed to src/pages/quick-start/builder/web/angular/stepContent/config.mdx

@@ -8,7 +8,7 @@ Dashboard Project Settings.
 :::info
 
 This is where you can also configure any major settings of your integration as well. Visit our
-[**configuration section**](/sdk/web/react/config) of the sdk reference to learn more about the
+[**configuration section**](/sdk/web/js/config) of the sdk reference to learn more about the
 different options available.
 
 :::

src/pages/quick-start/builder/web/angular/stepContent/initialize.mdx

@@ -2,9 +2,5 @@
 title: Initialize Web3Auth
 ---
 
-Web3Auth needs to be initialized as soon as your app loads up to enable the user to log in.
-Preferably done within a constructor, initialization is the step where you can pass on all the
-configurations for Web3Auth you want.
-
-For initializing Web3Auth PnP Modal SDK, you need to provide your Client ID, the Web3Auth Network of
-your project and the configuration of the chain you're looking to connect to.
+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.

…ck-start/commonSteps/installationWeb.mdx …web/angular/stepContent/installation.mdxsrc/pages/quick-start/commonSteps/installationWeb.mdx renamed to src/pages/quick-start/builder/web/angular/stepContent/installation.mdx src/pages/quick-start/commonSteps/installationWeb.mdx renamed to src/pages/quick-start/builder/web/angular/stepContent/installation.mdx

@@ -4,8 +4,11 @@ title: Install Web3Auth
 
 Install the Web3Auth package in your project.
 
+> Additionally, for blockchain calls, this example can run with `viem` or `ethers`, you can choose
+> your preferred library.
+
 ```bash npm2yarn
-npm install --save @web3auth/modal
+npm install --save @web3auth/modal viem
 ```
 
 [![Npm package monthly downloads](https://badgen.net/npm/dm/@web3auth/modal)](https://www.npmjs.com/package/@web3auth/modal)

src/pages/quick-start/builder/web/angular/stepContent/instantiate.mdx

@@ -4,12 +4,3 @@ title: Logging in your 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.
-
-After a successful user login, the `connect` function returns a provider that can be used to
-interact with the blockchain and sign transactions.
-
-:::info SDK Reference
-
-- [`connect()` function](/sdk/pnp/web/modal/usage#logging-in-the-user).
-
-:::