AC.ContactsPage.VCFUpload.QRCode.HumanreadableResolution

.gitignore

@@ -1,3 +1,6 @@
+# .env
+.env
+
 # Logs
 logs
 *.log

package.json

@@ -39,6 +39,7 @@
     "@tezos-domains/core": "~1.26.0",
     "@tezos-domains/taquito-client": "~1.26.0",
     "@unstoppabledomains/resolution": "^7.1.4",
+    "@walletconnect/auth-client": "^2.1.1",
     "@walletconnect/client": "^1.8.0",
     "@walletconnect/core": "^2.5.2",
     "@walletconnect/utils": "^2.6.2",
@@ -111,7 +112,7 @@
     "vue-js-modal": "^2.0.0-rc.6",
     "vue-js-toggle-button": "^1.3.3",
     "vue-loading-overlay": "^3.4.2",
-    "vue-qrcode": "^0.3.3",
+    "vue-qrcode": "^0.3.6",
     "vue-qrcode-reader": "^2.3.13",
     "vue-ripple-directive": "^2.0.1",
     "vue-router": "^3.4.6",

src/components/partials/SideNav.vue

@@ -21,6 +21,13 @@
       </span>
       <span class="link-text">Settings</span>
     </router-link>
+    <!-- Add a new route and button for the Contact page -->
+    <router-link v-ripple to="/contacts">
+      <span class="icon">
+        <contact-icon :color="pathColor('contacts')" />
+      </span>
+      <span class="link-text">Contacts</span>
+    </router-link>
   </aside>
 </template>
 
@@ -30,13 +37,15 @@ import { mapGetters } from 'vuex'
 import FilesIcon from '../icons/Files.vue'
 import SettingsIcon from '../icons/Settings.vue'
 import WalletIcon from '../icons/Wallet.vue'
+import ContactIcon from '../icons/Contact.vue'
 
 export default {
   name: 'SideNav',
   components: {
     FilesIcon,
     SettingsIcon,
-    WalletIcon
+    WalletIcon,
+    ContactIcon
   },
   computed: {
     ...mapGetters(['menuType'])

src/router/index.js

@@ -4,6 +4,7 @@ import Home from '../views/Home.vue'
 import Directories from '../views/Directories.vue'
 import Test from '../views/Test.vue'
 import Settings from '../views/Settings.vue'
+import Contacts from '../views/Contacts.vue'
 
 Vue.use(VueRouter)
 
@@ -27,6 +28,11 @@ const routes = [
     path: '/settings/:activeTab',
     name: 'Settings',
     component: Settings
+  },
+  {
+    path: '/contacts',
+    name: 'Contacts',
+    component: Contacts
   }
 ]
 

src/views/Contacts.vue

@@ -0,0 +1,152 @@
+<!-- Notes about this component:
+Contributors: Antonio Cruz (TonyBoy56)
+
+Description:
+* My intention was to create a table that would show a possible list of contacts a signed in user may already have.
+* Upon clicking a Contact Name, a modal will appear near the bottom of the page displaying their Name, and Email as contact info.
+  - Changes: Plans to have this modal as a popup at the top of the page rather than the bottom.
+
+Changes to the component for better UI/UX:
+* Leverage ContactService.js
+* Add the ability to add/edit/remove contacts
+-->
+
+<template>
+  <div class="view">
+    <h1 class="view-name">Contacts</h1>
+    <div class="bg-white shadow py-5 px-4 mt-4">
+      <button @click="toggleVcfModal">VCF File Upload</button>
+      <div class="modal-background" v-if="isModalVisible">
+        <div class="modal-content">
+          <h2>Import VCF File</h2>
+          <input type="file" @change="handleFileUpload" accept=".vcf" />
+          <div v-if="vcfData">
+            <h3>Contact Information</h3>
+            <pre>{{ vcfData }}</pre>
+            <qrcode-vue :value="vcfData"></qrcode-vue>
+          </div>
+          <button class="close" @click="toggleVcfModal">&times;</button>
+        </div>
+      </div>
+      <table class="table">
+        <thead class="container">
+          <tr class="row">
+            <th class="col">Name</th>
+            <th class="col">Email</th>
+          </tr>
+        </thead>
+        <tbody class="container">
+          <!-- Loop through contacts to display on the table -->
+          <tr class="row" v-for="(contact, index) in contacts" :key="index">
+            <td class="col">
+              <button @click="openContactModal(contact)">
+                {{ contact.name }}
+              </button>
+            </td>
+            <td class="col">{{ contact.email }}</td>
+          </tr>
+        </tbody>
+      </table>
+      <!-- Contacts Modal -->
+      <div class="modal-background" v-if="selectedContact">
+        <div class="modal-content">
+          <button class="close" @click="closeContactModal">&times;</button>
+          <h2>Contact Information</h2>
+          <div><strong>Name:</strong> {{ selectedContact.name }}</div>
+          <div><strong>Email:</strong> {{ selectedContact.email }}</div>
+          <div><strong>Address:</strong> {{ selectedContact.address }}</div>
+          <div><strong>Company:</strong> {{ selectedContact.company }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import QrcodeVue from 'vue-qrcode'
+
+export default {
+  name: 'ContactsPage',
+  components: {
+    QrcodeVue
+  },
+  data() {
+    return {
+      isModalVisible: false,
+      vcfData: null,
+      selectedContact: null,
+      contacts: [
+        {
+          name: 'John Doe',
+          email: '[email protected]',
+          address: 'example address',
+          company: 'Example Company, Inc'
+        },
+        {
+          name: 'Jack Ryan',
+          email: '[email protected]',
+          address: 'example address',
+          company: 'Example Company, Inc'
+        },
+        {
+          name: 'Lara Croft',
+          email: '[email protected]',
+          address: 'example address',
+          company: 'Example Company, Inc'
+        },
+        {
+          name: 'Soap MacTavish',
+          email: '[email protected]',
+          address: 'example address',
+          company: 'Example Company, Inc'
+        },
+        {
+          name: 'John Price',
+          email: '[email protected]',
+          address: 'example address',
+          company: 'Example Company, Inc'
+        },
+        {
+          name: 'Handler Walter',
+          email: '[email protected]',
+          address: 'example address',
+          company: 'Example Company, Inc'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleFileUpload(event) {
+      const file = event.target.files[0]
+      if (file) {
+        const reader = new FileReader()
+
+        reader.onload = (e) => {
+          this.vcfData = e.target.result
+        }
+        reader.readAsText(file)
+      }
+    },
+    toggleVcfModal() {
+      this.isModalVisible = !this.isModalVisible
+    },
+    openContactModal(contact) {
+      this.selectedContact = contact
+    },
+    closeContactModal() {
+      this.selectedContact = null
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* Style for the close button */
+.close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 10px;
+  cursor: pointer;
+}
+</style>

src/views/Test.vue

@@ -1,3 +1,11 @@
+<!-- Notes about this component:
+Contributors: Antonio Cruz (TonyBoy56)
+
+Description:
+* Page should server the purpose of allowing a user to run a human-readable domain search, and produce a result of the associated crypto-currency along with its long-form domain address.
+* Removed the left input field from the page
+-->
+
 <template>
   <div class="view">
     <h1 class="view-name">Test</h1>
@@ -12,13 +20,6 @@
               class="form-control"
               required
             />
-            <input
-              v-model="coinTicker"
-              type="text"
-              placeholder="Coin Ticker (e.g., BTC, ETH, XTZ)"
-              class="form-control"
-              required
-            />
           </div>
           <button
             class="py-1 px-5 mt-4 rounded text-white hover:shadow"