Adjust frequency unit when changing interval multiplier

galacticcouncil · Sep 30, 2024 · 36802ea · 36802ea
1 parent f00cee4
commit 36802ea
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 77 deletions.
diff --git a/packages/apps/src/app/dca/Form.css b/packages/apps/src/app/dca/Form.css
@@ -83,7 +83,7 @@
   width: 100%;
 }
 
-.frequency-trigger {
+.frequency-select {
   display: inline-flex;
   margin-right: -8px;
   height: 18px;

diff --git a/packages/apps/src/app/dca/Form.ts b/packages/apps/src/app/dca/Form.ts
@@ -26,6 +26,11 @@ import styles from './Form.css';
 
 const HOUR_MIN = 60;
 const DAY_MIN = 24 * HOUR_MIN;
+const FREQ_UNIT_BY_INTERVAL: Record<IntervalDca, FrequencyUnit> = {
+  hour: 'min',
+  day: 'hour',
+  week: 'day',
+};
 
 @customElement('gc-dca-form')
 export class DcaForm extends BaseElement {
@@ -39,16 +44,14 @@ export class DcaForm extends BaseElement {
   @property({ type: Object }) assetIn: Asset = null;
   @property({ type: Object }) assetOut: Asset = null;
   @property({ type: String }) interval: IntervalDca = 'hour';
-
   @property({ type: Number }) intervalMultiplier: number = 1;
   @property({ type: Number }) frequency: number = null;
   @property({ type: String }) amountIn = null;
   @property({ type: Object }) balanceIn: Amount = null;
   @property({ attribute: false }) order: DcaOrder = null;
   @property({ attribute: false }) error = {};
 
-  @state() advanced: boolean = false;
-  @state() frequencyUnit: FrequencyUnit = 'min';
+  @state() frequencyUnit: FrequencyUnit = 'hour';
 
   static styles = [baseStyles, formStyles, styles];
 
@@ -84,10 +87,6 @@ export class DcaForm extends BaseElement {
     return null;
   }
 
-  private toggleAdvanced() {
-    this.advanced = !this.advanced;
-  }
-
   get minFrequency() {
     return this.order
       ? Math.min(this.order.frequencyMin, this.order.frequencyOpt)
@@ -100,6 +99,15 @@ export class DcaForm extends BaseElement {
       : 0;
   }
 
+  get frequencyRanges(): Record<FrequencyUnit, number> {
+    const range = this.maxFrequency - this.minFrequency;
+    return {
+      min: range,
+      hour: Math.floor(range / HOUR_MIN),
+      day: Math.floor(range / DAY_MIN),
+    };
+  }
+
   onScheduleClick(e: any) {
     const options = {
       bubbles: true,
@@ -116,23 +124,25 @@ export class DcaForm extends BaseElement {
       detail: { value: interval },
     };
 
-    const freqUnitByInterval: Record<IntervalDca, FrequencyUnit> = {
-      hour: 'min',
-      day: 'min',
-      week: 'hour',
-    };
-
-    this.setFrequencyUnit(this.maxFrequency, freqUnitByInterval[interval]);
+    this.setFrequencyUnit(this.maxFrequency, FREQ_UNIT_BY_INTERVAL[interval]);
     this.dispatchEvent(new CustomEvent('interval-change', options));
   }
 
   onIntervalMultiplierChange(e: any) {
+    const multipliplier = e.detail.value;
     const options = {
       bubbles: true,
       composed: true,
-      detail: { value: e.detail.value },
+      detail: { value: multipliplier },
     };
+
     this.dispatchEvent(new CustomEvent('interval-mul-change', options));
+
+    setTimeout(() => {
+      if (this.frequencyRanges[this.frequencyUnit] <= 1) {
+        this.setFrequencyUnit(this.maxFrequency, 'min');
+      }
+    }, 0);
   }
 
   convertFrequencyValue(value: number, unit: FrequencyUnit = 'min') {
@@ -350,21 +360,6 @@ export class DcaForm extends BaseElement {
     `;
   }
 
-  formAdvancedSwitch() {
-    return html`
-      <div class="form-switch">
-        <div>
-          <span class="title">${i18n.t('form.advanced')}</span>
-          <span class="desc">${i18n.t('form.advanced.desc')}</span>
-        </div>
-        <uigc-switch
-          .checked=${this.advanced}
-          size="small"
-          @click=${() => this.toggleAdvanced()}></uigc-switch>
-      </div>
-    `;
-  }
-
   formFrequencyTemplate() {
     const min = this.minFrequency;
     const max = this.maxFrequency;
@@ -403,49 +398,53 @@ export class DcaForm extends BaseElement {
       day: Math.floor(value / DAY_MIN),
     };
 
+    const frequencyRanges = {
+      min: range,
+      hour: rangeInHours,
+      day: rangeInDays,
+    };
+
     const units = [
       'min',
-      rangeInHours > 0 && 'hour',
-      rangeInDays > 0 && 'day',
+      this.frequencyRanges.hour > 0 && 'hour',
+      this.frequencyRanges.day > 0 && 'day',
     ].filter((u): u is FrequencyUnit => !!u);
 
     return html`
-      <div>
-        <uigc-slider
-          label=${i18n.t('form.advanced.interval')}
-          unit=${i18n.t(`form.frequency.${this.frequencyUnit}`)}
-          hint=${blockHint}
-          .min=${minValues[this.frequencyUnit]}
-          .max=${maxValues[this.frequencyUnit]}
-          .value=${values[this.frequencyUnit]}
-          .disabled=${!this.order}
-          @input-change=${(e: CustomEvent) =>
-            this.onFrequencyChange(
-              parseFloat(e.detail.value),
-              this.frequencyUnit,
-            )}>
-          >
-          <div slot="value">
-            ${units.length > 1
-              ? html`
-                  <uigc-dropdown
-                    triggerMethod="click"
-                    placement="bottom-end"
-                    .items=${units.map((u) => ({
-                      active: this.frequencyUnit === u,
-                      text: i18n.t(`form.frequency.${u}`),
-                      onClick: () => this.setFrequencyUnit(values[u], u),
-                    }))}>
-                    <div class="frequency-trigger">
-                      ${i18n.t(`form.frequency.${this.frequencyUnit}`)}
-                      <uigc-icon-dropdown></uigc-icon-dropdown>
-                    </div>
-                  </uigc-dropdown>
-                `
-              : i18n.t(`form.frequency.${this.frequencyUnit}`)}
-          </div>
-        </uigc-slider>
-      </div>
+      <uigc-slider
+        label=${i18n.t('form.advanced.interval')}
+        unit=${i18n.t(`form.frequency.${this.frequencyUnit}`)}
+        hint=${blockHint}
+        .min=${minValues[this.frequencyUnit]}
+        .max=${maxValues[this.frequencyUnit]}
+        .value=${values[this.frequencyUnit]}
+        .disabled=${!this.order}
+        @input-change=${(e: CustomEvent) =>
+          this.onFrequencyChange(
+            parseFloat(e.detail.value),
+            this.frequencyUnit,
+          )}>
+        >
+        <div slot="value">
+          ${units.length > 1
+            ? html`
+                <uigc-dropdown
+                  triggerMethod="click"
+                  placement="bottom-end"
+                  .items=${units.map((u) => ({
+                    active: this.frequencyUnit === u,
+                    text: i18n.t(`form.frequency.${u}`),
+                    onClick: () => this.setFrequencyUnit(values[u], u),
+                  }))}>
+                  <div class="frequency-select">
+                    ${i18n.t(`form.frequency.${this.frequencyUnit}`)}
+                    <uigc-icon-dropdown></uigc-icon-dropdown>
+                  </div>
+                </uigc-dropdown>
+              `
+            : i18n.t(`form.frequency.${this.frequencyUnit}`)}
+        </div>
+      </uigc-slider>
     `;
   }
 
@@ -466,21 +465,16 @@ export class DcaForm extends BaseElement {
       info: true,
       show: isValid,
     };
-    const advancedClasses = {
-      hidden: this.advanced == false,
-      advanced: true,
-    };
+
     return html`
       <slot name="header"></slot>
       <div class="invest">
         ${this.formAssetInTemplate()}
         ${this.formSwitch()}${this.formAssetOutTemplate()}
-        ${this.formIntervalTemplate()} ${this.formAdvancedSwitch()}
-        <div class=${classMap(advancedClasses)}>
-          ${this.formFrequencyTemplate()}
-        </div>
+        ${this.formIntervalTemplate()}
       </div>
       <div class=${classMap(infoClasses)}>
+        <div class="row">${this.formFrequencyTemplate()}</div>
         <div class="row summary show">${this.infoSummaryTemplate()}</div>
         <div class="row">${this.infoEstEndDateTemplate()}</div>
         <div class="row">${this.infoSlippageTemplate()}</div>

diff --git a/packages/ui/src/component/Slider.css b/packages/ui/src/component/Slider.css
@@ -1,3 +1,7 @@
+:host {
+  width: 100%;
+}
+
 .slider-root {
   position: relative;
   width: 100%;