diff --git a/infra/rooch-portal-v2/src/components/market/inscription-item-card.tsx b/infra/rooch-portal-v2/src/components/market/inscription-item-card.tsx index 815843ba47..6be6bf0557 100644 --- a/infra/rooch-portal-v2/src/components/market/inscription-item-card.tsx +++ b/infra/rooch-portal-v2/src/components/market/inscription-item-card.tsx @@ -1,16 +1,16 @@ import type { BalanceInfoView } from '@roochnetwork/rooch-sdk'; import type { MarketItem } from 'src/hooks/trade/use-market-data'; -import { useMemo } from 'react'; +import { useState, useMemo } from 'react'; import BigNumber from 'bignumber.js'; import { Args, Transaction } from '@roochnetwork/rooch-sdk'; import { useCurrentAddress, useSignAndExecuteTransaction } from '@roochnetwork/rooch-sdk-kit'; import { LoadingButton } from '@mui/lab'; import { grey } from '@mui/material/colors'; -import { Card, Chip, Stack, Checkbox, CardActions } from '@mui/material'; +import { Dialog, DialogActions, DialogContent, Button, Card, Chip, Stack, Checkbox, CardActions } from '@mui/material'; -import { fromDust } from 'src/utils/number'; +import { formatNumber, fromDust } from 'src/utils/number'; import { formatUnitPrice } from 'src/utils/marketplace'; import { toast } from 'src/components/snackbar'; @@ -18,6 +18,7 @@ import { Iconify } from 'src/components/iconify'; import InscriptionShopCard from './inscription-shop-card'; import { useNetworkVariable } from '../../hooks/use-networks'; +import {fNumber} from "../../utils/format-number"; export type InscriptionItemCardProps = { item: MarketItem; @@ -45,6 +46,11 @@ export default function InscriptionItemCard({ const account = useCurrentAddress(); const market = useNetworkVariable('market'); const { mutate: signAndExecuteTransaction, isPending } = useSignAndExecuteTransaction(); + const [openDialog, setOpenDialog] = useState(false); + const [confirmData, setConfirmData] = useState({ + price: '0', + quantity: 0, + }); const price = useMemo( () => @@ -54,6 +60,70 @@ export default function InscriptionItemCard({ [toCoinBalanceInfo.decimals, item.quantity, item.unit_price] ); + const handleBuyClick = () => { + if (!account?.genRoochAddress().toHexAddress()) { + return; + } + + setConfirmData({ + price, + quantity: Number(item.quantity), + }); + setOpenDialog(true); + }; + + const handleConfirm = async () => { + if (!account?.genRoochAddress().toHexAddress()) { + return; + } + console.log( + '🚀 ~ file: inscription-item-card.tsx:203 ~ item:', + item, + item.order_id, + BigInt(item.order_id), + Args.u64(BigInt(item.order_id)) + ); + setOpenDialog(false); + + const tx = new Transaction(); + tx.callFunction({ + target: `${market.orderBookAddress}::market_v2::buy`, + args: [ + Args.objectId(market.tickInfo[tick].obj), + Args.u64(BigInt(item.order_id)), + Args.address(item.owner), + Args.bool(true), + Args.address(account.genRoochAddress().toStr()), + ], + typeArgs: [fromCoinBalanceInfo.coin_type, toCoinBalanceInfo.coin_type], + }); + + signAndExecuteTransaction( + { + transaction: tx, + }, + { + async onSuccess(data) { + console.log(JSON.stringify(data.execution_info.status)); + if (data.execution_info.status.type === 'executed') { + toast.success('Buy Success'); + await onRefetchMarketData(); + } else { + toast.error('Buy Failed'); + } + }, + onError(error) { + toast.error(String(error)); + }, + } + ); + }; + + const handleCancel = () => { + setOpenDialog(false); + }; + + return ( { if ( @@ -128,48 +197,7 @@ export default function InscriptionItemCard({ size="small" color="primary" fullWidth - onClick={() => { - if (!account?.genRoochAddress().toHexAddress()) { - return; - } - console.log( - '🚀 ~ file: inscription-item-card.tsx:203 ~ item:', - item, - item.order_id, - BigInt(item.order_id), - Args.u64(BigInt(item.order_id)) - ); - const tx = new Transaction(); - tx.callFunction({ - target: `${market.orderBookAddress}::market_v2::buy`, - args: [ - Args.objectId(market.tickInfo[tick].obj), - Args.u64(BigInt(item.order_id)), - Args.address(item.owner), - Args.bool(true), - Args.address(account.genRoochAddress().toStr()), - ], - typeArgs: [fromCoinBalanceInfo.coin_type, toCoinBalanceInfo.coin_type], - }); - signAndExecuteTransaction( - { - transaction: tx, - }, - { - async onSuccess(data) { - if (data.execution_info.status.type === 'executed') { - toast.success('Buy Success'); - await onRefetchMarketData(); - } else { - toast.error('Buy Failed'); - } - }, - onError(error) { - toast.error(String(error)); - }, - } - ); - }} + onClick={handleBuyClick} > {!account?.genRoochAddress().toHexAddress() ? 'Please connect wallet' @@ -225,6 +253,32 @@ export default function InscriptionItemCard({ )} + + {/* Confirm Purchase */} + + +

+ Balance Changes +

+

+ + {fNumber(fromDust(confirmData.quantity, toCoinBalanceInfo.decimals).toNumber())} {tick.toUpperCase()} +

+

+ - {new BigNumber(price).isNaN() + ? '--' + : formatNumber(fromDust(price, fromCoinBalanceInfo.decimals).toNumber())}{' '} + {fromCoinBalanceInfo.symbol} +

+
+ + + + +
); }