removed inappropiate wait; moar type checks

README.md

@@ -102,3 +102,19 @@ cd P2Pix-Front-End
 # Run docker-compose up command
 docker-compose up
 ```
+
+### Backend Communication
+
+Backend Repo: `https://gitea.kosmos.org/hueso/helpix`
+
+Backend Endpoint: `https://api.p2pix.co/release/1279331`
+
+curl -X POST \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer {api-key}" \
+  -d '{"query": "{ depositAddeds { id seller token amount } }"}' \
+https://api.studio.thegraph.com/query/113713/p-2-pix/sepolia
+
+https://api.studio.thegraph.com/query/113713/p-2-pix/1
+
+curl --request POST --url 'https://api.hm.bb.com.br/testes-portal-desenvolvedor/v1/boletos-pix/pagar?gw-app-key=95cad3f03fd9013a9d15005056825665' --header 'content-type: application/json' --data '{"pix":"00020101021226070503***63041654" }'

package.json

@@ -5,12 +5,10 @@
     "start": "vite --host=0.0.0.0 --port 3000",
     "build": "run-p type-check build-only",
     "preview": "vite preview",
-    "test": "vitest",
     "serve": "vue-cli-service serve",
-    "coverage": "vitest run --coverage",
     "build-only": "vite build",
     "type-check": "vue-tsc --skipLibCheck --noEmit",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore --fix",
     "lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
@@ -22,12 +20,9 @@
     "@web3-onboard/vue": "^2.9.0",
     "alchemy-sdk": "^2.3.0",
     "axios": "^1.2.1",
-    "crc": "^3.8.0",
-    "ethers": "^6.13.4",
     "marked": "^4.2.12",
-    "pinia": "^2.0.23",
     "qrcode": "^1.5.1",
-    "viem": "2.x",
+    "viem": "^2.31.3",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.2.41",
     "vue-markdown": "^2.2.4",
@@ -36,32 +31,27 @@
   "devDependencies": {
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
-    "@pinia/testing": "^0.0.14",
     "@rushstack/eslint-patch": "^1.1.4",
     "@types/crc": "^3.8.0",
-    "@types/jest": "^27.0.0",
     "@types/marked": "^4.0.8",
     "@types/node": "^16.11.68",
     "@types/qrcode": "^1.5.0",
     "@types/vue-markdown": "^2.2.1",
     "@vitejs/plugin-vue": "^3.1.2",
     "@vitejs/plugin-vue-jsx": "^2.0.1",
-    "@vitest/coverage-c8": "^0.28.2",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
-    "@vue/test-utils": "^2.2.7",
     "@vue/tsconfig": "^0.1.3",
+    "@wagmi/cli": "^2.3.1",
     "autoprefixer": "^10.4.12",
     "eslint": "^8.22.0",
     "eslint-plugin-vue": "^9.3.0",
-    "jsdom": "^21.1.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.18",
     "prettier": "^2.7.1",
     "tailwindcss": "^3.2.1",
-    "typescript": "~4.7.4",
+    "typescript": "~5.8.2",
     "vite": "^3.1.8",
-    "vitest": "^0.28.1",
-    "vue-tsc": "^1.0.8"
+    "vue-tsc": "^2.2.8"
   }
 }

src/App.vue

@@ -2,13 +2,16 @@
 import { useRoute } from "vue-router";
 import TopBar from "@/components/TopBar/TopBar.vue";
 import SpinnerComponent from "@/components/SpinnerComponent.vue";
+import ToasterComponent from "@/components/ToasterComponent.vue";
 import { init, useOnboard } from "@web3-onboard/vue";
 import injectedModule from "@web3-onboard/injected-wallets";
 import { Networks } from "./model/Networks";
 import { NetworkEnum } from "./model/NetworkEnum";
+import { ref } from "vue";
 
 const route = useRoute();
 const injected = injectedModule();
