Merge pull request #2 from bloomwalletio/feat/add-wallet-tab-guide

Feat: add wallet tab guide

developer-guide/deep-links/index.md

@@ -1,7 +1,7 @@
 ---
 icon: link
-expanded: false
-order: 999
+expanded: true
+order: 998
 ---
 
 # Deep Links

developer-guide/wallet-connect/index.md

@@ -1,7 +1,7 @@
 ---
-icon: broadcast
-expanded: false
-order: 999
+icon: link
+expanded: true
+order: 998
 ---
 
 # WalletConnect

user-guides/index.md

@@ -0,0 +1,9 @@
+---
+icon: people
+expanded: true
+order: 999
+---
+
+# User Guides
+
+[Wallet](wallet-tab/index.md)  

user-guides/wallet-tab/index.md

@@ -0,0 +1,14 @@
+---
+icon: credit-card
+expanded: true
+order: 999
+---
+
+# Wallet Tab
+
+This section describes the most common views and actions you can reach from the wallet tab.
+
+[Overview](overview.md)  
+[Send Flow](send-flow.md)  
+[Layer 1 <-> Layer 2](layer-1-to-layer-2.md)  
+[Portfolio](portfolio.md)

user-guides/wallet-tab/layer-1-to-layer-2.md

@@ -0,0 +1,44 @@
+---
+icon: columns
+order: 997
+---
+
+# Layer 1 <-> Layer 2 Transfers
+
+### Layer 1 to Layer 2 Transfers
+
+The following steps allow you to transfer assets from **Layer 1 to Layer 2**:
+
+1. Initiate the send flow
+2. In the select asset pop-up, you select a **Layer 1 asset** you want to transfer
+3. Click on Continue
+4. Select the EVM/Layer 2 Network you want to bridge to.
+5. Input the Layer 2 address of the recipient.
+6. Click on Continue
+7. Select the amount you want to bridge
+8. Click on Continue
+9. Verify that the transaction details are correct
+10. Click on Confirm
+
+Behind the scenes, Bloom sends a transaction to the Shimmer EVM alias address. The transaction fills the metadata field with an encoded call to the magic contract. You can't add metadata to these kind of transactions. Additionally, a gas fee is attached to cover the execution of the smart contract.
+
+**NFTs can be bridged in a similar way. Go to the NFT and initiate the send flow by clicking the Send button. Skip step 7 & 8.**
+
+### Layer 2 to Layer 1 Transfers
+
+The following steps allow you to transfer assets from **Layer 2 to Layer 1**:
+
+1. Initiate the send flow
+2. In the select asset pop-up, you select a **Layer 2 asset** you want to bridge
+3. Click on Continue
+4. Select the Layer 1 Network.
+5. Input the Layer 1 address of the recipient.
+6. Click on Continue
+7. Select the amount you want to bridge
+8. Click on Continue
+9. Verify that the transaction details are correct
+10. Click on Confirm
+
+Upon confirmation, Bloom will send an EVM transaction that calls the magic contract. The transaction triggers a Layer 1 transaction from the ShimmerEVM committee to your Layer 1 address with the specified assets.
+
+**NFTs can be bridged in a similar way. Go to the NFT and initiate the send flow by clicking the Send button. Skip step 7 & 8.**

user-guides/wallet-tab/overview.md

