Merge pull request #68 from Open-Info/feat/47-display-metadata

Feat/47 display metadata
Open-Info · Jan 29, 2024 · c23df22 · c23df22
2 parents 9af3106 + d27f037
commit c23df22
Show file tree

Hide file tree

Showing 7 changed files with 346 additions and 24 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -7,6 +7,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    ENSModal: typeof import('./src/components/ENSModal.vue')['default']
     ENSReverse: typeof import('./src/components/ENSReverse.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

diff --git a/src/api/index.ts b/src/api/index.ts
@@ -6,7 +6,9 @@ import {
   VOTES_GET_API,
   API_POST_OPTION,
   ENS_API,
-  ENS_RESOLVE
+  ENS_RESOLVE,
+  VERIFIED_INFO,
+  FLAGGED_INFO
 } from "@/helpers/constants";
 
 export const checkAddress = async (addr: string) => {
@@ -56,4 +58,15 @@ export const resolveENS = async (addr: string) => {
     API_GET_OPTION
   );
   return result.json();
-};
+};
+
+export const verifiedMeta = async (token_id: number) => {
+  const result = await fetch(`${VERIFIED_INFO}/${token_id}`, API_GET_OPTION);
+  console.log(result);
+  return result.json();
+};
+
+export const flaggedMeta = async (token_id: number) => {
+  const result = await fetch(`${FLAGGED_INFO}/${token_id}`, API_GET_OPTION);
+  return result.json();
+};
diff --git a/src/components/ENSModal.vue b/src/components/ENSModal.vue
@@ -0,0 +1,230 @@
+<template>
+  <div class="modal-backdrop">
+    <div
+      class="modal max-w-sm p-6 mx-4 font-['VT323'] font-normal text-[23px] leading-[26px] text-black border-black border-[3px] shadow-[8px_8px_0px_rgba(0,0,0,0.5)]"
+      :class="type">
+      <div>
+        <slot name="header"></slot>
+        <button type="button" class="btn-close" @click="close">
+          x
+        </button>
+      </div>
+      <div class="text-center text-[25px]">
+        <slot name="subtitle">{{ ens }}</slot>
+      </div>
+      <div class="relative max-h-[100px] overflow-y-auto overflow-x-hidden scrollbar-hide">
+        <slot v-for="info in ensInfo" name="body">
+          <div class="grid grid-cols-2 gap-3 mt-2">
+            <div class="text-center px-3  flex items-center justify-center">{{ info.name }}</div>
+            <div class="text-center">{{ info.value }}</div>
+          </div>
+        </slot>
+      </div>
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<style>
+.scrollbar-hide::-webkit-scrollbar {
+  width: 0.5em;
+  background-color: transparent;
+}
+
+.scrollbar-hide::-webkit-scrollbar-thumb {
+  background-color: transparent;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+</style>
+
+<script>
+export default {
+  name: 'ENSModal',
+  data() {
+    return {
+      ensInfo: [],
+      vrfdInfo: [
+        {
+          name: "twitter",
+          value: "unknown"
+        },
+        {
+          name: "telegram",
+          value: "unknown"
+        },
+        {
+          name: "tiktok",
+          value: "unknown"
+        },
+        {
+          name: "linkedin",
+          value: "unknown"
+        },
+        {
+          name: "facebook",
+          value: "unknown"
+        },
+        {
+          name: "instagram",
+          value: "unknown"
+        },
+        {
+          name: "google",
+          value: "unknown"
+        },
+      ],
+      flaggedInfo: [
+        {
+          name: "Type",
+          value: "unknown"
+        },
+        {
+          name: "reported by",
+          value: "unknown,"
+        },
+        {
+          name: "seconded by",
+          value: "unknown,"
+        },
+        {
+          name: "Proof",
+          value: "unknown,"
+        }
+      ],
+      flaggedType: [],
+    }
+  },
+  props: {
+    type: {
+      type: String,
+      required: true
+    },
+    ens: {
+      type: String,
+      required: true
+    },
+    content: {
+      type: Array,
+      default: [],
+      required: true
+    },
+  },
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+  },
+  watch: {
+    content(newVal, oldVal) {
+      console.log("->>>>>>>", newVal);
+      var returnVal = [];
+      if (this.type === "verified") {
+        this.vrfdInfo.map((val, idx) => {
+          if (newVal.length === 0) {
+            returnVal.push({
+              name: val.name,
+              value: "unknown"
+            })
+          }
+          else {
+            let idx = newVal.findIndex((c, i) => {
+              return c.trait_type.toLowerCase() === val.name
+            })
+            if (idx == -1) {
+              returnVal.push({
+                name: val.name,
+                value: "unknown"
+              })
+            } else {
+              if (val.name === "google") {
+                returnVal.push({
+                  name: newVal[idx].trait_type.toLowerCase(),
+                  value: newVal[idx].value,
+                })
+              }
+              else returnVal.push({
+                name: newVal[idx].trait_type.toLowerCase(),
+                value: '@' + newVal[idx].value,
+              })
+            }
+          }
+        })
+        this.ensInfo = returnVal;
+      } else if (this.type === "flagged") {
+        this.flaggedInfo.map((val, idx) => {
+          if (newVal.length === 0) {
+            returnVal.push({
+              name: val.name,
+              value: "unknown"
+            })
+          }
+          else {
+            var type = [];
+            newVal.map((flgVal, idx) => {
+              if (flgVal.value === true) {
+                type.push(flgVal.trait_type.toLowerCase())
+              }
+            })
+            let idx = newVal.findIndex((c, i) => {
+              return c.trait_type.toLowerCase() === val.name
+            })
+            if (idx == -1) {
+              if (val.name === "Type") {
+                if (type.length === 0) {
+                  returnVal.push({
+                    name: val.name,
+                    value: "unknown"
+                  })
+                } else {
+                  returnVal.push({
+                    name: val.name,
+                    value: type.join(", ")
+                  })
+                }
+              } else {
+                returnVal.push({
+                  name: val.name,
+                  value: "unknown"
+                })
+              }
+            } else {
+              if (val.name === "Type") {
+                if (type.length === 0) {
+                  returnVal.push({
+                    name: val.name,
+                    value: "unknown"
+                  })
+                } else {
+                  returnVal.push({
+                    name: val.name,
+                    value: type.join(", ")
+                  })
+                }
+              } else {
+                returnVal.push({
+                  name: val.name,
+                  value: newVal[idx].value
+                })
+              }
+            }
+          }
+        })
+        this.ensInfo = returnVal;
+      }
+    }
+  }
+};
+</script>
+
+<style>
+.flagged {
+  background-color: #F7766A;
+}
+
+.verified {
+  background-color: #00B689;
+}
+</style>
diff --git a/src/components/ENSReverse.vue b/src/components/ENSReverse.vue
@@ -11,7 +11,7 @@
         <span class="font-[700]">AKA </span>{{ alias }}
       </div>
       <div v-else>
-        no alias
+        View Info
       </div>
     </div>
   </div>

diff --git a/src/helpers/constants.ts b/src/helpers/constants.ts
@@ -4,6 +4,8 @@ export const VOTE_API = 'https://vrfd.dev/api/db'
 export const VOTES_GET_API = 'https://vrfd.dev/api/db/votes'
 export const ENS_API = 'https://vrfd.dev/api/db/ens_name'
 export const ENS_RESOLVE = 'https://vrfd.dev/api/db/ens_resolve'
+export const VERIFIED_INFO = 'https://vrfd.dev/meta/verified'
+export const FLAGGED_INFO = 'https://vrfd.dev/meta/flagged'
 
 export const API_GET_OPTION: any = {
   method: 'GET',