DCA custom interval slider

.changeset/tasty-rats-hammer.md

@@ -0,0 +1,6 @@
+---
+'@galacticcouncil/apps': minor
+'@galacticcouncil/ui': minor
+---
+
+Added range slider component for DCA

packages/apps/src/app/dca/Form.css

@@ -83,6 +83,14 @@
   width: 100%;
 }
 
+.frequency-select {
+  display: inline-flex;
+  margin-right: -8px;
+  height: 18px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
 .adornment {
   white-space: nowrap;
   font-weight: 500;

packages/apps/src/app/dca/Form.ts

@@ -18,12 +18,20 @@ import { baseStyles, formStyles } from 'styles';
 import { formatAmount, humanizeAmount } from 'utils/amount';
 import { MINUTE_MS } from 'utils/time';
 
-import { DcaOrder, INTERVAL_DCA, IntervalDca } from './types';
+import { DcaOrder, FrequencyUnit, INTERVAL_DCA, IntervalDca } from './types';
 
 import { Amount, Asset } from '@galacticcouncil/sdk';
 
 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 {
   private account = new DatabaseController<Account>(this, AccountCursor);
@@ -43,7 +51,7 @@ export class DcaForm extends BaseElement {
   @property({ attribute: false }) order: DcaOrder = null;
   @property({ attribute: false }) error = {};
 
-  @state() advanced: boolean = false;
+  @state() frequencyUnit: FrequencyUnit = 'hour';
 
   static styles = [baseStyles, formStyles, styles];
 
@@ -79,8 +87,25 @@ 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)
+      : 0;
+  }
+
+  get maxFrequency() {
+    return Number.isFinite(this.order?.frequencyOpt)
+      ? Math.max(this.minFrequency, this.order.frequencyOpt)
+      : 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) {
@@ -92,32 +117,56 @@ export class DcaForm extends BaseElement {
   }
 
   onIntervalChange(e: any) {
+    const interval = e.detail.value as IntervalDca;
     const options = {
       bubbles: true,
       composed: true,
-      detail: { value: e.detail.value },
+      detail: { value: 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);
   }
 
-  onFrequencyChange(e: any) {
+  convertFrequencyValue(value: number, unit: FrequencyUnit = 'min') {
+    return unit === 'min'
+      ? value
+      : unit === 'hour'
+      ? value * HOUR_MIN
+      : value * DAY_MIN;
+  }
+
+  onFrequencyChange(value: number, unit: FrequencyUnit = 'min') {
     const options = {
       bubbles: true,
       composed: true,
-      detail: { value: e.detail.value },
+      detail: { value: this.convertFrequencyValue(value, unit) },
     };
     this.dispatchEvent(new CustomEvent('frequency-change', options));
   }
 
+  setFrequencyUnit(value: number, unit: FrequencyUnit) {
+    this.frequencyUnit = unit;
+    this.onFrequencyChange(value, unit);
+  }
+
   infoSummaryTemplate() {
     if (this.inProgress) {
       return html`
@@ -311,41 +360,91 @@ 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 error = this.error['frequencyOutOfRange'];
-    const isDisabled =
-      this.error['balanceTooLow'] || this.error['minBudgetTooLow'];
+    const min = this.minFrequency;
+    const max = this.maxFrequency;
+    const value = this.frequency ?? max;
+
+    const valueMsec = value * 60 * 1000;
+    const blockTime = 12_000;
+    const blockCount = Math.floor(valueMsec / blockTime);
+    const blockHint =
+      blockCount > 0
+        ? i18n.t('form.advanced.intervalBlocks', {
+            minutes: value,
+            blocks: blockCount,
+          })
+        : undefined;
+
+    const range = max - min;
+    const rangeInHours = Math.floor(range / HOUR_MIN);
+    const rangeInDays = Math.floor(range / DAY_MIN);
+
+    const minValues: Record<FrequencyUnit, number> = {
+      min: min,
+      hour: Math.ceil(min / HOUR_MIN),
+      day: Math.ceil(min / DAY_MIN),
+    };
+
+    const maxValues: Record<FrequencyUnit, number> = {
+      min: max,
+      hour: Math.floor(max / HOUR_MIN),
+      day: Math.floor(max / DAY_MIN),
+    };
+
+    const values: Record<FrequencyUnit, number> = {
+      min: value,
+      hour: Math.floor(value / HOUR_MIN),
+      day: Math.floor(value / DAY_MIN),
+    };
+
+    const frequencyRanges = {
+      min: range,
+      hour: rangeInHours,
+      day: rangeInDays,
+    };
+
+    const units = [
+      'min',
+      this.frequencyRanges.hour > 0 && 'hour',
+      this.frequencyRanges.day > 0 && 'day',
+    ].filter((u): u is FrequencyUnit => !!u);
+
     return html`
-      <uigc-textfield
-        field
-        number
-        ?disabled=${!!isDisabled}
-        .disabled=${!!isDisabled}
-        ?error=${error}
-        .error=${error}
-        .min=${1}
-        .placeholder=${this.order?.frequency}
-        .value=${this.frequency}
-        @input-change=${(e: CustomEvent) => this.onFrequencyChange(e)}>
-        <span class="adornment" slot="inputAdornment">
-          ${i18n.t('form.advanced.interval')}
-        </span>
-      </uigc-textfield>
+      <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>
     `;
   }
 
@@ -366,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>

packages/apps/src/app/dca/translation.en.json

@@ -13,14 +13,19 @@
 
   "form.advanced": "Advanced settings",
   "form.advanced.desc": "Customize your trades to an even greater extent.",
-  "form.advanced.interval": "Interval (minutes)",
+  "form.advanced.interval": "Custom interval",
+  "form.advanced.intervalBlocks": "{{minutes}} minutes = {{blocks}} blocks",
 
   "form.summary": "Summary",
   "form.summary.message": "Swap <1>{{amountIn}} {{assetIn}}</1> for <1>{{assetOut}}</1> every <1>~{{frequency}}</1> with a total budget of <1>{{amountInBudget}} {{assetIn}}</1> over the period of <1>~{{time}}</1>",
 
   "form.info.estSchedule": "Schedule end (est.)",
   "form.info.slippage": "Slippage protection",
 
+  "form.frequency.min": "minutes",
+  "form.frequency.hour": "hours",
+  "form.frequency.day": "days",
+
   "error.insufficientBalance": "Your trade is bigger than your balance.",
   "error.minBudgetTooLow": "The minimum budget is {{amount}} {{asset}}.",
   "error.frequencyOutOfRange": "The valid frequency is between {{min}} and {{max}} minutes.",

packages/apps/src/app/dca/types.ts

@@ -54,6 +54,7 @@ export const INTERVAL_DCA_MS: Record<IntervalDca, number> = {
 };
 
 export type IntervalDca = (typeof INTERVAL_DCA)[number];
+export type FrequencyUnit = 'min' | 'hour' | 'day';
 
 export interface DcaOrder extends Humanizer {
   amountIn: BigNumber;

packages/apps/src/styles/form.css

@@ -107,6 +107,7 @@
 
 @media (max-width: 480px) {
   .form-switch,
+  .advanced,
   .info {
     padding: 0 14px;
   }

packages/ui/src/component/Dropdown.css

@@ -0,0 +1,41 @@
+.tooltip {
+  display: none;
+  width: max-content;
+  min-width: 120px;
+  text-align: left;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: var(--hex-dark-blue-700);
+  border: 1px solid var(--hex-dark-blue-400);
+  color: white;
+  padding: 10px;
+  border-radius: 8px;
+  z-index: 1000;
+  box-shadow: 0px 40px 40px 0px rgba(0, 0, 0, 0.8);
+}
+
+.tooltip.show {
+  display: block;
+}
+
+.tooltip > button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  border: none;
+  padding: 4px 8px;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--hex-basic-500);
+}
+
+.tooltip > button.active {
+  background: rgba(255, 255, 255, 0.06);
+  color: white;
+}
+
+.tooltip > button:hover {
+  color: white;
+}