From ba7d6ac571888a8058215e23a99933947a8831c2 Mon Sep 17 00:00:00 2001 From: Artem Poltorzhitskiy Date: Thu, 30 Jun 2022 14:20:48 +0300 Subject: [PATCH] Tokens tab (#408) * Tokens tab * Fix code smells * Custom dipdup * Add thumbnail * Loading thumbnail * Deduplication code * Deduplication code - 2 --- .env.development | 3 +- src/api/token_metadata.js | 94 +++++++ src/main.js | 6 +- src/views/contract/Contract.vue | 1 - src/views/contract/MenuToolbar.vue | 4 +- src/views/contract/TokensTab/TokenHolders.vue | 92 ------- .../contract/TokensTab/TokenMetadata.vue | 252 ------------------ src/views/contract/TokensTab/TokensList.vue | 166 ------------ src/views/contract/TokensTab/TokensTab.vue | 227 +++++++++++++--- 9 files changed, 292 insertions(+), 553 deletions(-) create mode 100644 src/api/token_metadata.js delete mode 100644 src/views/contract/TokensTab/TokenHolders.vue delete mode 100644 src/views/contract/TokensTab/TokenMetadata.vue delete mode 100644 src/views/contract/TokensTab/TokensList.vue diff --git a/.env.development b/.env.development index 4aced98f..220e7063 100644 --- a/.env.development +++ b/.env.development @@ -1,2 +1,3 @@ NODE_ENV=development -VUE_APP_API_URI=https://sharm.better-call.dev/v1 \ No newline at end of file +VUE_APP_API_URI=https://sharm.better-call.dev/v1 +IPFS_NODE=https://ipfs.io \ No newline at end of file diff --git a/src/api/token_metadata.js b/src/api/token_metadata.js new file mode 100644 index 00000000..75daa956 --- /dev/null +++ b/src/api/token_metadata.js @@ -0,0 +1,94 @@ +const axios = require('axios').default; + +export class RequestFailedError extends Error { } + +function createAxios(baseURL, timeout = 10000) { + return axios.create({ + baseURL: baseURL, + timeout: timeout, + responseType: 'json' + }) +} + +function get(api, query) { + return api.post('/v1/graphql', query) + .then(res => { + if (res.status !== 200 || res.data.errors) { + throw new RequestFailedError(JSON.stringify(res)); + } + return res.data.data; + }) +} + +function buildQuery(query, address, network, limit, offset) { + return { + query: query, + variables: { + address: address, + network: network, + limit: limit, + offset: offset + }, + operationName: "GetTokenMetadata" + } +} + +export class TokenMetadataApi { + constructor(baseURL) { + this.api = createAxios(baseURL); + } + + get(network, address, limit=10, offset=0) { + let query = buildQuery(`query GetTokenMetadata($address: String, $network: String, $limit: Int, $offset: Int) { + token_metadata( + where: { + contract: {_eq: $address}, + network: {_eq: $network}} + limit: $limit + offset: $offset + order_by: {update_id: desc} + ) { + network + contract + error + link + metadata + token_id + } + }`, address, network, limit, offset) + + return get(this.api, query) + .then(res => { + return res.token_metadata; + }) + } +} + +export class DipDupTokenMetadataApi { + constructor(baseURL) { + this.api = createAxios(baseURL); + } + + get(network, address, limit=10, offset=0) { + let query = buildQuery(`query GetTokenMetadata($address: String, $network: String, $limit: Int, $offset: Int) { + dipdup_token_metadata( + where: { + contract: {_eq: $address}, + network: {_eq: $network}} + limit: $limit + offset: $offset + order_by: {update_id: desc} + ) { + network + contract + metadata + token_id + } + }`, address, network, limit, offset) + + return get(this.api, query) + .then(res => { + return res.dipdup_token_metadata; + }) + } +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index 16d12d11..45b0ae74 100644 --- a/src/main.js +++ b/src/main.js @@ -15,6 +15,7 @@ import { BrowserTracing } from "@sentry/tracing"; import { shortcut, formatDatetime, formatDate, plural, urlExtractBase58, checkAddress, round } from "@/utils/tz.js"; import { BetterCallApi } from "@/api/bcd.js"; +import { TokenMetadataApi } from "@/api/token_metadata.js"; import { NodeRPC } from "@/api/rpc.js"; import { Bookmarks } from "@/utils/bookmarks.js"; import { MetadataAPI } from "@/api/metadata.js"; @@ -109,11 +110,14 @@ Vue.filter('snakeToCamel', (str) => { let config = { API_URI: process.env.VUE_APP_API_URI || `${window.location.protocol}//${window.location.host}/v1`, HOME_PAGE: 'home', + TOKEN_METADATA_API: process.env.TOKEN_METADATA_API || "https://metadata.dipdup.net", + IPFS_NODE: process.env.IPFS_NODE || "https://ipfs.io", METADATA_API_URI: process.env.METADATA_API_URI || "https://metadata.dipdup.net" } let api = new BetterCallApi(config.API_URI); let bookmarks = new Bookmarks(); +let tokenMetadata = new TokenMetadataApi(config.TOKEN_METADATA_API); let metadataAPI = new MetadataAPI(config.METADATA_API_URI); const isDark = localStorage.getItem('dark') ? JSON.parse(localStorage.getItem('dark')) : true; @@ -138,7 +142,7 @@ api.getConfig().then(response => { Vue.mixin({ data() { - return { config, api, rpc, helpers, bookmarks, metadataAPI } + return { config, api, rpc, helpers, bookmarks, metadataAPI, tokenMetadata } } }); diff --git a/src/views/contract/Contract.vue b/src/views/contract/Contract.vue index 645c1b15..eab98abf 100644 --- a/src/views/contract/Contract.vue +++ b/src/views/contract/Contract.vue @@ -75,7 +75,6 @@ :address="address" :network="network" :contract="contract" - :tokensTotal="tokensTotal" :tokenBalancesTotal="tokenBalancesTotal" :metadata="metadata" :same-contracts="sameContracts" diff --git a/src/views/contract/MenuToolbar.vue b/src/views/contract/MenuToolbar.vue index 2b44ac1f..ef271bd4 100644 --- a/src/views/contract/MenuToolbar.vue +++ b/src/views/contract/MenuToolbar.vue @@ -20,12 +20,10 @@ mdi-circle-multiple-outlineTokens - ({{ tokensTotal | numberToCompactSIFormat(1) }}) - - -

Top holders

- - - - - - - - - - - - - {{ formatBalance(item.balance) }} - -  {{ token.symbol }} - - - - - - - - - - - - - diff --git a/src/views/contract/TokensTab/TokenMetadata.vue b/src/views/contract/TokensTab/TokenMetadata.vue deleted file mode 100644 index e4dc81bf..00000000 --- a/src/views/contract/TokensTab/TokenMetadata.vue +++ /dev/null @@ -1,252 +0,0 @@ - - - - - - - diff --git a/src/views/contract/TokensTab/TokensList.vue b/src/views/contract/TokensTab/TokensList.vue deleted file mode 100644 index 0ef252a7..00000000 --- a/src/views/contract/TokensTab/TokensList.vue +++ /dev/null @@ -1,166 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/views/contract/TokensTab/TokensTab.vue b/src/views/contract/TokensTab/TokensTab.vue index 58b5c72f..26ca71c0 100644 --- a/src/views/contract/TokensTab/TokensTab.vue +++ b/src/views/contract/TokensTab/TokensTab.vue @@ -1,57 +1,210 @@ + + + + \ No newline at end of file