Skip to content

Commit

Permalink
Make mux swaps more clear (#2075)
Browse files Browse the repository at this point in the history
  • Loading branch information
@onnovisser
onnovisser authored Apr 8, 2024
1 parent 58dcb6f commit 30c6032
Showing 1 changed file with 52 additions and 26 deletions.
78 changes: 52 additions & 26 deletions centrifuge-app/src/components/Swaps/Orders.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,9 @@ export type SwapOrder = {
buyCurrency: CurrencyMetadata
sellCurrency: CurrencyMetadata
minFulfillmentAmount: CurrencyBalance
isMuxSwap: boolean
isMuxDeposit: boolean
isMuxBurn: boolean
}

export function Orders({ buyOrSell }: OrdersProps) {
Expand Down Expand Up @@ -159,7 +162,23 @@ export function Orders({ buyOrSell }: OrdersProps) {
const buyCurrency = findCurrency(currencies!, currencyIn)!
const sellCurrency = findCurrency(currencies!, currencyOut)!
const sellAmount = new CurrencyBalance(order.amountOut, sellCurrency!.decimals)
const price = 'market' in order.ratio ? null : new Price(order.ratio.custom)

const isMuxBurn =
typeof sellCurrency.key !== 'string' &&
'LocalAsset' in sellCurrency.key &&
String(sellCurrency.key.LocalAsset) === String(buyCurrency.additional?.localRepresentation)
const isMuxDeposit =
typeof buyCurrency.key !== 'string' &&
'LocalAsset' in buyCurrency.key &&
String(buyCurrency.key.LocalAsset) === String(sellCurrency.additional?.localRepresentation)
const isMuxSwap = isMuxBurn || isMuxDeposit

const price = isMuxSwap
? Price.fromFloat(1)
: 'market' in order.ratio
? null
: new Price(order.ratio.custom)

return {
id: String(order.orderId),
account: addressToHex(order.placingAccount),
Expand All @@ -170,6 +189,9 @@ export function Orders({ buyOrSell }: OrdersProps) {
price,
buyCurrency,
sellCurrency,
isMuxSwap,
isMuxBurn,
isMuxDeposit,
}
})
}),
Expand Down Expand Up @@ -210,18 +232,7 @@ export function SwapAndSendDialog({ open, onClose, order }: { open: boolean; onC
const [account] = useSuitableAccounts({})
const utils = useCentrifugeUtils()

const isMaybeMuxDeposit = typeof order.buyCurrency.key !== 'string' && 'LocalAsset' in order.buyCurrency.key
const isMaybeMuxBurn = typeof order.sellCurrency.key !== 'string' && 'LocalAsset' in order.sellCurrency.key
const isMaybeMuxSwap = isMaybeMuxBurn || isMaybeMuxDeposit
const localCurrency = isMaybeMuxDeposit ? order.buyCurrency : order.sellCurrency
const otherCurrency = isMaybeMuxDeposit ? order.sellCurrency : order.buyCurrency
const isMuxSwap =
isMaybeMuxSwap &&
String((localCurrency.key as any).LocalAsset) === String(otherCurrency.additional?.localRepresentation)
const isMuxBurn = isMuxSwap && isMaybeMuxBurn
const isMuxDeposit = isMuxSwap && isMaybeMuxDeposit

const balances = useBalances(isMuxBurn ? TOKENMUX_PALLET_ACCOUNTID : account?.actingAddress)
const balances = useBalances(order.isMuxBurn ? TOKENMUX_PALLET_ACCOUNTID : account?.actingAddress)
const api = useCentrifugeApi()
const consts = useCentrifugeConsts()
const getNetworkName = useGetNetworkName()
Expand All @@ -247,7 +258,7 @@ export function SwapAndSendDialog({ open, onClose, order }: { open: boolean; onC
(cent) => (args: [transferTo: string | null, amount: CurrencyBalance | null], options) => {
const [transferTo, amount] = args
let fn = api.tx.orderBook.fillOrder
if (isMuxSwap) {
if (order.isMuxSwap) {
fn = api.tx.tokenMux.matchSwap
}
let swapTx = fn(order.id, order.sellAmount.toString())
Expand Down Expand Up @@ -316,7 +327,7 @@ export function SwapAndSendDialog({ open, onClose, order }: { open: boolean; onC

if (!account) return null

const balanceLow = !isMuxDeposit && balanceDec.lt(orderBuyDec)
const balanceLow = !order.isMuxDeposit && balanceDec.lt(orderBuyDec)
const { isTransferEnabled, isPartialEnabled } = form.values
const disabled = isPartialEnabled ? false : balanceLow

Expand All @@ -325,11 +336,20 @@ export function SwapAndSendDialog({ open, onClose, order }: { open: boolean; onC
<FormikProvider value={form}>
<Form>
<Stack gap={3}>
<Stack alignSelf="center" gap={5}>
<Stack alignSelf={order.isMuxSwap ? 'start' : 'center'} gap={5}>
<Shelf alignItems="center" alignSelf="center" gap={4} flexWrap="nowrap" mb={2}>
<Text variant="heading3" style={{ position: 'relative' }}>
<Text fontSize={24}>{formatBalance(order.buyAmount)}</Text> {order.buyCurrency.symbol}
{!isMuxDeposit && (
{order.isMuxSwap ? (
<>
{order.isMuxDeposit ? 'Depositing' : 'Redeeming'} {formatBalance(order.buyAmount)}{' '}
{order.isMuxDeposit ? order.sellCurrency.symbol : order.buyCurrency.symbol} on Centrifuge
</>
) : (
<>
<Text fontSize={24}>{formatBalance(order.buyAmount)}</Text> {order.buyCurrency.symbol}
</>
)}
{!order.isMuxDeposit && (
<Box position="absolute" top="100%" left={0}>
<Text
variant="label2"
Expand All @@ -341,12 +361,17 @@ export function SwapAndSendDialog({ open, onClose, order }: { open: boolean; onC
</Box>
)}
</Text>
<IconArrowRight />
<Text variant="heading3">
<Text fontSize={24}>{formatBalance(order.sellAmount)}</Text> {order.sellCurrency.symbol}
</Text>
{!order.isMuxSwap && (
<>
{' '}
<IconArrowRight />
<Text variant="heading3">
<Text fontSize={24}>{formatBalance(order.sellAmount)}</Text> {order.sellCurrency.symbol}
</Text>
</>
)}
</Shelf>
{balanceLow && !isMuxSwap && (
{balanceLow && !order.isMuxSwap && (
<TextInput
label={
orderBuyCurrencyLocation
Expand All @@ -369,7 +394,7 @@ export function SwapAndSendDialog({ open, onClose, order }: { open: boolean; onC
)}
</Stack>

{orderBuyDec.gt(minFulfillDec) && !isMuxDeposit && (
{orderBuyDec.gt(minFulfillDec) && !order.isMuxDeposit && (
<Card p={2}>
<Stack gap={2}>
<Field type="checkbox" name="isPartialEnabled" as={Checkbox} label="Fulfill order partially" />
Expand Down Expand Up @@ -407,7 +432,7 @@ export function SwapAndSendDialog({ open, onClose, order }: { open: boolean; onC
</Card>
)}

{orderSellCurrencyLocation && !isMuxSwap && (
{orderSellCurrencyLocation && !order.isMuxSwap && (
<Card p={2}>
<Stack gap={2}>
<Field
Expand All @@ -433,7 +458,8 @@ export function SwapAndSendDialog({ open, onClose, order }: { open: boolean; onC
Cancel
</Button>
<Button type="submit" disabled={disabled} loading={isLoading}>
Swap {isTransferEnabled && 'and transfer'}
{order.isMuxBurn ? 'Redeem' : order.isMuxDeposit ? 'Deposit' : 'Swap'}{' '}
{isTransferEnabled && 'and transfer'}
</Button>
</ButtonGroup>
</Stack>
Expand Down

0 comments on commit 30c6032

Please sign in to comment.