Updated Ethers to last version.

package.json

@@ -49,7 +49,7 @@
     "autoprefixer": "^10.4.12",
     "eslint": "^8.22.0",
     "eslint-plugin-vue": "^9.3.0",
-    "ethers": "^5.7.2",
+    "ethers": "^6.13.4",
     "jsdom": "^21.1.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.18",

src/App.vue

@@ -1,10 +1,39 @@
 <script setup lang="ts">
 import TopBar from "@/components/TopBar/TopBar.vue";
 import SpinnerComponent from "@/components/SpinnerComponent.vue";
+
+// import { createAppKit, useAppKit } from "@reown/appkit/vue";
+// import { EthersAdapter } from "@reown/appkit-adapter-ethers";
+// import { sepolia, rootstockTestnet } from "@reown/appkit/networks";
+
+// // 1. Get projectId from https://cloud.reown.com
+// const projectId = "8149aee0a01eeaf7daaf2d326d074b30";
+
+// // 2. Create your application's metadata object
+// const metadata = {
+//   name: "p2pix",
+//   description:
+//     "Uma plataforma descentralizada para transações de criptomoedas ponto-a-ponto usando PIX",
+//   url: "https://p2pix.doiim.com", // origin must match your domain & subdomain
+//   icons: ["https://assets.reown.com/reown-profile-pic.png"],
+// };
+
+// // 3. Create a AppKit instance
+// createAppKit({
+//   adapters: [new EthersAdapter()],
+//   networks: [sepolia, rootstockTestnet],
+//   metadata,
+//   projectId,
+//   features: {
+//     analytics: true, // Optional - defaults to your Cloud configuration
+//   },
+// });
+// // 4. Use modal composable
+// const modal = useAppKit();
 </script>
 
 <template>
-  <TopBar />
+  <TopBar :modal="modal" />
   <RouterView v-slot="{ Component }">
     <template v-if="Component">
       <Suspense>

src/blockchain/buyerMethods.ts

@@ -1,12 +1,17 @@
-import { useEtherStore } from "@/store/ether";
-
 import { getContract, getProvider } from "./provider";
 import { getP2PixAddress, getTokenAddress } from "./addresses";
 
 import p2pix from "@/utils/smart_contract_files/P2PIX.json";
 
