feat(web): Post Launch Stake QA (#970)

Author: gosiast

apps/web/app/(apps)/migrate/_components/migrate-button.tsx

@@ -184,7 +184,7 @@ export const MigrateButton = () => {
               onClick={handleActivateStellarAccount}
               disabled={isActivatingStellarAccount}
             >
-              {isActivatingStellarAccount ? 'Activating Stellar Account' : 'Activate Stellar Account'}
+              {isActivatingStellarAccount ? 'Activating Stellar' : 'Activate Stellar'}
               {isActivatingStellarAccount && <Loader2 className="w-4 h-4 animate-spin" />}
             </Button>
           ) : direction.to === STELLAR_MAINNET_CHAIN_ID && stellarTrustlineValidation?.ok === false && !hasTrustline ? (

apps/web/app/(apps)/stake/_components/stake-input-panel.tsx

@@ -231,7 +231,7 @@ export function StakeInputPanel(): React.JSX.Element {
                       onClick={handleActivateStellarAccount}
                       disabled={isActivatingStellarAccount}
                     >
-                      {isActivatingStellarAccount ? 'Activating Stellar Account' : 'Activate Stellar Account'}
+                      {isActivatingStellarAccount ? 'Activating Stellar' : 'Activate Stellar'}
                       {isActivatingStellarAccount && <Loader2 className="w-4 h-4 animate-spin ml-2" />}
                     </Button>
                   ) : isStellarChain &&
@@ -275,7 +275,7 @@ export function StakeInputPanel(): React.JSX.Element {
                     onClick={handleActivateStellarAccount}
                     disabled={isActivatingStellarAccount}
                   >
-                    {isActivatingStellarAccount ? 'Activating Stellar Account' : 'Activate Stellar Account'}
+                    {isActivatingStellarAccount ? 'Activating Stellar' : 'Activate Stellar'}
                     {isActivatingStellarAccount && <Loader2 className="w-4 h-4 animate-spin ml-2" />}
                   </Button>
                 ) : isStellarChain &&

apps/web/app/(apps)/stake/_components/stake-stats-card.tsx

@@ -3,13 +3,14 @@ import Image from 'next/image';
 import { Info } from 'lucide-react';
 import { useStakeState, useStakeActions } from '../_stores/stake-store-provider';
 import { formatCompactNumber, formatTokenAmount } from '@/lib/utils';
-import { STAKING_APR, STAKING_NOW_HOLDERS } from './constants';
+import { STAKING_APR } from './constants';
 import LoadingThreeDotsJumping from '@/components/shared/loading-three-dots-jumping';
 import { useStakingConfig } from '@sodax/dapp-kit';
 import { UnstakeModeToggle } from './unstake-mode-toggle';
 import { STAKE_MODE } from '../_stores/stake-store';
 import { Loader2 } from 'lucide-react';
 import { useStakeVaultApy } from '@/hooks/useStakeVaultApy';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 
 export function StakeStatsCard(): React.JSX.Element {
   const {
@@ -61,7 +62,20 @@ export function StakeStatsCard(): React.JSX.Element {
             <div className="justify-center text-clay text-(length:--body-small) leading-4">
               ~{formatTokenAmount(totalUserXSodaValue, 18)} SODA
             </div>
-            <Info className="w-4 h-4 text-clay-light" />
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button type="button">
+                  <Info className="w-4 h-4 text-clay-light" />{' '}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent
+                side="top"
+                sideOffset={10}
+                className="bg-white px-4 py-2 text-espresso rounded-full text-(length:--body-small)"
+              >
+                Approximate equivalent value in SODA{' '}
+              </TooltipContent>
+            </Tooltip>
             {userXSodaBalance > 0n && <LoadingThreeDotsJumping />}
           </div>
         </div>
@@ -70,7 +84,20 @@ export function StakeStatsCard(): React.JSX.Element {
             <div className="justify-center text-espresso text-(length:--body-super-comfortable) font-bold leading-5">
               {displayedApy.toFixed(2)}% APY
             </div>
-            <Info className="w-4 h-4 text-clay-light" />
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button type="button">
+                  <Info className="w-4 h-4 text-clay-light" />{' '}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent
+                side="top"
+                sideOffset={10}
+                className="bg-white px-4 py-2 text-espresso rounded-full text-(length:--body-small)"
+              >
+                APY will change over time{' '}
+              </TooltipContent>
+            </Tooltip>{' '}
           </div>
           <div className="justify-center text-clay text-(length:--body-small) font-normal leading-4">
             {formatCompactNumber(formatTokenAmount(stakingInfo?.totalStaked || 0n, 18))} total staked
@@ -92,10 +119,16 @@ export function StakeStatsCard(): React.JSX.Element {
 
       <div className="w-full flex justify-between items-center">
         <div className="flex flex-col gap-1">
-          <div className="justify-center text-clay text-[9px] font-medium uppercase leading-3">STAKING NOW</div>
+          <div className="justify-center text-clay text-[9px] font-medium uppercase leading-3">MAX PENALTY</div>
           <div className="flex justify-start items-center gap-1">
-            <div className="text-espresso text-(length:--body-comfortable) font-bold leading-5">
-              {STAKING_NOW_HOLDERS}
+            <div className="text-espresso text-lg font-semibold leading-5">
+              {isLoadingStakingConfig ? (
+                <LoadingThreeDotsJumping />
+              ) : stakingConfig ? (
+                `${Number(stakingConfig.maxPenalty)}%`
+              ) : (
+                '—'
+              )}
             </div>
           </div>
         </div>
@@ -105,7 +138,30 @@ export function StakeStatsCard(): React.JSX.Element {
             <div className="text-espresso text-(length:--body-comfortable) font-bold leading-5">
               {isLoadingStakingConfig ? <LoadingThreeDotsJumping /> : '180 days'}
             </div>
-            {shouldShowUnstakingPeriodInfo ? <Info className="w-4 h-4 text-clay-light" /> : null}
+            {shouldShowUnstakingPeriodInfo ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button type="button">
+                    <Info className="w-4 h-4 text-clay-light" />{' '}
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent
+                  side="top"
+                  sideOffset={10}
+                  className="bg-white px-4 py-2 text-espresso rounded-full text-(length:--body-small)"
+                >
+                  <a
+                    href="https://support.sodax.com/en/articles/13918114-how-do-i-unstake-soda-on-sodax-stake"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-yellow-dark font-bold"
+                  >
+                    Faster unstaking options
+                  </a>{' '}
+                  available
+                </TooltipContent>
+              </Tooltip>
+            ) : null}
           </div>
         </div>
       </div>

apps/web/app/(apps)/swap/_components/swap-review-button.tsx

@@ -127,7 +127,7 @@ export default function SwapReviewButton({
           onClick={handleActivateStellarAccount}
           disabled={isActivatingStellarAccount || isSwapAndSend}
         >
-          {isActivatingStellarAccount ? 'Activating Stellar Account' : 'Activate Stellar Account'}
+          {isActivatingStellarAccount ? 'Activating Stellar' : 'Activate Stellar'}
           {isActivatingStellarAccount && <Loader2 className="w-4 h-4 animate-spin" />}
         </Button>
       ) : outputToken.xChainId === STELLAR_MAINNET_CHAIN_ID &&