Merge pull request #17 from PoCInnovation/dev

add swap and bridge and fix some stuff

src/components/main/ERC/NFT/NFT.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { onMounted, ref, computed } from 'vue'
 import { useStore } from 'vuex'
-import AddDialog from '@/components/main/ERC/NFT/add/AddDialog.vue'
-import AddBtn from '@/components/main/ERC/NFT/add/AddBtn.vue'
-import NFTCard from '@/components/main/ERC/NFT/NFTCard.vue'
-import { getNFTsForOwner } from '@/getNFTsForOwner'
+import AddDialog from './add/AddDialog.vue'
+import AddBtn from './add/AddBtn.vue'
+import NFTCard from './NFTCard.vue'
+import { getNFTsForOwner } from '../../../../getNFTsForOwner'
+import { watchEffect } from 'vue'
 
 const store = useStore()
 const account = computed(() => store.getters.selectedAccount)
@@ -13,14 +14,25 @@ const chain = computed(() => store.getters.chain)
 const dialogVisible = ref(false)
 const NFTsList = ref([])
 let importedNFTs = window.localStorage.getItem('ImportedNFTs')
+const importedNftLs = ref([])
 
 onMounted(async () => {
   if (account.value) {
-    NFTsList.value = await getNFTsForOwner(account.value, chain.value.alchemyURLNFT)
+    NFTsList.value = await getNFTsForOwner(account.value, chain.value.chain.alchemyURLNFT)
   }
 
   if (importedNFTs) {
-    importedNFTs = JSON.parse(importedNFTs)
+    importedNftLs.value = await JSON.parse(importedNFTs)
+  }
+})
+
+// watchEffect on dialogVisible and refresh the component
+watchEffect(async () => {
+  if (dialogVisible.value == false) {
+    importedNFTs = window.localStorage.getItem('ImportedNFTs')
+    if (importedNFTs) {
+      importedNftLs.value = await JSON.parse(importedNFTs)
+    }
   }
 })
 </script>
