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

Update AddLiquidity view #757

Merged
merged 2 commits into from
Jul 28, 2022
Merged

Update AddLiquidity view #757

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cc8de7f
remove CreatePair view
Nikita-Polyakov Jul 27, 2022
8afcae9
Merge branch 'develop' into feature/pw-754
Nikita-Polyakov Jul 28, 2022
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
21 changes: 2 additions & 19 deletions src/components/TransactionDetails/AddLiquidityTransactionDetails.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,6 @@
<template>
<transaction-details :info-only="infoOnly" class="info-line-container">
<div
v-if="areTokensSelected && isAvailable && !isNotFirstLiquidityProvider && emptyAssets"
class="info-line-container"
>
<p class="info-line-container__title">{{ t('createPair.firstLiquidityProvider') }}</p>
<info-line>
<template #info-line-prefix>
<p class="info-line--first-liquidity" v-html="t('createPair.firstLiquidityProviderInfo')" />
</template>
</info-line>
</div>

<div v-if="areTokensSelected && isAvailable && !emptyAssets" class="info-line-container">
<div v-if="!emptyAssets" class="info-line-container">
<p class="info-line-container__title">{{ t('createPair.pricePool') }}</p>
<info-line
:label="t('addLiquidity.firstPerSecond', { first: firstTokenSymbol, second: secondTokenSymbol })"
Expand Down Expand Up @@ -60,17 +48,13 @@ import { components } from '@soramitsu/soraneo-wallet-web';
import { FPNumber, CodecString } from '@sora-substrate/util';
import type { AccountLiquidity } from '@sora-substrate/util/build/poolXyk/types';

import BaseTokenPairMixinInstance, { TokenPairNamespace } from '../mixins/BaseTokenPairMixin';
import BaseTokenPairMixin from '../mixins/BaseTokenPairMixin';
import TranslationMixin from '../mixins/TranslationMixin';

import { lazyComponent } from '@/router';
import { Components } from '@/consts';
import { getter } from '@/store/decorators';

const namespace = TokenPairNamespace.AddLiquidity;

const BaseTokenPairMixin = BaseTokenPairMixinInstance(namespace);

@Component({
components: {
InfoLine: components.InfoLine,
Expand All @@ -79,7 +63,6 @@ const BaseTokenPairMixin = BaseTokenPairMixinInstance(namespace);
})
export default class AddLiquidityTransactionDetails extends Mixins(TranslationMixin, BaseTokenPairMixin) {
@getter.addLiquidity.liquidityInfo private liquidityInfo!: Nullable<AccountLiquidity>;
@getter.addLiquidity.isNotFirstLiquidityProvider isNotFirstLiquidityProvider!: boolean;
@getter.addLiquidity.shareOfPool shareOfPool!: string;

@Prop({ default: true, type: Boolean }) readonly infoOnly!: boolean;
Expand Down
94 changes: 0 additions & 94 deletions src/components/TransactionDetails/CreatePairTransactionDetails.vue
View file
Open in desktop

This file was deleted.

105 changes: 40 additions & 65 deletions src/components/mixins/BaseTokenPairMixin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,77 +6,52 @@ import type { AccountAsset } from '@sora-substrate/util/build/assets/types';

import { state, getter } from '@/store/decorators';

export enum TokenPairNamespace {
AddLiquidity = 'addLiquidity',
CreatePair = 'createPair',
}

const BaseTokenPairMixinInstance = (namespace: TokenPairNamespace) => {
const namespacedState = state[namespace];
const namespacedGetter = getter[namespace];
@Component
class BaseTokenPairMixin extends Mixins(mixins.TranslationMixin, mixins.FormattedAmountMixin) {
readonly XOR_SYMBOL = XOR.symbol;

@state.prices.price price!: string;
@state.prices.priceReversed priceReversed!: string;
@state.wallet.settings.networkFees networkFees!: NetworkFeesObject;
@namespacedState.firstTokenValue firstTokenValue!: string;
@namespacedState.secondTokenValue secondTokenValue!: string;
@namespacedState.isAvailable isAvailable!: boolean;

@namespacedGetter.firstToken firstToken!: Nullable<AccountAsset>;
@namespacedGetter.secondToken secondToken!: Nullable<AccountAsset>;

get firstTokenSymbol(): string {
return this.firstToken?.symbol ?? '';
}

get secondTokenSymbol(): string {
return this.secondToken?.symbol ?? '';
}
@Component
export default class BaseTokenPairMixin extends Mixins(mixins.TranslationMixin, mixins.FormattedAmountMixin) {
readonly XOR_SYMBOL = XOR.symbol;

@state.prices.price price!: string;
@state.prices.priceReversed priceReversed!: string;
@state.wallet.settings.networkFees networkFees!: NetworkFeesObject;
@state.addLiquidity.firstTokenValue firstTokenValue!: string;
@state.addLiquidity.secondTokenValue secondTokenValue!: string;
@state.addLiquidity.isAvailable isAvailable!: boolean;

@getter.addLiquidity.firstToken firstToken!: Nullable<AccountAsset>;
@getter.addLiquidity.secondToken secondToken!: Nullable<AccountAsset>;

get firstTokenSymbol(): string {
return this.firstToken?.symbol ?? '';
}

get networkFee(): CodecString {
return this.networkFees[Operation[namespace.charAt(0).toUpperCase() + namespace.slice(1)]];
}
get secondTokenSymbol(): string {
return this.secondToken?.symbol ?? '';
}

get formattedFee(): string {
return this.formatCodecNumber(this.networkFee);
}
get networkFee(): CodecString {
const operation = this.isAvailable ? Operation.AddLiquidity : Operation.CreatePair;

get formattedPrice(): string {
return this.formatStringValue(this.price);
}

get formattedPriceReversed(): string {
return this.formatStringValue(this.priceReversed);
}
return this.networkFees[operation];
}

get fiatFirstAmount(): Nullable<string> {
if (!this.firstToken) return null;
return this.getFiatAmount(this.firstTokenValue, this.firstToken);
}
get formattedFee(): string {
return this.formatCodecNumber(this.networkFee);
}

get fiatSecondAmount(): Nullable<string> {
if (!this.secondToken) return null;
return this.getFiatAmount(this.secondTokenValue, this.secondToken);
}
get formattedPrice(): string {
return this.formatStringValue(this.price);
}

get emptyAssets(): boolean {
if (!(this.firstTokenValue || this.secondTokenValue)) {
return true;
}
const first = new FPNumber(this.firstTokenValue);
const second = new FPNumber(this.secondTokenValue);
return first.isNaN() || first.isZero() || second.isNaN() || second.isZero();
}
get formattedPriceReversed(): string {
return this.formatStringValue(this.priceReversed);
}

get areTokensSelected(): boolean {
return !!(this.firstToken && this.secondToken);
get emptyAssets(): boolean {
if (!(this.firstTokenValue || this.secondTokenValue)) {
return true;
}
const first = new FPNumber(this.firstTokenValue);
const second = new FPNumber(this.secondTokenValue);
return first.isNaN() || first.isZero() || second.isNaN() || second.isZero();
}

return BaseTokenPairMixin;
};

export default BaseTokenPairMixinInstance;
}
Loading