matheo/wip/unstaking-ui-update

src/components/CountrySelector.vue

@@ -4,7 +4,7 @@
             <slot name="trigger">
                 <div class="flex-row">
                     <CountryFlag :code="currentCountryCode || 'all'" />
-                    <img src="../assets/arrow-down.svg" alt="open"/>
+                    <img src="../assets/mini-arrow-down.svg" alt="open"/>
                 </div>
             </slot>
         </button>

src/components/icons/ArrowDownIcon.vue

@@ -0,0 +1,6 @@
+<template functional>
+    <svg class="nq-icon arrow-down-icon" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 11"
+        stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="m8 6.696-3.5 3.5-3.5-3.5M4.45 9.154v-7.6"/>
+    </svg>
+</template>

src/components/layouts/Settings.vue

@@ -626,7 +626,7 @@ select {
     }
 
     background-color: transparent;
-    background-image: url('../../assets/arrow-down.svg');
+    background-image: url('../../assets/mini-arrow-down.svg');
     background-size: 1.25rem;
     background-repeat: no-repeat;
     background-position-x: calc(100% - 1.75rem);

src/components/modals/BuyOptionsModal.vue

@@ -12,7 +12,7 @@
                         <CircleSpinner v-else/>
                         <span v-if="country">{{ country.name }}</span>
                         <span v-else>{{ $t('Loading...') }}</span>
-                        <img src="../../assets/arrow-down.svg" alt="open"/>
+                        <img src="../../assets/mini-arrow-down.svg" alt="open"/>
                     </div>
                 </CountrySelector>
             </header>

src/components/modals/HistoryExportModal.vue

@@ -193,7 +193,7 @@ select {
     }
 
     background-color: transparent;
-    background-image: url('../../assets/arrow-down.svg');
+    background-image: url('../../assets/mini-arrow-down.svg');
     background-size: 1.25rem;
     background-repeat: no-repeat;
     background-position-x: calc(100% - 1.75rem);

src/components/staking/AmountSlider.vue

@@ -62,7 +62,6 @@
 <script lang="ts">
 import { Ref, defineComponent, ref, computed, onMounted, onBeforeUnmount } from '@vue/composition-api';
 import { useAddressStore } from '../../stores/Address';
-import { MIN_STAKE } from '../../lib/Constants';
 
 import VerticalLineIcon from '../icons/Staking/VerticalLineIcon.vue';
 import AnimatedLeafIcon from '../icons/Staking/AnimatedLeafIcon.vue';
@@ -155,7 +154,7 @@ export default defineComponent({
 
         function updateInputWidth(value?: string) {
             inputAmountWidth.value = estimateTextWidth(
-                value || $stakedNIMAmount.value?.value || (MIN_STAKE / 1e5).toString(),
+                value || $stakedNIMAmount.value?.value || '0',
                 9,
             ) + 69;
         }
@@ -166,12 +165,11 @@ export default defineComponent({
             const newValue = $stakedNIMAmount.value?.value
                 ? Math.min(
                     maxValue,
-                    parseInt($stakedNIMAmount.value?.value, 10),
+                    parseFloat($stakedNIMAmount.value?.value),
                 ) : false;
 
-            // TODO: Should we take decimals into account? like 10000.0123 NIM instead of 1000?
-            if (newValue) {
-                $stakedNIMAmount.value!.value = Math.floor(newValue).toString();
+            if (newValue !== false) {
+                $stakedNIMAmount.value!.value = newValue.toString();
             }
         }
 
@@ -199,10 +197,6 @@ export default defineComponent({
         const $stakedNIMAmount = ref<HTMLInputElement>(null);
         const $dotIndicator = ref<HTMLElement>(null);
 
-        const minimumStakePercent = computed(() => availableAmount.value < MIN_STAKE
-            ? Infinity // Makes it impossible to move the mouse above half the `minimumStakePercent`
-            : (MIN_STAKE / availableAmount.value) * 100);
-
         const atClick = (e: MouseEvent | TouchEvent) => {
             e.preventDefault();
 
@@ -225,16 +219,14 @@ export default defineComponent({
         const updateAmount = async (e: MouseEvent | TouchEvent | { target: HTMLInputElement }) => {
             const target = e.target as HTMLInputElement;
 
-            let valueNim = (parseInt(target.value.replace(/[^\d.]/g, ''), 10) || 0) * 1e5;
+            const valueNim = (parseFloat(target.value.replace(/[^\d.]/g, '')) || 0) * 1e5;
 
             if (!firstRender && valueNim > currentAmount.value) {
                 window.clearTimeout(timeoutID);
                 animate.value = true;
                 await context.root.$nextTick();
             }
 
-            // Ensure the entered amount does not fall below the minimum stake or already staked amount
-            valueNim = Math.max(valueNim, MIN_STAKE, alreadyStakedAmount.value);
             const amount = Math.max(
                 0,
                 Math.min(availableAmount.value, valueNim),
@@ -291,31 +283,24 @@ export default defineComponent({
             context.emit('amount-chosen', 0);
         };
 
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const onMove = (e: MouseEvent | TouchEvent, execute = false, skipSignals = false) => {
-            // if (execute !== true) return;
             const position = extractEventPosition(e);
             if (!position || !pivotPoint) return;
 
             position.x += $container.value?.closest('.small-page')?.scrollLeft || 0;
 
-            let percent = Math.min(100, Math.max(0,
+            const percent = Math.min(100, Math.max(0,
                 (100 * (position.x - pivotPoint.x - sliderBox.x)) / (sliderBox.width - knobBox.width),
             ));
-            // Ensure the slider does not go below the minimum stake percentage
-            percent = Math.max(minimumStakePercent.value, alreadyStakedPercentage.value, percent);
 
             const offsetX = getPointAtPercent(percent);
             let newAmount;
 
             if (percent === 100) {
-                // Set the current amount to the full available amount with decimals
                 newAmount = availableAmount.value;
             } else {
-                // Calculate new amount from slider's position, ensuring it's not below minimum prestake
                 newAmount = Math.floor(((percent / 100) * availableAmount.value) / 1e5) * 1e5;
-                // Prevent reducing below MIN_STAKE or already staked amount
-                newAmount = Math.max(newAmount, MIN_STAKE, alreadyStakedAmount.value);
+                newAmount = Math.max(newAmount, 0);
             }
 
             currentAmount.value = newAmount;

src/components/staking/StakingGraphPage.vue

@@ -122,7 +122,7 @@ export default defineComponent({
         }
 
         async function performStaking() {
-            if (newStake.value < MIN_STAKE) return;
+            if (isStakeBelowMinimum.value) return;
 
             const validatorLabelOrAddress = 'label' in activeValidator.value!
                 ? activeValidator.value.label
@@ -279,7 +279,7 @@ export default defineComponent({
             }
         }
 
-        const isStakeBelowMinimum = computed(() => newStake.value < MIN_STAKE);
+        const isStakeBelowMinimum = computed(() => newStake.value < MIN_STAKE && newStake.value > 0);
 
         return {
             // NOW,