Skip to content

Commit

Permalink
Show fees
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorbuedo
jorbuedo committed Oct 6, 2023
1 parent 4db9909 commit fc7659a
Show file tree
Hide file tree
Showing 5 changed files with 520 additions and 456 deletions.
26 changes: 19 additions & 7 deletions apps/wallet-mobile/src/components/ExpandableInfoCard/ExpandableInfoCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {Spacer} from '../Spacer'
export type ExpandableInfoCardProps = {
info: React.ReactNode
expanded?: boolean
children: React.ReactNode
children?: React.ReactNode
header: React.ReactNode
footer?: React.ReactNode
withBoxShadow?: boolean
Expand All @@ -32,17 +32,29 @@ export const ExpandableInfoCard = ({
<View style={[styles.container, withBoxShadow && styles.shadowProp]}>
{header}

<Spacer height={8} />
{children !== undefined && (
<>
<Spacer height={8} />

{children}
{children}
</>
)}

<Spacer height={8} />
{expanded && (
<>
<Spacer height={8} />

{expanded && info}
{info}
</>
)}

{footer != null && footer}
{footer !== undefined && (
<>
<Spacer height={8} />

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

<Spacer height={8} />
Expand Down
10 changes: 10 additions & 0 deletions apps/wallet-mobile/src/features/Swap/common/strings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,13 @@ export const useStrings = () => {
defaultSlippage: intl.formatMessage(messages.defaultSlippage),
slippageInfo: intl.formatMessage(messages.slippageInfo),
autoPool: intl.formatMessage(messages.autoPool),
changePool: intl.formatMessage(messages.changePool),
swapMinAda: intl.formatMessage(messages.swapMinAda),
swapMinAdaTitle: intl.formatMessage(messages.swapMinAdaTitle),
swapMinReceived: intl.formatMessage(messages.swapMinReceived),
swapMinReceivedTitle: intl.formatMessage(messages.swapMinReceivedTitle),
swapFeesTitle: intl.formatMessage(messages.swapFeesTitle),
swapLiquidityFee: (fee: string) => intl.formatMessage(messages.swapLiquidityFee, {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 @@ -198,6 +200,10 @@ export const messages = defineMessages({
id: 'swap.swapScreen.autoPool',
defaultMessage: '!!!(auto)',
},
changePool: {
id: 'swap.swapScreen.changePool',
defaultMessage: '!!!change pool',
},
swapMinAda: {
id: 'swap.swapScreen.swapMinAda',
defaultMessage:
Expand All @@ -215,6 +221,10 @@ export const messages = defineMessages({
id: 'swap.swapScreen.swapFeesTitle',
defaultMessage: `!!!Fees`,
},
swapLiquidityFee: {
id: 'swap.swapScreen.swapLiquidityFee',
defaultMessage: `!!!Liquidity provider fee ({fee}%)`,
},
swapMinReceived: {
id: 'swap.swapScreen.swapMinReceived',
defaultMessage: '!!!Minimum amount of tokens you can get because of the slippage tolerance.',
Expand Down
162 changes: 86 additions & 76 deletions ...obile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/EditPool/ShowPoolActions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ import {
ExpandableInfoCard,
HeaderWrapper,
HiddenInfoWrapper,
MainInfoWrapper,
Spacer,
} from '../../../../../../components'
import {useLanguage} from '../../../../../../i18n'
import {useSelectedWallet} from '../../../../../../SelectedWallet'
import {COLORS} from '../../../../../../theme'
import {useTokenInfo} from '../../../../../../yoroi-wallets/hooks'
import {Quantities} from '../../../../../../yoroi-wallets/utils'
import {useNavigateTo} from '../../../../common/navigation'
Expand All @@ -29,83 +29,83 @@ export const ShowPoolActions = () => {
const {calculatedPool, amounts} = orderData
const wallet = useSelectedWallet()
const buyTokenInfo = useTokenInfo({wallet, tokenId: amounts.buy.tokenId})
const tokenName = buyTokenInfo.ticker ?? buyTokenInfo.name
const sellTokenInfo = useTokenInfo({wallet, tokenId: amounts.sell.tokenId})
const buyTokenName = buyTokenInfo.ticker ?? buyTokenInfo.name
const sellTokenName = sellTokenInfo.ticker ?? sellTokenInfo.name
const [hiddenInfoOpenId, setHiddenInfoOpenId] = React.useState<string | null>(null)

if (!isBuyTouched || !isSellTouched || calculatedPool === undefined) {
return <></>
}

const totalAmount = Quantities.format(amounts.buy.quantity, buyTokenInfo.decimals ?? 0)
const totalFees = Quantities.format(
Quantities.sum([calculatedPool.cost.batcherFee.quantity, calculatedPool.cost.frontendFeeInfo.fee.quantity]),
Number(wallet.primaryTokenInfo.decimals),
)
const id = calculatedPool.pool.poolId
const expanded = id === hiddenInfoOpenId

const poolProviderFormatted = capitalize(calculatedPool.pool.provider)
const poolStatus = orderData.type === 'limit' && isPoolTouched ? '' : ` ${strings.autoPool}`
const poolTitle = `${poolProviderFormatted}${poolStatus}`

const handlePress = () => setHiddenInfoOpenId(hiddenInfoOpenId !== id ? id : null)

return (
<ExpandableInfoCard
key={id}
header={
<Header
onPressExpand={() => setHiddenInfoOpenId(hiddenInfoOpenId !== id ? id : null)}
onPressLabel={() => {
if (orderData.type === 'limit') {
navigateTo.selectPool()
} else {
setHiddenInfoOpenId(hiddenInfoOpenId !== id ? id : null)
}
}}
expanded={expanded}
>
<View style={styles.flex}>
<PoolIcon size={25} providerId={calculatedPool.pool.provider} />
<View>
<View style={[styles.flex, styles.between]}>
<View style={styles.flex}>
<PoolIcon size={25} providerId={calculatedPool.pool.provider} />

<Spacer width={10} />
<Spacer width={10} />

<Text>{poolTitle}</Text>
</View>
</Header>
}
info={
<HiddenInfo
totalFees={Quantities.format(
calculatedPool.pool.batcherFee.quantity,
Number(wallet.primaryTokenInfo.decimals),
)}
minReceived={getMinAdaReceiveAfterSlippage(
amounts.buy.quantity,
orderData.slippage,
buyTokenInfo.decimals ?? 0,
numberLocale,
)}
minAda={Quantities.format(calculatedPool.pool.deposit.quantity, Number(wallet.primaryTokenInfo.decimals))}
buyTokenName={tokenName}
/>
}
expanded={expanded}
>
<MainInfo totalAmount={totalAmount} tokenName={tokenName} />
</ExpandableInfoCard>
)
}
<Text style={styles.bolder}>{poolTitle}</Text>
</View>

const Header = ({
children,
expanded,
onPressExpand,
onPressLabel,
}: {
children: React.ReactNode
expanded?: boolean
onPressExpand: () => void
onPressLabel: () => void
}) => {
return (
<HeaderWrapper expanded={expanded} onPress={onPressExpand}>
<TouchableOpacity onPress={onPressLabel}>{children}</TouchableOpacity>
</HeaderWrapper>
{orderData.type === 'limit' && (
<TouchableOpacity onPress={() => navigateTo.selectPool()}>
<Text style={styles.change}>{strings.changePool}</Text>
</TouchableOpacity>
)}
</View>

<ExpandableInfoCard
key={id}
header={
<HeaderWrapper expanded={expanded} onPress={handlePress}>
<TouchableOpacity onPress={handlePress}>
<Text style={styles.bold}>{`${strings.total}: ${Quantities.format(
amounts.sell.quantity,
sellTokenInfo.decimals ?? 0,
)} ${sellTokenName} + ${totalFees} ${wallet.primaryTokenInfo.ticker}`}</Text>
</TouchableOpacity>
</HeaderWrapper>
}
info={
<HiddenInfo
totalFees={Quantities.format(
calculatedPool.pool.batcherFee.quantity,
Number(wallet.primaryTokenInfo.decimals),
)}
minReceived={getMinAdaReceiveAfterSlippage(
amounts.buy.quantity,
orderData.slippage,
buyTokenInfo.decimals ?? 0,
numberLocale,
)}
minAda={Quantities.format(calculatedPool.pool.deposit.quantity, Number(wallet.primaryTokenInfo.decimals))}
buyTokenName={buyTokenName}
sellTokenName={sellTokenName}
liquidityFee={calculatedPool.pool.fee}
liquidityFeeValue={Quantities.format(
calculatedPool.cost.liquidityFee.quantity,
sellTokenInfo.decimals ?? 0,
)}
/>
}
expanded={expanded}
/>
</View>
)
}

Expand All @@ -114,11 +114,17 @@ const HiddenInfo = ({
minAda,
minReceived,
buyTokenName,
sellTokenName,
liquidityFee,
liquidityFeeValue,
}: {
totalFees: string
minAda: string
minReceived: string
buyTokenName: string
sellTokenName: string
liquidityFee: string
liquidityFeeValue: string
}) => {
const [bottomSheetState, setBottomSheetSate] = React.useState<{isOpen: boolean; title: string; content?: string}>({
isOpen: false,
Expand All @@ -136,15 +142,19 @@ const HiddenInfo = ({
value: `${minAda} ${wallet.primaryTokenInfo.ticker}`,
info: strings.swapMinAda,
},
{
label: strings.swapFeesTitle,
value: `${totalFees} ${wallet.primaryTokenInfo.ticker}`,
info: strings.swapFees,
},
{
label: strings.swapMinReceivedTitle,
value: `${minReceived} ${buyTokenName}`,
info: strings.swapMinReceived,
},
{
label: strings.swapFeesTitle,
value: `${totalFees} ${wallet.primaryTokenInfo.ticker}`,
info: strings.swapFees,
label: strings.swapLiquidityFee(liquidityFee),
value: `${liquidityFeeValue} ${sellTokenName}`,
},
].map((item) => (
<HiddenInfoWrapper
Expand Down Expand Up @@ -175,25 +185,25 @@ const HiddenInfo = ({
)
}

const MainInfo = ({totalAmount, tokenName}: {totalAmount: string; tokenName: string}) => {
const strings = useStrings()

return (
<View>
{[{label: `${strings.total} ${totalAmount} ${tokenName} `}].map((item, index) => (
<MainInfoWrapper key={index} label={item.label} isLast={index === 0} />
))}
</View>
)
}

const styles = StyleSheet.create({
flex: {flexDirection: 'row', alignItems: 'center'},
between: {justifyContent: 'space-between'},
text: {
textAlign: 'left',
fontSize: 16,
lineHeight: 24,
fontWeight: '400',
color: '#242838',
},
change: {color: COLORS.SHELLEY_BLUE, fontWeight: '600', textTransform: 'uppercase'},
bold: {
color: COLORS.BLACK,
fontWeight: '400',
fontFamily: 'Rubik-Regular',
},
bolder: {
color: COLORS.BLACK,
fontWeight: '500',
fontFamily: 'Rubik-Medium',
},
})
4 changes: 3 additions & 1 deletion apps/wallet-mobile/src/i18n/locales/en-US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,10 +157,12 @@
"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.swapMinAda": "Min-ADA is the minimum ADA amount required to be contained when holding or sending Cardano native tokens.",
"swap.swapScreen.swapMinAdaTitle": "Min ADA",
"swap.swapScreen.swapFees": "Swap fees include the following:\n • Matchmaker Fee\n • Frontend Fee\n • Liquidity Provider Fee",
"swap.swapScreen.swapFees": "Swap fees include the following:\n • Matchmaker Fee\n • Frontend Fee",
"swap.swapScreen.swapFeesTitle": "Fees",
"swap.swapScreen.swapLiquidityFee": "Liquidity provider fee ({fee}%)",
"swap.swapScreen.swapMinReceived": "Minimum amount of tokens 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 Down
Loading

0 comments on commit fc7659a

Please sign in to comment.