Skip to content

Commit

Permalink
fix fee calculating for claim modal
Browse files Browse the repository at this point in the history
  • Loading branch information
lukachi committed Feb 14, 2025
1 parent a1132b5 commit 9e5785f
Show file tree
Hide file tree
Showing 12 changed files with 191 additions and 178 deletions.
35 changes: 35 additions & 0 deletions src/common/ChainNetworkBadge.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<template>
<div class="flex items-center gap-2">
<img
class="size-5"
:src="chainDetails?.iconUrls?.[0]"
:alt="chainDetails?.chainName"
/>

<span class="font-bold text-textSecondaryMain typography-body3">
{{ chainDetails?.chainName }}
</span>
</div>
</template>

<script setup lang="ts">
import { config, EthereumChains, getEthereumChainsName } from '@config'
import { computed } from 'vue'
const props = withDefaults(
defineProps<{
chain?: EthereumChains
}>(),
{
chain: EthereumChains.Ethereum,
},
)
const chainDetails = computed(() => {
if (!props.chain) return undefined
return config.chainsMap[getEthereumChainsName(props.chain)]
})
</script>

<style scoped lang="scss"></style>
1 change: 1 addition & 0 deletions src/common/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export { default as InfoIndicator } from './InfoIndicator.vue'
export { default as Pagination } from './Pagination.vue'
export { default as TableSortingHeaderColumn } from './TableSortingHeaderColumn.vue'
export { default as AppGradientBorderCard } from './AppGradientBorderCard.vue'
export { default as ChainNetworkBadge } from './ChainNetworkBadge.vue'

