Skip to content

Commit 1977611

Browse files
jorbuedojorbuedo
committed
ui changes
1 parent 608f6a6 commit 1977611

File tree

12 files changed

+743
-583
lines changed

12 files changed

+743
-583
lines changed

‎apps/wallet-mobile/src/components/Icon/Chevron.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import Svg, {Path} from 'react-native-svg'
44
import {IconProps} from './type'
55

66
export const Chevron = ({
7-
direction,
7+
direction = 'down',
88
color = 'black',
99
size = 40,
1010
}: IconProps & {
11-
direction: 'left' | 'right' | 'up' | 'down'
11+
direction?: 'left' | 'right' | 'up' | 'down'
1212
}) => {
1313
const rotate = direction === 'down' ? 0 : direction === 'right' ? 270 : direction === 'left' ? 90 : 180
1414

‎apps/wallet-mobile/src/components/Icon/Info.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {IconProps} from './type'
55

66
export const Info = ({size = 40, color = 'black'}: IconProps) => {
77
return (
8-
<Svg width={size} height={size} viewBox="-2 -2 25 25">
8+
<Svg width={size} height={size} viewBox="-1 -1 25 25">
99
<Path
1010
d="M12 7C11.4477 7 11 7.44771 11 8C11 8.55229 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55229 13.01 8C13.01 7.44771 12.5623 7 12.01 7H12Z"
1111
fill={color}

‎apps/wallet-mobile/src/features/Swap/common/AmountCard/AmountCard.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export const AmountCard = ({direction}: {direction: 'in' | 'out'}) => {
3737
const value = tokenInput.value
3838
const touched = tokenInput.isTouched
3939
const inputRef = direction === 'in' ? swapForm.tokenInInputRef : swapForm.tokenOutInputRef
40-
const error = tokenInput.error
40+
const error = direction === 'in' ? tokenInput.error : null
4141
const testID = direction === 'in' ? 'swap:sell-edit' : 'swap:buy-edit'
4242

4343
const noTokenSelected = !touched
@@ -106,7 +106,7 @@ export const AmountCard = ({direction}: {direction: 'in' | 'out'}) => {
106106
<View style={styles.between}>
107107
{!isEmptyString(error) ? (
108108
<View style={styles.balance}>
109-
<Icon.InfoCircle size={15} color={colors.error} />
109+
<Icon.Warning size={15} color={colors.error} />
110110

111111
<Text style={[styles.text, styles.errorText]}>{error}</Text>
112112
</View>

‎apps/wallet-mobile/src/features/Swap/common/strings.ts

+20
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export const useStrings = () => {
3131
assetsIn: intl.formatMessage(messages.assetsIn),
3232
slippageInfo: intl.formatMessage(messages.slippageInfo),
3333
autoPool: intl.formatMessage(messages.autoPool),
34+
auto: intl.formatMessage(messages.auto),
3435
changePool: intl.formatMessage(messages.changePool),
3536
swapMinAda: intl.formatMessage(messages.swapMinAda),
3637
swapMinAdaTitle: intl.formatMessage(messages.swapMinAdaTitle),
@@ -109,6 +110,9 @@ export const useStrings = () => {
109110
limitPriceWarningConfirm: intl.formatMessage(messages.limitPriceWarningConfirm),
110111
error: intl.formatMessage(globalMessages.error),
111112
rejectedByUser: intl.formatMessage(ledgerMessages.rejectedByUserError),
113+
routingPreferences: intl.formatMessage(messages.routingPreferences),
114+
route: intl.formatMessage(messages.route),
115+
routeDescription: intl.formatMessage(messages.routeDescription),
112116
usbExplanation: intl.formatMessage(messages.usbExplanation),
113117
usbButton: intl.formatMessage(messages.usbButton),
114118
usbConnectionIsBlocked: intl.formatMessage(messages.usbConnectionIsBlocked),
@@ -274,6 +278,22 @@ const messages = defineMessages({
274278
id: 'swap.swapScreen.autoPool',
275279
defaultMessage: '!!!(auto)',
276280
},
281+
auto: {
282+
id: 'global.auto',
283+
defaultMessage: '!!!Auto',
284+
},
285+
routingPreferences: {
286+
id: 'swap.swapScreen.routingPreferences',
287+
defaultMessage: '!!!Routing preferences',
288+
},
289+
route: {
290+
id: 'swap.swapScreen.route',
291+
defaultMessage: '!!!Route',
292+
},
293+
routeDescription: {
294+
id: 'swap.swapScreen.routeDescription',
295+
defaultMessage: '!!!The route shows the path your swap takes to find the best price',
296+
},
277297
changePool: {
278298
id: 'swap.swapScreen.changePool',
279299
defaultMessage: '!!!change dex',

‎apps/wallet-mobile/src/features/Swap/useCases/CreateOrder/EstimateSummary.tsx

+72-11
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {useTheme} from '@yoroi/theme'
2+
import {Swap} from '@yoroi/types'
23
import * as React from 'react'
34
import {StyleSheet, Text, View} from 'react-native'
45

@@ -18,9 +19,16 @@ export const EstimateSummary = () => {
1819
const {wallet} = useSelectedWallet()
1920
const navigateTo = useNavigateTo()
2021
const swapForm = useSwap()
22+
const {openModal} = useModal()
2123

2224
const protocol = swapForm.estimate?.splits[0]?.protocol
23-
const originSelection = `${swapForm.selectedProtocol.isTouched ? '' : ` ${strings.autoPool}`}`
25+
26+
const expand = () =>
27+
openModal({
28+
title: strings.route,
29+
height: 400,
30+
content: <Splits data={swapForm.estimate?.splits ?? []} />,
31+
})
2432

2533
return (
2634
<View>
@@ -34,14 +42,33 @@ export const EstimateSummary = () => {
3442

3543
{swapForm.estimate !== undefined && (
3644
<View style={styles.list}>
37-
<View style={styles.composedText}>
38-
{protocol !== undefined && <ProtocolAvatar protocol={protocol} append={originSelection} preventOpenLink />}
39-
</View>
45+
<Row
46+
label={strings.route}
47+
description={strings.routeDescription}
48+
value={
49+
protocol !== undefined && (
50+
<View style={styles.composedText}>
51+
<ProtocolAvatar protocol={protocol} preventOpenLink />
52+
53+
{swapForm.estimate?.splits.length > 1 && (
54+
<Button
55+
type={ButtonType.SecondaryText}
56+
title="…"
57+
rightIcon
58+
icon={Icon.Chevron}
59+
style={styles.reducedPadding}
60+
onPress={expand}
61+
/>
62+
)}
63+
</View>
64+
)
65+
}
66+
/>
4067

4168
<Row
42-
label={strings.swapMinAdaTitle}
43-
description={strings.swapMinAda}
44-
value={`${swapForm.estimate?.deposits} ${wallet.portfolioPrimaryTokenInfo.ticker}`}
69+
label={strings.price}
70+
description={swapForm.orderType === 'limit' ? strings.limitPriceInfo : strings.marketPriceInfo}
71+
value={`${swapForm.estimate?.netPrice} ${wallet.portfolioPrimaryTokenInfo.ticker}`}
4572
/>
4673

4774
<Row
@@ -57,6 +84,12 @@ export const EstimateSummary = () => {
5784
swapForm.tokenInfos.get(swapForm.tokenOutInput.tokenId ?? undefinedToken)?.ticker
5885
}`}
5986
/>
87+
88+
<Row
89+
label={strings.slippageTolerance}
90+
description={strings.slippageToleranceInfo}
91+
value={`${swapForm.slippageInput.value} %`}
92+
/>
6093
</View>
6194
)}
6295
</View>
@@ -82,10 +115,11 @@ const Row = ({
82115

83116
{description !== undefined && (
84117
<Button
85-
style={styles.info}
118+
style={styles.reducedPadding}
86119
onPress={() => openModal({title: label, content: <Text style={styles.textContent}>{description}</Text>})}
87120
type={ButtonType.SecondaryText}
88121
icon={Icon.Info}
122+
size="S"
89123
/>
90124
)}
91125
</View>
@@ -95,6 +129,26 @@ const Row = ({
95129
)
96130
}
97131

132+
export const Splits = ({data}: {data: Swap.Split[]}) => {
133+
const {styles} = useStyles()
134+
135+
const total = data.reduce((acc, curr) => (acc += curr.expectedOutputWithoutSlippage), 0)
136+
137+
return (
138+
<View style={styles.splitList}>
139+
{data.map((split, index) => (
140+
<View key={index} style={[styles.composedText, styles.between]}>
141+
<ProtocolAvatar protocol={split.protocol} preventOpenLink />
142+
143+
<Text style={styles.textContent}>
144+
{((100 * (split.expectedOutputWithoutSlippage ?? 0)) / total).toFixed(2)} %
145+
</Text>
146+
</View>
147+
))}
148+
</View>
149+
)
150+
}
151+
98152
const useStyles = () => {
99153
const {color, atoms} = useTheme()
100154
const styles = StyleSheet.create({
@@ -107,7 +161,11 @@ const useStyles = () => {
107161
},
108162
list: {
109163
...atoms.pt_md,
110-
...atoms.gap_2xs,
164+
...atoms.gap_md,
165+
},
166+
splitList: {
167+
...atoms.gap_sm,
168+
...atoms.p_lg,
111169
},
112170
row: {
113171
...atoms.flex_row,
@@ -132,8 +190,11 @@ const useStyles = () => {
132190
...atoms.body_1_lg_regular,
133191
...atoms.px_lg,
134192
},
135-
info: {
136-
...atoms.p_0,
193+
reducedPadding: {
194+
...atoms.pl_2xs,
195+
...atoms.pr_2xs,
196+
...atoms.pt_2xs,
197+
...atoms.pb_2xs,
137198
},
138199
})
139200

‎apps/wallet-mobile/src/features/Swap/useCases/CreateOrder/LimitInput.tsx

-9
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {StyleSheet, Text, TextInput, View} from 'react-native'
55
import {undefinedToken} from '../../common/constants'
66
import {useStrings} from '../../common/strings'
77
import {useSwap} from '../../common/SwapProvider'
8-
import {ShowPriceImpact} from './ShowPriceImpact'
98

109
const BORDER_SIZE = 1
1110

@@ -53,14 +52,6 @@ export const LimitInput = () => {
5352
</View>
5453
</View>
5554
</View>
56-
57-
{swapForm.orderType === 'market' && (
58-
<ShowPriceImpact
59-
priceImpact={Number(swapForm.estimate?.splits[0].priceImpact)}
60-
formattedPrice={String(swapForm.estimate?.splits[0].priceImpact ?? 0)}
61-
pair={pair}
62-
/>
63-
)}
6455
</>
6556
)
6657
}

‎apps/wallet-mobile/src/features/Swap/useCases/CreateOrder/ShowPriceImpact.tsx

+15-7
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,25 @@ import React from 'react'
22
import {StyleSheet, Text, View} from 'react-native'
33

44
import {Icon} from '../../../../components/Icon'
5+
import {undefinedToken} from '../../common/constants'
56
import {getPriceImpactRisk, usePriceImpactRiskTheme} from '../../common/helpers'
67
import {useStrings} from '../../common/strings'
8+
import {useSwap} from '../../common/SwapProvider'
79

8-
type PriceImpactProps = {
9-
priceImpact: number
10-
formattedPrice: string
11-
pair: string
12-
}
13-
14-
export const ShowPriceImpact = ({priceImpact, formattedPrice, pair}: PriceImpactProps) => {
10+
export const ShowPriceImpact = () => {
1511
const strings = useStrings()
12+
const swapForm = useSwap()
13+
14+
const priceImpact = Number(swapForm.estimate?.splits[0].priceImpact)
15+
const formattedPrice = String(swapForm.estimate?.splits[0].priceImpact ?? 0)
16+
17+
const sellTokenInfo = swapForm.tokenInfos.get(swapForm.tokenInInput.tokenId ?? undefinedToken)
18+
const buyTokenInfo = swapForm.tokenInfos.get(swapForm.tokenOutInput.tokenId ?? undefinedToken)
19+
20+
const tokenToSellName = sellTokenInfo?.ticker ?? sellTokenInfo?.name ?? '-'
21+
const tokenToBuyName = buyTokenInfo?.ticker ?? buyTokenInfo?.name ?? '-'
22+
const pair = `${tokenToBuyName}/${tokenToSellName}`
23+
1624
const priceImpactRisk = getPriceImpactRisk(priceImpact)
1725

1826
const priceImpactRiskTheme = usePriceImpactRiskTheme(priceImpactRisk)

‎apps/wallet-mobile/src/features/Swap/useCases/CreateOrder/StartSwapOrderScreen.tsx

+18-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {useTheme} from '@yoroi/theme'
22
import * as React from 'react'
3-
import {StyleSheet, useWindowDimensions, View} from 'react-native'
3+
import {StyleSheet, Text, useWindowDimensions, View} from 'react-native'
44
import {ScrollView} from 'react-native-gesture-handler'
55

66
import {Button, ButtonType} from '../../../../components/Button/Button'
@@ -9,12 +9,14 @@ import {useModal} from '../../../../components/Modal/ModalContext'
99
import {RefreshButton} from '../../../../components/RefreshButton/RefreshButton'
1010
import {Space} from '../../../../components/Space/Space'
1111
import {useIsKeyboardOpen} from '../../../../kernel/keyboard/useIsKeyboardOpen'
12+
import {isEmptyString} from '../../../../kernel/utils'
1213
import {AmountCard} from '../../common/AmountCard/AmountCard'
1314
import {useNavigateTo} from '../../common/navigation'
1415
import {useStrings} from '../../common/strings'
1516
import {useSwap} from '../../common/SwapProvider'
1617
import {EstimateSummary} from './EstimateSummary'
1718
import {LimitInput} from './LimitInput'
19+
import {ShowPriceImpact} from './ShowPriceImpact'
1820
import {WarnLimitPrice} from './WarnLimitPrice'
1921

2022
const LIMIT_PRICE_WARNING_THRESHOLD = 0.1 // 10%
@@ -124,8 +126,18 @@ export const StartSwapOrderScreen = () => {
124126
</View>
125127
</View>
126128

129+
{!isEmptyString(swapForm.tokenOutInput.error) && (
130+
<View style={styles.group}>
131+
<Icon.Warning size={15} color={color.sys_magenta_500} />
132+
133+
<Text style={styles.errorText}>{swapForm.tokenOutInput.error}</Text>
134+
</View>
135+
)}
136+
127137
{swapForm.orderType === 'limit' && <LimitInput />}
128138

139+
{swapForm.orderType === 'market' && <ShowPriceImpact />}
140+
129141
<EstimateSummary />
130142
</View>
131143
</View>
@@ -189,6 +201,7 @@ const useStyles = () => {
189201
group: {
190202
...atoms.flex_row,
191203
...atoms.align_center,
204+
...atoms.gap_2xs,
192205
},
193206
buttonsWrapper: {
194207
...atoms.align_center,
@@ -201,6 +214,10 @@ const useStyles = () => {
201214
...atoms.px_sm,
202215
...atoms.rounded_full,
203216
},
217+
errorText: {
218+
...atoms.body_3_sm_regular,
219+
color: color.sys_magenta_500,
220+
},
204221
})
205222

206223
return {styles, atoms, color}

‎apps/wallet-mobile/src/features/Swap/useCases/SwapSettings/SwapSettings.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -131,11 +131,11 @@ export const SwapSettings = () => {
131131
/>
132132
)}
133133

134-
<Text style={styles.heading}>{strings.chooseConnectionMethod}</Text>
134+
<Text style={styles.heading}>{strings.routingPreferences}</Text>
135135

136136
<View style={styles.routing}>
137137
<View style={styles.between}>
138-
<Text style={styles.label}>Auto</Text>
138+
<Text style={styles.label}>{strings.auto}</Text>
139139

140140
<SettingsSwitch
141141
value={aggregator === 'auto'}

‎apps/wallet-mobile/src/kernel/i18n/locales/en-US.json

+3
Original file line numberDiff line numberDiff line change
@@ -1035,6 +1035,9 @@
10351035
"swap.swapScreen.poolFee": "DEX Fee",
10361036
"swap.swapScreen.poolVerification": "{pool} verification",
10371037
"swap.swapScreen.poolVerificationInfo": "Cardano projects that list their own tokens can apply for an additional {pool} verification. This verification is a manual validation that {pool} team performs with the help of Cardano Foundation.",
1038+
"swap.swapScreen.routingPreferences": "Routing preferences",
1039+
"swap.swapScreen.route": "Route",
1040+
"swap.swapScreen.routeDescription": "The route shows the path your swap takes to find the best price",
10381041
"swap.swapScreen.seeOnExplorer": "see on explorer",
10391042
"swap.swapScreen.selectPool": "Select DEX",
10401043
"swap.swapScreen.selectToken": "Select token",

‎apps/wallet-mobile/translations/messages/src/features/Swap/common/AmountCard/AmountCard.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66
"start": {
77
"line": 137,
88
"column": 15,
9-
"index": 5215
9+
"index": 5240
1010
},
1111
"end": {
1212
"line": 140,
1313
"column": 3,
14-
"index": 5298
14+
"index": 5323
1515
}
1616
},
1717
{
@@ -21,12 +21,12 @@
2121
"start": {
2222
"line": 141,
2323
"column": 18,
24-
"index": 5318
24+
"index": 5343
2525
},
2626
"end": {
2727
"line": 144,
2828
"column": 3,
29-
"index": 5407
29+
"index": 5432
3030
}
3131
}
3232
]

0 commit comments

Comments
 (0)