Wallet validator staking #6825

Jibz1 · 2022-12-15T12:28:01Z

Combined previous PRs

Screen.Recording.2022-12-20.at.10.24.26.AM.mov

adjusted Unstake All SUI position

vercel · 2022-12-15T12:28:04Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

3 Ignored Deployments

Name	Status	Updated
explorer	⬜️ Ignored (Inspect)	Jan 14, 2023 at 1:11AM (UTC)
explorer-storybook	⬜️ Ignored (Inspect)	Jan 14, 2023 at 1:11AM (UTC)
wallet-adapter	⬜️ Ignored (Inspect)	Jan 14, 2023 at 1:11AM (UTC)

github-actions · 2022-12-15T13:24:53Z

💳 Wallet Extension has been built, you can download the packaged extension here: https://github.com/MystenLabs/sui/actions/runs/3707482672#artifacts

mystie711 · 2022-12-15T17:07:55Z

The wallet build doesn't seem to have the Staking feature working.
Is there a way to check it out?

Jibz1 · 2022-12-15T17:10:07Z

The wallet build doesn't seem to have the Staking feature working.
Is there a way to check it out?

@mystie711 The PR is broken into smaller chunks for review. So this PR has the detail and landing section.

Jordan-Mysten

Some small things. In general this is reminding me that we really need to invest more in good base UI components for the wallet. So much of this UI is built ad-hoc which will make it a pain to keep visually updated.

apps/wallet/tailwind.config.js

Jordan-Mysten · 2022-12-19T17:47:56Z

apps/wallet/src/ui/styles/global.scss