export * from './modals'
export * from './toasts'
Expand Down
20 changes: 15 additions & 5 deletions src/composables/use-second-apollo-client.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const useSecondApolloClient = (
initial?: keyof typeof config.perChainSecondApolloClients,
): {
client: Ref<ApolloClient<NormalizedCacheObject>>
targetNetworkForSelectedClient: Ref<EthereumChains>
clients: Ref<Record<EthereumChains, ApolloClient<NormalizedCacheObject>>>
} => {
const route = useRoute()
Expand All @@ -30,6 +31,9 @@ export const useSecondApolloClient = (
const client = ref<ApolloClient<NormalizedCacheObject>>(
getDefaultSecondApolloClient(networkType.value),
)
const targetNetworkForSelectedClient = ref<EthereumChains>(
initial || currentAllowedChainsForRoute.value[0],
)

const allowedChainsForRouteUnderNetworkType = computed(() =>
currentAllowedChainsForRoute.value.filter(el =>
Expand Down Expand Up @@ -75,16 +79,21 @@ export const useSecondApolloClient = (

if (clientForCurrentChain && isCurrentChainUnderAllowedList) {
client.value = clientForCurrentChain
targetNetworkForSelectedClient.value = provider.value
.chainId as EthereumChains

return
}

const newClient = allowedChainsForRouteUnderNetworkType.value
.map(el => config.perChainSecondApolloClients[el])
.find(el => el !== null)
const targetChainForNewClient =
allowedChainsForRouteUnderNetworkType.value.find(
el => config.perChainSecondApolloClients[el] !== null,
)

if (newClient) {
client.value = newClient
if (targetChainForNewClient) {
client.value =
config.perChainSecondApolloClients[targetChainForNewClient]!
targetNetworkForSelectedClient.value = targetChainForNewClient
}
},
{
Expand All @@ -94,6 +103,7 @@ export const useSecondApolloClient = (

return {
client: client as Ref<ApolloClient<NormalizedCacheObject>>,
targetNetworkForSelectedClient,
clients: clients,
}
}
10 changes: 5 additions & 5 deletions src/localization/resources/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -813,23 +813,21 @@
"address-plh": "Builder address",
"address-note": "This address will be able to edit information about the Subnet",
"website-plh": "Builder Website (optional)",
"website-note": "Add a link to a website or other external location where stakers can access your project, learn more information, etc.",
"website-note": "Link to the Subnet website. Example: “https://…”",
"image-url-plh": "Image URL (optional)",
"image-url-note": "Link to the Subnet image. Example: “https://…”",

"section-2-title": "Stake and Claim",
"start-at-plh": "Stake start timestamp",
"start-at-note": "Example: “01.01.2030 01:00 PM”",
"min-start-time-validation": "should be more than {time}",
"lock-period-after-stake-plh": "Withdraw lock period after the stake",
"lock-period-after-stake-note": "After each stake, the user will not be able to withdraw his deposit this time. It should be longer than 1 day",
"min-lock-period-after-stake": "Should be more than {amount}s",
"min-deposit-plh": "Minimal stake",
"min-deposit-note": "Example: “0.001 MOR”",
"claim-lock-end-plh": "Subnet claim lock end timestamp",
"claim-lock-end-note": "At this point, the claim will open. Example: “05.05.2030 02:00 PM”",

"section-3-title": "Fee",
"section-3-title": "Subnet Emission",
"emissions-fee-plh": "% of the MOR Emissions the Subnet receives",
"emissions-fee-note": "Example: “100%”",
"treasury-fee-plh": "Subnet emission treasury",
Expand All @@ -848,6 +846,8 @@
"cancel-btn": "Cancel",
"submit-btn": "Confirm",

"min-start-time-validation": "should be more than {time}",
"min-lock-period-after-stake": "Should be more than {amount}s",
"min-end-time-validation-err-msg": "Should be more than {time}",
"min-end-time-validation-need-start-time-msg": "Enter start time first"
},
Expand Down Expand Up @@ -880,7 +880,7 @@
"subnet-lbl": "Subnet",
"claim-receiver-lbl": "Claim Receiver",
"amount-lbl": "Amount",
"protocol-fee-lbl": "Protocol fee",
"protocol-fee-lbl": "Protocol emission",
"emissions-lbl": "% of the MOR Emissions \n the Subnet receives",
"final-claim-lbl": "Final Claim",

Expand Down
31 changes: 4 additions & 27 deletions src/pages/Builders/components/BuildersStakeModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,7 @@
</div>

<div class="mt-8 flex flex-col gap-3 bg-backdropModal px-6 py-4">
<div
v-if="chainDetails?.chainName"
class="flex items-center justify-between"
>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="text-textSecondaryMain typography-body3">
{{ $t('builders-stake-modal.power-factor-lbl') }}
Expand Down Expand Up @@ -96,24 +93,11 @@

<div class="my-2 h-[1px] w-full bg-backgroundPrimaryMain opacity-20" />

<div
v-if="chainDetails?.chainName"
class="flex items-center justify-between"
>
<div v-if="chain" class="flex items-center justify-between">
<span class="text-textSecondaryMain typography-body3">
{{ $t('builders-stake-modal.network-lbl') }}
</span>
<div class="flex items-center gap-2">
<img
class="size-5"
:src="chainDetails.iconUrls?.[0]"
:alt="chainDetails?.chainName"
/>

<span class="font-bold text-textSecondaryMain typography-body3">
{{ chainDetails?.chainName }}
</span>
</div>
<chain-network-badge :chain="chain" />
</div>

<div
Expand Down Expand Up @@ -163,7 +147,7 @@
</template>

<script setup lang="ts">
import { AppButton, AppIcon, BasicModal } from '@/common'
import { AppButton, AppIcon, BasicModal, ChainNetworkBadge } from '@/common'
import { InputField, DatetimeField } from '@/fields'
import { useFormValidation, useI18n, useLoad } from '@/composables'
import { storeToRefs, useWeb3ProvidersStore } from '@/store'
Expand All @@ -188,7 +172,6 @@ import {
import { duration, time } from '@distributedlab/tools'
import { DEFAULT_TIME_FORMAT, DOT_TIME_FORMAT } from '@/const'
import { useSecondApolloClient } from '@/composables/use-second-apollo-client'
import { config, getEthereumChainsName } from '@config'
import { helpers } from '@vuelidate/validators'
const props = withDefaults(
Expand Down Expand Up @@ -271,12 +254,6 @@ const currentClaimLockEnd = computed(() => {
)
})
const chainDetails = computed(() => {
if (!props.chain) return undefined
return config.chainsMap[getEthereumChainsName(props.chain)]
})
const isSubmitting = ref(false)
const form = reactive({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,11 @@
>
<div class="max-h-[80dvh] overflow-auto">
<div class="mt-8 flex flex-col gap-3 bg-backdropModal px-6 py-4">
<div
v-if="chainDetails?.chainName"
class="flex items-center justify-between"
>
<div v-if="props.chain" class="flex items-center justify-between">
<span class="text-textSecondaryMain typography-body3">
{{ $t('builders-claim-modal.network-lbl') }}
</span>
<div class="flex items-center gap-2">
<img
class="size-5"
:src="chainDetails.iconUrls?.[0]"
:alt="chainDetails?.chainName"
/>

<span class="font-bold text-textSecondaryMain typography-body3">
{{ chainDetails?.chainName }}
</span>
</div>
<chain-network-badge :chain="chain" />
</div>

<div
Expand Down Expand Up @@ -92,7 +79,7 @@
</template>

<script setup lang="ts">
import { AppButton, BasicModal } from '@/common'
import { AppButton, BasicModal, ChainNetworkBadge } from '@/common'
import { useI18n, useLoad } from '@/composables'
import { storeToRefs, useWeb3ProvidersStore } from '@/store'
import { computed, ref } from 'vue'
Expand All @@ -110,7 +97,6 @@ import {
BuilderSubnetDefaultFragment,
BuilderUserDefaultFragment,
} from '@/types/graphql'
import { config, getEthereumChainsName } from '@config'
import { BN } from '@distributedlab/tools'
const props = withDefaults(
Expand Down Expand Up @@ -162,12 +148,6 @@ const { data: protocolFee } = useLoad(
},
)
const chainDetails = computed(() => {
if (!props.chain) return undefined
return config.chainsMap[getEthereumChainsName(props.chain)]
})
const builderDetails = computed(() => [
{
label: t('builders-claim-modal.subnet-lbl'),
Expand All @@ -183,7 +163,7 @@ const builderDetails = computed(() => [
},
{
label: t('builders-claim-modal.protocol-fee-lbl'),
value: formatAmount(protocolFee.value, 25, {
value: formatAmount(protocolFee.value, 23, {
decimals: 4,
suffix: '%',
}),
Expand All @@ -193,7 +173,7 @@ const builderDetails = computed(() => [
value: formatAmount(
props.builderSubnet.fee,
{
decimals: 25,
decimals: 23,
},
{
decimals: 4,
Expand All @@ -203,8 +183,17 @@ const builderDetails = computed(() => [
},
{
label: t('builders-claim-modal.final-claim-lbl'),
value: `${BN.fromBigInt(props.stakerRewards ?? 0, 18)
.mul(BN.fromBigInt(protocolFee.value, 25))
value: `${BN.fromBigInt(props.stakerRewards ?? 0)
.sub(
BN.fromBigInt(props.stakerRewards ?? 0)
.div(BN.fromRaw(100))
.mul(BN.fromBigInt(protocolFee.value || 0, 23)),
)
.sub(
BN.fromBigInt(props.stakerRewards ?? 0)
.div(BN.fromRaw(100))
.mul(BN.fromBigInt(props.builderSubnet.fee || 0, 23)),
)
.format({
decimals: 4,
})} MOR`,
Expand Down
Loading

0 comments on commit 9e5785f

Please sign in to comment.