-
Notifications
You must be signed in to change notification settings - Fork 31
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Staking draft #46
Draft
neokrept
wants to merge
65
commits into
master
Choose a base branch
from
staking-draft
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+3,949
−9
Draft
Staking draft #46
Changes from 1 commit
Commits
Show all changes
65 commits
Select commit
Hold shift + click to select a range
f9d889b
First staking UI step
neokrept d9e423a
2nd Step draft
neokrept 104935f
lint fixes + fix misc cross browser
neokrept 6ee7e99
ts fixes
neokrept 209128c
Staking Graph and misc fixes
neokrept 126be6b
Translation and type fixes
neokrept 041ef20
build fix
neokrept c173d36
misc
neokrept 37d64a8
misc
neokrept 29f75d0
build fix
neokrept 8b4fa5f
Validator filter search
neokrept 14c7a87
Update to search + star icons and misc styling fixes
neokrept 4d9efc3
Misc styling fixes
neokrept d9626b3
Updated Staking icon(s) + misc fixes
neokrept 98ba4bf
Amount slider POC
neokrept 6f59637
Slider adjustments & misc
neokrept a019ff1
Slider and basic components integration
neokrept fd296a7
Staking Workflow Steps 1-4 UC
neokrept 8f8f9a5
build fix
neokrept e1147aa
Slider and Amount fine tunning
neokrept 4342ea4
Staked UI screen first draft + misc
neokrept b6123d4
style adjustments already staked screen
neokrept 11e5314
First Screen refactor, validator icon proposal on storage + misc
neokrept 942e072
First screen details + Improvement proposal
neokrept 295c90e
build fix
neokrept 6a687e6
Slider functionality fixes
neokrept 3db0eee
fix
neokrept 2eea25c
Mid review refactoring + Graph page adjustments(tooltips)
neokrept 473cbd6
Filter sort
neokrept f7d4cc9
Tooltip details
neokrept 71018a7
Tooltip refactoring
neokrept 3b3c862
Tooltip corrections
neokrept 61d12dc
Mockpare
neokrept 0273383
First polish session
neokrept fa91f90
Reactive DevBar
neokrept 469ff34
Welcome screen polish #1(after redesign)
neokrept aec8ccb
Testnet support
neokrept 457c40f
First page /notion/ suggestions done
neokrept 16c9154
ValidatorList scroll fix
neokrept 6f6b78b
Refactoring, first commit
neokrept b2e7020
Graph page refactoring + polish + new feature
neokrept b847cab
dualSlider feature additions
neokrept 261332c
devbar improvement
neokrept 3f1d8f7
Polish Graph page and component
neokrept 24371b5
Restrict stake button on NIM
neokrept 7d71415
Staking flow refactoring
neokrept 3bdb0de
Staking flow + preview + edit
neokrept 5e9f2d1
Debugging cleanup
neokrept a9c4873
update documentation for mockpare
neokrept 27954c7
HeroStaking disabled state
neokrept ff37bed
Address selector overlay
neokrept c0399a4
Mobile developer toolkit adjustments
neokrept e460471
First two screens + dev mobile framework misc
neokrept a65f2d8
misc
neokrept c137e14
Misc
neokrept dda2e26
Recalibration for first screen
neokrept 1d31f9e
Dynamical Y in graph projection;Integration brushup;Mockpare better p…
neokrept f3774ae
Remove dev widgets and experiments
sisou 87def0c
Start cleaning up styles, structure of staking modals
sisou f1fb0dd
Clean up validator list and items, remove tooltips
sisou 8e39298
Clean up staking graph page
sisou 450f2a1
Fix staking status page
sisou a6a5b08
Refactor Staking store to store stake per address
sisou a44b57f
Clean up StakePreview and StakeAlreadyPage
sisou 729b6cd
Fix display of unregistered validators
sisou File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
First Screen refactor, validator icon proposal on storage + misc
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -12,13 +12,38 @@ | |
</template> | ||
</PageHeader> | ||
<PageBody> | ||
<StakingGraph :stakedAmount="currentStake" :apy="validator.reward" :key="graphUpdate" /> | ||
<div v-if="alreadyStaked === true"> | ||
<div v-if="alreadyStaked === true && showView === true"> | ||
<StakingGraph :stakedAmount="currentStake" | ||
:apy="validator.reward" :readonly="true" | ||
:period="{ | ||
s: NOW, | ||
p: 12, | ||
m: MONTH, | ||
}" | ||
:key="graphUpdate" /> | ||
<AlreadyStakedPartial | ||
:validator="validator" | ||
:availableBalance="availableBalance" /> | ||
:availableBalance="availableBalance" | ||
@adjust-stake="showView = false; showEdit = true;"/> | ||
</div> | ||
<div v-else> | ||
<StakingGraph v-if="alreadyStaked === true && showEdit === true" | ||
:stakedAmount="currentStake" :apy="validator.reward" | ||
:period="{ | ||
s: NOW, | ||
p: 12, | ||
m: MONTH, | ||
}" | ||
:key="graphUpdate" /> | ||
<StakingGraph v-else | ||
:stakedAmount="currentStake" :apy="validator.reward" | ||
:period="{ | ||
s: NOW, | ||
p: 12, | ||
m: MONTH, | ||
}" | ||
:key="graphUpdate" /> | ||
|
||
<StakeAmountSlider class="stake-amount-slider" | ||
:stakedAmount="currentStake" | ||
@amount-staked="updateStaked" | ||
|
@@ -44,13 +69,13 @@ | |
</template> | ||
|
||
<script lang="ts"> | ||
import { defineComponent, ref, onUnmounted } from '@vue/composition-api'; | ||
import { defineComponent, ref } from '@vue/composition-api'; | ||
import { Amount, PageHeader, PageBody } from '@nimiq/vue-components'; | ||
import { ValidatorData } from '../../stores/Staking'; | ||
import { useAddressStore } from '../../stores/Address'; | ||
|
||
import AlreadyStakedPartial from './partials/AlreadyStakedPartial.vue'; | ||
import StakingGraph from './graph/StakingGraph.vue'; | ||
import StakingGraph, { NOW, MONTH } from './graph/StakingGraph.vue'; | ||
import StakeAmountSlider from './StakeAmountSlider.vue'; | ||
import StakingIcon from '../icons/Staking/StakingIcon.vue'; | ||
import { i18n } from '../../i18n/i18n-setup'; | ||
|
@@ -62,7 +87,7 @@ export default defineComponent({ | |
setup(props) { | ||
const { activeAddressInfo } = useAddressStore(); | ||
|
||
const page = document.querySelector<HTMLElement>('.small-page'); | ||
// const page = document.querySelector<HTMLElement>('.small-page'); | ||
const graphUpdate = ref(0); | ||
// whole amount, including staking, check with design | ||
const availableBalance = ref(activeAddressInfo.value?.balance || 0); | ||
|
@@ -71,17 +96,19 @@ export default defineComponent({ | |
const validator = props.activeValidator; | ||
const unstakedAmount = ref(0); | ||
const alreadyStaked = ref(currentStake.value > 0.0 && validator !== null); | ||
const showView = ref(true); | ||
const showEdit = ref(false); | ||
|
||
validator.stakedAmount = currentStake.value; // temporary | ||
|
||
if (page !== null) { | ||
page!.style.width = '63.5rem'; | ||
} | ||
onUnmounted(() => { | ||
if (page !== null) { | ||
page.style.removeProperty('width'); | ||
} | ||
}); | ||
// if (page !== null) { | ||
// page!.style.width = '63.5rem'; | ||
// } | ||
// onUnmounted(() => { | ||
// if (page !== null) { | ||
// page.style.removeProperty('width'); | ||
// } | ||
// }); | ||
const updateStaked = (amount: number) => { | ||
if (amount !== currentStake.value) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Don't need to check for no-op. |
||
currentStake.value = amount; | ||
|
@@ -96,6 +123,8 @@ export default defineComponent({ | |
graphUpdate.value += 1; | ||
}; | ||
return { | ||
NOW, | ||
MONTH, | ||
NIM_DECIMALS, | ||
STAKING_CURRENCY: CryptoCurrency.NIM, | ||
DISPLAYED_DECIMALS: calculateDisplayedDecimals(unstakedAmount.value, CryptoCurrency.NIM), | ||
|
@@ -106,6 +135,8 @@ export default defineComponent({ | |
graphUpdate, | ||
currentStake, | ||
validator, | ||
showView, | ||
showEdit, | ||
alreadyStaked, | ||
availableBalance, | ||
unstakedAmount, | ||
|
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Make graph reactive to props' changes instead of the
graphUpdate
hack.This will avoid having to recreate the entire graph and playing the animation for each update.