From b26ff3a7982998a3b17f0aeb81830d12b39c7e75 Mon Sep 17 00:00:00 2001
From: Yehor Podporinov <yehor.podporinov@Yehors-MacBook-Pro.local>
Date: Wed, 5 Jun 2024 18:06:37 +0300
Subject: [PATCH] fixes for contract-creation-form

---
 .../components/ArbitrumStep.vue               | 13 +++++++
 .../EthereumStep/components/GroupBuilder.vue  |  6 ++--
 .../components/EthereumStep/index.vue         | 30 +++-------------
 .../components/GeneralStep.vue                |  6 +---
 src/forms/ContractCreationForm/index.vue      |  4 ---
 src/forms/ContractCreationForm/types.ts       |  2 --
 src/localization/resources/en.json            | 36 +++++++++----------
 7 files changed, 38 insertions(+), 59 deletions(-)

diff --git a/src/forms/ContractCreationForm/components/ArbitrumStep.vue b/src/forms/ContractCreationForm/components/ArbitrumStep.vue
index 739b3982..fcb4340f 100644
--- a/src/forms/ContractCreationForm/components/ArbitrumStep.vue
+++ b/src/forms/ContractCreationForm/components/ArbitrumStep.vue
@@ -51,6 +51,15 @@
       <h5 class="arbitrum-step__settings-title">
         {{ $t(`${I18N_KEY_PREFIX}.settings.title`) }}
       </h5>
+      <p class="general-step__settings-description">
+        {{
+          $t(`${I18N_KEY_PREFIX}.settings.description`, {
+            token:
+              form.arbitrumConfig.tokenSymbol ||
+              $t(`${I18N_KEY_PREFIX}.settings.default-token`),
+          })
+        }}
+      </p>
       <div class="arbitrum-step__settings-fields">
         <input-field
           :model-value="form.arbitrumConfig.settings.tokenInAddress"
@@ -195,6 +204,10 @@ const emitSettingsField = (
   @include body-2-semi-bold;
 }
 
