Skip to content

Commit 726996d

Browse files
marc2332msarcevevavirseda
authored
feat(dapp): Use the base price as minimum bid (#455)
* feat(dapp): Use the base price as minimum bid * clean up * do not show cards if there is an error * Update dapp/src/components/AvailabilityCheck.tsx Co-authored-by: evavirseda <evirseda@boxfish.studio> --------- Co-authored-by: msarcev <mario.sarcevic@iota.org> Co-authored-by: evavirseda <evirseda@boxfish.studio>
1 parent 83dcf11 commit 726996d

File tree

2 files changed

+63
-44
lines changed

2 files changed

+63
-44
lines changed

‎dapp/src/auctions/components/dialogs/AuctionBidDialog.tsx‎

Lines changed: 51 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,15 @@ import {
2525
} from '@iota/apps-ui-kit';
2626
import { useCurrentAccount, useIotaClient, useSignAndExecuteTransaction } from '@iota/dapp-kit';
2727
import { Transaction } from '@iota/iota-sdk/transactions';
28-
import { IOTA_DECIMALS, NANOS_PER_IOTA } from '@iota/iota-sdk/utils';
28+
import { IOTA_DECIMALS } from '@iota/iota-sdk/utils';
2929
import { useMutation, useQueryClient } from '@tanstack/react-query';
30-
import { useState } from 'react';
30+
import { useEffect, useState } from 'react';
3131

3232
import { useAuctionBid } from '@/auctions/hooks/useAuctionBid';
3333
import { useCountdown } from '@/auctions/hooks/useCountdown';
3434
import { useGetAuctionMetadata } from '@/auctions/hooks/useGetAuctionMetadata';
3535
import { formatTimeRemaining, getTimeRemaining, getUserAuctionStatus } from '@/auctions/lib/utils';
36-
import { queryKey } from '@/hooks';
36+
import { NameRecordData, queryKey, useNameRecord } from '@/hooks';
3737
import { formatNanosToIota } from '@/lib/utils';
3838
import { toNanos } from '@/lib/utils/amount';
3939
import { formatExpirationDate } from '@/lib/utils/format/formatExpirationDate';
@@ -49,16 +49,28 @@ export function AuctionBidDialog({ name, closeDialog, onCompleted }: AuctionBidD
4949
const iotaClient = useIotaClient();
5050
const account = useCurrentAccount();
5151
const queryClient = useQueryClient();
52+
const { data: nameRecordData, isLoading: isNameRecordLoading } = useNameRecord(name);
53+
54+
const nameRecord = nameRecordData as Extract<NameRecordData, { type: 'available' }> | undefined;
5255
const { data: auctionMetadata } = useGetAuctionMetadata(name);
53-
const minBidNanos = auctionMetadata?.minBidNanos || NANOS_PER_IOTA;
54-
const [bidAmountValue, setBidAmountValue] = useState(
55-
formatNanosToIota(minBidNanos, {
56-
formatRounded: false,
57-
showIotaSymbol: false,
58-
}),
59-
);
56+
const minBidNanos =
57+
auctionMetadata?.minBidNanos || (nameRecord ? BigInt(nameRecord.price) : null);
58+
59+
const [bidAmountValue, setBidAmountValue] = useState<string | undefined>();
60+
61+
// Sync the minimum bid amount
62+
useEffect(() => {
63+
if (minBidNanos) {
64+
setBidAmountValue(
65+
formatNanosToIota(minBidNanos, {
66+
formatRounded: false,
67+
showIotaSymbol: false,
68+
}),
69+
);
70+
}
71+
}, [minBidNanos]);
6072

61-
const bidNanos = toNanos(bidAmountValue);
73+
const bidNanos = bidAmountValue ? toNanos(bidAmountValue) : null;
6274

6375
const {
6476
data: auctionBidTransaction,
@@ -92,22 +104,40 @@ export function AuctionBidDialog({ name, closeDialog, onCompleted }: AuctionBidD
92104
},
93105
});
94106

95-
const minBidLabel = formatNanosToIota(minBidNanos, {
96-
formatRounded: false,
97-
showIotaSymbol: true,
98-
});
107+
const status = auctionMetadata && getUserAuctionStatus(auctionMetadata, account?.address || '');
108+
const timeRemainingMs = auctionMetadata && getTimeRemaining(auctionMetadata);
109+
const { milliseconds } = useCountdown(timeRemainingMs || 0);
99110

100-
const minBidWithoutLabel = formatNanosToIota(minBidNanos, {
101-
formatRounded: false,
102-
showIotaSymbol: false,
103-
});
104111
const isBidAboveDecimals = bidNanos === null;
105-
const isBidBelowMinimum = (bidNanos || BigInt(0)) < minBidNanos;
112+
const isBidBelowMinimum = minBidNanos ? (bidNanos || BigInt(0)) < minBidNanos : false;
106113

107-
const isLoading = isAuctionBidLoading || isSendingTransaction || isSigningTransaction;
114+
const isLoading =
115+
isNameRecordLoading || isAuctionBidLoading || isSendingTransaction || isSigningTransaction;
108116
const isPending = isAuctionBidPending;
109117
const disablePlaceBid = isPending || isLoading || isBidBelowMinimum;
110118

119+
const formattedTimeRemaining = formatTimeRemaining(milliseconds);
120+
const currentBid = auctionMetadata
121+
? formatNanosToIota(auctionMetadata.currentBidNanos, {
122+
formatRounded: false,
123+
showIotaSymbol: true,
124+
})
125+
: '--';
126+
const expirationDate = auctionMetadata
127+
? formatExpirationDate(auctionMetadata.nftExpiration)
128+
: '--';
129+
const minBidLabel = minBidNanos
130+
? formatNanosToIota(minBidNanos, {
131+
formatRounded: false,
132+
showIotaSymbol: true,
133+
})
134+
: '--';
135+
const minBidWithoutLabel = minBidNanos
136+
? formatNanosToIota(minBidNanos, {
137+
formatRounded: false,
138+
showIotaSymbol: false,
139+
})
140+
: '--';
111141
const errorMessage = (() => {
112142
if (isBidAboveDecimals) {
113143
return `The value exceeds the maximum decimals (${IOTA_DECIMALS}).`;
@@ -119,20 +149,6 @@ export function AuctionBidDialog({ name, closeDialog, onCompleted }: AuctionBidD
119149
})();
120150
const cleanName = normalizeNameInput(name);
121151

122-
const status = auctionMetadata && getUserAuctionStatus(auctionMetadata, account?.address || '');
123-
const timeRemainingMs = auctionMetadata && getTimeRemaining(auctionMetadata);
124-
const { milliseconds } = useCountdown(timeRemainingMs || 0);
125-
126-
const formattedTimeRemaining = formatTimeRemaining(milliseconds);
127-
const currentBid = auctionMetadata
128-
? formatNanosToIota(auctionMetadata.currentBidNanos, {
129-
formatRounded: false,
130-
showIotaSymbol: true,
131-
})
132-
: '--';
133-
const expirationDate = auctionMetadata
134-
? formatExpirationDate(auctionMetadata.nftExpiration)
135-
: '--';
136152
return (
137153
<Dialog open onOpenChange={closeDialog}>
138154
<DialogContent containerId="overlay-portal-container" position={DialogPosition.Right}>

‎dapp/src/components/AvailabilityCheck.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
import { Close, Search } from '@iota/apps-ui-icons';
77
import { Button, ButtonType, ButtonUnstyled, Input, InputType } from '@iota/apps-ui-kit';
88
import { ConnectButton, useCurrentWallet } from '@iota/dapp-kit';
9-
import { NANOS_PER_IOTA } from '@iota/iota-sdk/utils';
109
import { useCallback, useMemo, useState } from 'react';
1110

1211
import { AuctionBidDialog } from '@/auctions/components/dialogs/AuctionBidDialog';
@@ -97,15 +96,18 @@ export function AvailabilityCheck({ autoFocusInput, onCompleted }: AvailabilityC
9796
setName('');
9897
onCompleted?.();
9998
}
99+
100100
const statusMessage =
101101
isUnavailable && !isAuctionInProgress
102102
? 'Name is already taken.'
103103
: isAuctionInProgress
104104
? 'In auction'
105105
: undefined;
106+
const purchasePrice = isAvailable ? nameRecordData.price : undefined;
107+
const bidPrice = auctionMetadata?.minBidNanos || purchasePrice;
108+
const cleanName = normalizeNameInput(name);
106109

107110
const isAuctionLoading = name && (!nameRecordData || isAuctionMetadataLoading);
108-
const cleanName = normalizeNameInput(name);
109111

110112
const inputTrailingElement = (
111113
<div className="flex flex-row gap-xs">
@@ -153,15 +155,15 @@ export function AvailabilityCheck({ autoFocusInput, onCompleted }: AvailabilityC
153155
trailingElement={inputTrailingElement}
154156
/>
155157
</div>
156-
{nameRecordData && (
158+
{nameRecordData && !errorMessage && (
157159
<div className="flex flex-col items-center space-y-4 w-full">
158160
{!isAuctionInProgress && (
159161
<NamePurchaseCard
160162
name={cleanName}
161163
isAvailable={!!(!isUnavailable || isAuctionInProgress)}
162164
price={
163-
isAvailable
164-
? formatNanosToIota(nameRecordData.price, {
165+
purchasePrice
166+
? formatNanosToIota(purchasePrice, {
165167
showIotaSymbol: false,
166168
})
167169
: undefined
@@ -187,10 +189,11 @@ export function AvailabilityCheck({ autoFocusInput, onCompleted }: AvailabilityC
187189
<NamePurchaseCard
188190
name={cleanName}
189191
isAvailable={!!(!isUnavailable || isAuctionInProgress)}
190-
price={formatNanosToIota(
191-
auctionMetadata?.minBidNanos || NANOS_PER_IOTA,
192-
{ showIotaSymbol: false },
193-
)}
192+
price={
193+
bidPrice
194+
? formatNanosToIota(bidPrice, { showIotaSymbol: false })
195+
: undefined
196+
}
194197
priceSupportingText="Minimum bid"
195198
statusMessage={statusMessage}
196199
>

0 commit comments

Comments
 (0)