This commit is contained in:
Georges KABBOUCHI 2022-06-09 20:47:36 +03:00
parent 7755801c53
commit 078247fca3
2 changed files with 29 additions and 12 deletions

View File

@ -1,4 +1,5 @@
import { ethers } from "ethers";
import { VNode } from "vue";
const networks = {
mainnet: "https://rpc.ankr.com/eth",
@ -48,6 +49,8 @@ type Task = {
networkResults?: {
[network: string]: TaskCheckResponse;
};
renderMetadata?: ({ network: string, metadata: object }) => VNode;
renderMetadataValue?: ({ key: string, value: any }) => VNode;
statusStrategy?: "some" | "every";
check: TaskCheckFun;
};
@ -125,13 +128,13 @@ const tasks: Array<Task> = [
export function useLookup(addressOrEnsName: string) {
const taskResults = ref([]);
const taskResults = ref<Array<{ loading: boolean, description: string, networkResults: Task['networkResults'], renderMetadata: Task['renderMetadata'], renderMetadataValue: Task['renderMetadataValue'], status: TaskCheckResponse['status'] }>>([]);
const error = ref("");
const mainnetProvider = new ethers.providers.JsonRpcProvider(networks.mainnet);
const address = ref(ethers.utils.isAddress(addressOrEnsName) ? addressOrEnsName : "");
const shortAddress = computed(() => address.value ? address.value.substr(0, 8) + "..." + address.value.substr(-6) : "");
const ens = ref("");
const detectedNetworks = computed(() => [
...new Set(
@ -195,6 +198,8 @@ export function useLookup(addressOrEnsName: string) {
},
},
status: "success",
renderMetadata: task.renderMetadata,
renderMetadataValue: task.renderMetadataValue,
loading: true,
});

View File

@ -30,7 +30,8 @@ const statusIcon = {
warning: ExclamationIcon,
};
const { address, ens, detectedNetworks, taskResults, error, shortAddress } = useLookup(String(route.params.address));
const { address, ens, detectedNetworks, taskResults, error, shortAddress } =
useLookup(String(route.params.address));
</script>
<template>
@ -113,13 +114,6 @@ const { address, ens, detectedNetworks, taskResults, error, shortAddress } = use
<div>
<p class="text-sm text-gray-500">
{{ task.description }}
<span
v-if="task.network"
class="text-gray-500 text-sm"
>
({{ task.network }})
</span>
</p>
</div>
<div
@ -133,16 +127,34 @@ const { address, ens, detectedNetworks, taskResults, error, shortAddress } = use
{{ network }}
</div>
<div class="ml-4 sm:ml-6">
<ul class="space-y-2 list-disc">
<component
v-if="task.renderMetadata"
:is="
task.renderMetadata({
network,
metadata: result.metadata,
})
"
/>
<ul v-else class="space-y-2 list-disc">
<li v-for="(value, key) in result.metadata">
<span class="font-semibold capitalize">{{
key
}}</span
>:
<component
v-if="task.renderMetadataValue"
:is="
task.renderMetadataValue({
key,
value,
})
"
/>
<div
class="ml-8 sm:ml-10"
v-if="Array.isArray(value)"
v-else-if="Array.isArray(value)"
>
<ul class="list-decimal">
<li v-for="val in value">