feat(swap): Initial Swap screen redesign

locales/base/translation.json

@@ -1769,6 +1769,9 @@
     "swapToTokenSelection": "SWAP TO",
     "tokenUsdValueUnknown": "-",
     "unsupportedSwapTokens": "The selected tokens aren't supported by our swap providers.",
+    "selectTokenLabel": "Select token",
+    "tokenBottomSheetTitle": "Select Token",
+    "onNetwork": "on {{networkName}}",
     "switchedToNetworkWarning": {
       "title": "You switched to the {{networkName}} network",
       "body_swapFrom": "Select a token to swap from on the {{networkName}} network to continue.",

src/analytics/Events.tsx

@@ -568,6 +568,7 @@ export enum SwapEvents {
   swap_show_info = 'swap_show_info',
   swap_show_fund_your_wallet = 'swap_show_fund_your_wallet',
   swap_add_funds = 'swap_add_funds',
+  swap_switch_tokens = 'swap_switch_tokens',
 }
 
 export enum CeloNewsEvents {

src/analytics/Properties.tsx

@@ -1319,6 +1319,10 @@ interface SwapEventsProperties {
   }
   [SwapEvents.swap_show_fund_your_wallet]: undefined
   [SwapEvents.swap_add_funds]: undefined
+  [SwapEvents.swap_switch_tokens]: {
+    fromTokenId: string | undefined
+    toTokenId: string | undefined
+  }
 }
 
 interface CeloNewsEventsProperties {

src/analytics/docs.ts

@@ -551,6 +551,7 @@ export const eventDocs: Record<AnalyticsEventType, string> = {
   [SwapEvents.swap_show_info]: `When a user taps an info icon to show more information on the swap screen`,
   [SwapEvents.swap_show_fund_your_wallet]: `When "Fund your wallet" bottom sheet is displayed`,
   [SwapEvents.swap_add_funds]: `When user taps "Add funds" button is "Fund your wallet" bottom sheet`,
+  [SwapEvents.swap_switch_tokens]: `When a user taps the button to switch the to and from tokens`,
   [CeloNewsEvents.celo_news_screen_open]: `When the screen is mounted`,
   [CeloNewsEvents.celo_news_article_tap]: `When a user taps on a news article`,
   [CeloNewsEvents.celo_news_bottom_read_more_tap]: `When a user taps on the read more button at the bottom of the screen`,

src/components/Touchable.tsx

@@ -1,27 +1,48 @@
 import * as React from 'react'
-import { TouchableWithoutFeedbackProps, View } from 'react-native'
+import { TouchableWithoutFeedbackProps, View, ViewStyle } from 'react-native'
 import PlatformTouchable from 'react-native-platform-touchable'
 
+type BorderRadiusStyle = Pick<
+  ViewStyle,
+  | 'borderTopLeftRadius'
+  | 'borderTopRightRadius'
+  | 'borderBottomLeftRadius'
+  | 'borderBottomRightRadius'
+>
+
 export interface Props extends TouchableWithoutFeedbackProps {
   borderless?: boolean
   children: React.ReactNode // must only have one direct child. see https://github.com/react-native-community/react-native-platform-touchable#touchable
-  borderRadius?: number
+  borderRadius?: number | BorderRadiusStyle
+  shouldRenderRippleAbove?: boolean
 }
 
 /**
  * @param borderless - If true, the touchable has a borderless ripple effect.
- * @param borderRadius - should be added if the touchable component has rounded corners, to prevent the ripple effect from going outside the component on tap (Android)
+ * @param borderRadius - should be added if the touchable component has rounded corners, to prevent the ripple effect from going outside the component on tap (Android). Can either be a number
+ *   representing a single border radius, or an object individually specifying each corner's radius.
+ * @param shouldRenderRippleAbove - If present, ensures that the ripple effect will render above the touchable component. See https://github.com/facebook/react-native/issues/17200
  * @returns A touchable component
  */
-export default function Touchable({ borderless, borderRadius = 0, ...passThroughProps }: Props) {
+export default function Touchable({
+  shouldRenderRippleAbove,
+  borderless,
+  borderRadius = 0,
+  ...passThroughProps
+}: Props) {
   const background = borderless
     ? PlatformTouchable.SelectableBackgroundBorderless()
     : PlatformTouchable.SelectableBackground()
+  const borderStyle = typeof borderRadius === 'number' ? { borderRadius } : borderRadius
   return borderRadius === 0 ? (
     <PlatformTouchable {...passThroughProps} background={background} />
   ) : (
-    <View style={[{ borderRadius }, !borderless && { overflow: 'hidden' }]}>
-      <PlatformTouchable {...passThroughProps} background={background} />
+    <View style={[borderStyle, !borderless && { overflow: 'hidden' }]}>
+      <PlatformTouchable
+        {...passThroughProps}
+        background={shouldRenderRippleAbove ? undefined : background}
+        foreground={shouldRenderRippleAbove ? background : undefined}
+      />
     </View>
   )
 }

src/icons/DownIndicator.tsx

@@ -5,11 +5,12 @@ import Svg, { Path } from 'svgs'
 export interface Props {
   color?: string
   testID?: string
+  size?: number
 }
 
-function DownIndicator({ color = colors.error, testID }: Props) {
+function DownIndicator({ color = colors.error, testID, size = 10 }: Props) {
   return (
-    <Svg width="10" height="10" viewBox="0 0 10 10" fill="none" testID={testID}>
+    <Svg width={size} height={size} viewBox="0 0 10 10" fill="none" testID={testID}>
       <Path
         fill={color}
         d="M4.369 0H5.63v7.576l3.473-3.472L10 5l-5 5-5-5 .896-.896L4.37 7.576V0Z"