Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PSS-128: Add confirmation screens for pool #16

Merged
merged 7 commits into from
Nov 26, 2020
Merged

PSS-128: Add confirmation screens for pool #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e9764ae
PSS-128: Add confirmation screens for pool
Asmadek Nov 26, 2020
7d33dc8
Merge branch 'develop' into feature/PSS-128-liquidity-confirmation-sc…
Asmadek Nov 26, 2020
3bea47b
Fix tests
Asmadek Nov 26, 2020
1715336
Merge branch 'feature/PSS-128-liquidity-confirmation-screens' of http…
Asmadek Nov 26, 2020
28d4ec4
Formatting refactoring.
alexnatalia Nov 26, 2020
fbce9ab
Removed TransactionSubmit component.
alexnatalia Nov 26, 2020
7175802
Fixed router problem.
alexnatalia Nov 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 141 additions & 0 deletions src/components/ConfirmAddLiquidity.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
<template>
<dialog-base
:visible.sync="isVisible"
:title="t('confirmSupply.title')"
>
<div class="pool-tokens-amount">
{{ poolTokens }}
</div>
<s-row flex align="middle" class="pool-tokens">
<pair-token-logo class="pair-logo" :firstToken="firstToken.symbol" :secondToken="secondToken.symbol" size="small" />
{{ t('createPair.firstSecondPoolTokens', { first: firstToken.symbol, second: secondToken.symbol }) }}
</s-row>
<div class="tokens">
<s-row flex justify="space-between" class="token">
<s-row v-if="firstToken" flex>
<!-- TODO 4 alexnatalia: fix tokens alignment -->
<token-logo :token="firstToken.symbol" size="small" />
<span class="token-symbol">{{ firstToken.symbol }} {{ t('createPair.deposit')}}:</span>
</s-row>
<div class="token-value">{{ formatNumber(firstTokenValue, 2) }}</div>
</s-row>
<s-row flex justify="space-between" class="token">
<s-row v-if="secondToken" flex>
<token-logo :token="secondToken.symbol" size="small" />
<span class="token-symbol">{{ secondToken.symbol }} {{ t('createPair.deposit')}}:</span>
</s-row>
<div class="token-value">{{ formatNumber(secondTokenValue, 2) }}</div>
</s-row>
</div>
<div class="output-description">
{{ t('confirmSupply.outputDescription') }}
</div>

<s-divider />
<div class="pair-info">
<s-row flex justify="space-between" class="pair-info__line">
<div>{{ t('confirmSupply.price') }}</div>
<div v-if="firstToken && secondToken" class="price">
<div>1 {{ firstToken.symbol }} = {{ formatNumber(firstToken.price / secondToken.price) }} {{ secondToken.symbol }}</div>
<div>1 {{ secondToken.symbol }} = {{ formatNumber(secondToken.price / firstToken.price) }} {{ firstToken.symbol }}</div>
</div>
</s-row>
<s-row flex justify="space-between" class="pair-info__line">
<div>{{ t('createPair.shareOfPool') }}</div>
<div>{{ shareOfPool }}</div>
</s-row>
</div>
<template #footer>
<s-button type="primary" @click="handleConfirmCreatePair">{{ t('confirmSupply.confirm') }}</s-button>
</template>
</dialog-base>
</template>

<script lang="ts">
import { Component, Mixins, Prop } from 'vue-property-decorator'
import { Getter, Action } from 'vuex-class'

import TranslationMixin from '@/components/mixins/TranslationMixin'
import DialogMixin from '@/components/mixins/DialogMixin'
import DialogBase from '@/components/DialogBase.vue'
import { lazyComponent } from '@/router'
import { Components } from '@/consts'
import { formatNumber } from '@/utils'
const namespace = 'addLiquidity'

@Component({
components: {
DialogBase,
TokenLogo: lazyComponent(Components.TokenLogo),
PairTokenLogo: lazyComponent(Components.PairTokenLogo)
}
})
export default class ConfirmAddLiquidity extends Mixins(TranslationMixin, DialogMixin) {
@Getter('firstToken', { namespace }) firstToken!: any
@Getter('secondToken', { namespace }) secondToken!: any
@Getter('firstTokenValue', { namespace }) firstTokenValue!: number
@Getter('secondTokenValue', { namespace }) secondTokenValue!: number

formatNumber = formatNumber

get poolTokens (): string {
return formatNumber(1000, 2)
}

get shareOfPool (): string {
return '1%'
}

handleConfirmCreatePair (): void {
this.$emit('confirm', true)
this.$emit('close')
this.isVisible = false
}
}
</script>

<style lang="scss" scoped>
.tokens {
line-height: $s-line-height-medium;
.token {
&-logo {
display: inline-block;
margin-right: $inner-spacing-mini;
}
}
}
.output-description {
font-size: $s-font-size-mini;
line-height: $s-line-height-medium;
margin-top: $inner-spacing-mini;
margin-bottom: $inner-spacing-mini;
}
.pair-info {
line-height: $s-line-height-medium;
&__line {
margin-top: $inner-spacing-medium;
margin-bottom: $inner-spacing-medium;
}
}
.supply-info {
display: flex;
justify-content: space-between;
}

