Add Stealth Swap to the existing swap flow

A Stealth Swap toggle card on the amount-entry scene restricts the
quote request to the Houdini privacy provider (all other providers
disabled for the request), with the final copy and a working
"Learn more" link. The confirmation scene keeps the restriction on
re-quotes and renders the powered-by card as a fixed provider: no
chevron and no "tap to change provider" hint, via a now-optional
PoweredByCard onPress.

Author: j0ntz

src/components/cards/PoweredByCard.tsx

@@ -11,18 +11,23 @@ import { EdgeCard } from './EdgeCard'
 interface Props {
   poweredByText: string
   iconUri?: string
-  onPress: () => Promise<void> | void
+  // When omitted, the card is not tappable: no chevron and no
+  // "tap to change provider" hint are shown (e.g. a fixed-provider swap).
+  onPress?: () => Promise<void> | void
 }
 
 /**
  * Small card that displays "Powered by {provider}" with an optional logo.
- * Tapping the card triggers `onPress` to change the active provider.
+ * Tapping the card triggers `onPress` to change the active provider. When
+ * `onPress` is omitted the card is static (no chevron) to indicate the
+ * provider cannot be changed.
  */
 export const PoweredByCard: React.FC<Props> = (props: Props) => {
   const { iconUri, poweredByText, onPress } = props
   const theme = useTheme()
   const styles = getStyles(theme)
   const iconSrc = iconUri == null ? {} : { uri: iconUri }
+  const tappable = onPress != null
 
   return (
     <View style={styles.cardContainer}>
@@ -40,13 +45,17 @@ export const PoweredByCard: React.FC<Props> = (props: Props) => {
               </EdgeText>
               <EdgeText style={styles.poweredByText}>{poweredByText}</EdgeText>
             </View>
-            <View style={styles.poweredByContainerRow}>
-              <EdgeText style={styles.tapToChangeText}>
-                {lstrings.tap_to_change_provider}
-              </EdgeText>
-            </View>
+            {tappable ? (
+              <View style={styles.poweredByContainerRow}>
+                <EdgeText style={styles.tapToChangeText}>
+                  {lstrings.tap_to_change_provider}
+                </EdgeText>
+              </View>
+            ) : null}
           </View>
-          <ChevronRightIcon color={theme.iconTappable} size={theme.rem(1)} />
+          {tappable ? (
+            <ChevronRightIcon color={theme.iconTappable} size={theme.rem(1)} />
+          ) : null}
         </View>
       </EdgeCard>
     </View>

src/components/scenes/SwapConfirmationScene.tsx

@@ -25,6 +25,7 @@ import type { GuiSwapInfo } from '../../types/types'
 import { getSwapPluginIconUri } from '../../util/CdnUris'
 import { CryptoAmount } from '../../util/CryptoAmount'
 import { logActivity } from '../../util/logger'
+import { makeStealthSwapRequestOptions } from '../../util/stealthSwap'
 import { logEvent } from '../../util/tracking'
 import { convertNativeToExchange, DECIMAL_PRECISION } from '../../util/utils'
 import { AlertCardUi4 } from '../cards/AlertCard'
@@ -62,6 +63,13 @@ export interface SwapConfirmationParams {
   selectedQuote: EdgeSwapQuote
   quotes: EdgeSwapQuote[]
   onApprove: () => void
+
+  /**
+   * A Stealth Swap routes through the Houdini privacy provider as a fixed
+   * provider: the powered-by card is not tappable and a re-quote keeps the
+   * provider restriction.
+   */
+  stealth?: boolean
 }
 
 interface Props extends SwapTabSceneProps<'swapConfirmation'> {}
@@ -73,7 +81,7 @@ interface Section {
 
 export const SwapConfirmationScene: React.FC<Props> = (props: Props) => {
   const { route, navigation } = props
-  const { quotes, onApprove } = route.params
+  const { quotes, onApprove, stealth = false } = route.params
 
   const dispatch = useDispatch()
   const theme = useTheme()
@@ -185,15 +193,18 @@ export const SwapConfirmationScene: React.FC<Props> = (props: Props) => {
 
     navigation.replace('swapProcessing', {
       swapRequest: selectedQuote.request,
-      swapRequestOptions,
+      swapRequestOptions: stealth
+        ? makeStealthSwapRequestOptions(account, swapRequestOptions)
+        : swapRequestOptions,
       onCancel: () => {
         navigation.navigate('swapTab', { screen: 'swapCreate' })
       },
       onDone: quotes => {
         navigation.replace('swapConfirmation', {
           selectedQuote: quotes[0],
           quotes,
-          onApprove
+          onApprove,
+          stealth
         })
       }
     })
@@ -461,11 +472,20 @@ export const SwapConfirmationScene: React.FC<Props> = (props: Props) => {
           />
         </EdgeAnim>
         <EdgeAnim enter={fadeInDown60}>
-          <PoweredByCard
-            iconUri={getSwapPluginIconUri(selectedQuote.pluginId, theme)}
-            poweredByText={exchangeName}
-            onPress={handlePoweredByTap}
-          />
+          {stealth ? (
+            // A stealth swap's provider is fixed, so the card is not
+            // tappable (no chevron, no "tap to change provider"):
+            <PoweredByCard
+              iconUri={getSwapPluginIconUri(selectedQuote.pluginId, theme)}
+              poweredByText={exchangeName}
+            />
+          ) : (
+            <PoweredByCard
+              iconUri={getSwapPluginIconUri(selectedQuote.pluginId, theme)}
+              poweredByText={exchangeName}
+              onPress={handlePoweredByTap}
+            />
+          )}
         </EdgeAnim>
         {selectedQuote.isEstimate && !showPriceImpact ? (
           <EdgeAnim enter={fadeInDown90}>

src/components/scenes/SwapCreateScene.tsx

@@ -25,11 +25,14 @@ import { useDispatch, useSelector } from '../../types/reactRedux'
 import type { NavigationBase, SwapTabSceneProps } from '../../types/routerTypes'
 import { getCurrencyCode } from '../../util/CurrencyInfoHelpers'
 import { getWalletName } from '../../util/CurrencyWalletHelpers'
+import { makeStealthSwapRequestOptions } from '../../util/stealthSwap'
 import { zeroString } from '../../util/utils'
+import { openBrowserUri } from '../../util/WebUtils'
 import { EdgeButton } from '../buttons/EdgeButton'
 import { KavButtons } from '../buttons/KavButtons'
 import { SceneButtons } from '../buttons/SceneButtons'
 import { AlertCardUi4 } from '../cards/AlertCard'
+import { EdgeCard } from '../cards/EdgeCard'
 import {
   EdgeAnim,
   fadeInDown30,
@@ -46,9 +49,16 @@ import {
   WalletListModal,
   type WalletListResult
 } from '../modals/WalletListModal'
-import { Airship, showToast, showWarning } from '../services/AirshipInstance'
-import { useTheme } from '../services/ThemeContext'
+import {
+  Airship,
+  showError,
+  showToast,
+  showWarning
+} from '../services/AirshipInstance'
+import { cacheStyles, type Theme, useTheme } from '../services/ThemeContext'
+import { SettingsSwitchRow } from '../settings/SettingsSwitchRow'
 import { UnscaledText } from '../text/UnscaledText'
+import { EdgeText } from '../themed/EdgeText'
 import { LineTextDivider } from '../themed/LineTextDivider'
 import {
   SwapInput,
@@ -74,6 +84,10 @@ export interface SwapErrorDisplayInfo {
   error: unknown
 }
 
+/** Placeholder pending the final marketing URL. */
+const STEALTH_LEARN_MORE_URI =
+  'https://gist.github.com/j0ntz/b3f8101f0a1f79539150fc73511bff8b'
+
 interface Props extends SwapTabSceneProps<'swapCreate'> {}
 
 export const SwapCreateScene: React.FC<Props> = props => {
@@ -86,6 +100,7 @@ export const SwapCreateScene: React.FC<Props> = props => {
     errorDisplayInfo
   } = route.params ?? {}
   const theme = useTheme()
+  const styles = getStyles(theme)
   const dispatch = useDispatch()
 
   // Input state is the state of the user input
@@ -95,6 +110,10 @@ export const SwapCreateScene: React.FC<Props> = props => {
     'from' | 'to'
   >('from')
 
+  // Stealth Swap: when enabled, the quote routes through the Houdini privacy
+  // provider as a fixed provider (see SwapConfirmationScene).
+  const [stealth, setStealth] = useState(false)
+
   const fromInputRef = React.useRef<SwapInputCardInputRef>(null)
   const toInputRef = React.useRef<SwapInputCardInputRef>(null)
 
@@ -272,18 +291,22 @@ export const SwapCreateScene: React.FC<Props> = props => {
       errorDisplayInfo: undefined
     })
 
-    // Start request for quote:
+    // Start request for quote. A stealth swap restricts the request to the
+    // Houdini privacy provider:
     navigation.navigate('swapProcessing', {
       swapRequest,
-      swapRequestOptions,
+      swapRequestOptions: stealth
+        ? makeStealthSwapRequestOptions(account, swapRequestOptions)
+        : swapRequestOptions,
       onCancel: () => {
         navigation.goBack()
       },
       onDone: quotes => {
         navigation.replace('swapConfirmation', {
           selectedQuote: quotes[0],
           quotes,
-          onApprove: resetState
+          onApprove: resetState,
+          stealth
         })
       }
     })
@@ -447,6 +470,16 @@ export const SwapCreateScene: React.FC<Props> = props => {
     Keyboard.dismiss()
   })
 
+  const handleToggleStealth = useHandler(() => {
+    setStealth(value => !value)
+  })
+
+  const handleStealthLearnMore = useHandler(() => {
+    openBrowserUri(STEALTH_LEARN_MORE_URI).catch((err: unknown) => {
+      showError(err)
+    })
+  })
+
   const handleFromAmountChange = useHandler((amounts: SwapInputCardAmounts) => {
     navigation.setParams({
       // Update the error state:
@@ -613,6 +646,30 @@ export const SwapCreateScene: React.FC<Props> = props => {
               />
             )}
           </EdgeAnim>
+          {fromWallet != null && toWallet != null ? (
+            <EdgeAnim enter={fadeInDown60}>
+              <EdgeCard sections>
+                <SettingsSwitchRow
+                  label={lstrings.stealth_swap_toggle}
+                  value={stealth}
+                  onPress={handleToggleStealth}
+                />
+                {stealth ? (
+                  <View style={styles.stealthInfo}>
+                    <EdgeText style={styles.stealthInfoText} numberOfLines={4}>
+                      {lstrings.stealth_swap_info}{' '}
+                      <EdgeText
+                        style={styles.stealthLearnMoreLink}
+                        onPress={handleStealthLearnMore}
+                      >
+                        {lstrings.stealth_learn_more}
+                      </EdgeText>
+                    </EdgeText>
+                  </View>
+                ) : null}
+              </EdgeCard>
+            </EdgeAnim>
+          ) : null}
           <EdgeAnim enter={fadeInDown60}>{renderAlert()}</EdgeAnim>
           <EdgeAnim enter={fadeInDown90}>
             {isNextHidden || isKeyboardOpen ? null : (
@@ -642,3 +699,18 @@ const MaxButtonText = styled(UnscaledText)(theme => ({
   fontSize: theme.rem(0.75),
   includeFontPadding: false
 }))
+
+const getStyles = cacheStyles((theme: Theme) => ({
+  stealthInfo: {
+    paddingHorizontal: theme.rem(1),
+    paddingBottom: theme.rem(0.75)
+  },
+  stealthInfoText: {
+    color: theme.secondaryText,
+    fontSize: theme.rem(0.75)
+  },
+  stealthLearnMoreLink: {
+    color: theme.textLink,
+    fontSize: theme.rem(0.75)
+  }
+}))

src/util/stealthSwap.ts

@@ -0,0 +1,27 @@
+import type {
+  EdgeAccount,
+  EdgePluginMap,
+  EdgeSwapRequestOptions
+} from 'edge-core-js'
+
+/**
+ * Restricts a swap request to the Houdini privacy provider, for Stealth Swap
+ * and Stealth Send. Every other enabled swap provider is disabled for the
+ * request, and any preferred-provider override is cleared so it cannot fight
+ * the restriction.
+ */
+export function makeStealthSwapRequestOptions(
+  account: EdgeAccount,
+  opts: EdgeSwapRequestOptions = {}
+): EdgeSwapRequestOptions {
+  const disabled: EdgePluginMap<true> = { ...opts.disabled }
+  for (const swapPluginId of Object.keys(account.swapConfig)) {
+    if (swapPluginId !== 'houdini') disabled[swapPluginId] = true
+  }
+  return {
+    ...opts,
+    disabled,
+    preferPluginId: undefined,
+    preferType: undefined
+  }
+}