From 3cf60f267dff484957007174b6b5c899278679ee Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Sun, 25 Dec 2022 23:51:00 -0300
Subject: [PATCH] prepare ListingComponent to receive manager mode

---
 src/assets/cancel.svg               |   6 ++
 src/assets/withdraw.svg             |   8 ++
 src/components/ListComponent.vue    |  86 ++++++++--------
 src/components/ListingComponent.vue | 147 ++++++++++++++++------------
 src/views/BidHistoryView.vue        |   3 +-
 5 files changed, 145 insertions(+), 105 deletions(-)
 create mode 100644 src/assets/cancel.svg
 create mode 100644 src/assets/withdraw.svg

diff --git a/src/assets/cancel.svg b/src/assets/cancel.svg
new file mode 100644
index 0000000..e6069f6
--- /dev/null
+++ b/src/assets/cancel.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8Z" fill="#1F2937" stroke="#1F2937" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6115 4.81333C11.7288 4.696 11.7288 4.50577 11.6115 4.38844C11.4942 4.27111 11.304 4.27111 11.1866 4.38844L8 7.57509L4.81337 4.38844C4.69604 4.27111 4.50581 4.27111 4.38849 4.38844C4.27116 4.50577 4.27116 4.696 4.38849 4.81333L7.57511 7.99998L4.38844 11.1867C4.27111 11.304 4.27111 11.4942 4.38844 11.6116C4.50577 11.7289 4.69599 11.7289 4.81332 11.6116L8 8.42487L11.1867 11.6116C11.304 11.7289 11.4942 11.7289 11.6116 11.6116C11.7289 11.4942 11.7289 11.304 11.6116 11.1867L8.42489 7.99998L11.6115 4.81333Z" fill="#F9FAFB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.17604 4.17599C4.4107 3.94134 4.79116 3.94133 5.02582 4.17599L8 7.1502L10.9742 4.176C11.2088 3.94133 11.5893 3.94133 11.824 4.176C12.0586 4.41066 12.0586 4.79111 11.824 5.02577L8.84977 7.99998L11.824 10.9742C12.0587 11.2089 12.0587 11.5893 11.824 11.824C11.5893 12.0587 11.2089 12.0587 10.9742 11.824L8 8.84975L5.02577 11.824C4.79111 12.0587 4.41065 12.0587 4.17599 11.824C3.94134 11.5893 3.94134 11.2089 4.17599 10.9742L7.15023 7.99998L4.17604 5.02577C3.94138 4.79111 3.94138 4.41065 4.17604 4.17599Z" fill="#F9FAFB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.99926 3.99922C4.33155 3.66693 4.8703 3.66693 5.20259 3.99922L8 6.79664L10.7974 3.99922C11.1297 3.66693 11.6684 3.66693 12.0007 3.99922C12.333 4.33151 12.333 4.87026 12.0007 5.20255L9.20333 7.99998L12.0008 10.7974C12.3331 11.1297 12.3331 11.6685 12.0008 12.0008C11.6685 12.3331 11.1297 12.3331 10.7975 12.0008L8 9.20331L5.20254 12.0008C4.87025 12.3331 4.33151 12.3331 3.99922 12.0008C3.66693 11.6685 3.66693 11.1297 3.99922 10.7974L6.79667 7.99998L3.99926 5.20255C3.66698 4.87026 3.66698 4.33151 3.99926 3.99922ZM4.6366 4.56522C4.6169 4.54552 4.58496 4.54552 4.56526 4.56522C4.54556 4.58491 4.54556 4.61685 4.56526 4.63655L7.92866 7.99998L4.56521 11.3634C4.54552 11.3831 4.54552 11.4151 4.56521 11.4348C4.58491 11.4545 4.61685 11.4545 4.63655 11.4348L8 8.07131L11.3635 11.4348C11.3832 11.4545 11.4151 11.4545 11.4348 11.4348C11.4545 11.4151 11.4545 11.3831 11.4348 11.3634L8.07133 7.99998L11.4347 4.63655C11.4544 4.61685 11.4544 4.58491 11.4347 4.56522C11.415 4.54552 11.3831 4.54552 11.3634 4.56522L8 7.92864L4.6366 4.56522Z" fill="#F9FAFB"/>
+</svg>
diff --git a/src/assets/withdraw.svg b/src/assets/withdraw.svg
new file mode 100644
index 0000000..fbb5603
--- /dev/null
+++ b/src/assets/withdraw.svg
@@ -0,0 +1,8 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_968_914" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H1.5V14C1.5 15.1046 2.39543 16 3.5 16H14.5C15.6046 16 16.5 15.1046 16.5 14V2H17C17.5523 2 18 1.55228 18 1C18 0.447715 17.5523 0 17 0H14.5H3.5H1Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H1.5V14C1.5 15.1046 2.39543 16 3.5 16H14.5C15.6046 16 16.5 15.1046 16.5 14V2H17C17.5523 2 18 1.55228 18 1C18 0.447715 17.5523 0 17 0H14.5H3.5H1Z" fill="#1F2937"/>
+<path d="M1.5 2H3.5V0H1.5V2ZM16.5 2V0H14.5V2H16.5ZM2 1C2 1.55228 1.55228 2 1 2V-2C-0.656854 -2 -2 -0.656854 -2 1H2ZM1 0C1.55228 0 2 0.447715 2 1H-2C-2 2.65685 -0.656854 4 1 4V0ZM1.5 0H1V4H1.5V0ZM3.5 14V2H-0.5V14H3.5ZM3.5 14H-0.5C-0.5 16.2091 1.29086 18 3.5 18V14ZM14.5 14H3.5V18H14.5V14ZM14.5 14V18C16.7091 18 18.5 16.2091 18.5 14H14.5ZM14.5 2V14H18.5V2H14.5ZM17 0H16.5V4H17V0ZM16 1C16 0.447715 16.4477 0 17 0V4C18.6569 4 20 2.65685 20 1H16ZM17 2C16.4477 2 16 1.55229 16 1H20C20 -0.656855 18.6569 -2 17 -2V2ZM14.5 2H17V-2H14.5V2ZM3.5 2H14.5V-2H3.5V2ZM1 2H3.5V-2H1V2Z" fill="#1F2937" mask="url(#path-1-inside-1_968_914)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99961 3.09998C9.49667 3.09998 9.89961 3.50292 9.89961 3.99998V9.91699L11.8828 8.05048C12.2447 7.70981 12.8143 7.72707 13.155 8.08903C13.4957 8.45099 13.4784 9.02057 13.1164 9.36124L9.61644 12.6554C9.2699 12.9815 8.72933 12.9815 8.38278 12.6554L4.88278 9.36124C4.52083 9.02057 4.50357 8.45099 4.84423 8.08903C5.1849 7.72707 5.75448 7.70981 6.11644 8.05048L8.09961 9.91699V3.99998C8.09961 3.50292 8.50256 3.09998 8.99961 3.09998Z" fill="#F9FAFB"/>
+</svg>
diff --git a/src/components/ListComponent.vue b/src/components/ListComponent.vue
index 4a8ef45..4211256 100644
--- a/src/components/ListComponent.vue
+++ b/src/components/ListComponent.vue
@@ -65,50 +65,50 @@ const openEtherscanUrl = (url: string) => {
         >Últimas transações
       </span>
     </div>
-      <div class="blur-container min-w-[80%] gap-8">
-        <div class="flex flex-row justify-between w-full px-8">
-          <span class="text-xs text-gray-50 font-medium">Valor</span>
-          <span class="text-xs text-gray-50 font-medium">Tipo de transação</span>
-          <span class="text-xs text-gray-50 font-medium">Checar transação</span>
-        </div>
-        <div
-          class="flex flex-row justify-between w-full bg-white px-6 py-4 rounded-lg"
-          v-for="release in lastWalletReleaseTransactions"
-          :key="release?.blockNumber"
-        >
-          <span class="last-release-info">
-            {{ formatEventsAmount(release?.args.amount) }} BRZ
-          </span>
-          <span class="last-release-info">
-            {{ "Compra" }}
-          </span>
-          <div
-            class="flex gap-2 cursor-pointer items-center"
-            @click="
-              openEtherscanUrl(
-                `https://etherscan.io/tx/${release?.transactionHash}`
-              )
-            "
-          >
-            <span class="last-release-info">Etherscan</span>
-            <img alt="Redirect image" src="@/assets/redirect.svg" />
-          </div>
-        </div>
-        <div class="flex justify-center w-full right-6 mt-2">
-          <button
-            type="button"
-            class="text-white"
-            @click="() => {}"
-            v-if="lastWalletReleaseTransactions?.length != 0"
-          >
-            Carregar mais
-          </button>
-        </div>
-
-        <p class="font-bold" v-if="lastWalletReleaseTransactions?.length == 0">
-          Não há nenhuma transação anterior
-        </p>
+    <div class="blur-container min-w-[80%] gap-8">
+      <div class="flex flex-row justify-between w-full px-8">
+        <span class="text-xs text-gray-50 font-medium">Valor</span>
+        <span class="text-xs text-gray-50 font-medium">Tipo de transação</span>
+        <span class="text-xs text-gray-50 font-medium">Checar transação</span>
       </div>
+      <div
+        class="flex flex-row justify-between w-full bg-white px-6 py-4 rounded-lg"
+        v-for="release in lastWalletReleaseTransactions"
+        :key="release?.blockNumber"
+      >
+        <span class="last-release-info">
+          {{ formatEventsAmount(release?.args.amount) }} BRZ
+        </span>
+        <span class="last-release-info">
+          {{ "Compra" }}
+        </span>
+        <div
+          class="flex gap-2 cursor-pointer items-center"
+          @click="
+            openEtherscanUrl(
+              `https://etherscan.io/tx/${release?.transactionHash}`
+            )
+          "
+        >
+          <span class="last-release-info">Etherscan</span>
+          <img alt="Redirect image" src="@/assets/redirect.svg" />
+        </div>
+      </div>
+      <div class="flex justify-center w-full right-6 mt-2">
+        <button
+          type="button"
+          class="text-white"
+          @click="() => {}"
+          v-if="lastWalletReleaseTransactions?.length != 0"
+        >
+          Carregar mais
+        </button>
+      </div>
+
+      <p class="font-bold" v-if="lastWalletReleaseTransactions?.length == 0">
+        Não há nenhuma transação anterior
+      </p>
+    </div>
   </div>
 </template>
 
diff --git a/src/components/ListingComponent.vue b/src/components/ListingComponent.vue
index c5726e1..a2d2995 100644
--- a/src/components/ListingComponent.vue
+++ b/src/components/ListingComponent.vue
@@ -1,13 +1,21 @@
 <script setup lang="ts">
-import blockchain from '@/utils/blockchain';
-import { ref } from 'vue';
+import blockchain from "@/utils/blockchain";
+import { ref } from "vue";
+
+// props
+const props = defineProps<{
+  walletTransactions: any[];
+  isManageMode: boolean;
+}>();
 
 const itemsToShow = ref<any[]>([]);
 
-const props = defineProps<{
-  lastWalletReleaseTransactions: any[];
-}>();
+itemsToShow.value =
+  props.walletTransactions?.length > 3
+    ? props.walletTransactions.slice(0, 3)
+    : props.walletTransactions;
 
+// Methods
 const formatEventsAmount = (amount: any) => {
   try {
     const formated = blockchain.formatBigNumber(amount);
@@ -22,68 +30,87 @@ const openEtherscanUrl = (url: string) => {
 };
 
 const loadMore = () => {
-  const itemsShowing = itemsToShow.value.length
-  if(props.lastWalletReleaseTransactions?.length > ( itemsShowing + 3))
-    itemsToShow.value?.push(...props.lastWalletReleaseTransactions.slice(itemsShowing, itemsShowing + 3))
-  else
-    itemsToShow.value = props.lastWalletReleaseTransactions
+  const itemsShowing = itemsToShow.value.length;
+  if (props.walletTransactions?.length > itemsShowing + 3)
+    itemsToShow.value?.push(
+      ...props.walletTransactions.slice(itemsShowing, itemsShowing + 3)
+    );
+  else itemsToShow.value = props.walletTransactions;
 };
 
-itemsToShow.value = (props.lastWalletReleaseTransactions?.length > 3) ? props.lastWalletReleaseTransactions.slice(0, 3) : props.lastWalletReleaseTransactions;
-
+//emits
+const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
 </script>
 
 <template>
-      <div class="blur-container">
-        <div class="grid grid-cols-4 grid-flow-row w-full px-6">
-            <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">Tipo de transação</span>
-            <span class="text-xs text-gray-50 font-medium justify-self-center">Checar transação</span>
-        </div>
-        <div
-            class="grid grid-cols-4 grid-flow-row w-full bg-white px-6 py-4 rounded-lg"
-            v-for="item in itemsToShow"
-            :key="item?.blockNumber"
-          >
-            <span class="last-release-info">
-              {{ formatEventsAmount(item?.args.amount) }} BRZ
-            </span>
-            
-            <span class="last-release-info">
-              20 out 2022
-            </span>
+  <div class="blur-container">
+    <div class="grid grid-cols-4 grid-flow-row w-full px-6">
+      <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"
+      v-for="item in itemsToShow"
+      :key="item?.blockNumber"
+    >
+      <span class="last-release-info">
+        {{ formatEventsAmount(item?.args.amount) }} BRZ
+      </span>
 
-            <span class="last-release-info">
-              {{ "Compra" }}
-            </span>
+      <span class="last-release-info"> 20 out 2022 </span>
 
-            <div
-              class="flex gap-2 cursor-pointer items-center justify-self-center"
-              @click="
-                openEtherscanUrl(
-                  `https://etherscan.io/tx/${item?.transactionHash}`
-                )
-              "
-            >
-              <span class="last-release-info">Etherscan</span>
-              <img alt="Redirect image" src="@/assets/redirect.svg" />
-            </div>
-          </div>
-          <div class="flex justify-center w-full mt-2">
-            <button
-              type="button"
-              class="text-white"
-              @click="loadMore()"
-            >
-              Carregar mais
-            </button>
-        </div>
-        <p class="font-bold" v-if="props.lastWalletReleaseTransactions?.length == 0">
-          Não há nenhuma transação anterior
-        </p>
+      <div
+        v-if="props.isManageMode"
+        class="flex gap-2 cursor-pointer items-center justify-self-center"
+        @click="emit('cancelDeposit')"
+      >
+        <span class="last-release-info">Cancelar</span>
+        <img alt="Cancel image" src="@/assets/cancel.svg" />
       </div>
 
+      <span class="last-release-info" v-if="!props.isManageMode">
+        {{ "Compra" }}
+      </span>
+
+      <div
+        v-if="props.isManageMode"
+        class="flex gap-2 cursor-pointer items-center justify-self-center"
+        @click="emit('withdrawDeposit')"
+      >
+        <span class="last-release-info">Retirar</span>
+        <img alt="Cancel image" src="@/assets/withdraw.svg" />
+      </div>
+
+      <div
+        v-if="!props.isManageMode"
+        class="flex gap-2 cursor-pointer items-center justify-self-center"
+        @click="
+          openEtherscanUrl(`https://etherscan.io/tx/${item?.transactionHash}`)
+        "
+      >
+        <span class="last-release-info">Etherscan</span>
+        <img alt="Redirect image" src="@/assets/redirect.svg" />
+      </div>
+    </div>
+    <div class="flex justify-center w-full mt-2">
+      <button type="button" class="text-white" @click="loadMore()">
+        Carregar mais
+      </button>
+    </div>
+    <p class="font-bold" v-if="props.walletTransactions?.length == 0">
+      Não há nenhuma transação anterior
+    </p>
+  </div>
 </template>
 
 <style scoped>
@@ -107,7 +134,7 @@ p {
 }
 
 .blur-container {
-  @apply flex flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
+  @apply flex flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md w-auto;
 }
 
 .grid-container {
@@ -126,4 +153,4 @@ input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/BidHistoryView.vue b/src/views/BidHistoryView.vue
index a89deb3..fcbd4d5 100644
--- a/src/views/BidHistoryView.vue
+++ b/src/views/BidHistoryView.vue
@@ -1,5 +1,4 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <div class="page">Histórico de ofertas</div>