Antoine/kandel webapp update (#192)

* Update of Kandel and WebApp doc

* Other update of Kandel doc

* Fixing issue

* Fixing issue #2

* Strat, Swap and Kandel doc edits

* Adding Revoke tuto + edit of Bounty in Kandel/param table

* Adding Taker fee section in Web App

* Adding example for Taker fee

* adding protocol fee img + Ratio/Nb price points description

* typos, add-ons and tweaks to Kandel param. and Web App strat

docs/kandel/how-does-kandel-work/how-does-kandel-work.md

@@ -12,6 +12,8 @@ Kandel strategy is coming soon!
 
 This section is a detailed explanation of how Kandel works, introducing configuration parameters and key mechanics. For the sake of simplicity, we have clearly separated the startup steps and picked round numbers.
 
+For a detailed explanation on how to create and manage a Kandel strategy on Mangrove's UI, you can view the [Create a strategy](../../web-app/strategies/create-strat.md) and [Manage a strategy](../../web-app/strategies/manage-strat/README.md) pages on our Web App documentation.
+
 > 💡
 > Kandel is not intended as a "set and forget" strategy, and needs ongoing maintenance and checks.
 

docs/kandel/how-does-kandel-work/more-on-failing-offers.md

@@ -1,6 +1,6 @@
 ---
 description: How does Kandel work
-sidebar_position: 6
+sidebar_position: 5
 ---
 
 

docs/kandel/how-does-kandel-work/parameters.md

@@ -16,10 +16,10 @@ Parameters | Description
 ---|---
 Pair | The pair represents the chosen market on which a Kandel strategy is running.<br /><br />*Example: ETH/USDC is a trading pair*
 Price range | The price range is needed to run any market-making strategy. It consists of the lowest and highest prices in the price grid at which Kandel instance posts its bids and asks.<br /><br />*Example of a price range:<br />• Lowest price = 1000 USDC per ETH<br />• Highest price = 1500 USDC per ETH*
-Initial inventory | The initial inventory is the amount of base tokens and quote tokens that must be deposited into the strategy. The minimum to be deposited into the strategy depends on the selected price range and [density](../../terms/density.md) of the selected market.<br /><br /> *Example on the ETH/USDC pair:<br />• Base token is ETH<br />• Quote token is USDC*
 Current price | The current price of the base token that is used for constructing the price distribution.<br /><br />*Example: the price of ETH is used for the ETH/USDC pair*
-Price distribution | It is a distribution of price levels/grid points within a selected price range. Kandel starts from the *Min price*, all the way up to the *Max price*. It is calculated using geometric progression and a key metric called "ratio": <br /><br />*Price at index i = Min_price x Ratio ^ i*
-Volume distribution | It defines how liquidity is spread throughout the price grid (previously defined as the price distribution in the [visual step-by-step](./step-by-step-visual-explanation))
+Number of price points | The number of price points on which Kandel will deploy its liquidity (bids and asks).
+Ratio | The ratio of the progression used to calculate the price grid. It is directly linked to the number of price points.
 Step size |  It is the distance between an executed bid/ask and its [dual offer](../../terms/dual-offer.md).<br /><br />Whenever a Kandel ask is taken at a given price point, Kandel uses the amount of quote just received to place a bid at a lower price point. With a step size of 1, it will place the bid at the price point immediately below. With a step size of 2, Kandel will repost two price points below, etc. (Technical aside: if in attempting to repost say 3 steps below Kandel hits the boundaries of its range it will transport as far below as possible). The same applies symmetrically for bids.<br /><br />Using a step size ≥ 2 allows one to publish a more continuous liquidity on the books, regularising the strat’s PnL, while at the same time keeping a reasonable spread between price points. Indeed, what matters to PnL is not the distance between price points, but how far money moves along the price grid each time an offer is taken. 
-[Provision](../../terms/provision.md) | It is the required amount of native tokens to be deposited into the strategy. A [provision](../../terms/provision.md) is required to post an offer on Mangrove; native tokens are used to cover failing offers.<br /><br />It covers the whole price grid, hence:<br />• *Kandel provision = Provision per offer x Number of price points x 2*<br />• Note: we add a "x2" factor since each price point could be both an ask and a bid.<br /><br />*Example: if the selected pair is on the Polygon network, the native token provision would be an amount of MATIC tokens.*
-Compounding rate | Compounding rate is the percentage of the spread to be reinvested into the strategy.<br />More information on compounding [in the next section](./compounding).
+Initial inventory | The initial inventory is the amount of base tokens and quote tokens that must be deposited into the strategy. The minimum to be deposited into the strategy depends on the selected price range and [density](../../terms/density.md) of the selected market.<br /><br /> *Example on the ETH/USDC pair:<br />• Base token is ETH<br />• Quote token is USDC*
+[Bounty](../../terms/bounty.md) | It is the required amount of native tokens to be deposited into the strategy. A [provision](../../terms/provision.md) is required to post an offer, in order to pay a potential [bounty](../../terms/bounty.md). The bounty is only a subset, smaller in value than the provision.<br /><br />The provision covers the whole price grid, hence:<br />• *Kandel provision = Provision per offer x Number of price points x 2*<br />• Note: we add a "x2" factor since each price point could be both an ask and a bid.<br /><br />*Example: if the selected pair is on the Polygon network, the bounty would be an amount of MATIC tokens.*
+Compounding rate | The compounding rate is the percentage of the spread to be reinvested into the strategy.<br />It can be set between 0% and 100% (SDK users only).

docs/kandel/how-does-kandel-work/step-by-step-visual-explanation.md

@@ -84,7 +84,7 @@ In our example:
 
 * We just received 1,300 USDC for sending 1 ETH through our **<font color="#eb525a">ask</font>**
 * Previously, we sent 1,287 USDC and received 1 ETH through our **<font color="#5cd19b">bid</font>**
-* The [compounding rate](./compounding.md) is 100%
+* The [compounding rate](./parameters.md) is 100%
 
 Therefore, 100% of the spread (or 13 USDC) is reinvested into the strategy. A new **<font color="#5cd19b">bid</font>** at k=1 steps below is reposted, and offers 1,300 USDC for 1.01 ETH.
 

docs/kandel/how-does-kandel-work/strategy-reserve.md

@@ -1,6 +1,6 @@
 ---
 description: How does Kandel work
-sidebar_position: 5
+sidebar_position: 4
 ---
 
 

docs/strat-lib/guides/howToRenege.md

@@ -8,7 +8,7 @@ sidebar_position: 3
 
 A maker can %%renege|renege%% on a trade if the market conditions are no longer favorable. This can be done in [multiple ways](../../contracts/technical-references/taking-and-making-offers/reactive-offer/maker-contract.md), but the strat lib has made it easy by adding a [`__lastLook__`](../technical-references/code/strategies/MangroveOffer.md#lastlook) function which can be overridden.
 
-You can follow the [smart offer tutorial](../getting-started/smart-offer.md) and extend it with the following function
+You can follow the [smart offer tutorial](../getting-started/smart-offer.md), and extend it with the following function:
 
 ```solidity reference title="OfferMakerTutorial.sol"
 https://github.com/mangrovedao/mangrove-core/blob/d6a2aae336a7ea89abe2479ab797b5ffcd5abb02/src/toy_strategies/offer_maker/tutorial/OfferMakerTutorialResidual.sol#L93-L96

docs/web-app/how-to-connect-wallet/how-to-connect-wallet.md

@@ -40,15 +40,15 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 
 ### Adding the networks manually
 
-5. If you do not yet have the Mumbai test network registered, a pop-up asking you to approve its addition will show up. Click "Approve".
+1. If you do not yet have the Mumbai test network registered, a pop-up asking you to approve its addition will show up. Click "Approve".
 
 <img src={useBaseUrl('img/assets/connect-wallet-switch-approve-network.png')} width="300px"/><br /><br />
 
 :::info
 In case you do get a Chain ID error, you'll need to add the network manually. Rest assured, it's super easy - just follow the below steps.
 :::
 
-5. Add Mumbai testnet manually
+2. Add Mumbai testnet manually
     * First, click "Cancel".
     * Then, open Metamask again.
     * Click on your current network at the top, then on "Add network" at the bottom.

docs/web-app/strategies/README.md

@@ -0,0 +1,15 @@
+---
+description: Strategies
+sidebar_position: 1
+---
+
+
+# Strategies
+
+Mangrove allows liquidity providers, traders and strategists to deploy their own composable strategies. Strategies leverage Mangrove's core principles to incorporate defensive code, post unprovisioned offers, and redisplay liquidity after their offers are taken.
+
+Currently, Mangrove has one available strategy for users: [Kandel](../../kandel/README.md).
+
+* If you would like more information regarding Kandel strategy, head over the [dedicated documentation section](../../kandel/README.md).
+
+* If you would like to create and manage your own Kandel strategy, check out [Create a Strategy](./create-strat.md).

docs/web-app/strategies/_category_.json

@@ -0,0 +1,5 @@
+{
+  "label": "Strategies",
+  "position": 5,
+  "collapsed": false
+}

docs/web-app/strategies/create-strat.md

@@ -0,0 +1,84 @@
+---
+description: Create a strategy
+sidebar_position: 2
+---
+
+
+# Create a strategy
+
+
+## Step 1/3 - Create strategy
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+1. Click on the "New Strategy" button on the "Your Strategies" tab and accept the Terms and Conditions after reading them.
+
+<img src={useBaseUrl('img/assets/create_strat.png')} width="70%"/>
+
+2. Choose a strategy type between "Kandel" and "Kandel on AAVE".
+    * [Kandel](../../kandel/README.md) is an automated market-making strategy that utilizes a reserve to place buy and sell orders on Mangrove DEX
+    * [Kandel on AAVE](../../kandel/details-on-strats/#kandel-on-aave) is essentially the same as the Kandel strategy, but it also earns extra yield by depositing the reserve on the AAVE platform until the liquidity is needed to fulfill a trade.
+
+3. Choose a market and click on "Next."
+
+## Step 2/3 - Strategy parameters
+
+:::info
+Average return: the average monthly return of kandels for this market
+:::
+:::info
+Risk appetite:
+* Low: corresponds to a low volatily pair (ex: stable/stable, such as USDC/USDT)
+* Medium: corresponds to a medium volatily pair (ex: volatile/stable, such as WBTC/USDT)
+* High: corresponds to a high volatily pair (ex: volatile/volatile, such as WBTC/WMATIC)
+:::
+<br />
+
+4. Determine your desired price range by dragging the limits on the market depth chart, setting the minimum and maximum price values, or using the percentage inputs. The market depth chart displayed on the strategy page allows you to see the real-time buy (<font color="#5cd19b">Bids</font>) and sell (<font color="#eb525a">Asks</font>) offers on the Mangrove DEX for a given market.
+
+<img src={useBaseUrl('img/assets/strat_parameters_1.png')} width="70%"/>
+<br /><br />
+
+5. Choose the settings of your new Kandel strategy:
+    * Number of price points
+    * Ratio
+    * Step size
+
+> 💡
+> More information in the [Kandel documentation](../../kandel/how-does-kandel-work/parameters.md).
+
+<img src={useBaseUrl('img/assets/strat_parameters_2.png')} width="70%"/>
+<br /><br />
+
+6. Choose your initial inventory for both tokens.
+
+> 💡
+> Use the "Update amount" button to automatically set the minimum recommended amounts.
+
+<img src={useBaseUrl('img/assets/strat_parameters_3.png')} width="70%"/>
+<br />
+
+7. Choose a bounty amount.
+
+8. Click on "Review Strategy".
+
+
+## Step 3/3 - Review strategy
+
+9. Check your strategy parameters carefully:
+    * If you want to edit them, click on "Back"
+    * If you're ready to launch, click on "Launch strategy"
+
+<br />
+<img src={useBaseUrl('img/assets/strat_parameters_4.png')} width="70%"/>
+<br />
+
+10. "Waiting for confirmation": you will be asked to sign 4 transactions in a row, including the deployment of your Kandel contract, the spending approvals of your pair's tokens, and the native token amount to be deposited for [bounty](../../glossary.md#bounty).
+> 💡
+> when signing on Metmamask, select "Use default" to set the appropriate amount of Approval.
+
+11. Select on 'View strategy' to manage your strategy, or click 'Done' to go back to the Strategies page.
+
+<br />
+Congratulations!<br />
+Your Kandel strategy is now live and ready to start publishing buy and sell orders on the Mangrove order book.

docs/web-app/strategies/key-actions-questions/README.md

@@ -0,0 +1,25 @@
+---
+description: Key Actions/Questions
+sidebar_position: 1
+---
+
+
+# Key Actions/Questions
+
+
+1. [How to edit your strategy price range?](./how-to-edit-price-range.md)
+
+2. [How to deposit inventory?](./how-to-deposit-inventory.md)
+
+3. [How to withdraw inventory?](./how-to-withdraw-inventory.md)
+
+4. [How to publish inventory?](./how-to-publish-inventory.md)
+
+5. [How to unpublish inventory?](./how-to-unpublish-inventory.md)
+
+6. [How to add additional bounty?](./how-to-add-bounty.md)
+
+7. [How to close your strategy?](./how-to-close-strat.md)
+
+8. [How to reopen your strategy?](./how-to-reopen-strat.md)
+

docs/web-app/strategies/key-actions-questions/_category_.json

@@ -0,0 +1,5 @@
+{
+  "label": "Key Actions/Questions",
+  "position": 6,
+  "collapsed": false
+}

docs/web-app/strategies/key-actions-questions/how-to-add-bounty.md

@@ -0,0 +1,19 @@
+---
+description: How to add additional bounty?
+sidebar_position: 7
+---
+
+
+# How to add additional bounty?
+
+1. Go to the [Mangrove dApp](https://app.mangrove.exchange/) and click on the Strategies tab
+
+2. Select "Manage" for the strategy that you would like to add bounty to
+
+3. Choose the "Parameters" tab
+
+4. Click "Add Bounty"
+
+5. On the card that appears, input the amount of native tokens you want to deposit and click on "Review"
+
+6. Review the information provided on the card, click "Add bounty" and sign the transaction

docs/web-app/strategies/key-actions-questions/how-to-close-strat.md

@@ -0,0 +1,20 @@
+---
+description: How to close a strategy?
+sidebar_position: 8
+---
+
+
+# How to close a strategy?
+
+
+1. Go to the [Mangrove dApp](https://app.mangrove.exchange/) and click on the Strategies tab
+
+2. Select "Manage" for the strategy that you would like to close
+
+3. Click on the "Close strategy" button in the top right corner
+
+4. You will be asked to confirm if you want to close the strategy - select "Yes, close strategy"
+> 💡
+> You can [reopen a closed strategy](./how-to-reopen-strat.md) at any time
+
+5. After processing, you can view your strategies list by clicking "View strategies" - you will be brought back to the main Mangrove Strategies tab

docs/web-app/strategies/key-actions-questions/how-to-deposit-inventory.md

@@ -0,0 +1,27 @@
+---
+description: How to deposit inventory?
+sidebar_position: 3
+---
+
+
+# How to deposit inventory?
+
+
+1. Go to the [Mangrove dApp](https://app.mangrove.exchange/) and click on the Strategies tab
+
+2. Select "Manage" for the strategy that you would like to deposit inventory into
+
+3. Choose the "Parameters" tab
+
+4. Click on "Deposit"
+
+5. On the card that appears, input the amounts of Token A and Token B you want to deposit and click on "Review"
+
+6. Review the information provided on the card, click on "Deposit" and confirm the transaction(s) on your wallet
+
+7. If you want to publish your liquidity later, click on "Done"
+
+8. If you want to publish your liquidity now:
+    * Click on "Publish now"
+    * Review the information provided on the card, click on "Publish" and confirm the transaction on your wallet provider
+    * Sign the transaction, wait for confirmation and choose between clicking on "View strategy" to manage your strategy or selecting "Done" to go back to the Strategies page

docs/web-app/strategies/key-actions-questions/how-to-edit-price-range.md

@@ -0,0 +1,17 @@
+---
+description: How to edit your strategy price range?
+sidebar_position: 2
+---
+
+
+# How to edit your strategy price range?
+
+1. Go to the [Mangrove dApp](https://app.mangrove.exchange/) and click on the Strategies tab
+
+2. Select "Manage" for the strategy that you would like to modify the [price range](../../../kandel/how-does-kandel-work/step-by-step-visual-explanation.md#price-distribution) of
+
+3. Choose the "Parameters" tab
+
+4. On the Price range container, click on the "Edit" button
+
+5. [Determine your desired price range](../../../kandel/how-does-kandel-work/parameters.md) by dragging the limits on the market depth chart, setting the minimum and maximum price values, or using the percentage inputs. The market depth chart displayed on the strategy page allows you to see the real-time buy (Bids) and sell (Asks) offers on the Mangrove DEX for a given market.

docs/web-app/strategies/key-actions-questions/how-to-publish-inventory.md

@@ -0,0 +1,23 @@
+---
+description: How to publish inventory?
+
+sidebar_position: 5
+---
+
+
+# How to publish inventory?
+
+
+1. Go to the [Mangrove dApp](https://app.mangrove.exchange/) and click on the Strategies tab
+
+2. Select "Manage" for the strategy that you would like to publish inventory to
+
+3. Choose the "Parameters" tab
+
+4. Click on "Publish"
+
+5. On the card that appears, input the amounts of Token A and Token B you want to publish and click on "Review"
+
+6. Review the information provided on the card, click on "Publish" and confirm the transaction on your wallet provider
+
+7. Sign the transaction, wait for confirmation and choose between clicking on "View strategy" to manage your strategy or selecting "Done" to go back to the Strategies page

docs/web-app/strategies/key-actions-questions/how-to-reopen-strat.md

@@ -0,0 +1,30 @@
+---
+description: How to reopen a strategy?
+sidebar_position: 9
+---
+
+
+# How to reopen a strategy?
+
+
+You can reopen a strategy that has been closed previously:
+
+1. Go to the [Mangrove dApp](https://app.mangrove.exchange/) and click on the Strategies tab
+
+2. Click the "Re-open" button of one of your closed strategy
+
+3. On the card that appears, click on "Yes, continue"
+
+4. [Determine your desired price range](../../../kandel/how-does-kandel-work/parameters.md) by dragging the limits on the market depth chart, setting the minimum and maximum price values, or using the percentage inputs. The market depth chart displayed on the strategy page allows you to see the real-time buy (Bids) and sell (Asks) offers on the Mangrove DEX for a given market
+
+5. Set the Number of price points, Ratio and Step size.
+
+6. Choose your [initial inventory](../../../kandel/how-does-kandel-work/parameters.md) for both tokens
+
+7. Choose a [bounty amount](../../../kandel/how-does-kandel-work/parameters.md),then then click on "Review Strategy"
+
+8. Check your strategy parameters carefully. If you want to edit them, click on "Back". If you agree with them, click on "Launch strategy"
+
+9. Sign the various confirmations, then choose between clicking on "View strategy" to manage your strategy or selecting "Done" to go back to the Strategies page
+
+