Skip to content

Commit

Permalink
refactor(swap): limit price warning modal (#2799)
Browse files Browse the repository at this point in the history
  • Loading branch information
@banklesss
banklesss authored Oct 19, 2023
1 parent fb311b6 commit b172b46
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 51 deletions.
14 changes: 4 additions & 10 deletions apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/CreateOrder.tsx
View file
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
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
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',
},
})

0 comments on commit b172b46

Please sign in to comment.