From 29720a366637bc2c021f8afa7d9698ce64ffecfc Mon Sep 17 00:00:00 2001
From: lukachi <lukachisama@gmail.com>
Date: Tue, 11 Feb 2025 13:27:56 +0200
Subject: [PATCH] add network details for stake form modal

---
 src/localization/resources/en.json            |   2 +
 .../Builders/components/BuilderFormModal.vue  | 334 ------------------
 .../components/BuildersStakeModal.vue         |  34 +-
 .../Builders/pages/BuildersItem/index.vue     |   1 +
 4 files changed, 34 insertions(+), 337 deletions(-)
 delete mode 100644 src/pages/Builders/components/BuilderFormModal.vue

diff --git a/src/localization/resources/en.json b/src/localization/resources/en.json
index 70cf2d04..ffd205d1 100644
--- a/src/localization/resources/en.json
+++ b/src/localization/resources/en.json
@@ -852,6 +852,8 @@
   "builders-stake-modal": {
     "modal-title": "Stake MOR",
     "available-to-stake-balance-value": "{amount} MOR",
+
+    "network-lbl": "Network",
     "builder-lbl": "Builder",
     "min-deposit-lbl": "Min Deposit",
     "lock-period-lbl": "Lock Period",
diff --git a/src/pages/Builders/components/BuilderFormModal.vue b/src/pages/Builders/components/BuilderFormModal.vue
deleted file mode 100644
index 6dfdb68c..00000000
--- a/src/pages/Builders/components/BuilderFormModal.vue
+++ /dev/null
@@ -1,334 +0,0 @@
-<template>
-  <basic-modal
-    class="builder-form-modal"
-    :is-shown="isShown"
-    @update:is-shown="emit('update:is-shown', $event)"
-    :title="
-      buildersProject
-        ? $t('builder-form-modal.update-title', {
-            name: buildersProject.name,
-          })
-        : $t('builder-form-modal.create-title')
-    "
-    :is-close-by-click-outside="!isSubmitting"
-    :has-close-button="!isSubmitting"
-  >
-    <form
-      @submit.prevent="submit"
-      :class="
-        cn(
-          'max-h-[80dvh] overflow-auto px-10',
-          `[&::-webkit-scrollbar-thumb]:rounded-full
-        [&::-webkit-scrollbar-thumb]:bg-gray-300
-        dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500
-          [&::-webkit-scrollbar-track]:rounded-full
-        [&::-webkit-scrollbar-track]:bg-gray-100
-        dark:[&::-webkit-scrollbar-track]:bg-neutral-700
-          [&::-webkit-scrollbar]:w-2`,
-        )
-      "
-    >
-      <div class="mt-8 flex flex-col gap-5">
-        <input-field
-          v-model="form.name"
-          :placeholder="$t('builder-form-modal.name-plh')"
-          :note="$t('builder-form-modal.name-note')"
-          :error-message="getFieldErrorMessage('name')"
-          @blur="touchField('name')"
-          :disabled="isSubmitting || !!buildersProject"
-        />
-
-        <input-field
-          v-model="form.slug"
-          :placeholder="$t('builder-form-modal.slug-plh')"
-          :note="$t('builder-form-modal.slug-note')"
-          :error-message="getFieldErrorMessage('slug')"
-          @blur="touchField('slug')"
-          :disabled="isSubmitting || !!buildersProject"
-        />
-
-        <input-field
-          v-model="form.stakingReward"
-          :placeholder="$t('builder-form-modal.staking-reward-plh')"
-          :note="$t('builder-form-modal.staking-reward-note')"
-          :error-message="getFieldErrorMessage('stakingReward')"
-          @blur="touchField('staking-reward')"
-          :disabled="isSubmitting || !!buildersProject"
-        />
-
-        <input-field
-          v-model="form.website"
-          :placeholder="$t('builder-form-modal.website-plh')"
-          :note="$t('builder-form-modal.website-note')"
-          :error-message="getFieldErrorMessage('website')"
-          @blur="touchField('website')"
-          :disabled="isSubmitting || !!buildersProject"
-        />
-
-        <textarea-field
-          v-model="form.description"
-          :placeholder="$t('builder-form-modal.description-plh')"
-          :note="$t('builder-form-modal.description-note')"
-          :error-message="getFieldErrorMessage('description')"
-          @blur="touchField('description')"
-          :disabled="isSubmitting || !!buildersProject"
-        />
-
-        <file-field
-          v-model="form.logo"
-          :placeholder="$t('builder-form-modal.logo-plh')"
-          :note="$t('builder-form-modal.logo-note')"
-          :error-message="getFieldErrorMessage('logo')"
-          @blur="touchField('logo')"
-          :disabled="isSubmitting || !!buildersProject"
-        />
-
-        <input-field
-          v-model="form.depositAmount"
-          :placeholder="$t('builder-form-modal.min-deposit-plh')"
-          :note="$t('builder-form-modal.min-deposit-note')"
-          :error-message="getFieldErrorMessage('depositAmount')"
-          @blur="touchField('depositAmount')"
-          :disabled="isSubmitting"
-        />
-        <input-field
-          v-model="form.lockPeriodAfterStake"
-          :placeholder="$t('builder-form-modal.lock-period-after-stake-plh')"
-          :note="$t('builder-form-modal.lock-period-after-stake-note')"
-          :error-message="getFieldErrorMessage('lockPeriodAfterStake')"
-          @blur="touchField('lockPeriodAfterStake')"
-          :disabled="isSubmitting"
-          type="number"
-        />
-        <datetime-field
-          v-model="form.startAt"
-          :placeholder="$t('builder-form-modal.start-at-plh')"
-          :note="$t('builder-form-modal.start-at-note')"
-          :error-message="getFieldErrorMessage('startAt')"
-          @blur="touchField('startAt')"
-          :disabled="isSubmitting"
-        />
-        <datetime-field
-          v-model="form.claimLockEndTime"
-          :placeholder="$t('builder-form-modal.claim-lock-end-plh')"
-          :note="$t('builder-form-modal.claim-lock-end-note')"
-          :error-message="getFieldErrorMessage('claimLockEndTime')"
-          @blur="touchField('claimLockEndTime')"
-          :disabled="isSubmitting"
-        />
-      </div>
-
-      <div class="mt-10 flex items-center justify-center gap-4">
-        <app-button
-          scheme="filled"
-          color="secondary"
-          @click="emit('update:is-shown', false)"
-          :disabled="isSubmitting"
-        >
-          {{ $t('builder-form-modal.cancel-btn') }}
-        </app-button>
-        <app-button type="submit" :disabled="!isFieldsValid || isSubmitting">
-          {{ $t('builder-form-modal.submit-btn') }}
-        </app-button>
-      </div>
-    </form>
-  </basic-modal>
-</template>
-
-<script setup lang="ts">
-import { AppButton, BasicModal } from '@/common'
-import { InputField, DatetimeField, TextareaField, FileField } from '@/fields'
-import { storeToRefs, useWeb3ProvidersStore } from '@/store'
-import {
-  bus,
-  BUS_EVENTS,
-  ErrorHandler,
-  getEthExplorerTxUrl,
-  sleep,
-} from '@/helpers'
-import { computed, reactive, ref } from 'vue'
-import { useFormValidation, useI18n, useLoad } from '@/composables'
-import { minValue, required } from '@/validators'
-import { GetBuildersProjectQuery } from '@/types/graphql'
-import { formatEther, parseUnits } from '@/utils'
-import { helpers } from '@vuelidate/validators'
-import { time } from '@distributedlab/tools'
-import { DOT_TIME_FORMAT } from '@/const'
-import { cn } from '@/theme/utils'
-
-const props = withDefaults(
-  defineProps<{
-    isShown?: boolean
-    buildersProject?: GetBuildersProjectQuery['buildersProject']
-  }>(),
-  {
-    isShown: true,
-    buildersProject: null,
-  },
-)
-
-const emit = defineEmits<{
-  (e: 'update:is-shown', v: boolean): void
-  (e: 'submitted', poolId: string): void
-}>()
-
-const { t } = useI18n()
-
-const { provider, buildersContract, buildersContractDetails } = storeToRefs(
-  useWeb3ProvidersStore(),
-)
-
-const { data: minimalWithdrawLockPeriod } = useLoad(
-  0,
-  async () => {
-    return (
-      await buildersContract.value.providerBased.value.minimalWithdrawLockPeriod()
-    ).toNumber()
-  },
-  {},
-)
-
-const isSubmitting = ref(false)
-
-const form = reactive<{
-  name: string
-
-  slug: string
-  stakingReward: string
-  website: string
-  description: string
-  logo: File | undefined
-
-  depositAmount: string
-  lockPeriodAfterStake: string
-  startAt: string
-  claimLockEndTime: string
-}>({
-  name: props.buildersProject?.name ?? '',
-
-  slug: '',
-  stakingReward: '',
-  website: '',
-  description: '',
-  logo: undefined,
-
-  depositAmount: formatEther(props.buildersProject?.minimalDeposit ?? 0),
-  lockPeriodAfterStake:
-    props.buildersProject?.withdrawLockPeriodAfterDeposit ?? '',
-  startAt: props.buildersProject?.startsAt ?? '',
-  claimLockEndTime: +props.buildersProject?.claimLockEnd
-    ? props.buildersProject?.claimLockEnd
-    : '',
-})
-
-const { getFieldErrorMessage, isFieldsValid, isFormValid, touchField } =
-  useFormValidation(
-    form,
-    computed(() => ({
-      name: { required },
-
-      slug: { required },
-      stakingReward: { required },
-      website: { required },
-      description: { required },
-      logo: { required },
-
-      depositAmount: { required },
-      lockPeriodAfterStake: {
-        required,
-        minValue: minValue(minimalWithdrawLockPeriod.value),
-      },
-      startAt: { required },
-      claimLockEndTime: {
-        required,
-        minValue: helpers.withMessage(
-          form.startAt
-            ? t('builder-form-modal.min-end-time-validation-err-msg', {
-                time: time(+form.startAt).format(DOT_TIME_FORMAT),
-              })
-            : t(
-                'builder-form-modal.min-end-time-validation-need-start-time-msg',
-              ),
-          minValue(Number(form.startAt)),
-        ),
-      },
-    })),
-  )
-
-const clearForm = () => {
-  form.name = ''
-  form.depositAmount = ''
-  form.lockPeriodAfterStake = ''
-  form.startAt = ''
-  form.claimLockEndTime = ''
-}
-
-const submit = async () => {
-  if (!isFormValid()) return
-
-  isSubmitting.value = true
-
-  try {
-    if (
-      provider.value.chainId !== buildersContractDetails.value.targetChainId
-    ) {
-      provider.value.selectChain(buildersContractDetails.value.targetChainId)
-      await sleep(1_000)
-    }
-
-    const tx = props.buildersProject
-      ? await buildersContract.value?.signerBased.value.editBuilderPool({
-          name: form.name,
-          admin: provider.value.selectedAddress,
-          poolStart: +form.startAt,
-          withdrawLockPeriodAfterDeposit: +form.lockPeriodAfterStake,
-          claimLockEnd: +form.claimLockEndTime,
-          minimalDeposit: parseUnits(form.depositAmount),
-        })
-      : await buildersContract.value?.signerBased.value.createBuilderPool({
-          name: form.name,
-          admin: provider.value.selectedAddress,
-          poolStart: +form.startAt,
-          withdrawLockPeriodAfterDeposit: +form.lockPeriodAfterStake,
-          claimLockEnd: +form.claimLockEndTime,
-          minimalDeposit: parseUnits(form.depositAmount),
-        })
-
-    const txReceipt = await tx.wait()
-
-    if (!txReceipt) throw new TypeError('Transaction is not defined')
-
-    const explorerTxUrl = getEthExplorerTxUrl(
-      buildersContractDetails.value.explorerUrl,
-      txReceipt.transactionHash,
-    )
-
-    const poolId = await buildersContract.value?.signerBased.value.getPoolId(
-      form.name,
-    )
-
-    await sleep(2000)
-
-    bus.emit(
-      BUS_EVENTS.success,
-      t('builder-form-modal.confirm-success-msg', { explorerTxUrl }),
-    )
-
-    emit('submitted', poolId)
-    clearForm()
-  } catch (error) {
-    ErrorHandler.process(error)
-  }
-
-  isSubmitting.value = false
-}
-</script>
-
-<style lang="scss">
-.builder-form-modal {
-  .basic-modal__pane {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-</style>
diff --git a/src/pages/Builders/components/BuildersStakeModal.vue b/src/pages/Builders/components/BuildersStakeModal.vue
index 8be5d942..8925f520 100644
--- a/src/pages/Builders/components/BuildersStakeModal.vue
+++ b/src/pages/Builders/components/BuildersStakeModal.vue
@@ -43,7 +43,29 @@
         </div>
       </div>
 
-      <div class="mt-8 flex flex-col gap-3 bg-backdropModal px-6 py-4">
+      <div
+        v-if="chainDetails?.chainName"
+        class="mt-8 flex flex-col gap-3 bg-backdropModal px-6 py-4"
+      >
+        <div 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>
+        </div>
+
+        <div class="my-2 h-[1px] w-full bg-backgroundPrimaryMain opacity-20" />
+
         <div
           class="flex items-center justify-between"
           v-for="(el, i) in builderDetails.slice(0, 3)"
@@ -115,13 +137,13 @@ import {
 import { duration, time } from '@distributedlab/tools'
 import { DEFAULT_TIME_FORMAT } from '@/const'
 import { useSecondApolloClient } from '@/composables/use-second-apollo-client'
-import { EthereumChains } from '@config'
+import { config, getEthereumChainsName } from '@config'
 
 const props = withDefaults(
   defineProps<{
     builderProject: GetBuildersProjectQuery['buildersProject']
     isShown?: boolean
-    chain?: EthereumChains
+    chain?: string
   }>(),
   {
     isShown: true,
@@ -174,6 +196,12 @@ const { data: buildersProjectUserAccount } = useLoad<
   },
 )
 
+const chainDetails = computed(() => {
+  if (!props.chain) return undefined
+
+  return config.chainsMap[getEthereumChainsName(props.chain)]
+})
+
 const isSubmitting = ref(false)
 
 const form = reactive({
diff --git a/src/pages/Builders/pages/BuildersItem/index.vue b/src/pages/Builders/pages/BuildersItem/index.vue
index ac79a098..22fb7e38 100644
--- a/src/pages/Builders/pages/BuildersItem/index.vue
+++ b/src/pages/Builders/pages/BuildersItem/index.vue
@@ -424,6 +424,7 @@
     v-model:is-shown="isStakeModalShown"
     v-if="buildersData.buildersProject"
     :builder-project="buildersData.buildersProject"
+    :chain="provider.chainId"
     @staked="handleStaked"
   />
 </template>