Add tooltip to inform what a locked value is
This commit is contained in:
RcleydsonR
parent
b86a70df19
commit
34c5ce3b87
@ -14,6 +14,7 @@
|
||||
"lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/vue": "^0.2.1",
|
||||
"@headlessui/vue": "^1.7.3",
|
||||
"@heroicons/vue": "^2.0.12",
|
||||
"@vueuse/core": "^9.12.0",
|
||||
|
||||
@ -5,10 +5,11 @@ import type { ValidDeposit } from "@/model/ValidDeposit";
|
||||
import type { WalletTransaction } from "@/model/WalletTransaction";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { ref, watch } from "vue";
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import SpinnerComponent from "../SpinnerComponent.vue";
|
||||
import { decimalCount } from "@/utils/decimalCount";
|
||||
import { debounce } from "@/utils/debounce";
|
||||
import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue";
|
||||
|
||||
const etherStore = useEtherStore();
|
||||
|
||||
@ -31,6 +32,12 @@ const isCollapsibleOpen = ref<boolean>(false);
|
||||
const validDecimals = ref<boolean>(true);
|
||||
const validWithdrawAmount = ref<boolean>(true);
|
||||
const enableConfirmButton = ref<boolean>(false);
|
||||
const showInfoTooltip = ref<boolean>(false);
|
||||
const floatingArrow = ref(null);
|
||||
|
||||
const reference = ref<HTMLElement | null>(null);
|
||||
const floating = ref<HTMLElement | null>(null);
|
||||
const infoText = ref<HTMLElement | null>(null);
|
||||
|
||||
// Debounce methods
|
||||
const handleInputEvent = (event: any): void => {
|
||||
@ -123,6 +130,18 @@ const getEventName = (event: string | undefined): string => {
|
||||
return possibleEventName[event];
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
useFloating(reference, floating, {
|
||||
placement: "right",
|
||||
middleware: [
|
||||
offset(10),
|
||||
flip(),
|
||||
shift(),
|
||||
arrow({ element: floatingArrow }),
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
// watch props changes
|
||||
watch(props, async (): Promise<void> => {
|
||||
const itemsToShowQty = itemsToShow.value.length;
|
||||
@ -144,7 +163,7 @@ showInitialItems();
|
||||
</div>
|
||||
<div class="blur-container" v-if="!loadingWalletTransactions">
|
||||
<div
|
||||
class="w-full bg-white p-6 rounded-lg"
|
||||
class="w-full bg-white p-4 sm:p-6 rounded-lg"
|
||||
v-if="props.validDeposits.length > 0"
|
||||
>
|
||||
<div class="flex justify-between items-center">
|
||||
@ -155,30 +174,55 @@ showInitialItems();
|
||||
<p class="text-xl leading-7 font-semibold text-gray-900">
|
||||
{{ getRemaining() }} BRZ
|
||||
</p>
|
||||
<div class="flex gap-2" v-if="activeLockAmount != 0">
|
||||
<span class="text-xs leading-4 font-normal text-gray-400">{{
|
||||
`com ${activeLockAmount} BRZ em lock`
|
||||
<div class="flex gap-2 w-32 sm:w-44" v-if="activeLockAmount != 0">
|
||||
<span class="text-xs font-normal text-gray-400" ref="infoText">{{
|
||||
`com ${activeLockAmount.toFixed(2)} BRZ em lock`
|
||||
}}</span>
|
||||
<img alt="info image" src="@/assets/info.svg" />
|
||||
<div
|
||||
class="absolute mt-[2px] md-view"
|
||||
:style="{ left: `${(infoText?.clientWidth ?? 108) + 4}px` }"
|
||||
>
|
||||
<img
|
||||
alt="info image"
|
||||
src="@/assets/info.svg"
|
||||
aria-describedby="tooltip"
|
||||
ref="reference"
|
||||
@mouseover="showInfoTooltip = true"
|
||||
@mouseout="showInfoTooltip = false"
|
||||
/>
|
||||
<div
|
||||
role="tooltip"
|
||||
ref="floating"
|
||||
class="w-56 z-50 tooltip md-view"
|
||||
v-if="showInfoTooltip"
|
||||
>
|
||||
Valor “em lock” significa que a quantia está aguardando
|
||||
confirmação de compra e só estará disponível para saque caso a
|
||||
transação expire.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-5">
|
||||
<div v-show="!isCollapsibleOpen" class="flex justify-end items-center">
|
||||
<div
|
||||
class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
|
||||
@click="[(isCollapsibleOpen = true)]"
|
||||
>
|
||||
<img alt="Withdraw image" src="@/assets/withdraw.svg" />
|
||||
<img
|
||||
alt="Withdraw image"
|
||||
src="@/assets/withdraw.svg"
|
||||
class="w-3 h-3 sm:w-4 sm:h-4"
|
||||
/>
|
||||
<span class="last-release-info">Sacar</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-5">
|
||||
<div v-show="isCollapsibleOpen" class="py-2 w-100">
|
||||
<p class="text-sm leading-5 font-medium">Valor do saque</p>
|
||||
<input
|
||||
type="number"
|
||||
name=""
|
||||
id=""
|
||||
@input="debounce(handleInputEvent, 500)($event)"
|
||||
placeholder="0"
|
||||
class="text-2xl text-gray-900 w-full outline-none"
|
||||
@ -212,14 +256,18 @@ showInitialItems();
|
||||
class="withdraw-button flex gap-2 items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
|
||||
@click="callWithdraw"
|
||||
>
|
||||
<img alt="Withdraw image" src="@/assets/withdraw.svg" />
|
||||
<img
|
||||
alt="Withdraw image"
|
||||
src="@/assets/withdraw.svg"
|
||||
class="w-3 h-3 sm:w-4 sm:h-4"
|
||||
/>
|
||||
<span class="last-release-info">Sacar</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="w-full bg-white p-6 rounded-lg"
|
||||
class="w-full bg-white p-4 sm:p-6 rounded-lg"
|
||||
v-for="item in itemsToShow"
|
||||
:key="item.blockNumber"
|
||||
>
|
||||
@ -315,12 +363,9 @@ p {
|
||||
.text {
|
||||
@apply text-white text-center;
|
||||
}
|
||||
.blur-container-row {
|
||||
@apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
|
||||
}
|
||||
|
||||
.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 w-auto;
|
||||
@apply flex flex-col justify-center items-center px-4 py-3 sm:px-8 sm:py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md w-auto;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
@ -328,7 +373,11 @@ p {
|
||||
}
|
||||
|
||||
.last-release-info {
|
||||
@apply font-medium text-base text-gray-900 justify-self-center;
|
||||
@apply font-medium text-sm sm:text-base text-gray-900 justify-self-center;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
@apply bg-white text-gray-900 font-medium text-xs md:text-base px-3 py-2 rounded border-2 border-emerald-500 left-5 top-[-3rem];
|
||||
}
|
||||
|
||||
.withdraw-button {
|
||||
@ -344,4 +393,10 @@ input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.md-view {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -82,6 +82,6 @@ describe("ListingComponent.vue", () => {
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toContain("com 50 BRZ em lock");
|
||||
expect(wrapper.html()).toContain("com 50.00 BRZ em lock");
|
||||
});
|
||||
});
|
||||
|
||||
22
yarn.lock
22
yarn.lock
@ -1320,6 +1320,26 @@
|
||||
"@ethersproject/properties" "^5.7.0"
|
||||
"@ethersproject/strings" "^5.7.0"
|
||||
|
||||
"@floating-ui/core@^1.2.1":
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.1.tgz#074182a1d277f94569c50a6b456e62585d463c8e"
|
||||
integrity sha512-LSqwPZkK3rYfD7GKoIeExXOyYx6Q1O4iqZWwIehDNuv3Dv425FIAE8PRwtAx1imEolFTHgBEcoFHm9MDnYgPCg==
|
||||
|
||||
"@floating-ui/dom@^1.2.1":
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.1.tgz#8f93906e1a3b9f606ce78afb058e874344dcbe07"
|
||||
integrity sha512-Rt45SmRiV8eU+xXSB9t0uMYiQ/ZWGE/jumse2o3i5RGlyvcbqOF4q+1qBnzLE2kZ5JGhq0iMkcGXUKbFe7MpTA==
|
||||
dependencies:
|
||||
"@floating-ui/core" "^1.2.1"
|
||||
|
||||
"@floating-ui/vue@^0.2.1":
|
||||
version "0.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@floating-ui/vue/-/vue-0.2.1.tgz#a52b66e020897ad0535d0d0d3b09932446fc6231"
|
||||
integrity sha512-HE+EIeakID7wI6vUwF0yMpaW48bNaPj8QtnQaRMkaQFhQReVBA4bY6fmJ3J7X+dqVgDbMhyfCG0fBJfdQMdWxQ==
|
||||
dependencies:
|
||||
"@floating-ui/dom" "^1.2.1"
|
||||
vue-demi "^0.13.11"
|
||||
|
||||
"@headlessui/vue@^1.7.3":
|
||||
version "1.7.3"
|
||||
resolved "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.3.tgz"
|
||||
@ -5223,7 +5243,7 @@ vitest@^0.28.1:
|
||||
vite-node "0.28.1"
|
||||
why-is-node-running "^2.2.2"
|
||||
|
||||
vue-demi@*:
|
||||
vue-demi@*, vue-demi@^0.13.11:
|
||||
version "0.13.11"
|
||||
resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz"
|
||||
integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user