From 7b85cba8ffd5b1718f738ba045193ca6cb5c11ca Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Mon, 19 Aug 2024 16:15:01 +0200
Subject: [PATCH] feat(wallet): rebrand staking overview in homepage (#1911)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: rebrand stake overview homepage

* feat: keep constant value as before

* feat: remove loading svg and update when is loading

* feat: rename file

---------

Co-authored-by: Begoña Álvarez de la Cruz <balvarez@boxfish.studio>
---
 .../app/pages/home/tokens/TokenIconLink.tsx   | 69 -----------------
 .../home/tokens/TokenStakingOverview.tsx      | 77 +++++++++++++++++++
 .../app/pages/home/tokens/TokensDetails.tsx   | 11 +--
 3 files changed, 79 insertions(+), 78 deletions(-)
 delete mode 100644 apps/wallet/src/ui/app/pages/home/tokens/TokenIconLink.tsx
 create mode 100644 apps/wallet/src/ui/app/pages/home/tokens/TokenStakingOverview.tsx

diff --git a/apps/wallet/src/ui/app/pages/home/tokens/TokenIconLink.tsx b/apps/wallet/src/ui/app/pages/home/tokens/TokenIconLink.tsx
deleted file mode 100644
index cfa1f443707..00000000000
--- a/apps/wallet/src/ui/app/pages/home/tokens/TokenIconLink.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-// Copyright (c) Mysten Labs, Inc.
-// Modifications Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { LargeButton } from '_app/shared/LargeButton';
-import { ampli } from '_src/shared/analytics/ampli';
-import { Text } from '_src/ui/app/shared/text';
-import {
-    formatDelegatedStake,
-    useFormatCoin,
-    useGetDelegatedStake,
-    useTotalDelegatedStake,
-    DELEGATED_STAKES_QUERY_REFETCH_INTERVAL,
-    DELEGATED_STAKES_QUERY_STALE_TIME,
-} from '@iota/core';
-import { WalletActionStake24 } from '@iota/icons';
-import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-
-export function TokenIconLink({
-    accountAddress,
-    disabled,
-}: {
-    accountAddress: string;
-    disabled: boolean;
-}) {
-    const { data: delegatedStake, isPending } = useGetDelegatedStake({
-        address: accountAddress,
-        staleTime: DELEGATED_STAKES_QUERY_STALE_TIME,
-        refetchInterval: DELEGATED_STAKES_QUERY_REFETCH_INTERVAL,
-    });
-
-    // Total active stake for all delegations
-    const delegatedStakes = delegatedStake ? formatDelegatedStake(delegatedStake) : [];
-    const totalDelegatedStake = useTotalDelegatedStake(delegatedStakes);
-    const [formattedDelegatedStake, symbol, queryResultStake] = useFormatCoin(
-        totalDelegatedStake,
-        IOTA_TYPE_ARG,
-    );
-
-    return (
-        <LargeButton
-            to="/stake"
-            spacing="sm"
-            center={!totalDelegatedStake}
-            disabled={disabled}
-            onClick={() => {
-                ampli.clickedStakeIota({
-                    isCurrentlyStaking: totalDelegatedStake > 0,
-                    sourceFlow: 'Home page',
-                });
-            }}
-            loading={isPending || queryResultStake.isPending}
-            before={<WalletActionStake24 />}
-            data-testid={`stake-button-${formattedDelegatedStake}-${symbol}`}
-        >
-            <div className="flex flex-col">
-                <Text variant="pBody" weight="semibold">
-                    {totalDelegatedStake ? 'Currently Staked' : 'Stake and Earn IOTA'}
-                </Text>
-
-                {!!totalDelegatedStake && (
-                    <Text variant="pBody" weight="semibold">
-                        {formattedDelegatedStake} {symbol}
-                    </Text>
-                )}
-            </div>
-        </LargeButton>
-    );
-}
diff --git a/apps/wallet/src/ui/app/pages/home/tokens/TokenStakingOverview.tsx b/apps/wallet/src/ui/app/pages/home/tokens/TokenStakingOverview.tsx
new file mode 100644
index 00000000000..15c72d92bb1
--- /dev/null
+++ b/apps/wallet/src/ui/app/pages/home/tokens/TokenStakingOverview.tsx
@@ -0,0 +1,77 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ampli } from '_src/shared/analytics/ampli';
+import {
+    formatDelegatedStake,
+    useFormatCoin,
+    useGetDelegatedStake,
+    useTotalDelegatedStake,
+    DELEGATED_STAKES_QUERY_REFETCH_INTERVAL,
+    DELEGATED_STAKES_QUERY_STALE_TIME,
+} from '@iota/core';
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import {
+    Card,
+    CardAction,
+    CardActionType,
+    CardBody,
+    CardImage,
+    CardType,
+    ImageShape,
+} from '@iota/apps-ui-kit';
+import { useNavigate } from 'react-router-dom';
+import { Stake } from '@iota/ui-icons';
+
+export function TokenStakingOverview({
+    accountAddress,
+    disabled,
+}: {
+    accountAddress: string;
+    disabled: boolean;
+}) {
+    const navigate = useNavigate();
+    const { data: delegatedStake, isPending } = useGetDelegatedStake({
+        address: accountAddress,
+        staleTime: DELEGATED_STAKES_QUERY_STALE_TIME,
+        refetchInterval: DELEGATED_STAKES_QUERY_REFETCH_INTERVAL,
+    });
+
+    // Total active stake for all delegations
+    const delegatedStakes = delegatedStake ? formatDelegatedStake(delegatedStake) : [];
+    const totalDelegatedStake = useTotalDelegatedStake(delegatedStakes);
+    const [formattedDelegatedStake, symbol, queryResultStake] = useFormatCoin(
+        totalDelegatedStake,
+        IOTA_TYPE_ARG,
+    );
+
+    function handleOnClick() {
+        navigate('/stake');
+        ampli.clickedStakeIota({
+            isCurrentlyStaking: totalDelegatedStake > 0,
+            sourceFlow: 'Home page',
+        });
+    }
+
+    const isLoading = isPending || queryResultStake.isPending;
+
+    return (
+        <Card type={CardType.Filled} onClick={handleOnClick} isDisabled={disabled}>
+            <CardImage shape={ImageShape.SquareRounded}>
+                <Stake className="h-5 w-5 text-primary-20" />
+            </CardImage>
+            <CardBody
+                title={
+                    isLoading
+                        ? '--'
+                        : totalDelegatedStake
+                          ? `${formattedDelegatedStake} ${symbol}`
+                          : 'Start Staking'
+                }
+                subtitle={isLoading ? '--' : totalDelegatedStake ? 'Current Stake' : 'Earn Rewards'}
+            />
+            <CardAction type={CardActionType.Link} onClick={handleOnClick} />
+        </Card>
+    );
+}
diff --git a/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx b/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx
index 639760bf215..237aa0daaf7 100644
--- a/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx
+++ b/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx
@@ -39,7 +39,7 @@ import { Pined, Unpined } from '@iota/ui-icons';
 import Interstitial, { type InterstitialConfig } from '../interstitial';
 import { CoinBalance } from './coin-balance';
 import { PortfolioName } from './PortfolioName';
-import { TokenIconLink } from './TokenIconLink';
+import { TokenStakingOverview } from './TokenStakingOverview';
 import { TokenLink } from './TokenLink';
 import {
     ButtonUnstyled,
@@ -490,17 +490,10 @@ function TokenDetails({ coinType }: TokenDetailsProps) {
                                         >
                                             Send
                                         </LargeButton>
-
-                                        {!accountHasIota && (
-                                            <LargeButton disabled to="/stake" center>
-                                                Stake
-                                            </LargeButton>
-                                        )}
                                     </div>
-
                                     <div className="w-full">
                                         {accountHasIota || delegatedStake?.length ? (
-                                            <TokenIconLink
+                                            <TokenStakingOverview
                                                 disabled={!tokenBalance}
                                                 accountAddress={activeAccountAddress}
                                             />