Show Nym mixnet warning in stake/unstake/claim scenes

Author: j0ntz

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased (develop)
 
+- added: Nym mixnet warning in Stake, Unstake, and Claim Rewards scenes
+
 ## 4.48.0 (staging)
 
 - added: (iOS) Disable Liquid Glass UI for iOS 26 compatibility

src/components/scenes/Staking/StakeModifyScene.tsx

@@ -1,4 +1,5 @@
 import { div, eq, gt, toFixed } from 'biggystring'
+import { asMaybe } from 'cleaners'
 import {
   DustSpendError,
   type EdgeCurrencyWallet,
@@ -12,6 +13,7 @@ import { sprintf } from 'sprintf-js'
 import { updateStakingPosition } from '../../../actions/scene/StakingActions'
 import { useAsyncEffect } from '../../../hooks/useAsyncEffect'
 import { useDisplayDenom } from '../../../hooks/useDisplayDenom'
+import { useWatch } from '../../../hooks/useWatch'
 import { lstrings } from '../../../locales/strings'
 import {
   type ChangeQuote,
@@ -35,8 +37,10 @@ import {
   getPositionAllocations
 } from '../../../util/stakeUtils'
 import { zeroString } from '../../../util/utils'
+import { AlertCardUi4 } from '../../cards/AlertCard'
 import { EdgeCard } from '../../cards/EdgeCard'
 import { WarningCard } from '../../cards/WarningCard'
+import { EdgeAnim } from '../../common/EdgeAnim'
 import { SceneWrapper } from '../../common/SceneWrapper'
 import { withWallet } from '../../hoc/withWallet'
 import { SceneContainer } from '../../layout/SceneContainer'
@@ -52,6 +56,7 @@ import { Airship, showError } from '../../services/AirshipInstance'
 import { cacheStyles, type Theme, useTheme } from '../../services/ThemeContext'
 import { Alert } from '../../themed/Alert'
 import { EdgeText } from '../../themed/EdgeText'
+import { asPrivateNetworkingSetting } from '../../themed/MaybePrivateNetworkingSetting'
 import { SafeSlider } from '../../themed/SafeSlider'
 import { CryptoFiatAmountTile } from '../../tiles/CryptoFiatAmountTile'
 import { EditableAmountTile } from '../../tiles/EditableAmountTile'
@@ -94,6 +99,10 @@ const StakeModifySceneComponent: React.FC<Props> = props => {
   const guiExchangeRates = useSelector(state => state.exchangeRates)
   const nativeAssetDenomination = useDisplayDenom(wallet.currencyConfig, null)
 
+  const userSettings = useWatch(wallet.currencyConfig, 'userSettings')
+  const isNymActive =
+    asMaybe(asPrivateNetworkingSetting)(userSettings)?.networkPrivacy === 'nym'
+
   // ChangeQuote that gets rendered in the rows
   const [changeQuote, setChangeQuote] = React.useState<ChangeQuote | null>(null)
   const changeQuoteAllocations =
@@ -627,7 +636,7 @@ const StakeModifySceneComponent: React.FC<Props> = props => {
     return warningMessage == null ? null : (
       <Alert
         key="warning"
-        marginRem={[0, 1, 1, 1]}
+        marginRem={[0, 1, 0, 1]}
         title={lstrings.wc_smartcontract_warning_title}
         message={warningMessage}
         numberOfLines={0}
@@ -636,6 +645,24 @@ const StakeModifySceneComponent: React.FC<Props> = props => {
     )
   }
 
+  const renderNymWarning = (): React.ReactElement | null => {
+    if (!isNymActive) return null
+
+    return (
+      <EdgeAnim
+        enter={{ type: 'fadeInUp', distance: 60 }}
+        exit={{ type: 'fadeOutDown' }}
+      >
+        <AlertCardUi4
+          type="warning"
+          title={lstrings.settings_nym_mixnet_warning_title}
+          body={lstrings.settings_nym_mixnet_warning_body}
+          marginRem={[0, 0.5, 0, 0.5]}
+        />
+      </EdgeAnim>
+    )
+  }
+
   const renderChangeQuoteAmountTiles = (
     modification: ChangeQuoteRequest['action']
   ): React.ReactElement => {
@@ -741,6 +768,7 @@ const StakeModifySceneComponent: React.FC<Props> = props => {
       <SceneContainer headerTitle={title} headerTitleChildren={icon}>
         {renderChangeQuoteAmountTiles(modification)}
         {renderWarning()}
+        {renderNymWarning()}
         <View style={styles.footer}>
           <SafeSlider
             onSlidingComplete={handleSlideComplete}
@@ -775,6 +803,7 @@ const getStyles = cacheStyles((theme: Theme) => ({
     marginTop: theme.rem(0.5)
   },
   footer: {
+    marginTop: theme.rem(1),
     marginBottom: theme.rem(2)
   }
 }))