add new cards

src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue

@@ -31,7 +31,8 @@ const emit = defineEmits(["makeAnotherTransaction"]);
         </div>
         <div class="my-5">
           <p class="text-sm">
-            <b>Não encontrou os tokens? </b><br/>Clique no botão abaixo para <br />
+            <b>Não encontrou os tokens? </b><br />Clique no botão abaixo para
+            <br />
             cadastrar o BRZ em sua carteira.
           </p>
         </div>
@@ -50,7 +51,7 @@ const emit = defineEmits(["makeAnotherTransaction"]);
     </div>
     <div class="text-container mt-16 lg-view">
       <span class="text font-extrabold text-3xl max-w-[50rem]"
-        >Histórico de compras
+        >Gerenciar transações
       </span>
     </div>
     <div class="w-full max-w-4xl lg-view">
@@ -60,7 +61,10 @@ const emit = defineEmits(["makeAnotherTransaction"]);
       >
       </ListingComponent>
     </div>
-    <RouterLink to="/transaction_history" class="mt-8 text-white text-2xl font-bold">
+    <RouterLink
+      to="/transaction_history"
+      class="mt-8 text-white text-2xl font-bold"
+    >
       Gerenciar Transações
     </RouterLink>
   </div>

src/components/ListingComponent/ListingComponent.vue

@@ -74,76 +74,73 @@ watch(props, async (): Promise<void> => {
 //emits
 const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
 
-// initial itemsToShow value
+// initial itemsToShow valueb
 showInitialItems();
 </script>
 
 <template>
   <div class="blur-container">
     <div
-      class="grid grid-cols-4 grid-flow-row w-full px-6"
-      v-if="itemsToShow.length != 0"
-    >
-      <span class="text-xs text-gray-50 font-medium justify-self-center"
-        >Valor</span
-      >
-      <span class="text-xs text-gray-50 font-medium justify-self-center"
-        >Data</span
-      >
-      <span class="text-xs text-gray-50 font-medium justify-self-center">{{
-        props.isManageMode ? "Cancelar oferta" : "Tipo de transação"
-      }}</span>
-      <span class="text-xs text-gray-50 font-medium justify-self-center">{{
-        props.isManageMode ? "Retirar tokens" : "Checar transação"
-      }}</span>
-    </div>
-    <div
-      class="grid grid-cols-4 grid-flow-row w-full bg-white px-6 py-4 rounded-lg"
+      class="w-full bg-white p-6 rounded-lg"
       v-for="(item, index) in itemsToShow"
       :key="item.blockNumber"
     >
-      <span class="last-release-info">
-        {{
-          isValidDeposit(item)
-            ? item.remaining
-            : getAmountFormatted(item.args?.amount)
-        }}
-        BRZ
-      </span>
-
-      <span class="last-release-info transaction-date"> 20 out 2022 </span>
-
-      <span class="last-release-info" v-if="!props.isManageMode">
-        {{ getEventName((item as Event).event) }}
-      </span>
-
-      <div
-        v-if="!props.isManageMode"
-        class="flex gap-2 cursor-pointer items-center justify-self-center"
-        @click="openEtherscanUrl((item as Event)?.transactionHash)"
-      >
-        <span class="last-release-info">Etherscan</span>
-        <img alt="Redirect image" src="@/assets/redirect.svg" />
+      <div class="flex justify-between items-center">
+        <div>
+          <p class="text-sm leading-5 font-medium text-gray-600">
+            {{ getEventName((item as Event).event) }}
+          </p>
+          <p class="text-xl leading-7 font-semibold text-gray-900">
+            {{
+              isValidDeposit(item)
+                ? item.remaining
+                : getAmountFormatted(item.args?.amount)
+            }}
+            BRZ
+          </p>
+          <p class="text-xs leading-4 font-medium text-gray-600">20/08/2022</p>
+        </div>
+        <div>
+          <div class="bg-emerald-300 rounded-lg text-center mb-2">
+            Finalizado
+          </div>
+          <div
+            v-if="!props.isManageMode"
+            class="flex gap-2 cursor-pointer items-center justify-self-center"
+            @click="openEtherscanUrl((item as Event)?.transactionHash)"
+          >
+            <span class="last-release-info">Etherscan</span>
+            <img alt="Redirect image" src="@/assets/redirect.svg" />
+          </div>
+        </div>
       </div>
+      <div class="pt-5" v-if="props.isManageMode">
+        <!-- <div class="py-2">
+          <p class="text-sm leading-5 font-medium">Valor do saque</p>
+          <p class="text-2xl leading-8 font-medium">0</p>
+        </div> -->
 
-      <div
-        v-if="props.isManageMode"
-        class="flex gap-2 cursor-pointer items-center justify-self-center"
-        @click="emit('cancelDeposit', (item as ValidDeposit).depositID, index)"
-      >
-        <span class="last-release-info">Cancelar</span>
-        <img alt="Cancel image" src="@/assets/cancel.svg" />
-      </div>
+        <hr class="pb-3" />
+        <div class="flex justify-between items-center">
+          <div
+            class="flex gap-2 cursor-pointer items-center justify-self-center"
+            @click="
+              emit('cancelDeposit', (item as ValidDeposit).depositID, index)
+            "
+          >
+            <span class="last-release-info">Cancelar</span>
+          </div>
 
-      <div
-        v-if="props.isManageMode"
-        class="flex gap-2 cursor-pointer items-center justify-self-center"
-        @click="
-          emit('withdrawDeposit', (item as ValidDeposit).depositID, index)
-        "
-      >
-        <span class="last-release-info">Retirar</span>
-        <img alt="Withdraw image" src="@/assets/withdraw.svg" />
+          <div
+            class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
+            @click="
+              emit('withdrawDeposit', (item as ValidDeposit).depositID, index)
+            "
+          >
+            <img alt="Withdraw image" src="@/assets/withdraw.svg" />
+            <span class="last-release-info">Sacar</span>
+          </div>
+        </div>
       </div>
     </div>
     <div

src/components/QrCodeComponent.vue

@@ -2,7 +2,7 @@
 import { pix } from "../utils/QrCodePix";
 import { ref } from "vue";
 import { debounce } from "@/utils/debounce";
-import CustomButton from "./CustomButton.vue";
+import CustomButton from "./CustomButton/CustomButton.vue";
 import AttentionModal from "./CustomModal.vue";
 import api from "../services/index";
 

src/model/ValidDeposit.ts

@@ -7,4 +7,5 @@ export type ValidDeposit = {
   seller: string;
   pixKey: string;
   pixTarget?: string;
+  open?: boolean;
 };

src/views/TransactionHistoryView.vue

@@ -58,6 +58,6 @@ watch(networkName, async () => {
 }
 
 .header {
-  @apply text-3xl text-gray-900 leading-9 font-bold justify-center flex;
+  @apply text-3xl text-white leading-9 font-bold justify-center flex;
 }
 </style>