[Fix][589] Fix set token info (#3603)

src/app/core/constants/token.constant.ts

@@ -51,14 +51,30 @@ export enum ETokenNFTTypeBE {
 export const TOKEN_EVM_BURNT = '0x0000000000000000000000000000000000000000';
 
 export const SOCIAL_MEDIA = {
-  github: {
-    name: 'github',
-    icon: 'assets/icons/icons-svg/basic/github.svg',
+  youtube: {
+    name: 'youtube',
+    icon: 'assets/icons/icons-svg/basic/youtube.svg',
   },
   twitter: {
     name: 'twitter',
     icon: 'assets/icons/icons-svg/basic/twitter.svg',
   },
+  discord: {
+    name: 'discord',
+    icon: 'assets/icons/icons-svg/basic/discord.svg',
+  },
+  telegram: {
+    name: 'telegram',
+    icon: 'assets/icons/icons-svg/basic/telegram.svg',
+  },
+  linkedin: {
+    name: 'linkedin',
+    icon: 'assets/icons/icons-svg/basic/linkedIn.svg',
+  },
+  github: {
+    name: 'github',
+    icon: 'assets/icons/icons-svg/basic/github.svg',
+  },
   facebook: {
     name: 'facebook',
     icon: 'assets/icons/icons-svg/basic/fb-circle.svg',
@@ -67,26 +83,10 @@ export const SOCIAL_MEDIA = {
     name: 'medium',
     icon: 'assets/icons/icons-svg/basic/medium.svg',
   },
-  telegram: {
-    name: 'telegram',
-    icon: 'assets/icons/icons-svg/basic/telegram.svg',
-  },
-  youtube: {
-    name: 'youtube',
-    icon: 'assets/icons/icons-svg/basic/youtube.svg',
-  },
   otherWebsite: {
     name: 'otherWebsite',
     icon: 'assets/icons/icons-svg/basic/global.svg',
   },
-  discord: {
-    name: 'discord',
-    icon: 'assets/icons/icons-svg/basic/discord.svg',
-  },
-  linkedin: {
-    name: 'linkedin',
-    icon: 'assets/icons/icons-svg/basic/linkedIn.svg',
-  },
 };
 
 export const USDC_ADDRESS = '0x80b5a32e4f032b2a058b4f29ec95eefeeb87adcd';

src/app/core/data-services/api-cw20-token.service.ts

@@ -217,12 +217,13 @@ export class ApiCw20TokenService {
   parseNativeToken(account, coinsMarkets) {
     const nativeId = this.env.coingecko.ids[0];
     const coinMarket = coinsMarkets.find((coin) => coin.coinId === nativeId);
+
     return {
       name: this.env.chainName,
       symbol: this.currencies.coinDenom,
       decimals: this.currencies.coinDecimals,
       denom: this.currencies.coinMinimalDenom,
-      image: this.currencies.coinImageUrl,
+      image: this.currencies.coinImageUrl || coinMarket?.image,
       contract_address: '-',
       balance: account.data.total,
       price: coinMarket?.currentPrice || 0,

src/app/core/pipes/custom-pipe.module.ts

@@ -14,6 +14,7 @@ import { ObjectKeysPipe } from './object-keys.pipe';
 import { CombineTxsMsgPipe, EllipsisPipe } from './string.pipe';
 import { NameTagTooltipPipe } from './tooltip.pipe';
 import { HighlightFunctionPipe } from './highlight-function.pipe';
+import { NewlinePipe } from './newline.pipe';
 
 @NgModule({
   imports: [CommonModule],
@@ -43,6 +44,7 @@ import { HighlightFunctionPipe } from './highlight-function.pipe';
     CapacityPipe,
     EvmAddressPipe,
     HighlightFunctionPipe,
+    NewlinePipe
   ],
   exports: [
     JsonPipe,
@@ -70,6 +72,7 @@ import { HighlightFunctionPipe } from './highlight-function.pipe';
     CapacityPipe,
     EvmAddressPipe,
     HighlightFunctionPipe,
+    NewlinePipe
   ],
   providers: [],
 })

src/app/core/pipes/newline.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({ name: 'newline' })
+export class NewlinePipe implements PipeTransform {
+  constructor(private sanitizer: DomSanitizer) {}
+  transform(value: string) {
+    if (!value) return null;
+    let replacedValue = value;
+    replacedValue = replacedValue?.replace(/\n/gi, '<br/>');
+    return this.sanitizer.bypassSecurityTrustHtml(replacedValue);
+  }
+}
+

src/app/core/services/token.service.ts

@@ -968,14 +968,17 @@ export class TokenService extends CommonService {
   mappingSocialProfiles(socialProfiles: { [key: string]: string }) {
     if (!socialProfiles) return [];
 
-    return Object.keys(socialProfiles)
-      ?.filter((key) => socialProfiles[key])
-      ?.map((key) => {
-        return {
+    const socialMapping = [];
+    Object.keys(SOCIAL_MEDIA).forEach((key) => {
+      if (socialProfiles[key]) {
+        const social = {
           name: SOCIAL_MEDIA[key]?.name,
           icon: SOCIAL_MEDIA[key]?.icon,
           url: socialProfiles[key],
-        };
-      });
+        }
+        socialMapping.push(social);
+      }
+    })
+    return socialMapping;
   }
 }

src/app/pages/evm-token/evm-token-content/evm-token-content-tab/evm-token-info-tab/evm-token-info-tab.component.html

@@ -1,6 +1,4 @@
 <div class="text--white">
   <div class="body-02 fw-semibold text--gray-4 mb-1">OVERVIEW</div>
-  <div class="text--gray-6">
-    {{overviewInfo}}
-  </div>
+  <div class="text--gray-6" [innerHTML]="overviewInfo | newline"></div>
 </div>

src/app/pages/evm-token/evm-token-content/evm-token-content.component.ts

@@ -25,9 +25,9 @@ export class EvmTokenContentComponent implements OnInit {
   @Input() contractAddress: string;
   @Output() hasMore = new EventEmitter<any>();
 
-  tabStaking = [TokenTab.Holders, TokenTab.Info];
-  tabIBC = [TokenTab.Transfers, TokenTab.Holders, TokenTab.Info];
-  tabToken = [TokenTab.Transfers, TokenTab.Holders, TokenTab.Contract, TokenTab.Info];
+  tabStaking = [TokenTab.Holders];
+  tabIBC = [TokenTab.Transfers, TokenTab.Holders];
+  tabToken = [TokenTab.Transfers, TokenTab.Holders, TokenTab.Contract];
   tabNFT = [TokenTab.Transfers, TokenTab.Holders, TokenTab.Inventory, TokenTab.Contract];
   TABS = [];
   paramQuery = '';
@@ -107,6 +107,14 @@ export class EvmTokenContentComponent implements OnInit {
         this.handleSearch();
         this.searchTemp = this.nameTagService.findNameTagByAddress(this.searchTemp);
       }
+
+      if (!this.paramQuery) {
+        this.TABS.push({
+          key: TokenTab.Info,
+          value: 'Info',
+        });
+        this.tabsBackup = this.TABS;
+      }
     });
 
     if (local.getItem(STORAGE_KEYS.IS_VERIFY_TAB) == 'true') {

src/app/pages/evm-token/evm-token-detail/evm-token-detail.component.html

@@ -3,7 +3,7 @@
   <div class="d-flex mb-4 mb-lg-5 align-items-center">
     <h1 class="mb-0 text--white ml-2">
       <div class="d-flex">
-        Token <span class="text--gray-5 break-word ml-2">{{ tokenDetail?.name }}</span>
+        Token <span class="text--gray-5 break-word ml-2" style="max-width: max-content;">{{ tokenDetail?.name }}</span>
         <div class="status cursor-pointer">
           <img
             [src]="'assets/images/icons/CircleWavyCheck.svg' | imageS3"

src/app/pages/evm-token/evm-token-summary/evm-token-summary.component.scss

@@ -12,6 +12,8 @@
     align-items: center;
     justify-content: center;
     column-gap: 20px;
+    flex-wrap: wrap;
+
     img {
       min-width: 16px;
       max-width: 16px;

src/app/pages/token-cosmos/token-content/token-content-tab/token-info-tab/token-info-tab.component.html

@@ -1,6 +1,4 @@
 <div class="text--white">
   <div class="body-02 fw-semibold text--gray-4 mb-1">OVERVIEW</div>
-  <div class="text--gray-6">
-    {{overviewInfo}}
-  </div>
+  <div class="text--gray-6" [innerHTML]="overviewInfo | newline"></div>
 </div>

src/app/pages/token-cosmos/token-detail/token-detail.component.html

@@ -3,7 +3,7 @@
   <div class="d-flex mb-4 mb-lg-5 align-items-center">
     <h1 class="mb-0 text--white ml-2">
       <div class="d-flex">
-        Token <span class="text--gray-5 break-word ml-2">{{ tokenDetail?.name }}</span>
+        Token <span class="text--gray-5 break-word ml-2 flex-grow-1" style="max-width: max-content;">{{ tokenDetail?.name }}</span>
         <div class="status cursor-pointer">
            <img
             [src]="'assets/images/icons/CircleWavyCheck.svg' | imageS3"

src/app/pages/token-cosmos/token-detail/token-detail.component.ts

@@ -65,41 +65,34 @@ export class TokenDetailComponent implements OnInit {
   getCW20Detail(): void {
     let now = new Date();
     now.setDate(now.getDate() - 1);
-    this.tokenService
+    this.tokenService.getTokenDetail(this.contractAddress).subscribe((tokenMarket) => {
+      this.tokenService
       .getCW20Detail(this.contractAddress, this.datePipe.transform(now, DATEFORMAT.DATE_ONLY))
       .subscribe({
         next: (res) => {
           const data = _.get(res, `smart_contract`);
           if (data.length > 0) {
-            this.tokenService.tokensMarket$
-              .pipe(
-                filter((data) => _.isArray(data)),
-                take(1),
-              )
-              .subscribe((item) => {
-                const tokenMarket = item.find((token) => token.denom === data[0].address);
-
-                const token = data[0];
-                token.contract_address = token.address;
-                token.name = tokenMarket?.name || token.cw20_contract.name;
-                token.symbol = tokenMarket?.symbol || token.cw20_contract.symbol;
-                token.decimals = token.cw20_contract.decimal;
-                token.type = this.contractType.CW20;
-                token.max_total_supply = tokenMarket?.max_supply || 0;
-                token.price = tokenMarket?.currentPrice || 0;
-                token.verify_status = tokenMarket?.verifyStatus || '';
-                token.verify_text = tokenMarket?.verifyText || '';
-                token.modeToken = EModeToken.CWToken;
-                token.priceChangePercentage24h = tokenMarket?.priceChangePercentage24h || 0;
-                token.contract_verification = token.code?.code_id_verifications[0]?.verification_status;
-                token.supplyAmount = BigNumber(token.cw20_contract?.total_supply).dividedBy(
-                  BigNumber(10).pow(token.decimals),
-                );
-                token.officialSite = tokenMarket?.officialSite;
-                token.overviewInfo = tokenMarket?.overviewInfo;
-                token.socialProfiles = this.tokenService?.mappingSocialProfiles(tokenMarket?.socialProfiles);
-                this.tokenDetail = token;
-              });
+            const token = data[0];
+            token.contract_address = token.address;
+            token.name = tokenMarket?.name || token.cw20_contract.name;
+            token.symbol = tokenMarket?.symbol || token.cw20_contract.symbol;
+            token.decimals = token.cw20_contract.decimal;
+            token.type = this.contractType.CW20;
+            token.max_total_supply = tokenMarket?.max_supply || 0;
+            token.price = tokenMarket?.currentPrice || 0;
+            token.verify_status = tokenMarket?.verifyStatus || '';
+            token.verify_text = tokenMarket?.verifyText || '';
+            token.modeToken = EModeToken.CWToken;
+            token.priceChangePercentage24h = tokenMarket?.priceChangePercentage24h || 0;
+            token.contract_verification = token.code?.code_id_verifications[0]?.verification_status;
+            token.supplyAmount = BigNumber(token.cw20_contract?.total_supply).dividedBy(
+              BigNumber(10).pow(token.decimals),
+            );
+            token.officialSite = tokenMarket?.officialSite;
+            token.overviewInfo = tokenMarket?.overviewInfo;
+            token.socialProfiles = this.tokenService?.mappingSocialProfiles(tokenMarket?.socialProfiles);
+
+            this.tokenDetail = token;                
           }
         },
         error: (e) => {
@@ -114,6 +107,7 @@ export class TokenDetailComponent implements OnInit {
           this.loading = false;
         },
       });
+    })
   }
 
   getTokenDetail(): void {

src/app/pages/token-cosmos/token-summary/token-summary.component.scss

@@ -11,7 +11,7 @@
   .socials {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     column-gap: 20px;
 
     img {