Skip to content
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.

Sign up for GitHub

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

Jump to bottom

dApp staking v3 period 2 updates #1302

Merged
merged 23 commits into from
Jun 13, 2024
Merged

dApp staking v3 period 2 updates #1302

merged 23 commits into from
Jun 13, 2024

Conversation

bobo-k2
Copy link
Contributor

@bobo-k2 bobo-k2 commented Jun 4, 2024 •
edited
Loading

Pull Request Summary

This PR contains

  • dApp staking page redesign
  • new voting component
  • statistics for previous period
  • new banners for vote and build subperiods
image

NOTE
Staked amount and dApp earner data is currently available for Shibuya only. Astar and Shiden data indexing is in progress
image

Check list

  • contains breaking changes
  • adds new feature
  • modifies existing feature (bug fix or improvements)
  • relies on other tasks
  • documentation changes
  • tested on mobile devices

@bobo-k2
New staking component (#1291)
9bf24d4 
* Basic selectable components

* Categories and dApps lists

* Basic navigation flow

* Enter amount and dapp search

* Started with useVote and OverviewPanel

* Review panel

* Chose amount updates

* Working sample

* Go back button

* Optimize for mobile

* Preselect a dApp to vote

* Cleanup

* Transfer stake

* Minor styling and logic updated

* PR comments resolved
@bobo-k2
Merge branch 'main' into feat/dapp-staking-v3-period2
33fce1c
@github-actions GitHub Actions
Copy link

github-actions bot commented Jun 4, 2024 •
edited
Loading

Visit the preview URL for this PR (updated for commit 0361f20):

https://astar-apps--pr1302-feat-dapp-staking-v3-osofs9cr.web.app

(expires Thu, 20 Jun 2024 13:40:56 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: dd76fe72958fe2910fef9d53f0b4539b82b849db

@bobo-k2
Sub period info components (#1301)
a975707 
* Period info component

* Period info component

* Show only on voting period

* Build and earn period component

* Remove data toggle button

* Null ref fix
@bobo-k2
Period stats component (#1306)
a911ad3 
* Components definition

* Merge

* Period statistics component and data fetching

* Default API improvements, TVL ratio calculation

* Put toggle button back
@ayumitk ayumitk mentioned this pull request Jun 11, 2024
Merged
7 tasks
@ayumitk @bobo-k2
Update dapp staking v3 period2 styling (#1309)
352c32e 
* add background image to the dApp staking top page

* adjust info width and mergin

* update leaderboard styles

* update dapps list style

* update data style

* update dark style

* fix width and margin

* staking flow styling for desktop

* fix dapp card whitespace

* update voting wizard mobile style

* update voting page styles

* update stats styles

* add go back button

* replace values to placeholder

* add voting note to voting wizard component

* voting period info styles

* update text color for the dark theme

* Add missing values

* Display previous period number

---------

Co-authored-by: Bobo <bobo.kovacevic@gmail.com>
@Kahonnohak
Copy link
Contributor

@ayumitk

Would be great If you can highlight the section 2 when user come to staking page from project page
Screenshot 2024-06-11 at 09 31 13

@bobo-k2 @ayumitk
APR calculations at given block + voting period ad (#1310)
82be322 
* APR calculations for the given block

* Apr hook refactoring

* Tokens to be burned calculation for any block

* Voting period ad

* adjust banner styling

* Added missing values

* Fix calculation if current period is 1 (no previous period)

---------

Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com>
@bobo-k2 bobo-k2 marked this pull request as ready for review June 11, 2024 09:28
@bobo-k2
Copy link
Contributor Author

bobo-k2 commented Jun 11, 2024 •
edited
Loading

@ayumitk

Would be great If you can highlight the section 2 when user come to staking page from project page

I fixed that in commit af7d7c9

@bobo-k2 bobo-k2 changed the title dApp staking v3 period2 dApp staking v3 period 2 updates Jun 11, 2024
@Kahonnohak
Copy link
Contributor

@ayumitk

Sorry for checking slow. I found two issues on mobile

  1. Button doesn't have colour, is the animation not working? I do remember I had issue with the button but only had a single colour on it, did not look into it at that time.
    IMG_4067

  2. the layout of this section is not right, have you changed anything? Please check the current layout
    IMG_4068

Screenshot 2024-06-12 at 16 08 53

@bobo-k2
Copy link
Contributor Author

bobo-k2 commented Jun 12, 2024

@Kahonnohak I changed layout of Tier a bit (added tier threshold value) to match Figma
image

@Kahonnohak
Copy link
Contributor

@bobo-k2 not the title design, but how it scrolls (to the side) it is little funny at this moment and want to have the current production scroll back. (Each tier has the box, and next box is shown on the right)

@ayumitk
Copy link
Contributor

ayumitk commented Jun 12, 2024

  1. Button doesn't have colour, is the animation not working? I do remember I had issue with the button but only had a single colour on it, did not look into it at that time.
  2. the layout of this section is not right, have you changed anything? Please check the current layout

@Kahonnohak @bobo-k2 I've fixed them in commit db560fd and 8df5a04.

The button animation doesn't work on mobiles, so I added the gradient background colour.

gtg7784
gtg7784 approved these changes Jun 13, 2024
View reviewed changes
Copy link
Member

@gtg7784 gtg7784 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

src/staking-v3/components/PeriodInfoBuild.vue
<span>{{ protocolState?.periodInfo.number.toString().padStart(3, '0') ?? '--' }}</span>
<span>{{ $t('stakingV3.buildAndEarn') }}</span>
</div>
<div></div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why here is another empty div?

src/consts.ts Show resolved Hide resolved
impelcrypto
impelcrypto approved these changes Jun 13, 2024
View reviewed changes
Copy link
Member

@impelcrypto impelcrypto left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Perhaps we might want to update the words in the toast.
image

@bobo-k2
Copy link
Contributor Author

bobo-k2 commented Jun 13, 2024

LGTM

Perhaps we might want to update the words in the toast.

Thank you, fixed in 0678197

gtg7784 and others added 2 commits June 13, 2024 18:54
@gtg7784
Fix/dapp staking animation (#1314)
eef4290 
* add three.js dependency

* refacor to not use iframe

* update iframe styles

* fix renderer small issue

* update renderer size to reduce period of only depp blue
@bobo-k2
Vote banner update
0361f20
Kahonnohak
Kahonnohak approved these changes Jun 13, 2024
View reviewed changes
Copy link
Contributor

@Kahonnohak Kahonnohak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@bobo-k2 bobo-k2 merged commit 06454e2 into main Jun 13, 2024
8 of 9 checks passed
@bobo-k2 bobo-k2 deleted the feat/dapp-staking-v3-period2 branch June 13, 2024 13:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@gtg7784 gtg7784 gtg7784 approved these changes

@Kahonnohak Kahonnohak Kahonnohak approved these changes

@impelcrypto impelcrypto impelcrypto approved these changes

@ayumitk ayumitk Awaiting requested review from ayumitk

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@bobo-k2 @Kahonnohak @ayumitk @gtg7784 @impelcrypto