feat: add Increase Stake Modal #13
Conversation
|
Deployed on https://increase-stake.pwn-staking-ui.pages.dev! |
components/IncreaseStakeModal.vue
Outdated
| <div class="increase-stake-modal__submit"> | ||
| <BaseTooltip | ||
| style="width: 100%" | ||
| v-if="isButtonDisabled" | ||
| :tooltip-text="tooltipText"> | ||
| <template #trigger> | ||
| <button | ||
| class="increase-stake-modal__submit-button" | ||
| :disabled="isButtonDisabled" | ||
| @click="increaseStakeAction"> | ||
| Confirm Increase | ||
| </button> | ||
| </template> | ||
| </BaseTooltip> | ||
| <button | ||
| v-else | ||
| class="increase-stake-modal__submit-button" | ||
| :disabled="isButtonDisabled" | ||
| @click="increaseStakeAction"> | ||
| Confirm Increase | ||
| </button> | ||
| </div> |
There was a problem hiding this comment.
let's make this button a primary button (with teal color)
| const currentLockUpEpochs = ref<number>(0) | ||
| const formattedStakeAmount = ref<string>() | ||
| export default function useIncreaseStakeModal() { | ||
| const openModal = (stakeIdVal: bigint, lockUpEpochs: number, stakeAmount: string) => { |
There was a problem hiding this comment.
if lockUpEpochs should be always int, imho we should call Math.floor in this function instead of places where we call this function (e.g. openModal(stake.id, Math.floor(stake.epochsRemaining), stake.amount) in TableOwnedPositions.vue
| formattedStakeAmount.value = stakeAmount | ||
| } | ||
|
|
||
| const calculateAvailableEpochs = (): number[] => { |
There was a problem hiding this comment.
minor: i'm not sure if it makes sense to display 0 epochs on the slider as option
| Increase Duration (in epochs) | ||
| </span> | ||
| </div> | ||
| <VueSlider |
There was a problem hiding this comment.
question: did you check if it's possible to make the slider values somehow non-linear in the switch between 5 years and 10 years, so there is actually bigger distance on the slider between the 5 years and 10 years prolong option?
There was a problem hiding this comment.
IMHO we should show date and not epochs as primary info for user, so e.g. on slider show new lockup date? feel free to check with Ork what makes most sense, but one of the feedback i received was to not use epochs as primary information for user and rather show them dates/durations, and if show epochs at all, then as a secondary information
There was a problem hiding this comment.
bugs related to handling of transaction:
- button is not in disabled state when transaction is pending
- UI does not reflect updated positions, it should trigger refetch after the tx is completed
- we should show some success message to user
For handling the TX and check for confirmation, we can probably copy our sendTransaction method from FE repo that should also take care of the contract wallets compatibility?
There was a problem hiding this comment.
after i've prolonged the duration of the stake, i got shown this message that I get the voting power in the next epoch... is that a correct behavior? if yes, then owner lose the voting power for the duration between increase and next epoch, right @ashhanai ? if yes, we should maybe put some note or something to inform the user that they will temporarily lose their voting power on that position?
There was a problem hiding this comment.
They will not lose it as the voting power decrease is also happening in the next epoch. The current epoch is always immutable, you cannot increase nor decrease its voting power.
| console.log('user stakes', userStakes) | ||
| console.log('user stakes next', userNextEpochStakes) |
| // console.log('Starting to send a transaction with following parameters:') | ||
| // console.log(transaction) | ||
| // console.log(`Additional UI parameter passed to sendTransaction: step=${step?.text}, safeAddress=${safeAddress}`) | ||
|
|
||
| const connectedChainId = getAccount(wagmiAdapter.wagmiConfig).chainId | ||
| console.log(`connectedChainId=${connectedChainId}; transaction.chainId=${transaction.chainId}`) | ||
|
|
||
| if (connectedChainId !== transaction.chainId) { | ||
| // console.log(`Switching chain from ${connectedChainId} to ${transaction.chainId}.`) |
There was a problem hiding this comment.
let's uncomment these imho, they are nice for debugging
| const currentLockUpEpochs = ref<number>(0) | ||
| const formattedStakeAmount = ref<string>() | ||
| export default function useIncreaseStakeModal() { | ||
| const openModal = (stakeIdVal: bigint, lockUpEpochs: number, stakeAmount: string) => { |
| // TODO LATER: also allow for increasing amount, now only works to increase time | ||
| const increaseStakeAction = async () => { | ||
| if (!stakeId.value || !address.value || !additionalLockUpEpochs.value) return console.error('Missing required values') | ||
| isPending.value = true | ||
| await sendTransaction({ | ||
| abi: VE_PWN_TOKEN_ABI, | ||
| address: VE_PWN_TOKEN[getChainIdTypesafe()], | ||
| functionName: 'increaseStake', | ||
| chainId: getChainIdTypesafe(), | ||
| args: [stakeId.value, address.value, 0n, BigInt(additionalLockUpEpochs.value)] | ||
| }) | ||
| invalidateUserStakesQuery() | ||
| isPending.value = false | ||
| isOpen.value = false | ||
| //todo: refetch data | ||
| } |
There was a problem hiding this comment.
this should be inside of useMutation, then we would not need to have separate isPending ref variable... also currently we do not handle correctly when user e.g. rejects the transaction - the button stays disabled with "Increasing..." text, which should also be resolved automatically when using useMutation
|
|
||
| watch(isOpen, (newVal) => { | ||
| if (newVal) { | ||
| additionalLockUpEpochs.value = calculatedEpochs.value[0] || 0 |
There was a problem hiding this comment.
should the additionalLockUpEpochs be computed?
| invalidateUserStakesQuery() | ||
| isPending.value = false | ||
| isOpen.value = false | ||
| //todo: refetch data |
There was a problem hiding this comment.
seems like we can remove this comment now?
task link
Todo:
[x] Check if the functionality is ok
[x] decide where to put the button for opening the modal