Merge pull request #3 from AstarNetwork/User-Section-V3

User Section - Part 2

docs/use/get-started/accounts.md

@@ -25,6 +25,20 @@ You can read more about Proxy accounts [here] (/docs/learn/Proxies). **LINK TO U
 
 Astar EVM side allows Ethereum-style addresses (H160 format), which is 40+2 hex-characters long, in a Substrate based chain. This address matches a private key, which can be used to sign transactions in the Ethereum side of the chain. Furthermore, the address is mapped into a storage slot inside the Substrate Balance pallet to a Substrate-style address (H256 format).
 
+## Astar Accounts
+
+### Address Format
+
+The address format used in Substrate-based chains like Astar is SS58. SS58 is a modification of Base-58-check from Bitcoin with some minor modifications. Notably, the format contains an address type prefix that identifies an address as belonging to a specific network. Astar Network is special in the Polkadot ecosystem because it's the only parachain that supports EVM as WASM smart contract. With the use of two different virtual machines comes two different kinds of addresses.
+
+- An Astar Native address or SS58 address
+- An Astar EVM address or H160 address which starts with 0x
+
+<img width="800" alt="1" src="https://user-images.githubusercontent.com/77480847/186840773-5874ba05-a067-4204-b72f-3f1017de85b7.png" />
+<img width="800" alt="2" src="https://user-images.githubusercontent.com/77480847/186840936-692dc1f3-c5a8-450f-813c-6067c60f8cc2.png" />
+
+You will interact with our Astar native address when using WASM dApps are ready or our dApps Staking page. Using this address requires another extension than MetaMask. We recommend using the Polkadot JS extension if you are new to the ecosystem.
+
 
 ## Learn more
 [Create a Substrate account] (/docs/use/manage-wallets/create-wallet/) **LINK TO UPDATE**

docs/use/get-started/astar-evm-wallet/index.md

@@ -4,11 +4,13 @@ sidebar_label: Astar EVM - Choose your wallet
 title: Astar EVM - Choose your wallet
 ---
 
-## Head Title
+In this section, you will find comprehensive guides to choose, install, and use different Ethereum Virtual Machine (EVM) wallet providers, including standard wallets, multisig wallets, and mobile wallets. 
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+Our step-by-step tutorials cover popular options like MetaMask, Ledger, and more, ensuring you have the right tools for secure and efficient transactions on Astar network. Whether you're managing funds individually or requiring multi-signature security, our resources will help you get started and optimize your wallet experience.
 
-## Pages of interest:
+Explore the features, learn best practices for secure transactions, and get tips to maximize your experience on Astar network.
+
+### Choose a wallet provider:
 
 import DocCardList from '@theme/DocCardList';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';

docs/use/get-started/astar-evm-wallet/wallet/_category_.json

@@ -0,0 +1,4 @@
+{
+    "label": "Wallet",
+    "position": 1
+}

docs/use/get-started/astar-evm-wallet/wallet/ledger/ledger-evm.md → docs/use/get-started/astar-evm-wallet/wallet/ledger/index.md

@@ -1,6 +1,6 @@
 ---
-sidebar_position: 1
-sidebar_label: Ledger for Astar EVM
+sidebar_position: 2
+sidebar_label: Ledger
 title: Interact with Ledger on Astar EVM using MetaMask
 ---
 
@@ -39,16 +39,18 @@ If you already have this, feel free to skip this part.
 2. Enter following details:
 
 <TabItem value="astar" label="Astar Network" default>
-    |   | Public endpoint Astar |
-    | --- | --- |
-    | Network name | Astar Network |
-    | New RPC URL | Astar Team: https://evm.astar.network |
-    |         | BlastAPI: https://astar.public.blastapi.io |
-    |         | Dwellir: https://astar-rpc.dwellir.com |
-    |         | OnFinality: https://astar.api.onfinality.io/public |
-    | Chain ID | 592 |
-    | Currency symbol | ASTR |
-    | Block Explorer URL | https://astar.blockscout.com/ |
+
+|   | Public endpoint Astar |
+| --- | --- |
+| Network name | Astar Network |
+| New RPC URL | Astar Team: https://evm.astar.network |
+|         | BlastAPI: https://astar.public.blastapi.io |
+|         | Dwellir: https://astar-rpc.dwellir.com |
+|         | OnFinality: https://astar.api.onfinality.io/public |
+| Chain ID | 592 |
+| Currency symbol | ASTR |
+| Block Explorer URL | https://astar.blockscout.com/ |
+
 </TabItem>
 <br></br>
 
@@ -110,19 +112,20 @@ To receive tokens, copy the address of your connected account by clicking your a
 5. Review the transaction on your Ledger device;
 
 <Figure src={require('/docs/use/get-started/astar-evm-wallet/wallet/ledger/img/4-ReviewTransaction.jpg').default} height='200px' />
-
-    a) Check amount:
+    
+    a. Check amount:
 
 <Figure src={require('/docs/use/get-started/astar-evm-wallet/wallet/ledger/img/5-AmountASTR1.jpg').default} height='200px' />