+const targetNetwork = ref(NetworkEnum.sepolia);
 
 const web3Onboard = init({
   wallets: [injected],
@@ -58,5 +61,6 @@ if (!connectedWallet) {
         </Transition>
       </template>
     </RouterView>
+    <ToasterComponent :targetNetwork="targetNetwork" />
   </div>
 </template>

src/assets/main.css

@@ -28,3 +28,9 @@ a,
 .main-container {
   @apply flex w-full md:max-w-lg flex-col justify-center items-center px-4 sm:px-8 py-4 sm:py-6 gap-4 rounded-lg border border-gray-500 backdrop-blur-md drop-shadow-lg shadow-lg mt-10;
 }
+
+input[type="number"] {
+  appearance: textfield;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+}

src/assets/transitions.css

@@ -19,3 +19,14 @@
   opacity: 0;
   transform: translateY(15px);
 }
+
+.resize-enter-active,
+.resize-leave-active {
+  max-height: 100px;
+  transition: all 0.3s ease;
+}
+
+.resize-enter-from,
+.resize-leave-to {
+  max-height: 0px;
+}

src/blockchain/__tests__/addresses.spec.ts

@@ -1,121 +0,0 @@
-import { expectTypeOf, it, expect } from "vitest";
-import {
-  getTokenAddress,
-  getP2PixAddress,
-  getProviderUrl,
-  isPossibleNetwork,
-} from "../addresses";
-
-import { setActivePinia, createPinia } from "pinia";
-import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
-import { useEtherStore } from "@/store/ether";
-
-describe("addresses.ts types", () => {
-  it("My addresses.ts types work properly", () => {
-    expectTypeOf(getTokenAddress).toBeFunction();
-    expectTypeOf(getP2PixAddress).toBeFunction();
-    expectTypeOf(getProviderUrl).toBeFunction();
-    expectTypeOf(isPossibleNetwork).toBeFunction();
-  });
-});
-
-describe("addresses.ts functions", () => {
-  beforeEach(() => {
-    setActivePinia(createPinia());
-  });
-
-  it("getTokenAddress Ethereum", () => {
-    const etherStore = useEtherStore();
-    etherStore.setNetworkId(NetworkEnum.sepolia);
-    expect(getTokenAddress(TokenEnum.BRZ)).toBe(
-      "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
-    );
-  });
-
-  it("getTokenAddress Polygon", () => {
-    const etherStore = useEtherStore();
-    etherStore.setNetworkId(NetworkEnum.polygon);
-    expect(getTokenAddress(TokenEnum.BRZ)).toBe(
-      "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29"
-    );
-  });
-
-  it("getTokenAddress Rootstock", () => {
-    const etherStore = useEtherStore();
-    etherStore.setNetworkId(NetworkEnum.rootstock);
-    expect(getTokenAddress(TokenEnum.BRZ)).toBe(
-      "0xfE841c74250e57640390f46d914C88d22C51e82e"
-    );
-  });
-
-
-  it("getTokenAddress Default", () => {
-    expect(getTokenAddress(TokenEnum.BRZ)).toBe(
-      "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
-    );
-  });
-
-  it("getP2PixAddress Ethereum", () => {
-    const etherStore = useEtherStore();
-    etherStore.setNetworkId(NetworkEnum.sepolia);
-    expect(getP2PixAddress()).toBe(
-      "0x2414817FF64A114d91eCFA16a834d3fCf69103d4"
-    );
-  });
-
-  it("getP2PixAddress Polygon", () => {
-    const etherStore = useEtherStore();
-    etherStore.setNetworkId(NetworkEnum.polygon);
-    expect(getP2PixAddress()).toBe(
-      "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
-    );
-  });
-
-  it("getP2PixAddress Rootstock", () => {
-    const etherStore = useEtherStore();
-    etherStore.setNetworkId(NetworkEnum.rootstock);
-    expect(getP2PixAddress()).toBe(
-      "0x98ba35eb14b38D6Aa709338283af3e922476dE34"
-    );
-  });
-
-  it("getP2PixAddress Default", () => {
-    expect(getP2PixAddress()).toBe(
-      "0x2414817FF64A114d91eCFA16a834d3fCf69103d4"
-    );
-  });
-
-  it("getProviderUrl Ethereum", () => {
-    const etherStore = useEtherStore();
-    etherStore.setNetworkId(NetworkEnum.sepolia);
-    expect(getProviderUrl()).toBe(import.meta.env.VITE_GOERLI_API_URL);
-  });
-
-  it("getProviderUrl Polygon", () => {
-    const etherStore = useEtherStore();
-    etherStore.setNetworkId(NetworkEnum.polygon);
-    expect(getProviderUrl()).toBe(import.meta.env.VITE_MUMBAI_API_URL);
-  });
-
-  it("getProviderUrl Rootstock", () => {
-    const etherStore = useEtherStore();
-    etherStore.setNetworkId(NetworkEnum.rootstock);
-    expect(getProviderUrl()).toBe(import.meta.env.VITE_ROOTSTOCK_API_URL);
-  });
-
-  it("getProviderUrl Default", () => {
-    expect(getProviderUrl()).toBe(import.meta.env.VITE_GOERLI_API_URL);
-  });
-
-  it("isPossibleNetwork Returns", () => {
-    const etherStore = useEtherStore();
-    etherStore.setNetworkId(NetworkEnum.sepolia);
-    expect(isPossibleNetwork(0x5)).toBe(true);
-    expect(isPossibleNetwork(5)).toBe(true);
-    expect(isPossibleNetwork(0x13881)).toBe(true);
-    expect(isPossibleNetwork(80001)).toBe(true);
-
-    expect(isPossibleNetwork(NaN)).toBe(false);
-    expect(isPossibleNetwork(0x55)).toBe(false);
-  });
-});

src/blockchain/addresses.ts

@@ -1,8 +1,9 @@
-import { useEtherStore } from "@/store/ether";
+import { useUser } from "@/composables/useUser";
 import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
-import { JsonRpcProvider } from "ethers";
+import { createPublicClient, http, type Address } from "viem";
+import { sepolia, rootstock } from "viem/chains";
 
-const Tokens: { [key in NetworkEnum]: { [key in TokenEnum]: string } } = {
+const Tokens: { [key in NetworkEnum]: { [key in TokenEnum]: Address } } = {
   [NetworkEnum.sepolia]: {
     BRZ: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
     // BRX: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
@@ -13,58 +14,57 @@ const Tokens: { [key in NetworkEnum]: { [key in TokenEnum]: string } } = {
   },
 };
 
-export const getTokenByAddress = (address: string) => {
-  for (const network of Object.values(NetworkEnum).filter(
-    (v) => !isNaN(Number(v))
-  )) {
-    for (const token of Object.keys(Tokens[network as NetworkEnum])) {
-      if (address === Tokens[network as NetworkEnum][token as TokenEnum]) {
-        return token as TokenEnum;
-      }
+export const getTokenByAddress = (address: Address) => {
+  const user = useUser();
+  const networksTokens = Tokens[user.networkName.value];
+  for (const [token, tokenAddress] of Object.entries(networksTokens)) {
+    if (tokenAddress.toLowerCase() === address.toLowerCase()) {
+      return token;
     }
   }
-
   return null;
 };
 
-const getTokenAddress = (token: TokenEnum, network?: NetworkEnum): string => {
-  const etherStore = useEtherStore();
-  return Tokens[network ? network : etherStore.networkName][token];
+export const getTokenAddress = (
+  token: TokenEnum,
+  network?: NetworkEnum
+): Address => {
+  const user = useUser();
+  return Tokens[network ? network : user.networkName.value][
+    token
+  ];
 };
 
-const getP2PixAddress = (network?: NetworkEnum): string => {
-  const etherStore = useEtherStore();
-  const possibleP2PixAddresses: { [key in NetworkEnum]: string } = {
+export const getP2PixAddress = (network?: NetworkEnum): Address => {
+  const user = useUser();
+  const possibleP2PixAddresses: { [key in NetworkEnum]: Address } = {
     [NetworkEnum.sepolia]: "0xb7cD135F5eFD9760981e02E2a898790b688939fe",
     [NetworkEnum.rootstock]: "0x98ba35eb14b38D6Aa709338283af3e922476dE34",
   };
 
-  return possibleP2PixAddresses[network ? network : etherStore.networkName];
+  return possibleP2PixAddresses[
+    network ? network : user.networkName.value
+  ];
 };
 
-const getProviderUrl = (network?: NetworkEnum): string => {
-  const etherStore = useEtherStore();
+export const getProviderUrl = (network?: NetworkEnum): string => {
+  const user = useUser();
   const possibleProvidersUrls: { [key in NetworkEnum]: string } = {
     [NetworkEnum.sepolia]: import.meta.env.VITE_SEPOLIA_API_URL,
     [NetworkEnum.rootstock]: import.meta.env.VITE_RSK_API_URL,
   };
 
-  return possibleProvidersUrls[network || etherStore.networkName];
+  return possibleProvidersUrls[network || user.networkName.value];
 };
 
-const getProviderByNetwork = (network: NetworkEnum): JsonRpcProvider => {
-  console.log("network", network);
-  return new JsonRpcProvider(getProviderUrl(network), network);
+export const getProviderByNetwork = (network: NetworkEnum) => {
+  const chain = network === NetworkEnum.sepolia ? sepolia : rootstock;
+  return createPublicClient({
+    chain,
+    transport: http(getProviderUrl(network)),
+  });
 };
 
-const isPossibleNetwork = (networkChain: NetworkEnum): boolean => {
+export const isPossibleNetwork = (networkChain: NetworkEnum): boolean => {
   return Number(networkChain) in NetworkEnum;
 };
-
-export {
-  getTokenAddress,
-  getProviderUrl,
-  isPossibleNetwork,
-  getP2PixAddress,
-  getProviderByNetwork,
-};

src/blockchain/buyerMethods.ts

@@ -1,97 +1,92 @@
-import { getContract, getProvider } from "./provider";
-import { getP2PixAddress, getTokenAddress } from "./addresses";
-
-import p2pix from "@/utils/smart_contract_files/P2PIX.json";
-
+import { getContract } from "./provider";
+import { getTokenAddress } from "./addresses";
 import {
-  solidityPackedKeccak256,
-  encodeBytes32String,
-  Signature,
-  Contract,
-  getBytes,
-  Wallet,
+  bytesToHex,
+  encodeAbiParameters,
+  keccak256,
+  parseAbiParameters,
   parseEther,
-} from "ethers";
+  stringToBytes,
+  stringToHex,
+  toBytes,
+  type Address,
+  type TransactionReceipt,
+} from "viem";
 import type { TokenEnum } from "@/model/NetworkEnum";
 
-const addLock = async (
-  seller: string,
-  token: string,
+export const addLock = async (
+  sellerAddress: Address,
+  tokenAddress: Address,
   amount: number
-): Promise<string> => {
-  const p2pContract = await getContract();
+): Promise<bigint> => {
+  const { address, abi, wallet, client, account } = await getContract();
+  const parsedAmount = parseEther(amount.toString());
 
-  const lock = await p2pContract.lock(
-    seller,
-    token,
-    parseEther(String(amount)), // BigNumber
-    [],
-    []
-  );
+  if (!wallet) {
+    throw new Error("Wallet not connected");
+  }
 
-  const lock_rec = await lock.wait();
-  const [t] = lock_rec.events;
+  const { result, request } = await client.simulateContract({
+    address,
+    abi,
+    functionName: "lock",
+    args: [sellerAddress, tokenAddress, parsedAmount, [], []],
+    account,
+  });
+  const hash = await wallet.writeContract(request);
+  const receipt = await client.waitForTransactionReceipt({ hash });
 
-  return String(t.args.lockID);
+  if (!receipt.status)
+    throw new Error("Transaction failed: " + receipt.transactionHash);
+
+  return result;
 };
 
-const releaseLock = async (
-  pixKey: string,
-  amount: number,
-  e2eId: string,
-  lockId: string
-): Promise<any> => {
-  const mockBacenSigner = new Wallet(
-    "0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80"
-  );
-
-  const messageToSign = solidityPackedKeccak256(
-    ["bytes32", "uint256", "bytes32"],
-    [pixKey, parseEther(String(amount)), encodeBytes32String(e2eId)]
-  );
-
-  const messageHashBytes = getBytes(messageToSign);
-  const flatSig = await mockBacenSigner.signMessage(messageHashBytes);
-  const provider = getProvider();
-
-  const sig = Signature.from(flatSig);
-  console.log(sig);
-  const signer = await provider.getSigner();
-  const p2pContract = new Contract(getP2PixAddress(), p2pix.abi, signer);
-
-  const release = await p2pContract.release(
-    BigInt(lockId),
-    encodeBytes32String(e2eId),
-    flatSig
-  );
-  await release.wait();
-
-  return release;
-};
-
-const cancelDeposit = async (depositId: bigint): Promise<any> => {
-  const contract = await getContract();
-
-  const cancel = await contract.cancelDeposit(depositId);
-  await cancel.wait();
-
-  return cancel;
-};
-
-const withdrawDeposit = async (
+export const withdrawDeposit = async (
   amount: string,
   token: TokenEnum
-): Promise<any> => {
-  const contract = await getContract();
+): Promise<boolean> => {
+  const { address, abi, wallet, client, account } = await getContract();
 
-  const withdraw = await contract.withdraw(
-    getTokenAddress(token),
-    parseEther(String(amount)),
-    []
-  );
-  await withdraw.wait();
+  if (!wallet) {
+    throw new Error("Wallet not connected");
+  }
 
-  return withdraw;
+  const tokenAddress = getTokenAddress(token);
+
+  const { request } = await client.simulateContract({
+    address,
+    abi,
+    functionName: "withdraw",
+    args: [tokenAddress, parseEther(amount), []],
+    account
+  });
+
+  const hash = await wallet.writeContract(request);
+  const receipt = await client.waitForTransactionReceipt({ hash });
+
+  return receipt.status === "success";
 };
 
-export { cancelDeposit, withdrawDeposit, addLock, releaseLock };
+export const releaseLock = async (
+  lockID: bigint,
+  pixTimestamp: `0x${string}`&{lenght:34},
+  signature: `0x${string}`
+): Promise<TransactionReceipt> => {
+  const { address, abi, wallet, client, account } = await getContract();
+
+  if (!wallet) {
+    throw new Error("Wallet not connected");
+  }
+
+  const { request } = await client.simulateContract({
+    address,
+    abi,
+    functionName: "release",
+    args: [BigInt(lockID), pixTimestamp, signature],
+    account
+  });
+
+  const hash = await wallet.writeContract(request);
+  return client.waitForTransactionReceipt({ hash });
+};

src/blockchain/events.ts

@@ -1,55 +1,59 @@
-import { useEtherStore } from "@/store/ether";
-import { Contract, formatEther, Interface } from "ethers";
+import { useUser } from "@/composables/useUser";
+import { formatEther, toHex, stringToHex } from "viem";
+import type { PublicClient, Address } from "viem";
 
-import p2pix from "@/utils/smart_contract_files/P2PIX.json";
 import { getContract } from "./provider";
+import { getP2PixAddress, getTokenAddress } from "./addresses";
+import { p2PixAbi } from "./abi"
 import type { ValidDeposit } from "@/model/ValidDeposit";
-import {
-  getP2PixAddress,
-  getProviderByNetwork,
-  getTokenAddress,
-} from "./addresses";
-import { NetworkEnum } from "@/model/NetworkEnum";
+import { getNetworkSubgraphURL, NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
 import type { UnreleasedLock } from "@/model/UnreleasedLock";
-import type { Pix } from "@/model/Pix";
+import type { LockStatus } from "@/model/LockStatus"
 
 const getNetworksLiquidity = async (): Promise<void> => {
-  const etherStore = useEtherStore();
-  etherStore.setLoadingNetworkLiquidity(true);
+  const user = useUser();
+  user.setLoadingNetworkLiquidity(true);
 
   const depositLists: ValidDeposit[][] = [];
 
   for (const network of Object.values(NetworkEnum).filter(
     (v) => !isNaN(Number(v))
   )) {
-    console.log("getNetworksLiquidity", network);
-    const p2pContract = new Contract(
-      getP2PixAddress(network as NetworkEnum),
-      p2pix.abi,
-      getProviderByNetwork(network as NetworkEnum)
-    );
-
-    depositLists.push(
-      await getValidDeposits(
-        getTokenAddress(etherStore.selectedToken, network as NetworkEnum),
-        network as NetworkEnum,
-        p2pContract
-      )
+    const deposits = await getValidDeposits(
+      getTokenAddress(user.selectedToken.value),
+      Number(network)
     );
+    if (deposits) depositLists.push(deposits);
   }
 
-  etherStore.setDepositsValidList(depositLists.flat());
-  etherStore.setLoadingNetworkLiquidity(false);
+  const allDeposits = depositLists.flat();
+  user.setDepositsValidList(allDeposits);
+  user.setLoadingNetworkLiquidity(false);
 };
 
-const getPixKey = async (seller: string, token: string): Promise<string> => {
-  const p2pContract = await getContract();
-  const pixKeyHex = await p2pContract.getPixTarget(seller, token);
+const getParticipantID = async (
+  seller: Address,
+  token: Address
+): Promise<string> => {
+  const { address, abi, client } = await getContract();
+
+  const participantIDHex = await client.readContract({
+    address,
+    abi,
+    functionName: "getPixTarget",
+    args: [seller, token],
+  });
+
   // Remove '0x' prefix and convert hex to UTF-8 string
+  const hexString =
+    typeof participantIDHex === "string"
+      ? participantIDHex
+      : toHex(participantIDHex as bigint);
+  if (!hexString) throw new Error("Participant ID not found");
   const bytes = new Uint8Array(
-    pixKeyHex
+    hexString
       .slice(2)
-      .match(/.{1,2}/g)
+      .match(/.{1,2}/g)!
       .map((byte: string) => parseInt(byte, 16))
   );
   // Remove null bytes from the end of the string
@@ -57,75 +61,110 @@ const getPixKey = async (seller: string, token: string): Promise<string> => {
 };
 
 const getValidDeposits = async (
-  token: string,
+  token: Address,
   network: NetworkEnum,
-  contract?: Contract
+  contractInfo?: { client: PublicClient; address: Address }
 ): Promise<ValidDeposit[]> => {
-  let p2pContract: Contract;
+  let client: PublicClient, abi;
 
-  if (contract) {
-    p2pContract = contract;
+  if (contractInfo) {
+    ({ client } = contractInfo);
+    abi = p2PixAbi;
   } else {
-    p2pContract = await getContract(true);
+    ({ abi, client } = await getContract(true));
   }
 
-  const filterDeposits = p2pContract.filters.DepositAdded(null);
-  const eventsDeposits = await p2pContract.queryFilter(
-    filterDeposits
-    // 0,
-    // "latest"
+  // TODO: Remove this once we have a subgraph for rootstock
+  if (network === NetworkEnum.rootstock) return [];
+
+  const body = {
+    query: `
+      {
+        depositAddeds(where: { token: "${token}" }) {
+          seller
+          amount
+          blockTimestamp
+          blockNumber
+        }
+      }
+  `,
+  };
+
+  const depositLogs = await fetch(getNetworkSubgraphURL(network), {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(body),
+  });
+
+  // remove doubles from sellers list
+  const depositData = await depositLogs.json();
+  const depositAddeds = depositData.data.depositAddeds;
+  const uniqueSellers = depositAddeds.reduce(
+    (acc: Record<Address, boolean>, deposit: any) => {
+      acc[deposit.seller] = true;
+      return acc;
+    },
+    {} as Record<Address, boolean>
   );
-  if (!contract) p2pContract = await getContract(); // get metamask provider contract
+
+  if (!contractInfo) {
+    // Get metamask provider contract
+    ({ abi, client } = await getContract(true));
+  }
+
   const depositList: { [key: string]: ValidDeposit } = {};
 
-  for (const deposit of eventsDeposits) {
-    const IPix2Pix = new Interface(p2pix.abi);
-    const decoded = IPix2Pix.parseLog({
-      topics: deposit.topics,
-      data: deposit.data,
-    });
-    // Get liquidity only for the selected token
-    if (decoded?.args.token != token) continue;
-    const mappedBalance = await p2pContract.getBalance(
-      decoded.args.seller,
-      token
-    );
-    let validDeposit: ValidDeposit | null = null;
+  const sellersList = Object.keys(uniqueSellers) as Address[];
+  // Use multicall to batch all getBalance requests
+  const balanceCalls = sellersList.map((seller) => ({
+    address: getP2PixAddress(network),
+    abi,
+    functionName: "getBalance",
+    args: [seller, token],
+  }));
 
-    if (mappedBalance) {
-      validDeposit = {
-        token: token,
-        blockNumber: deposit.blockNumber,
-        remaining: Number(formatEther(mappedBalance)),
-        seller: decoded.args.seller,
+  const balanceResults = await client.multicall({
+    contracts: balanceCalls as any,
+  });
+
+  // Process results into the depositList
+  sellersList.forEach((seller, index) => {
+    const mappedBalance = balanceResults[index];
+
+    if (!mappedBalance.error && mappedBalance.result) {
+      const validDeposit: ValidDeposit = {
+        token,
+        blockNumber: 0,
+        remaining: Number(formatEther(mappedBalance.result as bigint)),
+        seller,
         network,
-        pixKey: "",
+        participantID: "",
       };
+      depositList[seller + token] = validDeposit;
     }
-    if (validDeposit) depositList[decoded.args.seller + token] = validDeposit;
-  }
-
+  });
   return Object.values(depositList);
 };
 
 const getUnreleasedLockById = async (
-  lockID: string
+  lockID: bigint
 ): Promise<UnreleasedLock> => {
-  const p2pContract = await getContract();
-  const pixData: Pix = {
-    pixKey: "",
-  };
+  const { address, abi, client } = await getContract();
 
-  const lock = await p2pContract.mapLocks(lockID);
-
-  const pixTarget = lock.pixTarget;
-  const amount = formatEther(lock?.amount);
-  pixData.pixKey = pixTarget;
-  pixData.value = Number(amount);
+  const [ , , , amount, token, seller ] = await client.readContract({
+    address,
+    abi,
+    functionName: "mapLocks",
+    args: [lockID],
+  });
 
   return {
-    lockID: lockID,
-    pix: pixData,
+    lockID,
+    amount: Number(formatEther(amount)),
+    tokenAddress: token,
+    sellerAddress: seller,
   };
 };
 
@@ -133,5 +172,5 @@ export {
   getValidDeposits,
   getNetworksLiquidity,
   getUnreleasedLockById,
-  getPixKey,
+  getParticipantID,
 };

src/blockchain/provider.ts

@@ -1,27 +1,62 @@
-import p2pix from "@/utils/smart_contract_files/P2PIX.json";
+import { p2PixAbi } from "./abi";
 import { updateWalletStatus } from "./wallet";
 import { getProviderUrl, getP2PixAddress } from "./addresses";
-import { BrowserProvider, JsonRpcProvider, Contract } from "ethers";
+import {
+  createPublicClient,
+  createWalletClient,
+  custom,
+  http,
+  PublicClient,
+  WalletClient,
+} from "viem";
+import { sepolia, rootstock } from "viem/chains";
+import { useUser } from "@/composables/useUser";
 
-let provider: BrowserProvider | JsonRpcProvider | null = null;
+let walletClient: WalletClient | null = null;
 
-const getProvider = (onlyAlchemyProvider: boolean = false) => {
-  if (onlyAlchemyProvider) return new JsonRpcProvider(getProviderUrl()); // alchemy provider
-  return provider;
+const getPublicClient = (): PublicClient => {
+    const user = useUser();
+    const rpcUrl = getProviderUrl();
+    return createPublicClient({
+      chain:
+        Number(user.networkName.value) === sepolia.id ? sepolia : rootstock,
+      transport: http(rpcUrl),
+    });
 };
 
-const getContract = async (onlyAlchemyProvider: boolean = false) => {
-  const p = getProvider(onlyAlchemyProvider);
-  try {
-    const signer = await p?.getSigner();
-    return new Contract(getP2PixAddress(), p2pix.abi, signer);
-  } catch (err) {
-    return new Contract(getP2PixAddress(), p2pix.abi, p);
+const getWalletClient = (): WalletClient | null => {
+  return walletClient;
+};
+
+const getContract = async (onlyRpcProvider = false) => {
+  const client = getPublicClient();
+  const address = getP2PixAddress();
+  const abi = p2PixAbi;
+  const wallet = onlyRpcProvider ? null : getWalletClient();
+
+  if (!client) {
+    throw new Error("Public client not initialized");
   }
+
+  const [account] = wallet ? await wallet.getAddresses() : [null];
+
+  return { address, abi, client, wallet, account };
 };
 
 const connectProvider = async (p: any): Promise<void> => {
-  provider = new BrowserProvider(p, "any");
+  const user = useUser();
+  const chain =
+    Number(user.networkName.value) === sepolia.id ? sepolia : rootstock;
+
+  const [account] = await p!.request({ method: "eth_requestAccounts" });
+
+  walletClient = createWalletClient({
+    account,
+    chain,
+    transport: custom(p),
+  });
+
   await updateWalletStatus();
 };
-export { getProvider, getContract, connectProvider };
+
+export { getPublicClient, getWalletClient, getContract, connectProvider };

src/blockchain/sellerMethods.ts

@@ -1,54 +1,88 @@
-import { getContract, getProvider } from "./provider";
+import { getContract, getPublicClient, getWalletClient } from "./provider";
 import { getTokenAddress, getP2PixAddress } from "./addresses";
+import { parseEther, toHex } from "viem";
+import { sepolia, rootstock } from "viem/chains";
 
-import { encodeBytes32String, Contract, parseEther } from "ethers";
+import { mockTokenAbi } from "./abi";
+import { useUser } from "@/composables/useUser";
+import { createParticipant } from "@/utils/bbPay";
+import type { Participant } from "@/utils/bbPay";
 
-import mockToken from "../utils/smart_contract_files/MockToken.json";
-import { useEtherStore } from "@/store/ether";
+const approveTokens = async (participant: Participant): Promise<any> => {
+  const user = useUser();
+  const publicClient = getPublicClient();
+  const walletClient = getWalletClient();
 
-const approveTokens = async (tokenQty: string): Promise<any> => {
-  const provider = getProvider();
-  const signer = await provider?.getSigner();
-  const etherStore = useEtherStore();
+  if (!publicClient || !walletClient) {
+    throw new Error("Clients not initialized");
+  }
 
-  const tokenContract = new Contract(
-    getTokenAddress(etherStore.selectedToken),
-    mockToken.abi,
-    signer
-  );
+  user.setSeller(participant);
+  const [account] = await walletClient.getAddresses();
+
+  // Get token address
+  const tokenAddress = getTokenAddress(user.selectedToken.value);
 
   // Check if the token is already approved
-  const approved = await tokenContract.allowance(
-    await signer?.getAddress(),
-    getP2PixAddress()
-  );
-  if (approved < parseEther(tokenQty)) {
+  const allowance = await publicClient.readContract({
+    address: tokenAddress,
+    abi: mockTokenAbi,
+    functionName: "allowance",
+    args: [account, getP2PixAddress()],
+  });
+
+  if ( allowance < parseEther(participant.offer.toString()) ) {
     // Approve tokens
-    const apprv = await tokenContract.approve(
-      getP2PixAddress(),
-      parseEther(tokenQty)
-    );
-    await apprv.wait();
+    const chain = user.networkId.value === sepolia.id ? sepolia : rootstock;
+    const hash = await walletClient.writeContract({
+      address: tokenAddress,
+      abi: mockTokenAbi,
+      functionName: "approve",
+      args: [getP2PixAddress(), parseEther(participant.offer.toString())],
+      account,
+      chain,
+    });
+
+    await publicClient.waitForTransactionReceipt({ hash });
     return true;
   }
   return true;
 };
 
-const addDeposit = async (tokenQty: string, pixKey: string): Promise<any> => {
-  const p2pContract = await getContract();
-  const etherStore = useEtherStore();
+const addDeposit = async (): Promise<any> => {
+  const { address, abi, client } = await getContract();
+  const walletClient = getWalletClient();
+  const user = useUser();
 
-  const deposit = await p2pContract.deposit(
-    pixKey,
-    encodeBytes32String(""),
-    getTokenAddress(etherStore.selectedToken),
-    parseEther(tokenQty),
-    true
-  );
+  if (!walletClient) {
+    throw new Error("Wallet client not initialized");
+  }
 
-  await deposit.wait();
+  const [account] = await walletClient.getAddresses();
 
-  return deposit;
+  const sellerId = await createParticipant(user.seller.value);
+  user.setSellerId(sellerId.id);
+  if (!sellerId.id) {
+    throw new Error("Failed to create participant");
+  }
+  const chain = user.networkId.value === sepolia.id ? sepolia : rootstock;
+  const hash = await walletClient.writeContract({
+    address,
+    abi,
+    functionName: "deposit",
+    args: [
+      user.networkId.value + "-" + sellerId.id,
+      toHex("", { size: 32 }),
+      getTokenAddress(user.selectedToken.value),
+      parseEther(user.seller.value.offer.toString()),
+      true,
+    ],
+    account,
+    chain,
+  });
+
+  const receipt = await client.waitForTransactionReceipt({ hash });
+  return receipt;
 };
 
 export { approveTokens, addDeposit };

src/blockchain/wallet.ts

@@ -1,64 +1,48 @@
-import {
-  Contract,
-  formatEther,
-  getAddress,
-  Interface,
-  Log,
-  LogDescription,
-} from "ethers";
-import { useEtherStore } from "@/store/ether";
+import { formatEther, hexToString, type Address } from "viem";
+import { useUser } from "@/composables/useUser";
 
-import { getContract, getProvider } from "./provider";
-import { getTokenAddress, isPossibleNetwork } from "./addresses";
+import { getPublicClient, getWalletClient, getContract } from "./provider";
+import { getTokenAddress } from "./addresses";
 
-import mockToken from "@/utils/smart_contract_files/MockToken.json";
-import p2pix from "@/utils/smart_contract_files/P2PIX.json";
-
-import { getValidDeposits } from "./events";
+import { getValidDeposits, getUnreleasedLockById } from "./events";
 
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { WalletTransaction } from "@/model/WalletTransaction";
 import type { UnreleasedLock } from "@/model/UnreleasedLock";
-import type { Pix } from "@/model/Pix";
+import { LockStatus } from "@/model/LockStatus";
+import { getNetworkSubgraphURL } from "@/model/NetworkEnum";
 
 export const updateWalletStatus = async (): Promise<void> => {
-  const etherStore = useEtherStore();
+  const user = useUser();
 
-  const provider = await getProvider();
-  const signer = await provider?.getSigner();
+  const publicClient = getPublicClient();
+  const walletClient = getWalletClient();
 
-  const { chainId } = await provider?.getNetwork();
-  if (!isPossibleNetwork(Number(chainId))) {
-    window.alert("Invalid chain!:" + chainId);
+  if (!publicClient || !walletClient) {
+    console.error("Client not initialized");
     return;
   }
-  etherStore.setNetworkId(Number(chainId));
 
-  const mockTokenContract = new Contract(
-    getTokenAddress(etherStore.selectedToken),
-    mockToken.abi,
-    signer
-  );
+  // Get balance
+  const [account] = await walletClient.getAddresses();
+  const balance = await publicClient.getBalance({ address: account });
 
-  const walletAddress = await provider?.send("eth_requestAccounts", []);
-  const balance = await mockTokenContract.balanceOf(walletAddress[0]);
-
-  etherStore.setBalance(formatEther(balance));
-  etherStore.setWalletAddress(getAddress(walletAddress[0]));
+  user.setWalletAddress(account);
+  user.setBalance(formatEther(balance));
 };
 
 export const listValidDepositTransactionsByWalletAddress = async (
-  walletAddress: string
+  walletAddress: Address
 ): Promise<ValidDeposit[]> => {
-  const etherStore = useEtherStore();
+  const user = useUser();
   const walletDeposits = await getValidDeposits(
-    getTokenAddress(etherStore.selectedToken),
-    etherStore.networkName
+    getTokenAddress(user.selectedToken.value),
+    user.networkName.value
   );
   if (walletDeposits) {
     return walletDeposits
       .filter((deposit) => deposit.seller == walletAddress)
-      .sort((a, b) => {
+      .sort((a: ValidDeposit, b: ValidDeposit) => {
         return b.blockNumber - a.blockNumber;
       });
   }
@@ -66,235 +50,431 @@ export const listValidDepositTransactionsByWalletAddress = async (
   return [];
 };
 
-const getLockStatus = async (id: [BigInt]): Promise<number> => {
-  const p2pContract = await getContract();
-  const res = await p2pContract.getLocksStatus([id]);
-  return res[1][0];
-};
-
-const filterLockStatus = async (
-  transactions: Log[]
-): Promise<WalletTransaction[]> => {
-  const txs: WalletTransaction[] = [];
-
-  for (const transaction of transactions) {
-    const IPix2Pix = new Interface(p2pix.abi);
-    const decoded = IPix2Pix.parseLog({
-      topics: transaction.topics,
-      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,
-      transactionHash: transaction.transactionHash
-        ? transaction.transactionHash
-        : "",
-      transactionID: decoded.args.lockID ? decoded.args.lockID.toString() : "",
-    };
-    txs.push(tx);
-  }
-  return txs;
+const getLockStatus = async (id: bigint): Promise<LockStatus> => {
+  const { address, abi, client } = await getContract();
+  const [ sortedIDs , status ] = await client.readContract({
+    address,
+    abi,
+    functionName: "getLocksStatus",
+    args: [[id]],
+  });
+  return status[0];
 };
 
 export const listAllTransactionByWalletAddress = async (
-  walletAddress: string
+  walletAddress: Address
 ): Promise<WalletTransaction[]> => {
-  const p2pContract = await getContract(true);
+  const user = useUser();
 
-  // Get deposits
-  const filterDeposits = p2pContract.filters.DepositAdded([walletAddress]);
-  const eventsDeposits = await p2pContract.queryFilter(
-    filterDeposits,
-    0,
-    "latest"
-  );
-  console.log("Fetched all wallet deposits");
+  // Get the current network for the subgraph URL
+  const network = user.networkName.value;
 
-  // Get locks
-  const filterAddedLocks = p2pContract.filters.LockAdded([walletAddress]);
-  const eventsAddedLocks = await p2pContract.queryFilter(
-    filterAddedLocks,
-    0,
-    "latest"
-  );
-  console.log("Fetched all wallet locks");
+  // Query subgraph for all relevant transactions
+  const subgraphQuery = {
+    query: `
+      {
+        depositAddeds(where: {seller: "${walletAddress.toLowerCase()}"}) {
+          id
+          seller
+          token
+          amount
+          blockTimestamp
+          blockNumber
+          transactionHash
+        }
+        lockAddeds(where: {buyer: "${walletAddress.toLowerCase()}"}) {
+          buyer
+          lockID
+          seller
+          amount
+          blockTimestamp
+          blockNumber
+          transactionHash
+        }
+        lockReleaseds(where: {buyer: "${walletAddress.toLowerCase()}"}) {
+          buyer
+          lockId
+          blockTimestamp
+          blockNumber
+          transactionHash
+        }
+        depositWithdrawns(where: {seller: "${walletAddress.toLowerCase()}"}) {
+          seller
+          token
+          amount
+          blockTimestamp
+          blockNumber
+          transactionHash
+        }
+      }
+    `,
+  };
 
-  // Get released locks
-  const filterReleasedLocks = p2pContract.filters.LockReleased([walletAddress]);
-  const eventsReleasedLocks = await p2pContract.queryFilter(
-    filterReleasedLocks,
-    0,
-    "latest"
-  );
-  console.log("Fetched all wallet released locks");
+  const response = await fetch(getNetworkSubgraphURL(network), {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(subgraphQuery),
+  });
 
-  // Get withdrawn deposits
-  const filterWithdrawnDeposits = p2pContract.filters.DepositWithdrawn([
-    walletAddress,
-  ]);
-  const eventsWithdrawnDeposits = await p2pContract.queryFilter(
-    filterWithdrawnDeposits
-  );
-  console.log("Fetched all wallet withdrawn deposits");
+  const data = await response.json();
+  // Convert all transactions to common WalletTransaction format
+  const transactions: WalletTransaction[] = [];
 
-  const lockStatusFiltered = await filterLockStatus(
-    [
-      ...eventsDeposits,
-      ...eventsAddedLocks,
-      ...eventsReleasedLocks,
-      ...eventsWithdrawnDeposits,
-    ].sort((a, b) => {
-      return b.blockNumber - a.blockNumber;
-    })
-  );
+  // Process deposit added events
+  if (data.data?.depositAddeds) {
+    for (const deposit of data.data.depositAddeds) {
+      transactions.push({
+        token: deposit.token,
+        blockNumber: parseInt(deposit.blockNumber),
+        amount: parseFloat(formatEther(BigInt(deposit.amount))),
+        seller: deposit.seller,
+        buyer: "",
+        event: "DepositAdded",
+        lockStatus: undefined,
+        transactionHash: deposit.transactionHash,
+      });
+    }
+  }
 
-  return lockStatusFiltered;
+  // Process lock added events
+  if (data.data?.lockAddeds) {
+    for (const lock of data.data.lockAddeds) {
+      // Get lock status from the contract
+      const lockStatus = await getLockStatus(BigInt(lock.lockID));
+
+      transactions.push({
+        token: lock.token,
+        blockNumber: parseInt(lock.blockNumber),
+        amount: parseFloat(formatEther(BigInt(lock.amount))),
+        seller: lock.seller,
+        buyer: lock.buyer,
+        event: "LockAdded",
+        lockStatus: lockStatus,
+        transactionHash: lock.transactionHash,
+        transactionID: lock.lockID.toString(),
+      });
+    }
+  }
+
+  // Process lock released events
+  if (data.data?.lockReleaseds) {
+    for (const release of data.data.lockReleaseds) {
+      transactions.push({
+        token: undefined, // Subgraph doesn't provide token in this event, we could enhance this later
+        blockNumber: parseInt(release.blockNumber),
+        amount: -1, // Amount not available in this event
+        seller: "",
+        buyer: release.buyer,
+        event: "LockReleased",
+        lockStatus: undefined,
+        transactionHash: release.transactionHash,
+        transactionID: release.lockId.toString(),
+      });
+    }
+  }
+
+  // Process deposit withdrawn events
+  if (data.data?.depositWithdrawns) {
+    for (const withdrawal of data.data.depositWithdrawns) {
+      transactions.push({
+        token: withdrawal.token,
+        blockNumber: parseInt(withdrawal.blockNumber),
+        amount: parseFloat(formatEther(BigInt(withdrawal.amount))),
+        seller: withdrawal.seller,
+        buyer: "",
+        event: "DepositWithdrawn",
+        lockStatus: undefined,
+        transactionHash: withdrawal.transactionHash,
+      });
+    }
+  }
+
+  // Sort transactions by block number (newest first)
+  return transactions.sort((a, b) => b.blockNumber - a.blockNumber);
 };
 
 // get wallet's release transactions
 export const listReleaseTransactionByWalletAddress = async (
-  walletAddress: string
-): Promise<LogDescription[]> => {
-  const p2pContract = await getContract(true);
+  walletAddress: Address
+) => {
+  const user = useUser();
+  const network = user.networkName.value;
 
-  const filterReleasedLocks = p2pContract.filters.LockReleased([walletAddress]);
-  const eventsReleasedLocks = await p2pContract.queryFilter(
-    filterReleasedLocks,
-    0,
-    "latest"
-  );
-
-  return eventsReleasedLocks
-    .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<LogDescription[]> => {
-  const p2pContract = await getContract(true);
-
-  const filterAddedLocks = p2pContract.filters.LockAdded([walletAddress]);
-  const eventsReleasedLocks = await p2pContract.queryFilter(filterAddedLocks);
-
-  return eventsReleasedLocks
-    .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<LogDescription[]> => {
-  const p2pContract = await getContract(true);
-  console.log("Will get locks as seller", sellerAddress);
-  const filterAddedLocks = p2pContract.filters.LockAdded();
-  const eventsReleasedLocks = await p2pContract.queryFilter(
-    filterAddedLocks
-    // 0,
-    // "latest"
-  );
-  return eventsReleasedLocks
-    .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()
-    );
-};
-
-export const checkUnreleasedLock = async (
-  walletAddress: string
-): Promise<UnreleasedLock | undefined> => {
-  const p2pContract = await getContract();
-  const pixData: Pix = {
-    pixKey: "",
+  // Query subgraph for release transactions
+  const subgraphQuery = {
+    query: `
+      {
+        lockReleaseds(where: {buyer: "${walletAddress.toLowerCase()}"}) {
+          buyer
+          lockId
+          e2eId
+          blockTimestamp
+          blockNumber
+          transactionHash
+        }
+      }
+    `,
   };
 
-  const addedLocks = await listLockTransactionByWalletAddress(walletAddress);
-  const lockStatus = await p2pContract.getLocksStatus(
-    addedLocks.map((lock) => lock.args?.lockID)
-  );
-  const unreleasedLockId = lockStatus[1].findIndex(
-    (lockStatus: number) => lockStatus == 1
-  );
+  // Fetch data from subgraph
+  const response = await fetch(getNetworkSubgraphURL(network), {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(subgraphQuery),
+  });
 
-  if (unreleasedLockId != -1) {
-    const _lockID = lockStatus[0][unreleasedLockId];
-    const lock = await p2pContract.mapLocks(_lockID);
+  const data = await response.json();
 
-    const pixTarget = lock.pixTarget;
-    const amount = formatEther(lock?.amount);
-    pixData.pixKey = pixTarget;
-    pixData.value = Number(amount);
+  // Process the subgraph response into the same format as the previous implementation
+  if (!data.data?.lockReleaseds) {
+    return [];
+  }
 
-    return {
-      lockID: _lockID,
-      pix: pixData,
-    };
+  // Transform the subgraph data to match the event log decode format
+  return data.data.lockReleaseds
+    .sort((a: any, b: any) => {
+      return parseInt(b.blockNumber) - parseInt(a.blockNumber);
+    })
+    .map((release: any) => {
+      try {
+        // Create a structure similar to the decoded event log
+        return {
+          eventName: "LockReleased",
+          args: {
+            buyer: release.buyer,
+            lockID: BigInt(release.lockId),
+            e2eId: release.e2eId,
+          },
+          // Add any other necessary fields to match the original return format
+          blockNumber: BigInt(release.blockNumber),
+          transactionHash: release.transactionHash,
+        };
+      } catch (error) {
+        console.error("Error processing subgraph data", error);
+        return null;
+      }
+    })
+    .filter((decoded: any) => decoded !== null);
+};
+
+const listLockTransactionByWalletAddress = async (walletAddress: Address) => {
+  const user = useUser();
+  const network = user.networkName.value;
+
+  // Query subgraph for lock added transactions
+  const subgraphQuery = {
+    query: `
+      {
+        lockAddeds(where: {buyer: "${walletAddress.toLowerCase()}"}) {
+          buyer
+          lockID
+          seller
+          amount
+          blockTimestamp
+          blockNumber
+          transactionHash
+        }
+      }
+    `,
+  };
+
+  try {
+    // Fetch data from subgraph
+    const response = await fetch(getNetworkSubgraphURL(network), {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(subgraphQuery),
+    });
+
+    const data = await response.json();
+
+    if (!data.data?.lockAddeds) {
+      return [];
+    }
+
+    // Transform the subgraph data to match the event log decode format
+    return data.data.lockAddeds
+      .sort((a: any, b: any) => {
+        return parseInt(b.blockNumber) - parseInt(a.blockNumber);
+      })
+      .map((lock: any) => {
+        try {
+          // Create a structure similar to the decoded event log
+          return {
+            eventName: "LockAdded",
+            args: {
+              buyer: lock.buyer,
+              lockID: BigInt(lock.lockID),
+              seller: lock.seller,
+              token: lock.token,
+              amount: BigInt(lock.amount),
+            },
+            // Add other necessary fields to match the original format
+            blockNumber: BigInt(lock.blockNumber),
+            transactionHash: lock.transactionHash,
+          };
+        } catch (error) {
+          console.error("Error processing subgraph data", error);
+          return null;
+        }
+      })
+      .filter((decoded: any) => decoded !== null);
+  } catch (error) {
+    console.error("Error fetching from subgraph:", error);
   }
 };
 
+const listLockTransactionBySellerAddress = async (sellerAddress: Address) => {
+  const user = useUser();
+  const network = user.networkName.value;
+
+  // Query subgraph for lock added transactions where seller matches
+  const subgraphQuery = {
+    query: `
+      {
+        lockAddeds(where: {seller: "${sellerAddress.toLowerCase()}"}) {
+          buyer
+          lockID
+          seller
+          token
+          amount
+          blockTimestamp
+          blockNumber
+          transactionHash
+        }
+      }
+    `,
+  };
+
+  try {
+    // Fetch data from subgraph
+    const response = await fetch(getNetworkSubgraphURL(network), {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(subgraphQuery),
+    });
+
+    const data = await response.json();
+
+    if (!data.data?.lockAddeds) {
+      return [];
+    }
+
+    // Transform the subgraph data to match the event log decode format
+    return data.data.lockAddeds
+      .sort((a: any, b: any) => {
+        return parseInt(b.blockNumber) - parseInt(a.blockNumber);
+      })
+      .map((lock: any) => {
+        try {
+          // Create a structure similar to the decoded event log
+          return {
+            eventName: "LockAdded",
+            args: {
+              buyer: lock.buyer,
+              lockID: BigInt(lock.lockID),
+              seller: lock.seller,
+              token: lock.token,
+              amount: BigInt(lock.amount),
+            },
+            // Add other necessary fields to match the original format
+            blockNumber: BigInt(lock.blockNumber),
+            transactionHash: lock.transactionHash,
+          };
+        } catch (error) {
+          console.error("Error processing subgraph data", error);
+          return null;
+        }
+      })
+      .filter((decoded: any) => decoded !== null);
+  } catch (error) {
+    console.error("Error fetching from subgraph:", error);
+    return [];
+  }
+};
+
+export const checkUnreleasedLock = async (
+  walletAddress: Address
+): Promise<UnreleasedLock | undefined> => {
+  const { address, abi, client } = await getContract();
+  const addedLocks = await listLockTransactionByWalletAddress(walletAddress);
+
+  if (!addedLocks.length) return undefined;
+
+  const lockIds = addedLocks.map((lock: any) => lock.args.lockID);
+
+  const [ sortedIDs, status ] = await client.readContract({
+    address,
+    abi,
+    functionName: "getLocksStatus",
+    args: [lockIds],
+  });
+
+  const unreleasedLockId = status.findIndex(
+    (status: LockStatus) => status == LockStatus.Active
+  );
+  
+  if (unreleasedLockId !== -1)
+    return getUnreleasedLockById(sortedIDs[unreleasedLockId]);
+};
+
 export const getActiveLockAmount = async (
-  walletAddress: string
+  walletAddress: Address
 ): Promise<number> => {
-  const p2pContract = await getContract(true);
+  const { address, abi, client } = await getContract(true);
   const lockSeller = await listLockTransactionBySellerAddress(walletAddress);
 
-  const lockStatus = await p2pContract.getLocksStatus(
-    lockSeller.map((lock) => lock.args?.lockID)
+  if (!lockSeller.length) return 0;
+
+  const lockIds = lockSeller.map((lock: any) => lock.args.lockID);
+
+  const [ sortedIDs, status ] = await client.readContract({
+    address,
+    abi,
+    functionName: "getLocksStatus",
+    args: [lockIds],
+  });
+
+  const mapLocksRequests = status.map((id: LockStatus) =>
+    client.readContract({
+      address: address,
+      abi,
+      functionName: "mapLocks",
+      args: [BigInt(id)],
+    })
   );
 
-  const activeLockAmount = await lockStatus[1].reduce(
-    async (sumValue: Promise<number>, currentStatus: number, index: number) => {
-      const currValue = await sumValue;
-      let valueToSum = 0;
+  const mapLocksResults = await client.multicall({
+    contracts: mapLocksRequests as any,
+  });
 
-      if (currentStatus == 1) {
-        const lock = await p2pContract.mapLocks(lockStatus[0][index]);
-        valueToSum = Number(formatEther(lock?.amount));
-      }
-
-      return currValue + valueToSum;
-    },
-    Promise.resolve(0)
-  );
-
-  return activeLockAmount;
+  return mapLocksResults.reduce((total: number, lock: any, index: number) => {
+    if (status[index] === 1) {
+      return total + Number(formatEther(lock.amount));
+    }
+    return total;
+  }, 0);
+};
+
+export const getSellerParticipantId = async (
+  sellerAddress: Address,
+  tokenAddress: Address
+): Promise<string> => {
+  const { address, abi, client } = await getContract();
+
+  const participantId = await client.readContract({
+    address,
+    abi,
+    functionName: "getPixTarget",
+    args: [sellerAddress, tokenAddress],
+  });
+  return hexToString(participantId);
 };

src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue

@@ -8,8 +8,7 @@ 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 { useUser } from "@/composables/useUser";
 import { onMounted, ref, watch } from "vue";
 import ListingComponent from "../ListingComponent/ListingComponent.vue";
 
@@ -19,8 +18,8 @@ const props = defineProps<{
   isCurrentStep: boolean;
 }>();
 
-const etherStore = useEtherStore();
-const { walletAddress } = storeToRefs(etherStore);
+const user = useUser();
+const { walletAddress } = useUser();
 
 const lastWalletTransactions = ref<WalletTransaction[]>([]);
 const depositList = ref<ValidDeposit[]>([]);
@@ -29,7 +28,7 @@ const activeLockAmount = ref<number>(0);
 // methods
 
 const getWalletTransactions = async () => {
-  etherStore.setLoadingWalletTransactions(true);
+  user.setLoadingWalletTransactions(true);
   if (walletAddress.value) {
     const walletDeposits = await listValidDepositTransactionsByWalletAddress(
       walletAddress.value
@@ -48,20 +47,20 @@ const getWalletTransactions = async () => {
       lastWalletTransactions.value = allUserTransactions;
     }
   }
-  etherStore.setLoadingWalletTransactions(false);
+  user.setLoadingWalletTransactions(false);
 };
 
 const callWithdraw = async (amount: string) => {
   if (amount) {
-    etherStore.setLoadingWalletTransactions(true);
-    const withdraw = await withdrawDeposit(amount, etherStore.selectedToken);
+    user.setLoadingWalletTransactions(true);
+    const withdraw = await withdrawDeposit(amount, user.selectedToken.value);
     if (withdraw) {
       console.log("Saque realizado!");
       await getWalletTransactions();
     } else {
       console.log("Não foi possível realizar o saque!");
     }
-    etherStore.setLoadingWalletTransactions(false);
+    user.setLoadingWalletTransactions(false);
   }
 };
 
@@ -93,14 +92,14 @@ onMounted(async () => {
         <div>
           <p>Tokens recebidos</p>
           <p class="text-2xl text-gray-900">
-            {{ props.tokenAmount }} {{ etherStore.selectedToken }}
+            {{ props.tokenAmount }} {{ user.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 {{ user.selectedToken }} em sua carteira.
           </p>
         </div>
         <CustomButton :text="'Cadastrar token'" @buttonClicked="() => {}" />
@@ -150,10 +149,6 @@ p {
   @apply font-medium text-base text-gray-900;
 }
 
-input[type="number"] {
-  -moz-appearance: textfield;
-}
-
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;

src/components/BuyConfirmedComponent/__tests__/BuyConfirmedComponent.spec.ts

@@ -1,37 +0,0 @@
-import { mount } from "@vue/test-utils";
-import BuyConfirmedComponent from "../BuyConfirmedComponent.vue";
-import { createPinia, setActivePinia } from "pinia";
-
-describe("BuyConfirmedComponent.vue", async () => {
-  beforeEach(() => {
-    setActivePinia(createPinia());
-  });
-
-  const wrapper = mount(BuyConfirmedComponent, {
-    props: {
-      tokenAmount: 1,
-      isCurrentStep: false,
-    },
-  });
-
-  // test("Test component Header Text", () => {
-  //   expect(wrapper.html()).toContain("Os tokens já foram transferidos");
-  //   expect(wrapper.html()).toContain("para a sua carteira!");
-  // });
-
-  // test("Test component Container Text", () => {
-  //   expect(wrapper.html()).toContain("Tokens recebidos");
-  //   expect(wrapper.html()).toContain("BRZ");
-  //   expect(wrapper.html()).toContain("Não encontrou os tokens?");
-  //   expect(wrapper.html()).toContain("Clique no botão abaixo para");
-  //   expect(wrapper.html()).toContain("cadastrar o BRZ em sua carteira.");
-  // });
-
-  test("Test makeAnotherTransactionEmit", async () => {
-    wrapper.vm.$emit("makeAnotherTransaction");
-
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted("makeAnotherTransaction")).toBeTruthy();
-  });
-});

src/components/CustomButton/__tests__/CustomButton.spec.ts

@@ -1,27 +0,0 @@
-import { mount } from "@vue/test-utils";
-import CustomButton from "../CustomButton.vue";
-
-describe("CustomButton.vue", () => {
-  test("Test button content", () => {
-    const wrapper = mount(CustomButton, {
-      props: {
-        text: "Testing",
-      },
-    });
-
-    expect(wrapper.html()).toContain("Testing");
-  });
-
-  test("Test if disabled props works", () => {
-    const wrapper = mount(CustomButton, {
-      props: {
-        isDisabled: true,
-      },
-    });
-
-    //@ts-ignore
-    const button = wrapper.find(".button") as HTMLButtonElement;
-    //@ts-ignore
-    expect(button.element.disabled).toBe(true);
-  });
-});

src/components/CustomModal/CustomModal.vue

@@ -19,7 +19,7 @@ if (props.isRedirectModal) {
 <template>
   <div>
     <div
-      class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none"
+      class="modal-overlay inset-0 fixed hidden md:block justify-center backdrop-blur-sm sm:backdrop-blur-none"
       v-if="!isRedirectModal"
     >
       <div class="modal px-5 text-center">

src/components/CustomModal/__tests__/CustomModal.spec.ts

@@ -1,27 +0,0 @@
-import { mount } from "@vue/test-utils";
-import CustomModal from "../CustomModal.vue";
-
-describe("CustomModal test", () => {
-  test("Test custom modal when receive is redirect modal props as false", () => {
-    const wrapper = mount(CustomModal, {
-      props: {
-        isRedirectModal: false,
-      },
-    });
-
-    expect(wrapper.html()).toContain("ATENÇÃO!");
-    expect(wrapper.html()).toContain("Entendi");
-  });
-
-  test("Test custom modal when receive is redirect modal props as true", () => {
-    const wrapper = mount(CustomModal, {
-      props: {
-        isRedirectModal: true,
-      },
-    });
-
-    expect(wrapper.html()).toContain("Retomar a última compra?");
-    expect(wrapper.html()).toContain("Não");
-    expect(wrapper.html()).toContain("Sim");
-  });
-});

src/components/ListingComponent/ListingComponent.vue

@@ -1,18 +1,15 @@
 <script setup lang="ts">
-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 { storeToRefs } from "pinia";
+import { useUser } from "@/composables/useUser";
 import { ref, watch, onMounted } from "vue";
 import SpinnerComponent from "../SpinnerComponent.vue";
 import { decimalCount } from "@/utils/decimalCount";
 import { debounce } from "@/utils/debounce";
-import { getTokenByAddress } from "@/blockchain/addresses";
 import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue";
 
-const etherStore = useEtherStore();
+const user = useUser();
 
 // props
 const props = defineProps<{
@@ -23,8 +20,9 @@ const props = defineProps<{
 
 const emit = defineEmits(["depositWithdrawn"]);
 
-const { loadingWalletTransactions } = storeToRefs(etherStore);
-const remaining = ref<number>(0.0);
+const { loadingWalletTransactions } = user;
+
+const remaining = ref<number>(0);
 const itemsToShow = ref<WalletTransaction[]>([]);
 const withdrawAmount = ref<string>("");
 const withdrawButtonOpacity = ref<number>(0.6);
@@ -85,8 +83,7 @@ watch(withdrawAmount, (): void => {
 });
 
 const getRemaining = (): number => {
-  if (props.validDeposits instanceof Array) {
-    // Here we are getting only the first element of the list because
+  if (props.validDeposits.length > 0) {
     // in this release only the BRL token is being used.
     const deposit = props.validDeposits[0];
     remaining.value = deposit ? deposit.remaining : 0;
@@ -96,7 +93,7 @@ const getRemaining = (): number => {
 };
 
 const getExplorer = (): string => {
-  return etherStore.networkName == NetworkEnum.sepolia
+  return user.networkName.value == NetworkEnum.sepolia
     ? "Etherscan"
     : "Polygonscan";
 };
@@ -107,7 +104,7 @@ const showInitialItems = (): void => {
 
 const openEtherscanUrl = (transactionHash: string): void => {
   const networkUrl =
-    etherStore.networkName == NetworkEnum.sepolia
+    user.networkName.value == NetworkEnum.sepolia
       ? "sepolia.etherscan.io"
       : "mumbai.polygonscan.com";
   const url = `https://${networkUrl}/tx/${transactionHash}`;
@@ -162,10 +159,14 @@ showInitialItems();
 </script>
 
 <template>
-  <div class="main-container max-w-md" v-if="loadingWalletTransactions">
+  <div
+    class="main-container max-w-md flex justify-center items-center min-h-[200px] w-16 h-16"
+    v-if="loadingWalletTransactions"
+  >
+    Carregando ofertas...
     <SpinnerComponent width="8" height="8"></SpinnerComponent>
   </div>
-  <div class="main-container max-w-md" v-if="!loadingWalletTransactions">
+  <div class="main-container max-w-md" v-else>
     <div
       class="w-full bg-white p-4 sm:p-6 rounded-lg"
       v-if="props.validDeposits.length > 0"
@@ -176,12 +177,12 @@ showInitialItems();
             Saldo disponível
           </p>
           <p class="text-xl leading-7 font-semibold text-gray-900">
-            {{ getRemaining() }} {{ etherStore.selectedToken }}
+            {{ getRemaining() }} {{ user.selectedToken.value }}
           </p>
           <div class="flex gap-2 w-32 sm:w-56" v-if="activeLockAmount != 0">
             <span class="text-xs font-normal text-gray-400" ref="infoText">{{
               `com ${activeLockAmount.toFixed(2)} ${
-                etherStore.selectedToken
+                user.selectedToken.value
               } em lock`
             }}</span>
             <div
@@ -285,10 +286,10 @@ showInitialItems();
             class="text-xl sm:text-xl leading-7 font-semibold text-gray-900"
           >
             {{ item.amount }}
-            {{ getTokenByAddress(item.token) }}
+            <!-- {{ getTokenByAddress(item.token) }} -->
           </span>
         </div>
-        <div>
+        <div class="flex flex-col items-center justify-center">
           <div
             class="bg-amber-300 status-text"
             v-if="getEventName(item.event) == 'Reserva' && item.lockStatus == 1"
@@ -411,6 +412,7 @@ p {
 }
 
 input[type="number"] {
+  appearance: textfield;
   -moz-appearance: textfield;
 }
 

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

@@ -1,87 +0,0 @@
-import { mount } from "@vue/test-utils";
-import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
-import { createPinia, setActivePinia } from "pinia";
-import { expect } from "vitest";
-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);
-  });
-
-  test("Test Message when an empty array is received", () => {
-    const wrapper = mount(ListingComponent, {
-      props: {
-        validDeposits: [],
-        walletTransactions: [],
-        activeLockAmount: 0,
-      },
-    });
-
-    expect(wrapper.html()).toContain("Não há nenhuma transação anterior");
-  });
-
-  test("Test number of elements in the list first render", () => {
-    const wrapper = mount(ListingComponent, {
-      props: {
-        validDeposits: [],
-        walletTransactions: MockWalletTransactions,
-        activeLockAmount: 0,
-      },
-    });
-
-    const elements = wrapper.findAll(".item-container");
-
-    expect(elements).toHaveLength(3);
-  });
-
-  test("Test load more button behavior", async () => {
-    const wrapper = mount(ListingComponent, {
-      props: {
-        validDeposits: MockValidDeposits,
-        walletTransactions: MockWalletTransactions,
-        activeLockAmount: 0,
-      },
-    });
-    const btn = wrapper.find("button");
-
-    let elements = wrapper.findAll(".item-container");
-    expect(elements).toHaveLength(3);
-
-    await btn.trigger("click");
-
-    elements = wrapper.findAll(".item-container");
-
-    expect(elements).toHaveLength(5);
-  });
-
-  test("Test withdraw offer button emit", async () => {
-    const wrapper = mount(ListingComponent, {
-      props: {
-        validDeposits: MockValidDeposits,
-        walletTransactions: MockWalletTransactions,
-        activeLockAmount: 0,
-      },
-    });
-    wrapper.vm.$emit("depositWithdrawn");
-
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted("depositWithdrawn")).toBeTruthy();
-  });
-
-  test("Test should render lock info when active lock amount is greater than 0", () => {
-    const wrapper = mount(ListingComponent, {
-      props: {
-        validDeposits: MockValidDeposits,
-        walletTransactions: [],
-        activeLockAmount: 50,
-      },
-    });
-
-    expect(wrapper.html()).toContain("com 50.00 BRZ em lock");
-  });
-});

src/components/LoadingComponent/__tests__/LoadingComponent.spec.ts

@@ -1,27 +0,0 @@
-import { mount } from "@vue/test-utils";
-import LoadingComponent from "../LoadingComponent.vue";
-
-describe("Loading.vue", () => {
-  test("Test loading content with received props", () => {
-    const wrapper = mount(LoadingComponent, {
-      props: {
-        title: "MockTitle",
-        message: "MockMessage",
-      },
-    });
-
-    expect(wrapper.html()).toContain("MockTitle");
-    expect(wrapper.html()).toContain("MockMessage");
-  });
-
-  test("Test default text if props title isnt passed", () => {
-    const wrapper = mount(LoadingComponent, {
-      props: {
-        message: "MockMessage",
-      },
-    });
-
-    expect(wrapper.html()).toContain("Confirme em sua carteira");
-    expect(wrapper.html()).toContain("MockMessage");
-  });
-});

src/components/QrCodeComponent.vue

@@ -1,86 +1,124 @@
 <script setup lang="ts">
-import { pix } from "@/utils/QrCodePix";
-import { onMounted, onUnmounted, ref } from "vue";
-import { debounce } from "@/utils/debounce";
+import { ref, onMounted, onUnmounted } from "vue";
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
 import CustomModal from "@/components//CustomModal/CustomModal.vue";
-import api from "@/services/index";
+import SpinnerComponent from "@/components/SpinnerComponent.vue";
+import { createSolicitation, getSolicitation, type Offer } from "@/utils/bbPay";
+import { getSellerParticipantId } from "@/blockchain/wallet";
+import { getUnreleasedLockById } from "@/blockchain/events";
+import QRCode from "qrcode";
 
-// props and store references
-const props = defineProps({
-  pixTarget: String,
-  tokenValue: Number,
-});
+// Props
+interface Props {
+  lockID: string;
+}
+
+const props = defineProps<Props>();
 
-const windowSize = ref<number>(window.innerWidth);
 const qrCode = ref<string>("");
-const qrCodePayload = ref<string>("");
-const isPixValid = ref<boolean>(false);
-const isCodeInputEmpty = ref<boolean>(true);
+const qrCodeSvg = ref<string>("");
 const showWarnModal = ref<boolean>(true);
-const e2eId = ref<string>("");
+const pixTimestamp = ref<string>("");
+const releaseSignature = ref<string>("");
+const solicitationData = ref<any>(null);
+const pollingInterval = ref<NodeJS.Timeout | null>(null);
+
+// Function to generate QR code SVG
+const generateQrCodeSvg = async (text: string) => {
+  try {
+    const svgString = await QRCode.toString(text, {
+      type: "svg",
+      width: 192, // 48 * 4 for better quality
+      margin: 2,
+      color: {
+        dark: "#000000",
+        light: "#FFFFFF",
+      },
+    });
+    qrCodeSvg.value = svgString;
+  } catch (error) {
+    console.error("Error generating QR code SVG:", error);
+  }
+};
 
 // Emits
 const emit = defineEmits(["pixValidated"]);
 
-const pixQrCode = pix({
-  pixKey: props.pixTarget ?? "",
-  value: props.tokenValue,
-});
-
-pixQrCode.base64QrCode().then((code: string) => {
-  qrCode.value = code;
-});
-
-qrCodePayload.value = pixQrCode.payload();
-
-const handleInputEvent = async (event: any): Promise<void> => {
-  const { value } = event.target;
-  e2eId.value = value;
-  await validatePix();
-};
-
-const validatePix = async (): Promise<void> => {
-  if (e2eId.value == "") {
-    isPixValid.value = false;
-    isCodeInputEmpty.value = true;
+// Function to check solicitation status
+const checkSolicitationStatus = async () => {
+  if (!solicitationData.value?.numeroSolicitacao) {
     return;
   }
-  const sellerPixKey = props.pixTarget;
-  const transactionValue = props.tokenValue;
 
-  if (sellerPixKey && transactionValue) {
-    const body_req = {
-      e2e_id: e2eId.value,
-      pix_key: sellerPixKey,
-      pix_value: transactionValue,
-    };
+  try {
+    const response = await getSolicitation(
+      solicitationData.value.numeroSolicitacao
+    );
 
-    isCodeInputEmpty.value = false;
-
-    try {
-      await api.post("validate_pix", body_req);
-      isPixValid.value = true;
-    } catch (error) {
-      isPixValid.value = false;
+    if (response.signature) {
+      pixTimestamp.value = response.pixTimestamp;
+      releaseSignature.value = response.signature;
+      // Stop polling when payment is confirmed
+      if (pollingInterval.value) {
+        clearInterval(pollingInterval.value);
+        pollingInterval.value = null;
+      }
     }
-  } else {
-    isCodeInputEmpty.value = false;
-    isPixValid.value = false;
+  } catch (error) {
+    console.error("Error checking solicitation status:", error);
   }
 };
 
-onMounted(() => {
-  window.addEventListener(
-    "resize",
-    () => (windowSize.value = window.innerWidth)
-  );
+// Function to start polling
+const startPolling = () => {
+  // Clear any existing interval
+  if (pollingInterval.value) {
+    clearInterval(pollingInterval.value);
+  }
+
+  // Start new polling interval (10 seconds)
+  pollingInterval.value = setInterval(checkSolicitationStatus, 10000);
+};
+
+onMounted(async () => {
+  try {
+    const { tokenAddress, sellerAddress, amount } = await getUnreleasedLockById(
+      BigInt(props.lockID)
+    );
+
+    const participantId = await getSellerParticipantId(
+      sellerAddress,
+      tokenAddress
+    );
+
+    const offer: Offer = {
+      amount,
+      sellerId: participantId,
+    };
+
+    const response = await createSolicitation(offer);
+    solicitationData.value = response;
+
+    // Update qrCode if the response contains QR code data
+    if (response?.informacoesPIX?.textoQrCode) {
+      qrCode.value = response.informacoesPIX?.textoQrCode;
+      // Generate SVG QR code
+      await generateQrCodeSvg(qrCode.value);
+    }
+
+    // Start polling for solicitation status
+    startPolling();
+  } catch (error) {
+    console.error("Error creating solicitation:", error);
+  }
 });
+
+// Clean up interval on component unmount
 onUnmounted(() => {
-  window.removeEventListener(
-    "resize",
-    () => (windowSize.value = window.innerWidth)
-  );
+  if (pollingInterval.value) {
+    clearInterval(pollingInterval.value);
+    pollingInterval.value = null;
+  }
 });
 </script>
 
@@ -94,18 +132,28 @@ onUnmounted(() => {
       </span>
       <span class="text font-medium lg:text-md text-sm max-w-[28rem]">
         Após realizar o Pix no banco de sua preferência, clique no botão abaixo
-        para gerar a assinatura para liberação dos tokens.
+        para liberação dos tokens.
       </span>
     </div>
     <div class="main-container max-w-md text-black">
       <div
         class="flex-col items-center justify-center flex w-full bg-white sm:p-8 p-4 rounded-lg break-normal"
       >
-        <img alt="Qr code image" :src="qrCode" class="w-48 h-48" />
+        <div
+          v-if="qrCodeSvg"
+          v-html="qrCodeSvg"
+          class="w-48 h-48 flex items-center justify-center"
+        ></div>
+        <div
+          v-else
+          class="w-48 h-48 flex items-center justify-center rounded-lg"
+        >
+          <SpinnerComponent width="8" height="8"></SpinnerComponent>
+        </div>
         <span class="text-center font-bold">Código pix</span>
         <div class="break-words w-4/5">
           <span class="text-center text-xs">
-            {{ qrCodePayload }}
+            {{ qrCode }}
           </span>
         </div>
         <img
@@ -115,21 +163,19 @@ onUnmounted(() => {
           height="16"
           class="pt-2 lg:mb-5 cursor-pointer"
         />
-        <span class="text-xs text-start hidden sm:inline-block">
-          <strong>ATENÇÃO!</strong> A transação só será processada após inserir
-          o código de autenticação. Caso contrário não conseguiremos comprovar o
-          seu depósito e não será possível transferir os tokens para sua
-          carteira. Confira aqui como encontrar o código no comprovante.
-        </span>
       </div>
       <CustomButton
-        :is-disabled="isPixValid == false"
-        :text="'Enviar para a rede'"
-        @button-clicked="emit('pixValidated', e2eId)"
+        :is-disabled="releaseSignature === ''"
+        :text="
+          releaseSignature ? 'Enviar para a rede' : 'Validando pagamento...'
+        "
+        @button-clicked="
+          emit('pixValidated', { pixTimestamp, signature: releaseSignature })
+        "
       />
     </div>
     <CustomModal
-      v-if="showWarnModal && windowSize <= 500"
+      v-if="showWarnModal"
       @close-modal="showWarnModal = false"
       :isRedirectModal="false"
     />
@@ -186,6 +232,7 @@ h2 {
 }
 
 input[type="number"] {
+  appearance: textfield;
   -moz-appearance: textfield;
 }
 

src/components/SearchComponent.vue

@@ -1,21 +1,20 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
+import { useUser } from "@/composables/useUser";
+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 user = useUser();
 const selectTokenToggle = ref<boolean>(false);
 
 const {
@@ -24,7 +23,7 @@ const {
   selectedToken,
   depositsValidList,
   loadingNetworkLiquidity,
-} = storeToRefs(etherStore);
+} = user;
 
 // html references
 const tokenDropdownRef = ref<any>(null);
@@ -34,11 +33,12 @@ const tokenValue = ref<number>(0);
 const enableConfirmButton = ref<boolean>(false);
 const hasLiquidity = ref<boolean>(true);
 const validDecimals = ref<boolean>(true);
+const identification = ref<string>("");
 const selectedDeposits = ref<ValidDeposit[]>();
 
 import ChevronDown from "@/assets/chevronDown.svg";
 import { useOnboard } from "@web3-onboard/vue";
-import { getPixKey } from "@/blockchain/events";
+import { getParticipantID } from "@/blockchain/events";
 
 // Emits
 const emit = defineEmits(["tokenBuy"]);
@@ -51,10 +51,10 @@ const connectAccount = async (): Promise<void> => {
 
 const emitConfirmButton = async (): Promise<void> => {
   const deposit = selectedDeposits.value?.find(
-    (d) => d.network === networkName.value
+    (d) => d.network === Number(networkName.value)
   );
   if (!deposit) return;
-  deposit.pixKey = await getPixKey(deposit.seller, deposit.token);
+  deposit.participantID = await getParticipantID(deposit.seller, deposit.token);
   emit("tokenBuy", deposit, tokenValue.value);
 };
 
@@ -83,30 +83,39 @@ onClickOutside(tokenDropdownRef, () => {
 });
 
 const handleSelectedToken = (token: TokenEnum): void => {
-  etherStore.setSelectedToken(token);
+  user.setSelectedToken(token);
   selectTokenToggle.value = false;
 };
 
 // Verify if there is a valid deposit to buy
 const verifyLiquidity = (): void => {
   enableConfirmButton.value = false;
+  if (!walletAddress.value)
+    return;
   const selDeposits = verifyNetworkLiquidity(
     tokenValue.value,
     walletAddress.value,
     depositsValidList.value
   );
-
   selectedDeposits.value = selDeposits;
   hasLiquidity.value = !!selDeposits.find(
-    (d) => d.network === networkName.value
+    (d) => d.network === Number(networkName.value)
   );
   enableOrDisableConfirmButton();
 };
 
 const enableOrDisableConfirmButton = (): void => {
-  enableConfirmButton.value =
-    !!selectedDeposits.value &&
-    !!selectedDeposits.value.find((d) => d.network === networkName.value);
+  if (!selectedDeposits.value) {
+    enableConfirmButton.value = false;
+    return;
+  }
+
+  if (!selectedDeposits.value.find((d) => d.network === networkName.value)) {
+    enableConfirmButton.value = false;
+    return;
+  }
+
+  enableConfirmButton.value = true;
 };
 
 watch(networkName, (): void => {
@@ -117,6 +126,16 @@ watch(networkName, (): void => {
 watch(walletAddress, (): void => {
   verifyLiquidity();
 });
+
+// Add form submission handler
+const handleSubmit = async (e: Event): Promise<void> => {
+  e.preventDefault();
+  if (walletAddress.value) {
+    await emitConfirmButton();
+  } else {
+    await connectAccount();
+  }
+};
 </script>
 
 <template>
@@ -132,7 +151,7 @@ watch(walletAddress, (): void => {
         tokens após realizar o Pix</span
       >
     </div>
-    <div class="main-container">
+    <form class="main-container" @submit="handleSubmit">
       <div class="backdrop-blur -z-10 w-full h-full"></div>
       <div
         class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
@@ -140,14 +159,16 @@ watch(walletAddress, (): void => {
         <div class="flex justify-between sm:w-full items-center">
           <input
             type="number"
+            name="tokenAmount"
             class="border-none outline-none text-lg text-gray-900"
             v-bind:class="{
               'font-semibold': tokenValue != undefined,
               'text-xl': tokenValue != undefined,
             }"
             @input="debounce(handleInputEvent, 500)($event)"
-            placeholder="0  "
+            placeholder="0"
             step=".01"
+            required
           />
           <div class="relative overflow-visible">
             <button
@@ -252,7 +273,9 @@ watch(walletAddress, (): void => {
         </div>
         <div
           class="flex justify-center"
-          v-else-if="!hasLiquidity && !loadingNetworkLiquidity"
+          v-else-if="
+            !hasLiquidity && !loadingNetworkLiquidity && tokenValue > 0
+          "
         >
           <span class="text-red-500 font-normal text-sm"
             >Atualmente não há liquidez nas rede selecionada para sua
@@ -260,18 +283,33 @@ watch(walletAddress, (): void => {
           >
         </div>
       </div>
-      <CustomButton
-        v-if="!walletAddress"
-        :text="'Conectar carteira'"
-        @buttonClicked="connectAccount()"
-      />
+
+      <div
+        class="flex flex-col w-full bg-white sm:px-10 px-6 py-4 rounded-lg border-y-10"
+      >
+        <input
+          type="text"
+          v-model="identification"
+          maxlength="14"
+          :pattern="'^\\d{11}$|^\\d{14}$'"
+          class="border-none outline-none sm:text-lg text-sm text-gray-900 w-full"
+          placeholder="Digite seu CPF ou CNPJ (somente números)"
+          required
+        />
+      </div>
+
+      <!-- Action buttons -->
       <CustomButton
         v-if="walletAddress"
-        :text="'Confirmar compra'"
-        :is-disabled="!enableConfirmButton"
-        @buttonClicked="emitConfirmButton()"
+        type="submit"
+        text="Confirmar Oferta"
       />
-    </div>
+      <CustomButton
+        v-else
+        text="Conectar carteira"
+        @buttonClicked="connectAccount()"
+      />
+    </form>
   </div>
 </template>
 
@@ -306,4 +344,10 @@ input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
 }
+
+.custom-button {
+  @apply w-full py-3 px-6 rounded-lg font-semibold text-white bg-indigo-600 
+         hover:bg-indigo-700 disabled:bg-gray-400 disabled:cursor-not-allowed
+         transition-colors duration-200;
+}
 </style>

src/components/SellerSteps/SellerComponent.vue

@@ -0,0 +1,343 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useUser } from "@/composables/useUser";
+import CustomButton from "@/components/CustomButton/CustomButton.vue";
+import { postProcessKey } from "@/utils/pixKeyFormat";
+import { TokenEnum } from "@/model/NetworkEnum";
+import { getTokenImage } from "@/utils/imagesPath";
+import { useOnboard } from "@web3-onboard/vue";
+import ChevronDown from "@/assets/chevron.svg";
+
+// Import the bank list
+import bankList from "@/utils/files/isbpList.json";
+import type { Participant } from "@/utils/bbPay";
+
+// Define Bank interface
+interface Bank {
+  ISPB: string;
+  longName: string;
+}
+
+// html references
+const tokenDropdownRef = ref<any>(null);
+const formRef = ref<HTMLFormElement | null>(null);
+
+// Reactive state
+const user = useUser();
+const { walletAddress, selectedToken } = user;
+
+const offer = ref<string>("");
+const identification = ref<string>("");
+const account = ref<string>("");
+const branch = ref<string>("");
+const accountType = ref<string>("");
+const selectTokenToggle = ref<boolean>(false);
+const savingsVariation = ref<string>("");
+const errors = ref<{ [key: string]: string }>({});
+
+// Bank selection
+const bankSearchQuery = ref<string>("");
+const showBankList = ref<boolean>(false);
+const selectedBank = ref<Bank | null>(null);
+
+const filteredBanks = computed(() => {
+  if (!bankSearchQuery.value) return [];
+  return bankList
+    .filter((bank) =>
+      bank.longName.toLowerCase().includes(bankSearchQuery.value.toLowerCase())
+    )
+    .slice(0, 5);
+});
+
+const handleBankSelect = (bank: Bank) => {
+  selectedBank.value = bank;
+  bankSearchQuery.value = bank.longName;
+  showBankList.value = false;
+};
+
+// Emits
+const emit = defineEmits(["approveTokens"]);
+
+// Methods
+const connectAccount = async (): Promise<void> => {
+  const { connectWallet } = useOnboard();
+  await connectWallet();
+};
+
+const handleSubmit = (e: Event): void => {
+  e.preventDefault();
+
+  const processedIdentification = postProcessKey(identification.value);
+
+  const data: Participant = {
+    offer: offer.value,
+    chainID: user.networkId.value,
+    identification: processedIdentification,
+    bankIspb: selectedBank.value?.ISPB,
+    accountType: accountType.value,
+    account: account.value,
+    branch: branch.value,
+    savingsVariation: savingsVariation.value || "",
+  };
+
+  emit("approveTokens", data);
+};
+
+// Token selection
+const openTokenSelection = (): void => {
+  selectTokenToggle.value = true;
+};
+
+const handleSelectedToken = (token: TokenEnum): void => {
+  user.setSelectedToken(token);
+  selectTokenToggle.value = false;
+};
+</script>
+
+<template>
+  <div class="page w-full">
+    <div class="text-container">
+      <span
+        class="text font-extrabold sm:text-5xl text-3xl sm:max-w-[29rem] max-w-[20rem]"
+      >
+        Venda cripto e receba em Pix
+      </span>
+      <span
+        class="text font-medium sm:text-base text-xs sm:max-w-[28rem] max-w-[30rem] sm:tracking-normal tracking-wide"
+      >
+        Digite sua oferta, informe a chave Pix, selecione a rede, aprove o envio
+        da transação e confirme sua oferta.
+      </span>
+    </div>
+
+    <form ref="formRef" @submit="handleSubmit" class="main-container">
+      <!-- Offer input -->
+      <div
+        class="flex justify-between items-center w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10 gap-4"
+      >
+        <input
+          type="number"
+          v-model="offer"
+          class="border-none outline-none text-gray-900 sm:w-fit w-3/4 flex-grow"
+          :class="{
+            '!font-medium': offer !== undefined && offer !== '',
+            'text-xl': offer !== undefined && offer !== '',
+          }"
+          min="0.01"
+          max="999999999.99"
+          pattern="\d+(\.\d{0,2})?"
+          placeholder="Digite sua oferta (mínimo R$0,01)"
+          step=".01"
+          required
+        />
+        <div class="relative overflow-visible">
+          <button
+            ref="tokenDropdownRef"
+            class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
+            @click="openTokenSelection()"
+          >
+            <img
+              alt="Token image"
+              class="sm:w-fit w-4"
+              :src="getTokenImage(selectedToken)"
+            />
+            <span
+              class="text-gray-900 sm:text-lg text-md font-medium"
+              id="token"
+            >
+              {{ selectedToken }}
+            </span>
+            <ChevronDown
+              class="text-gray-900 pr-4 sm:pr-0 transition-all duration-500 ease-in-out"
+              :class="{ 'scale-y-[-1]': selectTokenToggle }"
+              alt="Chevron Down"
+            />
+          </button>
+          <transition name="dropdown">
+            <div
+              v-if="selectTokenToggle"
+              class="mt-2 text-gray-900 absolute right-0 z-50 w-full min-w-max"
+            >
+              <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)"
+                >
+                  <img
+                    :alt="token + ' logo'"
+                    width="20"
+                    height="20"
+                    :src="getTokenImage(token)"
+                  />
+                  <span
+                    class="text-gray-900 py-4 text-end font-semibold text-sm"
+                  >
+                    {{ token }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </transition>
+        </div>
+      </div>
+      <!-- CPF or CNPJ input -->
+      <div
+        class="flex flex-col w-full bg-white sm:px-10 px-6 py-4 rounded-lg border-y-10"
+      >
+        <input
+          type="text"
+          v-model="identification"
+          maxlength="14"
+          :pattern="'^\\d{11}$|^\\d{14}$'"
+          class="border-none outline-none sm:text-lg text-sm text-gray-900 w-full"
+          :class="{ 'text-xl font-medium': identification }"
+          placeholder="Digite seu CPF ou CNPJ (somente números)"
+          required
+        />
+      </div>
+      <!-- Bank selection -->
+      <div
+        class="flex flex-col w-full bg-white sm:px-10 px-6 py-4 rounded-lg border-y-10"
+      >
+        <div class="relative">
+          <input
+            type="text"
+            v-model="bankSearchQuery"
+            class="border-none outline-none sm:text-lg text-sm text-gray-900 w-full"
+            :class="{ 'text-xl font-medium': bankSearchQuery }"
+            placeholder="Buscar banco"
+            @focus="showBankList = true"
+            required
+          />
+          <div
+            v-if="showBankList && filteredBanks.length > 0"
+            class="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-md shadow-lg z-50 max-h-60 overflow-y-auto"
+          >
+            <div
+              v-for="bank in filteredBanks"
+              :key="bank.ISPB"
+              class="px-4 py-2 hover:bg-gray-100 cursor-pointer transition-colors"
+              @click="handleBankSelect(bank)"
+            >
+              <div class="text-sm font-medium text-gray-900">
+                {{ bank.longName }}
+              </div>
+              <div class="text-xs text-gray-500">ISPB: {{ bank.ISPB }}</div>
+            </div>
+          </div>
+        </div>
+        <span v-if="errors.bank" class="text-red-500 text-sm mt-2">{{
+          errors.bank
+        }}</span>
+      </div>
+      <!-- Account and Branch inputs -->
+      <div
+        class="flex flex-col w-full bg-white sm:px-10 px-6 py-4 rounded-lg border-y-10"
+      >
+        <div class="flex gap-4">
+          <div class="flex-1">
+            <input
+              type="text"
+              v-model="account"
+              class="border-none outline-none sm:text-lg text-sm text-gray-900 w-full"
+              :class="{ 'text-xl font-medium': account }"
+              placeholder="Número da conta"
+              required
+            />
+          </div>
+          <div class="flex-1">
+            <input
+              type="text"
+              v-model="branch"
+              class="border-none outline-none sm:text-lg text-sm text-gray-900 w-full"
+              :class="{ 'text-xl font-medium': branch }"
+              placeholder="Agência"
+              required
+            />
+          </div>
+        </div>
+      </div>
+      <!-- Account Type Selection -->
+      <div
+        class="flex flex-col w-full bg-white sm:px-10 px-6 py-4 rounded-lg border-y-10"
+      >
+        <div class="flex gap-4">
+          <div class="flex-1">
+            <select
+              v-model="accountType"
+              class="border-none outline-none sm:text-lg text-sm text-gray-900 w-full"
+              required
+            >
+              <option value="" disabled selected>Tipo de conta</option>
+              <option value="1">Conta Corrente</option>
+              <option value="2">Conta Poupança</option>
+              <option value="3">Conta Salário</option>
+              <option value="4">Conta Pré-Paga</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <!-- Savings Account Variation -->
+      <Transition name="resize">
+        <input
+          v-if="accountType === '2'"
+          type="text"
+          v-model="savingsVariation"
+          class="border-none outline-none sm:text-lg text-sm text-gray-900 w-full bg-white sm:px-10 px-6 py-4 rounded-lg border-y-10"
+          :class="{ 'text-xl font-medium': savingsVariation }"
+          placeholder="Variação da poupança"
+          required
+        />
+      </Transition>
+      <!-- Action buttons -->
+      <CustomButton v-if="walletAddress" type="submit" text="Aprovar tokens" />
+      <CustomButton
+        v-else
+        text="Conectar carteira"
+        @buttonClicked="connectAccount()"
+      />
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.custom-divide {
+  width: 100%;
+  border-bottom: 1px solid #d1d5db;
+}
+.bottom-position {
+  top: -20px;
+  right: 50%;
+  transform: translateX(50%);
+}
+
+.page {
+  @apply flex flex-col items-center justify-center w-full mt-16;
+}
+
+.text-container {
+  @apply flex flex-col items-center justify-center gap-4;
+}
+
+.text {
+  @apply text-white text-center;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+
+input {
+  @apply sm:text-lg text-sm;
+}
+</style>

src/components/SellerSteps/SellerSearchComponent.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useUser } from "@/composables/useUser";
 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 user = useUser();
+const { walletAddress } = user;
 
 // Reactive state
 const tokenValue = ref<number>(0);
@@ -76,10 +74,10 @@ const handleInputEvent = (event: any): void => {
             <img
               alt="Token image"
               class="w-fit"
-              :src="getTokenImage(etherStore.selectedToken)"
+              :src="getTokenImage(user.selectedToken.value)"
             />
             <span class="text-gray-900 text-lg w-fit" id="token">{{
-              etherStore.selectedToken
+              user.selectedToken
             }}</span>
           </div>
         </div>
@@ -153,10 +151,6 @@ const handleInputEvent = (event: any): void => {
   @apply text-white text-center;
 }
 
-input[type="number"] {
-  -moz-appearance: textfield;
-}
-
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;

src/components/SellerSteps/SendNetwork.vue

@@ -6,7 +6,7 @@ const emit = defineEmits(["sendNetwork"]);
 
 // props and store references
 const props = defineProps({
-  pixKey: String,
+  sellerId: String,
   offer: Number,
   selectedToken: String,
 });
@@ -26,7 +26,7 @@ const props = defineProps({
         os tokens de volta.</span
       >
     </div>
-    <div class="main-container sm:w-1/3">
+    <div class="main-container">
       <div
         class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
       >
@@ -39,7 +39,7 @@ const props = defineProps({
         <div class="my-3">
           <p>Chave Pix</p>
           <p class="text-xl text-gray-900 break-words">
-            {{ props.pixKey }}
+            {{ props.sellerId }}
           </p>
         </div>
         <div class="mb-5">
@@ -79,10 +79,6 @@ p {
   @apply font-medium text-base;
 }
 
-input[type="number"] {
-  -moz-appearance: textfield;
-}
-
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;

src/components/SellerSteps/WantSellComponent.vue

@@ -1,263 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import CustomButton from "../CustomButton/CustomButton.vue";
-import { debounce } from "@/utils/debounce";
-import { decimalCount } from "@/utils/decimalCount";
-import { pixFormatValidation, postProcessKey } from "@/utils/pixKeyFormat";
-import { useEtherStore } from "@/store/ether";
-import { storeToRefs } from "pinia";
-import { connectProvider } from "@/blockchain/provider";
-import { TokenEnum } from "@/model/NetworkEnum";
-import { getTokenImage } from "@/utils/imagesPath";
-import { onClickOutside } from "@vueuse/core";
-import { useOnboard } from "@web3-onboard/vue";
-
-import ChevronDown from "@/assets/chevron.svg";
-
-// html references
-const tokenDropdownRef = ref<any>(null);
-
-// Reactive state
-const etherStore = useEtherStore();
-const { walletAddress, selectedToken } = storeToRefs(etherStore);
-
-const offer = ref<string>("");
-const pixKey = ref<string>("");
-const selectTokenToggle = ref<boolean>(false);
-
-const enableSelectButton = ref<boolean>(false);
-const hasLiquidity = ref<boolean>(true);
-const validDecimals = ref<boolean>(true);
-const validPixFormat = ref<boolean>(true);
-
-// Emits
-const emit = defineEmits(["approveTokens"]);
-
-// Blockchain methods
-const connectAccount = async (): Promise<void> => {
-  const { connectWallet } = useOnboard();
-  await connectWallet();
-};
-
-// Debounce methods
-const handleInputEvent = (event: any): void => {
-  const { value } = event.target;
-
-  offer.value = value;
-
-  if (decimalCount(offer.value) > 2) {
-    validDecimals.value = false;
-    enableSelectButton.value = false;
-    return;
-  }
-  validDecimals.value = true;
-};
-
-const handlePixKeyInputEvent = (event: any): void => {
-  const { value } = event.target;
-
-  pixKey.value = value;
-
-  if (pixFormatValidation(pixKey.value)) {
-    validPixFormat.value = true;
-    enableSelectButton.value = true;
-    return;
-  }
-
-  enableSelectButton.value = false;
-  validPixFormat.value = false;
-};
-
-const openTokenSelection = (): void => {
-  selectTokenToggle.value = true;
-};
-
-onClickOutside(tokenDropdownRef, () => {
-  selectTokenToggle.value = false;
-});
-
-const handleSelectedToken = (token: TokenEnum): void => {
-  etherStore.setSelectedToken(token);
-  selectTokenToggle.value = false;
-};
-
-const handleSellClick = async (
-  offer: string,
-  pixKey: string
-): Promise<void> => {
-  const postProcessedPixKey = postProcessKey(pixKey);
-  emit("approveTokens", { offer, postProcessedPixKey });
-};
-</script>
-
-<template>
-  <div class="page w-full">
-    <div class="text-container">
-      <span
-        class="text font-extrabold sm:text-5xl text-3xl sm:max-w-[29rem] max-w-[20rem]"
-        >Venda cripto e receba em Pix</span
-      >
-      <span
-        class="text font-medium sm:text-base text-xs sm:max-w-[28rem] max-w-[30rem] sm:tracking-normal tracking-wide"
-        >Digite sua oferta, informe a chave Pix, selecione a rede, aprove o
-        envio da transação e confirme sua oferta.</span
-      >
-    </div>
-    <div class="main-container">
-      <div class="backdrop-blur -z-10 w-full h-full"></div>
-      <div
-        class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
-      >
-        <div class="flex justify-between items-center">
-          <input
-            type="number"
-            v-model="offer"
-            class="border-none outline-none text-gray-900 sm:w-fit w-3/4"
-            :class="{
-              '!font-medium': offer !== undefined && offer !== '',
-              'text-xl': offer !== undefined && offer !== '',
-            }"
-            @input="debounce(handleInputEvent, 500)($event)"
-            placeholder="Digite sua oferta"
-            step=".01"
-          />
-          <div class="relative overflow-visible">
-            <button
-              ref="tokenDropdownRef"
-              class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
-              @click="openTokenSelection()"
-            >
-              <img
-                alt="Token image"
-                class="sm:w-fit w-4"
-                :src="getTokenImage(selectedToken)"
-              />
-              <span
-                class="text-gray-900 sm:text-lg text-md font-medium"
-                id="token"
-              >
-                {{ selectedToken }}
-              </span>
-              <ChevronDown
-                class="text-gray-900 pr-4 sm:pr-0 transition-all duration-500 ease-in-out"
-                :class="{ 'scale-y-[-1]': selectTokenToggle }"
-                alt="Chevron Down"
-              />
-            </button>
-            <transition name="dropdown">
-              <div
-                v-if="selectTokenToggle"
-                class="mt-2 text-gray-900 absolute right-0 z-50 w-full min-w-max"
-              >
-                <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)"
-                  >
-                    <img
-                      :alt="token + ' logo'"
-                      width="20"
-                      height="20"
-                      :src="getTokenImage(token)"
-                    />
-                    <span
-                      class="text-gray-900 py-4 text-end font-semibold text-sm"
-                    >
-                      {{ token }}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </transition>
-          </div>
-        </div>
-
-        <div class="flex pt-2 justify-center" v-if="!validDecimals">
-          <span class="text-red-500 font-normal text-sm"
-            >Por favor utilize no máximo 2 casas decimais</span
-          >
-        </div>
-        <div class="flex pt-2 justify-center" v-else-if="!hasLiquidity">
-          <span class="text-red-500 font-normal text-sm"
-            >Atualmente não há liquidez nas redes para sua demanda</span
-          >
-        </div>
-      </div>
-      <div
-        class="flex flex-col w-full bg-white sm:px-10 px-6 py-8 rounded-lg border-y-10"
-      >
-        <div class="flex justify-between w-full items-center">
-          <input
-            @input="debounce(handlePixKeyInputEvent, 500)($event)"
-            type="text"
-            v-model="pixKey"
-            class="border-none outline-none sm:text-lg text-sm text-gray-900 w-fit"
-            :class="{
-              '!font-medium': pixKey !== undefined && pixKey !== '',
-              'text-xl': pixKey !== undefined && pixKey !== '',
-            }"
-            placeholder="Digite a chave Pix"
-          />
-        </div>
-        <div class="flex pt-2 justify-center" v-if="!validPixFormat">
-          <span class="text-red-500 font-normal text-sm"
-            >Por favor utilize telefone, CPF ou CNPJ</span
-          >
-        </div>
-      </div>
-      <CustomButton
-        v-if="walletAddress"
-        :text="'Aprovar tokens'"
-        :isDisabled="!validDecimals || !validPixFormat"
-        @buttonClicked="handleSellClick(offer, pixKey)"
-      />
-      <CustomButton
-        v-if="!walletAddress"
-        :text="'Conectar carteira'"
-        @buttonClicked="connectAccount()"
-      />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.custom-divide {
-  width: 100%;
-  border-bottom: 1px solid #d1d5db;
-}
-.bottom-position {
-  top: -20px;
-  right: 50%;
-  transform: translateX(50%);
-}
-
-.page {
-  @apply flex flex-col items-center justify-center w-full mt-16;
-}
-
-.text-container {
-  @apply flex flex-col items-center justify-center gap-4;
-}
-
-.text {
-  @apply text-white text-center;
-}
-
-input[type="number"] {
-  -moz-appearance: textfield;
-  appearance: textfield;
-}
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-}
-
-input {
-  @apply sm:text-lg text-sm;
-}
-</style>

src/components/ToasterComponent.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from "vue";
+import { useOnboard } from "@web3-onboard/vue";
+import { Networks } from "../model/Networks";
+import { useUser } from "@/composables/useUser";
+
+const { connectedWallet } = useOnboard();
+const user = useUser();
+const { networkId, networkName } = user;
+
+const isWrongNetwork = ref(false);
+const targetNetworkName = computed(() => Networks[networkName.value].chainName);
+
+const checkNetwork = () => {
+  if (connectedWallet.value) {
+    const chainId = connectedWallet.value.chains[0].id;
+    isWrongNetwork.value = Number(chainId) !== networkId.value;
+  } else {
+    isWrongNetwork.value = false; // No wallet connected yet
+  }
+};
+
+const switchNetwork = async () => {
+  try {
+    if (connectedWallet.value && connectedWallet.value.provider) {
+      await connectedWallet.value.provider.request({
+        method: "wallet_switchEthereumChain",
+        params: [
+          {
+            chainId: Networks[networkName.value].chainId,
+          },
+        ],
+      });
+    }
+  } catch (error) {
+    console.error("Failed to switch network:", error);
+  }
+};
+
+onMounted(checkNetwork);
+watch(connectedWallet, checkNetwork);
+watch(networkId, checkNetwork, { immediate: true });
+</script>
+
+<template>
+  <transition name="slide-up" appear>
+    <div
+      v-if="isWrongNetwork"
+      class="fixed bottom-0 left-0 right-0 bg-red-500 text-white p-4 flex justify-between items-center z-50"
+    >
+      <div>
+        <span class="font-bold">Wrong network!</span>
+        <span> Please switch to {{ targetNetworkName }}.</span>
+      </div>
+      <button
+        @click="switchNetwork"
+        class="bg-white text-red-500 px-4 py-2 rounded font-bold hover:bg-gray-100 transition-colors"
+      >
+        Switch Network
+      </button>
+    </div>
+  </transition>
+</template>
+
+<style scoped>
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.slide-up-enter-to,
+.slide-up-leave-from {
+  transform: translateY(0);
+  opacity: 1;
+}
+</style>

src/components/TopBar/TopBar.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { storeToRefs } from "pinia";
-import { useEtherStore } from "@/store/ether";
 import { ref, watch } from "vue";
+import { useUser } from "@/composables/useUser";
 import { onClickOutside } from "@vueuse/core";
 import { NetworkEnum } from "@/model/NetworkEnum";
 import { getNetworkImage } from "@/utils/imagesPath";
@@ -15,10 +14,9 @@ import LinkedinIcon from "@/assets/linkedinIcon.svg";
 import GithubIcon from "@/assets/githubIcon.svg";
 import { connectProvider } from "@/blockchain/provider";
 
-// Store reference
-const etherStore = useEtherStore();
-
-const { walletAddress, sellerView } = storeToRefs(etherStore);
+// Use the new composable
+const user = useUser();
+const { walletAddress, sellerView, networkId } = user;
 
 const menuOpenToggle = ref<boolean>(false);
 const infoMenuOpenToggle = ref<boolean>(false);
@@ -38,14 +36,29 @@ 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());
+  user.setWalletAddress(addresses.shift());
 });
 
 watch(connectedChain, (newVal: any) => {
-  etherStore.setNetworkId(newVal?.id);
+  // Check if connected chain is valid, otherwise default to Sepolia (NetworkEnum.SEPOLIA)
+  if (
+    !newVal ||
+    !Object.values(Networks).some(
+      (network) => Number(network.chainId) === Number(newVal.id)
+    )
+  ) {
+    console.log(
+      "Invalid or unsupported network detected, defaulting to Sepolia"
+    );
+    user.setNetworkId(user.networkId.value);
+    return;
+  }
+  user.setNetworkId(newVal?.id);
 });
 
 const formatWalletAddress = (): string => {
+  if (!walletAddress.value)
+    throw new Error("Wallet not connected");
   const walletAddressLength = walletAddress.value.length;
   const initialText = walletAddress.value.substring(0, 5);
   const finalText = walletAddress.value.substring(
@@ -56,7 +69,7 @@ const formatWalletAddress = (): string => {
 };
 
 const disconnectUser = async (): Promise<void> => {
-  etherStore.setWalletAddress("");
+  user.setWalletAddress(null);
   await disconnectWallet({ label: connectedWallet.value?.label || "" });
   closeMenu();
 };
@@ -72,7 +85,7 @@ const networkChange = async (network: NetworkEnum): Promise<void> => {
       chainId: Networks[network].chainId,
       wallet: connectedWallet.value?.label || "",
     });
-    etherStore.setNetworkId(network);
+    user.setNetworkId(network);
   } catch (error) {
     console.log("Error changing network", error);
   }
@@ -245,7 +258,7 @@ onClickOutside(infoMenuRef, () => {
         >
           <img
             alt="Choosed network image"
-            :src="getNetworkImage(NetworkEnum[etherStore.networkName])"
+            :src="getNetworkImage(NetworkEnum[user.networkName.value])"
             height="24"
             width="24"
           />
@@ -253,7 +266,11 @@ 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[user.networkName.value]
+                ? Networks[user.networkName.value].chainName
+                : "Invalid Chain"
+            }}
           </span>
           <div
             class="transition-all duration-500 ease-in-out mt-1"

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

@@ -1,35 +0,0 @@
-/* eslint-disable no-undef */
-import { shallowMount } from "@vue/test-utils";
-import TopBar from "../TopBar.vue";
-import { useEtherStore } from "../../../store/ether";
-
-import { createPinia, setActivePinia } from "pinia";
-
-describe("TopBar.vue", () => {
-  beforeEach(() => {
-    setActivePinia(createPinia());
-  });
-
-  it("should render connect wallet button", () => {
-    const wrapper = shallowMount(TopBar);
-    expect(wrapper.html()).toContain("Conectar carteira");
-  });
-
-  it("should render button to change to seller view when in buyer screen", () => {
-    const wrapper = shallowMount(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);
-    expect(wrapper.html()).toContain("Quero comprar");
-  });
-
-  it("should render the P2Pix logo correctly", () => {
-    const wrapper = shallowMount(TopBar);
-    const img = wrapper.findAll(".logo");
-    expect(img.length).toBe(2);
-  });
-});

src/composables/useUser.ts

@@ -0,0 +1,106 @@
+import { ref } from "vue";
+import { NetworkEnum, TokenEnum } from "../model/NetworkEnum";
+import type { ValidDeposit } from "@/model/ValidDeposit";
+import type { Participant } from "../utils/bbPay";
+import { NetworkById } from "@/model/Networks";
+import type { Address } from "viem"
+
+const walletAddress = ref<Address | null>(null);
+const balance = ref("");
+const networkId = ref(11155111);
+const networkName = ref(NetworkEnum.sepolia);
+const selectedToken = ref(TokenEnum.BRZ);
+const loadingLock = ref(false);
+const sellerView = ref(false);
+const depositsValidList = ref<ValidDeposit[]>([]);
+const loadingWalletTransactions = ref(false);
+const loadingNetworkLiquidity = ref(false);
+const seller = ref<Participant>({} as Participant);
+const sellerId = ref("");
+
+export function useUser() {
+  // Actions become regular functions
+  const setWalletAddress = (address: Address | null) => {
+    walletAddress.value = address;
+  };
+
+  const setBalance = (newBalance: string) => {
+    balance.value = newBalance;
+  };
+
+  const setSelectedToken = (token: TokenEnum) => {
+    selectedToken.value = token;
+  };
+
+  const setNetworkId = (network: string | number) => {
+    networkName.value = NetworkById(network) || NetworkEnum.sepolia;
+    networkId.value = Number(network);
+  };
+
+  const setLoadingLock = (isLoading: boolean) => {
+    loadingLock.value = isLoading;
+  };
+
+  const setSellerView = (view: boolean) => {
+    sellerView.value = view;
+  };
+
+  const setDepositsValidList = (deposits: ValidDeposit[]) => {
+    depositsValidList.value = deposits;
+  };
+
+  const setLoadingWalletTransactions = (isLoading: boolean) => {
+    loadingWalletTransactions.value = isLoading;
+  };
+
+  const setLoadingNetworkLiquidity = (isLoading: boolean) => {
+    loadingNetworkLiquidity.value = isLoading;
+  };
+
+  const setSeller = (newSeller: Participant) => {
+    seller.value = newSeller;
+  };
+
+  const setSellerId = (id: string) => {
+    sellerId.value = id;
+  };
+
+  // Getters become computed or regular functions
+  const getValidDepositByWalletAddress = (address: string) => {
+    return depositsValidList.value
+      .filter((deposit) => deposit.seller == address)
+      .sort((a, b) => b.blockNumber - a.blockNumber);
+  };
+
+  return {
+    // State
+    walletAddress,
+    balance,
+    networkId,
+    networkName,
+    selectedToken,
+    loadingLock,
+    sellerView,
+    depositsValidList,
+    loadingWalletTransactions,
+    loadingNetworkLiquidity,
+    seller,
+    sellerId,
+
+    // Actions
+    setWalletAddress,
+    setBalance,
+    setSelectedToken,
+    setNetworkId,
+    setLoadingLock,
+    setSellerView,
+    setDepositsValidList,
+    setLoadingWalletTransactions,
+    setLoadingNetworkLiquidity,
+    setSeller,
+    setSellerId,
+
+    // Getters
+    getValidDepositByWalletAddress,
+  };
+}

src/main.ts

@@ -1,7 +1,6 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
-import { createPinia } from "pinia";
 
 import "./assets/main.css";
 import "./assets/transitions.css";
@@ -9,6 +8,5 @@ import "./assets/transitions.css";
 const app = createApp(App);
 
 app.use(router);
-app.use(createPinia());
 
 app.mount("#app");

src/model/Bank.ts

@@ -0,0 +1,5 @@
+export interface Bank {
+  COMPE: string;
+  ISPB: string;
+  longName: string;
+}

src/model/LockStatus.ts

@@ -0,0 +1,8 @@
+import type { Address } from "viem";
+
+export enum LockStatus { // from DataTypes.sol
+  Inexistent = 0, // Uninitialized Lock
+  Active = 1,     // Valid Lock
+  Expired = 2,    // Expired Lock
+  Released = 3    // Already released Lock
+}

src/model/NetworkEnum.ts

@@ -3,6 +3,15 @@ export enum NetworkEnum {
   rootstock = 31,
 }
 
+export const getNetworkSubgraphURL = (network: NetworkEnum) => {
+  const networkMap: Record<NetworkEnum, string> = {
+    [NetworkEnum.sepolia]: import.meta.env.VITE_SEPOLIA_SUBGRAPH_URL || "",
+    [NetworkEnum.rootstock]: import.meta.env.VITE_RSK_SUBGRAPH_URL || "",
+  };
+
+  return networkMap[network] || "";
+};
+
 export enum TokenEnum {
   BRZ = "BRZ",
   // BRX = 'BRX'

src/model/Networks.ts

@@ -1,5 +1,20 @@
 import { NetworkEnum } from "@/model/NetworkEnum";
 
+export const NetworkById = (
+  chainId: string | number
+): NetworkEnum | undefined => {
+  const normalizedChainId =
+    typeof chainId === "number" ? chainId : Number(chainId);
+
+  for (const [network, details] of Object.entries(Networks)) {
+    if (Number(details.chainId) === normalizedChainId) {
+      return network as unknown as NetworkEnum;
+    }
+  }
+
+  return undefined;
+};
+
 export const Networks = {
   [NetworkEnum.sepolia]: {
     chainId: "0xAA36A7",

src/model/Pix.ts

@@ -1,11 +1,11 @@
 export type Pix = {
-  pixKey: string;
-  merchantCity?: string;
-  merchantName?: string;
-  value?: number;
-  transactionId?: string;
-  message?: string;
-  cep?: string;
-  currency?: number;
-  countryCode?: string;
+    pixKey: string;
+    merchantCity?: string;
+    merchantName?: string;
+    value?: number;
+    transactionId?: string;
+    message?: string;
+    cep?: string;
+    currency?: number;
+    countryCode?: string;
 };

src/model/UnreleasedLock.ts

@@ -1,6 +1,8 @@
-import type { Pix } from "./Pix";
+import { Address } from "viem";
 
 export type UnreleasedLock = {
-  lockID: string;
-  pix: Pix;
+  lockID: bigint;
+  sellerAddress: Address;
+  tokenAddress: Address;
+  amount: number;
 };

src/model/ValidDeposit.ts

@@ -1,11 +1,12 @@
 import { NetworkEnum } from "./NetworkEnum";
+import type { Address } from "viem";
 
 export type ValidDeposit = {
-  token: string;
+  token: Address;
   blockNumber: number;
   remaining: number;
-  seller: string;
-  pixKey: string;
+  seller: Address;
+  participantID: string;
   network: NetworkEnum;
   open?: boolean;
 };

src/model/WalletTransaction.ts

@@ -1,11 +1,14 @@
+import type { LockStatus } from "@/model/LockStatus"
+import type { Address } from "viem"
+
 export type WalletTransaction = {
-  token: string;
+  token?: Address;
   blockNumber: number;
   amount: number;
   seller: string;
   buyer: string;
   event: string;
-  lockStatus: number;
+  lockStatus?: LockStatus;
   transactionHash: string;
   transactionID?: string;
 };

src/model/mock/EventMock.ts

@@ -1,121 +0,0 @@
-import type { Event } from "ethers";
-import { vi } from "vitest";
-
-export const MockEvents: Event[] = [
-  {
-    blockNumber: 1,
-    blockHash: "0x8",
-    transactionIndex: 1,
-    removed: false,
-    address: "0x0",
-    data: "0x0",
-    topics: ["0x0", "0x0"],
-    transactionHash: "0x0",
-    logIndex: 1,
-    event: "DepositAdded",
-    eventSignature: "DepositAdded(address,uint256,address,uint256)",
-    args: [
-      "0x0",
-      {
-        type: "BigNumber",
-        hex: "0x00",
-      },
-      "0x0",
-      {
-        type: "BigNumber",
-        hex: "0x6c6b935b8bbd400000",
-      },
-    ],
-    getBlock: vi.fn(),
-    removeListener: vi.fn(),
-    getTransaction: vi.fn(),
-    getTransactionReceipt: vi.fn(),
-  },
-  {
-    blockNumber: 2,
-    blockHash: "0x8",
-    transactionIndex: 2,
-    removed: false,
-    address: "0x0",
-    data: "0x0",
-    topics: ["0x0", "0x0"],
-    transactionHash: "0x0",
-    logIndex: 2,
-    event: "LockAdded",
-    eventSignature: "LockAdded(address,uint256,address,uint256)",
-    args: [
-      "0x0",
-      {
-        type: "BigNumber",
-        hex: "0x00",
-      },
-      "0x0",
-      {
-        type: "BigNumber",
-        hex: "0x6c6b935b8bbd400000",
-      },
-    ],
-    getBlock: vi.fn(),
-    removeListener: vi.fn(),
-    getTransaction: vi.fn(),
-    getTransactionReceipt: vi.fn(),
-  },
-  {
-    blockNumber: 3,
-    blockHash: "0x8",
-    transactionIndex: 3,
-    removed: false,
-    address: "0x0",
-    data: "0x0",
-    topics: ["0x0", "0x0"],
-    transactionHash: "0x0",
-    logIndex: 3,
-    event: "LockReleased",
-    eventSignature: "LockReleased(address,uint256,address,uint256)",
-    args: [
-      "0x0",
-      {
-        type: "BigNumber",
-        hex: "0x00",
-      },
-      "0x0",
-      {
-        type: "BigNumber",
-        hex: "0x6c6b935b8bbd400000",
-      },
-    ],
-    getBlock: vi.fn(),
-    removeListener: vi.fn(),
-    getTransaction: vi.fn(),
-    getTransactionReceipt: vi.fn(),
-  },
-  {
-    blockNumber: 4,
-    blockHash: "0x8",
-    transactionIndex: 4,
-    removed: false,
-    address: "0x0",
-    data: "0x0",
-    topics: ["0x0", "0x0"],
-    transactionHash: "0x0",
-    logIndex: 4,
-    event: "LockReleased",
-    eventSignature: "LockReleased(address,uint256,address,uint256)",
-    args: [
-      "0x0",
-      {
-        type: "BigNumber",
-        hex: "0x00",
-      },
-      "0x0",
-      {
-        type: "BigNumber",
-        hex: "0x6c6b935b8bbd400000",
-      },
-    ],
-    getBlock: vi.fn(),
-    removeListener: vi.fn(),
-    getTransaction: vi.fn(),
-    getTransactionReceipt: vi.fn(),
-  },
-];

src/model/mock/ValidDepositMock.ts

@@ -1,39 +0,0 @@
-import type { ValidDeposit } from "../ValidDeposit";
-
-export const MockValidDeposits: ValidDeposit[] = [
-  {
-    blockNumber: 1,
-    token: "1",
-    remaining: 70,
-    seller: "mockedSellerAddress",
-    pixKey: "123456789",
-  },
-  {
-    blockNumber: 2,
-    token: "2",
-    remaining: 200,
-    seller: "mockedSellerAddress",
-    pixKey: "123456789",
-  },
-  {
-    blockNumber: 3,
-    token: "3",
-    remaining: 1250,
-    seller: "mockedSellerAddress",
-    pixKey: "123456789",
-  },
-  {
-    blockNumber: 4,
-    token: "4",
-    remaining: 4000,
-    seller: "mockedSellerAddress",
-    pixKey: "123456789",
-  },
-  {
-    blockNumber: 5,
-    token: "5",
-    remaining: 2000,
-    seller: "mockedSellerAddress",
-    pixKey: "123456789",
-  },
-];

src/model/mock/WalletTransactionMock.ts

@@ -1,54 +0,0 @@
-import type { WalletTransaction } from "../WalletTransaction";
-
-export const MockWalletTransactions: WalletTransaction[] = [
-  {
-    blockNumber: 1,
-    token: "1",
-    amount: 70,
-    seller: "mockedSellerAddress",
-    buyer: "mockedBuyerAddress",
-    event: "Deposit",
-    lockStatus: 0,
-    transactionHash: "1",
-  },
-  {
-    blockNumber: 2,
-    token: "2",
-    amount: 200,
-    seller: "mockedSellerAddress",
-    buyer: "mockedBuyerAddress",
-    event: "Lock",
-    lockStatus: 1,
-    transactionHash: "2",
-  },
-  {
-    blockNumber: 3,
-    token: "3",
-    amount: 1250,
-    seller: "mockedSellerAddress",
-    buyer: "mockedBuyerAddress",
-    event: "Release",
-    lockStatus: 2,
-    transactionHash: "3",
-  },
-  {
-    blockNumber: 4,
-    token: "4",
-    amount: 4000,
-    seller: "mockedSellerAddress",
-    buyer: "mockedBuyerAddress",
-    event: "Deposit",
-    lockStatus: 0,
-    transactionHash: "4",
-  },
-  {
-    blockNumber: 5,
-    token: "5",
-    amount: 2000,
-    seller: "mockedSellerAddress",
-    buyer: "mockedBuyerAddress",
-    event: "Deposit",
-    lockStatus: 3,
-    transactionHash: "5",
-  },
-];

src/services/index.ts

@@ -1,14 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import axios from "axios";
-
-const defaultConfig = {
-  "Content-Type": "application/json",
-  "Access-Control-Allow-Origin": "*",
-};
-
-const api = axios.create({
-  ...defaultConfig,
-  baseURL: import.meta.env.VITE_API_URL,
-});
-
-export default api;

src/store/ether.ts

@@ -1,56 +0,0 @@
-import { NetworkEnum, TokenEnum } from "../model/NetworkEnum";
-import type { ValidDeposit } from "@/model/ValidDeposit";
-import { defineStore } from "pinia";
-
-export const useEtherStore = defineStore("ether", {
-  state: () => ({
-    walletAddress: "",
-    balance: "",
-    networkName: NetworkEnum.sepolia,
-    selectedToken: TokenEnum.BRZ,
-    loadingLock: false,
-    sellerView: false,
-    depositsValidList: [] as ValidDeposit[],
-    loadingWalletTransactions: false,
-    loadingNetworkLiquidity: false,
-  }),
-  actions: {
-    setWalletAddress(walletAddress: string) {
-      this.walletAddress = walletAddress;
-    },
-    setBalance(balance: string) {
-      this.balance = balance;
-    },
-    setSelectedToken(token: TokenEnum) {
-      this.selectedToken = token;
-    },
-    setNetworkId(networkName: NetworkEnum) {
-      this.networkName = Number(networkName);
-    },
-    setLoadingLock(isLoadingLock: boolean) {
-      this.loadingLock = isLoadingLock;
-    },
-    setSellerView(sellerView: boolean) {
-      this.sellerView = sellerView;
-    },
-    setDepositsValidList(depositsValidList: ValidDeposit[]) {
-      this.depositsValidList = depositsValidList;
-    },
-    setLoadingWalletTransactions(isLoadingWalletTransactions: boolean) {
-      this.loadingWalletTransactions = isLoadingWalletTransactions;
-    },
-    setLoadingNetworkLiquidity(isLoadingNetworkLiquidity: boolean) {
-      this.loadingNetworkLiquidity = isLoadingNetworkLiquidity;
-    },
-  },
-  getters: {
-    getValidDepositByWalletAddress: (state) => {
-      return (walletAddress: string) =>
-        state.depositsValidList
-          .filter((deposit) => deposit.seller == walletAddress)
-          .sort((a, b) => {
-            return b.blockNumber - a.blockNumber;
-          });
-    },
-  },
-});

src/utils/QrCodePix.ts

@@ -1,76 +0,0 @@
-import qrcode from "qrcode";
-import type { QRCodeToDataURLOptions } from "qrcode";
-import { crc16ccitt } from "crc";
-import type { Pix } from "@/model/Pix";
-
-const pix = ({
-  pixKey,
-  merchantCity = "city",
-  merchantName = "name",
-  value,
-  message,
-  cep,
-  transactionId = "***",
-  currency = 986,
-  countryCode = "BR",
-}: Pix) => {
-  const payloadKeyString = generatePixKey(pixKey, message);
-
-  const payload: string[] = [
-    formatEMV("00", "01"), //Payload Format Indicator
-    formatEMV("26", payloadKeyString), // Merchant Account Information
-    formatEMV("52", "0000"), //Merchant Category Code
-    formatEMV("53", String(currency)), // Transaction Currency
-  ];
-
-  if (String(value) === "0") {
-    value = undefined;
-  }
-  if (value) {
-    payload.push(formatEMV("54", value.toFixed(2)));
-  }
-
-  payload.push(formatEMV("58", countryCode.toUpperCase())); // Country Code
-  payload.push(formatEMV("59", merchantName)); // Merchant Name
-  payload.push(formatEMV("60", merchantCity)); // Merchant City
-
-  if (cep) {
-    payload.push(formatEMV("61", cep)); // Postal Code
-  }
-
-  payload.push(formatEMV("62", formatEMV("05", transactionId))); // Additional Data Field Template
-
-  payload.push("6304");
-
-  const stringPayload = payload.join("");
-  const crcResult = crc16ccitt(stringPayload)
-    .toString(16)
-    .toUpperCase()
-    .padStart(4, "0");
-
-  const payloadPIX = `${stringPayload}${crcResult}`;
-
-  return {
-    payload: (): string => payloadPIX,
-    base64QrCode: (options?: QRCodeToDataURLOptions): Promise<string> =>
-      qrcode.toDataURL(payloadPIX, options),
-  };
-};
-
-const generatePixKey = (pixKey: string, message?: string): string => {
-  const payload: string[] = [
-    formatEMV("00", "BR.GOV.BCB.PIX"),
-    formatEMV("01", pixKey),
-  ];
-  if (message) {
-    payload.push(formatEMV("02", message));
-  }
-  return payload.join("");
-};
-
-const formatEMV = (id: string, param: string): string => {
-  const len = param?.length?.toString().padStart(2, "0");
-  return `${id}${len}${param}`;
-};
-
-export { pix };

src/utils/__tests__/debounce.spec.ts

@@ -1,24 +0,0 @@
-import { it, expect, vi, type Mock } from "vitest";
-import { debounce } from "../debounce";
-
-vi.useFakeTimers();
-
-describe("debounce function test", () => {
-  let mockFunction: Mock;
-  let debounceFunction: Function;
-
-  beforeEach(() => {
-    mockFunction = vi.fn();
-    debounceFunction = debounce(mockFunction, 1000);
-  });
-
-  it("debounce function will be executed just once", () => {
-    for (let i = 0; i < 100; i++) {
-      debounceFunction();
-    }
-
-    vi.runAllTimers();
-
-    expect(mockFunction).toBeCalledTimes(1);
-  });
-});

src/utils/__tests__/decimalCount.spec.ts

@@ -1,12 +0,0 @@
-import { it, expect } from "vitest";
-import { decimalCount } from "../decimalCount";
-
-describe("decimalCount function test", () => {
-  it("decimalCount should return length 1 of decimal", () => {
-    expect(decimalCount("4.1")).toEqual(1);
-  });
-
-  it("decimalCount should return length 0 because no decimal found", () => {
-    expect(decimalCount("5")).toEqual(0);
-  });
-});

src/utils/__tests__/networkLiquidity.spec.ts

@@ -1,25 +0,0 @@
-import { MockValidDeposits } from "@/model/mock/ValidDepositMock";
-import { it, expect, vi } from "vitest";
-import { verifyNetworkLiquidity } from "../networkLiquidity";
-
-vi.useFakeTimers();
-
-describe("verifyNetworkLiquidity function test", () => {
-  it("verifyNetworkLiquidity should return an element from valid deposit list when searching for other deposits", () => {
-    const liquidityElement = verifyNetworkLiquidity(
-      MockValidDeposits[0].remaining,
-      "strangeWalletAddress",
-      MockValidDeposits
-    );
-    expect(liquidityElement).toEqual(MockValidDeposits[0]);
-  });
-
-  it("verifyNetworkLiquidity should return undefined when all deposits on valid deposit list match connected wallet addres", () => {
-    const liquidityElement = verifyNetworkLiquidity(
-      MockValidDeposits[0].remaining,
-      MockValidDeposits[0].seller,
-      [MockValidDeposits[0]]
-    );
-    expect(liquidityElement).toEqual(undefined);
-  });
-});

src/utils/bbPay.ts

@@ -0,0 +1,75 @@
+export interface Participant {
+  offer: string;
+  chainID: number;
+  identification: string;
+  bankIspb?: string;
+  accountType: string;
+  account: string;
+  branch: string;
+  savingsVariation?: string;
+}
+
+export interface ParticipantWithID extends Participant {
+  id: string;
+}
+
+export interface Offer {
+  amount: number;
+  sellerId: string;
+}
+
+// Specs for BB Pay Sandbox
+// https://apoio.developers.bb.com.br/sandbox/spec/665797498bb48200130fc32c
+
+export const createParticipant = async (participant: Participant) => {
+  const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/register`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      chainID: participant.chainID,
+      tipoDocumento: 1,
+      numeroDocumento: participant.identification,
+      numeroConta: participant.account,
+      numeroAgencia: participant.branch,
+      tipoConta: participant.accountType,
+      codigoIspb: participant.bankIspb,
+    }),
+  });
+  if (!response.ok) {
+    throw new Error(`Error creating participant: ${response.statusText}`);
+  }
+  const data = await response.json();
+  if (data.errors || data.erros) {
+    throw new Error(`Error creating participant: ${JSON.stringify(data)}`);
+  }
+  return { ...participant, id: data.numeroParticipante } as ParticipantWithID;
+};
+
+export const createSolicitation = async (offer: Offer) => {
+  const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/request`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      amount: offer.amount,
+      pixTarget: offer.sellerId.split("-").pop(),
+    }),
+  });
+  return response.json();
+};
+
+export const getSolicitation = async (id: bigint): Promise<{pixTimestamp: `0x${string}`, signature: `0x${string}`}> => {
+  const response = await fetch(
+    `${import.meta.env.VITE_APP_API_URL}/release/${id}`
+  );
+
+  const obj = await response.json();
+
+  return {
+    pixTimestamp: obj.pixTimestamp,
+    signature: obj.signature,
+  };
+};

src/utils/imagesPath.ts

@@ -7,10 +7,19 @@ export const imagesPath = import.meta.glob<string>("@/assets/*.{png,svg}", {
 });
 
 export const getNetworkImage = (networkName: string): string => {
-  const path = Object.keys(imagesPath).find((key) =>
-    key.endsWith(`${networkName.toLowerCase()}.svg`)
-  );
-  return path ? imagesPath[path] : "";
+  try {
+    const path = Object.keys(imagesPath).find((key) =>
+      key.endsWith(`${networkName.toLowerCase()}.svg`)
+    );
+    return path ? imagesPath[path] : "";
+  } catch (error) {
+    console.error("Error fetching network image");
+    const path = Object.keys(imagesPath).find((key) =>
+      key.endsWith(`invalidIcon.svg`)
+    );
+    return path ? imagesPath[path] : "";
+    return "";
+  }
 };
 
 export const getTokenImage = (tokenName: TokenEnum): string => {

src/utils/networkLiquidity.ts

@@ -1,8 +1,9 @@
 import type { ValidDeposit } from "@/model/ValidDeposit";
+import type { Address } from "viem";
 
 const verifyNetworkLiquidity = (
   tokenValue: number,
-  walletAddress: string,
+  walletAddress: Address,
   validDepositList: ValidDeposit[]
 ): ValidDeposit[] => {
   const filteredDepositList = validDepositList

src/views/FaqView.vue

@@ -24,7 +24,6 @@ const openItem = (index: number) => {
   faq.value[selectedSection.value].items[index].content = marked(
     faq.value[selectedSection.value].items[index].content
   );
-  console.log(marked(faq.value[selectedSection.value].items[index].content));
 };
 </script>
 

src/views/HomeView.vue

@@ -3,15 +3,16 @@ import SearchComponent from "@/components/SearchComponent.vue";
 import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
 import BuyConfirmedComponent from "@/components/BuyConfirmedComponent/BuyConfirmedComponent.vue";
 import { ref, onMounted, watch } from "vue";
-import { useEtherStore } from "@/store/ether";
+import { useUser } from "@/composables/useUser";
 import QrCodeComponent from "@/components/QrCodeComponent.vue";
-import { storeToRefs } from "pinia";
 import { addLock, releaseLock } from "@/blockchain/buyerMethods";
 import { updateWalletStatus, checkUnreleasedLock } from "@/blockchain/wallet";
 import { getNetworksLiquidity } from "@/blockchain/events";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import { getUnreleasedLockById } from "@/blockchain/events";
 import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
+import { getSolicitation } from "@/utils/bbPay";
+import type { Address } from "viem";
 
 enum Step {
   Search,
@@ -19,13 +20,14 @@ enum Step {
   List,
 }
 
-const etherStore = useEtherStore();
-etherStore.setSellerView(false);
+const user = useUser();
+user.setSellerView(false);
 
 // States
-const { loadingLock, walletAddress, networkName } = storeToRefs(etherStore);
+const { loadingLock, walletAddress, networkName } = user;
 const flowStep = ref<Step>(Step.Search);
-const pixTarget = ref<string>();
+const participantID = ref<string>();
+const sellerAddress = ref<Address>();
 const tokenAmount = ref<number>();
 const lockID = ref<string>("");
 const loadingRelease = ref<boolean>(false);
@@ -37,54 +39,48 @@ const confirmBuyClick = async (
   selectedDeposit: ValidDeposit,
   tokenValue: number
 ) => {
-  // finish buy screen
-  pixTarget.value = selectedDeposit.pixKey;
+  participantID.value = selectedDeposit.participantID;
   tokenAmount.value = tokenValue;
 
-  // Makes lock with deposit ID and the Amount
   if (selectedDeposit) {
     flowStep.value = Step.Buy;
-    etherStore.setLoadingLock(true);
+    user.setLoadingLock(true);
 
     await addLock(selectedDeposit.seller, selectedDeposit.token, tokenValue)
       .then((_lockID) => {
-        lockID.value = _lockID;
+        lockID.value = String(_lockID);
       })
       .catch((err) => {
         console.log(err);
         flowStep.value = Step.Search;
       });
 
-    etherStore.setLoadingLock(false);
+    user.setLoadingLock(false);
   }
 };
 
-const releaseTransaction = async (e2eId: string) => {
+const releaseTransaction = async (params: {
+  pixTimestamp: `0x${string}`&{lenght:34},
+  signature: `0x${string}`,
+}) => {
   flowStep.value = Step.List;
   showBuyAlert.value = true;
   loadingRelease.value = true;
 
-  if (lockID.value && tokenAmount.value && pixTarget.value) {
-    const release = await releaseLock(
-      pixTarget.value,
-      tokenAmount.value,
-      e2eId,
-      lockID.value
-    );
-    await release.wait();
+  const release = await releaseLock(BigInt(lockID.value), params.pixTimestamp, params.signature);
 
-    await updateWalletStatus();
-    loadingRelease.value = false;
-  }
+  await updateWalletStatus();
+  loadingRelease.value = false;
 };
 
 const checkForUnreleasedLocks = async (): Promise<void> => {
-  console.log("Checking for unreleased locks");
-  const walletLocks = await checkUnreleasedLock(walletAddress.value);
-  if (walletLocks) {
-    lockID.value = walletLocks.lockID;
-    tokenAmount.value = walletLocks.pix.value;
-    pixTarget.value = walletLocks.pix.pixKey;
+  if (!walletAddress.value)
+    throw new Error("Wallet not connected");
+  const lock = await checkUnreleasedLock(walletAddress.value);
+  if (lock) {
+    lockID.value = String(lock.lockID);
+    tokenAmount.value = lock.amount;
+    sellerAddress.value = lock.sellerAddress;
     showModal.value = true;
   } else {
     flowStep.value = Step.Search;
@@ -93,11 +89,11 @@ const checkForUnreleasedLocks = async (): Promise<void> => {
 };
 
 if (paramLockID) {
-  const lockToRedirect = await getUnreleasedLockById(paramLockID as string);
+  const lockToRedirect = await getUnreleasedLockById(paramLockID);
   if (lockToRedirect) {
-    lockID.value = lockToRedirect.lockID;
-    tokenAmount.value = lockToRedirect.pix.value;
-    pixTarget.value = lockToRedirect.pix.pixKey;
+    lockID.value = String(lockToRedirect.lockID);
+    tokenAmount.value = lockToRedirect.amount;
+    sellerAddress.value = lockToRedirect.sellerAddress;
     flowStep.value = Step.Buy;
   } else {
     flowStep.value = Step.Search;
@@ -140,8 +136,7 @@ onMounted(async () => {
     />
     <div v-if="flowStep == Step.Buy">
       <QrCodeComponent
-        :pixTarget="String(pixTarget)"
-        :tokenValue="tokenAmount"
+        :lockID="lockID"
         @pix-validated="releaseTransaction"
         v-if="!loadingLock"
       />

src/views/ManageBidsView.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { useEtherStore } from "@/store/ether";
-import { storeToRefs } from "pinia";
+import { ref, onMounted, watch } from "vue";
+import { useUser } from "@/composables/useUser";
 import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
 import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
 import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
-import { ref, watch, onMounted } from "vue";
 import {
   listValidDepositTransactionsByWalletAddress,
   listAllTransactionByWalletAddress,
@@ -16,8 +15,8 @@ import type { WalletTransaction } from "@/model/WalletTransaction";
 
 import router from "@/router/index";
 
-const etherStore = useEtherStore();
-const { walletAddress, networkName, selectedToken } = storeToRefs(etherStore);
+const user = useUser();
+const { walletAddress, networkName, selectedToken } = user;
 const loadingWithdraw = ref<boolean>(false);
 const showAlert = ref<boolean>(false);
 
@@ -47,21 +46,17 @@ const callWithdraw = async (amount: string) => {
 };
 
 const getWalletTransactions = async () => {
-  etherStore.setLoadingWalletTransactions(true);
+  user.setLoadingWalletTransactions(true);
   if (walletAddress.value) {
-    console.log("Will fetch all required data...");
     const walletDeposits = await listValidDepositTransactionsByWalletAddress(
       walletAddress.value
     );
-    console.log("Fetched deposits");
 
     const allUserTransactions = await listAllTransactionByWalletAddress(
       walletAddress.value
     );
-    console.log("Fetched all transactions");
 
     activeLockAmount.value = await getActiveLockAmount(walletAddress.value);
-    console.log("Fetched active lock amount");
 
     if (walletDeposits) {
       depositList.value = walletDeposits;
@@ -70,7 +65,7 @@ const getWalletTransactions = async () => {
       transactionsList.value = allUserTransactions;
     }
   }
-  etherStore.setLoadingWalletTransactions(false);
+  user.setLoadingWalletTransactions(false);
 };
 
 onMounted(async () => {

src/views/SellerView.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import WantSellComponent from "@/components/SellerSteps/WantSellComponent.vue";
+import { ref } from "vue";
+
+import SellerComponent from "@/components/SellerSteps/SellerComponent.vue";
 import SendNetwork from "@/components/SellerSteps/SendNetwork.vue";
 import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
+import { useUser } from "@/composables/useUser";
 import { approveTokens, addDeposit } from "@/blockchain/sellerMethods";
-
-import { ref } from "vue";
-import { useEtherStore } from "@/store/ether";
 import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
+import type { Participant } from "@/utils/bbPay";
 
 enum Step {
   Search,
@@ -14,26 +15,18 @@ enum Step {
   Network,
 }
 
-const etherStore = useEtherStore();
-etherStore.setSellerView(true);
+const user = useUser();
+user.setSellerView(true);
 
 const flowStep = ref<Step>(Step.Sell);
 const loading = ref<boolean>(false);
-
-const offerValue = ref<string>("");
-const pixKeyBuyer = ref<string>("");
 const showAlert = ref<boolean>(false);
 
 // Verificar tipagem
-const approveOffer = async (args: {
-  offer: string;
-  postProcessedPixKey: string;
-}) => {
+const approveOffer = async (args: Participant) => {
   loading.value = true;
   try {
-    offerValue.value = args.offer;
-    pixKeyBuyer.value = args.postProcessedPixKey;
-    await approveTokens(args.offer);
+    await approveTokens(args);
     flowStep.value = Step.Network;
     loading.value = false;
   } catch (err) {
@@ -46,8 +39,8 @@ const approveOffer = async (args: {
 const sendNetwork = async () => {
   loading.value = true;
   try {
-    if (offerValue.value && pixKeyBuyer.value) {
-      await addDeposit(String(offerValue.value), pixKeyBuyer.value);
+    if (user.seller.value) {
+      await addDeposit();
       flowStep.value = Step.Sell;
       loading.value = false;
       showAlert.value = true;
@@ -63,7 +56,7 @@ const sendNetwork = async () => {
 <template>
   <div>
     <div v-if="flowStep == Step.Sell">
-      <WantSellComponent v-if="!loading" @approve-tokens="approveOffer" />
+      <SellerComponent v-if="!loading" @approve-tokens="approveOffer" />
       <LoadingComponent
         v-if="loading"
         :message="'A transação está sendo enviada para a rede.'"
@@ -76,9 +69,9 @@ const sendNetwork = async () => {
     />
     <div v-if="flowStep == Step.Network">
       <SendNetwork
-        :pixKey="pixKeyBuyer"
-        :offer="Number(offerValue)"
-        :selected-token="etherStore.selectedToken"
+        :sellerId="user.sellerId.value"
+        :offer="Number(user.seller.value.offer)"
+        :selected-token="user.selectedToken.value"
         v-if="!loading"
         @send-network="sendNetwork"
       />

tsconfig.config.json

@@ -2,7 +2,6 @@
   "extends": "@vue/tsconfig/tsconfig.node.json",
   "include": [
     "vite.config.*",
-    "vitest.config.*",
     "cypress.config.*",
     "playwright.config.*"
   ],

tsconfig.json

@@ -3,17 +3,18 @@
   "include": [
     "env.d.ts",
     "src/**/*",
-    "src/**/*.vue"
+    "src/**/*.vue",
+    "scripts"
   ],
   "compilerOptions": {
     "baseUrl": ".",
+    "strict": true,
     "paths": {
       "@/*": [
         "./src/*"
       ]
     },
     "types": [
-      "jest",
       "node"
     ],
     "resolveJsonModule": true,
@@ -24,6 +25,9 @@
       "esnext",
       "dom"
     ],
+    "preserveValueImports": false,
+    "importsNotUsedAsValues": "remove",
+    "verbatimModuleSyntax": false
   },
   "references": [
     {
@@ -34,4 +38,4 @@
     "node_modules",
     "./node_modules"
   ]
-}
+}

vite.config.ts

@@ -1,6 +1,6 @@
 import { fileURLToPath, URL } from "node:url";
 
-import { defineConfig } from "vitest/config";
+import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import vueJsx from "@vitejs/plugin-vue-jsx";
 import svgLoader from "vite-svg-loader";
@@ -10,21 +10,24 @@ export default defineConfig({
   build: {
     target: "esnext",
   },
-  test: {
-    globals: true,
-    environment: "jsdom",
-    coverage: {
-      provider: "c8",
-      all: true,
-      src: ["./src"],
-      exclude: ["model/**", "**/__tests__/**"],
-      reporter: ["text", "lcov", "html"],
+  optimizeDeps: {
+    esbuildOptions: {
+      target: "esnext",
+      define: {
+        global: "globalThis",
+      },
+      supported: {
+        bigint: true,
+      },
     },
   },
   plugins: [vue(), vueJsx(), svgLoader()],
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),
+      "viem/errors": fileURLToPath(
+        new URL("./node_modules/viem/errors", import.meta.url)
+      ),
     },
   },
 });

wagmi.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from '@wagmi/cli'
+import { hardhat } from '@wagmi/cli/plugins'
+
+export default defineConfig({
+  out: 'src/blockchain/abi.ts',
+  contracts: [],
+  plugins: [
+    hardhat({
+      project: '../p2pix-smart-contracts',
+    }),],
+})