From 171e34622aac00407d9bcae87f56700346b59124 Mon Sep 17 00:00:00 2001
From: Sam <sarthak1dev@gmail.com>
Date: Thu, 7 Mar 2024 14:06:15 +0530
Subject: [PATCH] interactive code moved to the top

---
 docs/docs/guides/getting_started/getting_started.md | 9 +++++----
 docs/docs/guides/wallet/index.md                    | 9 +++++----
 docs/docs/guides/web3_providers_guide/index.md      | 9 +++++----
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/docs/docs/guides/getting_started/getting_started.md b/docs/docs/guides/getting_started/getting_started.md
index cad3029470d..18b95035957 100644
--- a/docs/docs/guides/getting_started/getting_started.md
+++ b/docs/docs/guides/getting_started/getting_started.md
@@ -6,6 +6,11 @@ sidebar_label: Quickstart
 
 # Quickstart
 
+
+## Live code editor
+
+<iframe width="100%" height="700px"  src="https://stackblitz.com/edit/vitejs-vite-aksddx?embed=1&file=main.js&showSidebar=1"></iframe> 
+
 ## Installation
 
 If NPM is being used as package manager, use the following for installing the web3.js library. 
@@ -247,7 +252,3 @@ const subscription = uniswapToken.events.Transfer();
 subscription.on('data',console.log);
 // ↳ [{...},{...}, ...] live events will be printed in the console
 ```
-
-## Live code editor
-
-<iframe width="100%" height="700px"  src="https://stackblitz.com/edit/vitejs-vite-aksddx?embed=1&file=main.js&showSidebar=1"></iframe> 
\ No newline at end of file
diff --git a/docs/docs/guides/wallet/index.md b/docs/docs/guides/wallet/index.md
index 5da33cdabaf..9dd38e750b5 100644
--- a/docs/docs/guides/wallet/index.md
+++ b/docs/docs/guides/wallet/index.md
@@ -5,6 +5,11 @@ sidebar_label: 'Mastering Wallets & Accounts'
 
 # Wallets and Accounts Overview
 
+
+## Live code editor 
+
+<iframe width="100%" height="700px" src="https://stackblitz.com/edit/vitejs-vite-mhuwrk?embed=1&file=main.js&showSidebar=1"></iframe>  
+
 ## Introduction
 
 A Web3.js `Wallet` is your main entry point if you want to use a private key directly to do any blockchain operations (transactions), also called `Signer` in other libraries.
@@ -220,7 +225,3 @@ The following is a list of `Accounts` [methods](/libdocs/Wallet) in the `web3.et
 - [sign](/libdocs/Accounts#sign)
 - [signTransaction](/libdocs/Accounts#signtransaction)
 
-
-## Live code editor 
-
-<iframe width="100%" height="700px" src="https://stackblitz.com/edit/vitejs-vite-mhuwrk?embed=1&file=main.js&showSidebar=1"></iframe>  
\ No newline at end of file
diff --git a/docs/docs/guides/web3_providers_guide/index.md b/docs/docs/guides/web3_providers_guide/index.md
index d405a80f065..e3ecc880cb0 100644
--- a/docs/docs/guides/web3_providers_guide/index.md
+++ b/docs/docs/guides/web3_providers_guide/index.md
@@ -5,6 +5,11 @@ sidebar_label: 'Mastering Providers'
 
 # Web3js providers overview
 
+
+## Live code editor
+
+<iframe width="100%" height="700px" src="https://stackblitz.com/edit/vitejs-vite-zfusfd?embed=1&file=main.js&showSidebar=1"></iframe>   
+
 ## Introduction
 
 web3.js providers are objects responsible for enabling connectivity with the Ethereum network in various ways. Connecting your web application to an Ethereum node is necessary for sending transactions, querying data, and interacting with smart contracts on the network. In this guide, we will explore the different types of providers available in web3.js, how to set them up, and how to use them in your code.
@@ -375,7 +380,3 @@ provider.on('error', (error) => {
 ```
 
 
-
-## Live code editor
-
-<iframe width="100%" height="700px" src="https://stackblitz.com/edit/vitejs-vite-zfusfd?embed=1&file=main.js&showSidebar=1"></iframe>   
\ No newline at end of file