Staking withdrawals page #9248

wackerow · 2023-01-20T01:19:55Z

Description

MVP for new staking withdrawals page to live at /staking/withdrawals

Adds a widget for users to quickly check their validator withdrawal credentials
Explains who is affected that may need to act
Explains how staking withdrawals will function, keeping explanations higher level
Discussed Shanghai/Capella and timing
Provides resources for further reading

Information related to how validator operators actually update their credentials is out-of-scope for this page, and reserved for the Launchpad and peripheral resources.
More technical explanations of how EIP-4895 works will be reserved for future updates in the /developers/docs/ section of the site.

Preview link

https://ethereumorgwebsitedev01-stakingwithdrawals.gatsbyjs.io/en/staking/withdrawals

Related Issue

Epic: Staking Push Withdrawals #9101

with associated assets

TODO: update for intl

per figma design iteration and sync discussion

move mainnet/testnet toggle above index input. remove colored styling when toggled to the right. fixed default index of 0. added typing for handler.

0xMNG · 2023-01-23T23:38:21Z

src/content/staking/withdrawals/index.md

+  Staking withdrawals will be enabled through the Shanghai/Capella upgrade. This upgrade is expected to take place in the first half of 2023. <a href="#when">More below</a>
+</UpgradeStatus>
+
+The Shanghai/Capella upgrade enables **staking withdrawals** on Ethereum, allowing people to unlock rewards and optionally fully withdrawal funds from staking. Rewards payments will automatically and regularly be sent to a provided withdrawal address linked to each validator. Users can also exit staking entirely, unlocking their full validator balance.


Hi, I am a staker/front-end eng and would like to contribute. I'd like to start with documentation/copy. Let me know if I can help!

The Shanghai/Capella Ethereum upgrade will enable staking withdrawals. Staking withdrawals will allow validators to fully withdraw their deposited funds or withdraw the excess balance above 32 ETH.

Hey @0xMNG! Thanks for hoping in to help out.. I'll take a look through and see what we can incorporate.

Think we can use part of this in the next iteration, but we were looking to trim out the comment about full withdrawals towards the beginning since this is mentioned explicitly at the end.

Left a couple comments, pulled one suggestion in... a handful of them I felt were more semantic adjustments and wasn't sure they were adding too much, but I'm biased =) so I'll leave them for others to comment. Thank you for helping out!

More adjustments will continue to roll out here

Switch input to "string" type, allowing use of placeholder text, removing need for label. moves testnet toggle above input. adds flex-wrap. Hides long format withdrawal address on mobile.

remove custom card component, replace with existing Card component

two button approach, with condensed response and simplified copy function

samajammin · 2023-01-25T00:46:52Z

