-
Notifications
You must be signed in to change notification settings - Fork 90
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* merge b50b4a7 * refactoring AddLiquidity input fields * update StakeDialog * pass balance to TokenInput * merge 07bcac7 * update Swap * update ReferralBonding * merge f50f6ce * merge c55e6eb * add demeter copyright * fix ts erros * update translations * add TranslationConsts * add ~ sign to rewards
- Loading branch information
1 parent
202ea67
commit 7f02bad
Showing
41 changed files
with
841 additions
and
726 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,174 @@ | ||
| <template> | ||
| <s-float-input | ||
| class="s-input--token-value" | ||
| size="medium" | ||
| has-locale-string | ||
| v-bind="{ | ||
| decimals, | ||
| delimiters, | ||
| max, | ||
| value, | ||
| ...$attrs, | ||
| }" | ||
| v-on="$listeners" | ||
| > | ||
| <div slot="top" class="input-line"> | ||
| <div class="input-title"> | ||
| <span class="input-title--uppercase input-title--primary">{{ title }}</span> | ||
| <slot name="title-append" /> | ||
| </div> | ||
| <div class="input-value"> | ||
| <slot name="balance"> | ||
| <template v-if="token"> | ||
| <span class="input-value--uppercase">{{ t('balanceText') }}</span> | ||
| <formatted-amount-with-fiat-value | ||
| value-can-be-hidden | ||
| with-left-shift | ||
| value-class="input-value--primary" | ||
| :value="formattedBalance" | ||
| :fiat-value="formattedFiatBalance" | ||
| /> | ||
| </template> | ||
| </slot> | ||
| </div> | ||
| </div> | ||
| <div slot="right" class="s-flex el-buttons"> | ||
| <s-button | ||
| v-if="isMaxAvailable" | ||
| class="el-button--max s-typography-button--small" | ||
| type="primary" | ||
| alternative | ||
| size="mini" | ||
| border-radius="mini" | ||
| @click.stop="handleMax" | ||
| > | ||
| {{ t('buttons.max') }} | ||
| </s-button> | ||
| <token-select-button | ||
| class="el-button--select-token" | ||
| :icon="selectTokenIcon" | ||
| :token="token" | ||
| @click.stop="handleSelectToken" | ||
| /> | ||
| </div> | ||
| <div slot="bottom" class="input-line input-line--footer"> | ||
| <div class="s-flex"> | ||
| <formatted-amount v-if="tokenPrice" is-fiat-value :value="fiatAmount" /> | ||
| <slot name="fiat-amount-append" /> | ||
| </div> | ||
|
|
||
| <token-address | ||
| v-if="token" | ||
| :name="token.name" | ||
| :symbol="token.symbol" | ||
| :address="token.address" | ||
| class="input-value" | ||
| /> | ||
| </div> | ||
| </s-float-input> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { Component, Mixins, ModelSync, Prop } from 'vue-property-decorator'; | ||
| import { components, mixins } from '@soramitsu/soraneo-wallet-web'; | ||
| import { FPNumber } from '@sora-substrate/util'; | ||
| import TranslationMixin from '@/components/mixins/TranslationMixin'; | ||
| import { lazyComponent } from '@/router'; | ||
| import { Components, ZeroStringValue } from '@/consts'; | ||
| import type { CodecString } from '@sora-substrate/util'; | ||
| import type { AccountAsset } from '@sora-substrate/util/build/assets/types'; | ||
| @Component({ | ||
| components: { | ||
| TokenSelectButton: lazyComponent(Components.TokenSelectButton), | ||
| FormattedAmount: components.FormattedAmount, | ||
| FormattedAmountWithFiatValue: components.FormattedAmountWithFiatValue, | ||
| TokenAddress: components.TokenAddress, | ||
| }, | ||
| }) | ||
| export default class TokenInput extends Mixins( | ||
| mixins.NumberFormatterMixin, | ||
| mixins.FormattedAmountMixin, | ||
| TranslationMixin | ||
| ) { | ||
| @Prop({ default: () => null, type: Object }) readonly token!: Nullable<AccountAsset>; | ||
| @Prop({ default: () => null, type: String }) readonly balance!: Nullable<CodecString>; | ||
| @Prop({ default: '', type: String }) readonly title!: string; | ||
| @Prop({ default: false, type: Boolean }) readonly isMaxAvailable!: boolean; | ||
| @Prop({ default: false, type: Boolean }) readonly isSelectAvailable!: boolean; | ||
| @ModelSync('value', 'input', { type: String }) | ||
| readonly amount!: string; | ||
| readonly delimiters = FPNumber.DELIMITERS_CONFIG; | ||
| get address(): string { | ||
| return this.token?.address ?? ''; | ||
| } | ||
| get decimals(): number { | ||
| return this.token?.decimals ?? FPNumber.DEFAULT_PRECISION; | ||
| } | ||
| get max(): string { | ||
| return this.getMax(this.address); | ||
| } | ||
| get selectTokenIcon(): Nullable<string> { | ||
| return this.isSelectAvailable ? 'chevron-down-rounded-16' : undefined; | ||
| } | ||
| get fpBalance(): FPNumber { | ||
| if (!this.token || !this.balance) return FPNumber.ZERO; | ||
| return FPNumber.fromCodecValue(this.balance, this.decimals); | ||
| } | ||
| get formattedBalance(): string { | ||
| return this.fpBalance.toLocaleString(); | ||
| } | ||
| get formattedFiatBalance(): string { | ||
| if (!this.token || !this.balance) return ZeroStringValue; | ||
| const fpTokenPrice = FPNumber.fromCodecValue(this.tokenPrice ?? 0, this.decimals); | ||
| return this.fpBalance.mul(fpTokenPrice).toLocaleString(); | ||
| } | ||
| get tokenPrice(): Nullable<CodecString> { | ||
| if (!this.token) return null; | ||
| return this.getAssetFiatPrice(this.token); | ||
| } | ||
| get fiatAmount(): Nullable<string> { | ||
| if (!this.token) return null; | ||
| return this.getFiatAmount(this.amount, this.token); | ||
| } | ||
| handleMax(): void { | ||
| this.$emit('max', this.token); | ||
| } | ||
| handleSelectToken(): void { | ||
| this.$emit('select'); | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss"> | ||
| .s-input--token-value .el-input .el-input__inner { | ||
| @include text-ellipsis; | ||
| } | ||
| </style> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .s-input--token-value { | ||
| @include buttons; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.