fix: swap UAT CR (#2901)

Emurgo · Nov 14, 2023 · 38be276 · 38be276
1 parent ba8cb35
commit 38be276
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 22 deletions.
diff --git a/apps/wallet-mobile/src/features/Swap/common/AmountCard/AmountCard.tsx b/apps/wallet-mobile/src/features/Swap/common/AmountCard/AmountCard.tsx
@@ -70,7 +70,7 @@ export const AmountCard = ({
               onChangeText={onChange}
               allowFontScaling
               selectionColor={isFocused ? '#242838' : COLORS.TRANSPARENT_BLACK}
-              style={styles.amountInput}
+              style={[styles.amountInput, value === '0' && styles.grayText]}
               underlineColorAndroid="transparent"
               ref={inputRef}
               editable={inputEditable && touched}
@@ -158,6 +158,7 @@ const styles = StyleSheet.create({
   },
   borderError: {
     borderColor: COLORS.ALERT_TEXT_COLOR,
+    borderWidth: 2,
   },
   active: {
     borderWidth: 2,
@@ -214,4 +215,7 @@ const styles = StyleSheet.create({
     color: COLORS.ALERT_TEXT_COLOR,
     fontSize: 12,
   },
+  grayText: {
+    color: '#6B7384',
+  },
 })
diff --git a/apps/wallet-mobile/src/features/Swap/common/LiquidityPool/LiquidityPool.tsx b/apps/wallet-mobile/src/features/Swap/common/LiquidityPool/LiquidityPool.tsx
@@ -34,9 +34,8 @@ const styles = StyleSheet.create({
     color: '#4B6DDE',
     fontFamily: 'Rubik',
     fontSize: 16,
-    fontWeight: '400',
+    fontWeight: '500',
     lineHeight: 22,
-    textDecorationLine: 'underline',
   },
   liquidityPool: {
     flexDirection: 'row',

diff --git a/...llet-mobile/src/features/Swap/common/SelectPool/SelectPoolFromList/SelectPoolFromList.tsx b/...llet-mobile/src/features/Swap/common/SelectPool/SelectPoolFromList/SelectPoolFromList.tsx
@@ -156,14 +156,15 @@ const styles = StyleSheet.create({
   },
   shadowProp: {
     shadowColor: '#000',
+    shadowOpacity: 0.2,
     shadowOffset: {
       width: 0,
       height: 1,
     },
-    shadowOpacity: 0.2,
     shadowRadius: 1.41,
-
-    elevation: 2,
+    elevation: 1.2,
+    backgroundColor: 'white',
+    borderRadius: 8,
   },
 
   cardHeader: {
@@ -192,8 +193,11 @@ const styles = StyleSheet.create({
   infoLabel: {
     color: '#6B7384',
     fontSize: 16,
+    fontFamily: 'Rubik-Regular',
   },
   infoValue: {
     fontSize: 16,
+    color: '#000',
+    fontFamily: 'Rubik-Regular',
   },
 })
diff --git a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/EditLimitPrice.tsx b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/EditLimitPrice.tsx
@@ -14,6 +14,7 @@ const BORDER_SIZE = 1
 export const EditLimitPrice = () => {
   const strings = useStrings()
   const wallet = useSelectedWallet()
+  const [isFocused, setIsFocused] = React.useState(false)
 
   const {orderData} = useSwap()
   const sellTokenInfo = useTokenInfo({wallet, tokenId: orderData.amounts.sell.tokenId})
@@ -32,7 +33,7 @@ export const EditLimitPrice = () => {
   const tokenToBuyName = isBuyTouched ? buyTokenInfo.ticker ?? buyTokenInfo.name : '-'
 
   return (
-    <View style={[styles.container, disabled && styles.disabled]}>
+    <View style={[styles.container, disabled && styles.disabled, isFocused && styles.active]}>
       <Text style={styles.label}>{disabled ? strings.marketPrice : strings.limitPrice}</Text>
 
       <View style={styles.content}>
@@ -43,11 +44,13 @@ export const EditLimitPrice = () => {
           placeholder="0"
           onChangeText={onChangeLimitPrice}
           allowFontScaling
-          selectionColor={COLORS.TRANSPARENT_BLACK}
+          selectionColor="#242838"
           style={styles.amountInput}
           underlineColorAndroid="transparent"
           editable={!disabled}
           ref={limitInputRef}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
         />
 
         <View style={[styles.textWrapper, disabled && styles.disabled]}>
@@ -73,6 +76,11 @@ const styles = StyleSheet.create({
   disabled: {
     backgroundColor: COLORS.BANNER_GREY,
   },
+  active: {
+    borderWidth: 2,
+    borderColor: '#242838',
+    zIndex: 2222,
+  },
   label: {
     position: 'absolute',
     top: -7,
@@ -104,7 +112,6 @@ const styles = StyleSheet.create({
     top: 0,
     right: 8,
     paddingLeft: 8,
-    backgroundColor: '#FFFFFF',
     height: 56 - BORDER_SIZE * 2,
     display: 'flex',
     alignItems: 'center',

diff --git a/...eCases/StartSwapScreen/CreateOrder/EditSlippage/EditSlippageScreen/EditSlippageScreen.tsx b/...eCases/StartSwapScreen/CreateOrder/EditSlippage/EditSlippageScreen/EditSlippageScreen.tsx
@@ -249,6 +249,7 @@ const styles = StyleSheet.create({
     padding: 0,
     fontSize: 16,
     fontFamily: 'Rubik',
+    color: '#242838',
   },
   inputFocused: {
     borderColor: '#242838',

diff --git a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/CompletedOrders.tsx b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/CompletedOrders.tsx
@@ -1,4 +1,5 @@
 import {useFocusEffect} from '@react-navigation/native'
+import {getPoolUrlByProvider} from '@yoroi/swap'
 import {Balance, Swap} from '@yoroi/types'
 import BigNumber from 'bignumber.js'
 import _ from 'lodash'
@@ -28,10 +29,11 @@ import {asQuantity, openInExplorer, Quantities} from '../../../../../yoroi-walle
 import {Counter} from '../../../common/Counter/Counter'
 import {parseOrderTxMetadata} from '../../../common/helpers'
 import {EmptyCompletedOrdersIllustration} from '../../../common/Illustrations/EmptyCompletedOrdersIllustration'
+import {LiquidityPool} from '../../../common/LiquidityPool/LiquidityPool'
 import {PoolIcon} from '../../../common/PoolIcon/PoolIcon'
 import {useStrings} from '../../../common/strings'
 
-const PRECISION = 14
+const PRECISION = 10
 
 export type MappedRawOrder = {
   id: string
@@ -219,17 +221,17 @@ const Header = ({
 
         <Spacer width={4} />
 
-        <Text>{assetFromLabel}</Text>
+        <Text style={styles.headerLabel}>{assetFromLabel}</Text>
 
-        <Text>/</Text>
+        <Text style={styles.headerLabel}>/</Text>
 
         <Spacer width={4} />
 
         {assetToIcon}
 
         <Spacer width={4} />
 
-        <Text>{assetToLabel}</Text>
+        <Text style={styles.headerLabel}>{assetToLabel}</Text>
       </View>
     </HeaderWrapper>
   )
@@ -258,7 +260,13 @@ const HiddenInfo = ({
 
         {
           label: strings.dex.toUpperCase(),
-          value: capitalize(provider),
+          value: (
+            <LiquidityPool
+              liquidityPoolIcon={<PoolIcon providerId={provider} size={28} />}
+              liquidityPoolName={capitalize(provider)}
+              poolUrl={getPoolUrlByProvider(provider)}
+            />
+          ),
           icon: <PoolIcon providerId={provider} size={23} />,
         },
         {
@@ -371,6 +379,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
+  headerLabel: {
+    fontWeight: '500',
+    fontFamily: 'Rubik-Medium',
+  },
   counter: {
     paddingVertical: 16,
   },

diff --git a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/OpenOrders.tsx
@@ -264,7 +264,7 @@ export const OpenOrders = () => {
             const fromIcon = <TokenIcon wallet={wallet} tokenId={order.fromTokenInfo?.id ?? ''} variant="swap" />
             const toIcon = <TokenIcon wallet={wallet} tokenId={order.toTokenInfo?.id ?? ''} variant="swap" />
             const liquidityPoolIcon =
-              order.provider !== undefined ? <PoolIcon size={32} providerId={order.provider} /> : null
+              order.provider !== undefined ? <PoolIcon size={28} providerId={order.provider} /> : null
             const expanded = order.id === hiddenInfoOpenId
             return (
               <ExpandableInfoCard
@@ -354,17 +354,17 @@ const Header = ({
 
         <Spacer width={4} />
 
-        <Text>{assetFromLabel}</Text>
+        <Text style={styles.headerLabel}>{assetFromLabel}</Text>
 
-        <Text>/</Text>
+        <Text style={styles.headerLabel}>/</Text>
 
         <Spacer width={4} />
 
         {assetToIcon}
 
         <Spacer width={4} />
 
-        <Text>{assetToLabel}</Text>
+        <Text style={styles.headerLabel}>{assetToLabel}</Text>
       </View>
     </HeaderWrapper>
   )
@@ -671,6 +671,10 @@ const styles = StyleSheet.create({
     fontWeight: '400',
     lineHeight: 24,
   },
+  headerLabel: {
+    fontWeight: '500',
+    fontFamily: 'Rubik-Medium',
+  },
   contentValue: {
     color: '#000',
     fontFamily: 'Rubik',

diff --git a/apps/wallet-mobile/translations/messages/src/features/Swap/common/AmountCard/AmountCard.json b/apps/wallet-mobile/translations/messages/src/features/Swap/common/AmountCard/AmountCard.json
@@ -6,12 +6,12 @@
     "start": {
       "line": 129,
       "column": 15,
-      "index": 4185
+      "index": 4221
     },
     "end": {
       "line": 132,
       "column": 3,
-      "index": 4268
+      "index": 4304
     }
   },
   {
@@ -21,12 +21,12 @@
     "start": {
       "line": 133,
       "column": 18,
-      "index": 4288
+      "index": 4324
     },
     "end": {
       "line": 136,
       "column": 3,
-      "index": 4377
+      "index": 4413
     }
   }
 ]