feat: yield improvements following CR

CLAUDE.md

@@ -96,6 +96,7 @@
 - Add English copy to `src/assets/translations/en/main.json` (find appropriate section)
 - Ignore other language translation files - only update English
 - Use the translation hook: `useTranslate()` from `react-polyglot`
+- **Both steps required**: Translations must be (1) added to `en/main.json` AND (2) consumed via `translate('key')` - missing either step results in untranslated strings showing raw keys
 
 ### Feature Flags
 - Feature flags are stored in Redux state under `preferences.featureFlags`

src/assets/translations/en/main.json

@@ -2830,6 +2830,7 @@
     "otherYields": "Other %{symbol} Yields",
     "availableToDeposit": "Available to Deposit",
     "availableToDepositTooltip": "This is the amount of %{symbol} in your wallet that you can deposit into this yield opportunity.",
+    "getAsset": "Get %{symbol}",
     "potentialEarningsAmount": "%{amount}/yr at %{apy}% APY",
     "depositNow": "Deposit Now",
     "strategyInfo": "Strategy Info",

src/pages/Yields/components/YieldAvailableToDeposit.tsx

@@ -1,11 +1,27 @@
 import { InfoOutlineIcon } from '@chakra-ui/icons'
-import { Box, Card, CardBody, Flex, Heading, HStack, Text, Tooltip, VStack } from '@chakra-ui/react'
-import { memo, useMemo } from 'react'
+import {
+  Box,
+  Button,
+  Card,
+  CardBody,
+  Flex,
+  Heading,
+  HStack,
+  Text,
+  Tooltip,
+  VStack,
+} from '@chakra-ui/react'
+import { memo, useCallback, useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
 
 import { Amount } from '@/components/Amount/Amount'
+import { useTradeNavigation } from '@/components/MultiHopTrade/hooks/useTradeNavigation'
+import { KeyManager } from '@/context/WalletProvider/KeyManager'
+import { useFeatureFlag } from '@/hooks/useFeatureFlag/useFeatureFlag'
+import { useWallet } from '@/hooks/useWallet/useWallet'
 import { bnOrZero } from '@/lib/bignumber/bignumber'
 import type { AugmentedYieldDto } from '@/lib/yieldxyz/types'
+import { selectWalletType } from '@/state/slices/localWalletSlice/selectors'
 import { selectPortfolioCryptoBalanceBaseUnitByFilter } from '@/state/slices/selectors'
 import { useAppSelector } from '@/state/store'
 
@@ -17,6 +33,19 @@ type YieldAvailableToDepositProps = {
 export const YieldAvailableToDeposit = memo(
   ({ yieldItem, inputTokenMarketData }: YieldAvailableToDepositProps) => {
     const translate = useTranslate()
+    const { navigateToTrade } = useTradeNavigation()
+    const {
+      state: { isConnected },
+    } = useWallet()
+    const isLedgerReadOnlyEnabled = useFeatureFlag('LedgerReadOnly')
+    const walletType = useAppSelector(selectWalletType)
+    const isLedgerReadOnly = isLedgerReadOnlyEnabled && walletType === KeyManager.Ledger
+
+    // Either wallet is physically connected, or it's a Ledger in read-only mode
+    const hasWallet = useMemo(
+      () => isConnected || isLedgerReadOnly,
+      [isConnected, isLedgerReadOnly],
+    )
 
     const inputToken = yieldItem.inputTokens[0]
     const inputTokenAssetId = inputToken?.assetId ?? ''
@@ -46,13 +75,63 @@ export const YieldAvailableToDeposit = memo(
 
     const hasAvailableBalance = availableBalance.gt(0)
 
-    if (!inputTokenPrecision) return null
+    const handleGetAsset = useCallback(() => {
+      navigateToTrade(inputTokenAssetId)
+    }, [navigateToTrade, inputTokenAssetId])
+
+    if (!inputTokenPrecision || !hasWallet) return null
 
     const tooltipLabel = translate('yieldXYZ.availableToDepositTooltip', {
       symbol: yieldItem.token.symbol,
     })
 
-    if (!hasAvailableBalance) return null
+    if (!hasAvailableBalance) {
+      return (
+        <Card variant='dashboard'>
+          <CardBody p={{ base: 4, md: 5 }}>
+            <VStack spacing={4} align='stretch'>
+              <Flex justifyContent='space-between' alignItems='center'>
+                <HStack spacing={2}>
+                  <Heading
+                    as='h3'
+                    size='sm'
+                    textTransform='uppercase'
+                    color='text.subtle'
+                    letterSpacing='wider'
+                  >
+                    {translate('yieldXYZ.availableToDeposit')}
+                  </Heading>
+                  <Tooltip label={tooltipLabel} placement='top'>
+                    <InfoOutlineIcon color='text.subtle' boxSize={3} cursor='help' />
+                  </Tooltip>
+                </HStack>
+              </Flex>
+
+              <Box>
+                <Text fontSize='2xl' fontWeight='800' lineHeight='1'>
+                  <Amount.Fiat value='0' />
+                </Text>
+                <Text fontSize='sm' color='text.subtle' mt={1}>
+                  <Amount.Crypto value='0' symbol={yieldItem.token.symbol} abbreviated />
+                </Text>
+              </Box>
+
+              <Button
+                colorScheme='blue'
+                size='lg'
+                height={12}
+                borderRadius='xl'
+                onClick={handleGetAsset}
+                width='full'
+                fontWeight='bold'
+              >
+                {translate('yieldXYZ.getAsset', { symbol: yieldItem.token.symbol })}
+              </Button>
+            </VStack>
+          </CardBody>
+        </Card>
+      )
+    }
 
     return (
       <Card variant='dashboard'>

src/pages/Yields/components/YieldPositionCard.tsx

@@ -23,7 +23,9 @@ import { useNavigate } from 'react-router-dom'
 
 import { Amount } from '@/components/Amount/Amount'
 import { Display } from '@/components/Display'
+import { WalletActions } from '@/context/WalletProvider/actions'
 import { useBrowserRouter } from '@/hooks/useBrowserRouter/useBrowserRouter'
+import { useWallet } from '@/hooks/useWallet/useWallet'
 import { bnOrZero } from '@/lib/bignumber/bignumber'
 import type { AugmentedYieldDto } from '@/lib/yieldxyz/types'
 import { YieldBalanceType } from '@/lib/yieldxyz/types'
@@ -67,6 +69,12 @@ export const YieldPositionCard = memo(
     const translate = useTranslate()
     const navigate = useNavigate()
     const { location } = useBrowserRouter()
+    const { dispatch: walletDispatch } = useWallet()
+
+    const handleConnectWallet = useCallback(
+      () => walletDispatch({ type: WalletActions.SET_WALLET_MODAL, payload: true }),
+      [walletDispatch],
+    )
 
     const { chainId } = yieldItem
     const { accountId: contextAccountId, accountNumber } = useYieldAccount()
@@ -360,7 +368,49 @@ export const YieldPositionCard = memo(
       claimableSection,
     ])
 
-    if (!accountId) return null
+    if (!accountId) {
+      return (
+        <Card variant='dashboard'>
+          <CardBody p={{ base: 4, md: 5 }}>
+            <Flex justifyContent='space-between' alignItems='center' mb={4}>
+              <Heading
+                as='h3'
+                size='sm'
+                textTransform='uppercase'
+                color='text.subtle'
+                letterSpacing='wider'
+              >
+                {translate('yieldXYZ.myPosition')}
+              </Heading>
+            </Flex>
+            <VStack spacing={4} align='stretch'>
+              <Box>
+                <Text fontSize='xs' color='text.subtle' mb={1} textTransform='uppercase'>
+                  {translate('yieldXYZ.totalValue')}
+                </Text>
+                <Text fontSize='3xl' fontWeight='800' lineHeight='1'>
+                  <Amount.Fiat value='0' />
+                </Text>
+                <Text fontSize='sm' color='text.subtle' mt={1}>
+                  <Amount.Crypto value='0' symbol={yieldItem.token.symbol} abbreviated />
+                </Text>
+              </Box>
+              <Button
+                colorScheme='blue'
+                size='lg'
+                height={12}
+                borderRadius='xl'
+                onClick={handleConnectWallet}
+                width='full'
+                fontWeight='bold'
+              >
+                {translate('common.connectWallet')}
+              </Button>
+            </VStack>
+          </CardBody>
+        </Card>
+      )
+    }
 
     if (isBalancesLoading) {
       return (

src/pages/Yields/components/YieldSuccess.tsx

@@ -24,7 +24,12 @@ type YieldSuccessProps = {
   accountId?: AccountId
   onDone: () => void
   showConfetti?: boolean
-  successMessageKey?: 'successEnter' | 'successExit' | 'successClaim'
+  successMessageKey?:
+    | 'successEnter'
+    | 'successExit'
+    | 'successClaim'
+    | 'successUnstaked'
+    | 'successWithdrawn'
 }
 
 export const YieldSuccess = memo(