@@ -0,0 +1,85 @@
+---
+icon: browser
+order: 1000
+---
+
+# Overview
+
+After you log into your Bloom profile, you will see the Bloom Dashboard. The wallet tab is the default tab and contains the following components:
+
+1. [Account Switcher](#1-account-switcher)
+2. [Account Menu](#2-account-menu)
+3. [Balance Summary](#3-balance-summary)
+4. [Send Button](#4-send-button)
+5. [Receive Button](#5-receive-button)
+6. [Layer 1 Summary](#6-layer-1-summary)
+7. [Layer 2 Summary](#7-layer-2-summary)
+8. [Activity Tab](#8-the-activity-tab)
+9. [Portfolio Tab](#9-the-portfolio-tab)
+
+:::image
+![The wallet tab overview.](../../static/user-guide/wallet-tab/overview.png)
+:::
+
+### 1. Account Switcher
+
+The Account Switcher indicates which account you currently view. Clicking on the switcher opens a dropdown that shows your available accounts with the corresponding balances. It also provides the option to create a new account.
+
+:::image
+![The Account switcher with a button to create a new account.](../../static/user-guide/wallet-tab/account-switcher.png)
+:::
+
+### 2. Account Menu
+
+The Account menu allows you to provide actions related to your currently selected account. These are:
+
+- Syncing accounts: a feature to find missing balances on higher address indices. *Mostly used for IOTA/Shimmer users that have been using Firefly v1.*
+- Balance breakdown: a breakdown that shows you the allocation of your funds. It also includes a pop-up that allows you to consolidate your balance. Consolidation means to reduce your amount of outputs to free up storage deposit.
+- Customise account: a pop-up that allows you to change your account name and the associated color.
+- Hide/Unhide account: this option hides your account from the account switcher. You can show hidden accounts by enabling the hidden accounts setting in the Advanced Section of settings. By enabling this option, you can click this option to unhide the account.
+- Delete account: removes your account from your profile. You can restore it using the wallet finder. *This option is not available for the first account.*
+
+:::image
+![The options available when you click on account menu.](../../static/user-guide/wallet-tab/account-menu.png)
+:::
+
+### 3. Balance Summary
+
+This part shows your available balance in fiat value. It sums up your L1 and L2 native token balances. You can change the currency under the settings menu.
+
+### 4. Send Button
+
+The send button opens the send flow. You can find more information about the different options [here](send-flow).
+
+### 5. Receive Button
+
+The receive button opens a pop-up that displays your different addresses for the networks Bloom supports.
+
+:::image
+![The receive address pop-up.](../../static/user-guide/wallet-tab/receive-popup.png)
+:::
+
+### 6. Layer 1 Summary
+
+The Layer 1 summary contains the name of the network, your address, the total amount of tokens available with an associated fiat value. Additionally it also shows you the avatar of your native tokens and NFTs.
+
+### 7. Layer 2 Summary
+
+The Layer 2 summary contains the name of the network, your address, the total amount of tokens available with an associated fiat value. It also shows you the avatar of your native tokens and NFTs on L2. In case you don't have a L2 address yet, it includes a button brings you to the generate address flow.
+
+### 8. The Activity Tab
+
+The activity tab displays your recent account activities. The tab shows you the asset associated with the activity, the action, date, addresses and amount involved. It is possible to search and filter through your activities using the icons on the right side. Clicking on an activity opens the summary that provides you with additional information.
+
+:::image
+![The Activity Tab.](../../static/user-guide/wallet-tab/activity-tab.png)
+:::
+
+### 9. The Portfolio Tab
+
+You can reach the portfolio tab by clicking the Tab switcher above the activity tab.
+The portfolio tab contains the tokens (base token and native tokens) you own. It provides information on which network it lives, the market capitalization and the market price from CoinGecko.
+
+:::image
+![The Portfolio Tab.](../../static/user-guide/wallet-tab/portfolio-tab.png)
+:::

user-guides/wallet-tab/portfolio.md

@@ -0,0 +1,38 @@
+---
+icon: list-unordered
+order: 996
+---
+
+# Portfolio
+
+Your portfolio contains your base tokens and native tokens on the different networks. You can search through them using the search bar on the top right. Additionally, you have a menu at the top right with additional actions, which are described below.
+
+:::image
+![The Portfolio Tab](../../static/user-guide/wallet-tab/portfolio-1.png)
+:::
+
+### Force Sync Token
+
+Bloom automatically fetches your Layer 2 balances every 10 seconds. Click on the `Force sync tokens` option to manually trigger the token syncing.
+
+:::image
+![](../../static/user-guide/wallet-tab/portfolio-2.png)
+:::
+
+### Import ERC-20 Token
+
+Bloom tracks the user's ERC-20 tokens through the Layer 2 explorer API. However, the explorer isn't always real time, which is why Bloom offers the possibility to import an ERC-20 token through it's contract address. Go to the portfolio tab and click on the menu to select the `Import ERC20 token`. This opens a pop-up that allows you to select the network and input the contract address.
+
+**Only ERC-20 Tokens on the supported EVM networks are supported!**
+
+:::image
+![](../../static/user-guide/wallet-tab/portfolio-3.png)
+:::
+
+### Refresh Token Metadata
+
+Bloom caches tokens and their metadata for performance reasons. If you want to delete the cached tokens and their metadata, and refetch them, click on the `Refresh token metadata` option. Once cleared, Bloom fetches the information from the corresponding network and caches them again.
+
+:::image
+![](../../static/user-guide/wallet-tab/portfolio-4.png)
+:::

user-guides/wallet-tab/send-flow.md

@@ -0,0 +1,113 @@
+---
+icon: arrow-up-right
+order: 999
+---
+
+# Send Flow
+
+There are multiple ways to enter the send flow. You can enter it through clicking the send button on the main dashboard, by clicking send on a given token or through a deep link. When you click the send button, it opens the token selection pop-up.
+
+:::image
+![The Send Button on the wallet tab.](../../static/user-guide/wallet-tab/send-flow-1.png)
+:::
+
+### Token Selection
+
+The token section serves to select the token you want to send. A search bar at the top of the pop-up helps you pick the token if you have many tokens. The tabs below allow you to view only the tokens on the given network. The token list consists of the base tokens and native tokens you own. The token avatar hints you from which network you can send them. The origin network will always equal to that of the token you want to send (e.g. Layer 2 Native Token will initiate a transaction from Layer 2).
+
+:::image
+![Token Selection](../../static/user-guide/wallet-tab/send-flow-2.png)
+:::
+
+**In case you want to send NFTs, you should go to the Collectibles tab**.
+
+### Destination Selection
+
+Based on the token you select, different networks pop up. For the base token and native token both Layer 1 and Layer 2 network shows up, since Bloom supports transferring from one layer to another. You can select a contact or one of your own accounts, or you can paste another address in the input field.
+
+:::image
+![Destination Selection](../../static/user-guide/wallet-tab/send-flow-3.png)
+:::
+
+### Amount Selection
+
+This section provides the means to set the amount you want to send. It also shows you your available balance and an option to set the amount to your available balance. The available balance shown might differ from the available balance under the portfolio tab, because Bloom subtracts the gas fee and/or the storage deposit automatically.
+
+**Disclaimer: You won't be able to send your maximum Layer 1 SMR (or IOTA) balance minus ~50 000 base unit. You must have sufficient base token units left to cover the Storage Deposit Return Unlock conditions of the remainder output. This is a slight limitation of the UTXO output model and the storage deposit requirements.**
+
+:::image
+![Amount Selection](../../static/user-guide/wallet-tab/send-flow-4.png)
+:::
+
+### Storage Deposit
+
+IOTA/Shimmer uses a concept of [storage deposit](https://wiki.iota.org/tips/tips/TIP-0019/). You need to attach sufficient base tokens to your transaction, to satisfy the deposit for the transaction. It is a mechanism to prevent spam and misuse of the network. This applies for all transactions
+on Layer 1 (also transactions that send funds to Layer 2). Bloom calculates this amount using the SDK and ensures that the required conditions are satisfied.
+
+### Gas Fee
+
+On Layer 2, the EVM introduces the concept of a gas fee. It is an amount of computation unit spent to execute smart contract computations which the users pays in the base token. This amount is calculated from the gas price given by the node and the gas units required for the smart contract state change. The latter depends on which smart contract is called and what functions are invoked. The EVM that runs on Layer 2 doesn't support Storage Deposit Unlock Conditions, Expiration Time Unlock Conditions, and the other things that IOTA has implemented on Layer 1. 
+(For Layer 1 to Layer 2 transactions, Bloom adds funds to the transaction to ensure enough base tokens are provided to cover both the gas fee and the storage deposit)
+
+### Transaction Summary
+
+After selecting the previous options, the transaction summary allows you to understand what your transaction will result into. It provides options to set additional features available for Layer 1 transactions, such as:
+
+- Tag: indexable data attached to your transaction.
+- Metadata: non-indexable data attached to your transaction.
+- Timelock Unlock Condition: a condition that the receiver doesn't spend your transaction before a given time.
+- Expiration Time Unlock Condition: a condition that ensures your transaction is returned to you, if the recipient doesn't claim it.
+- Gift Storage Deposit: This removes the storage deposit return unlock conditions and attaches sufficient base token units to the transaction to satisfy the requirements of the Tangle.
+
+**In certain cases, such as Layer 1 to Layer 2 transactions, deep links or proprietary transactions, one or more of these features is disabled.**
+
+**Ensure to select the additional options before you send the transaction. Once you click confirm, you can't change the transaction anymore.**
+
+:::image
+![Transaction Summary for Layer 1 transaction](../../static/user-guide/wallet-tab/send-flow-6.png)
+:::
+
+Bloom adds the estimated and the max gas fee for Layer 2 transactions. The estimated fee is just an estimation of the actual cost. The max fee is the upper limit the transaction is able to spend. Your balance needs to exceed the max gas fee balance in order for you to send the transaction.
+
+:::image
+![Transaction Summary for Layer 2 transaction](../../static/user-guide/wallet-tab/send-flow-7.png)
+:::
+
+### Stronghold Unlocking
+
+After clicking the confirmation button, Bloom will ask for the Stronghold password through a separate pop-up in case of a Software profile. Bloom skips the pop-up if you unlocked the Stronghold in the timeframe before the lock period.
+
+### Ledger Unlocking
+
+After clicking on the confirmation button, Bloom will guide you through the ledger confirmation flow for Hardware profiles. Once the Ledger device signs the transaction, Bloom sends it to the network.
+
+### Layer 1 to Layer 1
+
+The following steps allow you to transfer assets from **Layer 1 to Layer 1**:
+
+1. Initiate the send flow
+2. In the select asset pop-up, you select a **Layer 1 asset** you want to bridge
+3. Click on Continue
+4. Select the Layer 1 Network.
+5. Input the Layer 1 address of the recipient.
+6. Click on Continue
+7. Select the amount you want to bridge
+8. Click on Continue
+9. Optionally add Layer 1 transaction features, such as tag, metadata, timelock, ...
+10. Verify that the transaction details are correct
+11. Click on Confirm
+
+### Layer 2 to Layer 2
+
+The following steps allow you to transfer assets from **Layer 2 to Layer 2**:
+
+1. Initiate the send flow
+2. In the select asset pop-up, you select a **Layer 2 asset** you want to bridge
+3. Click on Continue
+4. Select the EVM/Layer 2 Network.
+5. Input the Layer 2 address of the recipient.
+6. Click on Continue
+7. Select the amount you want to bridge
+8. Click on Continue
+9. Verify that the transaction details are correct
+10. Click on Confirm