Make right side of first and second steps similar to others #80

src/components/constants/common.js

@@ -5,7 +5,7 @@ export const SECONDS_IN_HOUR = 3600;
 ////////// steps' data
 export const MAX_SUPPLY_VALUE = 1000000000000;
 
-export const ERROR_MARK = 'Error';
+export const ERROR_MARK = "Error";
 
 export const CHECK_ERROR_TIMEOUT = 200;
 

src/components/constants/index.js

@@ -1,2 +1,2 @@
-export * from './common';
-export * from './constitution';
+export * from "./common";
+export * from "./constitution";

src/components/dacCreation/DacValidation.vue

@@ -83,7 +83,7 @@ export default {
       });
       try {
         const hash = await encodeInSHA1();
-        this.$store.dispatch("ual/validateDacTransact", {
+        await this.$store.dispatch("ual/validateDacTransact", {
           dacId: this.dacId,
           hash,
           afterTransact: this.afterTransact

src/components/steps/Step1/Step1Right.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <p class="hint-step">{{ $t("general.why_and_how") }}</p>
+    <h2 class="title-step">{{ $t("step1.title_right") }}</h2>
+    <p class="subtitle-step margin-bottom-30">{{ $t("step1.info_line1") }}</p>
+    <p class="hint-step text-uppercase">{{ $t("step1.dac_name") }}</p>
+    <p class="subtitle-step margin-bottom-20">{{ $t("step1.info_line2") }}</p>
+    <p class="hint-step text-uppercase">{{ $t("step1.token_symbol") }}</p>
+    <p class="subtitle-step margin-bottom-20">{{ $t("step1.info_line3") }}</p>
+    <p class="hint-step text-uppercase">{{ $t("step1.description") }}</p>
+    <p class="subtitle-step margin-bottom-20">{{ $t("step1.info_line4") }}</p>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+.margin-bottom-20 {
+  margin-bottom: 20px;
+}
+.margin-bottom-30 {
+  margin-bottom: 30px;
+}
+</style>

src/components/steps/Step1/index.js

@@ -0,0 +1,2 @@
+export { default as Step1Form } from "./Step1Form";
+export { default as Step1Right } from "./Step1Right";

src/components/steps/Step2Form.vue → src/components/steps/Step2/Step2Form.vue

@@ -7,7 +7,7 @@
     <my-input
       v-model="issuance"
       color="secondary"
-      :label="`${$t('step2.issuance', { token_symbol: getTokenSymbol })} *`"
+      :label="`${$t('step2.issuance')} ${getTokenSymbol} *`"
       :hint="$t('step2.issuance_hint')"
       :rules="[
         val => !!val || $t('general.required'),
@@ -26,10 +26,7 @@
       <q-slider
         dark
         :value="parseInt(decimals)"
-        @input="
-          decimals = $event;
-          $store.commit('factory/setStepsData', { step: 2, key: 'decimals', data: { value: $event } });
-        "
+        @input="onInputSlider"
         markers
         label
         :min="0"
@@ -88,6 +85,10 @@ export default {
         return "";
       }
       return parseInt(v).toLocaleString();
+    },
+    onInputSlider(event) {
+      this.decimals = event;
+      this.$store.commit("factory/setStepsData", { step: 2, key: "decimals", data: { value: event } });
     }
   }
 };

src/components/steps/Step2/Step2Right.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <p class="hint-step">{{ $t("general.why_and_how") }}</p>
+    <h2 class="title-step">{{ $t("step2.title_right") }}</h2>
+    <p class="hint-step text-uppercase">{{ $t("step2.issuance") }}</p>
+    <p class="subtitle-step">
+      {{ $t("step2.info_line1") }}
+    </p>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>

src/components/steps/Step2/index.js

@@ -0,0 +1,2 @@
+export { default as Step2Form } from "./Step2Form";
+export { default as Step2Right } from "./Step2Right";

src/components/steps/Step3/Step3Right.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p class="hint-step">{{ $t("step3.hint1") }}</p>
+    <p class="hint-step">{{ $t("general.why_and_how") }}</p>
     <h2 class="title-step">{{ $t("step3.title_right") }}</h2>
     <p class="subtitle-step margin-bottom-30">{{ $t("step3.subtitle1") }}</p>
     <p class="hint-step text-uppercase">{{ $t("step3.number_of_c") }}</p>

src/components/steps/Step3/index.js

@@ -0,0 +1,2 @@
+export { default as Step3Form } from "./Step3Form";
+export { default as Step3Right } from "./Step3Right";

src/components/steps/Step4/Step4Form.vue

@@ -23,15 +23,15 @@
       @statusChange="onStatusChange($event, LOGO_URL_FIELD)"
     />
     <my-input
-       color="secondary"
-       :label="$t('step4.logomark_url')"
-       :hint="$t('step4.link_hint')"
-       :isSetFocus="focused === LOGO_MARK_URL_FIELD"
-       :isShowAppend="!!logoMarkUrl"
-       :rules="[val => isValidUrl(val)]"
-       v-model="logoMarkUrl"
-       @statusChange="onStatusChange($event, LOGO_MARK_URL_FIELD)"
-     />
+      color="secondary"
+      :label="$t('step4.logomark_url')"
+      :hint="$t('step4.link_hint')"
+      :isSetFocus="focused === LOGO_MARK_URL_FIELD"
+      :isShowAppend="!!logoMarkUrl"
+      :rules="[val => isValidUrl(val)]"
+      v-model="logoMarkUrl"
+      @statusChange="onStatusChange($event, LOGO_MARK_URL_FIELD)"
+    />
     <step4-color-picker />
   </div>
 </template>

src/components/steps/Step4/Step4Right.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <p class="hint-step">{{ $t("step4.hint1") }}</p>
+    <p class="hint-step">{{ $t("general.why_and_how") }}</p>
     <h2 class="title-step">{{ $t("step4.title_right") }}</h2>
     <p class="subtitle-step margin-bottom-30">{{ $t("step4.subtitle1") }}</p>
     <p class="hint-step text-uppercase">{{ $t("step4.logo_url") }}</p>
     <p class="subtitle-step margin-bottom-15">{{ $t("step4.subtitle2") }}</p>
-    <img src="../../../statics/images/eosdac-logo.svg" alt="eosDAC logo" class="logo">
+    <img src="../../../statics/images/eosdac-logo.svg" alt="eosDAC logo" class="logo" />
     <p class="hint-step text-uppercase">{{ $t("step4.logomark_url") }}</p>
     <p class="subtitle-step margin-bottom-15">{{ $t("step4.subtitle3") }}</p>
-    <img src="../../../statics/images/eosdac-logo-notext.svg" alt="eosDAC logo without text" class="margin-bottom-15"/>
+    <img src="../../../statics/images/eosdac-logo-notext.svg" alt="eosDAC logo without text" class="margin-bottom-15" />
     <p class="small-title">{{ $t("step4.subtitle4") }}</p>
     <p class="hint-step text-uppercase">{{ $t("step4.colors_scheme") }}</p>
     <p class="subtitle-step">{{ $t("step4.subtitle5") }}</p>

src/components/steps/Step4/index.js

@@ -0,0 +1,2 @@
+export { default as Step4Form } from "./Step4Form";
+export { default as Step4Right } from "./Step4Right";

src/components/steps/Step5/PurchaseCard.vue

@@ -81,9 +81,9 @@ export default {
 
       const docElemHeight = document.documentElement.clientHeight;
       const checkboxOffsetTop =
-        this.checkboxRef.getBoundingClientRect().bottom + (this.$store.state.factory.customDacData
-          ? 0
-          : FOOTER_HEIGHT) + CHECKBOX_MARGIN_TOP;
+        this.checkboxRef.getBoundingClientRect().bottom +
+        (this.$store.state.factory.customDacData ? 0 : FOOTER_HEIGHT) +
+        CHECKBOX_MARGIN_TOP;
       if (docElemHeight < checkboxOffsetTop) {
         window.scrollBy({
           top: checkboxOffsetTop - docElemHeight

src/components/steps/Step5/Step5Form.vue

@@ -8,11 +8,7 @@
           {{ $t("step5.once_you") }}
         </p>
       </div>
-      <purchase-cards
-        :isAgree="isAgree"
-        :onCheckboxError="onCheckboxError"
-        :checkboxRef="checkboxRef"
-      />
+      <purchase-cards :isAgree="isAgree" :onCheckboxError="onCheckboxError" :checkboxRef="checkboxRef" />
       <div class="checkbox-wrapper" ref="checkbox_ref">
         <q-checkbox
           dark

src/components/steps/Step5/Step5Right.vue

@@ -9,7 +9,7 @@
       <p class="hint-step text-uppercase">{{ $t("step1.description") }}</p>
       <p class="subtitle-step margin-bottom-15 break-text-hyphens">{{ step1.dacDescription }}</p>
       <custom-divider compClass="divider" />
-      <p class="hint-step text-uppercase">{{ $t("step2.issuance", { token_symbol: step1.tokenSymbol }) }}</p>
+      <p class="hint-step text-uppercase">{{ $t("step2.issuance") }} {{ step1.tokenSymbol }}</p>
       <p class="subtitle-step margin-bottom-15">{{ step2.issuance }}</p>
       <p class="hint-step text-uppercase">{{ $t("step2.decimals") }}</p>
       <p class="subtitle-step margin-bottom-15">{{ step2.decimals }}</p>
@@ -29,7 +29,7 @@
       <p class="subtitle-step margin-bottom-15 break-text">{{ step4.logoMarkUrl }}</p>
       <p class="hint-step text-uppercase">{{ $t("step4.colors_scheme") }}</p>
       <div class="subtitle-step margin-bottom-15 colors-scheme">
-        <div v-for="color in step4.colorsScheme.scheme " :style="{ backgroundColor: `#${color}` }"></div>
+        <div v-for="color in step4.colorsScheme.scheme" :style="{ backgroundColor: `#${color}` }"></div>
       </div>
     </div>
     <div v-else class="break-text">

src/components/steps/Step5/index.js

@@ -0,0 +1,2 @@
+export { default as Step5Form } from "./Step5Form";
+export { default as Step5Right } from "./Step5Right";

src/components/steps/Stepper.vue

@@ -118,7 +118,7 @@ export default {
       return findStepErrors(this.$store.state.factory.stepsData[this.getActiveStep]);
     },
     customDacData() {
-      return this.$store.state.factory.customDacData
+      return this.$store.state.factory.customDacData;
     }
   },
   methods: {

src/components/ual/store/actions.js

@@ -207,7 +207,6 @@ export async function prepareDacTransact(storeProps, payload) {
       }
     }
   ];
-
   dispatch("dacTransact", { actions, dacId, openWS, afterTransact });
 }
 

src/i18n/en-us/index.js

@@ -13,7 +13,8 @@ export default {
     info_will_be_saved: "Info will be saved. You can finish filing up of the form later.",
     step_of: "Step {active_step} of {max_steps}",
     example: "Example",
-    cancel: "Cancel"
+    cancel: "Cancel",
+    why_and_how: "The Why’s and How"
   },
   home: {
     welcome_to: "Welcome To",
@@ -75,6 +76,7 @@ export default {
   },
   step1: {
     title: "DAC Profile",
+    title_right: "Understanding of profile",
     dac_name: "DAC Name",
     dac_name_hint: "Enter a name for your DAC",
     dac_name_rule_length_3: "DAC name must be minimum 3 chars.",
@@ -93,22 +95,20 @@ export default {
     info_line3:
       "Your token symbol should contain capital letters only and is limited to 7 characters. Ideally, you’ll want to avoid using a token symbol which might be confused with existing EOS tokens. This token will be your governance token used by your members to elect custodians.",
     info_line4:
-      "A DAC is a group of people with a shared goal. Your DAC Description should let people know what your community goal is all about and why they might want to participate.",
-    info_line5:
-      "The DAC ID is a unique identifier for your DAC used by the system to keep your data organized together and will be generated from your DAC Name."
+      "A DAC is a group of people with a shared goal. Your DAC Description should let people know what your community goal is all about and why they might want to participate."
   },
   step2: {
     title: "Tokenomics",
-    issuance: "Issuance {token_symbol}",
+    title_right: "Understanding of tokenomics",
+    issuance: "Issuance",
     issuance_hint: "Issuance for your token",
     decimals: "Decimals",
-    info_line1: "Your DAC does not have to issue all the tokens initially created.",
-    info_line2: "Most EOS tokens use 4 decimal places so if you’re unsure about this, just leave it as 4.",
+    info_line1:
+      "Your DAC does not have to issue all the tokens initially created. Most EOS tokens use 4 decimal places so if you’re unsure about this, just leave it as 4.",
     less_than_supply: "Issuance should be less than {max_supply}."
   },
   step3: {
     ///// right part
-    hint1: "The Why’s and How",
     title_right: "Understanding the configurations",
     subtitle1: "You’re configurations bacon ipsum dolor amet leberkas doner kevin pork belly spare ribs biltong.",
     subtitle_dolor_amet:
@@ -125,7 +125,6 @@ export default {
   },
   step4: {
     ///// right part
-    hint1: "The Why’s and How",
     title_right: "Adding Branding and setting colors",
     website_url: "Website URL",
     subtitle1:
@@ -173,5 +172,5 @@ export default {
     try_again: "try again",
     constitution_preparation: "Constitution preparation",
     go_to_your_dac: "go to your dac"
-  },
+  }
 };

src/imports/utils.js

@@ -52,7 +52,7 @@ export function findStepErrors(stepData, isCheckEmpty) {
 
 export async function encodeInSHA1() {
   const msgUint8 = new TextEncoder().encode(CONSTITUTION_TEXT);
-  const hashBuffer = await crypto.subtle.digest('SHA-1', msgUint8);
+  const hashBuffer = await crypto.subtle.digest("SHA-1", msgUint8);
   const hashArray = Array.from(new Uint8Array(hashBuffer));
-  return hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
+  return hashArray.map(byte => byte.toString(16).padStart(2, "0")).join("");
 }

src/imports/validators.js

@@ -24,7 +24,7 @@ export function isValidSymbol(symbol) {
   if (/^[A-Z]{1,7}$/.test(symbol)) {
     return true;
   } else {
-    return this.$t('errors.step1.can_only_have_letters');
+    return this.$t("errors.step1.can_only_have_letters");
   }
 }
 
@@ -50,12 +50,12 @@ export async function isAvailableSymbol(symbol) {
       limit: 1
     });
     if (res && res.rows.length && res.rows[0].supply.split(" ")[1] === scope) {
-      return this.$t('errors.step1.token_already_exists');
+      return this.$t("errors.step1.token_already_exists");
     } else {
       return true;
     }
   } catch (error) {
-    return this.$t('errors.step1.token_verification_error');
+    return this.$t("errors.step1.token_verification_error");
   }
 }
 

src/pages/DacCreation.vue

@@ -14,7 +14,7 @@
       />
     </section>
     <dac-validation v-else-if="isValidationStage" :setDacValidated="setDacValidated" />
-    <section v-else>
+    <section v-else-if="trxError || wsError">
       <p class="title creation-fail break-text">{{ trxError || wsError }}</p>
       <q-btn to="/" color="secondary" :label="$t('dac_creation.go_to_main_page')" />
     </section>

src/pages/HowItWorks.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-  export default {}
+export default {};
 </script>
 
 <style lang="stylus">

src/pages/Pricing.vue

@@ -2,20 +2,22 @@
   <q-page class="bg-accent full-height">
     <div class="bg-primary">
       <div class="q-pa-md">
-
         <p v-html="$t('pricing.line1')"></p>
         <p v-html="$t('pricing.line2')"></p>
         <p v-html="$t('pricing.line3')"></p>
-
       </div>
     </div>
     <div class="diagonal"></div>
   </q-page>
 </template>
 
-<script>
-</script>
+<script></script>
 
 <style>
-a, a:hover, a:active, a:visited { color: white; }
+a,
+a:hover,
+a:active,
+a:visited {
+  color: white;
+}
 </style>