Merge pull request #2991 from aura-nw/feature/Reskin_UI_main

Feature/reskin UI main
aura-nw · Feb 6, 2024 · 1a753f1 · 1a753f1
2 parents 5d7db46 + fa8220f
commit 1a753f1
Show file tree

Hide file tree

Showing 64 changed files with 568 additions and 526 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -26,6 +26,7 @@ import { LayoutsModule } from './layouts/layouts.module';
 import { SchemaViewerModule } from './pages/schema-viewer/schema-viewer.module';
 import { MediaExpandModule } from './shared/components/media-expand/media-expand.module';
 import { NgHttpCachingLocalStorage, NgHttpCachingModule, NgHttpCachingStrategy } from 'ng-http-caching';
+import { ChainInfoInterceptor } from './core/helpers/chain-info.interceptor';
 initializeApp(environment.firebaseConfig);
 
 @NgModule({
@@ -65,6 +66,7 @@ initializeApp(environment.firebaseConfig);
     { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
     { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
     { provide: HTTP_INTERCEPTORS, useClass: RequestTimeoutHttpInterceptor, multi: true },
+    { provide: HTTP_INTERCEPTORS, useClass: ChainInfoInterceptor, multi: true },
     { provide: DEFAULT_TIMEOUT, useValue: 10000 },
     { provide: ErrorHandler, useClass: GlobalErrorHandler },
     DatePipe,

diff --git a/src/app/core/data-services/api-account.service.ts b/src/app/core/data-services/api-account.service.ts
@@ -1,9 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Coin } from '@cosmjs/stargate';
 import * as _ from 'lodash';
-
-import { catchError, EMPTY, expand, forkJoin, from, map, Observable, of, reduce, switchMap, tap } from 'rxjs';
+import { catchError, EMPTY, expand, forkJoin, map, Observable, of, reduce, switchMap } from 'rxjs';
 import { balanceOf } from '../utils/common/parsing';
 import { EnvironmentService } from './environment.service';
 import { VALIDATOR_ACCOUNT_TEMPLATE } from './template';
@@ -132,11 +130,15 @@ export class ApiAccountService {
 
   // https://github.com/aura-nw/aura-explorer-api/blob/main/src/components/account/services/account.service.ts#L117
   parseBalance(account, isGetAlBalances = false) {
-    const balances = account ? account[0]?.balances : [];
+    const defaultBalance = { amount: '0', denom: this.currencies.coinDecimals };
+    const lengthBalance = _.get(account, '[0].balances.length');
+    const balances = lengthBalance > 0 ? account[0]?.balances : [defaultBalance];
 
     return isGetAlBalances
       ? balances
-      : account[0]?.balances.find((item) => item.denom === this.currencies.coinMinimalDenom);
+      : lengthBalance > 0
+        ? account[0]?.balances?.find((item) => item.denom === this.currencies.coinMinimalDenom)
+        : defaultBalance;
   }
 
   // https://github.com/aura-nw/aura-explorer-api/blob/main/src/components/account/services/account.service.ts#L132

diff --git a/src/app/core/data-services/environment.service.ts b/src/app/core/data-services/environment.service.ts
@@ -220,9 +220,13 @@ export class EnvironmentService {
   }
 
   checkNativeApp() {
-    if ((window.coin98 || window.leap) && this.isMobile) {
+    if ((window.coin98 || window.leap || window.keplr) && this.isMobile) {
       try {
-        if (window.coin98?.keplr || window.leap?.mode == ELeapMode.MobileWeb) {
+        if (
+          window.coin98?.keplr ||
+          window.leap?.mode == ELeapMode.MobileWeb ||
+          window.keplr?.mode == ELeapMode.MobileWeb
+        ) {
           this.isNativeApp = true;
         }
       } catch {}

diff --git a/src/app/core/directives/image.directive.ts b/src/app/core/directives/image.directive.ts
@@ -7,7 +7,7 @@ import { TITLE_LOGO } from '../constants/common.constant';
 })
 export class ImageDirective implements OnInit, OnChanges {
   @Input() appImg: string;
-  @Input() defaultImage: string = `${this.env.imageUrl + TITLE_LOGO}`;
+  @Input() defaultImage: string = `assets/images/logo/title-logo.png`;
 
   get ref() {
     return this.elr.nativeElement;
@@ -26,7 +26,7 @@ export class ImageDirective implements OnInit, OnChanges {
 
   ngOnInit(): void {
     if (!this.ref.src && this.appImg) {
-      this.ref.src = this.appImg;
+      this.ref.src = this.appImg || this.defaultImage;
     }
 
     this.elr.nativeElement.onerror = () => {

diff --git a/src/app/core/helpers/chain-info.interceptor.ts b/src/app/core/helpers/chain-info.interceptor.ts
@@ -0,0 +1,15 @@
+import { HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { EnvironmentService } from '../data-services/environment.service';
+
+@Injectable()
+export class ChainInfoInterceptor implements HttpInterceptor {
+  constructor(private environmentService: EnvironmentService) {}
+  intercept(req: HttpRequest<any>, next: HttpHandler) {
+    const isApiBE = req.url.indexOf(this.environmentService.backend) > -1;
+    const modified = req.clone({
+      setHeaders: isApiBE ? { 'Chain-id': `${this.environmentService.chainId}` } : {},
+    });
+    return next.handle(modified);
+  }
+}
diff --git a/src/app/core/helpers/jwt.interceptor.ts b/src/app/core/helpers/jwt.interceptor.ts
@@ -1,11 +1,10 @@
 import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
-import { EMPTY, Observable, catchError, map, of, switchMap } from 'rxjs';
+import { EMPTY, Observable, catchError, switchMap } from 'rxjs';
 import { EnvironmentService } from '../data-services/environment.service';
 import { NotificationsService } from '../services/notifications.service';
 import { UserService } from '../services/user.service';
-import * as moment from 'moment';
 
 @Injectable()
 export class JwtInterceptor implements HttpInterceptor {

diff --git a/src/app/core/pipes/market-info.pipe.ts b/src/app/core/pipes/market-info.pipe.ts
@@ -8,7 +8,7 @@ import { getBalance } from '../utils/common/parsing';
 @Pipe({ name: 'marketInfo' })
 export class MarketInfoPipe implements PipeTransform {
   image_s3 = this.env.imageUrl;
-  defaultLogoToken = `${this.image_s3}images/icons/token-logo.png`;
+  defaultLogoToken = `${this.image_s3}images/icons/aura.svg`;
 
   constructor(
     private env: EnvironmentService,

diff --git a/src/app/layouts/footer/footer.component.html b/src/app/layouts/footer/footer.component.html
@@ -1,4 +1,4 @@
-<footer>
+<footer class="footer-mask">
   <section class="container-fluid container-lg footer">
     <div class="row">
       <div class="col-12 col-lg-2">
@@ -94,7 +94,7 @@
           <i class="mx-3 aura-icon icon--switch-stage icon-telegram"></i>
         </a>
         <a href="https://www.facebook.com/AuraNetworkHQ/" target="_blank">
-          <i class="mx-3 aura-icon icon-fb-circle"></i>
+          <i class="mx-3 aura-icon icon--switch-stage icon-fb-circle"></i>
         </a>
         <a href="https://www.linkedin.com/company/auranetwork/about/" target="_blank">
           <i class="mx-3 aura-icon icon--switch-stage icon-linkedIn"></i>

diff --git a/src/app/layouts/footer/footer.component.scss b/src/app/layouts/footer/footer.component.scss
@@ -1,5 +1,4 @@
 footer {
-  background-color: var(--aura-black);
   border-top: 1px solid var(--aura-gray-9);
 
   .footer {
@@ -123,6 +122,8 @@ footer {
   .bottom-bar {
     border-top: 1px solid var(--aura-gray-9);
     padding-bottom: 82px;
+    position: relative;
+    z-index: 1;
     .caption-2 {
       font-size: 12px;
       line-height: 20px;

diff --git a/src/app/layouts/horizontal/horizontal.component.html b/src/app/layouts/horizontal/horizontal.component.html
@@ -26,6 +26,7 @@
         <router-outlet></router-outlet>
       </div>
     </div>
+    <div class="mask-footer"></div>
     <!-- footer -->
     <app-footer></app-footer>
   </div>

diff --git a/src/app/layouts/horizontal/horizontal.component.scss b/src/app/layouts/horizontal/horizontal.component.scss
@@ -3,3 +3,24 @@
     padding-top: 52px !important;
   }
 }
+
+@media (min-width: 992px) {
+  .main-content {
+    min-height: calc(100vh - 72px - 379px);
+    .page-content {
+      min-height: inherit;
+    }
+  }
+
+  .mask-footer {
+    height: 460px;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+
+    background-image: url('./../../../assets/images/mask.png');
+    background-position: bottom;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+}
diff --git a/src/app/layouts/horizontaltopbar/horizontaltopbar.component.scss b/src/app/layouts/horizontaltopbar/horizontaltopbar.component.scss
@@ -25,7 +25,7 @@
     img {
       height: 24px;
       @media (min-width: 992px) {
-        height: 60px;
+        height: 32px;
       }
     }
   }

diff --git a/src/app/pages/account/account-detail/account-detail.component.html b/src/app/pages/account/account-detail/account-detail.component.html
@@ -79,7 +79,7 @@ <h3 class="fw-bold fw-semibold-mob mb-2 text--white">Account Info</h3>
           </div>
 
           <button
-            class="button button-outline button-outline--gradient button-outline__in-card button-pill mt-2 btn-private"
+            class="button button-outline button-outline__in-card button-pill mt-2 btn-private"
             *ngIf="!(currentAddress | isPrivateNameTag)"
             (click)="editPrivateName()">
             <span class="caption fw-normal"> Set Private Name Tag </span>
@@ -99,9 +99,9 @@ <h3 class="fw-bold fw-semibold-mob mb-2 text--white">Account Info</h3>
 
           <div class="mt-auto d-flex justify-content-between align-items-center d-xl-block">
             <div>
-              <div class="h5 mb-1 text--white">Total Value</div>
+              <div class="body mb-1 text--white">Total Value</div>
               <div class="aura-tooltip-contain">
-                <div class="h1 mb-0 fw-700 mb-0 text-gradient d-inlfa-inverse aura-tooltip-object">
+                <div class="h1 mb-0 fw-700 mb-0 text--white d-inlfa-inverse aura-tooltip-object">
                   <span *ngIf="totalValue.lt(0.01)">
                     {{ totalValue.eq(0) ? '$0' : '< $0.01' }}
                   </span>
@@ -127,10 +127,10 @@ <h3 class="fw-bold fw-semibold-mob mb-2 text--white">Account Info</h3>
             </div>
             <div class="button button--md button-circle ml-1 d-lg-none">
               <img
-                [src]="'assets/icons/icons-svg/color/qr-code.svg' | imageS3"
+                [src]="'assets/icons/icons-svg/white/qr-code.svg' | imageS3"
                 alt=""
-                width="30px"
-                height="30px"
+                width="36px"
+                height="36px"
                 (click)="viewQrAddress(modalManage)" />
             </div>
           </div>

diff --git a/src/app/pages/account/account-detail/nft-list/nft-list.component.html b/src/app/pages/account/account-detail/nft-list/nft-list.component.html
@@ -92,7 +92,7 @@ <h3 class="mb-0 fw-700 text--gray-light-2 mb-4 mb-xl-0">NFTs ({{ listCollection[
                   nftId="{{ 'nft#' + i }}"
                   [nftType]="getTypeFile(item)"></app-nft-card>
                 <div class="nft-cards__label">
-                  <span class="text-gradient">CW-721</span>
+                  <span class="text--white">CW-721</span>
                 </div>
                 <div class="nft__body">
                   <div class="nft__info d-flex">
@@ -111,8 +111,8 @@ <h3 class="mb-0 fw-700 text--gray-light-2 mb-4 mb-xl-0">NFTs ({{ listCollection[
                       (click)="
                         handleRouterLink('/tokens/token-nft/' + item.contract_address + '/' + encodeData(item.token_id))
                       ">
-                      <span class="d-none d-lg-inline-block">{{ item.token_id | ellipsis : 12 }}</span>
-                      <span class="d-inline-block d-lg-none">{{ item.token_id | ellipsis : 9 }}</span>
+                      <span class="d-none d-lg-inline-block">{{ item.token_id | ellipsis: 12 }}</span>
+                      <span class="d-inline-block d-lg-none">{{ item.token_id | ellipsis: 9 }}</span>
                     </span>
                   </div>
                 </div>

diff --git a/src/app/pages/community-pool/asset-list/community-pool-asset.component.ts b/src/app/pages/community-pool/asset-list/community-pool-asset.component.ts
@@ -53,9 +53,6 @@ export class CommunityPoolAssetComponent implements OnInit, OnDestroy {
   chainName = this.environmentService.chainName;
   listCoin = this.environmentService.coins;
   denom = this.environmentService.chainInfo.currencies[0].coinDenom;
-  image_s3 = this.environmentService.imageUrl;
-  defaultLogoToken = this.image_s3 + 'images/icons/token-logo.png';
-  nativeName = this.environmentService.environment.nativeName;
 
   constructor(
     public translate: TranslateService,

diff --git a/src/app/pages/dashboard/dashboard-chart-options.ts b/src/app/pages/dashboard/dashboard-chart-options.ts
@@ -33,13 +33,12 @@ export const DASHBOARD_CHART_OPTIONS: DeepPartial<ChartOptions> = {
   },
   handleScale: false,
   handleScroll: false,
-
 };
 
 export const DASHBOARD_AREA_SERIES_CHART_OPTIONS: SeriesPartialOptionsMap['Area'] = {
-  lineColor: '#5EE6D0',
-  topColor: 'rgba(136,198,203,0.12)',
-  bottomColor: 'rgba(119, 182, 188, 0.01)',
+  lineColor: '#FD805F',
+  topColor: 'rgba(253, 128, 95, 0.12)',
+  bottomColor: 'rgba(253, 128, 95, 0.01)',
   priceFormat: {
     type: 'price',
     precision: 4,

diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html
@@ -27,16 +27,16 @@
                 <div class="d-flex flex-column px-lg-4 flex-shrink-0 flex-grow-1">
                   <div class="d-flex flex-column align-items-start flex-shrink-0 flex-grow-1">
                     <div class="d-flex align-items-center justify-content-center py-4 px-2 py-lg-6 px-xl-6">
-                      <img [appImg]="chainLogo" alt="" width="40" height="40" />
+                      <img [appImg]="chainLogo" alt="chain-logo" height="36" />
                       <div class="h1 h2-mob mb-0 ml-4 text--white fw-700 fw-semibold-mob">
                         {{ nativeName | uppercase }}
                       </div>
                       <div class="aura-tooltip-contain">
                         <a
-                          href="https://www.coingecko.com/en/coins/{{coingeckoCoinId}}"
+                          href="https://www.coingecko.com/en/coins/{{ coingeckoCoinId }}"
                           target="_blank"
                           class="ml-2 p-0 button button--ssm button-ghost aura-tooltip-object">
-                          <i class="ph-arrow-square-out-fill text--primary body-01 h1-mob mb-0"></i>
+                          <i class="ph-arrow-square-out-fill text--white body-01 h1-mob mb-0"></i>
                         </a>
                         <app-tooltip-customize [content]="'Open CoinGecko'"></app-tooltip-customize>
                       </div>
@@ -92,9 +92,7 @@
               <div class="align-items-center pt-6 px-4 pr-lg-6 pl-lg-1">
                 <div class="d-lg-flex flex-wrap mb-4">
                   <!-- Tabs -->
-                  <div class="button-switch-stage button-switch-stage__3">
-                    <button type="button" disabled class="text--white">Price chart</button>
-                  </div>
+                  <div class="h4 price-label text--white">Price chart</div>
                   <div class="ms-auto mt-4 mt-md-0">
                     <div class="d-flex align-items-center chart__options">
                       <div class="button-switch-stage button-switch-stage__2">

diff --git a/src/app/pages/dashboard/dashboard.component.scss b/src/app/pages/dashboard/dashboard.component.scss
@@ -51,7 +51,7 @@
     right: 0;
     z-index: 10;
     height: 1.5px;
-    background: linear-gradient(113.1deg, #5ee6d0 13.45%, #bfc6ff 50.33%, #ffba69 85.05%);
+    background: linear-gradient(117deg, #ffd569 0%, #fc8e4f 21.39%, #ff697b 34.6%);
     width: 100%;
   }
 }
@@ -77,6 +77,16 @@
     max-width: unset;
   }
 }
+
+.price-label {
+  font-size: 14px !important;
+  min-width: 110px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .card-summary-info {
   .divider-vertical {
     min-height: 64px;

diff --git a/src/app/pages/fee-grant/popup-add-grant/popup-add-grant.component.html b/src/app/pages/fee-grant/popup-add-grant/popup-add-grant.component.html
@@ -136,7 +136,7 @@
                   formControlName="period_amount" />
                 <div class="d-flex align-items-center mr-2">
                   <button
-                    class="button button-primary active button-flat button--xs button--sm-mob button-max fw-semibold"
+                    class="button button-primary active button-flat button--xs button--sm-mob button-max"
                     type="button"
                     (click)="getMaxToken('period_amount')">
                     MAX

diff --git a/.../soulbound-token/soulbound-account-token-list/soulbound-account-token-list.component.html b/.../soulbound-token/soulbound-account-token-list/soulbound-account-token-list.component.html
@@ -90,13 +90,13 @@
             <ng-container *ngIf="activeId === 1">Total Un-equipped Badges</ng-container>
           </div>
           <div class="d-flex justify-content-between align-items-center d-lg-block">
-            <span class="h1 h2-mob mb-0 fw-bold mb-0 text-gradient d-inline">{{ totalSBT }} ABT</span>
+            <span class="h1 h2-mob mb-0 fw-bold mb-0 text--white d-inline">{{ totalSBT }} ABT</span>
             <div class="button button--md button-circle ml-1 d-lg-none">
               <img
-                [src]="'assets/icons/icons-svg/color/qr-code.svg' | imageS3"
+                [src]="'assets/icons/icons-svg/white/qr-code.svg' | imageS3"
                 alt=""
-                width="30px"
-                height="30px"
+                width="36px"
+                height="36px"
                 (click)="viewQrAddress(modalManage)" />
             </div>
           </div>

diff --git a/src/app/pages/statistics/chart-detail/chart-detail.component.html b/src/app/pages/statistics/chart-detail/chart-detail.component.html
@@ -27,12 +27,12 @@
             <span>
               {{ chartType === 'unique-addresses' ? 'Highest increase of' : 'Highest number of' }}
             </span>
-            <span class="text--primary">{{ maxAmount | formatDigit }}</span>
+            <span class="text--orange-1">{{ maxAmount | formatDigit }}</span>
             <br class="d-lg-none" />
             <span class="mr-1" *ngIf="chartType === 'daily-transactions'"> transactions on</span>
             <span class="mr-1" *ngIf="chartType === 'unique-addresses'"> new addresses was recorded on</span>
             <span class="mr-1" *ngIf="chartType === 'daily_active_addresses'"> addresses on</span>
-            <span class="text--primary">{{ maxAmountDate }}</span>
+            <span class="text--orange-1">{{ maxAmountDate }}</span>
           </div>
         </div>
       </div>
@@ -45,12 +45,12 @@
             <span>
               {{ chartType === 'unique-addresses' ? 'Lowest increase of' : 'Lowest number of' }}
             </span>
-            <span class="mr-1 text--primary">{{ minAmount | formatDigit }}</span>
+            <span class="mr-1 text--orange-1">{{ minAmount | formatDigit }}</span>
             <br class="d-lg-none" />
             <span class="mr-1" *ngIf="chartType === 'daily-transactions'">transactions on</span>
             <span class="mr-1" *ngIf="chartType === 'unique-addresses'">new addresses was recorded on</span>
             <span class="mr-1" *ngIf="chartType === 'daily_active_addresses'">addresses on</span>
-            <span class="text--primary">{{ minAmountDate }}</span>
+            <span class="text--orange-1">{{ minAmountDate }}</span>
           </div>
         </div>
       </div>

diff --git a/src/app/pages/statistics/chart-detail/chart-detail.component.scss b/src/app/pages/statistics/chart-detail/chart-detail.component.scss
@@ -19,7 +19,7 @@
       width: 100%;
       height: 1.5px;
       z-index: 2;
-      background: linear-gradient(113.1deg, #5ee6d0 13.45%, #bfc6ff 50.33%, #ffba69 85.05%);
+      background: linear-gradient(117deg, #ffd569 0%, #fc8e4f 21.39%, #ff697b 34.6%);
     }
   }
 }