fixed token icon, sort criteria, contracts icon & low resolutions

src/components/AppSearch.vue

@@ -3,7 +3,7 @@ import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { toChecksumAddress } from 'src/lib/utils';
 import { getSystemBalance } from 'src/lib/balance-utils';
-
+import { TokenList } from 'src/types';
 import axios from 'axios';
 
 import AppSearchResultEntry from 'src/components/AppSearchResultEntry.vue';
@@ -24,6 +24,7 @@ import {
 import { Observable, debounceTime, fromEvent, map, of, switchMap, tap } from 'rxjs';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
+import { contractManager } from 'src/boot/telosApi';
 
 const props = defineProps<{
  homepageMode?: boolean; // if true, the search bar will be styled for placement on the homepage
@@ -43,7 +44,7 @@ const searchResults = ref<Array<SearchResult>>([]);
 const selectedTab = ref<string>('tokens');
 const fiatValue = useStore().getters['chain/tlosPrice'];
 const loading = ref<boolean>(false);
-
+const tokenList = ref<TokenList | null>(null);
 
 // Logic to resolve and depurate search results ----
 
@@ -87,8 +88,9 @@ const resolvePriceUSD = (entry: SearchResultToken | SearchResultNFT): string =>
 
 const resolveIcon = (entry: SearchResultToken): string => {
  // TODO: implement this function
- if (entry.category === 'token') {
- return 'assets/logo--teloscan.png';
+ const knownToken = tokenList.value?.tokens.find(token => token.address === entry.address);
+ if (knownToken) {
+ return knownToken.logoURI;
  } else {
  return 'assets/logo--teloscan.png';
  }
@@ -172,10 +174,28 @@ const convertRawToProcessedResult = (entry: SearchResultRaw): SearchResult => {
  }
 };
 
-const byCategory = (a: SearchResult, b: SearchResult): number => {
+const sortCriteria = (a: SearchResult, b: SearchResult): number => {
  const aIndex = SearchResultCategories.indexOf(a.category);
  const bIndex = SearchResultCategories.indexOf(b.category);
- return aIndex - bIndex;
+ const categorySort = aIndex - bIndex;
+ if (categorySort === 0) {
+ // same category
+ if (a.category === 'token' && b.category === 'token') {
+ const aKnown = tokenList.value?.tokens.find(token => token.address === a.address) ? 1 : 0;
+ const bKnown = tokenList.value?.tokens.find(token => token.address === b.address) ? 1 : 0;
+ if (aKnown && bKnown) {
+ // if both are known tokens, sort by price
+ return (b as SearchResultToken).price - (a as SearchResultToken).price;
+ } else {
+ // if one is known and the other is unknown, sort by known first
+ return bKnown - aKnown;
+ }
+ } else {
+ return 0;
+ }
+ } else {
+ return categorySort;
+ }
 };
 
 const fetchResults = (query: string): Observable<SearchResult[]> => {
@@ -186,12 +206,12 @@ const fetchResults = (query: string): Observable<SearchResult[]> => {
  // When merging with Crosschain support (https://github.com/telosnetwork/teloscan/pull/769)
  // use the following line instead:
  // const endpoint = useChainStore().currentChain.settings.getIndexerApiEndpoint();
- const url = `${endpoint}/api?module=search&action=search&query=${query}&offset=1000`;
+ const url = `${endpoint}/api?module=search&action=search&query=${query}&offset=50`;
  return new Observable<SearchResult[]>((observer) => {
  loading.value = true;
  axios.get(url).then((response) => {
  const result = response.data.result.map((entry: SearchResultRaw) => convertRawToProcessedResult(entry));
- result.sort(byCategory);
+ result.sort(sortCriteria);
  loading.value = false;
  observer.next(result);
  observer.complete();
@@ -257,7 +277,7 @@ const handleClick = (event: Event): void => {
  });
 };
 
-onMounted(() => {
+onMounted(async () => {
  const input = inputRef.value?.$el;
 
  if (input) {
@@ -279,6 +299,9 @@ onMounted(() => {
  }
 
  document.addEventListener('click', handleClick);
+
+ tokenList.value = await contractManager.getTokenList();
+ console.log('tokenList', tokenList.value);
 });
 
 onBeforeUnmount(() => {
@@ -554,6 +577,7 @@ const handleResultClick = (item: SearchResult): void => {
  flex-direction: column;
  gap: 10px;
  padding-bottom: 10px;
+ width: 100%;
  }
 }
 </style>

src/components/AppSearchResultEntry.vue

@@ -61,6 +61,7 @@ const habdleClick = () => {
  <div class="c-search-result-entry__details">
  <div class="c-search-result-entry__title">
  {{ item.token.name }}
+ <span class="c-search-result-entry__title-symbol">({{ item.token.symbol }})</span>
  <span v-if="item.token.price > 0" class="c-search-result-entry__title-price">{{ item.token.priceUSD }}</span>
  </div>
  <div class="c-search-result-entry__subtitle">{{ item.token.address }}</div>
@@ -76,6 +77,7 @@ const habdleClick = () => {
 
  <template v-if="category === 'contract'">
  <div class='c-search-result-entry c-search-result-entry--contract'>
+ <img :src="createIconFromData(item.contract.address)" alt="" class="c-search-result-entry__icon">
  <div class="c-search-result-entry__details">
  <div class="c-search-result-entry__title">{{ item.contract.name }}</div>
  <div class="c-search-result-entry__subtitle">{{ item.contract.address }}</div>
@@ -91,7 +93,7 @@ const habdleClick = () => {
 
  <template v-if="category === 'nft'">
  <div class='c-search-result-entry c-search-result-entry--nft'>
- <img :src="item.nft.img" alt="" class="c-search-result-entry__icon">
+ <img :src="createIconFromData(item.nft.address)" alt="" class="c-search-result-entry__icon">
  <div class="c-search-result-entry__details">
  <div class="c-search-result-entry__title">{{ item.nft.name }}</div>
  <div class="c-search-result-entry__subtitle">{{ item.nft.address }}</div>
@@ -150,7 +152,9 @@ const habdleClick = () => {
 <style lang="scss">
 .c-search-result {
  padding: 0px 10px;
+ width: 100%;
  &-entry {
+ width: 100%;
  padding: 8px;
  cursor: pointer;
  display: flex;
@@ -159,6 +163,7 @@ const habdleClick = () => {
  background-color: var(--bg-hover-color);
  }
  &__details {
+ width: calc(100% - 50px);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
@@ -169,11 +174,24 @@ const habdleClick = () => {
  white-space: nowrap;
  font-size: .9062rem;
  font-weight: 400;
+ &-symbol {
+ color: var(--subtitle-color);
+ margin-left: 5px;
+ }
+ &-price {
+ font-weight: 600;
+ color: var(--subtitle-color);
+ margin-left: 10px;
+ }
  }
  &__subtitle {
  font-size: 16px;
  font-size: .875em;
  color: var(--subtitle-color);
+ // elipsis
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
  }
  &__icon {
  width: 22px;

src/lib/contract/ContractManager.js

@@ -4,6 +4,7 @@ import axios from 'axios';
 import { getTopicHash } from 'src/lib/utils';
 import { ERC1155_TRANSFER_SIGNATURE, TRANSFER_SIGNATURES } from 'src/lib/abi/signature/transfer_signatures.js';
 import { erc1155Abi, erc721MetadataAbi } from 'src/lib/abi';
+import { getAntelope, useChainStore } from 'src/antelope';
 const tokenList = 'https://raw.githubusercontent.com/telosnetwork/token-list/main/telosevm.tokenlist.json';
 const systemContractList =
  'https://raw.githubusercontent.com/telosnetwork/token-list/main/telosevm.systemcontractlist.json';
@@ -17,11 +18,10 @@ export default class ContractManager {
  this.indexerApi = indexerApi;
  this.systemContractList = false;
  this.tokenList = false;
- this.ethersProvider = new ethers.providers.JsonRpcProvider(process.env.NETWORK_EVM_RPC);
  }
 
  getEthersProvider() {
- return this.ethersProvider;
+ return getAntelope().wallets.getWeb3Provider();
  }
  async getTransfers(raw) {
  if(!raw.logs || raw.logs?.length === 0){
@@ -84,7 +84,7 @@ export default class ContractManager {
  async loadNFTs(contract){
  let address = contract.address.toLowerCase();
  try {
- let response = await this.indexerApi.get(`/contract/${address}/nfts`);
+ let response = await this.indexerApi.get(`/v1/contract/${address}/nfts`);
  if(response.data.results?.length > 0){
  for(var i = 0; i < response.data.results.length; i++){
  let nft = response.data.results[i];
@@ -105,7 +105,7 @@ export default class ContractManager {
  }
  try {
  // TODO: change endpoint based on contract interfaces
- let response = await this.indexerApi.get(`/contract/${address}/nfts?tokenId=${tokenId}`);
+ let response = await this.indexerApi.get(`/v1/contract/${address}/nfts?tokenId=${tokenId}`);
  if(response.data.results?.length > 0){
  this.contracts[address].nfts[tokenId] = response.data.results[0];
  return response.data.results[0];
@@ -179,7 +179,7 @@ export default class ContractManager {
  async loadTokenList() {
  const results = await axios.get(tokenList);
  const { tokens } = results.data;
- results.data.tokens = (tokens ?? []).filter(({ chainId }) => chainId === process.env.NETWORK_EVM_CHAIN_ID);
+ results.data.tokens = (tokens ?? []).filter(({ chainId }) => +chainId === +useChainStore().currentChain.settings.getChainId());
 
  this.tokenList = results.data || false;
  }
@@ -191,7 +191,7 @@ export default class ContractManager {
  const results = await axios.get(systemContractList);
  const { contracts } = results.data;
  results.data.contracts = (contracts ?? []).filter(
- ({ chainId }) => chainId === process.env.NETWORK_EVM_CHAIN_ID)
+ ({ chainId }) => +chainId === +useChainStore().currentChain.settings.getChainId())
  ;
  this.systemContractList = results.data || false;
  this.processing['systemcontractlist'] = false;
@@ -253,7 +253,7 @@ export default class ContractManager {
  this.processing.push(addressLower);
  let contract = null;
  try {
- let response = await this.indexerApi.get(`/contract/${address}?full=true&includeAbi=true`);
+ let response = await this.indexerApi.get(`/v1/contract/${address}?full=true&includeAbi=true`);
  if(response.data?.success && response.data.results.length > 0){
  contract = response.data.results[0];
  }

src/types/Token.ts

@@ -1,6 +1,35 @@
+
+export interface Tag {
+ name: string;
+ description: string;
+}
+
 export interface Token {
+ chainId: number;
  address: string;
+ symbol: string;
+ name: string;
+ coingeckoId: string | boolean;
+ cmcId: number | boolean;
+ logoURI: string;
+ decimals: number;
+ tags: string[];
  issuer: string;
  issuer_link: string;
+}
+
+export interface Version {
+ major: number;
+ minor: number;
+ patch: number;
+}
+
+export interface TokenList {
+ name: string;
  logoURI: string;
+ keywords: string[];
+ tags: { [key: string]: Tag };
+ timestamp: string;
+ tokens: Token[];
+ version: Version;
 }

src/types/index.ts

@@ -6,3 +6,4 @@ export * from 'src/types/ERCTransfer';
 export * from 'src/types/NftTransfers';
 export * from 'src/types/SearchTypes';
 export * from 'src/types/TransactionQueryData';
+export * from 'src/types/Token';