Wallet - Only show average APY after staking and remove staking featu…

…re flag (MystenLabs#12214)

## Description 

Describe the changes or additions included in this PR.

- Only show average APY after staking 
- Remove staking feature flag

## Test Plan 

How did you test the new or updated feature?


https://github.com/MystenLabs/sui/assets/126525197/5730d1f6-3262-4b39-8120-70c114bf0c76


---
If your changes are not user-facing and not a breaking change, you can
skip the following section. Otherwise, please indicate what changed, and
then add to the Release Notes section as highlighted during the release
process.

### Type of Change (Check all that apply)

- [ ] protocol change
- [x] user-visible impact
- [ ] breaking change for a client SDKs
- [ ] breaking change for FNs (FN binary must upgrade)
- [ ] breaking change for validators or node operators (must upgrade
binaries)
- [ ] breaking change for on-chain data layout
- [ ] necessitate either a data wipe or data migration

### Release notes

apps/wallet/src/shared/experimentation/features.ts

@@ -21,7 +21,6 @@ export const growthbook = new GrowthBook({
  */
 export enum FEATURES {
     USE_LOCAL_TXN_SERIALIZER = 'use-local-txn-serializer',
-    STAKING_ENABLED = 'wallet-staking-enabled',
     WALLET_DAPPS = 'wallet-dapps',
     WALLET_BALANCE_REFETCH_INTERVAL = 'wallet-balance-refetch-interval',
     WALLET_ACTIVITY_REFETCH_INTERVAL = 'wallet-activity-refetch-interval',

apps/wallet/src/ui/app/pages/home/tokens/TokenIconLink.tsx

@@ -1,7 +1,6 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useFeature } from '@growthbook/growthbook-react';
 import { useFormatCoin } from '@mysten/core';
 import { WalletActionStake24 } from '@mysten/icons';
 import { SUI_TYPE_ARG, type SuiAddress } from '@mysten/sui.js';
@@ -10,15 +9,13 @@ import { useMemo } from 'react';
 import { LargeButton } from '_app/shared/LargeButton';
 import { DelegatedAPY } from '_app/shared/delegated-apy';
 import { useGetDelegatedStake } from '_app/staking/useGetDelegatedStake';
-import { FEATURES } from '_src/shared/experimentation/features';
 import { trackEvent } from '_src/shared/plausible';
 
 export function TokenIconLink({
     accountAddress,
 }: {
     accountAddress: SuiAddress;
 }) {
-    const stakingEnabled = useFeature(FEATURES.STAKING_ENABLED).on;
     const { data: delegatedStake, isLoading } =
         useGetDelegatedStake(accountAddress);
 
@@ -51,21 +48,20 @@ export function TokenIconLink({
             onClick={() => {
                 trackEvent('StakingFromHome');
             }}
-            tabIndex={!stakingEnabled ? -1 : undefined}
             loading={isLoading || queryResult.isLoading}
-            disabled={!stakingEnabled}
             before={<WalletActionStake24 />}
+            center
             after={
-                stakingEnabled && (
+                totalActivePendingStake ? (
                     <DelegatedAPY stakedValidators={stakedValidators} />
-                )
+                ) : null
             }
         >
             <div className="flex flex-col gap-1.25">
                 <div>
                     {totalActivePendingStake
                         ? 'Currently Staked'
-                        : 'Stake & Earn SUI'}
+                        : 'Stake and Earn SUI'}
                 </div>
                 {!!totalActivePendingStake && (
                     <div>

apps/wallet/src/ui/app/shared/delegated-apy/index.tsx

@@ -44,6 +44,9 @@ export function DelegatedAPY({ stakedValidators }: DelegatedAPYProps) {
             </div>
         );
     }
+
+    if (!averageNetworkAPY) return null;
+
     return (
         <div className="flex gap-0.5 items-center">
             {averageNetworkAPY !== null ? (

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

@@ -1,7 +1,6 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useFeature } from '@growthbook/growthbook-react';
 import {
     useGetValidatorsApy,
     useGetSystemState,
@@ -29,7 +28,6 @@ import LoadingIndicator from '_components/loading/LoadingIndicator';
 import { useAppSelector, useCoinsReFetchingConfig } from '_hooks';
 import { API_ENV } from '_src/shared/api-env';
 import { MIN_NUMBER_SUI_TO_STAKE } from '_src/shared/constants';
-import { FEATURES } from '_src/shared/experimentation/features';
 import FaucetRequestButton from '_src/ui/app/shared/faucet/FaucetRequestButton';
 
 type DelegationDetailCardProps = {
@@ -117,7 +115,6 @@ export function DelegationDetailCard({
     const commission = validatorData
         ? Number(validatorData.commissionRate) / 100
         : 0;
-    const stakingEnabled = useFeature(FEATURES.STAKING_ENABLED).on;
 
     if (isLoading || loadingValidators) {
         return (
@@ -253,10 +250,7 @@ export function DelegationDetailCard({
                                     to={stakeByValidatorAddress}
                                     before={<StakeAdd16 />}
                                     text="Stake SUI"
-                                    disabled={
-                                        !stakingEnabled ||
-                                        showRequestMoreSuiToken
-                                    }
+                                    disabled={showRequestMoreSuiToken}
                                 />
                             ) : null}
 

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

@@ -1,19 +1,13 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useFeature } from '@growthbook/growthbook-react';
-import { Navigate, Route, Routes } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 
 import { DelegationDetail } from '../delegation-detail';
 import StakePage from '../stake';
 import { Validators } from '../validators';
-import { FEATURES } from '_src/shared/experimentation/features';
 
 export function Staking() {
-    const stakingEnabled = useFeature(FEATURES.STAKING_ENABLED).on;
-
-    if (!stakingEnabled) return <Navigate to="/" replace />;
-
     return (
         <Routes>
             <Route path="/*" element={<Validators />} />

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

@@ -1,7 +1,6 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useFeature } from '@growthbook/growthbook-react';
 import { useGetSystemState } from '@mysten/core';
 import { Plus12 } from '@mysten/icons';
 import { useMemo } from 'react';
@@ -20,7 +19,6 @@ import { Card, CardItem } from '_app/shared/card';
 import { Text } from '_app/shared/text';
 import Alert from '_components/alert';
 import LoadingIndicator from '_components/loading/LoadingIndicator';
-import { FEATURES } from '_src/shared/experimentation/features';
 
 export function ValidatorsCard() {
     const accountAddress = useActiveAddress();
@@ -78,8 +76,6 @@ export function ValidatorsCard() {
 
     const numberOfValidators = delegatedStake?.length || 0;
 
-    const stakingEnabled = useFeature(FEATURES.STAKING_ENABLED).on;
-
     if (isLoading) {
         return (
             <div className="p-2 w-full flex justify-center items-center h-full">
@@ -184,7 +180,6 @@ export function ValidatorsCard() {
                         size="tall"
                         variant="secondary"
                         to="new"
-                        disabled={!stakingEnabled}
                         before={<Plus12 />}
                         text="Stake SUI"
                     />