Display token and make a searchbar for other address

package.json

@@ -19,10 +19,13 @@
     "@openzeppelin/contracts": "^5.0.2",
     "@scure/bip32": "^1.4.0",
     "@scure/bip39": "^1.3.0",
+    "alchemy-sdk": "^3.3.1",
     "axios": "^1.7.2",
+    "crypto-js": "^4.2.0",
     "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",
@@ -33,6 +36,7 @@
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.19",
+    "daisyui": "^4.12.10",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.23.0",
     "npm-run-all2": "^6.1.2",

src/App.vue

@@ -2,10 +2,45 @@
   import VerticalNavbar from "./components/wallet/verticalNavbar.vue";
   import transactions_container from "./components/transaction/transactions_container.vue";
   import ERC from "./components/main/ERC/ERC.vue";
+  import { onMounted, ref, onUnmounted } from "vue";
+  import passwordPage from "./components/passwordPage.vue";
+
+  const open = ref(false)
+
+  onMounted(() => {
+    const isOpen = localStorage.getItem('open-wallet')
+    if (isOpen === 'true') {
+      open.value = true
+    }
+
+    setInterval(checkOpen, 5000);
+
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        open.value = false;
+        localStorage.setItem('open-wallet', 'false');
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    onUnmounted(() => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    });
+  })
+
+  function checkOpen() {
+    const isOpen = localStorage.getItem('open-wallet')
+    if (isOpen === 'true') {
+      open.value = true
+    } else {
+      open.value = false
+    }
+  }
 </script>
 
 <template>
-  <div id="container">
+  <div v-if="open" id="container">
     <header>
     </header>
     <main>
@@ -20,6 +55,9 @@
       </div>
     </main>
   </div>
+  <div v-else>
+    <passwordPage @isOpen="checkOpen()"/>
+  </div>
 </template>
 
 <style scoped>

src/alchemy.ts

@@ -0,0 +1,52 @@
+import type { AlchemyConfig } from "alchemy-sdk";
+import { Network, Alchemy } from "alchemy-sdk";
+
+interface Config {
+  apiKey: string;
+  network: Network;
+}
+
+const config: Config = {
+  apiKey: 'aKVhzlNCwLMUs1hm_m7G3g00_vcuBkKh',
+  network: Network.ETH_SEPOLIA,
+};
+
+const alchemy = new Alchemy(config as AlchemyConfig);
+
+
+
+export const getBalances = async (address: string) => {
+  try {
+    const balances = await alchemy.core.getTokenBalances(address);
+    const nonZeroBalances = balances.tokenBalances.filter((token) => {
+        return token.tokenBalance !== "0x0000000000000000000000000000000000000000000000000000000000000000";
+    });
+
+    let i = 1;
+    const balanceResults = [];
+
+    for (const token of nonZeroBalances) {
+      let balance: number = 0;
+      if (token.tokenBalance != null)
+        balance = parseInt(token.tokenBalance, 16);
+      const metadata = await alchemy.core.getTokenMetadata(token.contractAddress);
+      console.log(`The logo is ${metadata.logo}`);
+      balance = balance / Math.pow(10, metadata.decimals ?? 1);
+      const balanceStr: string = balance.toFixed(2);
+      balanceResults.push({
+        name: metadata.name,
+        logo: metadata.logo,
+        balance: balanceStr,
+        symbol: metadata.symbol,
+        decimals: metadata.decimals
+      });
+      console.log(`${i++}. ${metadata.name}: ${balanceStr} ${metadata.symbol} decimals is ${metadata.decimals}`);
+    }
+
+    return balanceResults;
+  } catch (error) {
+    console.log(`${address}`)
+    console.error(`Failed to fetch token balances:`, error);
+    return [];
+  }
+};

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>