feat(wallet-dashboard): style staking overview

apps/core/src/components/index.ts

@@ -5,5 +5,6 @@ export * from './coin';
 export * from './icon';
 export * from './Inputs';
 export * from './QR';
+export * from './staking';
 
 export * from './providers';

apps/wallet/src/ui/app/staking/home/StakedCard.tsx → apps/core/src/components/staking/StakingCard.tsx

@@ -2,22 +2,14 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { NUM_OF_EPOCH_BEFORE_STAKING_REWARDS_REDEEMABLE } from '@iota/core';
-import { determineCountDownText } from '_src/ui/app/shared/countdown-timer';
-import {
-    type ExtendedDelegatedStake,
-    TimeUnit,
-    useFormatCoin,
-    useGetTimeBeforeEpochNumber,
-    useTimeAgo,
-    ImageIcon,
-} from '@iota/core';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import { Card, CardImage, CardType, CardBody, CardAction, CardActionType } from '@iota/apps-ui-kit';
 import { useMemo } from 'react';
-import { Link } from 'react-router-dom';
-
 import { useIotaClientQuery } from '@iota/dapp-kit';
+import { ImageIcon } from '../icon';
+import { determineCountDownText, ExtendedDelegatedStake } from '../../utils';
+import { TimeUnit, useFormatCoin, useGetTimeBeforeEpochNumber, useTimeAgo } from '../../hooks';
+import { NUM_OF_EPOCH_BEFORE_STAKING_REWARDS_REDEEMABLE } from '../../constants';
 
 export enum StakeState {
     WarmUp = 'WARM_UP',
@@ -35,21 +27,22 @@ const STATUS_COPY: { [key in StakeState]: string } = {
     [StakeState.InActive]: 'Inactive',
 };
 
-interface StakeCardProps {
+interface StakingCardProps {
     extendedStake: ExtendedDelegatedStake;
     currentEpoch: number;
     inactiveValidator?: boolean;
+    onClick: () => void;
 }
 
 // For delegationsRequestEpoch n  through n + 2, show Start Earning
 // Show epoch number or date/time for n + 3 epochs
-export function StakeCard({
+export function StakingCard({
     extendedStake,
     currentEpoch,
     inactiveValidator = false,
-}: StakeCardProps) {
-    const { stakedIotaId, principal, stakeRequestEpoch, estimatedReward, validatorAddress } =
-        extendedStake;
+    onClick,
+}: StakingCardProps) {
+    const { principal, stakeRequestEpoch, estimatedReward, validatorAddress } = extendedStake;
 
     // TODO: Once two step withdraw is available, add cool down and withdraw now logic
     // For cool down epoch, show Available to withdraw add rewards to principal
@@ -115,32 +108,20 @@ export function StakeCard({
     };
 
     return (
-        <Link
-            data-testid="stake-card"
-            to={`/stake/delegation-detail?${new URLSearchParams({
-                validator: validatorAddress,
-                staked: stakedIotaId,
-            }).toString()}`}
-            className="no-underline"
-        >
-            <Card type={CardType.Default} isHoverable>
-                <CardImage>
-                    <ImageIcon
-                        src={validatorMeta?.imageUrl || null}
-                        label={validatorMeta?.name || ''}
-                        fallback={validatorMeta?.name || ''}
-                    />
-                </CardImage>
-                <CardBody
-                    title={validatorMeta?.name || ''}
-                    subtitle={`${principalStaked} ${symbol}`}
-                />
-                <CardAction
-                    title={rewardTime()}
-                    subtitle={STATUS_COPY[delegationState]}
-                    type={CardActionType.SupportingText}
+        <Card type={CardType.Default} isHoverable onClick={onClick}>
+            <CardImage>
+                <ImageIcon
+                    src={validatorMeta?.imageUrl || null}
+                    label={validatorMeta?.name || ''}
+                    fallback={validatorMeta?.name || ''}
                 />
-            </Card>
-        </Link>
+            </CardImage>
+            <CardBody title={validatorMeta?.name || ''} subtitle={`${principalStaked} ${symbol}`} />
+            <CardAction
+                title={rewardTime()}
+                subtitle={STATUS_COPY[delegationState]}
+                type={CardActionType.SupportingText}
+            />
+        </Card>
     );
 }

apps/core/src/components/staking/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './StakingCard';

apps/core/src/constants/staking.constants.ts

@@ -9,3 +9,4 @@ export const DELEGATED_STAKES_QUERY_REFETCH_INTERVAL = 30_000;
 
 export const NUM_OF_EPOCH_BEFORE_STAKING_REWARDS_REDEEMABLE = 2;
 export const NUM_OF_EPOCH_BEFORE_STAKING_REWARDS_STARTS = 1;
+export const MIN_NUMBER_IOTA_TO_STAKE = 1;

apps/core/src/hooks/useNftDetails.ts

@@ -0,0 +1,85 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+import { useGetNFTMeta, useOwnedNFT, useNFTBasicData, useGetKioskContents } from './';
+import { formatAddress } from '@iota/iota-sdk/utils';
+import { isAssetTransferable, truncateString } from '../utils';
+
+type NftFields = {
+    metadata?: { fields?: { attributes?: { fields?: { keys: string[]; values: string[] } } } };
+};
+
+export function useNftDetails(nftId: string, accountAddress: string | null) {
+    const { data: objectData, isPending: isNftLoading } = useOwnedNFT(nftId || '', accountAddress);
+    const { data } = useGetKioskContents(accountAddress);
+
+    const isContainedInKiosk = data?.lookup.get(nftId!);
+    const kioskItem = data?.list.find((k) => k.data?.objectId === nftId);
+
+    const isTransferable = isAssetTransferable(objectData);
+
+    const { nftFields } = useNFTBasicData(objectData);
+
+    const { data: nftMeta, isPending: isPendingMeta } = useGetNFTMeta(nftId);
+
+    const nftName = nftMeta?.name || formatAddress(nftId);
+    const nftImageUrl = nftMeta?.imageUrl || '';
+
+    // Extract either the attributes, or use the top-level NFT fields:
+    const { keys: metaKeys, values: metaValues } =
+        (nftFields as NftFields)?.metadata?.fields?.attributes?.fields ||
+        Object.entries(nftFields ?? {})
+            .filter(([key]) => key !== 'id')
+            .reduce(
+                (acc, [key, value]) => {
+                    acc.keys.push(key);
+                    acc.values.push(value as string);
+                    return acc;
+                },
+                { keys: [] as string[], values: [] as string[] },
+            );
+
+    const ownerAddress =
+        (objectData?.owner &&
+            typeof objectData?.owner === 'object' &&
+            'AddressOwner' in objectData.owner &&
+            objectData.owner.AddressOwner) ||
+        '';
+
+    function formatMetaValue(value: string | object) {
+        if (typeof value === 'object') {
+            return {
+                value: JSON.stringify(value),
+                valueLink: undefined,
+            };
+        } else {
+            if (value.includes('http')) {
+                return {
+                    value: value.startsWith('http')
+                        ? truncateString(value, 20, 8)
+                        : formatAddress(value),
+                    valueLink: value,
+                };
+            }
+            return {
+                value: value,
+                valueLink: undefined,
+            };
+        }
+    }
+
+    return {
+        objectData,
+        isNftLoading,
+        nftName,
+        nftImageUrl,
+        ownerAddress,
+        isTransferable,
+        metaKeys,
+        metaValues,
+        formatMetaValue,
+        isContainedInKiosk,
+        kioskItem,
+        nftMeta,
+        isPendingMeta,
+    };
+}

apps/core/src/utils/index.ts

@@ -20,6 +20,7 @@ export * from './getDelegationDataByStakeId';
 export * from './api-env';
 export * from './getExplorerPaths';
 export * from './getExplorerLink';
+export * from './determineCountDownText';
 
 export * from './stake';
 export * from './transaction';