.pool-tokens-amount {
font-size: $s-font-size-big-heading;
line-height: 120%;
letter-spacing: -0.04em;
}

.pool-tokens {
margin: $inner-spacing-mini 0;
font-size: 18px;
line-height: 150%;
letter-spacing: -0.02em;
}

.pair-logo {
margin-right: $inner-spacing-mini;
}
</style>
65 changes: 46 additions & 19 deletions src/components/ConfirmCreatePair.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,28 @@
:visible.sync="isVisible"
:title="t('confirmSupply.title')"
>
<div class="pool-tokens-amount">
{{ poolTokens }}
</div>
<s-row flex align="middle" class="pool-tokens">
<pair-token-logo class="pair-logo" :firstToken="firstToken.symbol" :secondToken="secondToken.symbol" size="small" />
{{ t('createPair.firstSecondPoolTokens', { first: firstToken.symbol, second: secondToken.symbol }) }}
</s-row>
<div class="tokens">
<s-row flex justify="space-between" class="token">
<div class="token-value">{{ formatNumber(firstTokenValue, 2) }}</div>
<s-row v-if="firstToken" flex align="center">
<s-row v-if="firstToken" flex>
<!-- TODO 4 alexnatalia: fix tokens alignment -->
<token-logo :token="firstToken.symbol" />
<span class="token-symbol">{{ firstToken.symbol }}</span>
<token-logo :token="firstToken.symbol" size="small" />
<span class="token-symbol">{{ firstToken.symbol }} {{ t('createPair.deposit')}}:</span>
</s-row>
<div class="token-value">{{ formatNumber(firstTokenValue, 2) }}</div>
</s-row>
<div class="token-divider">+</div>
<s-row flex justify="space-between" class="token">
<div class="token-value">{{ formatNumber(secondTokenValue, 2) }}</div>
<s-row v-if="secondToken" flex align="center">
<token-logo :token="secondToken.symbol" />
<span class="token-symbol">{{ secondToken.symbol }}</span>
<s-row v-if="secondToken" flex>
<token-logo :token="secondToken.symbol" size="small" />
<span class="token-symbol">{{ secondToken.symbol }} {{ t('createPair.deposit')}}:</span>
</s-row>
<div class="token-value">{{ formatNumber(secondTokenValue, 2) }}</div>
</s-row>
</div>
<div class="output-description">
Expand All @@ -27,17 +33,17 @@

