Migrated project to Viem, removing Ethers completelly. Not finished tests.

src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue

@@ -8,8 +8,8 @@ import {
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { WalletTransaction } from "@/model/WalletTransaction";
-import { useEtherStore } from "@/store/ether";
-import { storeToRefs } from "pinia";
+import { useViemStore } from "@/store/viem";
+import { NetworkEnum } from "@/model/NetworkEnum";
 import { onMounted, ref, watch } from "vue";
 import ListingComponent from "../ListingComponent/ListingComponent.vue";
 
@@ -19,8 +19,8 @@ const props = defineProps<{
   isCurrentStep: boolean;
 }>();
 
-const etherStore = useEtherStore();
-const { walletAddress } = storeToRefs(etherStore);
+const viemStore = useViemStore();
+const { walletAddress } = storeToRefs(viemStore);
 
 const lastWalletTransactions = ref<WalletTransaction[]>([]);
 const depositList = ref<ValidDeposit[]>([]);
@@ -29,7 +29,7 @@ const activeLockAmount = ref<number>(0);
 // methods
 
 const getWalletTransactions = async () => {
-  etherStore.setLoadingWalletTransactions(true);
+  viemStore.setLoadingWalletTransactions(true);
   if (walletAddress.value) {
     const walletDeposits = await listValidDepositTransactionsByWalletAddress(
       walletAddress.value
@@ -48,20 +48,20 @@ const getWalletTransactions = async () => {
       lastWalletTransactions.value = allUserTransactions;
     }
   }
-  etherStore.setLoadingWalletTransactions(false);
+  viemStore.setLoadingWalletTransactions(false);
 };
 
 const callWithdraw = async (amount: string) => {
   if (amount) {
-    etherStore.setLoadingWalletTransactions(true);
-    const withdraw = await withdrawDeposit(amount, etherStore.selectedToken);
+    viemStore.setLoadingWalletTransactions(true);
+    const withdraw = await withdrawDeposit(amount, viemStore.selectedToken);
     if (withdraw) {
       console.log("Saque realizado!");
       await getWalletTransactions();
     } else {
       console.log("Não foi possível realizar o saque!");
     }
-    etherStore.setLoadingWalletTransactions(false);
+    viemStore.setLoadingWalletTransactions(false);
   }
 };
 
@@ -93,14 +93,14 @@ onMounted(async () => {
         <div>
           <p>Tokens recebidos</p>
           <p class="text-2xl text-gray-900">
-            {{ props.tokenAmount }} {{ etherStore.selectedToken }}
+            {{ props.tokenAmount }} {{ viemStore.selectedToken }}
           </p>
         </div>
         <div class="my-5">
           <p class="text-sm">
             <b>Não encontrou os tokens? </b><br />Clique no botão abaixo para
             <br />
-            cadastrar o {{ etherStore.selectedToken }} em sua carteira.
+            cadastrar o {{ viemStore.selectedToken }} em sua carteira.
           </p>
         </div>
         <CustomButton :text="'Cadastrar token'" @buttonClicked="() => {}" />

src/components/ListingComponent/ListingComponent.vue

@@ -3,7 +3,7 @@ import { withdrawDeposit } from "@/blockchain/buyerMethods";
 import { NetworkEnum } from "@/model/NetworkEnum";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { WalletTransaction } from "@/model/WalletTransaction";
-import { useEtherStore } from "@/store/ether";
+import { useViemStore } from "@/store/viem";
 import { storeToRefs } from "pinia";
 import { ref, watch, onMounted } from "vue";
 import SpinnerComponent from "../SpinnerComponent.vue";
@@ -12,7 +12,7 @@ import { debounce } from "@/utils/debounce";
 import { getTokenByAddress } from "@/blockchain/addresses";
 import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue";
 
-const etherStore = useEtherStore();
+const etherStore = useViemStore();
 
 // props
 const props = defineProps<{

src/components/ListingComponent/__tests__/ListingComponent.spec.ts

@@ -1,15 +1,14 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
 import { mount } from "@vue/test-utils";
-import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
-import { createPinia, setActivePinia } from "pinia";
-import { expect } from "vitest";
+import ListingComponent from "../ListingComponent.vue";
+import SpinnerComponent from "../../SpinnerComponent.vue";
+import { useViemStore } from "@/store/viem";
 import { MockValidDeposits } from "@/model/mock/ValidDepositMock";
 import { MockWalletTransactions } from "@/model/mock/WalletTransactionMock";
-import { useEtherStore } from "@/store/ether";
 
 describe("ListingComponent.vue", () => {
   beforeEach(() => {
-    setActivePinia(createPinia());
-    useEtherStore().setLoadingWalletTransactions(false);
+    useViemStore().setLoadingWalletTransactions(false);
   });
 
   test("Test Message when an empty array is received", () => {

src/components/SearchComponent.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, computed, watch } from "vue";
+import { storeToRefs } from "pinia";
+import { useViemStore } from "@/store/viem";
+import SpinnerComponent from "@/components/SpinnerComponent.vue";
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
-import { useEtherStore } from "@/store/ether";
-import { storeToRefs } from "pinia";
 import { verifyNetworkLiquidity } from "@/utils/networkLiquidity";
 import { NetworkEnum } from "@/model/NetworkEnum";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import { decimalCount } from "@/utils/decimalCount";
-import SpinnerComponent from "./SpinnerComponent.vue";
 import { getTokenImage } from "@/utils/imagesPath";
 import { onClickOutside } from "@vueuse/core";
 
 import { TokenEnum } from "@/model/NetworkEnum";
 
 // Store reference
-const etherStore = useEtherStore();
+const viemStore = useViemStore();
 const selectTokenToggle = ref<boolean>(false);
 
 const {
@@ -24,7 +24,7 @@ const {
   selectedToken,
   depositsValidList,
   loadingNetworkLiquidity,
-} = storeToRefs(etherStore);
+} = storeToRefs(viemStore);
 
 // html references
 const tokenDropdownRef = ref<any>(null);
@@ -84,7 +84,7 @@ onClickOutside(tokenDropdownRef, () => {
 });
 
 const handleSelectedToken = (token: TokenEnum): void => {
-  etherStore.setSelectedToken(token);
+  viemStore.setSelectedToken(token);
   selectTokenToggle.value = false;
 };
 

src/components/SellerSteps/SellerComponent.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import CustomButton from "../CustomButton/CustomButton.vue";
-import { pixFormatValidation, postProcessKey } from "@/utils/pixKeyFormat";
-import { useEtherStore } from "@/store/ether";
+import { ref, computed } from "vue";
 import { storeToRefs } from "pinia";
+import { useViemStore } from "@/store/viem";
+import CustomButton from "@/components/CustomButton/CustomButton.vue";
+import { pixFormatValidation, postProcessKey } from "@/utils/pixKeyFormat";
 import { TokenEnum } from "@/model/NetworkEnum";
 import { getTokenImage } from "@/utils/imagesPath";
 import { useOnboard } from "@web3-onboard/vue";
@@ -24,8 +24,8 @@ const tokenDropdownRef = ref<any>(null);
 const formRef = ref<HTMLFormElement | null>(null);
 
 // Reactive state
-const etherStore = useEtherStore();
-const { walletAddress, selectedToken } = storeToRefs(etherStore);
+const viemStore = useViemStore();
+const { walletAddress, selectedToken } = storeToRefs(viemStore);
 
 const fullName = ref<string>("");
 const offer = ref<string>("");
@@ -91,7 +91,7 @@ const openTokenSelection = (): void => {
 };
 
 const handleSelectedToken = (token: TokenEnum): void => {
-  etherStore.setSelectedToken(token);
+  viemStore.setSelectedToken(token);
   selectTokenToggle.value = false;
 };
 </script>

src/components/SellerSteps/SellerSearchComponent.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useViemStore } from "@/store/viem";
+import SpinnerComponent from "@/components/SpinnerComponent.vue";
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
 import { decimalCount } from "@/utils/decimalCount";
-
-import { useEtherStore } from "@/store/ether";
 import { getTokenImage } from "@/utils/imagesPath";
-import { storeToRefs } from "pinia";
 import { useOnboard } from "@web3-onboard/vue";
 
 // Store
-const etherStore = useEtherStore();
-const { walletAddress } = storeToRefs(etherStore);
+const viemStore = useViemStore();
+const { walletAddress } = storeToRefs(viemStore);
 
 // Reactive state
 const tokenValue = ref<number>(0);
@@ -76,10 +76,10 @@ const handleInputEvent = (event: any): void => {
             <img
               alt="Token image"
               class="w-fit"
-              :src="getTokenImage(etherStore.selectedToken)"
+              :src="getTokenImage(viemStore.selectedToken)"
             />
             <span class="text-gray-900 text-lg w-fit" id="token">{{
-              etherStore.selectedToken
+              viemStore.selectedToken
             }}</span>
           </div>
         </div>

src/components/TopBar/TopBar.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import { ref, computed, onMounted, watch } from "vue";
+import { useRouter } from "vue-router";
+import { useViemStore } from "@/store/viem";
 import { storeToRefs } from "pinia";
-import { useEtherStore } from "@/store/ether";
-import { ref, watch } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import { NetworkEnum } from "@/model/NetworkEnum";
 import { getNetworkImage } from "@/utils/imagesPath";
@@ -16,9 +17,9 @@ import GithubIcon from "@/assets/githubIcon.svg";
 import { connectProvider } from "@/blockchain/provider";
 
 // Store reference
-const etherStore = useEtherStore();
+const viemStore = useViemStore();
 
-const { walletAddress, sellerView } = storeToRefs(etherStore);
+const { walletAddress, sellerView } = storeToRefs(viemStore);
 
 const menuOpenToggle = ref<boolean>(false);
 const infoMenuOpenToggle = ref<boolean>(false);
@@ -38,11 +39,11 @@ const connnectWallet = async (): Promise<void> => {
 watch(connectedWallet, async (newVal: any) => {
   connectProvider(newVal.provider);
   const addresses = await newVal.provider.request({ method: "eth_accounts" });
-  etherStore.setWalletAddress(addresses.shift());
+  viemStore.setWalletAddress(addresses.shift());
 });
 
 watch(connectedChain, (newVal: any) => {
-  etherStore.setNetworkId(newVal?.id);
+  viemStore.setNetworkId(newVal?.id);
 });
 
 const formatWalletAddress = (): string => {
@@ -56,7 +57,7 @@ const formatWalletAddress = (): string => {
 };
 
 const disconnectUser = async (): Promise<void> => {
-  etherStore.setWalletAddress("");
+  viemStore.setWalletAddress("");
   await disconnectWallet({ label: connectedWallet.value?.label || "" });
   closeMenu();
 };
@@ -72,7 +73,7 @@ const networkChange = async (network: NetworkEnum): Promise<void> => {
       chainId: Networks[network].chainId,
       wallet: connectedWallet.value?.label || "",
     });
-    etherStore.setNetworkId(network);
+    viemStore.setNetworkId(network);
   } catch (error) {
     console.log("Error changing network", error);
   }
@@ -245,7 +246,7 @@ onClickOutside(infoMenuRef, () => {
         >
           <img
             alt="Choosed network image"
-            :src="getNetworkImage(NetworkEnum[etherStore.networkName])"
+            :src="getNetworkImage(NetworkEnum[viemStore.networkName])"
             height="24"
             width="24"
           />
@@ -253,7 +254,7 @@ onClickOutside(infoMenuRef, () => {
             class="default-text hidden sm:inline-block text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out whitespace-nowrap text-ellipsis overflow-hidden"
             :class="{ '!text-gray-900': currencyMenuOpenToggle }"
           >
-            {{ Networks[etherStore.networkName].chainName }}
+            {{ Networks[viemStore.networkName].chainName }}
           </span>
           <div
             class="transition-all duration-500 ease-in-out mt-1"

src/components/TopBar/__tests__/TopBar.spec.ts

@@ -1,7 +1,7 @@
-/* eslint-disable no-undef */
-import { shallowMount } from "@vue/test-utils";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mount } from "@vue/test-utils";
 import TopBar from "../TopBar.vue";
-import { useEtherStore } from "../../../store/ether";
+import { useViemStore } from "@/store/viem";
 
 import { createPinia, setActivePinia } from "pinia";
 
@@ -11,24 +11,24 @@ describe("TopBar.vue", () => {
   });
 
   it("should render connect wallet button", () => {
-    const wrapper = shallowMount(TopBar);
+    const wrapper = mount(TopBar);
     expect(wrapper.html()).toContain("Conectar carteira");
   });
 
   it("should render button to change to seller view when in buyer screen", () => {
-    const wrapper = shallowMount(TopBar);
+    const wrapper = mount(TopBar);
     expect(wrapper.html()).toContain("Quero vender");
   });
 
   it("should render button to change to seller view when in buyer screen", () => {
-    const etherStore = useEtherStore();
-    etherStore.setSellerView(true);
-    const wrapper = shallowMount(TopBar);
+    const viemStore = useViemStore();
+    viemStore.setSellerView(true);
+    const wrapper = mount(TopBar);
     expect(wrapper.html()).toContain("Quero comprar");
   });
 
   it("should render the P2Pix logo correctly", () => {
-    const wrapper = shallowMount(TopBar);
+    const wrapper = mount(TopBar);
     const img = wrapper.findAll(".logo");
     expect(img.length).toBe(2);
   });