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

feat(swap): Add completed orders and remove mocks #2671

Merged
merged 4 commits into from
Sep 10, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -1,56 +1,93 @@
import {useOrderByStatusCompleted} from '@yoroi/swap'
import _ from 'lodash'
import React from 'react'
import {useIntl} from 'react-intl'
import {Linking, ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native'

import {
ExpandableInfoCard,
ExpandableInfoCardSkeleton,
HeaderWrapper,
HiddenInfoWrapper,
Icon,
MainInfoWrapper,
Spacer,
Text,
TokenIcon,
} from '../../../../../components'
import {useLanguage} from '../../../../../i18n'
import {useSearch} from '../../../../../Search/SearchContext'
import {useSelectedWallet} from '../../../../../SelectedWallet'
import {COLORS} from '../../../../../theme'
import {useTokenInfos, useTransactionInfos} from '../../../../../yoroi-wallets/hooks'
import {Counter} from '../../../common/Counter/Counter'
import {useStrings} from '../../../common/strings'
import {OrderProps} from './mapOrders'
import {getMockOrders} from './mocks'
import {mapOrders} from './mapOrders'

export const CompletedOrders = () => {
const strings = useStrings()
const {search} = useSearch()
const wallet = useSelectedWallet()
const [hiddenInfoOpenId, setHiddenInfoOpenId] = React.useState<string | null>(null)

const orders = getMockOrders().filter(
({assetFromLabel, assetToLabel}) =>
assetFromLabel.toLocaleLowerCase().includes(search.toLocaleLowerCase()) ||
assetToLabel.toLocaleLowerCase().includes(search.toLocaleLowerCase()),
)
const transactionsInfos = useTransactionInfos(wallet)
const {search} = useSearch()
const {numberLocale} = useLanguage()
const intl = useIntl()

const orders = useOrderByStatusCompleted({
queryKey: [wallet.id, 'completed-orders'],
})

const tokenIds = _.uniq(orders.flatMap((o) => [o.from.tokenId, o.to.tokenId]))

const tokenInfos = useTokenInfos({wallet, tokenIds: tokenIds})

const normalizedOrders = mapOrders(orders, tokenInfos, numberLocale, Object.values(transactionsInfos))

const searchLower = search.toLocaleLowerCase()

const filteredOrders = normalizedOrders.filter((order) => {
return (
order.assetFromLabel.toLocaleLowerCase().includes(searchLower) ||
order.assetToLabel.toLocaleLowerCase().includes(searchLower)
)
})

return (
<>
<ScrollView style={styles.container}>
{orders.map((order) => {
{filteredOrders.map((order) => {
const id = `${order.assetFromLabel}-${order.assetToLabel}-${order.date}`
const extended = id === hiddenInfoOpenId
const fromIcon = <TokenIcon wallet={wallet} tokenId={order.fromTokenInfo?.id ?? ''} variant="swap" />
const toIcon = <TokenIcon wallet={wallet} tokenId={order.toTokenInfo?.id ?? ''} variant="swap" />
return (
<ExpandableInfoCard
key={`${order.assetFromLabel}-${order.assetToLabel}-${order.date}`}
adornment={<HiddenInfo id={id} order={order} />}
adornment={
<HiddenInfo
txId={order.txId}
total={`${order.total} ${order.assetFromLabel}`}
txLink={order.txLink}
date={intl.formatDate(new Date(order.date), {dateStyle: 'short', timeStyle: 'short'})}
/>
}
header={
<Header
onPress={() => setHiddenInfoOpenId(hiddenInfoOpenId !== id ? id : null)}
assetFromLabel={order.assetFromLabel}
assetToLabel={order.assetToLabel}
assetFromIcon={fromIcon}
assetToIcon={toIcon}
extended={extended}
/>
}
extended={extended}
withBoxShadow
>
<MainInfo order={order} />
<MainInfo
tokenAmount={`${order.tokenAmount} ${order.assetToLabel}`}
tokenPrice={`${order.tokenPrice} ${order.assetFromLabel}`}
/>
</ExpandableInfoCard>
)
})}
Expand All @@ -64,18 +101,22 @@ export const CompletedOrders = () => {
const Header = ({
assetFromLabel,
assetToLabel,
assetFromIcon,
assetToIcon,
extended,
onPress,
}: {
assetFromLabel: string
assetToLabel: string
assetFromIcon: React.ReactNode
assetToIcon: React.ReactNode
extended: boolean
onPress: () => void
}) => {
return (
<HeaderWrapper extended={extended} onPress={onPress}>
<View style={styles.label}>
<Icon.YoroiNightly size={24} />
{assetFromIcon}

<Spacer width={4} />

Expand All @@ -85,7 +126,7 @@ const Header = ({

<Spacer width={4} />

<Icon.Assets size={24} />
{assetToIcon}

<Spacer width={4} />

Expand All @@ -95,32 +136,24 @@ const Header = ({
)
}

const HiddenInfo = ({order}: {id: string; order: OrderProps}) => {
const HiddenInfo = ({total, date, txId, txLink}: {total: string; date: string; txId: string; txLink: string}) => {
const shortenedTxId = `${txId.substring(0, 9)}...${txId.substring(txId.length - 4, txId.length)}`
const strings = useStrings()
return (
<View>
{[
{
label: strings.listOrdersTotal,
value: order.total,
},
{
label: strings.listOrdersLiquidityPool,
value: (
<LiquidityPool
liquidityPoolIcon={order.liquidityPoolIcon}
liquidityPoolName={order.liquidityPoolName}
poolUrl={order.poolUrl}
/>
),
value: total,
},

{
label: strings.listOrdersTimeCreated,
value: order.date,
value: date,
},
{
label: strings.listOrdersTxId,
value: <TxLink txId={order.txId} txLink={order.txLink} />,
value: <TxLink txId={shortenedTxId} txLink={txLink} />,
},
].map((item) => (
<HiddenInfoWrapper key={item.label} value={item.value} label={item.label} />
Expand All @@ -129,13 +162,13 @@ const HiddenInfo = ({order}: {id: string; order: OrderProps}) => {
)
}

const MainInfo = ({order}: {order: OrderProps}) => {
const MainInfo = ({tokenPrice, tokenAmount}: {tokenPrice: string; tokenAmount: string}) => {
const strings = useStrings()
return (
<View>
{[
{label: strings.listOrdersSheetAssetPrice, value: order.tokenPrice},
{label: strings.listOrdersSheetAssetAmount, value: order.tokenAmount},
{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} />
))}
Expand Down Expand Up @@ -165,28 +198,6 @@ const TxLink = ({txLink, txId}: {txLink: string; txId: string}) => {
)
}

const LiquidityPool = ({
liquidityPoolIcon,
liquidityPoolName,
poolUrl,
}: {
liquidityPoolIcon: React.ReactNode
liquidityPoolName: string
poolUrl: string
}) => {
return (
<View style={styles.liquidityPool}>
{liquidityPoolIcon}

<Spacer width={3} />

<TouchableOpacity onPress={() => Linking.openURL(poolUrl)} style={styles.liquidityPoolLink}>
<Text style={styles.liquidityPoolText}>{liquidityPoolName}</Text>
</TouchableOpacity>
</View>
)
}

const styles = StyleSheet.create({
container: {
flex: 1,
Expand All @@ -207,21 +218,6 @@ const styles = StyleSheet.create({
fontWeight: '400',
lineHeight: 22,
},
liquidityPool: {
flexDirection: 'row',
alignItems: 'center',
},
liquidityPoolLink: {
alignItems: 'center',
justifyContent: 'center',
},
liquidityPoolText: {
color: '#4B6DDE',
fontFamily: 'Rubik',
fontSize: 16,
fontWeight: '400',
lineHeight: 22,
},
label: {
flexDirection: 'row',
alignItems: 'center',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,7 @@ export const OpenOrders = () => {
const {search} = useSearch()

const orders = useOrderByStatusOpen({
onError: (err) => {
console.log(err)
},
queryKey: [wallet.id, 'open-orders'],
})
const tokenIds = _.uniq(orders.flatMap((o) => [o.from.tokenId, o.to.tokenId]))

Expand Down Expand Up @@ -94,7 +92,8 @@ export const OpenOrders = () => {
{filteredOrders.map((order) => {
const fromIcon = <TokenIcon wallet={wallet} tokenId={order.fromTokenInfo?.id ?? ''} variant="swap" />
const toIcon = <TokenIcon wallet={wallet} tokenId={order.toTokenInfo?.id ?? ''} variant="swap" />
const liquidityPoolIcon = <PoolIcon size={32} providerId={order.provider} />
const liquidityPoolIcon =
order.provider !== undefined ? <PoolIcon size={32} providerId={order.provider} /> : null
const extended = order.id === hiddenInfoOpenId
return (
<ExpandableInfoCard
Expand All @@ -106,8 +105,8 @@ export const OpenOrders = () => {
txLink={order.txLink}
date={intl.formatDate(new Date(order.date), {dateStyle: 'short', timeStyle: 'short'})}
liquidityPoolIcon={liquidityPoolIcon}
liquidityPoolName={order.provider}
poolUrl={order.poolUrl}
liquidityPoolName={order.provider ?? ''}
poolUrl={order.poolUrl ?? ''}
/>
}
extended={extended}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,32 +1,17 @@
import {Pool} from '@yoroi/openswap'
import {Balance} from '@yoroi/types'
import {SwapOrder} from '@yoroi/types/lib/swap/order'
import {SwapCompletedOrder, SwapOpenOrder} from '@yoroi/types/lib/swap/order'
import {isString} from '@yoroi/wallets'
import BigNumber from 'bignumber.js'
import React from 'react'

import {NumberLocale} from '../../../../../i18n/languages'
import {TransactionInfo} from '../../../../../yoroi-wallets/types'
import {Quantities} from '../../../../../yoroi-wallets/utils'

export type OrderProps = {
tokenPrice: string
tokenAmount: string
assetFromLabel: string
assetFromIcon: React.ReactNode
assetToLabel: string
assetToIcon: React.ReactNode
date: string
liquidityPoolIcon: React.ReactNode
liquidityPoolName: string
txId: string
total: string
poolUrl: string
txLink: string
}
const MAX_DECIMALS = 10

export const mapOrders = (
orders: Array<SwapOrder>,
orders: Array<SwapOpenOrder | SwapCompletedOrder>,
tokenInfos: Balance.TokenInfo[],
numberLocale: NumberLocale,
transactionInfos: TransactionInfo[],
Expand All @@ -37,15 +22,19 @@ export const mapOrders = (
const id = `${order.from.tokenId}-${order.to.tokenId}-${order.utxo}`
const fromLabel = fromTokenInfo?.ticker ?? fromTokenInfo?.name ?? '-'
const toLabel = toTokenInfo?.ticker ?? toTokenInfo?.name ?? '-'
const tokenAmount = BigNumber(Quantities.denominated(order.to.quantity, toTokenInfo?.decimals ?? 0)).toFormat(
numberLocale,
)
const tokenAmount = BigNumber(Quantities.denominated(order.to.quantity, toTokenInfo?.decimals ?? 0))
.decimalPlaces(MAX_DECIMALS)
.toFormat({
...numberLocale,
})
const tokenPrice = BigNumber(
Quantities.quotient(
Quantities.denominated(order.from.quantity, fromTokenInfo?.decimals ?? 0),
Quantities.denominated(order.to.quantity, toTokenInfo?.decimals ?? 0),
),
).toFormat(numberLocale)
)
.decimalPlaces(MAX_DECIMALS)
.toFormat(numberLocale)
const txId = order.utxo.split('#')[0]
const total = BigNumber(Quantities.denominated(order.from.quantity, fromTokenInfo?.decimals ?? 0)).toFormat(
numberLocale,
Expand All @@ -66,8 +55,8 @@ export const mapOrders = (
txLink,
fromTokenInfo,
toTokenInfo,
provider: order.provider,
poolUrl: getPoolUrl(order.provider),
provider: 'provider' in order ? order.provider : undefined,
poolUrl: 'provider' in order ? getPoolUrl(order.provider) : undefined,
}
})
}
Expand Down
Loading