rub-3003, New Deposit Form

.stylelintrc.js

@@ -7,12 +7,13 @@ module.exports = {
       true,
       {
         'border-in-box-model': false,
-        'empty-line-between-groups': true
+        'empty-line-between-groups': false
       }
     ],
     /* css rules */
     'selector-type-no-unknown': null,
     'at-rule-no-unknown': null,
+    'order/properties-order': null,
     'order/properties-alphabetical-order': null,
     'max-nesting-depth': 8, // Better if <= 4. Now it's 8 because of current css state of project.
     'selector-no-vendor-prefix': null,

RUB-3003.md

@@ -0,0 +1,73 @@
+TODO:
+
+- fix doubled alerts on swap error
+- ++ fix /swap error "Trade can not be executed. You have not enough balance on
+  0x2210f8de2f3406aa38e7388c176b5e5c9b8352e8 wallet address."
+- ++'Connect Wallet & Send' always same text even if wallet is connected
+- ++fix tradeId crosses formTitle on mobile
+- ++ add mobile UI
+- ++ add success modal OR ask maybe add success info in 4 step when it's done, because statuses will
+  be not visible otherwise
+- remove SwapPrivateResponseInterface from monorepo
+- ++ add data/to/value in swap response
+- ++ pass receiver and refund params in CrossChainService.swapTrade and OnChainService.swapTrade
+
+**DEPOSIT_FORM_STATES: DepositFormState**
+
+- TRADE_EXPIRED
+- IDLE
+- WAITING_FOR_SENDING_DEPOSIT
+- STATUS_TRACKING: DepositTradeStatus(awaiting, confirming, exchanging, sending_to_receiver,
+  completed)
+- COMPLETED
+
+**DEPOSIT_TRADE_STEPS: DepositTradeStep**
+
+- EXCHANGE_DETAILS
+- INPUT_ADDRESSES
+- TRADE_INFO
+- TRADE_STATUS
+
+`service class DepositFormManager`
+
+- public closeForm(): void { this.depositStatusSrv.stopPolling() } - called in onDestroy hook
+- private depositFormState: DepositFormState
+- private _steps$ = nwe BehaviourSubject<Array<DepositStep | DepositStepWithBtn>>([])
+- public steps$ = this._steps$.asObservable()
+- private setLockedSteps(): void
+- private setUnlockedSteps(): void
+- public setDepositFormState(state: DepositFormState): void
+- public doBtnAction(actionType: DepositTradeStep): void
+- public getActionBtnText(): string
+- public getFormTitle(): string
+
+`service class DepositStatusService`
+
+- private _pollingSub$: Subscription | null = null;
+- private _status$ = new BehaviourSubject<DepositTradeStatus>('awaiting')
+- public status$ = this._status$.asObservable()
+- private async fetchStatus(rubicId: string): DepositTxStatus
+- public stopPolling(): void { this._pollingSub$.unsubscribe() }
+- public initPolling(): void { interval(30_000)... }
+
+`abstract class DepositStep`
+
+- active: boolean
+- formTitle: string
+- setActive(active: boolean): void
+- setFormTitle(title: string): void
+
+`abstract class DepositStepWithBtn extends DepositStep`
+
+- confirmed: boolean
+- setConfirmed(confirmed: boolean): void
+- actionBtnText: string
+- async doBtnAction(): void
+- updateActionBtnText(text: string): void
+
+**UI**
+
+- for each accordion - different component DepositStepComponent
+- for the whole form DepositForm with 4 steps
+- also create wrapper for TRADE_EXPIRED and COMPLETED
+- on InputAddressesDepositStep: new FormGroup({ receiverAddr: string, refundAddr: string })

angular.json

@@ -16,7 +16,8 @@
           "style": "scss",
           "changeDetection": "OnPush",
           "standalone": false,
