Skip to content

Commit

Permalink
[PLA-1648] add token collection name (#121)
Browse files Browse the repository at this point in the history
  • Loading branch information
@zlayine
zlayine authored Jun 11, 2024
1 parent 4729eb9 commit 057fa8f
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 4 deletions.
11 changes: 10 additions & 1 deletion resources/js/api/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export class ApiService {
});
}

static async fetchURL(url: URL) {
static async fetchPlatformURL(url: URL) {
return ApiService.request({
url: `${url}.well-known/enjin-platform.json`,
method: HttpMethods.GET,
Expand All @@ -149,6 +149,15 @@ export class ApiService {
});
}

static async fetchUrl(url: string) {
return ApiService.request({
url: url,
method: HttpMethods.GET,
credentials: undefined,
mode: undefined,
});
}

static async freeze(freezeData: Record<string, unknown>) {
const data = {
query: mutations.Freeze,
Expand Down
52 changes: 51 additions & 1 deletion resources/js/components/pages/Collections.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,13 @@
scope="col"
class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong sm:pl-3"
>
CollectionId
Name
</th>
<th
scope="col"
class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong sm:pl-3"
>
ID
</th>
<th
scope="col"
Expand Down Expand Up @@ -77,6 +83,11 @@
: 'bg-light-surface-background dark:bg-dark-surface-background !bg-opacity-50'
"
>
<td
class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-light-content-strong dark:text-dark-content-strong sm:pl-3"
>
{{ collectionNames[collection.collectionId] }}
</td>
<td
class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-light-content-strong dark:text-dark-content-strong sm:pl-3"
>
Expand Down Expand Up @@ -146,6 +157,7 @@ import { snackbarErrors } from '~/util';
import Btn from '~/components/Btn.vue';
import { TransactionState } from '~/types/types.enums';
import { useRoute, useRouter } from 'vue-router';
import { ApiService } from '~/api';

const isLoading = ref(true);
const isPaginationLoading = ref(false);
Expand All @@ -168,6 +180,7 @@ const paginatorRef = ref();
const modalSlide = ref(false);
const slideComponent = ref();
const searchInput = ref('');
const collectionNames = ref<{ [key: string]: string }[]>([]);

const route = useRoute();
const router = useRouter();
Expand Down Expand Up @@ -260,6 +273,7 @@ const getCollections = async () => {
try {
const res = await CollectionApi.getCollections();
collections.value = DTOFactory.forCollections(res);
setCollectionNames();
} catch (e) {
collections.value.items = [];
if (snackbarErrors(e)) return;
Expand All @@ -272,6 +286,41 @@ const getCollections = async () => {
}
};

const getCollectionName = async (collection) => {
const uri = collection.attributes.find((attr) => attr.key === 'uri')?.value;
if (uri) {
return await fetchUri(uri);
}

return collection.attributes.find((attr) => attr.key === 'name')?.value || '-';
};

const setCollectionNames = async () => {
collections.value.items.map(async (item) => {
if (collectionNames.value[`${item.collectionId}`]) {
return item;
}
const name = await getCollectionName(item);
collectionNames.value = { ...collectionNames.value, [`${item.collectionId}`]: name };

return item;
});
};

const fetchUri = async (uri) => {
try {
const res = await ApiService.fetchUrl(uri);
const json = JSON.parse(res);
if (json.name) {
return json.name;
}

return '-';
} catch (e) {
return '-';
}
};

const loadMoreCollectionsWithObserver = () => {
const observer = new IntersectionObserver(
async (entries) => {
Expand All @@ -283,6 +332,7 @@ const loadMoreCollectionsWithObserver = () => {
const res = await CollectionApi.getCollections(collections.value.cursor);
const data = DTOFactory.forCollections(res);
collections.value = { items: [...collections.value.items, ...data.items], cursor: data.cursor };
setCollectionNames();
isPaginationLoading.value = false;
} catch (error) {
isPaginationLoading.value = false;
Expand Down
52 changes: 51 additions & 1 deletion resources/js/components/pages/Tokens.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,13 @@
scope="col"
class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong sm:pl-3"
>
Token ID
Name
</th>
<th
scope="col"
class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong sm:pl-3"
>
ID
</th>
<th
scope="col"
Expand Down Expand Up @@ -91,6 +97,11 @@
: 'bg-light-surface-background dark:bg-dark-surface-background !bg-opacity-50'
"
>
<td
class="whitespace-nowrap px-3 py-4 text-sm text-light-content dark:text-dark-content"
>
{{ tokenNames[`${token.collection.collectionId}-${token.tokenId}`] }}
</td>
<td
class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-light-content-strong dark:text-dark-content-strong sm:pl-3"
>
Expand Down Expand Up @@ -159,6 +170,7 @@ import snackbar, { events } from '~/util/snackbar';
import FormInput from '~/components/FormInput.vue';
import NoItems from '~/components/NoItems.vue';
import Btn from '~/components/Btn.vue';
import { ApiService } from '~/api';
const isLoading = ref(false);
const isPaginationLoading = ref(false);
Expand Down Expand Up @@ -186,6 +198,7 @@ const searchTokensInput = ref({
tokenId: '',
tokenType: TokenIdSelectType.Integer,
});
const tokenNames = ref<{ [key: string]: string }[]>([]);
const enablePagination = computed(() => searchTokensInput.value.tokenId === '');
Expand Down Expand Up @@ -271,11 +284,24 @@ const searchTokensChange = (e) => {
}
};
const setTokenNames = async () => {
tokens.value.items.map(async (item) => {
if (tokenNames.value[`${item.collection.collectionId}-${item.tokenId}`]) {
return item;
}
const name = await getTokenName(item);
tokenNames.value = { ...tokenNames.value, [`${item.collection.collectionId}-${item.tokenId}`]: name };
return item;
});
};
const getTokens = async () => {
try {
isLoading.value = true;
const res = await TokenApi.getTokens(searchCollectionInput.value, formatTokens([searchTokensInput.value]));
tokens.value = DTOFactory.forTokens(res);
setTokenNames();
} catch (e) {
tokens.value.items = [];
if (snackbarErrors(e)) return;
Expand Down Expand Up @@ -303,6 +329,7 @@ const loadMoreTokensWithObserver = () => {
);
const data = DTOFactory.forTokens(res);
tokens.value = { items: [...tokens.value.items, ...data.items], cursor: data.cursor };
setTokenNames();
isPaginationLoading.value = false;
} catch (error) {
isPaginationLoading.value = false;
Expand Down Expand Up @@ -340,6 +367,29 @@ const openTransactionSlide = async (transactionId: string) => {
}, 600);
};
const getTokenName = async (token): Promise<string> => {
const uri = token.attributes.find((attr) => attr.key === 'uri')?.value;
if (uri) {
return await fetchUri(uri);
}
return token.attributes.find((attr) => attr.key === 'name')?.value || '-';
};
const fetchUri = async (uri) => {
try {
const res = await ApiService.fetchUrl(uri);
const json = JSON.parse(res);
if (json.name) {
return json.name;
}
return '-';
} catch (e) {
return '-';
}
};
onMounted(async () => {
getTokens();
loadMoreTokensWithObserver();
Expand Down
2 changes: 1 addition & 1 deletion resources/js/store/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ export const useAppStore = defineStore('app', {
async checkURL(url: URL) {
try {
if (url) {
const urlConfig = await ApiService.fetchURL(url);
const urlConfig = await ApiService.fetchPlatformURL(url);
if (urlConfig) return urlConfig;

throw 'The URL is not valid';
Expand Down

0 comments on commit 057fa8f

Please sign in to comment.