feat: swap provider selection [PERA-3312]

apps/mobile/src/components/core/PWIcon/constants.ts

@@ -77,6 +77,7 @@ import ShareIcon from '@assets/icons/share.svg'
 import ShieldCheckIcon from '@assets/icons/shield-check.svg'
 import SlidersIcon from '@assets/icons/sliders.svg'
 import SnowflakeIcon from '@assets/icons/snowflake.svg'
+import SparkleIcon from '@assets/icons/sparkle.svg'
 import StarIcon from '@assets/icons/star.svg'
 import StarFilledIcon from '@assets/icons/star-filled.svg'
 import SwapIcon from '@assets/icons/swap.svg'
@@ -207,6 +208,7 @@ export const ICON_LIBRARY = {
     'shield-check': ShieldCheckIcon,
     sliders: SlidersIcon,
     snowflake: SnowflakeIcon,
+    sparkle: SparkleIcon,
     star: StarIcon,
     'star-filled': StarFilledIcon,
     swap: SwapIcon,

apps/mobile/src/components/core/PWRadioButton/PWRadioButton.tsx

@@ -10,6 +10,8 @@
  limitations under the License
  */
 
+import { ReactNode } from 'react'
+import { StyleProp, ViewStyle } from 'react-native'
 import { PWText } from '../PWText'
 import { PWTouchableOpacity } from '../PWTouchableOpacity'
 import { PWView } from '../PWView'
@@ -19,33 +21,38 @@ import { useStyles } from './styles'
 
 export type PWRadioButtonProps = {
     onPress: () => void
-    title: string
+    title?: string
+    children?: ReactNode
     isSelected: boolean
     isDisabled?: boolean
     testID?: string
+    containerStyle?: StyleProp<ViewStyle>
 }
 export const PWRadioButton = ({
     onPress,
     title,
+    children,
     isSelected,
     isDisabled = false,
     testID,
+    containerStyle,
 }: PWRadioButtonProps) => {
     const styles = useStyles()
 
     return (
         <PWTouchableOpacity
             onPress={onPress}
             disabled={isDisabled}
-            style={[styles.row, isDisabled && styles.disabled]}
+            style={[styles.row, isDisabled && styles.disabled, containerStyle]}
             {...getTestProps(testID)}
         >
-            <PWText>{title}</PWText>
+            {children ?? <PWText>{title}</PWText>}
             <PWView
                 style={[
                     styles.radioContainer,
                     isSelected && styles.selectedBorder,
                 ]}
+                testID={testID ? `${testID}-radio` : undefined}
             >
                 {isSelected && <PWView style={styles.selectedRadio} />}
             </PWView>

apps/mobile/src/i18n/locales/en.json

@@ -1316,7 +1316,6 @@
             "price_impact": "Price Impact",
             "slippage_tolerance": "Slippage Tolerance",
             "pera_fee": "Pera Fee",
-            "exchange_fee": "Exchange Fee",
             "provider": "Provider",
             "minimum_received": "Minimum Received",
             "review_swap": "Review Swap",
@@ -1340,8 +1339,15 @@
         },
         "info": {
             "slippage_tolerance": "The maximum difference between the expected price and the execution price. A higher tolerance increases the chance of a successful swap but may result in a less favorable rate.",
-            "price_impact": "The difference between the market price and the estimated price due to trade size. Larger trades typically have a higher price impact.",
-            "exchange_fee": "The fee charged by the decentralized exchange for facilitating this swap."
+            "price_impact": "The difference between the market price and the estimated price due to trade size. Larger trades typically have a higher price impact."
+        },
+        "provider": {
+            "title_auto": "Provider (Best price available)",
+            "title_manual": "Provider",
+            "change_title": "Change Provider",
+            "apply": "Apply",
+            "auto_label": "Auto",
+            "auto_description": "Best price available"
         }
     },
     "ledger": {

apps/mobile/src/modules/swap/components/SwapAmountSection/SwapAmountSection.tsx

@@ -113,7 +113,6 @@ export const SwapAmountSection = (props: SwapAmountSectionProps) => {
                                     ? styles.amountText
                                     : styles.amountTextMuted
                             }
-                            variant='h2'
                             testID='swap-receive-amount'
                         >
                             {displayValue || '0.00'}

apps/mobile/src/modules/swap/components/SwapAmountSection/styles.ts

@@ -11,6 +11,7 @@
  */
 
 import { makeStyles } from '@rneui/themed'
+import { getTypography } from '@theme/typography'
 
 export const useStyles = makeStyles(theme => ({
     container: {
@@ -46,10 +47,9 @@ export const useStyles = makeStyles(theme => ({
     amountContainer: {
         flex: 1,
     },
-    amountText: {
-        color: theme.colors.textMain,
-    },
+    amountText: getTypography(theme, 'h2'),
     amountTextMuted: {
+        ...getTypography(theme, 'h2'),
         color: theme.colors.textGrayLighter,
     },
     amountInputContainer: {

apps/mobile/src/modules/swap/components/SwapConfirmationBottomSheet/SwapConfirmationBottomSheet.tsx

@@ -58,7 +58,6 @@ export const SwapConfirmationBottomSheet = ({
         rateDisplay,
         minimumReceivedDisplay,
         peraFeeDisplay,
-        exchangeFeeDisplay,
         hasHighPriceImpact,
         priceImpactDisplay,
         priceImpactStyle,
@@ -136,7 +135,6 @@ export const SwapConfirmationBottomSheet = ({
                     rateDisplay={rateDisplay}
                     minimumReceivedDisplay={minimumReceivedDisplay}
                     peraFeeDisplay={peraFeeDisplay}
-                    exchangeFeeDisplay={exchangeFeeDisplay}
                     priceImpactDisplay={priceImpactDisplay}
                     priceImpactStyle={priceImpactStyle}
                 />

apps/mobile/src/modules/swap/components/SwapConfirmationBottomSheet/SwapDetailsSection.tsx

@@ -22,7 +22,6 @@ type SwapDetailsSectionProps = {
     rateDisplay: string
     minimumReceivedDisplay: string
     peraFeeDisplay: string
-    exchangeFeeDisplay: string
     priceImpactDisplay: string
     priceImpactStyle: object
 }
@@ -32,7 +31,6 @@ export const SwapDetailsSection = ({
     rateDisplay,
     minimumReceivedDisplay,
     peraFeeDisplay,
-    exchangeFeeDisplay,
     priceImpactDisplay,
     priceImpactStyle,
 }: SwapDetailsSectionProps) => {
@@ -75,12 +73,6 @@ export const SwapDetailsSection = ({
                 value={minimumReceivedDisplay}
                 valueStyle={styles.detailValue}
             />
-            <DetailRow
-                label={t('swap.quote.exchange_fee')}
-                value={exchangeFeeDisplay}
-                valueStyle={styles.detailValue}
-                info={t('swap.info.exchange_fee')}
-            />
             <DetailRow
                 label={t('swap.quote.pera_fee')}
                 value={peraFeeDisplay}

apps/mobile/src/modules/swap/components/SwapConfirmationBottomSheet/__tests__/SwapConfirmationBottomSheet.spec.tsx

@@ -185,7 +185,6 @@ const createQuote = (overrides: Partial<SwapQuote> = {}): SwapQuote => ({
     priceImpact: new Decimal('0.5'),
     slippage: new Decimal('0.5'),
     peraFeeAmount: new Decimal('1000'),
-    exchangeFeeAmount: new Decimal('2000'),
     provider: 'tinyman',
     providerDisplayName: 'Tinyman',
     ...overrides,
@@ -231,7 +230,6 @@ describe('SwapConfirmationBottomSheet', () => {
         expect(screen.getByText('swap.quote.slippage_tolerance')).toBeDefined()
         expect(screen.getByText('swap.quote.price_impact')).toBeDefined()
         expect(screen.getByText('swap.quote.minimum_received')).toBeDefined()
-        expect(screen.getByText('swap.quote.exchange_fee')).toBeDefined()
         expect(screen.getByText('swap.quote.pera_fee')).toBeDefined()
     })
 

apps/mobile/src/modules/swap/components/SwapConfirmationBottomSheet/useSwapConfirmation.ts

@@ -43,7 +43,6 @@ type UseSwapConfirmationResult = {
     rateDisplay: string
     minimumReceivedDisplay: string
     peraFeeDisplay: string
-    exchangeFeeDisplay: string
     hasHighPriceImpact: boolean
     priceImpactDisplay: string
     priceImpactStyle: object
@@ -118,14 +117,6 @@ export const useSwapConfirmation = ({
         return formatAssetAmount(quote.peraFeeAmount, quote.assetIn)
     }, [quote?.peraFeeAmount, quote?.assetIn])
 
-    const exchangeFeeDisplay = useMemo(() => {
-        if (!quote?.exchangeFeeAmount) return '-'
-        if (quote.exchangeFeeAmount.isZero()) {
-            return `0 ${quote.assetIn.unitName ?? ''}`.trim()
-        }
-        return formatAssetAmount(quote.exchangeFeeAmount, quote.assetIn)
-    }, [quote?.exchangeFeeAmount, quote?.assetIn])
-
     const hasHighPriceImpact = useMemo(
         () =>
             quote?.priceImpact?.greaterThanOrEqualTo(
@@ -159,7 +150,6 @@ export const useSwapConfirmation = ({
         rateDisplay,
         minimumReceivedDisplay,
         peraFeeDisplay,
-        exchangeFeeDisplay,
         hasHighPriceImpact,
         priceImpactDisplay,
         priceImpactStyle,

apps/mobile/src/modules/swap/components/SwapForm/SwapForm.tsx

@@ -16,6 +16,8 @@ import { SwapAssetSelectionBottomSheet } from '../SwapAssetSelectionBottomSheet'
 import { SwapAmountSection } from '../SwapAmountSection'
 import { SwapConfigurationBottomSheet } from '../SwapConfigurationBottomSheet'
 import { SwapConfirmationBottomSheet } from '../SwapConfirmationBottomSheet'
+import { SwapProviderBottomSheet } from '../SwapProviderBottomSheet'
+import { SwapProviderRow } from '../SwapProviderRow'
 import { SwapFormControls } from './SwapFormControls'
 import { useSwapForm } from './useSwapForm'
 import { useStyles } from './styles'
@@ -33,18 +35,23 @@ export const SwapForm = () => {
         isQuoteFetching,
         isQuoteError,
         selectedQuote,
+        allQuotes,
+        selectedProviderName,
+        providerSelectionMode,
         canSwap,
         swapStatus,
         payAssetModal,
         receiveAssetModal,
         configModal,
         confirmModal,
+        providerModal,
         handlePayAmountChange,
         handleSwapDirection,
         handleMaxPress,
         handlePayAssetSelected,
         handleReceiveAssetSelected,
         handleConfigApply,
+        handleProviderApply,
         handleConfirmSwap,
         handleOpenConfirm,
         handleCloseConfirm,
@@ -79,6 +86,14 @@ export const SwapForm = () => {
                     />
                 </PWView>
 
+                {selectedQuote && (
+                    <SwapProviderRow
+                        quote={selectedQuote}
+                        selectionMode={providerSelectionMode}
+                        onPress={providerModal.open}
+                    />
+                )}
+
                 {isQuoteError && (
                     <PWView style={styles.errorContainer}>
                         <PWText
@@ -90,14 +105,16 @@ export const SwapForm = () => {
                     </PWView>
                 )}
 
-                <PWButton
-                    variant='primary'
-                    title={t('swap.form.swap')}
-                    onPress={handleOpenConfirm}
-                    isDisabled={!canSwap}
-                    style={styles.swapButton}
-                    testID='swap-button'
-                />
+                {selectedQuote && (
+                    <PWButton
+                        variant='primary'
+                        title={t('swap.form.swap')}
+                        onPress={handleOpenConfirm}
+                        isDisabled={!canSwap}
+                        style={styles.swapButton}
+                        testID='swap-button'
+                    />
+                )}
             </PWScrollView>
 
             <SwapAssetSelectionBottomSheet
@@ -127,6 +144,14 @@ export const SwapForm = () => {
                 quote={selectedQuote}
                 swapStatus={swapStatus}
             />
+
+            <SwapProviderBottomSheet
+                isVisible={providerModal.isOpen}
+                onClose={providerModal.close}
+                quotes={allQuotes}
+                selectedProviderName={selectedProviderName}
+                onApply={handleProviderApply}
+            />
         </>
     )
 }

apps/mobile/src/modules/swap/components/SwapForm/styles.ts

@@ -69,7 +69,7 @@ export const useStyles = makeStyles(theme => ({
         color: theme.colors.linkPrimary,
     },
     swapButton: {
-        marginTop: theme.spacing.lg,
+        marginTop: theme.spacing.sm,
     },
     errorContainer: {
         paddingHorizontal: theme.spacing.lg,