Skip to content

Commit

Permalink
Remove dev widgets and experiments
Browse files Browse the repository at this point in the history
  • Loading branch information
@sisou
sisou committed Sep 30, 2021
1 parent 1d31f9e commit f3774ae
Show file tree
Hide file tree
Showing 8 changed files with 30 additions and 537 deletions.
4 changes: 0 additions & 4 deletions src/components/layouts/AccountOverview.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@
<MenuIcon/>
<AttentionDot v-if="updateAvailable"/>
</button>
<DevBar v-if="isMobile" />
<button class="reset consensus" @click="$router.push('/network').catch(() => {})">
<ConsensusIcon/>
</button>
Expand Down Expand Up @@ -139,8 +138,6 @@ import { CryptoCurrency } from '../../lib/Constants';
import { useBtcNetworkStore } from '../../stores/BtcNetwork';
import { useSettingsStore } from '../../stores/Settings';
import DevBar from '../widgets/DevBar.vue';
const BTC_ACTIVATION_SHOWN_STORAGE_KEY = 'btc-activation-modal-shown';
export default defineComponent({
Expand Down Expand Up @@ -253,7 +250,6 @@ export default defineComponent({
Amount,
FiatConvertedAmount,
AttentionDot,
DevBar,
StakingSummary,
},
});
Expand Down
5 changes: 0 additions & 5 deletions src/components/layouts/AddressOverview.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<template>
<div class="address-overview"
:class="{ 'no-accounts flex-column': !activeAddressInfo && activeCurrency !== CryptoCurrency.BTC }">
<DevBar v-if="!isMobile" />
<template v-if="activeAddressInfo || activeCurrency === CryptoCurrency.BTC">
<div class="actions-mobile flex-row">
<button class="reset icon-button" @click="$router.back()"><ArrowLeftIcon/></button>
Expand Down Expand Up @@ -206,7 +205,6 @@ import StakeButtonPartial from '../stake/partials/StakeButtonPartial.vue';
import RenameIcon from '../icons/AccountMenu/RenameIcon.vue';
import RefreshIcon from '../icons/RefreshIcon.vue';
import DevBar from '../widgets/DevBar.vue';
import { useAccountStore } from '../../stores/Account';
import { useAddressStore } from '../../stores/Address';
Expand Down Expand Up @@ -262,7 +260,6 @@ export default defineComponent({
});
const { width: windowWidth } = useWindowSize();
const isMobile = computed(() => windowWidth.value <= 700);
const addressMaskedWidth = computed(() => windowWidth.value > 1160
? 396
Expand Down Expand Up @@ -313,7 +310,6 @@ export default defineComponent({
promoBoxVisible,
setPromoBoxVisible,
onTransactionListScroll,
isMobile,
};
},
components: {
Expand All @@ -337,7 +333,6 @@ export default defineComponent({
EventIcon,
CrossIcon,
CrossCloseButton,
DevBar,
StakePreviewPartial,
StakeButtonPartial,
},
Expand Down
61 changes: 12 additions & 49 deletions src/components/stake/StakeAmountSlider.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,12 @@
<div class="slider-controls" ref="$slide" @click="onMove($event, true);">
<div class="slider-controls-wrapper">
<div class="slider-progress-bar" ref="$progressBar" />
<div class="slider-dual"
v-if="ENABLED.dualSlider"
ref="$dualSlider" />
<div class="slider-knob"
ref="$knob"
@touchstart="atClick"
@mousedown="atClick">
<OneLeafStakingIcon v-if="currentPercentage < 50 && !ENABLED.dualSlider" />
<StakingIcon v-else-if="currentPercentage < 75 && !ENABLED.dualSlider" />
<OneLeafStakingIcon v-if="currentPercentage < 50" />
<StakingIcon v-else-if="currentPercentage < 75" />
<ThreeLeafStakingIcon v-else />
</div>
</div>
Expand All @@ -60,7 +57,6 @@
import { Ref, defineComponent, ref, computed, onMounted } from '@vue/composition-api';
import { Amount } from '@nimiq/vue-components';
import { useAddressStore } from '../../stores/Address';
import { ENABLED_FEATURES as ENABLED } from '../widgets/DevBar.vue';
import { calculateDisplayedDecimals, formatAmount } from '../../lib/NumberFormatting';
import StakingIcon from '../icons/Staking/StakingIcon.vue';
Expand Down Expand Up @@ -115,6 +111,12 @@ const extractEventPosition = (e: MouseEvent | TouchEvent):Point => {
};
export default defineComponent({
props: {
stakedAmount: {
type: Number,
required: true,
},
},
setup(props, context) {
const { activeAddressInfo } = useAddressStore();
Expand Down Expand Up @@ -161,7 +163,6 @@ export default defineComponent({
const $container = ref<HTMLElement>(null);
const $knob = ref<HTMLElement>(null);
const $slide = ref<HTMLElement>(null);
const $dualSlider = ref<HTMLElement>(null);
const $backgroundLinesLeft = ref<HTMLElement>(null);
const $backgroundMiddlePlant = ref<HTMLElement>(null);
const $backgroundLinesRight = ref<HTMLElement>(null);
Expand Down Expand Up @@ -249,31 +250,13 @@ export default defineComponent({
const offsetX = getPointAtPercent(percent);
currentAmount.value = (percent / 100) * availableAmount.value!;
if (alreadyStaked.value === true) {
if (alreadyStaked.value) {
if (percent < alreadyStakedPercentage.value) {
if (!skipSignals) {
context.emit('amount-unstaked', alreadyStakedAmount.value - currentAmount.value);
}
if (ENABLED.dualSlider) {
$dualSlider.value!.style.display = 'inline-block';
$dualSlider.value!.style.width = `${(initialX + knobBox.width) - offsetX}px`;
$dualSlider.value!.style.left = `${offsetX}px`;
$dualSlider.value!.style.border = '0.25rem solid var(--nimiq-gold)';
$dualSlider.value!.style.background = 'radial-gradient(100% 100% at 100% 100%'
+ ', rgba(33, 186, 163, 0.1) 0%, rgba(33, 186, 163, 0.9) 100%)';
}
} else {
if (ENABLED.dualSlider && percent > alreadyStakedPercentage.value) {
$dualSlider.value!.style.display = 'inline-block';
$dualSlider.value!.style.width = `${(offsetX - initialX) + knobBox.width}px`;
$dualSlider.value!.style.left = `${initialX}px`;
$dualSlider.value!.style.border = '0';
$dualSlider.value!.style.background = 'radial-gradient(100% 100% at 100% 100%'
+ ', #15a2da 0%, #0582ca 100%)';
}
if (!skipSignals) {
context.emit('amount-unstaked', 0);
}
} else if (!skipSignals) {
context.emit('amount-unstaked', 0);
}
}
if (!skipSignals) {
Expand Down Expand Up @@ -351,16 +334,13 @@ export default defineComponent({
if (alreadyStaked.value) {
$dotIndicator.value!.style.left = `${getPointAtPercent(alreadyStakedPercentage.value!)
+ (knobBox.width / 2) - 5}px`;
if (!ENABLED.dualSlider) {
fillBackground(0, alreadyStakedPercentage.value);
}
fillBackground(0, alreadyStakedPercentage.value);
}
});
return {
NIM_DECIMALS,
STAKING_CURRENCY: CryptoCurrency.NIM,
DISPLAYED_DECIMALS: calculateDisplayedDecimals(availableAmount.value!, CryptoCurrency.NIM),
ENABLED,
readonly,
atClick,
onMove,
Expand All @@ -383,16 +363,9 @@ export default defineComponent({
$backgroundRightPlant,
$progressBar,
$dotIndicator,
$dualSlider,
buildSVG,
};
},
props: {
stakedAmount: {
type: Number,
required: true,
},
},
components: {
Amount,
StakingIcon,
Expand Down Expand Up @@ -550,16 +523,6 @@ export default defineComponent({
height: 100%;
border-radius: 3rem;
}
.slider-dual {
display: none;
position: absolute;
left: 0;
top: 0;
background: none;
height: 100%;
border: 0.25rem solid var(--nimiq-gold);
border-radius: 3rem;
}
.slider-knob {
display: flex;
position: absolute;
Expand Down
16 changes: 3 additions & 13 deletions src/components/stake/StakeInfoPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,11 @@
</PageHeader>
<PageBody>
<div class="staking-rounded-background">
<div class="staking-icons-lace" :class="{ necklace: ENABLED.necklace }">
<div class="staking-icons-lace">
<img v-for="(icon, index) in orderOfValidators"
:key="index"
:src="`/img/staking/providers/${icon}`"
:style="{
top: `${((Math.sin((index + 1) * (Math.PI / 10))) * 25)
+ (ENABLED.necklace ? progression(index, orderOfValidators.length)*28 : 0)}px`,
width: ENABLED.necklace?`${progression(index, orderOfValidators.length) * 7.0}rem`:'',
height: ENABLED.necklace?`${progression(index, orderOfValidators.length) * 7.0}rem`:'',
}"
:style="{top: `${((Math.sin((index + 1) * (Math.PI / 10))) * 25)}px`}"
/>
</div>
<div class="staking-under-icons-text">
Expand All @@ -43,7 +38,6 @@
import { defineComponent } from '@vue/composition-api';
import { PageHeader, PageBody } from '@nimiq/vue-components';
import { ValidatorData } from '../../stores/Staking';
import { ENABLED_FEATURES as ENABLED } from '../widgets/DevBar.vue';
import StakingHeroIcon from '../icons/Staking/StakingHeroIcon.vue';
const progression = (i:number, n:number) => {
Expand All @@ -61,7 +55,6 @@ export default defineComponent({
(validator: ValidatorData) => validator.icon,
);
return {
ENABLED,
progression,
orderOfValidators: sortedSequence.reverse().concat(
sortedSequence.filter((item, index) => (index > 0)),
Expand Down Expand Up @@ -132,10 +125,7 @@ export default defineComponent({
white-space: nowrap;
width: 95%;
margin: auto;
&.necklace {
top: -3.5rem;
left: -2.5rem;
}
img {
position: relative;
width: 5.375rem;
Expand Down
36 changes: 15 additions & 21 deletions src/components/stake/partials/StakeButtonPartial.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
<div slot="trigger">
<button class="stake"
:class="{
stackattack: stackattack,
disabled: !activeAddressInfo || !activeAddressInfo.balance,
inverse: inversePalette,
}" @click="$router.push('/stake')"
Expand All @@ -24,7 +23,6 @@
<div class="stake"
v-if="!asButton"
:class="{
stackattack: stackattack,
inverse: inversePalette,
}">
<StakingHeroIcon />
Expand All @@ -38,13 +36,11 @@ import { Tooltip } from '@nimiq/vue-components';
import { useAddressStore } from '../../../stores/Address';
import { useAccountStore } from '../../../stores/Account';
import { useStakingStore } from '../../../stores/Staking';
import { ENABLED_FEATURES as ENABLED } from '../../widgets/DevBar.vue';
import StakingHeroIcon from '../../icons/Staking/StakingHeroIcon.vue';
export default defineComponent({
setup() {
const stackattack = computed(() => ENABLED.stackattack);
const { activeAddressInfo } = useAddressStore();
const { activeCurrency } = useAccountStore();
const { activeValidator } = useStakingStore();
Expand All @@ -53,7 +49,6 @@ export default defineComponent({
return {
visible,
stackattack,
activeCurrency,
activeAddressInfo,
};
Expand Down Expand Up @@ -85,27 +80,26 @@ export default defineComponent({
padding: 0;
margin-left: 0.5rem;
transition: opacity 1s ease-in-out;
svg {
width: 6.75rem;
height: 6.75rem;
}
&.stackattack {
svg {
animation: flicker 15s ease alternate infinite;
path:nth-child(1), path:nth-child(2), path:nth-child(4) {
animation: fastwave 3s ease alternate infinite;
}
path:nth-child(1) {
animation-delay: .5s;
}
path:nth-child(2) {
animation-delay: .7s;
}
path:nth-child(4) {
animation-delay: .9s;
}
animation: flicker 15s ease alternate infinite;
path:nth-child(1), path:nth-child(2), path:nth-child(4) {
animation: fastwave 3s ease alternate infinite;
}
path:nth-child(1) {
animation-delay: .5s;
}
path:nth-child(2) {
animation-delay: .7s;
}
path:nth-child(4) {
animation-delay: .9s;
}
}
&.disabled {
svg {
animation: initial;
Expand Down
Loading

0 comments on commit f3774ae

Please sign in to comment.