feat(swap): Initial Swap screen redesign

locales/base/translation.json

@@ -1765,10 +1765,11 @@
     "insufficientFunds": "Insufficient {{token}} balance. Try a smaller amount or choose a different asset.",
     "fetchSwapQuoteFailed": "Sorry for the delay! It's taking longer than usual to get the best exchange rate. Please try again in a few minutes.",
     "disclaimer": "Best rate determined by decentralized sources. <0>Learn more</0>",
-    "swapFromTokenSelection": "SWAP FROM",
-    "swapToTokenSelection": "SWAP TO",
     "tokenUsdValueUnknown": "-",
     "unsupportedSwapTokens": "The selected tokens aren't supported by our swap providers.",
+    "selectToken": "Select token",
+    "selectTokenTitle": "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

@@ -1317,6 +1317,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

@@ -549,6 +549,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 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/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"

src/swap/SwapAmountInput.tsx

@@ -20,9 +20,9 @@
 import fontStyles, { typeScale } from 'src/styles/fonts'
 import { Spacing } from 'src/styles/styles'
 import { TokenBalance } from 'src/tokens/slice'
+import { NETWORK_NAMES } from 'src/shared/conts'
 
 interface Props {
-  label: string
   onInputChange(value: string): void
   inputValue?: string | null
   parsedInputValue?: BigNumber | null
@@ -38,7 +38,6 @@
 }
 
 const SwapAmountInput = ({
-  label,
   onInputChange,
   inputValue,
   parsedInputValue,
@@ -68,137 +67,123 @@
 
   return (
     <View style={[styles.container, style]} testID="SwapAmountInput">
-      <Text style={styles.label}>{label}</Text>
       <View style={styles.contentContainer}>
-        <View style={styles.inputContainer}>
-          <TextInput
-            forwardedRef={textInputRef}
-            onChangeText={(value) => {
-              handleSetStartPosition(undefined)
-              onInputChange(value)
-            }}
-            value={inputValue || undefined}
-            placeholder="0"
-            // hide input when loading so that the value is not visible under the loader
-            style={{ opacity: loading ? 0 : 1 }}
-            editable={editable && !loading}
-            keyboardType="decimal-pad"
-            // Work around for RN issue with Samsung keyboards
-            // https://github.com/facebook/react-native/issues/22005
-            autoCapitalize="words"
-            autoFocus={autoFocus}
-            // unset lineHeight to allow ellipsis on long inputs on iOS
-            inputStyle={[styles.inputText, inputError ? styles.inputError : {}]}
-            testID="SwapAmountInput/Input"
-            onBlur={() => {
-              handleSetStartPosition(0)
-            }}
-            onFocus={() => {
-              handleSetStartPosition(inputValue?.length ?? 0)
-            }}
-            onSelectionChange={() => {
-              handleSetStartPosition(undefined)
-            }}
-            selection={
-              Platform.OS === 'android' && typeof startPosition === 'number'
-                ? { start: startPosition }
-                : undefined
-            }
-          />
-          {loading && (
-            <View style={[styles.loaderContainer, { paddingVertical: Spacing.Small12 }]}>
-              <SkeletonPlaceholder
-                borderRadius={100} // ensure rounded corners with font scaling
-                backgroundColor={Colors.gray2}
-                highlightColor={Colors.white}
-                testID="SwapAmountInput/Loader"
-              >
-                <View style={styles.loader} />
-              </SkeletonPlaceholder>
+        {token ? (
+          <View style={styles.tokenInfo}>
+            <TokenIcon token={token} size={IconSize.MEDIUM} />
+            <View style={styles.tokenInfoText}>
+              <Text style={styles.tokenName}>{token.symbol}</Text>
+              <Text style={styles.tokenNetwork}>
+                {t('swapScreen.onNetwork', { networkName: NETWORK_NAMES[token.networkId] })}
+              </Text>
             </View>
-          )}
-        </View>
-        {onPressMax && (
-          <Touchable
-            borderless
-            onPress={() => {
-              onPressMax()
-              textInputRef.current?.blur()
-            }}
-            style={styles.maxButton}
-            testID="SwapAmountInput/MaxButton"
-          >
-            <Text style={styles.maxText}>{t('max')}</Text>
-          </Touchable>
+          </View>
+        ) : (
+          <Text style={styles.tokenNamePlaceholder}>{buttonPlaceholder}</Text>
         )}
-        <Touchable
-          borderless
-          onPress={onSelectToken}
-          style={styles.tokenSelectButton}
-          testID="SwapAmountInput/TokenSelect"
-        >
-          {token ? (
-            <>
-              <TokenIcon token={token} viewStyle={styles.tokenImage} size={IconSize.SMALL} />
-              <Text style={styles.tokenName}>{token.symbol}</Text>
-              <DownArrowIcon color={Colors.gray5} />
-            </>
-          ) : (
-            <>
-              <Text style={styles.tokenNamePlaceholder}>{buttonPlaceholder}</Text>
-              <DownArrowIcon color={Colors.gray5} />
-            </>
-          )}
+        <Touchable borderless onPress={onSelectToken} testID="SwapAmountInput/TokenSelect">
+          <DownArrowIcon height={24} color={Colors.gray3} />
         </Touchable>
       </View>
-      <View testID="SwapAmountInput/FiatValue">
-        <Text
-          style={[
-            styles.fiatValue,
-            {
-              opacity: loading || !parsedInputValue?.gt(0) || !token ? 0 : 1,
-            },
-          ]}
-        >
-          <TokenDisplay
-            amount={parsedInputValue ?? 0}
-            showLocalAmount
-            showApprox
-            errorFallback={t('swapScreen.tokenUsdValueUnknown') ?? undefined}
-            tokenId={token?.tokenId}
-          />
-        </Text>
-        {loading && (
-          <View style={styles.loaderContainer}>
-            <SkeletonPlaceholder
-              borderRadius={100} // ensure rounded corners with font scaling
-              backgroundColor={Colors.gray2}
-              highlightColor={Colors.white}
-              testID="SwapAmountInput/FiatValueLoader"
-            >
-              <View style={styles.fiatValueLoader} />
-            </SkeletonPlaceholder>
+      {token && (
+        <View style={[styles.contentContainer, styles.bottomContainer]}>
+          <View style={styles.inputContainer}>
+            <TextInput
+              forwardedRef={textInputRef}
+              onChangeText={(value) => {
+                handleSetStartPosition(undefined)
+                onInputChange(value)
+              }}
+              value={inputValue || undefined}
+              placeholder="0"
+              // hide input when loading so that the value is not visible under the loader
+              style={{ opacity: loading ? 0 : 1 }}
+              editable={editable && !loading}
+              keyboardType="decimal-pad"
+              // Work around for RN issue with Samsung keyboards
+              // https://github.com/facebook/react-native/issues/22005
+              autoCapitalize="words"
+              autoFocus={autoFocus}
+              // unset lineHeight to allow ellipsis on long inputs on iOS
+              inputStyle={[styles.inputText, inputError ? styles.inputError : {}]}
+              testID="SwapAmountInput/Input"
+              onBlur={() => {
+                handleSetStartPosition(0)
+              }}
+              onFocus={() => {
+                handleSetStartPosition(inputValue?.length ?? 0)
+              }}
+              onSelectionChange={() => {
+                handleSetStartPosition(undefined)
+              }}
+              selection={
+                Platform.OS === 'android' && typeof startPosition === 'number'
+                  ? { start: startPosition }
+                  : undefined
+              }
+            />
+            {loading && (
+              <View style={styles.loaderContainer}>
+                <SkeletonPlaceholder
+                  borderRadius={100} // ensure rounded corners with font scaling
+                  backgroundColor={Colors.gray2}
+                  highlightColor={Colors.white}
+                  testID="SwapAmountInput/Loader"
+                >
+                  <View style={styles.loader} />
+                </SkeletonPlaceholder>
+              </View>
+            )}
           </View>
-        )}
-      </View>
+          {onPressMax && (
+            <Touchable
+              borderless
+              onPress={() => {
+                onPressMax()
+                textInputRef.current?.blur()
+              }}
+              style={styles.maxButton}
+              testID="SwapAmountInput/MaxButton"
+            >
+              <Text style={styles.maxText}>{t('max')}</Text>
+            </Touchable>
+          )}
+          {!loading && parsedInputValue?.gt(0) && token && (
+            <Text style={styles.fiatValue} testID="SwapAmountInput/FiatValue">
+              <TokenDisplay
+                amount={parsedInputValue ?? 0}
+                showLocalAmount
+                showApprox
+                errorFallback={t('swapScreen.tokenUsdValueUnknown') ?? undefined}
+                tokenId={token?.tokenId}
+              />
+            </Text>
+          )}
+        </View>
+      )}
     </View>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
-    padding: Spacing.Regular16,
     backgroundColor: Colors.gray1,
     borderColor: Colors.gray2,
     borderWidth: 1,
   },
-  label: {
-    ...fontStyles.xsmall,
-    fontWeight: 'bold',
+  tokenInfo: {
+    flexDirection: 'row',
   },
   contentContainer: {
+    height: 64,
+    paddingHorizontal: Spacing.Regular16,
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  bottomContainer: {
+    borderColor: Colors.gray2,
+    borderTopWidth: 1,
   },
   inputContainer: {
     flex: 1,
@@ -214,60 +199,45 @@
     paddingVertical: Spacing.Smallest8,
   },
   loaderContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
+    paddingVertical: Spacing.Small12,
   },
   loader: {
     height: '100%',
     width: '100%',
   },
-  fiatValueLoader: {
-    height: '100%',
-    width: '40%',
-  },
   maxButton: {
     backgroundColor: Colors.white,
     borderWidth: 1,
     borderColor: Colors.gray2,
     borderRadius: 4,
-    paddingVertical: 2,
-    paddingHorizontal: 4,
-    marginRight: Spacing.Smallest8,
+    paddingVertical: 4,
+    paddingHorizontal: 6,
   },
   maxText: {
-    ...fontStyles.small,
+    ...typeScale.labelXXSmall,
     color: Colors.gray5,
     fontSize: 10,
   },
-  tokenSelectButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: Colors.white,
-    borderWidth: 1,
-    borderColor: Colors.gray2,
-    borderRadius: 100,
-    paddingHorizontal: Spacing.Smallest8,
-    paddingVertical: 4,
-  },
   tokenName: {
-    ...fontStyles.small600,
+    ...typeScale.labelSemiBoldXSmall,
     paddingHorizontal: 4,
   },
-  tokenNamePlaceholder: {
-    ...fontStyles.small600,
+  tokenNetwork: {
+    ...typeScale.bodyXSmall,
+    color: Colors.gray4,
     paddingHorizontal: 4,
-    color: Colors.primary,
   },
-  tokenImage: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
+  tokenInfoText: {
+    paddingLeft: Spacing.Smallest8,
+  },
+  tokenNamePlaceholder: {
+    ...typeScale.labelMedium,
+    paddingHorizontal: 4,
+    color: Colors.gray3,
   },
   fiatValue: {
     ...typeScale.bodyXSmall,
+    paddingLeft: Spacing.Smallest8,
     color: Colors.gray4,
   },
 })