Merge pull request #3459 from Cryptorubic/fix-spindl

Fix spindl

src/app/core/services/spindl-ads/spindl.service.ts

@@ -2,9 +2,8 @@ import { Injectable } from '@angular/core';
 import spindl from '@spindl-xyz/attribution';
 import { ENVIRONMENT } from 'src/environments/environment';
 import { AuthService } from '../auth/auth.service';
-import { distinctUntilChanged, firstValueFrom } from 'rxjs';
+import { BehaviorSubject, distinctUntilChanged, firstValueFrom, Observable } from 'rxjs';
 import { HttpService } from '../http/http.service';
-import { StoreService } from '../store/store.service';
 
 interface IpGeolocationResp {
   country_code2: string;
@@ -28,16 +27,15 @@ export class SpindlService {
 
   private readonly IP2LOCATION_KEY = 'D13DC4B78F655A8DD9011ECC0FCDFA7D';
 
-  private _showSpindl: boolean = false;
+  private _showSpindl$ = new BehaviorSubject(false);
 
-  public get showSpindl(): boolean {
-    return this._showSpindl;
+  public get showSpindl$(): Observable<boolean> {
+    return this._showSpindl$.asObservable();
   }
 
   constructor(
     private readonly authService: AuthService,
-    private readonly httpService: HttpService,
-    private readonly storageService: StoreService
+    private readonly httpService: HttpService
   ) {}
 
   private async isForbiddenIP(): Promise<boolean> {
@@ -83,8 +81,7 @@ export class SpindlService {
 
   public async initSpindlAds(): Promise<void> {
     const isForbiddenIP = await this.isForbiddenIP();
-    this._showSpindl = !isForbiddenIP;
-
+    this._showSpindl$.next(!isForbiddenIP);
     spindl.configure({
       sdkKey: '5c8549dc-9be6-49ee-bc3f-8192870f4553',
       debugMode: !ENVIRONMENT.production,
@@ -96,7 +93,7 @@ export class SpindlService {
     this.authService.currentUser$
       .pipe(distinctUntilChanged((prev, curr) => prev?.address === curr?.address))
       .subscribe(user => {
-        if (user.address) spindl.attribute(user.address);
+        if (user?.address) spindl.attribute(user.address);
       });
   }
 

src/app/features/trade/components/trade-view-container/trade-view-container.component.html

@@ -6,7 +6,8 @@
     providers: providers$ | async,
     selectedForm: selectedForm$ | async,
     calculationStatus: calculationStatus$ | async,
-    transactionState: transactionState$ | async
+    transactionState: transactionState$ | async,
+    showSpindl: showSpindl$ | async
   } as state"
 >
   <div
@@ -27,12 +28,10 @@
     ></app-swap-form-page>
     <app-preview-swap *ngSwitchCase="'preview'"></app-preview-swap>
     <app-cn-preview-swap *ngSwitchCase="'cnPreview'"></app-cn-preview-swap>
-
     <app-spindle-banner
-      *ngIf="showSpindl"
+      *ngIf="state.showSpindl"
       [ngStyle]="{
-        display:
-          state.content === 'form' || state.transactionState.step === 'success' ? 'block' : 'none'
+        display: state.content === 'form' ? 'block' : 'none'
       }"
     ></app-spindle-banner>
   </div>

src/app/features/trade/components/trade-view-container/trade-view-container.component.scss

@@ -51,6 +51,11 @@
     }
   }
 
+  app-spindle-banner,
+  app-token-selector-page {
+    width: 100%;
+  }
+
   app-swap-form-page {
     width: 100%;
     margin-bottom: 20px;

src/app/features/trade/components/trade-view-container/trade-view-container.component.ts

@@ -14,7 +14,6 @@ import { HeaderStore } from '@core/header/services/header.store';
 import { ActionButtonService } from '@features/trade/services/action-button-service/action-button.service';
 import { NotificationsService } from '@core/services/notifications/notifications.service';
 import { TuiNotification } from '@taiga-ui/core';
-import { TargetNetworkAddressService } from '../../services/target-network-address-service/target-network-address.service';
 import { PreviewSwapService } from '../../services/preview-swap/preview-swap.service';
 import { FormsTogglerService } from '../../services/forms-toggler/forms-toggler.service';
 import { QueryParamsService } from '@app/core/services/query-params/query-params.service';
@@ -60,15 +59,14 @@ export class TradeViewContainerComponent {
 
   public readonly transactionState$ = this.previewSwapService.transactionState$;
 
-  public readonly showSpindl = this.spindlService.showSpindl;
+  public readonly showSpindl$ = this.spindlService.showSpindl$;
 
   constructor(
     private readonly swapsState: SwapsStateService,
     private readonly tradePageService: TradePageService,
     public readonly swapFormQueryService: SwapFormQueryService,
     public readonly swapFormService: SwapsFormService,
     public readonly swapTokensUpdaterService: SwapTokensUpdaterService,
-    private readonly targetNetworkAddressService: TargetNetworkAddressService,
     private readonly headerStore: HeaderStore,
     private readonly previewSwapService: PreviewSwapService,
     private readonly actionButtonService: ActionButtonService,

src/app/shared/components/spindle-banner/spindle-banner.component.html

@@ -1,11 +1,10 @@
-<div
-  *ngLet="{ src: iframeSrc$ | async, size: iframeSize$ | async } as state"
-  class="spindle-banner"
->
-  <iframe
-    [src]="state.src | safeSanitizer : 'resourceUrl'"
-    [width]="state.size.width"
-    [height]="state.size.height"
-    title="SpindleAds"
-  ></iframe>
-</div>
+<ng-container *ngLet="{ src: iframeSrc$ | async, size: iframeSize$ | async } as state">
+  <div *ngIf="state.src" class="spindle-banner">
+    <iframe
+      [src]="state.src | safeSanitizer : 'resourceUrl'"
+      [width]="state.size.width"
+      [height]="state.size.height"
+      title="SpindleAds"
+    ></iframe>
+  </div>
+</ng-container>

src/app/shared/components/spindle-banner/spindle-banner.component.ts

@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { HeaderStore } from '@app/core/header/services/header.store';
 import { AuthService } from '@app/core/services/auth/auth.service';
-import { TransactionStep } from '@app/features/trade/models/transaction-steps';
 import { PreviewSwapService } from '@app/features/trade/services/preview-swap/preview-swap.service';
 import { combineLatestWith, map, Observable } from 'rxjs';
 
@@ -13,11 +12,14 @@ import { combineLatestWith, map, Observable } from 'rxjs';
 })
 export class SpindleBannerComponent {
   public readonly iframeSrc$ = this.headerStore.getMobileDisplayStatus().pipe(
-    combineLatestWith(this.authService.currentUser$, this.previewSwapService.transactionState$),
-    map(([isMobile, user, txState]) => {
-      const placementId = this.getPlacementId(isMobile, txState.step);
-      const walletAddress = user ? user.address : '0xe388Ed184958062a2ea29B7fD049ca21244AE02e';
-      const src = `https://e.spindlembed.com/v1/serve?publisher_id=rubic&placement_id=${placementId}&address=${walletAddress}`;
+    combineLatestWith(this.authService.currentUser$),
+    map(([isMobile, user]) => {
+      if (!user?.address) {
+        return null;
+      }
+
+      const placementId = this.getPlacementId(isMobile);
+      const src = `https://e.spindlembed.com/v1/serve?publisher_id=rubic&placement_id=${placementId}&address=${user.address}`;
       return src;
     })
   );
@@ -42,8 +44,7 @@ export class SpindleBannerComponent {
     private readonly previewSwapService: PreviewSwapService
   ) {}
 
-  private getPlacementId(isMobile: boolean, step: TransactionStep): string {
-    if (step === 'success') return 'post_swap';
+  private getPlacementId(isMobile: boolean): string {
     if (isMobile) return 'under_swap_mobile';
     return 'under_swap_desktop';
   }