@@ -30,8 +42,8 @@ onMounted(async () => {
     <div v-for="NFT in NFTsList" :key="NFT.id">
       <NFTCard v-if="NFT.tokenType === 'ERC721' && NFT.name" :metadata="NFT" />
     </div>
-    <div v-for="NFT in importedNFTs" :key="NFT.id">
-      <NFTCard v-if="NFT.tokenType === 'ERC721' && NFT.name" :metadata="NFT" />
+    <div v-for="NFT in importedNftLs" :key="NFT.id">
+      <NFTCard v-if="NFT.tokenType === 'ERC721'" :metadata="NFT" />
     </div>
     <AddBtn :label="'NFT'" @click="dialogVisible = true" id="add-btn" />
   </div>

src/components/main/ERC/NFT/NFTCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import popUpNFT from '@/components/main/ERC/NFT/PopUpNFT.vue'
+import popUpNFT from './PopUpNFT.vue'
 import { ref } from 'vue'
 
 const props = defineProps(['metadata'])
@@ -21,7 +21,7 @@ const truncate = (str: string, n: number) => (str.length > n ? str.slice(0, n -
       <source :src="metadata.image.orginialUrl" />
     </video>
     <div>
-      <p id="title">{{ metadata.name }}</p>
+      <p id="title">{{ metadata.name || metadata.contract.name }}</p>
       <p id="desc" v-if="metadata.description">{{ truncate(metadata.description, 100) }}</p>
     </div>
   </div>

src/components/main/ERC/NFT/PopUpNFT.vue

@@ -4,29 +4,35 @@ import { ref } from 'vue'
 const props = defineProps(['visible', 'metadata'])
 console.log(props.metadata)
 const video = ref(false)
+const banner = ref("/img/defaultBanner.png")
+const slug = ref("no name")
+if (props.metadata.collection) {
+  banner.value = props.metadata.collection.bannerImageUrl
+  slug.value = props.metadata.collection.slug
+}
 </script>
 
 <template>
   <div id="background">
     <div id="pop-up" @click="$emit('close-popUp')">
       <img
         v-if="!video"
-        :src="props.metadata.collection.bannerImageUrl"
+        :src="banner"
         alt="image"
         id="banner-img"
         @error="video = true"
       />
       <video v-else id="banner-img" loop autoplay muted>
-        <source :src="props.metadata.collection.bannerImageUrl" />
+        <source :src="banner" />
       </video>
       <div id="metadata">
         <div id="text">
-          <p id="collection-title">{{ metadata.collection.slug }} - {{ metadata.tokenId }}</p>
+          <p id="collection-title">collection name : {{ slug }} - token ID : {{ metadata.tokenId }}</p>
           <p id="title">{{ metadata.name }}</p>
           <p id="description">{{ metadata.description }}</p>
           <p id="contract">{{ metadata.contract.address }}</p>
         </div>
-        <img :src="props.metadata.image.originalUrl" alt="image" id="NFT-img" />
+        <img :src="props.metadata.image.originalUrl" alt="image" id="NFT-img"/>
       </div>
     </div>
   </div>

src/components/main/ERC/NFT/add/AddDialog.vue

@@ -1,18 +1,24 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { getNFTMetadata } from '@/getNFTMetadata'
-import { addImportedNFTs } from '@/updateWallet'
-import PopUpNFT from '@/components/main/ERC/NFT/PopUpNFT.vue'
+import { getNFTMetadata } from '../../../../../getNFTMetadata'
+import { addImportedNFTs } from '../../../../../updateWallet'
+import PopUpNFT from '../PopUpNFT.vue'
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 
 const emit = defineEmits(['close-dialog'])
-const smartContract = ref('0x0af85e2dee602b0a14d50f4fc1096c2f7fbe60f2')
-const tokenID = ref(102)
+const smartContract = ref('0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D')
+const tokenID = ref(353)
 const metadata = ref(null)
 const error = ref(false)
 const displayImported = ref(false)
+
+const store = useStore()
+const chain = computed(() => store.getters.chain)
+
 const addNFT = async () => {
-  metadata.value = await getNFTMetadata(smartContract.value, tokenID.value, 'eth-mainnet')
-  error.value = addImportedNFTs(metadata.value)
+  metadata.value = await getNFTMetadata(smartContract.value, tokenID.value, chain.value.chain.alchemyNetwork)
+  error.value = await addImportedNFTs(metadata.value)
   if (!error.value) {
     displayImported.value = true
   }

src/components/main/ERC/token/ButtonBalance.vue

@@ -39,6 +39,7 @@ export default defineComponent({
     const store = useStore()
     const myChain = computed(() => store.getters.chain)
     const currentMode = ref(chain.value.alchemyNetwork)
+    const refresh = computed(() => store.getters.refresh)
 
     const userAddress = ref('')
     const balances = ref<
@@ -93,6 +94,10 @@ export default defineComponent({
       handleButtonClick()
     })
 
+    watch(refresh, async () => {
+      handleButtonClick()
+    })
+
     watchEffect(() => {
       if (myChain.value) {
         handleButtonClick()

src/components/main/action/UserActionsButton.vue

@@ -15,8 +15,8 @@ const manageDialog = (type: string) => {
   <div id="container">
     <div v-if="!isAction" id="btn">
       <button @click="manageDialog('send')">Send</button>
-      <button>Swap</button>
-      <button>Bridge</button>
+      <button @click="manageDialog('swap')">Swap</button>
+      <button @click="manageDialog('bridge')">Bridge</button>
     </div>
     <UserActionsDialog v-if="isAction" :type="typeOfAction" @close-dialog="manageDialog" />
   </div>

src/components/main/action/UserActionsDialog.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import SendAction from './actions/SendAction.vue'
+import SwapAction from './actions/SwapAction.vue'
+import BridgeAction from './actions/BridgeAction.vue'
 
 defineProps(['type'])
 </script>
 
 <template>
   <div id="background">
     <SendAction v-if="type === 'send'" @close-dialog="$emit('close-dialog')" />
+    <SwapAction v-if="type === 'swap'" @close-dialog="$emit('close-dialog')" />
+    <BridgeAction v-if="type === 'bridge'" @close-dialog="$emit('close-dialog')" />
   </div>
 </template>