@@ -67,3 +67,8 @@ textarea {
 textarea {
    font-family: InterVariable, sans-serif;
 }
+
+#floating-ui-root {


Do we also need to set this when using floating UI?

yes floating UI appears behind the modal.

apps/wallet/src/ui/app/staking/home/Stake.tsx

apps/wallet/src/ui/app/staking/validator-detail/index.tsx

mystie711 · 2022-12-20T13:23:29Z

mystie711 · 2022-12-20T13:29:32Z

mystie711 · 2022-12-20T13:30:57Z

Please add a video wherever relevant. It's hard to provide feedback on some interaction and visual details without it. Happy to not have video as requirement if you pull me into Slack huddle sessions or just share it with me there.

Jibz1 · 2022-12-20T15:31:16Z

@mystie711 see the video and image update

Jordan-Mysten · 2023-01-07T01:18:47Z

apps/wallet/src/ui/app/shared/text/index.tsx

            'sui-dark': 'text-sui-dark',
            sui: 'text-sui',
            'sui-light': 'text-sui-light',
            steel: 'text-steel',
            'steel-dark': 'text-steel-dark',
            'steel-darker': 'text-steel-darker',
            'hero-dark': 'text-hero-dark',
+            'success-dark': 'text-success-dark',


Can you also add these changes to Text over in the explorer so that these components are in-sync?

Jordan-Mysten · 2023-01-07T01:21:13Z

apps/wallet/src/ui/app/staking/validators/index.tsx

+    const accountAddress = useAppSelector(({ account }) => account.address);
+    const { data, isLoading } = useGetObject(STATE_OBJECT);
+
+    const validatorsData =


I actually think this probably would be a better fit for living in the ValidatorsCard itself vs having it fetched here then passed down. The only thing that it's actually used for here is conditional rendering of ValidatorsCard vs SelectValidatorCard, but you could even do that in the ValidatorCard itself.

Jordan-Mysten · 2023-01-07T01:21:44Z

apps/wallet/src/ui/app/staking/validators/ValidatorsCard.tsx

+                                        weight="semibold"
+                                        color="steel-darker"
+                                    >
+                                        STAKING ON {numOfValidators}


Don't all-caps any copy, use uppercase variants (which I think this already is.

apps/wallet/src/ui/app/staking/validators/ValidatorsCard.tsx

apps/wallet/src/ui/app/staking/validator-detail/ValidatorDetailCard.tsx

Jordan-Mysten · 2023-01-07T01:31:41Z

apps/wallet/src/ui/app/staking/home/StakeAmount.tsx

+    size: 'heading4' | 'body';
+}
+
+function StakeAmount({


I don't love this component, I feel like instead of all of the props there probably are just a few known variations (from looking at usage):

body / steel-darker / steel-darker

heading4 / gray-90 / steel

heading4 / gray-60 / gray-60 (although in the wallet figma this one actually looks like the symbol color is wrong and actually should be steel, and it looks like the earned is only gray-60 because the value is 0, which we can actually solve in the component itself by inspecting balance)

Assuming we cut this down to two, I think the prop interface really should be something closer to:

interface props { balance: bigint; variant: 'heading' | 'body' }

I also don't think you need this to accept type, since it's statically known for staking.

mystie711 · 2023-01-11T21:32:24Z

@Jibz1 could you upload an updated walkthrough video?

Jordan-Mysten · 2023-01-13T18:36:06Z

apps/wallet/src/ui/app/staking/validators/ValidatorsCard.tsx

+                                        variant="heading4"
+                                    />
+                                </CardItem>
+                                {/* TODO: show the actual Rewards Collected value https://github.com/MystenLabs/sui/issues/3605 */}


Is this actually still relevant? I thought we could actually compute the rewards now?

Jordan-Mysten · 2023-01-13T18:36:15Z

apps/wallet/src/ui/app/staking/validators/ValidatorsCard.tsx

+                                    >
+                                        Staking on {stakeValidators.length}
+                                        {stakeValidators.length > 1
+                                            ? ' VALIDATORS'


Caps issues

Jordan-Mysten · 2023-01-13T18:37:37Z

apps/wallet/src/ui/app/staking/useGetDelegatedStake.tsx

+
+const STAKE_DELEGATOR_STALE_TIME = 5 * 1000;
+
+const getDelegatedStakes = async (


Can you just add SDK support instead of doing this custom JSON RPC method?

We can also push devx to do this.

Jordan-Mysten · 2023-01-13T18:38:30Z

apps/wallet/src/ui/app/staking/useGetDelegatedStake.tsx

+
+    // keeping the query parent key the same to invalidate all related queries
+    return useQuery(['validator', 'all'], async () => {
+        const response = await fetch(rpcEndPoint, {


Same here, can we add this to the SDK?

That is the goal. I will create a separate Jira task for all this

Jordan-Mysten · 2023-01-13T18:39:30Z

apps/wallet/src/ui/app/staking/home/StakeAmount.tsx

+    );
+}
+
+export default memo(StakeAmount);


Jordan-Mysten

There's some follow up needed but approving to unblock

pchrysochoidis

Left a few comments and seems there are a few components that are very similar (we should try to minimise the duplication whenever possible).

Rather than that lgtm.

pchrysochoidis · 2023-01-13T20:11:43Z

apps/wallet/src/ui/app/staking/stake/StakeForm.tsx

                            </Text>
                            <Text
                                variant="body"
                                weight="medium"
                                color="steel-darker"
                            >
-                                {gasBudgetEstimation} {GAS_SYMBOL}
+                                {gasBudgetEstimation} {symbol}


This should be GAS_SYMBOL as it was or use the symbol from here

const [gasBudgetEstimation] = useFormatCoin( DEFAULT_GAS_BUDGET_FOR_STAKE, DEFAULT_GAS_BUDGET_FOR_STAKE, SUI_TYPE_ARG SUI_TYPE_ARG ); ); ```

pchrysochoidis · 2023-01-13T21:41:58Z

apps/wallet/src/ui/app/staking/delegation-detail/DelegationDetailCard.tsx

+        );
+    }, [delegationData]);
+
+    const apy = useMemo(() => {


should we use apps/wallet/src/ui/app/staking/calculateAPY.ts here? it's the same thing right?

pchrysochoidis · 2023-01-13T21:48:46Z

apps/wallet/src/ui/app/staking/validators/SelectValidatorCard.tsx

@@ -46,12 +46,12 @@ export function SelectValidatorCard() {
                } = av.fields.delegation_staking_pool.fields;

                const num_epochs_participated =
-                    validatorsData.epoch - starting_epoch;
+                    +validatorsData.epoch - +starting_epoch;

                const APY = Math.pow(


Same for this as well, why not use apps/wallet/src/ui/app/staking/calculateAPY.ts?

Jibz1 force-pushed the wallet-validator-staking branch from ad4e711 to 4c5757f Compare December 15, 2022 13:21

Jibz1 marked this pull request as ready for review December 15, 2022 13:30

Jibz1 requested review from pchrysochoidis, Jordan-Mysten and mystie711 December 15, 2022 13:31

Jibz1 force-pushed the wallet-validator-staking branch from 850b376 to 1453e1a Compare December 15, 2022 19:57

Jordan-Mysten reviewed Dec 19, 2022

View reviewed changes

Jibz1 force-pushed the wallet-validator-staking branch from 6a953cb to a856081 Compare December 20, 2022 15:18

Jibz1 force-pushed the wallet-validator-staking branch from f8c69a4 to cb788a9 Compare January 6, 2023 21:00

Jordan-Mysten reviewed Jan 7, 2023

View reviewed changes

Jibz1 force-pushed the wallet-validator-staking branch from 4b033f4 to e6b22c6 Compare January 12, 2023 00:58

Jordan-Mysten reviewed Jan 13, 2023

View reviewed changes

Jordan-Mysten approved these changes Jan 13, 2023

View reviewed changes

pchrysochoidis reviewed Jan 13, 2023

View reviewed changes

Jibz1 added 6 commits January 13, 2023 18:44

add icons

8624393

wip

6827e58

stake page update

e8afe1c

wip

052528c

wip

72f5b71

update

a157665

Jibz1 added 25 commits January 13, 2023 18:50

wip

0009603

update text ui component

4e6b921

wip

494405e

imgIcon update

38943ef

update getName util function

65806ad

wip

aa14e5d

wip

e79072d

update ImageIcon component

6f12c55

fix toolip

053757a

update error message

9301959

wip

2cfea6d

wip

9501baf

apyCal func added

5f3a8c2

update

b29e313

lint

9c5c8d0

lint and remove delegator page

5c6cfae

update

9db67da

warm up label change

dd46dd6

rm unused component

6592dfb

invalidate query after staking

28349e0

remove memo

b17315d

rm all caps on validators

680bbdb

use sdk

11f9b4d

update

8726699

update

ced2111

Jibz1 force-pushed the wallet-validator-staking branch from 76647d8 to ced2111 Compare January 14, 2023 00:23

Jibz1 added 2 commits January 13, 2023 20:02

clean up

159869b

max token update

f874821

Jibz1 merged commit 3acef24 into main Jan 14, 2023

Jibz1 deleted the wallet-validator-staking branch January 14, 2023 01:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Wallet validator staking #6825

Wallet validator staking #6825

Jibz1 commented Dec 15, 2022 •

edited

Loading

vercel bot commented Dec 15, 2022 •

edited

Loading

github-actions bot commented Dec 15, 2022 •

edited

Loading

mystie711 commented Dec 15, 2022

Jibz1 commented Dec 15, 2022 •

edited

Loading

Jordan-Mysten left a comment

Jordan-Mysten Dec 19, 2022

Jibz1 Dec 19, 2022

mystie711 commented Dec 20, 2022

mystie711 commented Dec 20, 2022

mystie711 commented Dec 20, 2022

Jibz1 commented Dec 20, 2022

Jordan-Mysten Jan 7, 2023

Jordan-Mysten Jan 7, 2023

Jordan-Mysten Jan 7, 2023

Jordan-Mysten Jan 7, 2023

mystie711 commented Jan 11, 2023

Jordan-Mysten Jan 13, 2023

Jordan-Mysten Jan 13, 2023

Jordan-Mysten Jan 13, 2023

Jordan-Mysten Jan 13, 2023

Jordan-Mysten Jan 13, 2023

Jibz1 Jan 13, 2023

Jordan-Mysten Jan 13, 2023

Jordan-Mysten left a comment

pchrysochoidis left a comment

pchrysochoidis Jan 13, 2023

pchrysochoidis Jan 13, 2023

pchrysochoidis Jan 13, 2023


		const STAKE_DELEGATOR_STALE_TIME = 5 * 1000;

		const getDelegatedStakes = async (

Wallet validator staking #6825

Wallet validator staking #6825

Conversation

Jibz1 commented Dec 15, 2022 • edited Loading

vercel bot commented Dec 15, 2022 • edited Loading

github-actions bot commented Dec 15, 2022 • edited Loading

mystie711 commented Dec 15, 2022

Jibz1 commented Dec 15, 2022 • edited Loading

Jordan-Mysten left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mystie711 commented Dec 20, 2022

mystie711 commented Dec 20, 2022

mystie711 commented Dec 20, 2022

Jibz1 commented Dec 20, 2022

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

mystie711 commented Jan 11, 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jordan-Mysten left a comment

Choose a reason for hiding this comment

pchrysochoidis 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

Jibz1 commented Dec 15, 2022 •

edited

Loading

vercel bot commented Dec 15, 2022 •

edited

Loading

github-actions bot commented Dec 15, 2022 •

edited

Loading

Jibz1 commented Dec 15, 2022 •

edited

Loading