added group status

MorpheusAIs · Jun 10, 2024 · c577499 · c577499
1 parent 54e5468
commit c577499
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 18 deletions.
diff --git a/src/forms/ContractCreationForm/components/EthereumStep/components/GroupBuilder.vue b/src/forms/ContractCreationForm/components/EthereumStep/components/GroupBuilder.vue
@@ -6,13 +6,6 @@
       :disabled="disabled"
     />
     <div class="group-builder__fields">
-      <input-field
-        v-model="group.name"
-        :placeholder="$t(`${I18N_KEY_PREFIX}.name-placeholder`)"
-        :error-message="groupValidation.getFieldErrorMessage('name')"
-        :disabled="disabled"
-        @blur="groupValidation.touchField('name')"
-      />
       <datetime-field
         v-model="group.payoutStartAt"
         :placeholder="$t(`${I18N_KEY_PREFIX}.payout-start-placeholder`)"
@@ -105,7 +98,6 @@ const I18N_KEY_PREFIX = 'contract-creation-form.ethereum-step.group-builder'
 
 const DEFAULT_PRESET: Readonly<EthereumConfigGroup> = Object.freeze({
   isPublic: true,
-  name: '',
   payoutStartAt: '',
   decreaseInterval: '',
   withdrawLockPeriod: '',
@@ -138,7 +130,6 @@ const group = reactive<EthereumConfigGroup>({
 const groupValidation = useFormValidation(
   group,
   computed(() => ({
-    name: { required },
     payoutStartAt: { required, minValue: minValue(new Time().timestamp) },
     decreaseInterval: { required, integer },
     claimLockPeriod: { required, numeric },

diff --git a/src/forms/ContractCreationForm/components/EthereumStep/components/GroupInfoCard.vue b/src/forms/ContractCreationForm/components/EthereumStep/components/GroupInfoCard.vue
@@ -1,8 +1,11 @@
 <template>
   <div class="group-info-card">
-    <div class="group-info-card__name-wrp">
-      <h5 class="group-info-card__name">
-        {{ group.name }}
+    <div class="group-info-card__status-wrp">
+      <h5
+        class="group-info-card__status"
+        :class="[`group-info-card__status--${status}`]"
+      >
+        {{ $t(`${I18N_KEY_PREFIX}.status.${status}`) }}
       </h5>
       <div class="group-info-card__controllers">
         <button
@@ -88,6 +91,10 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 
+const status = computed<string>(() =>
+  props.group.isPublic ? 'public' : 'private',
+)
+
 const indicators = computed<Indicator[]>(() =>
   props.group.isPublic
     ? [
@@ -165,16 +172,27 @@ const indicators = computed<Indicator[]>(() =>
   );
 }
 
-.group-info-card__name-wrp {
+.group-info-card__status-wrp {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.group-info-card__name {
-  color: var(--primary-main);
+.group-info-card__status {
+  background: #515c57;
+  padding: toRem(2) toRem(18);
 
-  @include body-2-semi-bold;
+  &--public {
+    color: var(--primary-main);
+  }
+
+  &--private {
+    $color: #ffa011;
+
+    color: $color;
+  }
+
+  @include body-3-regular;
 }
 
 .group-info-card__controllers {

diff --git a/src/forms/ContractCreationForm/types.ts b/src/forms/ContractCreationForm/types.ts
@@ -22,7 +22,6 @@ export type ArbitrumConfig = {
 
 export type EthereumConfigGroup = {
   isPublic: boolean
-  name: string
   payoutStartAt: string
   decreaseInterval: string
   withdrawLockPeriod: string

diff --git a/src/localization/resources/en.json b/src/localization/resources/en.json
@@ -51,7 +51,6 @@
       "group-instruction": "Add the new distribution group to your protocol.",
       "group-builder": {
         "is-public-label": "Is Public",
-        "name-placeholder": "Group name",
         "payout-start-placeholder": "Payout start",
         "decrease-interval-placeholder": "Decrease interval (in seconds)",
         "withdraw-lock-period-placeholder": "Withdraw lock period (in hours)",
@@ -63,6 +62,10 @@
         "build-btn": "Save group"
       },
       "group-info-card": {
+        "status": {
+          "public": "Public",
+          "private": "Private"
+        },
         "payout-start-title": "Payout start",
         "decrease-interval-title": "Decrease Interval",
         "withdraw-lock-period-title": "Withdraw Locked Until",