-import { BigNumber, ethers } from "ethers";
+import {
-import { parseEther } from "ethers/lib/utils";
+  solidityPackedKeccak256,
+  encodeBytes32String,
+  Signature,
+  Contract,
+  getBytes,
+  Wallet,
+  parseEther,
+} from "ethers";
 import type { TokenEnum } from "@/model/NetworkEnum";
 
 const addLock = async (
@@ -14,9 +19,7 @@ const addLock = async (
   token: string,
   amount: number
 ): Promise<string> => {
-  const etherStore = useEtherStore();
+  const p2pContract = await getContract();
-
-  const p2pContract = getContract();
 
   const lock = await p2pContract.lock(
     seller,
@@ -38,31 +41,27 @@ const releaseLock = async (
   e2eId: string,
   lockId: string
 ): Promise<any> => {
-  const mockBacenSigner = new ethers.Wallet(
+  const mockBacenSigner = new Wallet(
     "0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80"
   );
 
-  const messageToSign = ethers.utils.solidityKeccak256(
+  const messageToSign = solidityPackedKeccak256(
     ["bytes32", "uint256", "bytes32"],
-    [
+    [pixKey, parseEther(String(amount)), encodeBytes32String(e2eId)]
-      pixKey,
-      parseEther(String(amount)),
-      ethers.utils.formatBytes32String(e2eId),
-    ]
   );
 
-  const messageHashBytes = ethers.utils.arrayify(messageToSign);
+  const messageHashBytes = getBytes(messageToSign);
   const flatSig = await mockBacenSigner.signMessage(messageHashBytes);
   const provider = getProvider();
 
-  const sig = ethers.utils.splitSignature(flatSig);
+  const sig = Signature.from(flatSig);
-
+  console.log(sig);
-  const signer = provider.getSigner();
+  const signer = await provider.getSigner();
-  const p2pContract = new ethers.Contract(getP2PixAddress(), p2pix.abi, signer);
+  const p2pContract = new Contract(getP2PixAddress(), p2pix.abi, signer);
 
   const release = await p2pContract.release(
-    BigNumber.from(lockId),
+    BigInt(lockId),
-    ethers.utils.formatBytes32String(e2eId),
+    encodeBytes32String(e2eId),
     flatSig
   );
   await release.wait();
@@ -70,8 +69,8 @@ const releaseLock = async (
   return release;
 };
 
-const cancelDeposit = async (depositId: BigNumber): Promise<any> => {
+const cancelDeposit = async (depositId: bigint): Promise<any> => {
-  const contract = getContract();
+  const contract = await getContract();
 
   const cancel = await contract.cancelDeposit(depositId);
   await cancel.wait();
@@ -79,8 +78,11 @@ const cancelDeposit = async (depositId: BigNumber): Promise<any> => {
   return cancel;
 };
 
-const withdrawDeposit = async (amount: string, token: TokenEnum): Promise<any> => {
+const withdrawDeposit = async (
-  const contract = getContract();
+  amount: string,
+  token: TokenEnum
+): Promise<any> => {
+  const contract = await getContract();
 
   const withdraw = await contract.withdraw(
     getTokenAddress(token),

src/blockchain/events.ts

@@ -1,8 +1,7 @@
 import { useEtherStore } from "@/store/ether";
-import { Contract, ethers } from "ethers";
+import { Contract, formatEther, Interface, JsonRpcProvider } from "ethers";
 
 import p2pix from "@/utils/smart_contract_files/P2PIX.json";
-import { formatEther } from "ethers/lib/utils";
 import { getContract } from "./provider";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import { getP2PixAddress, getTokenAddress } from "./addresses";
@@ -12,30 +11,21 @@ import type { Pix } from "@/model/Pix";
 
 const getNetworksLiquidity = async (): Promise<void> => {
   const etherStore = useEtherStore();
-  const sepoliaProvider = new ethers.providers.JsonRpcProvider(
+  const sepoliaProvider = new JsonRpcProvider(
     import.meta.env.VITE_SEPOLIA_API_URL,
     11155111
   ); // sepolia provider
-  const mumbaiProvider = new ethers.providers.JsonRpcProvider(
+  const rootstockProvider = new JsonRpcProvider(
-    import.meta.env.VITE_MUMBAI_API_URL,
-    80001
-  ); // mumbai provider
-  const rootstockProvider = new ethers.providers.JsonRpcProvider(
     import.meta.env.VITE_RSK_API_URL,
     31
   ); // rootstock provider
 
-  const p2pContractSepolia = new ethers.Contract(
+  const p2pContractSepolia = new Contract(
     getP2PixAddress(NetworkEnum.ethereum),
     p2pix.abi,
     sepoliaProvider
   );
-  const p2pContractMumbai = new ethers.Contract(
+  const p2pContractRootstock = new Contract(
-    getP2PixAddress(NetworkEnum.polygon),
-    p2pix.abi,
-    mumbaiProvider
-  );
-  const p2pContractRootstock = new ethers.Contract(
     getP2PixAddress(NetworkEnum.rootstock),
     p2pix.abi,
     rootstockProvider
@@ -71,46 +61,47 @@ const getValidDeposits = async (
   if (contract) {
     p2pContract = contract;
   } else {
-    p2pContract = getContract(true);
+    p2pContract = await getContract(true);
   }
 
   const filterDeposits = p2pContract.filters.DepositAdded(null);
   const eventsDeposits = await p2pContract.queryFilter(filterDeposits);
 
-  if (!contract) p2pContract = getContract(); // get metamask provider contract
+  if (!contract) p2pContract = await getContract(); // get metamask provider contract
   const depositList: { [key: string]: ValidDeposit } = {};
 
-  await Promise.all(
+  for (const deposit of eventsDeposits) {
-    eventsDeposits.map(async (deposit) => {
+    const IPix2Pix = new Interface(p2pix.abi);
-      // Get liquidity only for the selected token
+    const decoded = IPix2Pix.parseLog({
-      if (deposit.args?.token != token) return null;
+      topics: deposit.topics,
+      data: deposit.data,
+    });
+    // Get liquidity only for the selected token
+    if (decoded?.args.token != token) continue;
 
-      const mappedBalance = await p2pContract.getBalance(
+    const mappedBalance = await p2pContract.getBalance(
-        deposit.args?.seller,
+      decoded.args.seller,
-        token
+      token
-      );
+    );
+    const mappedPixTarget = await p2pContract.getPixTarget(
+      decoded.args.seller,
+      token
+    );
 
-      const mappedPixTarget = await p2pContract.getPixTarget(
+    let validDeposit: ValidDeposit | null = null;
-        deposit.args?.seller,
-        token
-      );
 
-      let validDeposit: ValidDeposit | null = null;
+    if (mappedBalance._hex) {
+      validDeposit = {
+        token: token,
+        blockNumber: deposit.blockNumber,
+        remaining: Number(formatEther(mappedBalance._hex)),
+        seller: decoded.args.seller,
+        pixKey: mappedPixTarget,
+      };
+    }
 
-      if (mappedBalance._hex) {
+    if (validDeposit) depositList[decoded.args.seller + token] = validDeposit;
-        validDeposit = {
+  }
-          token: token,
-          blockNumber: deposit.blockNumber,
-          remaining: Number(formatEther(mappedBalance._hex)),
-          seller: deposit.args?.seller,
-          pixKey: mappedPixTarget,
-        };
-      }
-
-      if (validDeposit)
-        depositList[deposit.args?.seller + token] = validDeposit;
-    })
-  );
 
   return Object.values(depositList);
 };
@@ -118,7 +109,7 @@ const getValidDeposits = async (
 const getUnreleasedLockById = async (
   lockID: string
 ): Promise<UnreleasedLock> => {
-  const p2pContract = getContract();
+  const p2pContract = await getContract();
   const pixData: Pix = {
     pixKey: "",
   };

src/blockchain/provider.ts

@@ -1,5 +1,4 @@
 import { useEtherStore } from "@/store/ether";
-
 import p2pix from "@/utils/smart_contract_files/P2PIX.json";
 
 import { updateWalletStatus } from "./wallet";
@@ -12,32 +11,27 @@ import {
 import type { NetworkEnum } from "@/model/NetworkEnum";
 import { Networks } from "@/model/Networks";
 
-import { ethers } from "ethers";
+import { BrowserProvider, JsonRpcProvider, Contract } from "ethers";
 
 const getProvider = (
   onlyAlchemyProvider: boolean = false
-): ethers.providers.Web3Provider | ethers.providers.JsonRpcProvider => {
+): BrowserProvider | JsonRpcProvider => {
-  const window_ = window as any;
+  if (onlyAlchemyProvider) return new JsonRpcProvider(getProviderUrl()); // alchemy provider
-  const connection = window_.ethereum;
+  return (window as any).ethereum as BrowserProvider;
-
-  if (!connection || onlyAlchemyProvider)
-    return new ethers.providers.JsonRpcProvider(getProviderUrl()); // alchemy provider
-
-  return new ethers.providers.Web3Provider(connection); // metamask provider
 };
 
-const getContract = (onlyAlchemyProvider: boolean = false) => {
+const getContract = async (onlyAlchemyProvider: boolean = false) => {
   const provider = getProvider(onlyAlchemyProvider);
-  const signer = provider.getSigner();
+  const signer = await provider.getSigner();
-  return new ethers.Contract(getP2PixAddress(), p2pix.abi, signer);
+  return new Contract(getP2PixAddress(), p2pix.abi, signer);
 };
 
 const connectProvider = async (): Promise<void> => {
   const window_ = window as any;
   const connection = window_.ethereum;
   const provider = getProvider();
-
+  await (provider as any).enable();
-  if (!(provider instanceof ethers.providers.Web3Provider)) {
+  if (!(provider instanceof BrowserProvider)) {
     window.alert("Please, connect to metamask extension");
     return;
   }
@@ -80,12 +74,13 @@ const requestNetworkChange = async (network: NetworkEnum): Promise<boolean> => {
       method: "wallet_switchEthereumChain",
       params: [{ chainId: Networks[network].chainId }], // chainId must be in hexadecimal numbers
     });
-  } catch (e:any){
+  } catch (e: any) {
-    if (e.code == 4902){ // Unrecognized chain ID
+    if (e.code == 4902) {
-        await window_.ethereum.request({
+      // Unrecognized chain ID
-         "method": "wallet_addEthereumChain",
+      await window_.ethereum.request({
-         "params": [ Networks[network] ],
+        method: "wallet_addEthereumChain",
-        });
+        params: [Networks[network]],
+      });
     }
   }
 

src/blockchain/sellerMethods.ts

@@ -1,18 +1,17 @@
 import { getContract, getProvider } from "./provider";
 import { getTokenAddress, getP2PixAddress } from "./addresses";
-import { parseEther } from "ethers/lib/utils";
 
-import { ethers } from "ethers";
+import { encodeBytes32String, Contract, parseEther } from "ethers";
 
 import mockToken from "../utils/smart_contract_files/MockToken.json";
 import { useEtherStore } from "@/store/ether";
 
 const approveTokens = async (tokenQty: string): Promise<any> => {
   const provider = getProvider();
-  const signer = provider.getSigner();
+  const signer = await provider.getSigner();
   const etherStore = useEtherStore();
 
-  const tokenContract = new ethers.Contract(
+  const tokenContract = new Contract(
     getTokenAddress(etherStore.selectedToken),
     mockToken.abi,
     signer
@@ -28,12 +27,12 @@ const approveTokens = async (tokenQty: string): Promise<any> => {
 };
 
 const addDeposit = async (tokenQty: string, pixKey: string): Promise<any> => {
-  const p2pContract = getContract();
+  const p2pContract = await getContract();
   const etherStore = useEtherStore();
 
   const deposit = await p2pContract.deposit(
     pixKey,
-    ethers.utils.formatBytes32String(""),
+    encodeBytes32String(""),
     getTokenAddress(etherStore.selectedToken),
     parseEther(tokenQty),
     true

src/blockchain/wallet.ts

@@ -1,12 +1,19 @@
+import {
+  Contract,
+  formatEther,
+  getAddress,
+  Interface,
+  Log,
+  LogDescription,
+} from "ethers";
 import { useEtherStore } from "@/store/ether";
 
 import { getContract, getProvider } from "./provider";
 import { getTokenAddress, isPossibleNetwork } from "./addresses";
 
 import mockToken from "@/utils/smart_contract_files/MockToken.json";
+import p2pix from "@/utils/smart_contract_files/P2PIX.json";
 
-import { ethers, type Event, type BigNumber } from "ethers";
-import { formatEther } from "ethers/lib/utils";
 import { getValidDeposits } from "./events";
 
 import type { ValidDeposit } from "@/model/ValidDeposit";
@@ -14,20 +21,20 @@ import type { WalletTransaction } from "@/model/WalletTransaction";
 import type { UnreleasedLock } from "@/model/UnreleasedLock";
 import type { Pix } from "@/model/Pix";
 
-const updateWalletStatus = async (): Promise<void> => {
+export const updateWalletStatus = async (): Promise<void> => {
   const etherStore = useEtherStore();
 
-  const provider = getProvider();
+  const provider = await getProvider();
-  const signer = provider.getSigner();
+  const signer = await provider.getSigner();
 
   const { chainId } = await provider.getNetwork();
-  if (!isPossibleNetwork(chainId)) {
+  if (!isPossibleNetwork(Number(chainId))) {
     window.alert("Invalid chain!:" + chainId);
     return;
   }
-  etherStore.setNetworkName(chainId);
+  etherStore.setNetworkName(Number(chainId));
 
-  const mockTokenContract = new ethers.Contract(
+  const mockTokenContract = new Contract(
     getTokenAddress(etherStore.selectedToken),
     mockToken.abi,
     signer
@@ -37,14 +44,16 @@ const updateWalletStatus = async (): Promise<void> => {
   const balance = await mockTokenContract.balanceOf(walletAddress[0]);
 
   etherStore.setBalance(formatEther(balance));
-  etherStore.setWalletAddress(ethers.utils.getAddress(walletAddress[0]));
+  etherStore.setWalletAddress(getAddress(walletAddress[0]));
 };
 
-const listValidDepositTransactionsByWalletAddress = async (
+export const listValidDepositTransactionsByWalletAddress = async (
   walletAddress: string
 ): Promise<ValidDeposit[]> => {
   const etherStore = useEtherStore();
-  const walletDeposits = await getValidDeposits(getTokenAddress(etherStore.selectedToken));
+  const walletDeposits = await getValidDeposits(
+    getTokenAddress(etherStore.selectedToken)
+  );
 
   if (walletDeposits) {
     return walletDeposits
@@ -57,60 +66,72 @@ const listValidDepositTransactionsByWalletAddress = async (
   return [];
 };
 
-const getLockStatus = async (id: [BigNumber]): Promise<number> => {
+const getLockStatus = async (id: [BigInt]): Promise<number> => {
-  const p2pContract = getContract();
+  const p2pContract = await getContract();
   const res = await p2pContract.getLocksStatus([id]);
 
   return res[1][0];
 };
 
 const filterLockStatus = async (
-  transactions: Event[]
+  transactions: Log[]
 ): Promise<WalletTransaction[]> => {
-  const txs = await Promise.all(
+  const txs: WalletTransaction[] = [];
-    transactions.map(async (transaction) => {
+
-      const tx: WalletTransaction = {
+  for (const transaction of transactions) {
-        token: transaction.args?.token ? transaction.args?.token : "",
+    const IPix2Pix = new Interface(p2pix.abi);
-        blockNumber: transaction.blockNumber ? transaction.blockNumber : -1,
+    const decoded = IPix2Pix.parseLog({
-        amount: transaction.args?.amount
+      topics: transaction.topics,
-          ? Number(formatEther(transaction.args?.amount))
+      data: transaction.data,
+    });
+    if (!decoded) continue;
+    const tx: WalletTransaction = {
+      token: decoded.args.token ? decoded.args.token : "",
+      blockNumber: transaction.blockNumber,
+      amount: decoded.args.amount
+        ? Number(formatEther(decoded.args.amount))
+        : -1,
+      seller: decoded.args.seller ? decoded.args.seller : "",
+      buyer: decoded.args.buyer ? decoded.args.buyer : "",
+      event: decoded.name,
+      lockStatus:
+        decoded.name == "LockAdded"
+          ? await getLockStatus(decoded.args.lockID)
           : -1,
-        seller: transaction.args?.seller ? transaction.args?.seller : "",
+      transactionHash: transaction.transactionHash
-        buyer: transaction.args?.buyer ? transaction.args?.buyer : "",
+        ? transaction.transactionHash
-        event: transaction.event ? transaction.event : "",
+        : "",
-        lockStatus:
+      transactionID: decoded.args.lockID ? decoded.args.lockID.toString() : "",
-          transaction.event == "LockAdded"
+    };
-            ? await getLockStatus(transaction.args?.lockID)
+    txs.push(tx);
-            : -1,
+  }
-        transactionHash: transaction.transactionHash
-          ? transaction.transactionHash
-          : "",
-        transactionID: transaction.args?.lockID
-          ? String(transaction.args?.lockID)
-          : "",
-      };
-
-      return tx;
-    })
-  );
-
   return txs;
 };
 
-const listAllTransactionByWalletAddress = async (
+export const listAllTransactionByWalletAddress = async (
   walletAddress: string
 ): Promise<WalletTransaction[]> => {
-  const p2pContract = getContract(true);
+  const p2pContract = await getContract(true);
 
   const filterDeposits = p2pContract.filters.DepositAdded([walletAddress]);
-  const eventsDeposits = await p2pContract.queryFilter(filterDeposits);
+  const eventsDeposits = await p2pContract.queryFilter(
+    filterDeposits,
+    0,
+    "latest"
+  );
 
   const filterAddedLocks = p2pContract.filters.LockAdded([walletAddress]);
-  const eventsAddedLocks = await p2pContract.queryFilter(filterAddedLocks);
+  const eventsAddedLocks = await p2pContract.queryFilter(
+    filterAddedLocks,
+    0,
+    "latest"
+  );
 
   const filterReleasedLocks = p2pContract.filters.LockReleased([walletAddress]);
   const eventsReleasedLocks = await p2pContract.queryFilter(
-    filterReleasedLocks
+    filterReleasedLocks,
+    0,
+    "latest"
   );
 
   const filterWithdrawnDeposits = p2pContract.filters.DepositWithdrawn([
@@ -135,51 +156,83 @@ const listAllTransactionByWalletAddress = async (
 };
 
 // get wallet's release transactions
-const listReleaseTransactionByWalletAddress = async (
+export const listReleaseTransactionByWalletAddress = async (
   walletAddress: string
-): Promise<Event[]> => {
+): Promise<LogDescription[]> => {
-  const p2pContract = getContract(true);
+  const p2pContract = await getContract(true);
 
   const filterReleasedLocks = p2pContract.filters.LockReleased([walletAddress]);
   const eventsReleasedLocks = await p2pContract.queryFilter(
-    filterReleasedLocks
+    filterReleasedLocks,
+    0,
+    "latest"
   );
 
-  return eventsReleasedLocks.sort((a, b) => {
+  return eventsReleasedLocks
-    return b.blockNumber - a.blockNumber;
+    .sort((a, b) => {
-  });
+      return b.blockNumber - a.blockNumber;
+    })
+    .map((lock) => {
+      const IPix2Pix = new Interface(p2pix.abi);
+      const decoded = IPix2Pix.parseLog({
+        topics: lock.topics,
+        data: lock.data,
+      });
+      return decoded;
+    })
+    .filter((lock) => lock !== null);
 };
 
 const listLockTransactionByWalletAddress = async (
   walletAddress: string
-): Promise<Event[]> => {
+): Promise<LogDescription[]> => {
-  const p2pContract = getContract(true);
+  const p2pContract = await getContract(true);
 
   const filterAddedLocks = p2pContract.filters.LockAdded([walletAddress]);
   const eventsReleasedLocks = await p2pContract.queryFilter(filterAddedLocks);
 
-  return eventsReleasedLocks.sort((a, b) => {
+  return eventsReleasedLocks
-    return b.blockNumber - a.blockNumber;
+    .sort((a, b) => {
-  });
+      return b.blockNumber - a.blockNumber;
+    })
+    .map((lock) => {
+      const IPix2Pix = new Interface(p2pix.abi);
+      const decoded = IPix2Pix.parseLog({
+        topics: lock.topics,
+        data: lock.data,
+      });
+      return decoded;
+    })
+    .filter((lock) => lock !== null);
 };
 
 const listLockTransactionBySellerAddress = async (
   sellerAddress: string
-): Promise<Event[]> => {
+): Promise<LogDescription[]> => {
-  const p2pContract = getContract(true);
+  const p2pContract = await getContract(true);
 
   const filterAddedLocks = p2pContract.filters.LockAdded();
   const eventsReleasedLocks = await p2pContract.queryFilter(filterAddedLocks);
 
-  return eventsReleasedLocks.filter((lock) =>
+  return eventsReleasedLocks
-    lock.args?.seller.toLowerCase() == sellerAddress.toLowerCase()
+    .map((lock) => {
-  );
+      const IPix2Pix = new Interface(p2pix.abi);
+      const decoded = IPix2Pix.parseLog({
+        topics: lock.topics,
+        data: lock.data,
+      });
+      return decoded;
+    })
+    .filter((lock) => lock !== null)
+    .filter(
+      (lock) => lock.args.seller.toLowerCase() == sellerAddress.toLowerCase()
+    );
 };
 
-const checkUnreleasedLock = async (
+export const checkUnreleasedLock = async (
   walletAddress: string
 ): Promise<UnreleasedLock | undefined> => {
-  const p2pContract = getContract();
+  const p2pContract = await getContract();
   const pixData: Pix = {
     pixKey: "",
   };
@@ -208,8 +261,10 @@ const checkUnreleasedLock = async (
   }
 };
 
-const getActiveLockAmount = async (walletAddress: string): Promise<number> => {
+export const getActiveLockAmount = async (
-  const p2pContract = getContract();
+  walletAddress: string
+): Promise<number> => {
+  const p2pContract = await getContract();
   const lockSeller = await listLockTransactionBySellerAddress(walletAddress);
 
   const lockStatus = await p2pContract.getLocksStatus(
@@ -233,12 +288,3 @@ const getActiveLockAmount = async (walletAddress: string): Promise<number> => {
 
   return activeLockAmount;
 };
-
-export {
-  updateWalletStatus,
-  listValidDepositTransactionsByWalletAddress,
-  listAllTransactionByWalletAddress,
-  listReleaseTransactionByWalletAddress,
-  checkUnreleasedLock,
-  getActiveLockAmount,
-};

src/components/SellerSteps/SendNetwork.vue

@@ -20,7 +20,7 @@ const props = defineProps({
         >Envie sua oferta para a rede
       </span>
       <span
-        class="text text-xl font-normal sm:text-base text-xs sm:max-w-[30rem] max-w-[22rem]"
+        class="text font-normal sm:text-base text-xs sm:max-w-[30rem] max-w-[22rem]"
         >Após a confirmação sua oferta estará disponível para outros usuários.
         Caso deseje retirar a oferta, será necessário aguardar 24h para receber
         os tokens de volta.</span

src/components/SellerSteps/WantSellComponent.vue

@@ -125,12 +125,14 @@ const handleButtonClick = async (
                 class="sm:w-fit w-4"
                 :src="getTokenImage(selectedToken)"
               />
-              <span class="text-gray-900 sm:text-lg text-md font-medium" id="token">{{
+              <span
-                selectedToken
+                class="text-gray-900 sm:text-lg text-md font-medium"
-              }}</span>
+                id="token"
+                >{{ selectedToken }}</span
+              >
               <img
                 class="text-gray-900 pr-4 sm:pr-0 transition-all duration-500 ease-in-out"
-                :class="{'scale-y-[-1]': selectTokenToggle}"
+                :class="{ 'scale-y-[-1]': selectTokenToggle }"
                 alt="Chevron Down"
                 src="@/assets/chevronDownBlack.svg"
               />
@@ -139,9 +141,12 @@ const handleButtonClick = async (
               v-if="selectTokenToggle"
               class="mt-2 w-[100px] text-gray-900 absolute"
             >
-              <div class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip">
+              <div
+                class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
+              >
                 <div
                   v-for="token in TokenEnum"
+                  :key="token"
                   class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
                   @click="handleSelectedToken(token)"
                 >
@@ -232,6 +237,7 @@ const handleButtonClick = async (
 
 input[type="number"] {
   -moz-appearance: textfield;
+  appearance: textfield;
 }
 
 input[type="number"]::-webkit-inner-spin-button,

src/components/TopBar/TopBar.vue

@@ -7,6 +7,7 @@ import { NetworkEnum } from "@/model/NetworkEnum";
 import { connectProvider, requestNetworkChange } from "@/blockchain/provider";
 import { getNetworkImage } from "@/utils/imagesPath";
 import { Networks } from "@/model/Networks";
+
 // Store reference
 const etherStore = useEtherStore();
 
@@ -23,7 +24,7 @@ const walletAddressRef = ref<any>(null);
 const currencyRef = ref<any>(null);
 
 //Methods
-const connectMetaMask = async (): Promise<void> => {
+const connnectWallet = async (): Promise<void> => {
   await connectProvider();
 };
 
@@ -269,6 +270,7 @@ onClickOutside(infoMenuRef, () => {
             <div class="bg-white rounded-md z-10">
               <div
                 v-for="(chainData, network) in Networks"
+                :key="network"
                 class="menu-button gap-2 px-4 rounded-md cursor-pointer"
                 @click="networkChange(network)"
               >
@@ -293,7 +295,7 @@ onClickOutside(infoMenuRef, () => {
         type="button"
         v-if="!walletAddress"
         class="border-amber-500 border-2 rounded default-button lg-view"
-        @click="connectMetaMask()"
+        @click="connnectWallet()"
       >
         Conectar carteira
       </button>
@@ -301,7 +303,7 @@ onClickOutside(infoMenuRef, () => {
         type="button"
         v-if="!walletAddress"
         class="border-amber-500 border-2 rounded default-button sm-view"
-        @click="connectMetaMask()"
+        @click="connnectWallet()"
       >
         Conectar
       </button>

src/views/FaqView.vue

@@ -34,7 +34,7 @@ const openItem = (index: number) => {
       <span class="text font-extrabold text-5xl max-w-[50rem]"
         >Perguntas Frequentes
       </span>
-      <span class="text text-xl font-medium text-base max-w-[40rem]"
+      <span class="text font-medium text-base max-w-[40rem]"
         >Não conseguiu uma resposta para sua dúvida? Acesse a comunidade do
         Discord para falar diretamente conosco.</span
       >

vite.config.ts

@@ -23,4 +23,10 @@ export default defineConfig({
       "@": fileURLToPath(new URL("./src", import.meta.url)),
     },
   },
+  build: {
+    target: "esnext", // Or a recent target that supports BigInt literals
+    rollupOptions: {
+      external: ["@coinbase/wallet-sdk"], // Exclude from the bundle if needed
+    },
+  },
 });