Merge pull request #36 from soramitsu/fix/hide-add-liquidity

Block add liquidity button
sora-xor · Dec 29, 2020 · 67f8e03 · 67f8e03
2 parents e56c6a8 + 81ae4aa
commit 67f8e03
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 18 deletions.
diff --git a/src/components/ConfirmAddLiquidity.vue b/src/components/ConfirmAddLiquidity.vue
@@ -28,7 +28,7 @@
       </s-row>
     </div>
     <div class="output-description">
-      {{ t('confirmSupply.outputDescription') }}
+      {{ t('confirmSupply.outputDescription', { slippageTolerance }) }}
     </div>
 
     <s-divider />
@@ -42,7 +42,7 @@
       </s-row>
       <s-row flex justify="space-between" class="pair-info__line">
         <div>{{ t('createPair.shareOfPool') }}</div>
-        <div>{{ shareOfPool }}</div>
+        <div>{{ formatNumber(shareOfPool, 2) }}%</div>
       </s-row>
     </div>
     <template #footer>
@@ -76,13 +76,11 @@ export default class ConfirmAddLiquidity extends Mixins(TranslationMixin, Dialog
   @Getter('secondToken', { namespace }) secondToken!: any
   @Getter('firstTokenValue', { namespace }) firstTokenValue!: number
   @Getter('secondTokenValue', { namespace }) secondTokenValue!: number
+  @Getter('shareOfPool', { namespace }) shareOfPool!: string
+  @Getter slippageTolerance!: number
 
   formatNumber = formatNumber
 
-  get shareOfPool (): string {
-    return '1%'
-  }
-
   handleConfirmCreatePair (): void {
     this.$emit('confirm', true)
     this.$emit('close')

diff --git a/src/components/Pool.vue b/src/components/Pool.vue
@@ -47,9 +47,12 @@
     <s-button class="el-button--add-liquidity" type="primary" @click="handleAddLiquidity">
       {{ t('pool.addLiquidity') }}
     </s-button>
-    <s-button v-if="connected" class="el-button--create-pair" type="secondary" @click="handleCreatePair">
-      {{ t('pool.createPair') }}
-    </s-button>
+    <s-tooltip :content="t('pool.comingSoon')">
+      <!-- TODO: Remove coming soon and fix onClick-->
+      <s-button v-if="connected" class="el-button--create-pair" type="secondary" >
+        {{ t('pool.createPair') }}
+      </s-button>
+    </s-tooltip>
   </div>
 </template>
 

diff --git a/src/lang/en/index.ts b/src/lang/en/index.ts
@@ -95,6 +95,7 @@ export default {
     pooledToken: '{tokenSymbol} Pooled:',
     pairTokens: '{pair} Pool Tokens:',
     poolShare: 'Your pool share',
+    comingSoon: 'Coming soon',
     description: 'When you add liquidity, you are given pool tokens representing your position. These tokens automaticaly earn fees proportional to your share of the pool, and can be redeemed at any time.'
   },
   selectToken: {
@@ -121,14 +122,14 @@ export default {
     ok: 'OK',
     networkFee: 'Network fee',
     insufficientBalance: 'Insufficient balance',
-    insufficientAssets: 'Insufficient assets',
+    unsuitableAssets: 'Unsuitable assets',
     transactionMessage: '{firstToken} and {secondToken}',
     firstLiquidityProvider: 'You are the first liquidity provider',
     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',
-    outputDescription: 'Output is estimated. If the price changes more than 0.5% your transaction will revert.',
+    outputDescription: 'Output is estimated. If the price changes more than {slippageTolerance}% your transaction will revert.',
     poolTokensBurned: '{first}-{second} Pool Tokens Burned:',
     price: 'Price:',
     confirm: 'Confirm'

diff --git a/src/store/addLiquidity.ts b/src/store/addLiquidity.ts
@@ -76,7 +76,7 @@ const getters = {
     return state.totalSupply || '0'
   },
   shareOfPool (state, getters) {
-    return new BigNumber(getters.minted).dividedBy(Number(getters.totalSupply)).toNumber()
+    return new BigNumber(getters.minted).dividedBy(Number(getters.totalSupply)).multipliedBy(100).toNumber()
   }
 }
 
@@ -134,6 +134,8 @@ const actions = {
     }
 
     commit(types.SET_FIRST_TOKEN, firstAsset)
+    commit(types.SET_FIRST_TOKEN_VALUE, '')
+    commit(types.SET_SECOND_TOKEN_VALUE, '')
     dispatch('checkReserve')
   },
 
@@ -143,6 +145,8 @@ const actions = {
       secondAddress = { ...asset, balance: '0' }
     }
     commit(types.SET_SECOND_TOKEN, secondAddress)
+    commit(types.SET_FIRST_TOKEN_VALUE, '')
+    commit(types.SET_SECOND_TOKEN_VALUE, '')
     dispatch('checkReserve')
   },
 

diff --git a/src/views/AddLiquidity.vue b/src/views/AddLiquidity.vue
@@ -26,7 +26,7 @@
             />
           </s-form-item>
           <div v-if="firstToken" class="token">
-            <s-button v-if="connected" class="el-button--max" type="tertiary" size="small" border-radius="mini" @click="handleFirstMaxValue">
+            <s-button v-if="connected" :disabled="!areTokensSelected" class="el-button--max" type="tertiary" size="small" border-radius="mini" @click="handleFirstMaxValue">
               {{ t('exchange.max') }}
             </s-button>
             <s-button class="el-button--choose-token" type="tertiary" size="small" border-radius="medium">
@@ -60,7 +60,7 @@
             />
           </s-form-item>
           <div v-if="secondToken" class="token">
-            <s-button v-if="connected" class="el-button--max" type="tertiary" size="small" border-radius="mini" @click="handleSecondMaxValue">
+            <s-button v-if="connected" :disabled="!areTokensSelected" class="el-button--max" type="tertiary" size="small" border-radius="mini" @click="handleSecondMaxValue">
               {{ t('exchange.max') }}
             </s-button>
             <s-button class="el-button--choose-token" type="tertiary" size="small" border-radius="medium" icon="chevron-bottom-rounded" icon-position="right" @click="openSelectSecondTokenDialog">
@@ -78,7 +78,7 @@
           {{ t('swap.chooseTokens') }}
         </template>
         <template v-else-if="!isAvailable">
-          {{ t('createPair.insufficientAssets') }}
+          {{ t('createPair.unsuitableAssets') }}
         </template>
         <template v-else-if="isEmptyBalance">
           {{ t('swap.enterAmount') }}
@@ -92,7 +92,7 @@
       </s-button>
     </s-form>
 
-    <info-card v-if="areTokensSelected" :title="t('createPair.pricePool')">
+    <info-card v-if="areTokensSelected && isAvailable" :title="t('createPair.pricePool')">
       <div class="card__data">
         <div>{{ t('createPair.firstPerSecond', { first: firstToken.symbol, second: secondToken.symbol }) }}</div>
         <div>{{ firstPerSecondPrice }} {{ firstToken.symbol }}</div>
@@ -111,7 +111,7 @@
       </div>
     </info-card>
 
-    <info-card v-if="areTokensSelected" :title="t('createPair.yourPosition') ">
+    <info-card v-if="areTokensSelected && isAvailable" :title="t('createPair.yourPosition') ">
       <div class="card__data">
         <s-row flex>
           <pair-token-logo class="pair-token-logo" :first-token="firstToken" :second-token="secondToken" size="mini" />

diff --git a/src/views/CreatePair.vue b/src/views/CreatePair.vue
@@ -78,7 +78,7 @@
           {{ t('swap.chooseTokens') }}
         </template>
         <template v-else-if="!isAvailable">
-          {{ t('createPair.insufficientAssets') }}
+          {{ t('createPair.unsuitableAssets') }}
         </template>
         <template v-else-if="isEmptyBalance">
           {{ t('swap.enterAmount') }}