add apy to positions

components/AccountStats.tsx

@@ -45,13 +45,12 @@ const AccountStats = ({ token }: { token: string }) => {
           <p className="mb-1">Max Est. APY</p>
           <span className="text-2xl font-bold">
             {loadingRates ? (
-              <SheenLoader className="mt-0.5">
-                <div className="h-5 w-10 bg-th-bkg-3" />
+              <SheenLoader className="mt-1">
+                <div className="h-8 w-20 bg-th-bkg-3" />
               </SheenLoader>
             ) : stakeRates?.[token.toLowerCase()] ? (
               `${(stakeRates?.[token.toLowerCase()] * 100).toFixed(2)}%`
             ) : null}
-            % SOL
           </span>
         </div>
         <div>
@@ -68,7 +67,7 @@ const AccountStats = ({ token }: { token: string }) => {
           <p className="mb-1">Total Staked</p>
           <span className="text-2xl font-bold">
             <FormatNumericValue value={tokenDeposits || 0} decimals={1} />{' '}
-            {token}
+            {formatTokenSymbol(token)}
           </span>
         </div>
       </div>

components/Positions.tsx

@@ -7,6 +7,8 @@ import { formatTokenSymbol } from 'utils/tokens'
 import mangoStore from '@store/mangoStore'
 import Switch from './forms/Switch'
 import useLocalStorageState from 'hooks/useLocalStorageState'
+import useStakeRates from 'hooks/useStakeRates'
+import SheenLoader from './shared/SheenLoader'
 
 const set = mangoStore.getState().set
 
@@ -16,6 +18,7 @@ const Positions = ({
   setActiveTab: (tab: string) => void
 }) => {
   const { group } = useMangoGroup()
+  const { data: stakeRates, isLoading: loadingRates } = useStakeRates()
   const [showInactivePositions, setShowInactivePositions] =
     useLocalStorageState(SHOW_INACTIVE_POSITIONS_KEY, true)
 
@@ -108,7 +111,17 @@ const Positions = ({
                 </div>
                 <div>
                   <p className="mb-1">Est. APY</p>
-                  <span className="text-xl font-bold">14.89%</span>
+                  <span className="text-xl font-bold">
+                    {loadingRates ? (
+                      <SheenLoader className="mt-1">
+                        <div className="h-6 w-16 bg-th-bkg-2" />
+                      </SheenLoader>
+                    ) : stakeRates?.[bank.name.toLowerCase()] ? (
+                      `${(stakeRates?.[bank.name.toLowerCase()] * 100).toFixed(
+                        2,
+                      )}%`
+                    ) : null}
+                  </span>
                 </div>
                 <div>
                   <p className="mb-1">Leverage</p>

components/StakeForm.tsx

@@ -339,7 +339,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
                 </div>
                 <div className="space-y-1.5 border-t border-th-bkg-3 px-2 pt-4">
                   <div className="flex justify-between">
-                    <p>{selectedToken} Leveraged APY</p>
+                    <p>{formatTokenSymbol(selectedToken)} Leveraged APY</p>
                     <span className="text-th-fgd-1">
                       <FormatNumericValue
                         value={7.28 * leverage}
@@ -349,7 +349,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
                     </span>
                   </div>
                   <div className="flex justify-between">
-                    <p>{selectedToken} Deposit Rate</p>
+                    <p>{formatTokenSymbol(selectedToken)} Deposit Rate</p>
                     <span className="text-th-fgd-1">
                       <FormatNumericValue
                         value={stakeBank.getDepositRateUi()}
@@ -392,7 +392,8 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
                 </div>
               ) : (
                 <div className="flex items-center">
-                  Leverage Stake {inputAmount} {selectedToken}
+                  Leverage Stake {inputAmount}{' '}
+                  {formatTokenSymbol(selectedToken)}
                 </div>
               )}
             </Button>

components/UnstakeForm.tsx

@@ -305,12 +305,12 @@ function UnstakeForm({ onSuccess, token: selectedToken }: UnstakeFormProps) {
                 <div className="flex items-center">
                   <ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0" />
                   {t('swap:insufficient-balance', {
-                    symbol: selectedToken,
+                    symbol: formatTokenSymbol(selectedToken),
                   })}
                 </div>
               ) : (
                 <div className="flex items-center">
-                  Unstake {inputAmount} {selectedToken}
+                  Unstake {inputAmount} {formatTokenSymbol(selectedToken)}
                 </div>
               )}
             </Button>