From 743f20975180707b31ee698e7d3aae498f0851dd Mon Sep 17 00:00:00 2001 From: Michal Date: Wed, 1 Nov 2023 11:25:55 +0100 Subject: [PATCH 01/40] fix(swap): Fix placeholder text color (#2859) --- .../Swap/common/AmountCard/AmountCard.tsx | 1 + .../Swap/common/AmountCard/AmountCard.json | 16 ++++++++-------- 2 files changed, 9 insertions(+), 8 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 index 32dbd6fb68..49cf6419ec 100644 --- a/apps/wallet-mobile/src/features/Swap/common/AmountCard/AmountCard.tsx +++ b/apps/wallet-mobile/src/features/Swap/common/AmountCard/AmountCard.tsx @@ -64,6 +64,7 @@ export const AmountCard = ({ autoComplete="off" value={value} placeholder="0" + placeholderTextColor="#6B7384" onChangeText={onChange} allowFontScaling selectionColor={COLORS.TRANSPARENT_BLACK} 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 index d373ba259b..ba1b1d0ff4 100644 --- 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 @@ -4,14 +4,14 @@ "defaultMessage": "!!!Select token", "file": "src/features/Swap/common/AmountCard/AmountCard.tsx", "start": { - "line": 123, + "line": 124, "column": 15, - "index": 3821 + "index": 3862 }, "end": { - "line": 126, + "line": 127, "column": 3, - "index": 3904 + "index": 3945 } }, { @@ -19,14 +19,14 @@ "defaultMessage": "!!!Current Balance", "file": "src/features/Swap/common/AmountCard/AmountCard.tsx", "start": { - "line": 127, + "line": 128, "column": 18, - "index": 3924 + "index": 3965 }, "end": { - "line": 130, + "line": 131, "column": 3, - "index": 4013 + "index": 4054 } } ] \ No newline at end of file From 3beb7b06355b996c00f00c2f2c60444db6f94966 Mon Sep 17 00:00:00 2001 From: Sorin Chis Date: Wed, 1 Nov 2023 15:14:51 +0200 Subject: [PATCH 02/40] fix: Swap design fixes (#2861) Signed-off-by: Juliano Lazzarotto <30806844+stackchain@users.noreply.github.com> Co-authored-by: Juliano Lazzarotto <30806844+stackchain@users.noreply.github.com> --- .../Swap/common/AmountCard/AmountCard.tsx | 13 +++++++++-- .../CreateOrder/CreateOrder.tsx | 22 ++++++++++++++++--- .../CreateOrder/EditSlippage/EditSlippage.tsx | 6 ++++- .../EditSlippageScreen/EditSlippageScreen.tsx | 19 +++++++--------- .../EditSlippage/ShowSlippageInfo.tsx | 3 ++- .../Swap/common/AmountCard/AmountCard.json | 16 +++++++------- 6 files changed, 53 insertions(+), 26 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 index 49cf6419ec..08cc0d5236 100644 --- a/apps/wallet-mobile/src/features/Swap/common/AmountCard/AmountCard.tsx +++ b/apps/wallet-mobile/src/features/Swap/common/AmountCard/AmountCard.tsx @@ -37,6 +37,7 @@ export const AmountCard = ({ inputEditable = true, error, }: Props) => { + const [isFocused, setIsFocused] = React.useState(false) const strings = useStrings() const {quantity, tokenId} = amount const tokenInfo = useTokenInfo({wallet, tokenId}) @@ -52,9 +53,10 @@ export const AmountCard = ({ inputRef.current.focus() } } + return ( - + {label != null && {label}} @@ -67,12 +69,14 @@ export const AmountCard = ({ placeholderTextColor="#6B7384" onChangeText={onChange} allowFontScaling - selectionColor={COLORS.TRANSPARENT_BLACK} + selectionColor={isFocused ? '#242838' : COLORS.TRANSPARENT_BLACK} style={styles.amountInput} underlineColorAndroid="transparent" ref={inputRef} editable={inputEditable} selectTextOnFocus + onFocus={() => setIsFocused(true)} + onBlur={() => setIsFocused(false)} /> @@ -154,6 +158,11 @@ const styles = StyleSheet.create({ borderError: { borderColor: COLORS.ALERT_TEXT_COLOR, }, + active: { + borderWidth: 2, + borderColor: '#242838', + }, + label: { position: 'absolute', top: -7, diff --git a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/CreateOrder.tsx b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/CreateOrder.tsx index 4c7a378732..d65bb44134 100644 --- a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/CreateOrder.tsx +++ b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/CreateOrder.tsx @@ -3,7 +3,7 @@ import {makeLimitOrder, makePossibleMarketOrder, useSwap, useSwapCreateOrder, us import {Swap} from '@yoroi/types' import BigNumber from 'bignumber.js' import * as React from 'react' -import {Alert, KeyboardAvoidingView, Platform, StyleSheet, View, ViewProps} from 'react-native' +import {Alert, KeyboardAvoidingView, Platform, StyleSheet, useWindowDimensions, View, ViewProps} from 'react-native' import Config from 'react-native-config' import {ScrollView} from 'react-native-gesture-handler' @@ -30,14 +30,18 @@ import {ShowTokenActions} from './ShowTokenActions/ShowTokenActions' import {TopTokenActions} from './ShowTokenActions/TopTokenActions' const LIMIT_PRICE_WARNING_THRESHOLD = 0.1 // 10% +const BOTTOM_ACTION_SECTION = 180 export const CreateOrder = () => { + const [contentHeight, setContentHeight] = React.useState(0) const strings = useStrings() const navigation = useNavigateTo() const {orderData, unsignedTxChanged, poolPairsChanged} = useSwap() const wallet = useSelectedWallet() const {track} = useMetrics() const {openModal} = useModal() + const {height: deviceHeight} = useWindowDimensions() + const { sellQuantity: {isTouched: isSellTouched}, buyQuantity: {isTouched: isBuyTouched}, @@ -224,7 +228,13 @@ export const CreateOrder = () => { keyboardVerticalOffset={120} > - + { + const {height} = event.nativeEvent.layout + setContentHeight(height + BOTTOM_ACTION_SECTION) + }} + > @@ -248,7 +258,11 @@ export const CreateOrder = () => { - +