Share wallet between components

package.json

@@ -22,7 +22,8 @@
     "axios": "^1.7.2",
     "crypto-ts": "^1.0.2",
     "viem": "^2.14.2",
-    "vue": "^3.4.21"
+    "vue": "^3.4.21",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",

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

@@ -1,27 +1,34 @@
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue'
-  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 { account } from '@/main'
+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';
 
-  const dialogVisible = ref(false)
-  const NFTsList = ref()
-  let importedNFTs = window.localStorage.getItem('ImportedNFTs')
-  onMounted(async () => {
-    NFTsList.value = await getNFTsForOwner(account, "eth-mainnet");
-    if (importedNFTs) {
-      importedNFTs = JSON.parse(importedNFTs)
-    }
-  })
+const store = useStore();
+const account = computed(() => store.getters.selectedAccount);
+
+const dialogVisible = ref(false);
+const NFTsList = ref([]);
+let importedNFTs = window.localStorage.getItem('ImportedNFTs');
+
+onMounted(async () => {
+  if (account.value) {
+    NFTsList.value = await getNFTsForOwner(account.value, "eth-mainnet");
+  }
+
+  if (importedNFTs) {
+    importedNFTs = JSON.parse(importedNFTs);
+  }
+});
 </script>
 
 <template>
   <div id="container">
-   <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 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>

src/components/main/user-info/UserInfos.vue

@@ -1,25 +1,35 @@
 <script setup lang="ts">
+import { ref, computed, watchEffect } from 'vue';
+import { useStore } from 'vuex';
 import { getBalance } from '@/getBalance';
-import { exchangeRates } from '@/exchangeRates'
-import { account } from '@/main'
+import { exchangeRates } from '@/exchangeRates';
 
-const balance = await getBalance(account).then((res: number) => Number(res) / Number(BigInt(1000000000000000000)))
-const ETH = await exchangeRates('ETH').then((res: any) => res.data.rates.USD)
+const store = useStore();
+const account = computed(() => store.getters.selectedAccount);
+const balance = ref<number | null>(null);
+const ETH = ref<number | null>(null);
+
+ETH.value = await exchangeRates('ETH').then((res: any) => res.data.rates.USD);
+watchEffect(async () => {
+  if (account.value) {
+    balance.value = await getBalance(account.value).then((res: number) => Number(res) / Number(BigInt(1000000000000000000)));
+  }
+});
 </script>
 
 <template>
   <div id="container">
     <div id="token">
       <img src="../../../assets/eth_logo.png" alt="ETH" id="eth-logo"/>
       <div id="balance">
-        <h1>{{ balance.toFixed(4) }} ETH</h1>
-        <p>${{ (balance.toFixed(4) * ETH).toFixed(2) }} USD</p>
+        <h1 v-if="balance !== null">{{ balance.toFixed(4) }} ETH</h1>
+        <p v-if="balance !== null && ETH !== null">${{ (balance.toFixed(4) * ETH).toFixed(2) }} USD</p>
       </div>
     </div>
     <div id="exchange">
       <h2>1 ETH</h2>
       <img src="../../../assets/arrow.svg" alt="arrow" id="arrow"/>
-      <h2>{{ ETH }} USD</h2>
+      <h2 v-if="ETH !== null">{{ ETH }} USD</h2>
     </div>
   </div>
 </template>

src/components/main/user-info/UserProfile.vue

@@ -1,16 +1,26 @@
 <script setup lang="ts">
-  import Dots3Icon from "../../../assets/3DotsIcon.svg"
-  import TooltipCopy from './TooltipCopy.vue'
-  import { account } from '@/main'
+import Dots3Icon from "../../../assets/3DotsIcon.svg"
+import TooltipCopy from './TooltipCopy.vue'
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+
+const store = useStore()
+const selectedAccount = computed(() => store.getters.selectedAccount)
+const reducedAddress = computed(() => {
+  return selectedAccount.value ? `${selectedAccount.value.slice(0, 7)}...${selectedAccount.value.slice(-5)}` : null;
+});
 </script>
 
 <template>
   <div id="container">
     <div>
       <h1 id="name">Main Account</h1>
-      <div id="address">
-        <p>{{ account.slice(0, 18) }}</p>
-        <TooltipCopy :address="account"/>
+      <div id="address" v-if="selectedAccount">
+        <p>{{ reducedAddress }}</p>
+        <TooltipCopy :address="selectedAccount"/> <!-- Adresse complète passée pour la copie -->
+      </div>
+      <div v-else>
+        <p>No account selected</p>
       </div>
     </div>
     <img :src="Dots3Icon" alt="icon" />
@@ -19,40 +29,40 @@
 </template>
 
 <style scoped>
-  #container {
-    padding-inline: 42px;
-    padding-block: 32px;
-    display: flex;
-    height: 11vh;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-  #name {
-    color: white;
-  }
-  #address {
-    display: flex;
-    flex-direction: row;
-  }
-  h1 {
-    font-size: 27px;
-  }
-  p {
-    color: #808080;
-    font-size: 13px;
-    margin-right: 11px;
-  }
-  img {
-    height: 18px;
-    width: 18px;
-  }
-  img:hover {
-    cursor: pointer;
-  }
-  #bottomLine {
-    width: 100%;
-    height: 1px;
-    background-color: #4E4E4E;
-  }
-</style>
+#container {
+  padding-inline: 42px;
+  padding-block: 32px;
+  display: flex;
+  height: 11vh;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+#name {
+  color: white;
+}
+#address {
+  display: flex;
+  flex-direction: row;
+}
+h1 {
+  font-size: 27px;
+}
+p {
+  color: #808080;
+  font-size: 13px;
+  margin-right: 11px;
+}
+img {
+  height: 18px;
+  width: 18px;
+}
+img:hover {
+  cursor: pointer;
+}
+#bottomLine {
+  width: 100%;
+  height: 1px;
+  background-color: #4E4E4E;
+}
+</style>