From 783eb16d8d71f252253d7e3e79eae39c6e9ee1df Mon Sep 17 00:00:00 2001
From: Aleksandra Usacheva <lazercore@me.com>
Date: Tue, 6 Apr 2021 11:06:33 +0300
Subject: [PATCH] FRONTEND-467: new look for deposits filters (#420)

---
 .../deposit-row/deposit-row.component.html    |   5 +-
 .../additional-filters.module.ts              |  30 +++++
 .../additional-filters.service.ts             |  25 ++++
 .../dialog-filters.component.html             |  21 +++
 .../dialog-filters.component.scss             |  24 ++++
 .../dialog-filters.component.ts               | 125 ++++++++++++++++++
 .../deposit-status-filter/consts.ts           |   3 +
 .../deposit-status-filter.component.html      |  12 ++
 .../deposit-status-filter.component.ts        |  18 +++
 .../deposit-status-filter.module.ts           |  16 +++
 .../types/deposit-status-filter-value.ts      |   3 +
 .../validators/deposit-status-validator.ts    |  16 +++
 .../deposit-sum-filter.component.html         |  15 +++
 .../deposit-sum-filter.component.scss         |   0
 .../deposit-sum-filter.component.ts           |  13 ++
 .../deposit-sum-filter.module.ts              |  24 ++++
 .../deposit-sum-filter/index.ts               |   3 +
 .../types/deposit-sum-filter.ts               |   5 +
 .../additional-filters/index.ts               |   1 +
 .../additional-filters/main-filters/index.ts  |   3 +
 .../main-filters/main-filters.component.html  |  24 ++++
 .../main-filters/main-filters.component.ts    |  13 ++
 .../main-filters/main-filters.module.ts       |  16 +++
 .../main-filters/types/main-filters.ts        |   6 +
 .../types/additional-filters-form.ts          |   9 ++
 .../types/additional-filters.ts               |   9 ++
 .../types/deposit-amount-filter-data.ts       |   4 +
 .../deposits-filters.component.html           |  13 ++
 .../deposits-filters.component.ts             |  70 ++++++++++
 .../deposits-filters.module.ts                |  24 ++++
 .../deposits/deposits-filters/index.ts        |   1 +
 .../deposits-filters-store.service.ts         |  60 +++++++++
 .../deposits-filters.service.ts               |  57 ++++++++
 .../types/deposit-amount-params.ts            |   4 +
 .../types/deposits-filters-data.ts            |   8 ++
 .../format-deposit-amount-data-to-params.ts   |  16 +++
 .../get-deposit-amount-data-from-params.ts    |  19 +++
 .../deposits/deposits.component.html          |  26 ++--
 .../deposits/deposits.component.ts            |  24 +++-
 .../deposits/deposits.module.ts               |   5 +-
 .../deposits/search-form/form-params.ts       |  14 --
 .../deposits/search-form/index.ts             |   1 -
 .../deposits/search-form/query-params.ts      |  14 --
 .../search-form/search-form.component.html    |  65 ---------
 .../search-form/search-form.component.ts      |  21 ---
 .../search-form/search-form.service.ts        |  61 ---------
 .../deposits/search-form/to-form-value.ts     |  15 ---
 .../deposits/search-form/to-query-params.ts   |  10 --
 .../deposits/search-form/to-search-params.ts  |  11 --
 .../services/fetch-deposits.service.ts        |  26 +++-
 src/assets/i18n/deposits/ru.json              |   6 +-
 51 files changed, 774 insertions(+), 240 deletions(-)
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/additional-filters.module.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/additional-filters.service.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/components/dialog-filters/dialog-filters.component.html
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/components/dialog-filters/dialog-filters.component.scss
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/components/dialog-filters/dialog-filters.component.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/consts.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/deposit-status-filter.component.html
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/deposit-status-filter.component.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/deposit-status-filter.module.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/types/deposit-status-filter-value.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/validators/deposit-status-validator.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/deposit-sum-filter.component.html
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/deposit-sum-filter.component.scss
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/deposit-sum-filter.component.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/deposit-sum-filter.module.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/index.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/types/deposit-sum-filter.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/index.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/main-filters/index.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/main-filters/main-filters.component.html
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/main-filters/main-filters.component.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/main-filters/main-filters.module.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/main-filters/types/main-filters.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/types/additional-filters-form.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/types/additional-filters.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/types/deposit-amount-filter-data.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/deposits-filters.component.html
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/deposits-filters.component.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/deposits-filters.module.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/index.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/services/deposits-filters-store/deposits-filters-store.service.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/services/deposits-filters/deposits-filters.service.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/types/deposit-amount-params.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/types/deposits-filters-data.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/utils/format-deposit-amount-data-to-params.ts
 create mode 100644 src/app/sections/wallet-section/deposits/deposits-filters/utils/get-deposit-amount-data-from-params.ts
 delete mode 100644 src/app/sections/wallet-section/deposits/search-form/form-params.ts
 delete mode 100644 src/app/sections/wallet-section/deposits/search-form/index.ts
 delete mode 100644 src/app/sections/wallet-section/deposits/search-form/query-params.ts
 delete mode 100644 src/app/sections/wallet-section/deposits/search-form/search-form.component.html
 delete mode 100644 src/app/sections/wallet-section/deposits/search-form/search-form.component.ts
 delete mode 100644 src/app/sections/wallet-section/deposits/search-form/search-form.service.ts
 delete mode 100644 src/app/sections/wallet-section/deposits/search-form/to-form-value.ts
 delete mode 100644 src/app/sections/wallet-section/deposits/search-form/to-query-params.ts
 delete mode 100644 src/app/sections/wallet-section/deposits/search-form/to-search-params.ts

diff --git a/src/app/sections/wallet-section/deposits/deposit-panels/components/deposit-row/deposit-row.component.html b/src/app/sections/wallet-section/deposits/deposit-panels/components/deposit-row/deposit-row.component.html
index edc33d6d..a6cf55e0 100644
--- a/src/app/sections/wallet-section/deposits/deposit-panels/components/deposit-row/deposit-row.component.html
+++ b/src/app/sections/wallet-section/deposits/deposit-panels/components/deposit-row/deposit-row.component.html
@@ -5,7 +5,10 @@
     <dsh-row-label fxFlex="25">
         <dsh-status [color]="deposit.status | depositStatusColor">{{ deposit.status | depositStatusName }}</dsh-status>
     </dsh-row-label>
-    <dsh-row-label fxFlex="25">{{ deposit.createdAt | date: 'dd MMMM yyyy, HH:mm' }}</dsh-row-label>
+    <dsh-row-label fxFlex="25">
+        <span fxHide.lt-md>{{ deposit.createdAt | date: 'dd MMMM yyyy, HH:mm' }}</span>
+        <span fxHide.gt-sm>{{ deposit.createdAt | date: 'dd.MM.yyyy, HH:mm' }}</span>
+    </dsh-row-label>
     <dsh-row-label fxFlex="25">
         {{ deposit.wallet | walletDetails }}
     </dsh-row-label>
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/additional-filters.module.ts b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/additional-filters.module.ts
new file mode 100644
index 00000000..5d3e1440
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/additional-filters.module.ts
@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { FlexModule } from '@angular/flex-layout';
+import { MatDividerModule } from '@angular/material/divider';
+import { TranslocoModule } from '@ngneat/transloco';
+
+import { DialogModule } from '@dsh/app/shared/components/dialog';
+import { ButtonModule } from '@dsh/components/buttons';
+
+import { AdditionalFiltersService } from './additional-filters.service';
+import { DialogFiltersComponent } from './components/dialog-filters/dialog-filters.component';
+import { DepositStatusFilterModule } from './deposit-status-filter/deposit-status-filter.module';
+import { DepositSumFilterModule } from './deposit-sum-filter';
+import { MainFiltersModule } from './main-filters';
+
+@NgModule({
+    declarations: [DialogFiltersComponent],
+    entryComponents: [DialogFiltersComponent],
+    providers: [AdditionalFiltersService],
+    imports: [
+        DialogModule,
+        FlexModule,
+        MatDividerModule,
+        MainFiltersModule,
+        DepositSumFilterModule,
+        TranslocoModule,
+        DepositStatusFilterModule,
+        ButtonModule,
+    ],
+})
+export class AdditionalFiltersModule {}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/additional-filters.service.ts b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/additional-filters.service.ts
new file mode 100644
index 00000000..7559dfc3
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/additional-filters.service.ts
@@ -0,0 +1,25 @@
+import { Inject, Injectable } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Observable } from 'rxjs';
+import { take } from 'rxjs/operators';
+
+import { DialogConfig, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
+
+import { DialogFiltersComponent } from './components/dialog-filters/dialog-filters.component';
+import { AdditionalFilters } from './types/additional-filters';
+
+@Injectable()
+export class AdditionalFiltersService {
+    constructor(@Inject(DIALOG_CONFIG) private dialogConfig: DialogConfig, private dialog: MatDialog) {}
+
+    openFiltersDialog(data: AdditionalFilters): Observable<AdditionalFilters> {
+        return this.dialog
+            .open<DialogFiltersComponent, AdditionalFilters>(DialogFiltersComponent, {
+                panelClass: 'fill-bleed-dialog',
+                ...this.dialogConfig.medium,
+                data,
+            })
+            .afterClosed()
+            .pipe(take(1));
+    }
+}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/components/dialog-filters/dialog-filters.component.html b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/components/dialog-filters/dialog-filters.component.html
new file mode 100644
index 00000000..b8072286
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/components/dialog-filters/dialog-filters.component.html
@@ -0,0 +1,21 @@
+<ng-container *transloco="let t; read: 'filters'">
+    <dsh-base-dialog hasDivider [title]="t('additionalFilters')" (cancel)="close()">
+        <div class="dialog-filters-main">
+            <dsh-main-filters [form]="mainFiltersGroup"></dsh-main-filters>
+            <mat-divider></mat-divider>
+            <dsh-deposit-status-filter [control]="statusFilterControl"></dsh-deposit-status-filter>
+            <mat-divider></mat-divider>
+            <dsh-deposit-sum-filter [form]="depositSumFiltersGroup"></dsh-deposit-sum-filter>
+        </div>
+        <dshBaseDialogActions>
+            <div fxLayout="row" fxLayoutAlign="space-between center">
+                <button dsh-stroked-button color="accent" (click)="clear()">
+                    {{ t('clearParams') }}
+                </button>
+                <button dsh-button color="accent" (click)="confirm()">
+                    {{ t('save') }}
+                </button>
+            </div>
+        </dshBaseDialogActions>
+    </dsh-base-dialog>
+</ng-container>
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/components/dialog-filters/dialog-filters.component.scss b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/components/dialog-filters/dialog-filters.component.scss
new file mode 100644
index 00000000..b116e682
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/components/dialog-filters/dialog-filters.component.scss
@@ -0,0 +1,24 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.dialog-filters {
+    &-main {
+        display: flex;
+        flex-direction: column;
+
+        & > * {
+            margin-bottom: 24px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        & > dsh-main-filters {
+            margin-bottom: 10px;
+        }
+    }
+}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/components/dialog-filters/dialog-filters.component.ts b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/components/dialog-filters/dialog-filters.component.ts
new file mode 100644
index 00000000..ca4384d0
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/components/dialog-filters/dialog-filters.component.ts
@@ -0,0 +1,125 @@
+import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { AbstractControl, FormBuilder, FormControl, FormGroup } from '@ngneat/reactive-forms';
+
+import { getAbstractControl } from '@dsh/app/shared/utils';
+import { formatMajorAmountToStr, getAmountNum } from '@dsh/app/shared/utils/amount-formatters';
+import { removeDictEmptyFields } from '@dsh/utils';
+
+import { DepositStatusFilterValue } from '../../deposit-status-filter/types/deposit-status-filter-value';
+import { depositStatusValidator } from '../../deposit-status-filter/validators/deposit-status-validator';
+import { DepositSumFilter } from '../../deposit-sum-filter';
+import { MainFilters } from '../../main-filters';
+import { AdditionalFilters } from '../../types/additional-filters';
+import { AdditionalFiltersForm } from '../../types/additional-filters-form';
+
+@Component({
+    selector: 'dsh-dialog-filters',
+    templateUrl: 'dialog-filters.component.html',
+    styleUrls: ['dialog-filters.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DialogFiltersComponent implements OnInit {
+    form: FormGroup<AdditionalFiltersForm> = this.formBuilder.group({
+        main: this.formBuilder.group<MainFilters>({
+            depositID: [''],
+            walletID: [''],
+            identityID: [''],
+            sourceID: [''],
+        }),
+        depositStatus: [null, depositStatusValidator],
+        depositSum: this.formBuilder.group<DepositSumFilter>({
+            min: [''],
+            max: [''],
+        }),
+    });
+
+    get mainFiltersGroup(): FormGroup<MainFilters> {
+        return getAbstractControl<FormGroup<MainFilters>>(this.form, 'main');
+    }
+
+    get statusFilterControl(): FormControl<DepositStatusFilterValue> {
+        return getAbstractControl<FormControl<DepositStatusFilterValue>>(this.form, 'depositStatus');
+    }
+
+    get depositSumFiltersGroup(): FormGroup<DepositSumFilter> {
+        return getAbstractControl<FormGroup<DepositSumFilter>>(this.form, 'depositSum');
+    }
+
+    constructor(
+        @Inject(MAT_DIALOG_DATA) private data: AdditionalFilters,
+        private dialogRef: MatDialogRef<DialogFiltersComponent, AdditionalFilters>,
+        private formBuilder: FormBuilder
+    ) {}
+
+    ngOnInit(): void {
+        this.initForm();
+    }
+
+    clear(): void {
+        this.resetFiltersData();
+    }
+
+    close(): void {
+        this.dialogRef.close(this.data);
+    }
+
+    confirm(): void {
+        this.dialogRef.close(this.getFiltersData());
+    }
+
+    private initForm(): void {
+        this.form.setValue(this.getInitFormValues());
+    }
+
+    private getInitFormValues(): AdditionalFiltersForm {
+        const {
+            depositID = '',
+            walletID = '',
+            identityID = '',
+            sourceID = '',
+            depositStatus = null,
+            depositAmountFrom = null,
+            depositAmountTo = null,
+        } = this.data;
+        return {
+            main: {
+                depositID,
+                walletID,
+                identityID,
+                sourceID,
+            },
+            depositStatus,
+            depositSum: {
+                min: formatMajorAmountToStr(depositAmountFrom),
+                max: formatMajorAmountToStr(depositAmountTo),
+            },
+        };
+    }
+
+    private getFiltersData(): AdditionalFilters {
+        const { min, max } = this.extractGroupValidFields(this.depositSumFiltersGroup);
+
+        return removeDictEmptyFields({
+            ...this.extractGroupValidFields(this.mainFiltersGroup),
+            ...removeDictEmptyFields({
+                depositAmountFrom: getAmountNum(String(min)),
+                depositAmountTo: getAmountNum(String(max)),
+            }),
+            depositStatus: this.statusFilterControl.value,
+        });
+    }
+
+    private extractGroupValidFields<T>(group: FormGroup<T>): Partial<T> {
+        return Object.entries(group.controls).reduce((acc: Partial<T>, [key, control]: [string, AbstractControl]) => {
+            if (control.valid) {
+                acc[key] = control.value;
+            }
+            return acc;
+        }, {});
+    }
+
+    private resetFiltersData(): void {
+        this.form.reset();
+    }
+}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/consts.ts b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/consts.ts
new file mode 100644
index 00000000..cfb26021
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/consts.ts
@@ -0,0 +1,3 @@
+import { DepositStatus } from '@dsh/api-codegen/wallet-api/swagger-codegen/model/depositStatus';
+
+export const DEPOSIT_STATUSES_LIST: DepositStatus.StatusEnum[] = ['Succeeded', 'Failed', 'Pending'];
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/deposit-status-filter.component.html b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/deposit-status-filter.component.html
new file mode 100644
index 00000000..4ca61d11
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/deposit-status-filter.component.html
@@ -0,0 +1,12 @@
+<ng-container *transloco="let t; scope: 'deposits'; read: 'deposits.filter'">
+    <div fxLayout="column" fxLayoutGap="24px">
+        <div class="dsh-title" fxFlex>{{ t('depositStatus') }}</div>
+        <dsh-expandable-radio-group fxFlex [control]="control" [choices]="statuses" anyResponse>
+            <ng-container *ngFor="let status of statuses">
+                <ng-template [dshExpandableRadioGroupItem]="status">
+                    {{ status | depositStatusName }}
+                </ng-template>
+            </ng-container>
+        </dsh-expandable-radio-group>
+    </div>
+</ng-container>
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/deposit-status-filter.component.ts b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/deposit-status-filter.component.ts
new file mode 100644
index 00000000..cd2ea93f
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/deposit-status-filter.component.ts
@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { FormControl } from '@ngneat/reactive-forms';
+
+import { DepositStatus } from '@dsh/api-codegen/wallet-api/swagger-codegen/model/depositStatus';
+
+import { DEPOSIT_STATUSES_LIST } from './consts';
+import { DepositStatusFilterValue } from './types/deposit-status-filter-value';
+
+@Component({
+    selector: 'dsh-deposit-status-filter',
+    templateUrl: './deposit-status-filter.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DepositStatusFilterComponent {
+    @Input() control: FormControl<DepositStatusFilterValue>;
+
+    statuses: DepositStatus.StatusEnum[] = DEPOSIT_STATUSES_LIST;
+}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/deposit-status-filter.module.ts b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/deposit-status-filter.module.ts
new file mode 100644
index 00000000..3b7ffac6
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/deposit-status-filter.module.ts
@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FlexModule } from '@angular/flex-layout';
+import { TranslocoModule } from '@ngneat/transloco';
+
+import { ApiModelTypesModule } from '@dsh/app/shared';
+import { RadioButtonsModule } from '@dsh/app/shared/components/radio-buttons';
+
+import { DepositStatusFilterComponent } from './deposit-status-filter.component';
+
+@NgModule({
+    declarations: [DepositStatusFilterComponent],
+    imports: [FlexModule, CommonModule, TranslocoModule, RadioButtonsModule, ApiModelTypesModule],
+    exports: [DepositStatusFilterComponent],
+})
+export class DepositStatusFilterModule {}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/types/deposit-status-filter-value.ts b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/types/deposit-status-filter-value.ts
new file mode 100644
index 00000000..d3cad2b4
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/types/deposit-status-filter-value.ts
@@ -0,0 +1,3 @@
+import { DepositStatus } from '@dsh/api-codegen/wallet-api/swagger-codegen/model/depositStatus';
+
+export type DepositStatusFilterValue = DepositStatus.StatusEnum | null;
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/validators/deposit-status-validator.ts b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/validators/deposit-status-validator.ts
new file mode 100644
index 00000000..5004e0a3
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-status-filter/validators/deposit-status-validator.ts
@@ -0,0 +1,16 @@
+import { FormControl, ValidatorFn } from '@ngneat/reactive-forms';
+import isNil from 'lodash.isnil';
+
+import { DEPOSIT_STATUSES_LIST } from '../consts';
+import { DepositStatusFilterValue } from '../types/deposit-status-filter-value';
+
+export const depositStatusValidator: ValidatorFn = (control: FormControl<DepositStatusFilterValue>) => {
+    const value = control.value;
+    const isValid = isNil(value) || DEPOSIT_STATUSES_LIST.includes(value);
+
+    return isValid
+        ? null
+        : {
+              depositStatus: true,
+          };
+};
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/deposit-sum-filter.component.html b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/deposit-sum-filter.component.html
new file mode 100644
index 00000000..504a95e2
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/deposit-sum-filter.component.html
@@ -0,0 +1,15 @@
+<ng-container *transloco="let t; scope: 'deposits'; read: 'deposits.filter'">
+    <div fxLayout="column" fxLayoutGap="24px">
+        <div class="dsh-title" fxFlex>{{ t('depositAmount') }}</div>
+        <form [formGroup]="form" fxLayout="row" fxLayoutGap="24px">
+            <mat-form-field fxFlex>
+                <mat-label>{{ t('depositAmountFrom') }}</mat-label>
+                <dsh-format-input format="amount" formControlName="min"></dsh-format-input>
+            </mat-form-field>
+            <mat-form-field fxFlex>
+                <mat-label>{{ t('depositAmountTo') }}</mat-label>
+                <dsh-format-input format="amount" formControlName="max"></dsh-format-input>
+            </mat-form-field>
+        </form>
+    </div>
+</ng-container>
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/deposit-sum-filter.component.scss b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/deposit-sum-filter.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/deposit-sum-filter.component.ts b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/deposit-sum-filter.component.ts
new file mode 100644
index 00000000..a7099d9c
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/deposit-sum-filter.component.ts
@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { FormGroup } from '@ngneat/reactive-forms';
+
+import { DepositSumFilter } from './types/deposit-sum-filter';
+
+@Component({
+    selector: 'dsh-deposit-sum-filter',
+    templateUrl: './deposit-sum-filter.component.html',
+    styleUrls: ['./deposit-sum-filter.component.scss'],
+})
+export class DepositSumFilterComponent {
+    @Input() form: FormGroup<DepositSumFilter>;
+}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/deposit-sum-filter.module.ts b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/deposit-sum-filter.module.ts
new file mode 100644
index 00000000..f242102c
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/deposit-sum-filter.module.ts
@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { TranslocoModule } from '@ngneat/transloco';
+
+import { FormatInputModule } from '@dsh/components/form-controls';
+
+import { DepositSumFilterComponent } from './deposit-sum-filter.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        FormatInputModule,
+        FlexLayoutModule,
+        TranslocoModule,
+        MatFormFieldModule,
+    ],
+    declarations: [DepositSumFilterComponent],
+    exports: [DepositSumFilterComponent],
+})
+export class DepositSumFilterModule {}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/index.ts b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/index.ts
new file mode 100644
index 00000000..73095eaa
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/index.ts
@@ -0,0 +1,3 @@
+export * from './deposit-sum-filter.module';
+export * from './deposit-sum-filter.component';
+export * from './types/deposit-sum-filter';
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/types/deposit-sum-filter.ts b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/types/deposit-sum-filter.ts
new file mode 100644
index 00000000..576519f4
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/deposit-sum-filter/types/deposit-sum-filter.ts
@@ -0,0 +1,5 @@
+export interface DepositSumFilter {
+    // format input gets string and should return number but it's not always happening
+    min: string | number;
+    max: string | number;
+}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/index.ts b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/index.ts
new file mode 100644
index 00000000..cb9c66b5
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/index.ts
@@ -0,0 +1 @@
+export * from './additional-filters.module';
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/main-filters/index.ts b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/main-filters/index.ts
new file mode 100644
index 00000000..50488f9b
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/main-filters/index.ts
@@ -0,0 +1,3 @@
+export * from './main-filters.module';
+export * from './main-filters.component';
+export * from './types/main-filters';
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/main-filters/main-filters.component.html b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/main-filters/main-filters.component.html
new file mode 100644
index 00000000..5d7c5398
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/main-filters/main-filters.component.html
@@ -0,0 +1,24 @@
+<ng-container *transloco="let t; scope: 'deposits'; read: 'deposits.filter'">
+    <form [formGroup]="form">
+        <div fxLayout="row" fxLayoutAlign="space-between" fxLayoutGap="24px">
+            <mat-form-field fxFlex>
+                <mat-label>{{ t('depositID') }}</mat-label>
+                <input aria-label="depositID" matInput type="text" formControlName="depositID" />
+            </mat-form-field>
+            <mat-form-field fxFlex>
+                <mat-label>{{ t('walletID') }}</mat-label>
+                <input aria-label="walletID" matInput type="text" formControlName="walletID" />
+            </mat-form-field>
+        </div>
+        <div fxLayout="row" fxLayoutAlign="space-between" fxLayoutGap="24px">
+            <mat-form-field fxFlex>
+                <mat-label>{{ t('identityID') }}</mat-label>
+                <input aria-label="identityID" matInput type="text" formControlName="identityID" />
+            </mat-form-field>
+            <mat-form-field fxFlex>
+                <mat-label>{{ t('sourceID') }}</mat-label>
+                <input aria-label="sourceID" matInput type="text" formControlName="sourceID" />
+            </mat-form-field>
+        </div>
+    </form>
+</ng-container>
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/main-filters/main-filters.component.ts b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/main-filters/main-filters.component.ts
new file mode 100644
index 00000000..63e27ccf
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/main-filters/main-filters.component.ts
@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { FormGroup } from '@ngneat/reactive-forms';
+
+import { MainFilters } from './types/main-filters';
+
+@Component({
+    selector: 'dsh-main-filters',
+    templateUrl: './main-filters.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MainFiltersComponent {
+    @Input() form: FormGroup<MainFilters>;
+}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/main-filters/main-filters.module.ts b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/main-filters/main-filters.module.ts
new file mode 100644
index 00000000..f8be1faa
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/main-filters/main-filters.module.ts
@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { TranslocoModule } from '@ngneat/transloco';
+
+import { MainFiltersComponent } from './main-filters.component';
+
+@NgModule({
+    imports: [CommonModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, FlexLayoutModule, TranslocoModule],
+    declarations: [MainFiltersComponent],
+    exports: [MainFiltersComponent],
+})
+export class MainFiltersModule {}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/main-filters/types/main-filters.ts b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/main-filters/types/main-filters.ts
new file mode 100644
index 00000000..b6933b12
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/main-filters/types/main-filters.ts
@@ -0,0 +1,6 @@
+export interface MainFilters {
+    depositID?: string;
+    walletID?: string;
+    identityID?: string;
+    sourceID?: string;
+}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/types/additional-filters-form.ts b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/types/additional-filters-form.ts
new file mode 100644
index 00000000..3148188f
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/types/additional-filters-form.ts
@@ -0,0 +1,9 @@
+import { DepositStatusFilterValue } from '../deposit-status-filter/types/deposit-status-filter-value';
+import { DepositSumFilter } from '../deposit-sum-filter';
+import { MainFilters } from '../main-filters';
+
+export interface AdditionalFiltersForm {
+    main: MainFilters;
+    depositStatus: DepositStatusFilterValue;
+    depositSum: DepositSumFilter;
+}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/types/additional-filters.ts b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/types/additional-filters.ts
new file mode 100644
index 00000000..f9244b13
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/types/additional-filters.ts
@@ -0,0 +1,9 @@
+import { DepositStatus } from '@dsh/api-codegen/wallet-api';
+
+import { MainFilters } from '../main-filters';
+import { DepositAmountFilterData } from './deposit-amount-filter-data';
+
+export type AdditionalFilters = Partial<MainFilters> &
+    Partial<DepositAmountFilterData> & {
+        depositStatus?: DepositStatus.StatusEnum;
+    };
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/types/deposit-amount-filter-data.ts b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/types/deposit-amount-filter-data.ts
new file mode 100644
index 00000000..44073867
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/types/deposit-amount-filter-data.ts
@@ -0,0 +1,4 @@
+export interface DepositAmountFilterData {
+    depositAmountFrom: number;
+    depositAmountTo: number;
+}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/deposits-filters.component.html b/src/app/sections/wallet-section/deposits/deposits-filters/deposits-filters.component.html
new file mode 100644
index 00000000..3d58e046
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/deposits-filters.component.html
@@ -0,0 +1,13 @@
+<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
+    <ng-container *ngIf="filtersData$ | async as filters">
+        <dsh-daterange-filter
+            [selected]="filters.daterange"
+            (selectedChange)="dateRangeChange($event)"
+        ></dsh-daterange-filter>
+        <ng-container *transloco="let t; read: 'filters'">
+            <dsh-filter-button [active]="isAdditionalFilterApplied" (click)="openFiltersDialog()">
+                {{ t('additionalFilters') }}
+            </dsh-filter-button>
+        </ng-container>
+    </ng-container>
+</div>
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/deposits-filters.component.ts b/src/app/sections/wallet-section/deposits/deposits-filters/deposits-filters.component.ts
new file mode 100644
index 00000000..eedf00a2
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/deposits-filters.component.ts
@@ -0,0 +1,70 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import isEmpty from 'lodash.isempty';
+import { Observable } from 'rxjs';
+import { map, switchMap, take } from 'rxjs/operators';
+
+import { Daterange } from '@dsh/pipes/daterange';
+
+import { AdditionalFiltersService } from './additional-filters/additional-filters.service';
+import { AdditionalFilters } from './additional-filters/types/additional-filters';
+import { DepositsFiltersStoreService } from './services/deposits-filters-store/deposits-filters-store.service';
+import { DepositsFiltersService } from './services/deposits-filters/deposits-filters.service';
+import { DepositsFiltersData } from './types/deposits-filters-data';
+
+@UntilDestroy()
+@Component({
+    templateUrl: 'deposits-filters.component.html',
+    selector: 'dsh-deposits-filters',
+    providers: [DepositsFiltersService, DepositsFiltersStoreService],
+})
+export class DepositsFiltersComponent implements OnInit {
+    @Output() filtersChanged = new EventEmitter<DepositsFiltersData>();
+
+    filtersData$: Observable<DepositsFiltersData> = this.filtersHandler.filtersData$;
+
+    isAdditionalFilterApplied: boolean;
+
+    constructor(private filtersHandler: DepositsFiltersService, private additionalFilters: AdditionalFiltersService) {}
+
+    ngOnInit(): void {
+        this.filtersData$.pipe(untilDestroyed(this)).subscribe((filtersData: DepositsFiltersData) => {
+            this.filtersChanged.emit(filtersData);
+            const { additional = {} } = filtersData;
+            this.updateAdditionalFiltersStatus(additional);
+        });
+    }
+
+    dateRangeChange(dateRange: Daterange): void {
+        this.updateFilters({ daterange: dateRange });
+    }
+
+    openFiltersDialog(): void {
+        this.filtersData$
+            .pipe(
+                take(1),
+                map((filtersData: DepositsFiltersData) => filtersData.additional ?? {}),
+                switchMap((filters: AdditionalFilters) => this.additionalFilters.openFiltersDialog(filters)),
+                untilDestroyed(this)
+            )
+            .subscribe((filters: AdditionalFilters) => {
+                this.updateAdditionalFiltersValues(filters);
+            });
+    }
+
+    private updateFilters(change: Partial<DepositsFiltersData>): void {
+        this.filtersHandler.changeFilters({
+            ...change,
+        });
+    }
+
+    private updateAdditionalFiltersValues(additional: AdditionalFilters): void {
+        this.updateFilters({
+            additional,
+        });
+    }
+
+    private updateAdditionalFiltersStatus(additional: AdditionalFilters): void {
+        this.isAdditionalFilterApplied = !isEmpty(additional);
+    }
+}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/deposits-filters.module.ts b/src/app/sections/wallet-section/deposits/deposits-filters/deposits-filters.module.ts
new file mode 100644
index 00000000..9fc8a401
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/deposits-filters.module.ts
@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FlexModule } from '@angular/flex-layout';
+import { TranslocoModule } from '@ngneat/transloco';
+
+import { DaterangeManagerModule } from '@dsh/app/shared/services/date-range-manager';
+import { FiltersModule } from '@dsh/components/filters';
+
+import { AdditionalFiltersModule } from './additional-filters';
+import { DepositsFiltersComponent } from './deposits-filters.component';
+
+@NgModule({
+    imports: [
+        DaterangeManagerModule,
+        FlexModule,
+        CommonModule,
+        FiltersModule,
+        TranslocoModule,
+        AdditionalFiltersModule,
+    ],
+    declarations: [DepositsFiltersComponent],
+    exports: [DepositsFiltersComponent],
+})
+export class DepositsFiltersModule {}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/index.ts b/src/app/sections/wallet-section/deposits/deposits-filters/index.ts
new file mode 100644
index 00000000..542e2936
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/index.ts
@@ -0,0 +1 @@
+export * from './deposits-filters.module';
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/services/deposits-filters-store/deposits-filters-store.service.ts b/src/app/sections/wallet-section/deposits/deposits-filters/services/deposits-filters-store/deposits-filters-store.service.ts
new file mode 100644
index 00000000..5b403f69
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/services/deposits-filters-store/deposits-filters-store.service.ts
@@ -0,0 +1,60 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import isNil from 'lodash.isnil';
+
+import { QueryParamsStore } from '@dsh/app/shared/services';
+import { DaterangeManagerService } from '@dsh/app/shared/services/date-range-manager';
+import { Daterange } from '@dsh/pipes/daterange';
+import { removeDictEmptyFields } from '@dsh/utils';
+
+import { DepositsFiltersData } from '../../types/deposits-filters-data';
+import { formatDepositAmountDataToParams } from '../../utils/format-deposit-amount-data-to-params';
+import { getDepositAmountDataFromParams } from '../../utils/get-deposit-amount-data-from-params';
+
+@Injectable()
+export class DepositsFiltersStoreService extends QueryParamsStore<DepositsFiltersData> {
+    constructor(
+        private daterangeManager: DaterangeManagerService,
+        protected router: Router,
+        protected route: ActivatedRoute
+    ) {
+        super(router, route);
+    }
+
+    mapToData(params: Params): Partial<DepositsFiltersData> {
+        const { fromTime, toTime, depositAmountFrom, depositAmountTo, ...restParams } = params;
+
+        return removeDictEmptyFields({
+            daterange: this.formatDaterange(fromTime, toTime),
+            additional: {
+                ...getDepositAmountDataFromParams({
+                    depositAmountTo,
+                    depositAmountFrom,
+                }),
+                ...restParams,
+            },
+        });
+    }
+
+    mapToParams({ daterange, additional, ...restData }: DepositsFiltersData): Params {
+        const { begin: fromTime, end: toTime } = this.daterangeManager.serializeDateRange(daterange);
+        const { depositAmountFrom, depositAmountTo, ...restAdditional } = additional ?? {};
+
+        return removeDictEmptyFields({
+            fromTime,
+            toTime,
+            ...formatDepositAmountDataToParams({
+                depositAmountFrom,
+                depositAmountTo,
+            }),
+            ...restAdditional,
+            ...restData,
+        });
+    }
+
+    private formatDaterange(fromTime: string | undefined, toTime: string | undefined): Daterange | null {
+        return isNil(fromTime) || isNil(toTime)
+            ? null
+            : this.daterangeManager.deserializeDateRange({ begin: fromTime, end: toTime });
+    }
+}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/services/deposits-filters/deposits-filters.service.ts b/src/app/sections/wallet-section/deposits/deposits-filters/services/deposits-filters/deposits-filters.service.ts
new file mode 100644
index 00000000..9ba9d302
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/services/deposits-filters/deposits-filters.service.ts
@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { Observable, ReplaySubject } from 'rxjs';
+import { map, withLatestFrom } from 'rxjs/operators';
+
+import { DaterangeManagerService } from '@dsh/app/shared/services/date-range-manager';
+
+import { DepositsFiltersData } from '../../types/deposits-filters-data';
+import { DepositsFiltersStoreService } from '../deposits-filters-store/deposits-filters-store.service';
+
+@UntilDestroy()
+@Injectable()
+export class DepositsFiltersService {
+    filtersData$: Observable<DepositsFiltersData>;
+
+    private filtersChange$ = new ReplaySubject<Partial<DepositsFiltersData>>(1);
+
+    constructor(
+        private daterangeManager: DaterangeManagerService,
+        private filtersParamsStore: DepositsFiltersStoreService
+    ) {
+        this.initFiltersData();
+        this.initUpdatesData();
+    }
+
+    changeFilters(dataChange: Partial<DepositsFiltersData>): void {
+        this.filtersChange$.next(dataChange);
+    }
+
+    private initFiltersData(): void {
+        this.filtersData$ = this.filtersParamsStore.data$.pipe(
+            map((storeData: Partial<DepositsFiltersData>) => {
+                return {
+                    daterange: this.daterangeManager.defaultDaterange,
+                    ...storeData,
+                };
+            })
+        );
+    }
+
+    private initUpdatesData(): void {
+        this.filtersChange$
+            .pipe(
+                withLatestFrom(this.filtersData$),
+                map(([dataChange, filtersData]: [Partial<DepositsFiltersData>, DepositsFiltersData]) => {
+                    return {
+                        ...filtersData,
+                        ...dataChange,
+                    };
+                }),
+                untilDestroyed(this)
+            )
+            .subscribe((updatedData: DepositsFiltersData) => {
+                this.filtersParamsStore.preserve(updatedData);
+            });
+    }
+}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/types/deposit-amount-params.ts b/src/app/sections/wallet-section/deposits/deposits-filters/types/deposit-amount-params.ts
new file mode 100644
index 00000000..63e1610a
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/types/deposit-amount-params.ts
@@ -0,0 +1,4 @@
+export interface DepositAmountParams {
+    depositAmountFrom: string;
+    depositAmountTo: string;
+}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/types/deposits-filters-data.ts b/src/app/sections/wallet-section/deposits/deposits-filters/types/deposits-filters-data.ts
new file mode 100644
index 00000000..f72f625f
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/types/deposits-filters-data.ts
@@ -0,0 +1,8 @@
+import { Daterange } from '@dsh/pipes/daterange';
+
+import { AdditionalFilters } from '../additional-filters/types/additional-filters';
+
+export interface DepositsFiltersData {
+    daterange: Daterange;
+    additional?: AdditionalFilters;
+}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/utils/format-deposit-amount-data-to-params.ts b/src/app/sections/wallet-section/deposits/deposits-filters/utils/format-deposit-amount-data-to-params.ts
new file mode 100644
index 00000000..387a4cf4
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/utils/format-deposit-amount-data-to-params.ts
@@ -0,0 +1,16 @@
+import { isNumber } from '@dsh/app/shared/utils';
+import { toMinor } from '@dsh/utils';
+
+import { DepositAmountFilterData } from '../additional-filters/types/deposit-amount-filter-data';
+import { DepositAmountParams } from '../types/deposit-amount-params';
+
+export function formatDepositAmountDataToParams({
+    depositAmountFrom,
+    depositAmountTo,
+}: Partial<DepositAmountFilterData>): DepositAmountParams {
+    return {
+        depositAmountFrom:
+            isNumber(depositAmountFrom) && !isNaN(depositAmountFrom) ? String(toMinor(depositAmountFrom)) : null,
+        depositAmountTo: isNumber(depositAmountTo) && !isNaN(depositAmountTo) ? String(toMinor(depositAmountTo)) : null,
+    };
+}
diff --git a/src/app/sections/wallet-section/deposits/deposits-filters/utils/get-deposit-amount-data-from-params.ts b/src/app/sections/wallet-section/deposits/deposits-filters/utils/get-deposit-amount-data-from-params.ts
new file mode 100644
index 00000000..1be4793d
--- /dev/null
+++ b/src/app/sections/wallet-section/deposits/deposits-filters/utils/get-deposit-amount-data-from-params.ts
@@ -0,0 +1,19 @@
+import isNil from 'lodash.isnil';
+
+import { removeDictEmptyFields, toMajor } from '@dsh/utils';
+
+import { DepositAmountFilterData } from '../additional-filters/types/deposit-amount-filter-data';
+import { DepositAmountParams } from '../types/deposit-amount-params';
+
+export function getDepositAmountDataFromParams({
+    depositAmountFrom,
+    depositAmountTo,
+}: Partial<DepositAmountParams>): Partial<DepositAmountFilterData> {
+    const amountFromNum = Number(depositAmountFrom);
+    const amountToNum = Number(depositAmountTo);
+
+    return removeDictEmptyFields({
+        depositAmountFrom: isNil(depositAmountFrom) || isNaN(amountFromNum) ? null : toMajor(amountFromNum),
+        depositAmountTo: isNil(depositAmountTo) || isNaN(amountToNum) ? null : toMajor(amountToNum),
+    });
+}
diff --git a/src/app/sections/wallet-section/deposits/deposits.component.html b/src/app/sections/wallet-section/deposits/deposits.component.html
index bfeb88d3..ab2156df 100644
--- a/src/app/sections/wallet-section/deposits/deposits.component.html
+++ b/src/app/sections/wallet-section/deposits/deposits.component.html
@@ -1,13 +1,17 @@
-<div class="dsh-deposits" fxLayout="column" fxLayoutGap="16px">
+<div class="dsh-deposits" fxLayout="column" fxLayoutGap="48px">
     <h1 class="mat-display-1" *transloco="let t; scope: 'deposits'; read: 'deposits'">{{ t('title') }}</h1>
-    <dsh-search-form></dsh-search-form>
-    <dsh-last-updated [lastUpdated]="lastUpdated$ | async" (update)="refreshList()"></dsh-last-updated>
-    <dsh-deposit-panels
-        [list]="deposits$ | async"
-        [isLoading]="isLoading$ | async"
-        [hasMore]="hasMore$ | async"
-        [expandedId]="expandedId$ | async"
-        (showMore)="requestNextPage()"
-        (expandedIdChanged)="expandedIdChange($event)"
-    ></dsh-deposit-panels>
+    <div fxLayout="column" fxLayoutGap="24px">
+        <dsh-deposits-filters (filtersChanged)="filtersChanged($event)"></dsh-deposits-filters>
+        <div fxLayout="column" fxLayoutGap="16px">
+            <dsh-last-updated [lastUpdated]="lastUpdated$ | async" (update)="refreshList()"></dsh-last-updated>
+            <dsh-deposit-panels
+                [list]="deposits$ | async"
+                [isLoading]="isLoading$ | async"
+                [hasMore]="hasMore$ | async"
+                [expandedId]="expandedId$ | async"
+                (showMore)="requestNextPage()"
+                (expandedIdChanged)="expandedIdChange($event)"
+            ></dsh-deposit-panels>
+        </div>
+    </div>
 </div>
diff --git a/src/app/sections/wallet-section/deposits/deposits.component.ts b/src/app/sections/wallet-section/deposits/deposits.component.ts
index 0b0cfe5b..d5c9dd7e 100644
--- a/src/app/sections/wallet-section/deposits/deposits.component.ts
+++ b/src/app/sections/wallet-section/deposits/deposits.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 
-import { DepositsSearchParams } from '@dsh/api';
 import { ErrorService } from '@dsh/app/shared';
 
+import { DepositsFiltersData } from './deposits-filters/types/deposits-filters-data';
 import { DepositsExpandedIdManagerService } from './services/deposits-expanded-id-manager.service';
 import { FetchDepositsService } from './services/fetch-deposits.service';
 
@@ -38,7 +38,7 @@ export class DepositsComponent implements OnInit {
         this.fetchDepositsService.fetchMore();
     }
 
-    filtersChanged(filtersData: DepositsSearchParams): void {
+    filtersChanged(filtersData: DepositsFiltersData): void {
         this.requestList(filtersData);
     }
 
@@ -50,7 +50,23 @@ export class DepositsComponent implements OnInit {
         this.depositsExpandedIdManagerService.expandedIdChange(id);
     }
 
-    private requestList(filtersData: DepositsSearchParams = null): void {
-        this.fetchDepositsService.search(filtersData);
+    private requestList(filtersData: DepositsFiltersData = null): void {
+        const {
+            daterange: { begin, end },
+            additional,
+        } = filtersData;
+        const { depositAmountTo, depositAmountFrom, depositID, walletID, identityID, sourceID, depositStatus } =
+            additional || {};
+        this.fetchDepositsService.search({
+            fromTime: begin.utc().format(),
+            toTime: end.utc().format(),
+            walletID,
+            identityID,
+            sourceID,
+            depositID,
+            status: depositStatus,
+            amountFrom: depositAmountFrom,
+            amountTo: depositAmountTo,
+        });
     }
 }
diff --git a/src/app/sections/wallet-section/deposits/deposits.module.ts b/src/app/sections/wallet-section/deposits/deposits.module.ts
index f2c8c110..b6dc2378 100644
--- a/src/app/sections/wallet-section/deposits/deposits.module.ts
+++ b/src/app/sections/wallet-section/deposits/deposits.module.ts
@@ -17,9 +17,9 @@ import { ShowMorePanelModule } from '@dsh/components/show-more-panel';
 
 import { DEPOSITS_UPDATE_DELAY, UPDATE_DELAY_TOKEN } from './consts';
 import { DepositPanelsModule } from './deposit-panels';
+import { DepositsFiltersModule } from './deposits-filters';
 import { DepositsRoutingModule } from './deposits-routing.module';
 import { DepositsComponent } from './deposits.component';
-import { SearchFormComponent } from './search-form';
 
 @NgModule({
     imports: [
@@ -39,8 +39,9 @@ import { SearchFormComponent } from './search-form';
         ButtonModule,
         MatInputModule,
         IndicatorsModule,
+        DepositsFiltersModule,
     ],
-    declarations: [DepositsComponent, SearchFormComponent],
+    declarations: [DepositsComponent],
     providers: [
         DepositsService,
         { provide: SEARCH_LIMIT, useValue: 10 },
diff --git a/src/app/sections/wallet-section/deposits/search-form/form-params.ts b/src/app/sections/wallet-section/deposits/search-form/form-params.ts
deleted file mode 100644
index 66058cc4..00000000
--- a/src/app/sections/wallet-section/deposits/search-form/form-params.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { DepositStatus } from '@dsh/api-codegen/wallet-api/swagger-codegen';
-import { Range } from '@dsh/components/form-controls';
-
-export interface FormParams {
-    date: Range;
-    walletID?: string;
-    identityID?: string;
-    depositID?: string;
-    sourceID?: string;
-    status?: DepositStatus.StatusEnum;
-    amountFrom?: number;
-    amountTo?: number;
-    currencyID?: string;
-}
diff --git a/src/app/sections/wallet-section/deposits/search-form/index.ts b/src/app/sections/wallet-section/deposits/search-form/index.ts
deleted file mode 100644
index d0281359..00000000
--- a/src/app/sections/wallet-section/deposits/search-form/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './search-form.component';
diff --git a/src/app/sections/wallet-section/deposits/search-form/query-params.ts b/src/app/sections/wallet-section/deposits/search-form/query-params.ts
deleted file mode 100644
index 33970e3b..00000000
--- a/src/app/sections/wallet-section/deposits/search-form/query-params.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { DepositStatus } from '@dsh/api-codegen/wallet-api/swagger-codegen';
-
-export interface QueryParams {
-    fromTime: string;
-    toTime: string;
-    walletID?: string;
-    identityID?: string;
-    depositID?: string;
-    sourceID?: string;
-    status?: DepositStatus.StatusEnum;
-    amountFrom?: number;
-    amountTo?: number;
-    currencyID?: string;
-}
diff --git a/src/app/sections/wallet-section/deposits/search-form/search-form.component.html b/src/app/sections/wallet-section/deposits/search-form/search-form.component.html
deleted file mode 100644
index 1a6d884a..00000000
--- a/src/app/sections/wallet-section/deposits/search-form/search-form.component.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<dsh-float-panel
-    *transloco="let t; scope: 'deposits'; read: 'deposits.filter'"
-    [formGroup]="form"
-    [(expanded)]="expanded"
->
-    <ng-container *transloco="let c">
-        <dsh-justify-wrapper fxLayout fxLayout.sm="column" fxLayoutGap="20px">
-            <dsh-range-datepicker fxFlex formControlName="date"></dsh-range-datepicker>
-            <mat-form-field fxFlex>
-                <mat-label>{{ t('depositStatus') }}</mat-label>
-                <mat-select formControlName="status">
-                    <mat-option>
-                        {{ c('any') }}
-                    </mat-option>
-                    <mat-option *ngFor="let status of depositStatuses" [value]="status">
-                        <span *transloco="let depositStatus; read: 'depositStatus'">{{ depositStatus(status) }}</span>
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
-        </dsh-justify-wrapper>
-        <dsh-float-panel-actions>
-            <button dsh-button (click)="reset()">
-                {{ c('resetSearchParams') }}
-            </button>
-        </dsh-float-panel-actions>
-        <dsh-float-panel-more>
-            <div fxLayout fxLayout.sm="column" fxLayoutGap="20px">
-                <mat-form-field fxFlex>
-                    <mat-label>{{ t('depositID') }}</mat-label>
-                    <input matInput type="text" formControlName="depositID" />
-                </mat-form-field>
-                <mat-form-field fxFlex>
-                    <mat-label>{{ t('walletID') }}</mat-label>
-                    <input matInput type="text" formControlName="walletID" />
-                </mat-form-field>
-            </div>
-            <div fxLayout fxLayout.sm="column" fxLayoutGap="20px">
-                <mat-form-field fxFlex>
-                    <mat-label>{{ t('identityID') }}</mat-label>
-                    <input matInput type="text" formControlName="identityID" />
-                </mat-form-field>
-                <mat-form-field fxFlex>
-                    <mat-label>{{ t('sourceID') }}</mat-label>
-                    <input matInput type="text" formControlName="sourceID" />
-                </mat-form-field>
-            </div>
-            <div fxLayout fxLayout.sm="column" fxLayoutGap="20px">
-                <mat-form-field fxFlex>
-                    <mat-label>{{ t('amountFrom') }}</mat-label>
-                    <input matInput type="number" formControlName="amountFrom" />
-                </mat-form-field>
-                <mat-form-field fxFlex>
-                    <mat-label>{{ t('amountTo') }}</mat-label>
-                    <input matInput type="number" formControlName="amountTo" />
-                </mat-form-field>
-            </div>
-            <div fxLayout fxLayout.sm="column" fxLayoutGap="20px">
-                <mat-form-field fxFlex>
-                    <mat-label>{{ t('currencyID') }}</mat-label>
-                    <input matInput type="text" formControlName="currencyID" />
-                </mat-form-field>
-            </div>
-        </dsh-float-panel-more>
-    </ng-container>
-</dsh-float-panel>
diff --git a/src/app/sections/wallet-section/deposits/search-form/search-form.component.ts b/src/app/sections/wallet-section/deposits/search-form/search-form.component.ts
deleted file mode 100644
index b0bf923a..00000000
--- a/src/app/sections/wallet-section/deposits/search-form/search-form.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component } from '@angular/core';
-
-import { DepositStatus } from '@dsh/api-codegen/wallet-api/swagger-codegen';
-
-import { SearchFormService } from './search-form.service';
-
-@Component({
-    selector: 'dsh-search-form',
-    templateUrl: 'search-form.component.html',
-    providers: [SearchFormService],
-})
-export class SearchFormComponent {
-    form = this.searchFormService.form;
-    reset = this.searchFormService.reset;
-
-    depositStatuses: DepositStatus.StatusEnum[] = ['Pending', 'Succeeded', 'Failed'];
-
-    expanded = false;
-
-    constructor(private searchFormService: SearchFormService) {}
-}
diff --git a/src/app/sections/wallet-section/deposits/search-form/search-form.service.ts b/src/app/sections/wallet-section/deposits/search-form/search-form.service.ts
deleted file mode 100644
index 04d8ac46..00000000
--- a/src/app/sections/wallet-section/deposits/search-form/search-form.service.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Injectable } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
-import moment from 'moment';
-import { map, startWith } from 'rxjs/operators';
-
-import { FetchDepositsService } from '../services/fetch-deposits.service';
-import { FormParams } from './form-params';
-import { toFormValue } from './to-form-value';
-import { toQueryParams } from './to-query-params';
-import { toSearchParams } from './to-search-params';
-
-@Injectable()
-export class SearchFormService {
-    static defaultParams: FormParams = {
-        date: {
-            begin: moment().startOf('month'),
-            end: moment().endOf('month'),
-        },
-        walletID: null,
-        identityID: null,
-        depositID: null,
-        sourceID: null,
-        status: null,
-        amountFrom: null,
-        amountTo: null,
-        currencyID: null,
-    };
-
-    form = this.fb.group(SearchFormService.defaultParams);
-
-    constructor(
-        private fb: FormBuilder,
-        private route: ActivatedRoute,
-        private router: Router,
-        private depositsService: FetchDepositsService
-    ) {
-        this.init();
-    }
-
-    search(value) {
-        this.depositsService.search(toSearchParams(value));
-    }
-
-    reset() {
-        this.form.setValue(SearchFormService.defaultParams);
-    }
-
-    private init() {
-        this.syncQueryParams();
-        this.form.valueChanges.pipe(startWith(this.form.value)).subscribe((v) => this.search(v));
-    }
-
-    private syncQueryParams() {
-        const formValue = toFormValue(this.route.snapshot.queryParams, SearchFormService.defaultParams);
-        this.form.setValue(formValue);
-        this.form.valueChanges.pipe(startWith(formValue), map(toQueryParams)).subscribe((queryParams) => {
-            this.router.navigate([location.pathname], { queryParams });
-        });
-    }
-}
diff --git a/src/app/sections/wallet-section/deposits/search-form/to-form-value.ts b/src/app/sections/wallet-section/deposits/search-form/to-form-value.ts
deleted file mode 100644
index 1eecb278..00000000
--- a/src/app/sections/wallet-section/deposits/search-form/to-form-value.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Params } from '@angular/router';
-import moment from 'moment';
-
-import { FormParams } from './form-params';
-
-export function toFormValue({ fromTime, toTime, ...params }: Params, defaultParams: FormParams): FormParams {
-    return {
-        ...defaultParams,
-        ...params,
-        date: {
-            begin: fromTime ? moment(fromTime) : defaultParams.date.begin,
-            end: toTime ? moment(toTime) : defaultParams.date.end,
-        },
-    };
-}
diff --git a/src/app/sections/wallet-section/deposits/search-form/to-query-params.ts b/src/app/sections/wallet-section/deposits/search-form/to-query-params.ts
deleted file mode 100644
index cc0cddcb..00000000
--- a/src/app/sections/wallet-section/deposits/search-form/to-query-params.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { FormParams } from './form-params';
-import { QueryParams } from './query-params';
-
-export function toQueryParams({ date, ...params }: FormParams): QueryParams {
-    return {
-        ...params,
-        fromTime: date.begin.utc().format(),
-        toTime: date.end.utc().format(),
-    };
-}
diff --git a/src/app/sections/wallet-section/deposits/search-form/to-search-params.ts b/src/app/sections/wallet-section/deposits/search-form/to-search-params.ts
deleted file mode 100644
index 1ca77813..00000000
--- a/src/app/sections/wallet-section/deposits/search-form/to-search-params.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { DepositsSearchParams } from '@dsh/api/deposits';
-
-import { FormParams } from './form-params';
-
-export function toSearchParams({ date, ...params }: FormParams): DepositsSearchParams {
-    return {
-        ...params,
-        fromTime: date.begin.utc().format(),
-        toTime: date.end.utc().format(),
-    };
-}
diff --git a/src/app/sections/wallet-section/deposits/services/fetch-deposits.service.ts b/src/app/sections/wallet-section/deposits/services/fetch-deposits.service.ts
index e252f160..5484eb19 100644
--- a/src/app/sections/wallet-section/deposits/services/fetch-deposits.service.ts
+++ b/src/app/sections/wallet-section/deposits/services/fetch-deposits.service.ts
@@ -7,6 +7,8 @@ import { catchError } from 'rxjs/operators';
 import { Deposit } from '@dsh/api-codegen/wallet-api/swagger-codegen';
 import { DepositsSearchParams, DepositsService as DepositsApiService } from '@dsh/api/deposits';
 import { SEARCH_LIMIT } from '@dsh/app/sections/tokens';
+import { isNumber } from '@dsh/app/shared/utils';
+import { toMinor } from '@dsh/utils';
 
 import { DEBOUNCE_FETCHER_ACTION_TIME, IndicatorsPartialFetcher } from '../../../partial-fetcher';
 
@@ -24,12 +26,22 @@ export class FetchDepositsService extends IndicatorsPartialFetcher<Deposit, Depo
         super(searchLimit, debounceActionTime);
     }
 
-    protected fetch(params: DepositsSearchParams, continuationToken: string) {
-        return this.depositsService.listDeposits({ ...params }, this.searchLimit, continuationToken).pipe(
-            catchError(() => {
-                this.snackBar.open(this.transloco.translate('httpError'), 'OK');
-                return of({ result: [] });
-            })
-        );
+    protected fetch({ amountTo, amountFrom, ...params }: DepositsSearchParams, continuationToken: string) {
+        return this.depositsService
+            .listDeposits(
+                {
+                    ...params,
+                    amountFrom: isNumber(amountFrom) ? toMinor(amountFrom) : undefined,
+                    amountTo: isNumber(amountTo) ? toMinor(amountTo) : undefined,
+                },
+                this.searchLimit,
+                continuationToken
+            )
+            .pipe(
+                catchError(() => {
+                    this.snackBar.open(this.transloco.translate('httpError'), 'OK');
+                    return of({ result: [] });
+                })
+            );
     }
 }
diff --git a/src/assets/i18n/deposits/ru.json b/src/assets/i18n/deposits/ru.json
index 7650690b..0d1bcad8 100644
--- a/src/assets/i18n/deposits/ru.json
+++ b/src/assets/i18n/deposits/ru.json
@@ -6,9 +6,9 @@
         "identityID": "Идентификатор владельца",
         "depositID": "Идентификатор пополнения",
         "sourceID": "Идентификатор источника",
-        "amountFrom": "Сумма от",
-        "amountTo": "Сумма до",
-        "currencyID": "Валюта"
+        "depositAmount": "Сумма пополнения",
+        "depositAmountFrom": "Мин. сумма",
+        "depositAmountTo": "Макс. сумма"
     },
     "headerRow": {
         "amount": "Сумма",