diff --git a/packages/apps/src/app/dca/Form.css b/packages/apps/src/app/dca/Form.css index 2b088f8a16..11ee57c825 100644 --- 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 index 5989d85c43..5287f3e278 100644 --- 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 = { + hour: 'min', + day: 'hour', + week: 'day', +}; @customElement('gc-dca-form') export class DcaForm extends BaseElement { @@ -39,7 +44,6 @@ 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; @@ -47,8 +51,7 @@ export class DcaForm extends BaseElement { @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 { + 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 = { - 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` -
-
- ${i18n.t('form.advanced')} - ${i18n.t('form.advanced.desc')} -
- this.toggleAdvanced()}> -
- `; - } - 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` -
- - this.onFrequencyChange( - parseFloat(e.detail.value), - this.frequencyUnit, - )}> - > -
- ${units.length > 1 - ? html` - ({ - active: this.frequencyUnit === u, - text: i18n.t(`form.frequency.${u}`), - onClick: () => this.setFrequencyUnit(values[u], u), - }))}> -
- ${i18n.t(`form.frequency.${this.frequencyUnit}`)} - -
-
- ` - : i18n.t(`form.frequency.${this.frequencyUnit}`)} -
-
-
+ + this.onFrequencyChange( + parseFloat(e.detail.value), + this.frequencyUnit, + )}> + > +
+ ${units.length > 1 + ? html` + ({ + active: this.frequencyUnit === u, + text: i18n.t(`form.frequency.${u}`), + onClick: () => this.setFrequencyUnit(values[u], u), + }))}> +
+ ${i18n.t(`form.frequency.${this.frequencyUnit}`)} + +
+
+ ` + : i18n.t(`form.frequency.${this.frequencyUnit}`)} +
+
`; } @@ -466,21 +465,16 @@ export class DcaForm extends BaseElement { info: true, show: isValid, }; - const advancedClasses = { - hidden: this.advanced == false, - advanced: true, - }; + return html`
${this.formAssetInTemplate()} ${this.formSwitch()}${this.formAssetOutTemplate()} - ${this.formIntervalTemplate()} ${this.formAdvancedSwitch()} -
- ${this.formFrequencyTemplate()} -
+ ${this.formIntervalTemplate()}
+
${this.formFrequencyTemplate()}
${this.infoSummaryTemplate()}
${this.infoEstEndDateTemplate()}
${this.infoSlippageTemplate()}
diff --git a/packages/ui/src/component/Slider.css b/packages/ui/src/component/Slider.css index 19b2ba5d98..abd75a55bb 100644 --- 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%;