Design comment - I don't LOVE having the navigation for this page sit under the "staking options" dropdown... but I think it's good for a short-term solution (doesn't require any design changes):

samajammin · 2023-01-25T00:49:32Z

src/content/staking/withdrawals/index.md

+summaryPoints:
+  - The Shanghai upgrade brings staking withdrawals to Ethereum
+  - Validator operators must provide a withdrawal address to enable
+  - Rewards payments are automatically sent to the address provided every few days


Suggested change

- Rewards payments are automatically sent to the address provided every few days

- Reward payments are automatically sent to the address provided every few days

I think just "reward payments"? The double plural feels weird (but I'm no grammar expert)

Suggested change

- Rewards payments are automatically sent to the address provided every few days

- Rewards are automatically sent to the address provided every few days

Maybe the "payments" is not needed?

Agree that double plural is weird to me too, also agree that payments maybe arent needed

Advocating for "payments" as it distinguishes between just your earned rewards, and the act of moving those rewards in the form of a payment.

Given that these are "rewards", not "a single reward", and that we are talking about the payouts in a pluralistic way, as in "payments", that's why "rewards payments" was chosen here... But I get it... "Reward payments" is fine with me if people think it's too awkward

src/content/staking/withdrawals/index.md

TableContainer that start-aligns table on desktop, and centers on mobile, fitting the width to the content, and adds a 1rem gap to columns

Swapped Launchpad links to use Zhejiang branch since that is currently the only link that is functional. Will update when that page migrates to mainnet version of site.

src/content/staking/pools/index.md

Co-authored-by: Corwin Smith <[email protected]>

src/content/staking/solo/index.md

src/content/staking/withdrawals/index.md

corwintines

Awesome work @wackerow! This is great.

I left a couple of comments I had while going through this.

pettinarip

Wondering why we don't see the breadcrumbs for this page 🤔 I think we need to add it to the intl/en.json file first, right?

pettinarip · 2023-02-07T16:21:06Z

src/components/CopyToClipboard.tsx

+const CopyToClipboard: React.FC<IProps> = ({
+  children,
+  text,
+  inline = false,


Lets try to minimize the amount of props to keep the component as simple as possible. What do you think of the following idea:

// 1. extend the props interface IProps extends ChakraProps { ... } // 2. spread the rest of the props in the parent element <Box ref={targetEl} cursor="pointer" {...props}>

Now from the consumer side you could use chakra props to do what you want to do

<CopyToClipboard display="inline">

Sure... didn't want to creep into other components too much but I can fix this one up

src/components/Staking/ShanghaiCapella.tsx

pettinarip · 2023-02-07T16:37:57Z

src/components/Staking/WithdrawalsTabComparison.tsx

+            The majority of stakers did not provide a withdrawal address on
+            initial deposit, and will need to update their withdrawal
+            credentials. The{" "}
+            <Link href="https://zhejiang.launchpad.ethereum.org/withdrawals">


Lets use our internal Link component src/components/Link. This link should be external and open in a new tab.

Oh good catch, that was my intent. Will patch

Do me a favor and check your cache... this is working for me (arrow and opening in a new tab). Our Link component parses for this automatically so we shouldn't need this flag.

src/content/staking/withdrawals/index.md

pettinarip · 2023-02-07T16:43:57Z

src/content/staking/withdrawals/index.md

+
+Withdrawal functionality will be enabled through a two-part simultaneous network upgrade, **Shanghai + Capella**.
+
+<ShanghaiCapella />


Wondering if somehow we could write the content in the md file and accept it as its children 🤔 for translation concerns.

Same as above, I agree. Let's scope that to a subsequent initiative if you're okay with that.

pettinarip · 2023-02-07T16:47:32Z

src/components/Staking/WithdrawalCredentials.tsx

+        >
+          <Button
+            onClick={() => checkWithdrawalCredentials()}
+            disabled={!inputValue.length}


Since we have an isLoading flag, perhaps we could use this pattern https://chakra-ui.com/docs/components/button#button-loading-state instead of disabling the button.

<Button isLoading={isLoading}>

@pettinarip Not sure I understand... The disabled state is when no number is entered, not for when it's loading. Or are you referring to replacing the existing loading spinner with a loader inside the button?

I've removed the spinner below the input and replaced with isLoading on the button... I think this looked better. Kept the disabled state though when no number inputted.

Oh got it. Yeah, I thought you were disabling it when it was loading. Didn't realize that you had that other behavior.

pettinarip · 2023-02-07T16:52:55Z

src/content/staking/withdrawals/index.md

+
+### How do I prepare? {#how-do-i-prepare}
+
+<WithdrawalsTabComparison />


Same concern as before related to the ease of translation management.
It's not a blocker, but I think it's worth taking the time to consider later how to pass the content to this component from the .md file, instead of having the text living inside the component.

Agree. Plan is to publish this and then tee it up for translation. When we do that, we should look at this component and consider ways to improve it for this purpose.

Co-authored-by: Corwin Smith <[email protected]> Co-authored-by: Pablo Pettinari <[email protected]>

expand isLoading logic to designate which button was triggered

pettinarip

lgtm! great content @wackerow 👏🏼

corwintines

🚀

wackerow added 4 commits January 19, 2023 17:16

Create WithdrawalCredentials.tsx

05f22ef

add initial staking/withdrawals/index.md

627bc61

with associated assets

add page to dropdown menu

9970909

TODO: update for intl

add /withdraw redirect

0efe174

github-actions bot added content 🖋️ This involves copy additions or edits review needed 👀 labels Jan 20, 2023

wackerow added 5 commits January 19, 2023 19:17

linting

c81d12e

date update, lint

d72876b

lint

994e70a

copy button, fix 0 index, linting

83d7393

add testnet option for creds check

0b5115d

ethereum deleted a comment from gatsby-cloud bot Jan 23, 2023

wackerow added 3 commits January 23, 2023 12:41

content rearrangement and trimming

7b750e1

per figma design iteration and sync discussion

update WithdrawalCredentials

4de0910

move mainnet/testnet toggle above index input. remove colored styling when toggled to the right. fixed default index of 0. added typing for handler.

update CTA

6f1fb71

0xMNG reviewed Jan 23, 2023

View reviewed changes

wackerow added 10 commits January 23, 2023 16:57

add tabbed section for existing vs new stakers

8252264

Update WithdrawalCredentials.tsx

fc7da9c

Switch input to "string" type, allowing use of placeholder text, removing need for label. moves testnet toggle above input. adds flex-wrap. Hides long format withdrawal address on mobile.

implement WithdrawalsTabComparison

3939255

update copy, add FAQ items

a185a2e

"current" instead of "existing"

4aa1402

add ShanghaiCapella component

c3ef97d

implement ShanghaiCapella component

240c83c

use existing Card component

bf94d5f

remove custom card component, replace with existing Card component

refactor WithdrawalCredentials

3d294de

two button approach, with condensed response and simplified copy function

improve responsiveness

247f31a

samajammin reviewed Jan 25, 2023

View reviewed changes

src/content/staking/withdrawals/index.md Outdated Show resolved Hide resolved

samajammin reviewed Jan 25, 2023

View reviewed changes

src/content/staking/withdrawals/index.md Outdated Show resolved Hide resolved

wackerow requested review from corwintines, pettinarip, minimalsm and jmcook1186 as code owners February 6, 2023 21:09

wackerow and others added 4 commits February 6, 2023 14:29

add table layout styling

b1aa2ac

TableContainer that start-aligns table on desktop, and centers on mobile, fitting the width to the content, and adds a 1rem gap to columns

link and copy adjustments

f21eca9

Swapped Launchpad links to use Zhejiang branch since that is currently the only link that is functional. Will update when that page migrates to mainnet version of site.

typo fixes

ece2646

Fix italic markdown

03107c2

corwintines reviewed Feb 7, 2023

View reviewed changes

src/content/staking/pools/index.md Outdated Show resolved Hide resolved

Update src/content/staking/pools/index.md

11e1427

Co-authored-by: Corwin Smith <[email protected]>

corwintines reviewed Feb 7, 2023

View reviewed changes

src/content/staking/solo/index.md Outdated Show resolved Hide resolved

corwintines reviewed Feb 7, 2023

View reviewed changes

src/content/staking/withdrawals/index.md Outdated Show resolved Hide resolved

corwintines reviewed Feb 7, 2023

View reviewed changes

ethereum deleted a comment Feb 7, 2023

pettinarip reviewed Feb 7, 2023

View reviewed changes

src/content/staking/withdrawals/index.md Outdated Show resolved Hide resolved

pettinarip reviewed Feb 7, 2023

View reviewed changes

wackerow and others added 4 commits February 7, 2023 20:32

Apply suggestions from code review

18bf783

Co-authored-by: Corwin Smith <[email protected]> Co-authored-by: Pablo Pettinari <[email protected]>

Apply suggestions from code review

631ef7f

use isLoading button indicator

2519d0d

expand isLoading logic to designate which button was triggered

add breadcrumb string

2a0c01b

pettinarip approved these changes Feb 7, 2023

View reviewed changes

corwintines approved these changes Feb 7, 2023

View reviewed changes

corwintines merged commit 4af8357 into dev Feb 7, 2023

corwintines deleted the staking-withdrawals branch February 7, 2023 21:09

corwintines mentioned this pull request Feb 7, 2023

Deploy v7.3.0 #9424

Merged

wackerow mentioned this pull request Mar 14, 2023

[feat] Add video explainer to staking withdrawals #9720

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Staking withdrawals page #9248

Staking withdrawals page #9248

wackerow commented Jan 20, 2023 •

edited

Loading

0xMNG Jan 23, 2023 •

edited

Loading

wackerow Jan 25, 2023

wackerow Jan 25, 2023

samajammin commented Jan 25, 2023

samajammin Jan 25, 2023

0xMNG Jan 25, 2023

konopkja Jan 25, 2023

wackerow Jan 25, 2023

corwintines left a comment

pettinarip left a comment

pettinarip Feb 7, 2023

wackerow Feb 7, 2023

pettinarip Feb 7, 2023

wackerow Feb 7, 2023

wackerow Feb 7, 2023

pettinarip Feb 7, 2023

wackerow Feb 7, 2023

pettinarip Feb 7, 2023

wackerow Feb 7, 2023

wackerow Feb 7, 2023

pettinarip Feb 7, 2023

pettinarip Feb 7, 2023

wackerow Feb 7, 2023

pettinarip left a comment

corwintines left a comment

	- Rewards payments are automatically sent to the address provided every few days
	- Reward payments are automatically sent to the address provided every few days

	- Rewards payments are automatically sent to the address provided every few days
	- Rewards are automatically sent to the address provided every few days


		Withdrawal functionality will be enabled through a two-part simultaneous network upgrade, Shanghai + Capella.

		<ShanghaiCapella />


		### How do I prepare? {#how-do-i-prepare}

		<WithdrawalsTabComparison />

Staking withdrawals page #9248

Staking withdrawals page #9248

Conversation

wackerow commented Jan 20, 2023 • edited Loading

Description

Preview link

Related Issue

0xMNG Jan 23, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samajammin commented Jan 25, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

corwintines left a comment

Choose a reason for hiding this comment

pettinarip left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pettinarip left a comment

Choose a reason for hiding this comment

corwintines left a comment

Choose a reason for hiding this comment

wackerow commented Jan 20, 2023 •

edited

Loading

0xMNG Jan 23, 2023 •

edited

Loading