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.

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

chore: Swap/copy updates #2790

Merged
merged 10 commits into from
Oct 18, 2023
Original file line number Diff line number Diff line change
Expand Up @@ -99,29 +99,29 @@ export const SelectPoolFromList = ({pools = []}: Props) => {
<Spacer height={8} />

<View style={styles.info}>
<Text style={styles.infoLabel}>{`${strings.tvl}, ${ticker}`}</Text>
<Text style={styles.infoLabel}>{strings.tvl}</Text>

<Text style={styles.infoValue}>{formattedTvl}</Text>
<Text style={styles.infoValue}>{`${formattedTvl} ${ticker}`}</Text>
</View>
</View>

<View>
<Spacer height={8} />

<View style={styles.info}>
<Text style={styles.infoLabel}>{strings.poolFee}, %</Text>
<Text style={styles.infoLabel}>{strings.poolFee}</Text>

<Text style={styles.infoValue}>{pool.fee}%</Text>
<Text style={styles.infoValue}>{`${formattedBatcherFeeInPt} ${ticker}`}</Text>
</View>
</View>

<View>
<Spacer height={8} />

<View style={styles.info}>
<Text style={styles.infoLabel}>{`${strings.batcherFee}, ${ticker}`}</Text>
<Text style={styles.infoLabel}>{strings.swapLiquidityFee}</Text>

<Text style={styles.infoValue}>{formattedBatcherFeeInPt}</Text>
<Text style={styles.infoValue}>{pool.fee} %</Text>
</View>
</View>
</View>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React from 'react'
import {Linking, StyleSheet, Text, TouchableOpacity} from 'react-native'

import {useStrings} from '../strings'

export const SwapInfoLink = () => {
const strings = useStrings()
return (
// TODO: add real link
stackchain marked this conversation as resolved.
Show resolved Hide resolved
<TouchableOpacity onPress={() => Linking.openURL('https://yoroi-wallet.com/#/')} style={styles.link}>
<Text style={styles.linkText}>{strings.listOrdersSheetLink}</Text>
</TouchableOpacity>
)
}

const styles = StyleSheet.create({
link: {
alignItems: 'center',
justifyContent: 'center',
},
linkText: {
color: '#4B6DDE',
fontSize: 16,
textDecorationLine: 'underline',
lineHeight: 22,
},
})
22 changes: 19 additions & 3 deletions apps/wallet-mobile/src/features/Swap/common/strings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@ export const useStrings = () => {
swapMinReceived: intl.formatMessage(messages.swapMinReceived),
swapMinReceivedTitle: intl.formatMessage(messages.swapMinReceivedTitle),
swapFeesTitle: intl.formatMessage(messages.swapFeesTitle),
swapLiquidityFee: (fee: string) => intl.formatMessage(messages.swapLiquidityFee, {fee}),
swapLiquidityFee: intl.formatMessage(messages.swapLiquidityFee),
swapLiqProvFee: intl.formatMessage(messages.swapLiqProvFee),
swapLiquidityFeeInfo: (fee: string) => intl.formatMessage(messages.swapLiquidityFeeInfo, {fee}),
swapFees: intl.formatMessage(messages.swapFees),
poolVerification: (pool: string) => intl.formatMessage(messages.poolVerification, {pool}),
poolVerificationInfo: (pool: string) => intl.formatMessage(messages.poolVerificationInfo, {pool}),
Expand Down Expand Up @@ -81,6 +83,7 @@ export const useStrings = () => {
listOrdersSheetConfirm: intl.formatMessage(messages.listOrdersSheetConfirm),
listOrdersSheetBack: intl.formatMessage(messages.listOrdersSheetBack),
listOrdersTimeCreated: intl.formatMessage(messages.listOrdersTimeCreated),
listOrdersTimeCompleted: intl.formatMessage(messages.listOrdersTimeCompleted),
listOrdersLiquidityPool: intl.formatMessage(messages.listOrdersLiquidityPool),
listOrdersTotal: intl.formatMessage(messages.listOrdersTotal),
listOrdersTxId: intl.formatMessage(messages.listOrdersTxId),
Expand Down Expand Up @@ -217,7 +220,7 @@ export const messages = defineMessages({
},
changePool: {
id: 'swap.swapScreen.changePool',
defaultMessage: '!!!change pool',
defaultMessage: '!!!change dex',
},
swapMinAda: {
id: 'swap.swapScreen.swapMinAda',
Expand All @@ -238,7 +241,16 @@ export const messages = defineMessages({
},
swapLiquidityFee: {
id: 'swap.swapScreen.swapLiquidityFee',
defaultMessage: `!!!Liquidity provider fee ({fee}%)`,
defaultMessage: '!!!Liquidity provider fee',
},
swapLiqProvFee: {
id: 'swap.swapScreen.swapLiqProvFee',
defaultMessage: '!!!Liq. prov. fee',
},
swapLiquidityFeeInfo: {
id: 'swap.swapScreen.swapLiquidityFeeInfo',
defaultMessage:
'!!!Liquidity provider fee is a fixed {fee}% operational fee from the whole transaction volume, that is taken to support DEX “liquidity” allowing traders to buy and sell assets on the decentralized Cardano network.',
},
swapMinReceived: {
id: 'swap.swapScreen.swapMinReceived',
Expand Down Expand Up @@ -439,6 +451,10 @@ export const messages = defineMessages({
id: 'swap.listOrders.timeCreated',
defaultMessage: '!!!Time Created',
},
listOrdersTimeCompleted: {
id: 'swap.listOrders.timeCompleted',
defaultMessage: '!!!Time Completed',
},
listOrdersTxId: {
id: 'swap.listOrders.txId',
defaultMessage: '!!!Transaction ID',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {useNavigateTo} from '../../../../common/navigation'
import {PoolIcon} from '../../../../common/PoolIcon/PoolIcon'
import {useStrings} from '../../../../common/strings'
import {useSwapTouched} from '../../../../common/SwapFormProvider'
import {SwapInfoLink} from '../../../../common/SwapInfoLink/SwapInfoLink'

export const ShowPoolActions = () => {
const navigateTo = useNavigateTo()
Expand Down Expand Up @@ -155,8 +156,10 @@ const HiddenInfo = ({
info: strings.swapMinReceived,
},
{
label: strings.swapLiquidityFee(liquidityFee),
label: strings.swapLiqProvFee,
title: strings.swapLiquidityFee,
value: `${liquidityFeeValue} ${sellTokenName}`,
info: strings.swapLiquidityFeeInfo(liquidityFee),
},
].map((item) => (
<HiddenInfoWrapper
Expand All @@ -167,7 +170,7 @@ const HiddenInfo = ({
onPress={() => {
setBottomSheetSate({
isOpen: true,
title: item.label,
title: item.title ?? item.label,
content: item.info,
})
}}
Expand All @@ -181,7 +184,11 @@ const HiddenInfo = ({
setBottomSheetSate({isOpen: false, title: '', content: ''})
}}
>
<Text style={styles.text}>{bottomSheetState.content}</Text>
<View style={styles.modalContent}>
<Text style={styles.text}>{bottomSheetState.content}</Text>

<SwapInfoLink />
</View>
</BottomSheetModal>
</View>
)
Expand All @@ -197,6 +204,11 @@ const styles = StyleSheet.create({
fontWeight: '400',
color: '#242838',
},
modalContent: {
flex: 1,
justifyContent: 'space-between',
paddingBottom: 24,
},
change: {color: COLORS.SHELLEY_BLUE, fontWeight: '600', textTransform: 'uppercase'},
bold: {
color: COLORS.BLACK,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,11 @@ const findCompletedOrderTx = (transactions: TransactionInfo[]): MappedRawOrder[]
const result: TxMetadataInfo = {}
receivedTransactions.forEach((receivedTx) => {
receivedTx.inputs.forEach((input) => {
if (Boolean(input.id) && input?.id?.slice(0, -1) === sentTx?.id && receivedTx.metadata?.['674'] !== null) {
if (
Boolean(input.id) &&
input?.id?.slice(0, -1) === sentTx?.id &&
receivedTx.metadata?.['674'] !== undefined
) {
result['id'] = sentTx?.id
result['date'] = receivedTx?.lastUpdatedAt
const metadata = parseOrderTxMetadata(sentTx?.metadata?.['674'])
Expand Down Expand Up @@ -163,7 +167,11 @@ export const ExpandableOrder = ({order}: {order: MappedRawOrder}) => {
tokenPrice={marketPrice}
sellLabel={sellLabel}
tokenAmount={`${sellQuantity} ${sellLabel}`}
txTimeCreated={intl.formatDate(new Date(order.date), {dateStyle: 'short', timeStyle: 'short'})}
txTimeCreated={intl.formatDate(new Date(order.date), {
dateStyle: 'short',
timeStyle: 'medium',
hour12: false,
})}
/>
</ExpandableInfoCard>
)
Expand Down Expand Up @@ -256,14 +264,15 @@ const MainInfo = ({
txTimeCreated: string
}) => {
const strings = useStrings()
const orderInfo = [
{label: strings.listOrdersSheetAssetPrice, value: `${tokenPrice} ${sellLabel}`},
{label: strings.listOrdersSheetAssetAmount, value: tokenAmount},
{label: strings.listOrdersTimeCompleted, value: txTimeCreated},
]
return (
<View>
{[
{label: strings.listOrdersSheetAssetPrice, value: `${tokenPrice} ${sellLabel}`},
{label: strings.listOrdersSheetAssetAmount, value: tokenAmount},
{label: strings.listOrdersTimeCreated, value: txTimeCreated},
].map((item, index) => (
<MainInfoWrapper key={index} label={item.label} value={item.value} isLast={index === 2} />
{orderInfo.map((item, index) => (
<MainInfoWrapper key={index} label={item.label} value={item.value} isLast={index === orderInfo.length - 1} />
))}
</View>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import {Counter} from '../../../common/Counter/Counter'
import {LiquidityPool} from '../../../common/LiquidityPool/LiquidityPool'
import {PoolIcon} from '../../../common/PoolIcon/PoolIcon'
import {useStrings} from '../../../common/strings'
import {SwapInfoLink} from '../../../common/SwapInfoLink/SwapInfoLink'
import {getCancellationOrderFee} from './helpers'
import {mapOpenOrders, MappedOpenOrder} from './mapOrders'

Expand Down Expand Up @@ -269,7 +270,6 @@ export const OpenOrders = () => {
txId={order.txId}
total={`${order.total} ${order.assetFromLabel}`}
txLink={order.txLink}
date={intl.formatDate(new Date(order.date), {dateStyle: 'short', timeStyle: 'short'})}
liquidityPoolIcon={liquidityPoolIcon}
liquidityPoolName={order.provider ?? ''}
poolUrl={order.poolUrl ?? ''}
Expand Down Expand Up @@ -299,6 +299,11 @@ export const OpenOrders = () => {
<MainInfo
tokenAmount={`${order.tokenAmount} ${order.assetToLabel}`}
tokenPrice={`${order.tokenPrice} ${order.assetFromLabel}`}
date={intl.formatDate(new Date(order.date), {
dateStyle: 'short',
timeStyle: 'medium',
hour12: false,
})}
/>
</ExpandableInfoCard>
)
Expand Down Expand Up @@ -361,15 +366,13 @@ const HiddenInfo = ({
liquidityPoolIcon,
liquidityPoolName,
poolUrl,
date,
txId,
txLink,
}: {
total: string
liquidityPoolIcon: React.ReactNode
liquidityPoolName: string
poolUrl: string
date: string
txId: string
txLink: string
}) => {
Expand All @@ -392,10 +395,7 @@ const HiddenInfo = ({
/>
),
},
{
label: strings.listOrdersTimeCreated,
value: date,
},

{
label: strings.listOrdersTxId,
value: <TxLink txId={shortenedTxId} txLink={txLink} />,
Expand All @@ -407,15 +407,20 @@ const HiddenInfo = ({
)
}

const MainInfo = ({tokenPrice, tokenAmount}: {tokenPrice: string; tokenAmount: string}) => {
const MainInfo = ({tokenPrice, tokenAmount, date}: {tokenPrice: string; tokenAmount: string; date: string}) => {
const strings = useStrings()
const orderInfo = [
{label: strings.listOrdersSheetAssetPrice, value: tokenPrice},
{label: strings.listOrdersSheetAssetAmount, value: tokenAmount},
{
label: strings.listOrdersTimeCreated,
value: date,
},
]
return (
<View>
{[
{label: strings.listOrdersSheetAssetPrice, value: tokenPrice},
{label: strings.listOrdersSheetAssetAmount, value: tokenAmount},
].map((item, index) => (
<MainInfoWrapper key={index} label={item.label} value={item.value} isLast={index === 1} />
{orderInfo.map((item, index) => (
<MainInfoWrapper key={index} label={item.label} value={item.value} isLast={index === orderInfo.length - 1} />
))}
</View>
)
Expand Down Expand Up @@ -499,7 +504,7 @@ const ModalContent = ({

<Spacer height={10} />

<ModalContentLink />
<SwapInfoLink />

<Spacer fill />

Expand Down Expand Up @@ -565,16 +570,6 @@ const ModalContentRow = ({label, value}: {label: string; value: string}) => {
)
}

const ModalContentLink = () => {
const strings = useStrings()
return (
// TODO: add real link
<TouchableOpacity onPress={() => Linking.openURL('https://google.com')} style={styles.link}>
<Text style={styles.linkText}>{strings.listOrdersSheetLink}</Text>
</TouchableOpacity>
)
}

const ModalContentButtons = ({onBack, onConfirm}: {onBack: () => void; onConfirm: () => void}) => {
const strings = useStrings()
return (
Expand Down Expand Up @@ -644,17 +639,6 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
},
link: {
alignItems: 'center',
justifyContent: 'center',
},
linkText: {
color: '#4B6DDE',
fontFamily: 'Rubik-Medium',
fontSize: 16,
fontWeight: '500',
lineHeight: 22,
},
buttons: {
flexDirection: 'row',
justifyContent: 'space-between',
Expand Down
11 changes: 7 additions & 4 deletions apps/wallet-mobile/src/i18n/locales/en-US.json
Original file line number Diff line number Diff line change
Expand Up @@ -158,12 +158,14 @@
"swap.swapScreen.defaultSlippage": "Default Slippage Tolerance",
"swap.swapScreen.slippageInfo": "Slippage tolerance is set as a percentage of the total swap value. Your transactions will not be executed if the price moves by more than this amount.",
"swap.swapScreen.autoPool": "(auto)",
"swap.swapScreen.changePool": "change pool",
"swap.swapScreen.changePool": "change dex",
"swap.swapScreen.swapMinAda": "Min-ADA is the minimum ADA amount required to be contained when holding or sending Cardano native assets.",
"swap.swapScreen.swapMinAdaTitle": "Min ADA",
"swap.swapScreen.swapFees": "Swap fees include the following:\n • Matchmaker Fee\n • Frontend Fee",
"swap.swapScreen.swapFees": "Swap fees include the following:\n • DEX Fee\n • Frontend Fee",
"swap.swapScreen.swapFeesTitle": "Fees",
"swap.swapScreen.swapLiquidityFee": "Liquidity provider fee ({fee}%)",
"swap.swapScreen.swapLiqProvFee": "Liq. prov. fee",
"swap.swapScreen.swapLiquidityFee": "Liquidity provider fee",
"swap.swapScreen.swapLiquidityFeeInfo": "Liquidity provider fee is a fixed {fee}% operational fee from the whole transaction volume, that is taken to support DEX “liquidity” allowing traders to buy and sell assets on the decentralized Cardano network.",
"swap.swapScreen.swapMinReceived": "Minimum amount of assets you can get because of the slippage tolerance.",
"swap.swapScreen.swapMinReceivedTitle": "Min Received",
"swap.swapScreen.enterSlippage": "Enter a value from 0% to 100%. You can also enter up to 1 decimal",
Expand All @@ -184,7 +186,8 @@
"swap.listOrders.sheet.back": "Back",
"swap.listOrders.total": "Total",
"swap.listOrders.liquidityPool": "Liquidity Pool",
"swap.listOrders.timeCreated": "Time Created",
"swap.listOrders.timeCreated": "Time created",
"swap.listOrders.timeCompleted": "Time completed",
"swap.listOrders.txId": "Transaction ID",
"swap.swapScreen.limitPriceWarningTitle": "Limit price",
"swap.swapScreen.limitPriceWarningDescription": "Are you sure you want to proceed this order with the limit price that is 10% or more higher than the market price?",
Expand Down
Loading