Skip to content

Commit

Permalink
open calculator dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
Nikita-Polyakov committed Jul 19, 2022
1 parent 90fe934 commit b50b4a7
Show file tree
Hide file tree
Showing 10 changed files with 213 additions and 72 deletions.
139 changes: 74 additions & 65 deletions public/env.json
Original file line number Diff line number Diff line change
@@ -1,86 +1,95 @@
{
"BASE_API_URL": "",
"API_KEYS": {
"BASE_API_URL": "test.polkaswap.io",
"FAUCET_URL": "https://testfaucet.polkaswap.io/",
"SUBQUERY_ENDPOINT": "https://api.subquery.network/sq/sora-xor/sora-staging",
"API_KEYS": {
"moonpay": "pk_test_4ASGxHKGpLPE6sdQq1V3QjtpUFSpWLk",
"nftStorage": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDBmMzgwOTMyQTNDODM3ZDNiN2JEYzBBNTc0NmNkMDlBRGIyNUZGMzQiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY0MjU4OTQ2ODA4MSwibmFtZSI6Im5mdC1zdG9yYWdlLWRldiJ9.hkvzea9ltcriXXHKoYd3F2Iu1Y8X5H-zunAQboC_3vw",
"etherscan": "YBR7IWEBEXFICT8M7GRV77NBX4AXJ9T53H"
},
"FEATURE_FLAGS": {
"moonpay": true,
"charts": false
},
"FAUCET_URL": "https://faucet.dev.sora2.tachi.soramitsu.co.jp/",
"SUBQUERY_ENDPOINT": "https://api.subquery.network/sq/sora-xor/sora-dev",
"DEFAULT_NETWORKS": [
"etherscan": "UPTTMBUBCE5FIE7XJZYAJ3YZGFE7DA6374"
},
"FEATURE_FLAGS": {
"moonpay": true
},
"DEFAULT_NETWORKS": [
{
"chain": "SORA-dev Testnet",
"name": "SORA",
"address": "wss://ws.framenode-1.s1.dev.sora2.soramitsu.co.jp"
"chain": "SORA-staging Testnet",
"name": "SORA",
"address": "wss://ws.framenode-1.s1.stg1.sora2.soramitsu.co.jp"
},
{
"chain": "SORA-dev Testnet",
"name": "SORA",
"address": "wss://ws.framenode-2.s2.dev.sora2.soramitsu.co.jp"
"chain": "SORA-staging Testnet",
"name": "SORA",
"address": "wss://ws.framenode-2.s1.stg1.sora2.soramitsu.co.jp"
},
{
"chain": "SORA-dev Testnet",
"name": "SORA",
"address": "wss://ws.framenode-3.s3.dev.sora2.soramitsu.co.jp"
"chain": "SORA-staging Testnet",
"name": "SORA",
"address": "wss://ws.framenode-3.s2.stg1.sora2.soramitsu.co.jp"
},
{
"chain": "SORA-dev Testnet",
"name": "SORA",
"address": "wss://ws.framenode-4.s3.dev.sora2.soramitsu.co.jp"
"chain": "SORA-staging Testnet",
"name": "SORA",
"address": "wss://ws.framenode-4.s2.stg1.sora2.soramitsu.co.jp"
},
{
"chain": "SORA-dev Testnet",
"name": "SORA",
"address": "wss://ws.framenode-5.s4.dev.sora2.soramitsu.co.jp"
"chain": "SORA-staging Testnet",
"name": "SORA",
"address": "wss://ws.framenode-5.s3.stg1.sora2.soramitsu.co.jp"
},
{
"chain": "SORA-dev Testnet",
"name": "SORA",
"address": "wss://ws.framenode-6.s4.dev.sora2.soramitsu.co.jp"
"chain": "SORA-staging Testnet",
"name": "SORA",
"address": "wss://ws.framenode-6.s3.stg1.sora2.soramitsu.co.jp"
},
{
"chain": "SORA-staging Testnet",
"name": "SORA",
"address": "wss://ws.framenode-7.s4.stg1.sora2.soramitsu.co.jp"
},
{
"chain": "SORA-staging Testnet",
"name": "SORA",
"address": "wss://ws.framenode-8.s5.stg1.sora2.soramitsu.co.jp"
}
],
"NETWORK_TYPE": "Dev",
"CHAIN_GENESIS_HASH": "",
"SUB_NETWORKS": [
],
"NETWORK_TYPE": "Stage",
"CHAIN_GENESIS_HASH": "0x1a0983c6c9fd3178ae24656bcfca4510a439ab7b90c83e360a1671609752b09a",
"SUB_NETWORKS": [
{
"name": "ethereum",
"id": 0,
"symbol": "ETH",
"currency": "ETH",
"defaultType": "rinkeby",
"CONTRACTS": {
"XOR": {
"MASTER": "0x12c6a709925783f49fcca0b398d13b0d597e6e1c"
},
"VAL": {
"MASTER": "0x47e229aa491763038f6a505b4f85d8eb463f0962"
},
"OTHER": {
"MASTER": "0x24390c8f6cbd5d152c30226f809f4e3f153b88d4"
}
"name": "ethereum",
"id": 0,
"symbol": "ETH",
"currency": "ETH",
"defaultType": "rinkeby",
"CONTRACTS": {
"XOR": {
"MASTER": "0xcceb41100aa2a9a6f144d7c1f876070b810bf7ae"
},
"VAL": {
"MASTER": "0xd7f81ed173cb3af28f983670164df30851fba678"
},
"OTHER": {
"MASTER": "0x077c2ec37d28709ce01ae740209bfbe185bd1eaa"
}
}
},
{
"name": "energy",
"id": 1,
"symbol": "VT",
"currency": "VT",
"defaultType": "private",
"CONTRACTS": {
"XOR": {
"MASTER": ""
},
"VAL": {
"MASTER": ""
},
"OTHER": {
"MASTER": "0x1891b81AE0C5A81Ec84BC4f69322C6a01A3B3095"
}
"name": "energy",
"id": 1,
"symbol": "VT",
"currency": "VT",
"defaultType": "private",
"CONTRACTS": {
"XOR": {
"MASTER": ""
},
"VAL": {
"MASTER": ""
},
"OTHER": {
"MASTER": "0x906111a433731a563Aa0d0FA871FF93f9A3B3035"
}
}
}
]
}
]
}
3 changes: 3 additions & 0 deletions src/assets/img/calculator/signs.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 57 additions & 0 deletions src/modules/demeterFarming/components/CalculatorDialog.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<template>
<dialog-base :visible.sync="isVisible" title="APR Calculator">
<div class="calculator-dialog">
<s-row v-if="poolAsset" flex align="middle">
<pair-token-logo v-if="baseAsset" :first-token="baseAsset" :second-token="poolAsset" class="title-logo" />
<token-logo v-else :token="poolAsset" class="title-logo" />
<span class="calculator-dialog-title">
<template v-if="baseAsset">{{ baseAsset.symbol }}-</template>{{ poolAsset.symbol }}
</span>
</s-row>
</div>
</dialog-base>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator';
import { components, WALLET_CONSTS } from '@soramitsu/soraneo-wallet-web';
import PoolMixin from '../mixins/PoolMixin';
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';
@Component({
components: {
DialogBase,
PairTokenLogo: lazyComponent(Components.PairTokenLogo),
InfoLine: components.InfoLine,
TokenLogo: components.TokenLogo,
FormattedAmount: components.FormattedAmount,
},
})
export default class CalculatorDialog extends Mixins(PoolMixin, TranslationMixin, DialogMixin) {
readonly FontSizeRate = WALLET_CONSTS.FontSizeRate;
}
</script>

<style lang="scss" scoped>
.calculator-dialog {
& > *:not(:last-child) {
margin-top: $inner-spacing-medium;
}
&-title {
font-size: var(--s-heading2-font-size);
font-weight: 800;
}
.title-logo {
margin-right: $inner-spacing-mini;
}
}
</style>
43 changes: 42 additions & 1 deletion src/modules/demeterFarming/components/PoolCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,17 @@
:value="poolAssetBalanceFormatted"
:fiat-value="poolAssetBalanceFiat"
/>
<info-line label="APR" :value="aprFormatted" />
<info-line :value="aprFormatted">
<template #info-line-prefix>
<div class="apr">
<span class="apr-label">APR</span>
<div class="calculator-btn" @click="calculator">
<span>Calculator</span>
<calculator-icon class="calculator-btn-icon" />
</div>
</div>
</template>
</info-line>
<info-line :label="t('demeterFarming.info.totalLiquidityLocked')" :value="tvlFormatted" />
<info-line :label="t('demeterFarming.info.rewardToken')" :value="rewardAssetSymbol" />

Expand Down Expand Up @@ -84,6 +94,7 @@ import { Component, Mixins, Prop } from 'vue-property-decorator';
import { components } from '@soramitsu/soraneo-wallet-web';
import PoolMixin from '../mixins/PoolMixin';
import CalculatorIcon from '@/assets/img/calculator/signs.svg?inline';
import TranslationMixin from '@/components/mixins/TranslationMixin';
Expand All @@ -94,6 +105,7 @@ import { Components, PageNames, Links } from '@/consts';
@Component({
components: {
CalculatorIcon,
PoolInfo: lazyComponent(Components.PoolInfo),
InfoLine: components.InfoLine,
},
Expand Down Expand Up @@ -164,4 +176,33 @@ export default class PoolCard extends Mixins(PoolMixin, TranslationMixin) {
text-decoration: none;
}
}
.apr {
display: flex;
align-items: center;
&-label {
& + .calculator-btn {
margin-left: $inner-spacing-mini;
}
}
}
.calculator-btn {
display: inline-flex;
align-items: center;
color: var(--s-color-theme-accent);
cursor: pointer;
background: var(--s-color-utility-surface);
border-radius: calc(var(--s-border-radius-mini) / 2);
font-size: var(--s-font-size-mini);
font-weight: 400;
line-height: var(--s-line-height-medium);
padding: 2px 8px;
text-transform: uppercase;
&-icon {
margin-left: $inner-spacing-mini / 2;
}
}
</style>
14 changes: 11 additions & 3 deletions src/modules/demeterFarming/components/StakeDialog.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
<template>
<dialog-base :visible.sync="isVisible" :title="title">
<div class="stake-dialog">
<s-row v-if="baseAsset && poolAsset" flex align="middle">
<pair-token-logo :first-token="baseAsset" :second-token="poolAsset" />
<span class="stake-dialog-title">{{ baseAsset.symbol }}-{{ poolAsset.symbol }}</span>
<s-row v-if="poolAsset" flex align="middle">
<pair-token-logo v-if="baseAsset" :first-token="baseAsset" :second-token="poolAsset" class="title-logo" />
<token-logo v-else :token="poolAsset" class="title-logo" />
<span class="stake-dialog-title">
<template v-if="baseAsset">{{ baseAsset.symbol }}-</template>{{ poolAsset.symbol }}
</span>
</s-row>

<div v-if="isAdding" class="stake-dialog-info">
Expand Down Expand Up @@ -165,6 +168,7 @@ import type { DemeterLiquidityParams } from '@/store/demeterFarming/types';
FormattedAmount: components.FormattedAmount,
FormattedAmountWithFiatValue: components.FormattedAmountWithFiatValue,
TokenAddress: components.TokenAddress,
TokenLogo: components.TokenLogo,
},
})
export default class StakeDialog extends Mixins(PoolMixin, TranslationMixin, DialogMixin) {
Expand Down Expand Up @@ -341,6 +345,10 @@ export default class StakeDialog extends Mixins(PoolMixin, TranslationMixin, Dia
font-size: var(--s-heading2-font-size);
font-weight: 800;
}
.title-logo {
margin-right: $inner-spacing-mini;
}
}
</style>

