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

* [fix][598] fix set token info

* fix: token info (10 -> 29)

* fix: default native image

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,35 @@ 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);
+ console.log(token);
+
+ this.tokenDetail = token; 
  }
  },
  error: (e) => {
@@ -114,6 +108,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 {