+.general-step__settings-description {
+  margin-top: toRem(8);
+}
+
 .arbitrum-step__settings-fields {
   margin-top: toRem(20);
   display: grid;
diff --git a/src/forms/ContractCreationForm/components/EthereumStep/components/GroupBuilder.vue b/src/forms/ContractCreationForm/components/EthereumStep/components/GroupBuilder.vue
index 11b0d57f..b014c136 100644
--- a/src/forms/ContractCreationForm/components/EthereumStep/components/GroupBuilder.vue
+++ b/src/forms/ContractCreationForm/components/EthereumStep/components/GroupBuilder.vue
@@ -173,13 +173,13 @@ watch(
 
 <style lang="scss" scoped>
 .group-builder__fields {
-  margin-top: toRem(32);
+  margin-top: toRem(16);
   display: grid;
-  grid-gap: toRem(40);
+  grid-gap: toRem(16);
 }
 
 .group-builder__build-btn {
-  margin: toRem(-24) 0 0 auto;
+  margin-left: auto;
 
   @include body-3-semi-bold;
 }
diff --git a/src/forms/ContractCreationForm/components/EthereumStep/index.vue b/src/forms/ContractCreationForm/components/EthereumStep/index.vue
index b475fe23..078467ba 100644
--- a/src/forms/ContractCreationForm/components/EthereumStep/index.vue
+++ b/src/forms/ContractCreationForm/components/EthereumStep/index.vue
@@ -1,28 +1,6 @@
 <template>
   <div class="ethereum-step">
     <div class="ethereum-step__fields">
-      <input-field
-        :model-value="form.ethereumConfig.tokenName"
-        :label="$t(`${I18N_KEY_PREFIX}.token-name-label`)"
-        :placeholder="$t(`${I18N_KEY_PREFIX}.token-name-placeholder`)"
-        :error-message="
-          formValidation.getFieldErrorMessage('ethereumConfig.tokenName')
-        "
-        :disabled="isSubmitting"
-        @blur="formValidation.touchField('ethereumConfig.tokenName')"
-        @update:model-value="emitRootField('tokenName', $event)"
-      />
-      <input-field
-        :model-value="form.ethereumConfig.tokenSymbol"
-        :label="$t(`${I18N_KEY_PREFIX}.token-symbol-label`)"
-        :placeholder="$t(`${I18N_KEY_PREFIX}.token-symbol-placeholder`)"
-        :error-message="
-          formValidation.getFieldErrorMessage('ethereumConfig.tokenSymbol')
-        "
-        :disabled="isSubmitting"
-        @blur="formValidation.touchField('ethereumConfig.tokenSymbol')"
-        @update:model-value="emitRootField('tokenSymbol', $event)"
-      />
       <input-field
         :model-value="form.ethereumConfig.adminContractAddress"
         :label="$t(`${I18N_KEY_PREFIX}.admin-contract-address-label`)"
@@ -49,7 +27,7 @@
     <div class="ethereum-step__divider" />
     <div class="ethereum-step__groups">
       <h5 class="ethereum-step__group-title">
-        {{ `GROUP #${form.ethereumConfig.groups.length}` }}
+        {{ `Group #${form.ethereumConfig.groups.length}` }}
       </h5>
       <p class="ethereum-step__group-instruction">
         {{ $t(`${I18N_KEY_PREFIX}.group-instruction`) }}
@@ -198,7 +176,7 @@ const removeGroup = (idx: number) => {
 }
 
 .ethereum-step__groups {
-  margin-top: toRem(40);
+  margin-top: toRem(16);
 }
 
 .ethereum-step__group-title {
@@ -206,7 +184,7 @@ const removeGroup = (idx: number) => {
 }
 
 .ethereum-step__group-instruction {
-  margin-top: toRem(20);
+  margin-top: toRem(8);
 }
 
 .ethereum-step__groups-dashboard {
@@ -219,7 +197,7 @@ const removeGroup = (idx: number) => {
 .ethereum-step__groups-list-wrp {
   position: relative;
   overflow: auto;
-  margin-top: toRem(58);
+  margin-top: toRem(42);
 
   &::-webkit-scrollbar {
     height: 0;
diff --git a/src/forms/ContractCreationForm/components/GeneralStep.vue b/src/forms/ContractCreationForm/components/GeneralStep.vue
index 40a7ff29..575d96c9 100644
--- a/src/forms/ContractCreationForm/components/GeneralStep.vue
+++ b/src/forms/ContractCreationForm/components/GeneralStep.vue
@@ -50,11 +50,7 @@ const emitRootField = (
   max-width: toRem(560);
 }
 
-.general-step__instruction {
-  @include body-2-regular;
-}
-
 .general-step .general-step__project-name {
-  margin-top: toRem(30);
+  margin-top: toRem(20);
 }
 </style>
diff --git a/src/forms/ContractCreationForm/index.vue b/src/forms/ContractCreationForm/index.vue
index 3f047bb5..a21de78d 100644
--- a/src/forms/ContractCreationForm/index.vue
+++ b/src/forms/ContractCreationForm/index.vue
@@ -100,8 +100,6 @@ const form = useStorage<Form>(storageKey.value, {
     },
   },
   ethereumConfig: {
-    tokenName: '',
-    tokenSymbol: '',
     adminContractAddress: '',
     isUpgradeable: true,
     groups: [],
@@ -137,8 +135,6 @@ const formValidation = useFormValidation(
     }),
     ...(form.value.stepId === STEP_IDS.ethereum && {
       ethereumConfig: {
-        tokenName: { required },
-        tokenSymbol: { required },
         adminContractAddress: { required, address },
         // groups validation is delegated to GroupBuilder.vue
       },
diff --git a/src/forms/ContractCreationForm/types.ts b/src/forms/ContractCreationForm/types.ts
index 294ddc89..beeb1403 100644
--- a/src/forms/ContractCreationForm/types.ts
+++ b/src/forms/ContractCreationForm/types.ts
@@ -33,8 +33,6 @@ export type EthereumConfigGroup = {
 }
 
 export type EthereumConfig = {
-  tokenName: string
-  tokenSymbol: string
   adminContractAddress: string
   isUpgradeable: boolean
   groups: EthereumConfigGroup[]
diff --git a/src/localization/resources/en.json b/src/localization/resources/en.json
index e6c14575..07c0089f 100644
--- a/src/localization/resources/en.json
+++ b/src/localization/resources/en.json
@@ -22,34 +22,32 @@
       "project-name-placeholder": "Project name"
     },
     "arbitrum-step": {
-      "token-name-label": "Lorem ipsum dolor sit amet consectetur. Montes sapien ipsum ipsum adipiscing amet ac purus pellentesque.",
+      "token-name-label": "The name of the token for your protocol.",
       "token-name-placeholder": "Token name",
-      "token-symbol-label": "Lorem ipsum dolor sit amet consectetur. Montes sapien ipsum ipsum adipiscing amet ac purus pellentesque.",
+      "token-symbol-label": "The symbol of the token for your protocol.",
       "token-symbol-placeholder": "Token symbol",
-      "admin-contract-address-label": "Lorem ipsum dolor sit amet consectetur. Montes sapien ipsum ipsum adipiscing amet ac purus pellentesque.",
+      "admin-contract-address-label": "Specify the address of the protocol administrator. The administrator will be able to change the settings after deployment on the networks.",
+      "admin-contract-address-placeholder": "Contracts administrator address",
       "is-upgradeable-label": "Keep upgreadability?",
-      "admin-contract-address-placeholder": "Contract administrator's address",
       "settings": {
+        "default-token": "Your token",
         "title":"Uniswap settings",
-        "token-in-address-label": "Token In",
-        "token-in-address-placeholder": "Enter address",
-        "token-out-address-label": "Token Out",
-        "token-out-address-placeholder": "Enter address",
-        "first-swap-fee-label": "First swap deposit token Uniswap fee (%)",
-        "first-swap-fee-placeholder": "Enter Fee",
-        "second-swap-fee-label": "Second swap reward token Uniswap fee (%)",
-        "second-swap-fee-placeholder": "Enter Fee"
+        "description": "This section configures the parameters for exchanging yield for the project token.\nBy default, the exchange for the project token is done in 2 swaps. For example wstETH -> wETH and wETH -> {token}.",
+        "token-in-address-label": "The address of the token on which yield is generated, on the Arbitrum network (e.g. wstETH).",
+        "token-in-address-placeholder": "Yield token",
+        "token-out-address-label": "The yield token will be exchanged for the current token. For example (wETH).",
+        "token-out-address-placeholder": "Intermediate token",
+        "first-swap-fee-label": "Uniswap fee to swap yield token to intermediate token. It is specified as a percentage, usually it is 0.3%.",
+        "first-swap-fee-placeholder": "Swap fee for yield token",
+        "second-swap-fee-label": "Uniswap fee to swap intermediate token to project token. It is specified as a percentage, usually it is 0.3%.",
+        "second-swap-fee-placeholder": "Swap fee for project token"
       }
     },
     "ethereum-step": {
-      "token-name-label": "Lorem ipsum dolor sit amet consectetur. Montes sapien ipsum ipsum adipiscing amet ac purus pellentesque.",
-      "token-name-placeholder": "Token name",
-      "token-symbol-label": "Lorem ipsum dolor sit amet consectetur. Montes sapien ipsum ipsum adipiscing amet ac purus pellentesque.",
-      "token-symbol-placeholder": "Token symbol",
-      "admin-contract-address-label": "Lorem ipsum dolor sit amet consectetur. Montes sapien ipsum ipsum adipiscing amet ac purus pellentesque.",
-      "admin-contract-address-placeholder": "Contract administrator's address",
+      "admin-contract-address-label": "Specify the address of the protocol administrator. The administrator will be able to change the settings after deployment on the networks.",
+      "admin-contract-address-placeholder": "Contracts administrator address",
       "is-upgradeable-label": "Keep upgreadability?",
-      "group-instruction": "Lorem ipsum dolor sit amet consectetur. Nullam tempus sed turpis sed ut ornare egestas morbi neque.",
+      "group-instruction": "Add the new distribution group to your protocol.",
       "group-builder": {
         "is-public-label": "Is Public",
         "name-placeholder": "Group name",