<s-divider />
<div class="pair-info">
<s-row flex justify="space-between" class="pair-info__line">
<div v-if="firstToken && secondToken">{{ t('confirmSupply.poolTokensBurned', {first: firstToken.symbol, second: secondToken.symbol}) }}</div>
<div>{{ poolTokensBurned }}</div>
</s-row>
<s-row flex justify="space-between" class="pair-info__line">
<div>{{ t('confirmSupply.price') }}</div>
<div v-if="firstToken && secondToken" class="price">
<div>1 {{ firstToken.symbol }} = {{ formatNumber(firstToken.price / secondToken.price) }} {{ secondToken.symbol }}</div>
<div>1 {{ secondToken.symbol }} = {{ formatNumber(secondToken.price / firstToken.price) }} {{ firstToken.symbol }}</div>
</div>
</s-row>
<s-row flex justify="space-between" class="pair-info__line">
<div>{{ t('createPair.shareOfPool') }}</div>
<div>{{ shareOfPool }}</div>
</s-row>
</div>
<template #footer>
<s-button type="primary" @click="handleConfirmCreatePair">{{ t('confirmSupply.confirm') }}</s-button>
Expand All @@ -60,21 +66,26 @@ const namespace = 'createPair'
@Component({
components: {
DialogBase,
TokenLogo: lazyComponent(Components.TokenLogo)
TokenLogo: lazyComponent(Components.TokenLogo),
PairTokenLogo: lazyComponent(Components.PairTokenLogo)
}
})
export default class ConfirmCreatePair extends Mixins(TranslationMixin, DialogMixin) {
export default class ConfirmAddLiquidity extends Mixins(TranslationMixin, DialogMixin) {
@Getter('firstToken', { namespace }) firstToken!: any
@Getter('secondToken', { namespace }) secondToken!: any
@Getter('firstTokenValue', { namespace }) firstTokenValue!: number
@Getter('secondTokenValue', { namespace }) secondTokenValue!: number

formatNumber = formatNumber

get poolTokensBurned (): string {
get poolTokens (): string {
return formatNumber(1000, 2)
}

get shareOfPool (): string {
return '1%'
}

handleConfirmCreatePair (): void {
this.$emit('confirm', true)
this.$emit('close')
Expand All @@ -85,12 +96,11 @@ export default class ConfirmCreatePair extends Mixins(TranslationMixin, DialogMi

<style lang="scss" scoped>
.tokens {
font-size: 30px;
line-height: $s-line-height-mini;
line-height: $s-line-height-medium;
.token {
&-logo {
display: inline-block;
margin-right: $inner-spacing-medium;
margin-right: $inner-spacing-mini;
}
}
}
Expand All @@ -111,4 +121,21 @@ export default class ConfirmCreatePair extends Mixins(TranslationMixin, DialogMi
display: flex;
justify-content: space-between;
}

.pool-tokens-amount {
font-size: $s-font-size-big-heading;
line-height: 120%;
letter-spacing: -0.04em;
}

.pool-tokens {
margin: $inner-spacing-mini 0;
font-size: 18px;
line-height: 150%;
letter-spacing: -0.02em;
}

.pair-logo {
margin-right: $inner-spacing-mini;
}
</style>
56 changes: 41 additions & 15 deletions src/components/ConfirmRemoveLiquidity.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,33 @@
<span class="token-value">{{ formattedToValue }}</span>
</div>
<div class="tokens-info-container">
<div v-if="tokenFrom" class="token">
<token-logo class="token-logo" :token="tokenFrom.symbol" />
{{ tokenFrom.symbol }}
<div v-if="firstToken" class="token">
<token-logo class="token-logo" :token="firstToken.symbol" />
{{ firstToken.symbol }}
</div>
<div v-if="tokenTo" class="token">
<token-logo class="token-logo" :token="tokenTo.symbol" />
{{ tokenTo.symbol }}
<div v-if="secondToken" class="token">
<token-logo class="token-logo" :token="secondToken.symbol" />
{{ secondToken.symbol }}
</div>
</div>
</div>
<p class="transaction-message" v-html="t('removeLiquidity.outputMessage')" />
<s-divider />
<s-row flex justify="space-between">
<div>{{ t('removeLiquidity.price') }}</div>
<div>
<div>1 {{ firstToken.symbol }} = {{ formatNumber(firstToken.price / secondToken.price, 2) }} {{ secondToken.symbol }}</div>
<div>1 {{ secondToken.symbol }} = {{ formatNumber(secondToken.price / firstToken.price, 2) }} {{ firstToken.symbol }}</div>
</div>
<s-row flex justify="space-between" class="price-container">
<div v-if="firstToken && secondToken">
<s-row flex>
<pair-token-logo class="pair-logo" :firstToken="firstToken.symbol" :secondToken="secondToken.symbol" size="mini" />
{{ t('confirmSupply.poolTokensBurned', {first: firstToken.symbol, second: secondToken.symbol}) }}
</s-row>
</div>
<div>{{ formatNumber(removeAmount, 2) }}</div>
</s-row>
<s-row flex justify="space-between" class="price-container">
<div>{{ t('removeLiquidity.price') }}</div>
<div>
<div>1 {{ firstToken.symbol }} = {{ formatNumber(firstToken.price / secondToken.price, 2) }} {{ secondToken.symbol }}</div>
<div>1 {{ secondToken.symbol }} = {{ formatNumber(secondToken.price / firstToken.price, 2) }} {{ firstToken.symbol }}</div>
</div>
</s-row>
<template #footer>
<s-button type="primary" @click="handleConfirmRemoveLiquidity">{{ t('removeLiquidity.confirm') }}</s-button>
Expand All @@ -45,26 +54,35 @@ import DialogBase from '@/components/DialogBase.vue'
import { formatNumber } from '@/utils'
import { lazyComponent } from '@/router'
import { Components } from '@/consts'
const namespace = 'removeLiquidity'

@Component({
components: {
DialogBase,
TokenLogo: lazyComponent(Components.TokenLogo)
TokenLogo: lazyComponent(Components.TokenLogo),
PairTokenLogo: lazyComponent(Components.PairTokenLogo)
}
})
export default class ConfirmSwap extends Mixins(TranslationMixin, DialogMixin) {
@Prop({ default: false, type: Boolean }) readonly visible!: boolean
@Getter('firstToken', { namespace }) firstToken!: any
@Getter('secondToken', { namespace }) secondToken!: any
@Getter('removeAmount', { namespace }) removeAmount!: any
@Getter('firstTokenRemoveAmount', { namespace }) firstTokenRemoveAmount!: any
@Getter('secondTokenRemoveAmount', { namespace }) secondTokenRemoveAmount!: any
formatNumber = formatNumber

get formattedFromValue (): string {
return formatNumber(12, 4)
return formatNumber(this.firstTokenRemoveAmount, 4)
}

get formattedToValue (): string {
return formatNumber(13, 4)
return formatNumber(this.secondTokenRemoveAmount, 4)
}

handleConfirmRemoveLiquidity (): void {
// TODO: Remove Liquidity here
this.$emit('confirm')
this.$emit('close')
}
}
Expand Down Expand Up @@ -107,4 +125,12 @@ export default class ConfirmSwap extends Mixins(TranslationMixin, DialogMixin) {
margin-top: $inner-spacing-mini;
margin-bottom: $inner-spacing-big;
}
.price-container {
line-height: $s-line-height-medium;
color: var(--s-color-base-content-secondary);
margin-bottom: $inner-spacing-mini;
}
.pair-logo {
margin-right: $inner-spacing-mini;
}
</style>
Loading