Improve test and withdraw input style

src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue

@@ -56,7 +56,7 @@ const emit = defineEmits(["makeAnotherTransaction"]);
     </div>
     <div class="w-full max-w-4xl lg-view">
       <ListingComponent
-        :deposit-list="[]"
+        :valid-deposits="[]"
         :walletTransactions="lastWalletReleaseTransactions"
         :isManageMode="false"
       >

src/components/ListingComponent/ListingComponent.vue

@@ -9,7 +9,7 @@ import { ref, watch } from "vue";
 
 // props
 const props = defineProps<{
-  depositList: ValidDeposit[];
+  validDeposits: ValidDeposit[];
   walletTransactions: Event[];
 }>();
 
@@ -32,10 +32,10 @@ const callWithdraw = async () => {
 };
 
 const getRemaining = (): number => {
-  if (props.depositList instanceof Array) {
+  if (props.validDeposits instanceof Array) {
     // Here we are getting only the first element of the list because
     // in this release only the BRL token is being used.
-    const deposit = props.depositList[0]; 
+    const deposit = props.validDeposits[0];
     return deposit ? deposit.remaining : 0;
   }
   return 0;
@@ -115,18 +115,17 @@ showInitialItems();
         </div>
       </div>
       <div class="pt-5">
-        <div class="py-2">
+        <div class="py-2 w-100">
           <p class="text-sm leading-5 font-medium">Valor do saque</p>
           <input
             type="number"
             name=""
             id=""
             placeholder="0"
-            class="text-2xl"
+            class="text-2xl text-gray-900 w-full outline-none"
             v-model="withdrawAmount"
           />
         </div>
-
         <hr class="pb-3" />
         <div class="flex justify-end items-center">
           <div

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

@@ -13,8 +13,8 @@ describe("ListingComponent.vue", () => {
   test("Test Message when an empty array is received", () => {
     const wrapper = mount(ListingComponent, {
       props: {
-        depositList: [],
-        walletTransactions: []
+        validDeposits: [],
+        walletTransactions: [],
       },
     });
 
@@ -24,7 +24,7 @@ describe("ListingComponent.vue", () => {
   test("Test number of elements in the list first render", () => {
     const wrapper = mount(ListingComponent, {
       props: {
-        depositList: [],
+        validDeposits: [],
         walletTransactions: MockEvents,
       },
     });
@@ -37,8 +37,8 @@ describe("ListingComponent.vue", () => {
   test("Test load more button behavior", async () => {
     const wrapper = mount(ListingComponent, {
       props: {
-        depositList: MockValidDeposits,
-        walletTransactions: [],
+        validDeposits: MockValidDeposits,
+        walletTransactions: MockEvents,
       },
     });
     const btn = wrapper.find("button");
@@ -50,13 +50,13 @@ describe("ListingComponent.vue", () => {
 
     elements = wrapper.findAll(".item-container");
 
-    expect(elements).toHaveLength(5);
+    expect(elements).toHaveLength(4);
   });
 
   test("Test withdraw offer button emit", async () => {
     const wrapper = mount(ListingComponent, {
       props: {
-        depositList: MockValidDeposits,
+        validDeposits: MockValidDeposits,
         walletTransactions: MockEvents,
       },
     });

src/model/mock/EventMock.ts

@@ -89,4 +89,33 @@ export const MockEvents: Event[] = [
     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/views/ManageBidsView.vue

@@ -89,7 +89,7 @@ watch(networkName, async () => {
     <div class="header">Gerenciar Ofertas</div>
     <div class="w-full max-w-4xl">
       <ListingComponent
-        :deposit-list="depositList"
+        :valid-deposits="depositList"
         :wallet-transactions="transactionsList"
         @deposit-withdrawn="updateRemaining"
       ></ListingComponent>