-
-    b) Check receiving address:
+    
+    b. Check receiving address:
 
 <Figure src={require('/docs/use/get-started/astar-evm-wallet/wallet/ledger/img/6-Address.jpg').default} height='200px' />
-    c) Check network:
+
+    c. Check network:
 
 <Figure src={require('/docs/use/get-started/astar-evm-wallet/wallet/ledger/img/7-Network_Astar.jpg').default} height='200px' />
-
-    d) Check Fees:
+    
+    d. Check Fees:
 
 <Figure src={require('/docs/use/get-started/astar-evm-wallet/wallet/ledger/img/9-MaxFees_ASTR.jpg').default} height='200px' />
 

docs/use/get-started/astar-evm-wallet/wallet/metamask/install-metamask.md

@@ -4,6 +4,61 @@ sidebar_label: Install Metamask
 title: Install Metamask
 ---
 
-## Head Title
+import Figure from "/src/components/figure"
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+## What is MetaMask?
+
+MetaMask is a web browser extension and mobile app that allows you to manage your Ethereum private keys. By doing so, it serves as a wallet for Ether and other tokens such as ASTR on Astar Network EVM, and allows you to interact with decentralized applications, or dapps. Unlike some wallets, MetaMask keeps no information on you: not your email address, not your password, and not your Secret Recovery Phrase or other private keys. You retain all power over your crypto-identity.
+
+<p align="center"><iframe width="600" height="350" src="https://www.youtube.com/embed/YVgfHZMFFFQ?si=b8ijkB7wGCdzeuBK" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
+
+## How to install MetaMask:
+
+1. Visit https://metamask.io/;
+
+2. Click `Download` in the menu bar;
+
+3. Click `Install MetaMask for Chrome`. You will be directed to the [Chrome Web Store](https://chromewebstore.google.com/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en);
+
+4. Click `Add to Chrome`;
+
+<Figure src={require('/docs/use/get-started/astar-evm-wallet/wallet/metamask/img/metamask_1.png').default} width="100%" /> 
+
+5. On the pop up, click `Add extension`;
+
+<Figure src={require('/docs/use/get-started/astar-evm-wallet/wallet/metamask/img/metamask_2.png').default} width="50%" /> 
+
+After adding MetaMask Extension, MetaMask will automatically open. You can also make sure it's easily accessible in your toolbar by clicking the jigsaw icon in the top-right of the screen, and hitting the pin icon.
+
+### Configuring your privacy settings
+
+When installing the MetaMask extension, you'll be able to adjust privacy settings one-by-one to ensure the app is set up according to your privacy preferences.
+
+To do this, simply hit the 'Advanced configuration' button in the wallet set-up process. Here you can toggle/configure settings including:
+
+- Phishing detection
+- Incoming transactions
+- Additional token price information from third-party sources
+- The [default RPC provider](https://support.metamask.io/getting-started/how-does-metamask-connect-to-a-blockchain-network/)
+- Token autodetect
+- Batch account requests
+- Custom IPFS gateway.
+
+Don't worry if you're unsure during setup: once your wallet is up and running, you can access the same settings at any time in Settings > Security & Privacy.
+
+## Setting Up Your Wallet
+
+Once the browser extension download is completed, you will be taken to a MetaMask wallet setup page.
+
+1. You must agree to the terms and conditions and click `Create a new wallet`;
+<Figure src={require('/docs/use/get-started/astar-evm-wallet/wallet/metamask/img/metamask_3.png').default} width="80%" /> 
+2. Next, you will have to agree to MetaMask’s data usage policy to continue;
+3. You will have to create a password for your MetaMask wallet;
+<Figure src={require('/docs/use/get-started/astar-evm-wallet/wallet/metamask/img/metamask_4.png').default} width="80%" /> 
+4. On the next page, you will find information and a video tutorial about crypto wallet recovery phrases;
+5. Click on `Secure my wallet`;
+6. On the next page, you will find the 12-word secret recovery phrase. Click `Reveal secret recovery phrase`;
+<Figure src={require('/docs/use/get-started/astar-evm-wallet/wallet/metamask/img/metamask_5.png').default} width="80%" /> 
+7. Keep the 12-word secret recovery phrase in a safe place where only you can access it;
+8. In the next step, you will have to confirm the 12-word secret recovery phrase.
+9. Click `Done`. Your MetaMask wallet is now ready to use.

docs/use/get-started/astar-evm-wallet/wallet/metamask/manage-xc20-with-metamask.md

@@ -12,7 +12,7 @@ import Figure from "/src/components/figure"
 
 Visit the [Assets page](https://portal.astar.network/assets), and log in with your MetaMask account to view your assets.
 
-<Figure src={require('/docs/use/get-started/astar-evm-wallet/wallet/metamask/img/XC20_EVM_1.png').default} width="50%" /> 
+<Figure src={require('/docs/use/get-started/astar-evm-wallet/wallet/metamask/img/Metamask_xc20_1.png').default} width="60%" /> 
 
 As you can see in the screenshot above, there is DOT in our EVM wallet. Let's add the asset to MetaMask.
 
@@ -22,11 +22,11 @@ Open MetaMask and connect the account with DOT. Make sure you are connected to t
 
 After the account is connected, you will be able to import tokens into the wallet. Click on **Add to wallet** button in DOT row.
 
-<Figure src={require('/docs/use/get-started/astar-evm-wallet/wallet/metamask/img/XC20_EVM_2.png').default} width="100%" /> 
+<Figure src={require('/docs/use/get-started/astar-evm-wallet/wallet/metamask/img/Metamask_xc20_2.png').default} width="80%" /> 
 
 Click on **Import Tokens** in MetaMask popup.
 
-<Figure src={require('/docs/use/get-started/astar-evm-wallet/wallet/metamask/img/XC20_EVM_3.png').default} width="100%" /> 
+<Figure src={require('/docs/use/get-started/astar-evm-wallet/wallet/metamask/img/Metamask_xc20_3.png').default} width="70%" /> 
 
 
 When you are finished adding and importing DOT, you will see them in your wallet. You can find the full list of supported XCM assets [(/docs/learn/interoperability/xcm/asset-list)].**[INSERT LINK]**

docs/use/get-started/astar-evm-wallet/wallet/metamask/setup-metamask.md

@@ -4,32 +4,42 @@ sidebar_label: Setup Astar Network
 title: Setup Astar Network in Metamask
 ---
 
-In this tutorial we will navigate you how to add Astar/Shiden Network to your Metamask account.
+import Figure from '/src/components/figure'
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';   
 
-<br />
+In this tutorial, you'll learn how to add Astar Network to your Metamask wallet extension.
 
-Adding Astar Network to Metamask is very easy.
-<br />
+## Option 1: Using the Astar Portal
 
-1. You will just need to go to [our Portal](https://portal.astar.network/) and try to connect to Metamask.
+1. Go to the [Astar Portal](https://portal.astar.network/) and connect your Metamask wallet.
 
-<img width="1000" alt="Screenshot 2022-09-06 at 14 08 21" src="https://user-images.githubusercontent.com/77480847/188554147-02f09f39-6051-4f7f-8e6f-d263867afb88.png" /><br />
-<br />
+<Figure src={require('/docs/use/get-started/astar-evm-wallet/wallet/metamask/img/metamask_6.png').default} width="100%" /> 
 
-2. Metamask will pop-up and ask you if you would like to add Astar Network. Please check the info and approve.<br />
 
-<img width="400" alt="Screenshot 2022-09-06 at 14 33 44" src="https://user-images.githubusercontent.com/77480847/188554595-bd9b0a82-5d15-4420-9eda-44c32418d2a1.png" />
+2. Metamask will pop-up and ask you if you would like to add Astar Network. Please check the info and approve.
 
-<br />
+<Figure src={require('/docs/use/get-started/astar-evm-wallet/wallet/metamask/img/metamask_7.png').default} width="80%" /> 
 
-:::note
-Alternatively, you can also set it up manually by giving information bellow.
-<br />
-Network Details<br />
-Network Name: Astar Network Mainnet<br />
-Network URL: https://evm.astar.network<br />
-Chain ID: 592<br />
-Currency Symbol: astr<br />
-Block Explorer URL: https://blockscout.com/astar
+## Option 2: Add Astar Network to Metamask manually
 
-:::
+Alternatively, you can configure it manually by entering the information below in Settings > Networks in your Metamask extension.
+
+<Figure src={require('/docs/use/get-started/astar-evm-wallet/wallet/metamask/img/metamask_8.png').default} width="100%" /> 
+
+<br></br>
+
+<TabItem value="astar" label="Astar Network" default>
+
+|   | Public endpoint Astar |
+| --- | --- |
+| Network name | Astar Network |
+| New RPC URL | Astar Team: https://evm.astar.network |
+|         | BlastAPI: https://astar.public.blastapi.io |
+|         | Dwellir: https://astar-rpc.dwellir.com |
+|         | OnFinality: https://astar.api.onfinality.io/public |
+| Chain ID | 592 |
+| Currency symbol | ASTR |
+| Block Explorer URL | https://astar.blockscout.com/ |
+
+</TabItem>

docs/use/get-started/astar-substrate-wallet/index.md

@@ -4,11 +4,13 @@ sidebar_label: Astar Substrate - Choose your wallet
 title: Astar Substrate - Choose your wallet
 ---
 
-## Head Title
+In this section, you will find comprehensive guides to choose, install, and use a range of Substrate wallet providers, including standard wallets, multisig wallets, and mobile wallets. 
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+Our comprehensive guides feature popular options like Polkadot.js, Ledger, Metamask Snap, Subwallet, PolkaSafe and more, ensuring you have the right tools for secure and efficient management of your assets on Astar network. Whether you need individual control or multi-signature security, our step-by-step tutorials will help you get started and enhance your wallet experience. 
 
-## Pages of interest:
+Explore the features, learn best practices for secure transactions, and get tips to maximize your experience on Astar network.
+
+### Choose a wallet provider:
 
 import DocCardList from '@theme/DocCardList';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';

docs/use/get-started/astar-substrate-wallet/mobile-wallet/_category_.json

@@ -0,0 +1,4 @@
+{
+    "label": "Mobile Wallet",
+    "position": 2
+}