+
+
+ Query Auctions
++
+
+
+ );
+}
diff --git a/src/components/CreateAuction/AuctionLot.tsx b/src/components/CreateAuction/AuctionLot.tsx
new file mode 100644
index 0000000..ba5c252
--- /dev/null
+++ b/src/components/CreateAuction/AuctionLot.tsx
@@ -0,0 +1,58 @@
+import { ValueEntry } from 'hydra-auction-offchain';
+import { useEffect, useState } from 'react';
+import { StringInput } from '../Inputs/StringInput';
+import { NumberInput } from '../Inputs/NumberInput';
+
+export const MOCK_AUCTION_LOT: ValueEntry = {
+ cs: 'c0f8644a01a6bf5db02f4afe30d604975e63dd274f1098a1738e561d',
+ tn: '4d6f6e614c697361',
+ quantity: '1',
+};
+
+type AuctionLotProps = {
+ onChangeAuctionLot?: (auctionLot: ValueEntry) => void;
+};
+
+export const AuctionLot = ({ onChangeAuctionLot }: AuctionLotProps) => {
+ const [auctionLot, setAuctionLot] = useState
+ {
+ setActiveFilter(auctionListFilterOptions[index].accessor);
+ }}
+ options={auctionListFilterOptions}
+ title="Filter Auctions"
+ />
+
+
+ {filteredAuctions?.length || 0} Auctions
+
+ {filteredAuctions?.map((auctionInfo, index) => (
+
+
+
+ );
+};
diff --git a/src/components/CreateAuction/AuctionLotList.tsx b/src/components/CreateAuction/AuctionLotList.tsx
new file mode 100644
index 0000000..d3f6cea
--- /dev/null
+++ b/src/components/CreateAuction/AuctionLotList.tsx
@@ -0,0 +1,69 @@
+import { ValueEntry } from 'hydra-auction-offchain';
+import { AuctionLot, MOCK_AUCTION_LOT } from './AuctionLot';
+import { useEffect, useState } from 'react';
+
+type AuctionLotListProps = {
+ onChangeAuctionLotList?: (auctionLots: ValueEntry[]) => void;
+};
+
+export const AuctionLotList = ({
+ onChangeAuctionLotList,
+}: AuctionLotListProps) => {
+ const [auctionLots, setAuctionLots] = useState
+
+
+
+
+
+
+ {auctionLots.map((_, index) => (
+
+ );
+};
diff --git a/src/components/CreateAuction/CreateAuction.tsx b/src/components/CreateAuction/CreateAuction.tsx
new file mode 100644
index 0000000..3ace042
--- /dev/null
+++ b/src/components/CreateAuction/CreateAuction.tsx
@@ -0,0 +1,33 @@
+import { getUrlParams } from 'src/utils/getUrlParams';
+import CreateAuctionTabs from '../CreateAuctionTabs/CreateAuctionTabs';
+import { useAssets } from '@meshsdk/react';
+import CurrentListing from './CurrentListing';
+
+export default function CreateAuction() {
+ // Use url params to get the assetUnit
+ const urlParams = getUrlParams();
+ const assetUnit = urlParams.get('assetUnit');
+ const assetName = urlParams.get('assetName');
+
+ // For now we are going to use the assetUnit to get the asset from the queryAssets cache inside the form.
+ // This way we dont need to prop drill the asset across the tabs
+ const assets = useAssets();
+ const assetToList = assets?.find((asset) => asset.unit === assetUnit);
+
+ if (!assetUnit || !assetName || !assetToList)
+ return
+
+ handleChangeAuctionLot(index, auctionLot)
+ }
+ />
+
+ ))}
+
+
+
+ Auction Lot {index + 1}
+
+ Error finding asset...
;
+ return (
+ <>
+ List an NFT
+ +
+
+
+ );
+}
diff --git a/src/components/CreateAuction/CreateAuctionForm.tsx b/src/components/CreateAuction/CreateAuctionForm.tsx
new file mode 100644
index 0000000..f00728c
--- /dev/null
+++ b/src/components/CreateAuction/CreateAuctionForm.tsx
@@ -0,0 +1,220 @@
+import React, { useEffect, useState } from 'react';
+import { NumberInput } from '../Inputs/NumberInput';
+import { DateTimeInput } from '../Inputs/DateInput';
+import { DropDown } from '../DropDown/DropDown';
+import { AuctionTermsInput, WalletApp } from 'hydra-auction-offchain';
+import { generateMockAnnounceAuctionParams } from 'src/mocks/announceAuction.mock';
+import { getUrlParams } from 'src/utils/getUrlParams';
+import { useExtendedAssets } from 'src/hooks/api/assets';
+import { useAnnounceAuction } from 'src/hooks/api/announceAuction';
+import { useWallet } from '@meshsdk/react';
+import { useDelegates } from 'src/hooks/api/delegates';
+import { auctionTermsInputSchema } from 'src/schemas/auctionTermsSchema';
+import { removePolicyIdFromAssetUnit } from 'src/utils/formatting';
+import { toast } from 'react-toastify';
+import { ONE_DAY_MS, formatDate } from 'src/utils/date';
+
+type CreateAuctionFormProps = {
+ className?: string;
+};
+const CreateAuctionForm = ({ className }: CreateAuctionFormProps) => {
+ const { data: delegateGroup } = useDelegates();
+ const urlParams = getUrlParams();
+ const assetUnit = urlParams.get('assetUnit');
+
+ const mockAnnounceAuctionParams = generateMockAnnounceAuctionParams();
+ const [auctionFormData, setAuctionFormData] = useState
+
+
+
+
+
+
+ );
+};
+export default CreateAuctionForm;
diff --git a/src/components/CreateAuction/CreateAuctionList.tsx b/src/components/CreateAuction/CreateAuctionList.tsx
new file mode 100644
index 0000000..3a52dbc
--- /dev/null
+++ b/src/components/CreateAuction/CreateAuctionList.tsx
@@ -0,0 +1,13 @@
+import WalletNfts from '../WalletNfts/WalletNfts';
+
+export default function CreateAuctionList() {
+ return (
+ <>
+
+
+
+ My Nfts
++
+
+ );
+};
+export default CurrentListing;
diff --git a/src/components/CreateAuctionTabs/CreateAuctionTabs.tsx b/src/components/CreateAuctionTabs/CreateAuctionTabs.tsx
new file mode 100644
index 0000000..58808e6
--- /dev/null
+++ b/src/components/CreateAuctionTabs/CreateAuctionTabs.tsx
@@ -0,0 +1,82 @@
+import { Asset } from '@meshsdk/core';
+import { useState } from 'react';
+import NavPiece from './NavPiece';
+import SelectTab from './SelectTab';
+import CreateAuctionForm from '../CreateAuction/CreateAuctionForm';
+import { Button } from '../shadcn/Button';
+
+type CreateAuctionTabsProps = {
+ assetToList: Asset | undefined;
+};
+
+const ANNOUNCE_AUCTION_TABS = [
+ {
+ label: 'Select NFT',
+ key: 'select',
+ },
+ {
+ label: 'Auction Details',
+ key: 'details',
+ },
+];
+
+type CreateAuctionNavProps = {
+ activeTab: number;
+ setActiveTab: (tab: number) => void;
+};
+const CreateAuctionNav = ({
+ activeTab,
+ setActiveTab,
+}: CreateAuctionNavProps) => {
+ return (
+
+ Current Listing:
+
+ {name}
+
+ {ANNOUNCE_AUCTION_TABS.map((tab, index) => {
+ return (
+
+ setActiveTab(
+ ANNOUNCE_AUCTION_TABS.findIndex(
+ (auctionTab) => auctionTab.key === tab.key
+ )
+ )
+ }
+ isLastIndex={index === ANNOUNCE_AUCTION_TABS.length - 1}
+ />
+ );
+ })}
+
+ );
+};
+
+const TabSwitch = ({ tab }: { tab: string }) => {
+ if (tab === 'select') {
+ return
+
+ );
+}
diff --git a/src/components/CreateAuctionTabs/NavPiece.tsx b/src/components/CreateAuctionTabs/NavPiece.tsx
new file mode 100644
index 0000000..a2966a5
--- /dev/null
+++ b/src/components/CreateAuctionTabs/NavPiece.tsx
@@ -0,0 +1,39 @@
+import { ChevronRightIcon } from '@heroicons/react/24/solid';
+import clsx from 'clsx';
+import React from 'react';
+
+type NavPieceProps = {
+ label: string;
+ isActive: boolean;
+ onClick: () => void;
+ isLastIndex: boolean;
+};
+const NavPiece = ({
+ label,
+ isActive,
+ onClick,
+ isLastIndex = false,
+}: NavPieceProps) => {
+ return (
+
+ );
+};
+export default NavPiece;
diff --git a/src/components/CreateAuctionTabs/SelectTab.tsx b/src/components/CreateAuctionTabs/SelectTab.tsx
new file mode 100644
index 0000000..7a0d3a4
--- /dev/null
+++ b/src/components/CreateAuctionTabs/SelectTab.tsx
@@ -0,0 +1,52 @@
+import { useExtendedAssets } from 'src/hooks/api/assets';
+import { getUrlParams } from 'src/utils/getUrlParams';
+import { DropDown } from '../DropDown/DropDown';
+import { AssetExtended } from '@meshsdk/core';
+import { useWallet } from '@meshsdk/react';
+import { WalletApp } from 'hydra-auction-offchain';
+import { useMemo } from 'react';
+import { removeSpecialCharsAssetName } from 'src/utils/formatting';
+
+const SelectTab = () => {
+ const { name: walletApp } = useWallet();
+ const { data: assets, isError } = useExtendedAssets(walletApp as WalletApp);
+
+ const urlParams = getUrlParams();
+ const assetUnitToList = urlParams.get('assetUnit');
+ const assetIndex = useMemo(
+ () => assets?.findIndex((asset) => asset.unit === assetUnitToList),
+ [assetUnitToList, assets]
+ );
+
+ if (isError) {
+ return null;
+ }
+
+ const onChange = (index: number) => {
+ // redirect to the current page, but pass the new assetUnit
+ const asset: AssetExtended | undefined = assets?.[index];
+ window.location.href = `/create-auction?assetUnit=${asset?.unit}&assetName=${asset?.assetName}`;
+ };
+
+ return (
+
+ {activeTab !== ANNOUNCE_AUCTION_TABS.length - 1 && (
+
+ )}
+ {/* */}
+
+
+ {
+ return {
+ label: removeSpecialCharsAssetName(asset.assetName),
+ accessor: asset.unit || '',
+ };
+ })}
+ title={'Select NFT'}
+ defaultIndex={assetIndex || 0}
+ onChange={onChange}
+ className="mt-4"
+ />
+
+ );
+};
+export default SelectTab;
diff --git a/src/components/CustomLink/CustomLink.tsx b/src/components/CustomLink/CustomLink.tsx
new file mode 100644
index 0000000..1e24090
--- /dev/null
+++ b/src/components/CustomLink/CustomLink.tsx
@@ -0,0 +1,14 @@
+import { Link } from 'react-router-dom';
+
+type CustomLinkProps = {
+ href: string;
+ label: string;
+};
+
+export default function CustomLink({ href, label }: CustomLinkProps) {
+ return (
+
+ {label}
+
+ );
+}
diff --git a/src/components/CustomWallet/CustomWallet.tsx b/src/components/CustomWallet/CustomWallet.tsx
new file mode 100644
index 0000000..ea0bad0
--- /dev/null
+++ b/src/components/CustomWallet/CustomWallet.tsx
@@ -0,0 +1,41 @@
+import { CardanoWallet, useWallet } from '@meshsdk/react';
+import { useEffect } from 'react';
+import { setLocalStorageItem } from 'src/utils/localStorage';
+
+type CustomWalletProps = {
+ isDark: boolean;
+};
+
+export default function CustomWallet(
+ { isDark }: CustomWalletProps = { isDark: false }
+) {
+ const { connect, name: walletName, connected, wallet } = useWallet();
+
+ useEffect(() => {
+ const lastConnectedWallet = localStorage.getItem('lastConnectedWallet');
+
+ async function connectWallet() {
+ if (lastConnectedWallet && !connected) {
+ try {
+ await connect(JSON.parse(lastConnectedWallet).name);
+ } catch (err) {
+ console.log(err);
+ }
+ }
+ }
+ connectWallet();
+ }, []);
+
+ const storeConnection = () => {
+ setLocalStorageItem('lastConnectedWallet', {
+ name: walletName,
+ timestamp: Date.now(),
+ });
+ };
+
+ return (
+ List most recently minted
+ Or choose
+
+ NFT
+
+
+ );
+}
diff --git a/src/components/DropDown/DropDown.tsx b/src/components/DropDown/DropDown.tsx
new file mode 100644
index 0000000..7bc8e53
--- /dev/null
+++ b/src/components/DropDown/DropDown.tsx
@@ -0,0 +1,78 @@
+import { useEffect, useMemo, useState } from 'react';
+import { OutsideAlerter } from '../OutsideAlerter/OutsideAlerter';
+import clsx from 'clsx';
+
+type DropDownItem = {
+ label: string;
+ accessor: string;
+};
+
+type DropDownProps = {
+ options?: DropDownItem[];
+ defaultIndex?: number;
+ title: string;
+ onChange?: (index: number) => void;
+ className?: string;
+};
+
+export const DropDown = ({
+ options,
+ title,
+ defaultIndex,
+ onChange,
+ className,
+}: DropDownProps) => {
+ const [activeIndex, setActiveIndex] = useState(defaultIndex ?? 0);
+ const [show, setShow] = useState(false);
+
+ useEffect(() => {
+ setActiveIndex(defaultIndex ?? 0);
+ }, [defaultIndex]);
+
+ const activeTitle = useMemo(
+ () => options?.at(activeIndex)?.label ?? title,
+ [activeIndex, options, title]
+ );
+
+ const handleClick = () => {
+ setShow(!show);
+ };
+
+ const handleItemClick = (index: number) => {
+ setActiveIndex(index);
+ setShow(false);
+ onChange?.(index);
+ };
+
+ return (
+
+
+
+ {activeTitle}
+
+ {show && (
+
+ {options?.length &&
+ options.map((option, index) => {
+ return (
+
+ )}
+ handleItemClick(index)}
+ >
+ {option.label}
+
+ );
+ })}
+
+
+
+ );
+};
+
+export default function EnterAuction({ auction }: EnterAuctionFormProps) {
+ const [show, setShow] = useState(false);
+
+ return (
+
+
+ {show &&
+ );
+}
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..aa5c300
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,49 @@
+import { StringInput } from '../Inputs/StringInput';
+
+export default function Footer() {
+ return (
+
+ );
+}
diff --git a/src/components/ImageWrapper/ImageWrapper.tsx b/src/components/ImageWrapper/ImageWrapper.tsx
new file mode 100644
index 0000000..6bd9337
--- /dev/null
+++ b/src/components/ImageWrapper/ImageWrapper.tsx
@@ -0,0 +1,24 @@
+type ImageWrapperProps = React.HTMLProps
+
+ );
+};
diff --git a/src/components/Inputs/NumberInput.tsx b/src/components/Inputs/NumberInput.tsx
new file mode 100644
index 0000000..f45b5fa
--- /dev/null
+++ b/src/components/Inputs/NumberInput.tsx
@@ -0,0 +1,36 @@
+type NumberInputProps = {
+ label: string;
+ inputId: string;
+ placeholder?: string;
+ onChange?: (inputId: string, value: number) => void;
+ value?: number | string;
+ disabled?: boolean;
+};
+
+// TODO: Add currency symbol
+export const NumberInput = ({
+ label,
+ inputId,
+ onChange,
+ placeholder,
+ value,
+ disabled,
+}: NumberInputProps) => {
+ return (
+
+
+
+
+ {
+ const formattedDate = formatDate(new Date(e.target.value));
+ onChange &&
+ onChange(inputId, new Date(formattedDate).getTime().toString());
+ !inputValue && setValue(formattedDate);
+ }}
+ id={inputId}
+ className="border-none p-1 m-0 mb-1 bg-gray-100"
+ type="datetime-local"
+ placeholder={placeholder}
+ value={inputValue ? inputValue : value}
+ />
+
+
+ );
+};
diff --git a/src/components/Inputs/StringInput.tsx b/src/components/Inputs/StringInput.tsx
new file mode 100644
index 0000000..a22277a
--- /dev/null
+++ b/src/components/Inputs/StringInput.tsx
@@ -0,0 +1,36 @@
+import clsx from 'clsx';
+
+type StringInputProps = {
+ label: string;
+ inputId: string;
+ placeholder?: string;
+ onChange?: (inputId: string, value: string) => void;
+ className?: string;
+ inputClassName?: string;
+};
+export const StringInput = ({
+ label,
+ inputId,
+ onChange,
+ placeholder,
+ className,
+ inputClassName,
+}: StringInputProps) => {
+ return (
+
+
+
+
+ onChange && onChange(inputId, Number(e.target.value))}
+ id={inputId}
+ className="border-none p-1 m-0 mb-1 bg-gray-100"
+ placeholder={placeholder ? placeholder : ''}
+ type="number"
+ value={value}
+ />
+
+
+ );
+};
diff --git a/src/components/IpfsImage/IpfsImage.tsx b/src/components/IpfsImage/IpfsImage.tsx
new file mode 100644
index 0000000..f3c054c
--- /dev/null
+++ b/src/components/IpfsImage/IpfsImage.tsx
@@ -0,0 +1,26 @@
+import ImageWrapper from '../ImageWrapper/ImageWrapper';
+import { useAssetMetadata } from 'src/hooks/api/assets';
+
+type IpfsImageProps = {
+ small?: boolean;
+ className?: string;
+ assetUnit: string;
+};
+
+export default function IpfsImage({
+ small = false,
+ className,
+ assetUnit,
+}: IpfsImageProps) {
+ const { data: assetMetadata, isLoading } = useAssetMetadata(assetUnit);
+ if (isLoading) return
+
+
+ onChange && onChange(inputId, e.target.value)}
+ id={inputId}
+ className={clsx(
+ 'border-none px-1 m-0 focus-visible:ring-0 focus-visible:outline-none',
+ inputClassName
+ )}
+ placeholder={placeholder ? placeholder : ''}
+ type="text"
+ />
+ Loading ...
;
+
+ return (
+ {props.children}
;
+};
diff --git a/src/components/PlaceBid/PlaceBid.tsx b/src/components/PlaceBid/PlaceBid.tsx
new file mode 100644
index 0000000..2092fdf
--- /dev/null
+++ b/src/components/PlaceBid/PlaceBid.tsx
@@ -0,0 +1,73 @@
+import React, { useRef } from 'react';
+import { PlaceBidFormT } from 'src/schemas/placeBidFormSchema';
+
+import { NumberInput } from '../Inputs/NumberInput';
+import { usePlaceBid } from '../../hooks/api/placeBid';
+import { AuctionInfo } from 'hydra-auction-offchain';
+import { WalletApp } from 'hydra-auction-offchain';
+
+type PlaceBidFormProps = {
+ auctionInfo: AuctionInfo;
+ sellerSignature: string;
+ standingBid: string;
+ walletApp: WalletApp;
+};
+
+export const PlaceBidForm = ({
+ auctionInfo,
+ sellerSignature,
+ standingBid,
+ walletApp,
+}: PlaceBidFormProps) => {
+ console.log({ sellerSignature });
+ const { mutate: placeBidMutation, isPending: isPlaceBidPending } =
+ usePlaceBid(auctionInfo, sellerSignature, walletApp);
+
+ const placeBidFormData = useRef
+
+ ) : (
+ {label}
+
+
+ );
+};
+
+export default function AuctionStateRemaining({
+ biddingEnd,
+ biddingStart,
+ purchaseDeadline,
+ cleanup,
+ size = 'small',
+}: AuctionStateRemainingProps) {
+ const purchaseDeadlineDate = Number(purchaseDeadline);
+ const biddingStartDate = Number(biddingStart);
+ const biddingEndDate = Number(biddingEnd);
+ const cleanupDate = Number(cleanup);
+ const [now, setNowTime] = useState(Date.now());
+
+ useEffect(() => {
+ const timerInterval = setInterval(() => {
+ setNowTime(Date.now());
+ }, 1000);
+
+ return () => clearInterval(timerInterval);
+ }, []);
+
+ if (now > cleanupDate) {
+ return (
+ {label}
+
+ Expired
+
+ );
+ } else if (now > purchaseDeadlineDate) {
+ return (
+
+
+ );
+};
+// TODO: FIX when a state changes, it just shows expired and the last state it needs to update the text and show new countdown
+export const TimeRemaining = ({
+ endDate,
+ size = 'small',
+}: {
+ endDate: number;
+ size?: string;
+}) => {
+ const [timeRemaining, setTimeRemaining] = useState(calculateTimeRemaining());
+
+ function calculateTimeRemaining() {
+ const currentTime = Date.now();
+ const timeDiff = endDate - currentTime;
+ const expired = timeDiff < 0;
+
+ const secsInMin = 60;
+ const secsInHour = secsInMin * 60;
+ const secsInDay = secsInHour * 24;
+
+ const totalSeconds = Math.floor(timeDiff / 1000);
+ const days = Math.floor(totalSeconds / secsInDay);
+ const hours = Math.floor((totalSeconds % secsInDay) / secsInHour);
+ const minutes = Math.floor((totalSeconds % secsInHour) / secsInMin);
+ const seconds = totalSeconds % secsInMin;
+
+ return { days, hours, minutes, seconds, expired };
+ }
+
+ useEffect(() => {
+ const timerInterval = setInterval(() => {
+ setTimeRemaining(calculateTimeRemaining());
+ }, 1000);
+
+ return () => clearInterval(timerInterval);
+ }, [endDate]);
+
+ if (size === 'large') {
+ if (timeRemaining.expired)
+ return
+ {value}
+
+ {label}
+ -
;
+ return timeRemaining.hours > 0 ? (
+
+
+ ) : (
+
+
+ );
+ } else {
+ if (timeRemaining.expired) return -
;
+ return timeRemaining.hours > 0 ? (
+
+
+ ) : (
+
+
+ );
+ }
+};
diff --git a/src/components/WalletNfts/WalletNfts.tsx b/src/components/WalletNfts/WalletNfts.tsx
new file mode 100644
index 0000000..d14c5ef
--- /dev/null
+++ b/src/components/WalletNfts/WalletNfts.tsx
@@ -0,0 +1,54 @@
+import { useExtendedAssets } from 'src/hooks/api/assets';
+import IpfsImage from '../IpfsImage/IpfsImage';
+import { useWallet } from '@meshsdk/react';
+import { WalletApp } from 'hydra-auction-offchain';
+import { removeSpecialCharsAssetName } from 'src/utils/formatting';
+
+type WalletNftCardProps = {
+ assetImageSrc?: string;
+ assetName: string;
+ assetUnit: string;
+};
+
+// TODO: combine WalletNftCard and AuctionCard
+const WalletNftCard = ({ assetName, assetUnit }: WalletNftCardProps) => {
+ return (
+
+
+
+ {assetName}
+
+ );
+};
+
+export default function WalletNfts() {
+ const { name: walletApp } = useWallet();
+
+ const { data: assets, isError } = useExtendedAssets(walletApp as WalletApp);
+ console.log({ walletApp, assets, isError });
+
+ if (isError) return Error getting assets...
;
+ return assets && assets?.length > 0 ? (
+ -
+ {assets?.map((asset, index) => (
+
-
+
+
+ ))}
+
+ No NFTs - try minting one to list an auction
+
+ );
+}
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
new file mode 100644
index 0000000..056f1d8
--- /dev/null
+++ b/src/components/layout.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function Layout({ children }: React.PropsWithChildren) {
+ return (
+ {children}
+ );
+}
diff --git a/src/contexts/WebSocketContext.ts b/src/contexts/WebSocketContext.ts
new file mode 100644
index 0000000..f037454
--- /dev/null
+++ b/src/contexts/WebSocketContext.ts
@@ -0,0 +1,24 @@
+import { createContext } from 'vm';
+
+export enum WebSocketReadyState {
+ CONNECTING = 0,
+ OPEN = 1,
+ CLOSING = 2,
+ CLOSED = 3,
+}
+
+type WebSocketContextType = {
+ wsUrl: string;
+ wss: WebSocket | null;
+ readyState: WebSocketReadyState;
+ setWsUrl: (url: string) => void;
+};
+
+export const WEBSOCKET_DEFAULT_STATE: WebSocketContextType = {
+ wsUrl: '',
+ wss: null,
+ readyState: WebSocketReadyState.CLOSED,
+ setWsUrl: () => {},
+};
+
+export const WebSocketContext = createContext(WEBSOCKET_DEFAULT_STATE);
diff --git a/src/hooks/api/auctions.ts b/src/hooks/api/auctions.ts
index d21db1e..0b92299 100644
--- a/src/hooks/api/auctions.ts
+++ b/src/hooks/api/auctions.ts
@@ -1,4 +1,5 @@
import {
+ AuctionFilters,
AuctionInfo,
DiscoverSellerSigContractParams,
discoverSellerSignature,
@@ -19,14 +20,15 @@ export const QUERY_AUCTIONS_QUERY_KEY = 'query-auctions';
export const AUCTIONS_ENTERED_QUERY_KEY = 'auctions-entered';
export const AUCTIONS_AUTHORIZED_QUERY_KEY = 'auctions-authorized';
-export const useActiveAuctions = (walletApp?: WalletApp) => {
+export const useActiveAuctions = (
+ walletApp?: WalletApp,
+ auctionFilters?: AuctionFilters
+) => {
const activeAuctions = useQuery({
queryKey: [QUERY_AUCTIONS_QUERY_KEY, walletApp],
queryFn: async () => {
if (walletApp) {
- return await queryAuctions(walletApp);
- } else {
- return [];
+ return await queryAuctions(walletApp, auctionFilters);
}
},
refetchInterval: 10000,
diff --git a/src/hooks/websocket.ts b/src/hooks/websocket.ts
new file mode 100644
index 0000000..d333d68
--- /dev/null
+++ b/src/hooks/websocket.ts
@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { WebSocketContext } from 'src/providers/WebSocketProvider';
+
+export const useSocket = () => {
+ const socket = useContext(WebSocketContext);
+
+ return socket;
+};
diff --git a/src/providers/WebSocketProvider.tsx b/src/providers/WebSocketProvider.tsx
new file mode 100644
index 0000000..a0819c2
--- /dev/null
+++ b/src/providers/WebSocketProvider.tsx
@@ -0,0 +1,72 @@
+import { PropsWithChildren, useState, useEffect, useRef } from 'react';
+import {
+ WEBSOCKET_DEFAULT_STATE,
+ WebSocketContext,
+ WebSocketReadyState,
+} from 'src/contexts/WebSocketContext';
+
+// for now we will use one wss and re create it on every url change
+// if we want to keep multiple open we could use a map or object of wss and identify them by the auctionInfo.delegateInfo.wsServers
+// would need a max number of wss to keep open
+// if the requested one is not found we create new one and discard the oldest
+
+export const WebSocketProvider = ({ children }: PropsWithChildren) => {
+ const ws = useRef