Update Liquidity screens (#385)

* wip share of pool

* update addLiquidity screen

* update CreatePair screen

* add slippage tolerance to create pair

* update remove liquidity screen

* remove console.log

src/components/ConfirmRemoveLiquidity.vue

@@ -24,14 +24,7 @@
       {{ t('removeLiquidity.outputMessage', { slippageTolerance: formatStringValue(`${slippageTolerance}`) }) }}
     </p>
     <s-divider />
-    <info-line
-      :label="t('confirmSupply.poolTokensBurned', { first: firstToken.symbol, second: secondToken.symbol })"
-      :value="formattedLiquidityValue"
-    >
-      <template #info-line-prefix>
-        <pair-token-logo :first-token="firstToken" :second-token="secondToken" size="mini" />
-      </template>
-    </info-line>
+    <info-line :label="t('removeLiquidity.shareOfPool')" :value="`${shareOfPool}%`" />
     <info-line
       :label="t('removeLiquidity.price')"
       :value="`1 ${firstToken.symbol} = ${formatStringValue(priceReversed)}`"
@@ -72,8 +65,7 @@ const namespace = 'removeLiquidity'
   components: {
     DialogBase,
     TokenLogo: lazyComponent(Components.TokenLogo),
-    InfoLine: lazyComponent(Components.InfoLine),
-    PairTokenLogo: lazyComponent(Components.PairTokenLogo)
+    InfoLine: lazyComponent(Components.InfoLine)
   }
 })
 export default class ConfirmRemoveLiquidity extends Mixins(TranslationMixin, DialogMixin, LoadingMixin, NumberFormatterMixin) {
@@ -82,6 +74,7 @@ export default class ConfirmRemoveLiquidity extends Mixins(TranslationMixin, Dia
   @Getter('liquidityAmount', { namespace }) liquidityAmount!: string
   @Getter('firstTokenAmount', { namespace }) firstTokenAmount!: string
   @Getter('secondTokenAmount', { namespace }) secondTokenAmount!: string
+  @Getter('shareOfPool', { namespace }) shareOfPool!: string
 
   @Getter('price', { namespace: 'prices' }) price!: string | number
   @Getter('priceReversed', { namespace: 'prices' }) priceReversed!: string | number

src/components/ConfirmTokenPairDialog.vue

@@ -5,7 +5,7 @@
     v-if="firstToken && secondToken"
   >
     <div class="pool-tokens-amount">
-      {{ minted }}
+      {{ shareOfPool }}%
     </div>
     <s-row v-if="firstToken && secondToken" flex align="middle" class="pool-tokens">
       <pair-token-logo :first-token="firstToken" :second-token="secondToken" size="small" />
@@ -37,7 +37,6 @@
       :asset-symbol="secondToken.symbol"
     />
     <info-line :value="`1 ${secondToken.symbol} = ${formatStringValue(price)}`" :asset-symbol="firstToken.symbol" />
-    <info-line :label="t('createPair.shareOfPool')" :value="`${shareOfPool}%`" />
     <template #footer>
       <s-button
         type="primary"

src/lang/en.json

@@ -588,10 +588,10 @@
         "title": "Create a pair",
         "deposit": "Deposit",
         "balance": "Balance",
-        "pricePool": "Prices and pool share",
+        "pricePool": "Prices and fees",
         "shareOfPool": "Share of pool",
         "firstPerSecond": "@:firstPerSecond",
-        "firstSecondPoolTokens": "{first}-{second} Pool tokens",
+        "firstSecondPoolTokens": "{first}-{second} Pool",
         "connect": "Connect wallet",
         "supply": "Supply",
         "yourPosition": "Your position",
@@ -606,7 +606,7 @@
         "firstLiquidityProviderInfo": "The ratio of tokens you add will set the price of this pool.<br/>Once you are happy with the rate click supply to review."
     },
     "confirmSupply": {
-        "title": "You will receive",
+        "title": "Your pool share will be",
         "outputDescription": "Output is estimated. If the price changes more than {slippageTolerance}% your transaction will revert.",
         "poolTokensBurned": "{first}-{second} Pool Tokens Burned",
         "price": "Price"
@@ -627,7 +627,8 @@
         "remove": "Remove",
         "description": "Removing pool tokens converts your position back into underlying tokens at the current rate, proportional to your share of the pool. Accrued fees are included in the amounts you receive.",
         "outputMessage": "Output is estimated. If the price changes more than {slippageTolerance}% your transaction will revert.",
-        "confirmTitle": "You will receive"
+        "confirmTitle": "You will receive",
+        "shareOfPool": "Share of pool after transaction"
     },
     "tokens": {
         "title": "Listed Tokens",

src/lang/messages.ts

@@ -405,10 +405,10 @@ export default {
     title: 'Create a pair',
     deposit: 'Deposit',
     balance: 'Balance',
-    pricePool: 'Prices and pool share',
+    pricePool: 'Prices and fees',
     shareOfPool: 'Share of pool',
     firstPerSecond: '@:firstPerSecond',
-    firstSecondPoolTokens: '{first}-{second} Pool tokens',
+    firstSecondPoolTokens: '{first}-{second} Pool',
     connect: 'Connect wallet',
     supply: 'Supply',
     yourPosition: 'Your position',
@@ -423,7 +423,7 @@ export default {
     firstLiquidityProviderInfo: 'The ratio of tokens you add will set the price of this pool.<br/>Once you are happy with the rate click supply to review.'
   },
   confirmSupply: {
-    title: 'You will receive',
+    title: 'Your pool share will be',
     outputDescription: 'Output is estimated. If the price changes more than {slippageTolerance}% your transaction will revert.',
     poolTokensBurned: '{first}-{second} Pool Tokens Burned',
     price: 'Price'
@@ -444,7 +444,8 @@ export default {
     remove: 'Remove',
     description: 'Removing pool tokens converts your position back into underlying tokens at the current rate, proportional to your share of the pool. Accrued fees are included in the amounts you receive.',
     outputMessage: 'Output is estimated. If the price changes more than {slippageTolerance}% your transaction will revert.',
-    confirmTitle: 'You will receive'
+    confirmTitle: 'You will receive',
+    shareOfPool: 'Share of pool after transaction'
   },
   tokens: {
     title: 'Listed Tokens',

src/store/addLiquidity.ts

@@ -79,6 +79,12 @@ const getters = {
   secondTokenValue (state: AddLiquidityState) {
     return state.secondTokenValue
   },
+  liquidityInfo (state: AddLiquidityState, getters, rootState, rootGetters) {
+    return rootGetters['pool/accountLiquidity'].find(liquidity =>
+      liquidity.firstAddress === state.firstTokenAddress &&
+      liquidity.secondAddress === state.secondTokenAddress
+    )
+  },
   reserve (state: AddLiquidityState) {
     return state.reserve
   },
@@ -105,9 +111,9 @@ const getters = {
   },
   shareOfPool (state: AddLiquidityState, getters) {
     const minted = FPNumber.fromCodecValue(getters.minted)
-    return getters.firstTokenValue && getters.secondTokenValue
-      ? minted.div(FPNumber.fromCodecValue(getters.totalSupply).add(minted)).mul(new FPNumber(100)).toLocaleString() || ZeroStringValue
-      : ZeroStringValue
+    const existed = FPNumber.fromCodecValue(getters.liquidityInfo?.balance ?? 0)
+    const total = FPNumber.fromCodecValue(getters.totalSupply)
+    return minted.add(existed).div(total.add(minted)).mul(new FPNumber(100)).toLocaleString() || ZeroStringValue
   }
 }
 
@@ -171,6 +177,7 @@ const actions = {
     commit(types.SET_FIRST_TOKEN_VALUE, '')
     commit(types.SET_SECOND_TOKEN_VALUE, '')
     await dispatch('checkLiquidity')
+    await dispatch('estimateMinted')
   },
 
   async setSecondTokenAddress ({ commit, dispatch, getters, rootGetters }, address: string) {
@@ -187,6 +194,7 @@ const actions = {
     }
 
     await dispatch('checkLiquidity')
+    await dispatch('estimateMinted')
   },
 
   async checkReserve ({ commit, getters, dispatch }) {
@@ -219,7 +227,7 @@ const actions = {
   },
 
   async estimateMinted ({ commit, getters }) {
-    if (getters.firstToken?.address && getters.secondToken?.address && getters.firstTokenValue && getters.secondTokenValue) {
+    if (getters.firstToken?.address && getters.secondToken?.address) {
       commit(types.ESTIMATE_MINTED_REQUEST)
 
       try {

src/store/removeLiquidity.ts

@@ -7,6 +7,7 @@ import { api } from '@soramitsu/soraneo-wallet-web'
 import { FPNumber, CodecString } from '@sora-substrate/util'
 
 import { ZeroStringValue } from '@/consts'
+import { debouncedInputHandler } from '@/utils'
 
 const types = flow(
   flatMap(x => [x + '_REQUEST', x + '_SUCCESS', x + '_FAILURE']),
@@ -116,6 +117,12 @@ const getters = {
   },
   totalSupply (state: RemoveLiquidityState) {
     return state.totalSupply
+  },
+  shareOfPool (state: RemoveLiquidityState, getters) {
+    const balance = FPNumber.fromCodecValue(getters.liquidityBalance)
+    const removed = new FPNumber(state.liquidityAmount ?? 0)
+    const total = FPNumber.fromCodecValue(getters.totalSupply)
+    return balance.sub(removed).div(total.sub(removed)).mul(new FPNumber(100)).toLocaleString() || ZeroStringValue
   }
 }
 
@@ -202,25 +209,6 @@ const actions = {
     }
   },
 
-  setLiquidityAmount ({ commit, getters, dispatch }, liquidityAmount) {
-    if (!getters.focusedField || getters.focusedField === 'liquidityAmount') {
-      commit(types.SET_FOCUSED_FIELD, 'liquidityAmount')
-
-      if (liquidityAmount) {
-        if (liquidityAmount !== getters.liquidityAmount && !Number.isNaN(liquidityAmount)) {
-          const part = new FPNumber(liquidityAmount).div(FPNumber.fromCodecValue(getters.liquidityBalance))
-
-          commit(types.SET_REMOVE_PART, Math.round(part.mul(new FPNumber(100)).toNumber()))
-          commit(types.SET_LIQUIDITY_AMOUNT, liquidityAmount)
-          commit(types.SET_FIRST_TOKEN_AMOUNT, part.mul(FPNumber.fromCodecValue(getters.firstTokenBalance)).toString())
-          commit(types.SET_SECOND_TOKEN_AMOUNT, part.mul(FPNumber.fromCodecValue(getters.secondTokenBalance)).toString())
-        }
-      } else {
-        commit(types.SET_LIQUIDITY_AMOUNT)
-      }
-      dispatch('getRemoveLiquidityData')
-    }
-  },
   setFirstTokenAmount ({ commit, getters, dispatch }, firstTokenAmount) {
     if (!getters.focusedField || getters.focusedField === 'firstTokenAmount') {
       commit(types.SET_FOCUSED_FIELD, 'firstTokenAmount')
@@ -266,11 +254,11 @@ const actions = {
     await dispatch('setFocusedField', null)
   },
 
-  async getRemoveLiquidityData ({ dispatch }) {
+  getRemoveLiquidityData: debouncedInputHandler(async ({ dispatch }) => {
     await dispatch('getLiquidityReserves')
     await dispatch('getTotalSupply')
     await dispatch('getNetworkFee')
-  },
+  }),
 
   async getNetworkFee ({ commit, getters }) {
     if (getters.firstTokenAddress && getters.secondTokenAddress) {
@@ -307,10 +295,11 @@ const actions = {
   async getTotalSupply ({ commit, getters }) {
     try {
       commit(types.GET_TOTAL_SUPPLY_REQUEST)
-      const [aOut, bOut, pts] = await api.estimateTokensRetrieved(
+      const [_, pts] = await api.estimatePoolTokensMinted(
         getters.firstTokenAddress,
         getters.secondTokenAddress,
-        getters.liquidityAmount,
+        getters.firstTokenAmount,
+        getters.secondTokenAmount,
         getters.reserveA,
         getters.reserveB
       )

src/views/AddLiquidity.vue

@@ -32,6 +32,9 @@
           </s-button>
           <token-select-button class="el-button--select-token" :token="firstToken" />
         </div>
+        <div slot="bottom" class="input-line input-line--footer">
+          <token-address v-if="firstToken" :name="firstToken.name" :symbol="firstToken.symbol" :address="firstToken.address" class="input-title" />
+        </div>
       </s-float-input>
       <s-icon class="icon-divider" name="plus-16" />
       <s-float-input
@@ -61,6 +64,9 @@
           </s-button>
           <token-select-button class="el-button--select-token" icon="chevron-down-rounded-16" :token="secondToken" @click="openSelectSecondTokenDialog" />
         </div>
+        <div slot="bottom" class="input-line input-line--footer">
+          <token-address v-if="secondToken" :name="secondToken.name" :symbol="secondToken.symbol" :address="secondToken.address" class="input-title" />
+        </div>
       </s-float-input>
       <s-button type="primary" class="action-button s-typography-button--large" :disabled="!areTokensSelected || isEmptyBalance || isInsufficientBalance || !isAvailable" @click="openConfirmDialog">
         <template v-if="!areTokensSelected">
@@ -95,22 +101,14 @@
       <p class="info-line-container__title">{{ t('createPair.pricePool') }}</p>
       <info-line :label="t('addLiquidity.firstPerSecond', { first: firstToken.symbol, second: secondToken.symbol })" :value="formatStringValue(price)" />
       <info-line :label="t('addLiquidity.firstPerSecond', { first: secondToken.symbol, second: firstToken.symbol })" :value="formatStringValue(priceReversed)" />
-      <info-line :label="t('createPair.shareOfPool')" :value="`${shareOfPool}%`" />
       <info-line :label="t('createPair.networkFee')" :value="`${formattedFee} ${KnownSymbols.XOR}`" :tooltip-content="t('networkFeeTooltipText')" />
     </div>
 
     <div v-if="areTokensSelected && isAvailable && (!emptyAssets || (liquidityInfo || {}).balance)" class="info-line-container">
       <p class="info-line-container__title">{{ t(`createPair.yourPosition${!emptyAssets ? 'Estimated' : ''}`) }}</p>
-      <info-line
-        :label="t('createPair.firstSecondPoolTokens', { first: firstToken.symbol, second: secondToken.symbol })"
-        :value="poolTokenPosition"
-      >
-        <template #info-line-prefix>
-          <pair-token-logo class="pair-token-logo" :first-token="firstToken" :second-token="secondToken" size="mini" />
-        </template>
-      </info-line>
       <info-line :label="firstToken.symbol" :value="firstTokenPosition" />
       <info-line :label="secondToken.symbol" :value="secondTokenPosition" />
+      <info-line :label="t('createPair.shareOfPool')" :value="`${shareOfPool}%`" />
     </div>
 
     <select-token :visible.sync="showSelectSecondTokenDialog" :connected="isLoggedIn" :asset="firstToken" @select="setSecondTokenAddress($event.address)" />
@@ -153,17 +151,17 @@ const TokenPairMixin = CreateTokenPairMixin(namespace)
     SelectToken: lazyComponent(Components.SelectToken),
     InfoLine: lazyComponent(Components.InfoLine),
     TokenLogo: lazyComponent(Components.TokenLogo),
-    PairTokenLogo: lazyComponent(Components.PairTokenLogo),
     SlippageTolerance: lazyComponent(Components.SlippageTolerance),
     ConfirmTokenPairDialog: lazyComponent(Components.ConfirmTokenPairDialog),
-    TokenSelectButton: lazyComponent(Components.TokenSelectButton)
+    TokenSelectButton: lazyComponent(Components.TokenSelectButton),
+    TokenAddress: lazyComponent(Components.TokenAddress)
   }
 })
 
 export default class AddLiquidity extends Mixins(TokenPairMixin, NumberFormatterMixin) {
   @Getter('isNotFirstLiquidityProvider', { namespace }) isNotFirstLiquidityProvider!: boolean
   @Getter('shareOfPool', { namespace }) shareOfPool!: string
-  @Getter('accountLiquidity', { namespace: 'pool' }) accountLiquidity!: Array<AccountLiquidity>
+  @Getter('liquidityInfo', { namespace }) liquidityInfo!: AccountLiquidity
 
   @Action('setDataFromLiquidity', { namespace }) setDataFromLiquidity
   @Action('addLiquidity', { namespace }) addLiquidity
@@ -225,10 +223,6 @@ export default class AddLiquidity extends Mixins(TokenPairMixin, NumberFormatter
     return classes.join(' ')
   }
 
-  get liquidityInfo () {
-    return this.accountLiquidity.find(l => l.firstAddress === this.firstToken?.address && l.secondAddress === this.secondToken?.address)
-  }
-
   get emptyAssets (): boolean {
     if (!(this.firstTokenValue || this.secondTokenValue)) {
       return true
@@ -238,10 +232,6 @@ export default class AddLiquidity extends Mixins(TokenPairMixin, NumberFormatter
     return (first.isNaN() || first.isZero()) || (second.isNaN() || second.isZero())
   }
 
-  get poolTokenPosition (): string {
-    return this.getTokenPosition(this.liquidityInfo?.balance, this.minted, true)
-  }
-
   get firstTokenPosition (): string {
     return this.getTokenPosition(this.liquidityInfo?.firstBalance, this.firstTokenValue)
   }
@@ -250,10 +240,10 @@ export default class AddLiquidity extends Mixins(TokenPairMixin, NumberFormatter
     return this.getTokenPosition(this.liquidityInfo?.secondBalance, this.secondTokenValue)
   }
 
-  getTokenPosition (liquidityInfoBalance: string | undefined, tokenValue: string | CodecString | number, isPoolToken = false): string {
+  getTokenPosition (liquidityInfoBalance: string | undefined, tokenValue: string | CodecString | number): string {
     const prevPosition = FPNumber.fromCodecValue(liquidityInfoBalance ?? 0)
     if (!this.emptyAssets) {
-      return prevPosition.add(isPoolToken ? FPNumber.fromCodecValue(tokenValue) : new FPNumber(tokenValue)).toLocaleString()
+      return prevPosition.add(new FPNumber(tokenValue)).toLocaleString()
     }
     return prevPosition.toLocaleString()
   }