As a user I want to be able to provide liquidity to any available opportunities within ShapeShift.

Prototype: https://www.figma.com/proto/D2DZI92GLfpCGEwLOmU6ps/OSMOSIS?scaling=contain&page-id=0%3A1&starting-point-node-id=203%3A1670&show-proto-sidebar=1&node-id=203%3A1670

1. Liquidity Pools - As a user, when I visit https://app.shapeshift.com/earn/ I should see a new row type labeled "Liquidity Pool" similar to "Staking" or “Vaults”. It should appear under those assets labeled “Staking”

   • The first opportunity underneath “Liquidity Pools” opportunities should be the OSMO/ATOM liquidity pool on Osmosis.
   • The opportunity will display the following columns of information:
     • Asset- This should show the token image of each asset in the pool, along with the name of the pool (e.g. ATOM-OSMO) and the location of the pool (e.g. Osmosis)
     • APY- This should show the current APY displayed as a percentage (%)
     • TVL - This should show the current amount of liquidity in the pool displayed in USD ($)
     • Balance - This should show user the balance of the deposited assets in the pool displayed in USD ($) if they have a balance

2. Manage - As a user, I want to deposit/withdraw or manage my LP position

   • Clicking the row will pop out a modal where a user can see an “Overview” with the options to toggle between "Add Liquidity" or "Remove Liquidity" for the selected liquidity pool.

3. Add Liquidity- As a user, when "Add Liquidity" is selected the modal will display the following editable sections:

   • Asset A Amount
     • There should be a blank text box to manually type in the desired amount
     • There should be buttons representing % of total assets the user has with buttons to automatically select 25, 50, 75, or 100%
     • There should also be a "Max" button which will automatically input the max amount of the asset.
   • Asset B Amount
     • There should be a blank text box to manually type in the desired amount
     • There should be buttons representing % of total assets the user has with buttons to automatically select 25, 50, 75, or 100%
     • There should also be a "Max" button which will automatically input the max amount of the asset.
   • The modal should have a vertical stepper of all the required steps

4. Supply - As a user, once I enter in all relevant information there should be a "Continue" button to press.

   • Until the user has input all the required information this button should be greyed out.
   • Error message handling here - if a user enters an amount that’s too high “Insufficient funds. Please enter a lower amount”

5. Confirm Add Liquidity - As a user, before I submit the final transaction I should have one last opportunity to confirm all relevant information.

   • This screen should also show that the user has two fees, an "IBC bridge fee" and then "Deposit Gas Fee" — we might need an info icon next to IBC bridge fee — something like "This fee is to bridge your assets onto Osmosis, before depositing into the pool”

   • This screen should then show a button “Confirm Deposit”TX

6. Status- As a user, I want to be able to follow along the status on my transaction.

   • When the transaction is first broadcast a pending screen should display. See Mock Up
     • The TXID of the transaction should be hyperlinked to the explorer.
   • When the transaction is confirmed this screen should automatically change to a success screen.
     • The TXID of the transaction should be hyperlinked

7. Remove Liquidity - As a user, when "Remove Liquidity" is selected the modal will display the following editable sections:

   • Asset A Amount
     • There should be a blank text box to manually type in the desired amount
     • There should be buttons representing % of total assets the user has with buttons to automatically select 25, 50, 75, or 100%
     • There should also be a "Max" button which will automatically input the max amount of the asset.
   • Asset B Amount
     • There should be a blank text box to manually type in the desired amount
     • There should be a slider representing % of total assets the user has with buttons to automatically select 25, 50, 75, or 100%
     • There should also be a "Max" button which will automatically input the max amount of the asset.
   • The modal should have a vertical stepper of all the required steps

8. Remove - As a user, once I enter in all relevant information there should be a "Continue" button to press.

   • Until the user has input all the required information this button should be greyed out.

9. Confirm Remove Liquidity - As a user, before I submit the final transaction I should have one last opportunity to confirm all relevant information.

10. Status- As a user, I want to be able to follow along the status on my transaction.

    • When the transaction is first broadcast a pending screen should display.
      • The TXID of the transaction should be accessible via a button “View on Chain”
    • When the transaction is confirmed this screen should automatically change to a success screen.
      • The TXID of the transaction should be accessible via a button “View on Chain”

11. View Position- As a user, I want to see the liquidity pool details that I have just interacted with, and should be on the success screen. I can close the modal or return to “overview” screen by pressing the “back” arrow on the upper left of the modal or hitting the button that says “View my position”