-          "skipTests": true
+          "skipTests": true,
+          "type": "component"
         }
       },
       "architect": {

package.json

@@ -64,8 +64,8 @@
     "@angular/platform-browser": "20.3.21",
     "@angular/router": "20.3.21",
     "@coinbase/wallet-sdk": "^4.0.3",
-    "@cryptorubic/core": "1.9.0",
-    "@cryptorubic/web3": "1.9.0",
+    "@cryptorubic/core": "1.9.1",
+    "@cryptorubic/web3": "1.9.1",
     "@hakimio/ngx-google-analytics": "^15.0.0",
     "@hinkal/common": "0.2.33",
     "@maskito/angular": "^3.11.1",
@@ -127,6 +127,7 @@
     "patch-package": "^8.0.1",
     "privacycash": "^1.1.15",
     "process": "^0.11.10",
+    "qrcode": "^1.5.4",
     "querystring-es3": "^0.2.1",
     "rpc-websockets": "7.9.0",
     "rxjs": "7.8.1",
@@ -158,6 +159,7 @@
     "@types/jasmine": "^3.6.11",
     "@types/jasminewd2": "^2.0.9",
     "@types/node": "^12.20.13",
+    "@types/qrcode": "^1.5.6",
     "@typescript-eslint/eslint-plugin": "^8.59.3",
     "@typescript-eslint/parser": "^8.59.3",
     "assert": "^2.0.0",

src/app/app.component.html

@@ -6,6 +6,7 @@
         <router-outlet></router-outlet>
         <div id="turnstile-container-invisible"></div>
       </main>
+
       <app-rubic-footer *noFrame class="footer"></app-rubic-footer>
     </div>
     <ng-container *noFrame>

src/app/app.component.scss

@@ -15,13 +15,11 @@
 tui-root {
   font-size: 0.75rem;
   line-height: 1.25rem;
-
   border-image: none;
 }
 
 .wrapper {
   position: relative;
-
   display: flex;
   flex-direction: column;
 
@@ -38,6 +36,7 @@ tui-root {
 
   > :last-child {
     flex: 0;
+    margin-top: 20px;
   }
 }
 

src/app/app.component.ts

@@ -9,7 +9,7 @@ import { QueryParams } from '@core/services/query-params/models/query-params';
 import { QueryParamsService } from '@core/services/query-params/query-params.service';
 import { isSupportedLanguage } from '@shared/models/languages/supported-languages';
 import { catchError, delay, first, map } from 'rxjs/operators';
-import { forkJoin, Observable, of } from 'rxjs';
+import { forkJoin, Observable, of, timer } from 'rxjs';
 import { RubicWindow } from '@shared/utils/rubic-window';
 import { IframeService } from '@core/services/iframe-service/iframe.service';
 import { WalletConnectorService } from './core/services/wallets/wallet-connector-service/wallet-connector.service';
@@ -37,6 +37,8 @@ export class AppComponent implements AfterViewInit {
 
   public readonly chartVisibile$ = this.chartService.chartVisibile$;
 
+  public readonly expiresAtMs$ = timer(0, 100_000).pipe(map(() => 10_000));
+
   constructor(
     @Inject(DOCUMENT) private document: Document,
     private readonly translateService: TranslateService,

src/app/core/errors/components/simulation-failed-error/simulation-failed-error.component.scss

@@ -4,18 +4,14 @@
   &__icon {
     position: absolute;
     top: 2px;
-
     margin-left: 7px;
 
     ::ng-deep svg {
       width: auto;
       height: 15px;
-
       cursor: pointer;
       opacity: 0.5;
-
       transition: 0.2s ease-in-out;
-
       fill: var(--secondary-text);
 
       &:hover {

src/app/core/errors/components/unknown-error/unknown-error.component.scss

@@ -4,18 +4,14 @@
   &__icon {
     position: absolute;
     top: 2px;
-
     margin-left: 7px;
 
     ::ng-deep svg {
       width: auto;
       height: 15px;
-
       cursor: pointer;
       opacity: 0.5;
-
       transition: 0.2s ease-in-out;
-
       fill: var(--secondary-text);
 
       &:hover {

src/app/core/errors/models/provider/not-supported-network-for-deposit-error.ts

@@ -0,0 +1,10 @@
+import { RubicError } from '@core/errors/models/rubic-error';
+import { BlockchainName } from '@cryptorubic/core';
+import { ERROR_TYPE } from 'src/app/core/errors/models/error-type';
+
+export class NotSupportedNetworkForDepositError extends RubicError<ERROR_TYPE.TEXT> {
+  constructor(network: BlockchainName) {
+    super('errors.notSupportedNetworkForDeposit', { network });
+    Object.setPrototypeOf(this, NotSupportedNetworkForDepositError.prototype);
+  }
+}

src/app/core/header/components/header/components/banners/banners.component.scss

@@ -13,11 +13,9 @@
   height: 57px;
   max-height: 57px;
   overflow: hidden;
-
   font-size: 18px;
 
   text-decoration: none;
-
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
@@ -39,7 +37,6 @@
 
     @include b($mobile-md) {
       width: 220px;
-
       line-height: normal;
       text-align: left;
     }
@@ -48,12 +45,10 @@
   .banner__button {
     display: block;
     padding: 5px 20px;
-
     font-size: 18px;
     text-align: center;
     text-wrap: nowrap;
     text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-
     background: var(--tui-background-accent-1);
     border-radius: 8px;
 
@@ -67,7 +62,6 @@
 
     &:hover {
       transform: scale(1.1);
-
       transition: all 0.1s;
     }
   }

src/app/core/header/components/header/components/language-selector/language-selector.component.scss

@@ -13,7 +13,6 @@
     width: 15px;
     height: 15px;
     margin-right: 10px;
-
     border-radius: 3px;
   }
 

src/app/core/header/components/header/components/mobile-menu-toggler/mobile-menu-toggler.component.scss

@@ -1,7 +1,6 @@
 .navbar-toggler {
   margin-top: -5px;
   padding: 10px 6px;
-
   background: none;
   border: 0 none;
   cursor: pointer;
@@ -10,17 +9,13 @@
     display: block;
     width: 22px;
     height: 2px;
-
     background-color: black;
     border-radius: 1px;
-
     transition: transform 0.3s ease-in-out;
 
     &:nth-child(2) {
       margin-top: 4px;
-
       opacity: 1;
-
       transition: opacity 0.3s ease-in-out;
     }
 

src/app/core/header/components/header/components/mobile-navigation-menu/mobile-navigation-menu.component.scss

@@ -2,10 +2,8 @@
   &__link {
     display: block;
     padding: 20px 28px;
-
     color: var(--primary-text);
     font-size: 16px;
-
     border-bottom: 1px solid var(--tui-border-normal);
 
     &:hover {

src/app/core/header/components/header/components/mobile-user-profile/mobile-user-profile.component.scss

@@ -3,7 +3,6 @@
 
   &__card {
     padding: 1rem;
-
     background-color: var(--io-background);
 
     background-image: url('/assets/images/rubic-account-card.png');
@@ -27,7 +26,6 @@
 
       &-address {
         margin-left: 0.5rem;
-
         color: #aaa;
         font-weight: 600;
         font-size: 16px;
@@ -55,15 +53,13 @@
     &-body {
       &-title {
         margin-bottom: 8px;
-
         color: var(--tui-text-tertiary);
         font-weight: 600;
         font-size: 14px;
       }
 
       &-balance {
         min-height: 20px;
-
         font-size: 24px;
 
         &.tui-skeleton {
@@ -82,15 +78,13 @@
 
         path {
           opacity: 0.7;
-
           fill: var(--tui-text-primary);
         }
 
         &:active,
         &:hover {
           path {
             opacity: 1;
-
             fill: #00e28e;
           }
         }

src/app/core/header/components/header/components/profile-menu-toggler/profile-menu-toggler.component.scss

@@ -10,10 +10,8 @@
   &__line {
     width: 100%;
     height: 2px;
-
     background-color: var(--tui-text-action);
     border-radius: 5px;
-
     transition: 0.3s ease-in-out;
 
     transition-property: opacity, transform;

src/app/core/header/components/header/components/rubic-menu-toggler/rubic-menu-toggler.component.scss

@@ -10,10 +10,8 @@
   &__line {
     width: 100%;
     height: 2px;
-
     background-color: var(--tui-text-action);
     border-radius: 5px;
-
     transition: 0.3s ease-in-out;
 
     transition-property: opacity, transform;

src/app/core/header/components/header/components/settings/settings.component.scss

@@ -9,7 +9,6 @@
 
     margin: 0 var(--tui-padding-m) var(--tui-padding-xs) var(--tui-padding-m);
     padding: var(--tui-padding-s) var(--tui-padding-m);
-
     background: var(--io-background);
 
     border-radius: 20px;