Expand Down
1 change: 1 addition & 0 deletions src/modules/demeterFarming/consts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,5 @@ export enum DemeterComponents {
PoolCard = 'PoolCard',
StakeDialog = 'StakeDialog',
ClaimDialog = 'ClaimDialog',
CalculatorDialog = 'CalculatorDialog',
}
12 changes: 9 additions & 3 deletions src/modules/demeterFarming/mixins/PageMixin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export default class PageMixin extends Mixins(mixins.TransactionMixin) {

showStakeDialog = false;
showClaimDialog = false;
showCalculatorDialog = false;

poolAsset: Nullable<string> = null;
rewardAsset: Nullable<string> = null;
Expand Down Expand Up @@ -85,18 +86,23 @@ export default class PageMixin extends Mixins(mixins.TransactionMixin) {
return !activeCollapseItems.includes(address);
}

changePoolStake(params: { poolAsset: string; rewardAsset: string }, isAddingStake = true) {
changePoolStake(params: { poolAsset: string; rewardAsset: string }, isAddingStake = true): void {
this.isAddingStake = isAddingStake;
this.setDialogParams(params);
this.showStakeDialog = true;
}

claimPoolRewards(params: { poolAsset: string; rewardAsset: string }) {
claimPoolRewards(params: { poolAsset: string; rewardAsset: string }): void {
this.setDialogParams(params);
this.showClaimDialog = true;
}

private setDialogParams({ poolAsset, rewardAsset }: { poolAsset: string; rewardAsset: string }) {
showPoolCalculator(params: { poolAsset: string; rewardAsset: string }): void {
this.setDialogParams(params);
this.showCalculatorDialog = true;
}

private setDialogParams({ poolAsset, rewardAsset }: { poolAsset: string; rewardAsset: string }): void {
this.poolAsset = poolAsset;
this.rewardAsset = rewardAsset;
}
Expand Down
4 changes: 4 additions & 0 deletions src/modules/demeterFarming/mixins/PoolMixin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -223,4 +223,8 @@ export default class PoolMixin extends Mixins(AccountPoolMixin, TranslationMixin
claim(): void {
this.$emit('claim', this.emitParams);
}

calculator(): void {
this.$emit('calculator', this.emitParams);
}
}
Loading

0 comments on commit b50b4a7

Please sign in to comment.