Add tooltip to inform what a locked value is
This commit is contained in:
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"
|
"lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@floating-ui/vue": "^0.2.1",
|
||||||
"@headlessui/vue": "^1.7.3",
|
"@headlessui/vue": "^1.7.3",
|
||||||
"@heroicons/vue": "^2.0.12",
|
"@heroicons/vue": "^2.0.12",
|
||||||
"@vueuse/core": "^9.12.0",
|
"@vueuse/core": "^9.12.0",
|
||||||
|
@ -5,10 +5,11 @@ import type { ValidDeposit } from "@/model/ValidDeposit";
|
|||||||
import type { WalletTransaction } from "@/model/WalletTransaction";
|
import type { WalletTransaction } from "@/model/WalletTransaction";
|
||||||
import { useEtherStore } from "@/store/ether";
|
import { useEtherStore } from "@/store/ether";
|
||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
import { ref, watch } from "vue";
|
import { ref, watch, onMounted } from "vue";
|
||||||
import SpinnerComponent from "../SpinnerComponent.vue";
|
import SpinnerComponent from "../SpinnerComponent.vue";
|
||||||
import { decimalCount } from "@/utils/decimalCount";
|
import { decimalCount } from "@/utils/decimalCount";
|
||||||
import { debounce } from "@/utils/debounce";
|
import { debounce } from "@/utils/debounce";
|
||||||
|
import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue";
|
||||||
|
|
||||||
const etherStore = useEtherStore();
|
const etherStore = useEtherStore();
|
||||||
|
|
||||||
@ -31,6 +32,12 @@ const isCollapsibleOpen = ref<boolean>(false);
|
|||||||
const validDecimals = ref<boolean>(true);
|
const validDecimals = ref<boolean>(true);
|
||||||
const validWithdrawAmount = ref<boolean>(true);
|
const validWithdrawAmount = ref<boolean>(true);
|
||||||
const enableConfirmButton = ref<boolean>(false);
|
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
|
// Debounce methods
|
||||||
const handleInputEvent = (event: any): void => {
|
const handleInputEvent = (event: any): void => {
|
||||||
@ -123,6 +130,18 @@ const getEventName = (event: string | undefined): string => {
|
|||||||
return possibleEventName[event];
|
return possibleEventName[event];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
useFloating(reference, floating, {
|
||||||
|
placement: "right",
|
||||||
|
middleware: [
|
||||||
|
offset(10),
|
||||||
|
flip(),
|
||||||
|
shift(),
|
||||||
|
arrow({ element: floatingArrow }),
|
||||||
|
],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
// watch props changes
|
// watch props changes
|
||||||
watch(props, async (): Promise<void> => {
|
watch(props, async (): Promise<void> => {
|
||||||
const itemsToShowQty = itemsToShow.value.length;
|
const itemsToShowQty = itemsToShow.value.length;
|
||||||
@ -144,7 +163,7 @@ showInitialItems();
|
|||||||
</div>
|
</div>
|
||||||
<div class="blur-container" v-if="!loadingWalletTransactions">
|
<div class="blur-container" v-if="!loadingWalletTransactions">
|
||||||
<div
|
<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"
|
v-if="props.validDeposits.length > 0"
|
||||||
>
|
>
|
||||||
<div class="flex justify-between items-center">
|
<div class="flex justify-between items-center">
|
||||||
@ -155,30 +174,55 @@ showInitialItems();
|
|||||||
<p class="text-xl leading-7 font-semibold text-gray-900">
|
<p class="text-xl leading-7 font-semibold text-gray-900">
|
||||||
{{ getRemaining() }} BRZ
|
{{ getRemaining() }} BRZ
|
||||||
</p>
|
</p>
|
||||||
<div class="flex gap-2" v-if="activeLockAmount != 0">
|
<div class="flex gap-2 w-32 sm:w-44" v-if="activeLockAmount != 0">
|
||||||
<span class="text-xs leading-4 font-normal text-gray-400">{{
|
<span class="text-xs font-normal text-gray-400" ref="infoText">{{
|
||||||
`com ${activeLockAmount} BRZ em lock`
|
`com ${activeLockAmount.toFixed(2)} BRZ em lock`
|
||||||
}}</span>
|
}}</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>
|
||||||
</div>
|
|
||||||
<div class="pt-5">
|
|
||||||
<div v-show="!isCollapsibleOpen" class="flex justify-end items-center">
|
<div v-show="!isCollapsibleOpen" class="flex justify-end items-center">
|
||||||
<div
|
<div
|
||||||
class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
|
class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
|
||||||
@click="[(isCollapsibleOpen = true)]"
|
@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>
|
<span class="last-release-info">Sacar</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pt-5">
|
||||||
<div v-show="isCollapsibleOpen" class="py-2 w-100">
|
<div v-show="isCollapsibleOpen" class="py-2 w-100">
|
||||||
<p class="text-sm leading-5 font-medium">Valor do saque</p>
|
<p class="text-sm leading-5 font-medium">Valor do saque</p>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
name=""
|
name=""
|
||||||
id=""
|
|
||||||
@input="debounce(handleInputEvent, 500)($event)"
|
@input="debounce(handleInputEvent, 500)($event)"
|
||||||
placeholder="0"
|
placeholder="0"
|
||||||
class="text-2xl text-gray-900 w-full outline-none"
|
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"
|
class="withdraw-button flex gap-2 items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
|
||||||
@click="callWithdraw"
|
@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>
|
<span class="last-release-info">Sacar</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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"
|
v-for="item in itemsToShow"
|
||||||
:key="item.blockNumber"
|
:key="item.blockNumber"
|
||||||
>
|
>
|
||||||
@ -315,12 +363,9 @@ p {
|
|||||||
.text {
|
.text {
|
||||||
@apply text-white text-center;
|
@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 {
|
.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 {
|
.grid-container {
|
||||||
@ -328,7 +373,11 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.last-release-info {
|
.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 {
|
.withdraw-button {
|
||||||
@ -344,4 +393,10 @@ input[type="number"]::-webkit-inner-spin-button,
|
|||||||
input[type="number"]::-webkit-outer-spin-button {
|
input[type="number"]::-webkit-outer-spin-button {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 640px) {
|
||||||
|
.md-view {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</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/properties" "^5.7.0"
|
||||||
"@ethersproject/strings" "^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":
|
"@headlessui/vue@^1.7.3":
|
||||||
version "1.7.3"
|
version "1.7.3"
|
||||||
resolved "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.3.tgz"
|
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"
|
vite-node "0.28.1"
|
||||||
why-is-node-running "^2.2.2"
|
why-is-node-running "^2.2.2"
|
||||||
|
|
||||||
vue-demi@*:
|
vue-demi@*, vue-demi@^0.13.11:
|
||||||
version "0.13.11"
|
version "0.13.11"
|
||||||
resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz"
|
resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz"
|
||||||
integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
|
integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
|
||||||
|
Loading…
x
Reference in New Issue
Block a user