Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(swap): limit price warning modal #2799

Merged
merged 5 commits into from
Oct 19, 2023
Merged

refactor(swap): limit price warning modal #2799

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
95a9ee5
refactor(swap): limit price warning modal
banklesss Oct 19, 2023
4a630d6
refactor(swap): limit price warning modal
banklesss Oct 19, 2023
94b1200
CR: update
banklesss Oct 19, 2023
3a16b6a
CR: update
banklesss Oct 19, 2023
b2e88ff
merge develop
banklesss Oct 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 4 additions & 10 deletions apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/CreateOrder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import * as React from 'react'
import {Alert, KeyboardAvoidingView, Platform, StyleSheet, View, ViewProps} from 'react-native'
import {ScrollView} from 'react-native-gesture-handler'

import {Button, Spacer} from '../../../../../components'
import {Button, Spacer, useModal} from '../../../../../components'
import {useMetrics} from '../../../../../metrics/metricsManager'
import {useSelectedWallet} from '../../../../../SelectedWallet'
import {COLORS} from '../../../../../theme'
Expand Down Expand Up @@ -34,6 +34,7 @@ export const CreateOrder = () => {
const {orderData, unsignedTxChanged, poolPairsChanged} = useSwap()
const wallet = useSelectedWallet()
const {track} = useMetrics()
const {openModal, closeModal} = useModal()
const {
sellQuantity: {isTouched: isSellTouched},
buyQuantity: {isTouched: isBuyTouched},
Expand Down Expand Up @@ -63,7 +64,6 @@ export const CreateOrder = () => {
wallet,
tokenId: orderData.amounts.buy.tokenId,
})
const [showLimitPriceWarning, setShowLimitPriceWarning] = React.useState(false)

React.useEffect(() => {
if (orderData.selectedPoolId === orderData.bestPoolCalculation?.pool.poolId) poolDefaulted()
Expand All @@ -73,7 +73,7 @@ export const CreateOrder = () => {
onSuccess: (yoroiUnsignedTx) => {
unsignedTxChanged(yoroiUnsignedTx)
swap()
setShowLimitPriceWarning(false)
closeModal()
},
onError: (error) => {
if (error instanceof NotEnoughMoneyToSendError) {
Expand Down Expand Up @@ -186,7 +186,7 @@ export const CreateOrder = () => {
const limitPrice = new BigNumber(orderData.limitPrice)

if (limitPrice.isGreaterThan(marketPrice.times(1 + LIMIT_PRICE_WARNING_THRESHOLD))) {
setShowLimitPriceWarning(true)
openModal(strings.limitPriceWarningTitle, <LimitPriceWarning onSubmit={createUnsignedSwapTx} />, 400)
return
}
}
Expand All @@ -205,12 +205,6 @@ export const CreateOrder = () => {
>
<ScrollView style={styles.scroll}>
<View style={styles.container}>
<LimitPriceWarning
open={showLimitPriceWarning}
onClose={() => setShowLimitPriceWarning(false)}
onSubmit={createUnsignedSwapTx}
/>

<TopTokenActions />

<EditSellAmount />
Expand Down
14 changes: 13 additions & 1 deletion ...Swap/useCases/StartSwapScreen/CreateOrder/LimitPriceWarning/LimitPriceWarning.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import {storiesOf} from '@storybook/react-native'
import {mockSwapManager, SwapProvider} from '@yoroi/swap'
import React from 'react'
import {Button, StyleSheet, View} from 'react-native'

import {useModal} from '../../../../../../components'
import {useStrings} from '../../../../../../features/Swap/common/strings'
import {SelectedWalletProvider} from '../../../../../../SelectedWallet'
import {mocks as walletMocks} from '../../../../../../yoroi-wallets/mocks'
import {SwapFormProvider} from '../../../../common/SwapFormProvider'
Expand All @@ -10,11 +13,20 @@ import {LimitPriceWarning} from './LimitPriceWarning'
storiesOf('LimitPriceWarning', module).add('Initial', () => <Initial />)

const Initial = () => {
const {openModal, content, closeModal} = useModal()
const strings = useStrings()
return (
<SelectedWalletProvider wallet={walletMocks.wallet}>
<SwapProvider swapManager={mockSwapManager}>
<SwapFormProvider>
<LimitPriceWarning open />
<View style={{...StyleSheet.absoluteFillObject}}>
<Button
title="Open Modal"
onPress={() => {
content !== undefined ? closeModal() : openModal(strings.limitPriceWarningTitle, <LimitPriceWarning />)
}}
/>
</View>
</SwapFormProvider>
</SwapProvider>
</SelectedWalletProvider>
Expand Down
88 changes: 48 additions & 40 deletions ...eatures/Swap/useCases/StartSwapScreen/CreateOrder/LimitPriceWarning/LimitPriceWarning.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,25 @@ import BigNumber from 'bignumber.js'
import React from 'react'
import {StyleSheet, Text, View} from 'react-native'

import {Button, Spacer} from '../../../../../../components'
import {Button, Spacer, useModal} from '../../../../../../components'
import {useLanguage} from '../../../../../../i18n'
import {BottomSheetModal} from '../../../../../../legacy/BottomSheetModal'
import {useSelectedWallet} from '../../../../../../SelectedWallet'
import {useTokenInfo} from '../../../../../../yoroi-wallets/hooks'
import {useStrings} from '../../../../common/strings'

export interface LimitPriceWarningProps {
open: boolean
onClose?: () => void
onSubmit?: () => void
}

export const LimitPriceWarning = ({open, onClose, onSubmit}: LimitPriceWarningProps) => {
export const LimitPriceWarning = ({onSubmit}: LimitPriceWarningProps) => {
const {orderData} = useSwap()
const {numberLocale} = useLanguage()
const strings = useStrings()
const limitPrice = new BigNumber(orderData.limitPrice ?? 0).toFormat(numberLocale)
const marketPrice = new BigNumber(orderData.selectedPoolCalculation?.prices.market ?? 0).toFormat(numberLocale)
const wallet = useSelectedWallet()
const {closeModal} = useModal()

const tokenToSellInfo = useTokenInfo({wallet, tokenId: orderData.amounts.sell.tokenId})
const tokenToSellName = tokenToSellInfo.ticker ?? tokenToSellInfo.name ?? '-'
Expand All @@ -32,55 +31,57 @@ export const LimitPriceWarning = ({open, onClose, onSubmit}: LimitPriceWarningPr
const name = `${tokenToSellName}/${tokenToBuyName}`

return (
<BottomSheetModal title={strings.limitPriceWarningTitle} isOpen={open} onClose={onClose}>
<View style={styles.container}>
<View>
<Text>{strings.limitPriceWarningDescription}</Text>
<View style={styles.container}>
<View>
<Text style={styles.description}>{strings.limitPriceWarningDescription}</Text>

<Spacer height={16} />
<Spacer height={16} />

<View style={styles.table}>
<View style={styles.row}>
<Text style={styles.label}>{strings.limitPriceWarningYourPrice}</Text>
<View style={styles.table}>
<View style={styles.row}>
<Text style={styles.label}>{strings.limitPriceWarningYourPrice}</Text>

<View style={styles.textWrapper}>
<Text style={styles.value}>{limitPrice}</Text>
<View style={styles.textWrapper}>
<Text style={styles.value}>{limitPrice}</Text>

<Text style={styles.value}>{name}</Text>
</View>
<Text style={styles.value}>{name}</Text>
</View>
</View>

<View style={styles.row}>
<Text style={styles.label}>{strings.limitPriceWarningMarketPrice}</Text>
<View style={styles.row}>
<Text style={styles.label}>{strings.limitPriceWarningMarketPrice}</Text>

<View style={styles.textWrapper}>
<Text style={styles.value}>{marketPrice}</Text>
<View style={styles.textWrapper}>
<Text style={styles.value}>{marketPrice}</Text>

<Text style={styles.value}>{name}</Text>
</View>
<Text style={styles.value}>{name}</Text>
</View>
</View>
</View>
</View>

<View style={styles.buttonsWrapper}>
<Button
testID="swapCancelButton"
outlineShelley
title={strings.limitPriceWarningBack}
onPress={onClose}
containerStyle={styles.buttonContainer}
/>

<Button
testID="swapConfirmButton"
shelleyTheme
title={strings.limitPriceWarningConfirm}
onPress={onSubmit}
containerStyle={styles.buttonContainer}
/>
</View>
<Spacer fill />

<View style={styles.buttonsWrapper}>
<Button
testID="swapCancelButton"
outlineShelley
title={strings.limitPriceWarningBack}
onPress={closeModal}
containerStyle={styles.buttonContainer}
/>

<Button
testID="swapConfirmButton"
shelleyTheme
title={strings.limitPriceWarningConfirm}
onPress={onSubmit}
containerStyle={styles.buttonContainer}
/>
</View>
</BottomSheetModal>

<Spacer height={23} />
</View>
)
}

Expand Down Expand Up @@ -128,4 +129,11 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
gap: 10,
},
description: {
fontFamily: 'Rubik',
fontWeight: '400',
fontSize: 16,
lineHeight: 24,
color: '#242838',
},
})