Add initial alchemy structure code

.env.example

@@ -1 +1,3 @@
-VITE_API_URL=http://localhost:8000/
+VITE_API_URL=http://localhost:8000/
+VITE_GOERLI_API_KEY={GOERLI_API_KEY_ALCHEMY}
+VITE_MUMBAI_API_KEY={MUMBAI_API_KEY_ALCHEMY}

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@headlessui/vue": "^1.7.3",
     "@heroicons/vue": "^2.0.12",
+    "alchemy-sdk": "^2.3.0",
     "axios": "^1.2.1",
     "crc": "^3.8.0",
     "pinia": "^2.0.23",

src/components/TopBar.vue

@@ -4,8 +4,8 @@ import { useEtherStore } from "../store/ether";
 import { ref } from "vue";
 import { NetworkEnum } from "@/model/NetworkEnum";
 import blockchain from "../utils/blockchain";
-import ethereumImage from "../assets/ethereum.svg"
+import ethereumImage from "../assets/ethereum.svg";
-import polygonImage from "../assets/polygon.svg"
+import polygonImage from "../assets/polygon.svg";
 
 // Store reference
 const etherStore = useEtherStore();
@@ -50,12 +50,12 @@ const closeMenu = () => {
 
 const getNetworkImage = (networkName: NetworkEnum) => {
   let validImages = {
-    "Ethereum": ethereumImage,
+    Ethereum: ethereumImage,
-    "Polygon": polygonImage,
+    Polygon: polygonImage,
-  }
+  };
 
   return validImages[networkName];
-}
+};
 </script>
 
 <template>
@@ -81,7 +81,7 @@ const getNetworkImage = (networkName: NetworkEnum) => {
             ]
           "
           @mouseover="currencyMenuHoverToggle = true"
-          @mouseout="currencyMenuHoverToggle = false;"
+          @mouseout="currencyMenuHoverToggle = false"
           :style="{
             backgroundColor: currencyMenuOpenToggle
               ? '#F9F9F9'
@@ -90,7 +90,10 @@ const getNetworkImage = (networkName: NetworkEnum) => {
               : 'transparent',
           }"
         >
-          <img alt="Choosed network image" :src="getNetworkImage(etherStore.networkName)" />
+          <img
+            alt="Choosed network image"
+            :src="getNetworkImage(etherStore.networkName)"
+          />
           <span
             class="default-text group-hover:text-gray-900"
             :style="{
@@ -126,7 +129,7 @@ const getNetworkImage = (networkName: NetworkEnum) => {
         >
           <div class="mt-2">
             <div class="bg-white rounded-md z-10">
-              <div 
+              <div
                 class="menu-button gap-2 px-4 rounded-md cursor-pointer"
                 @click="etherStore.setNetworkName(NetworkEnum.ethereum)"
               >
@@ -136,16 +139,14 @@ const getNetworkImage = (networkName: NetworkEnum) => {
                   height="20"
                   src="@/assets/ethereum.svg"
                 />
-                <span
+                <span class="text-gray-900 py-4 text-end font-semibold text-sm">
-                  class="text-gray-900 py-4 text-end font-semibold text-sm"
-                >
                   Ethereum
                 </span>
               </div>
               <div class="w-full flex justify-center">
                 <hr class="w-4/5" />
               </div>
-              <div 
+              <div
                 class="menu-button gap-2 px-4 rounded-md cursor-pointer"
                 @click="etherStore.setNetworkName(NetworkEnum.polygon)"
               >
@@ -155,9 +156,7 @@ const getNetworkImage = (networkName: NetworkEnum) => {
                   height="20"
                   src="@/assets/polygon.svg"
                 />
-                <span
+                <span class="text-gray-900 py-4 text-end font-semibold text-sm">
-                  class="text-gray-900 py-4 text-end font-semibold text-sm"
-                >
                   Polygon
                 </span>
                 <hr />

src/model/NetworkEnum.ts

@@ -1,4 +1,4 @@
 export enum NetworkEnum {
-    ethereum = "Ethereum",
+  ethereum = "Ethereum",
-    polygon = "Polygon"
+  polygon = "Polygon",
-};
+}

src/utils/alchemy.ts

@@ -0,0 +1,32 @@
+import { Network, Alchemy } from "alchemy-sdk";
+import { useEtherStore } from "@/store/ether";
+
+const getAlchemy = () => {
+  const possibleSettings = {
+    Ethereum: {
+      apiKey: import.meta.env.VITE_GOERLI_API_KEY,
+      network: Network.ETH_GOERLI,
+    },
+    Polygon: {
+      apiKey: import.meta.env.VITE_MUMBAI_API_KEY,
+      network: Network.MATIC_MUMBAI,
+    },
+  };
+  const etherStore = useEtherStore();
+
+  const settings = possibleSettings[etherStore.networkName];
+  const alchemy = new Alchemy(settings);
+  return alchemy;
+};
+
+const showLatestBlockNumber = async () => {
+  const alchemy = getAlchemy();
+
+  const latestBlock = await alchemy.core.getBlockNumber();
+  if (latestBlock) console.log(latestBlock);
+};
+
+export default {
+  getAlchemy,
+  showLatestBlockNumber,
+};