ultimate-dominion · ECWireless · Aug 23, 2024 · Aug 6, 2024 · Aug 6, 2024 · Aug 7, 2024
diff --git a/packages/client/src/Routes.tsx b/packages/client/src/Routes.tsx
@@ -5,6 +5,8 @@ import { singletonEntity } from '@latticexyz/store-sync/recs';
 import { Route, Routes, useLocation } from 'react-router-dom';
 
 import { useMUD } from './contexts/MUDContext';
+import { AuctionHouse } from './pages/AuctionHouse';
+import { AuctionItem } from './pages/AuctionItem';
 import { CharacterPage } from './pages/Character';
 import { CharacterCreation } from './pages/CharacterCreation';
 import { GameBoard } from './pages/GameBoard';
@@ -15,6 +17,8 @@ export const HOME_PATH = '/';
 export const CHARACTER_CREATION_PATH = '/character-creation';
 export const GAME_BOARD_PATH = '/game-board';
 export const LEADERBOARD_PATH = '/leaderboard';
+export const AUCTION_HOUSE_PATH = '/auction-house';
+export const ITEM_PATH = AUCTION_HOUSE_PATH + '/items/';
 
 const AppRoutes: React.FC = () => {
   const { pathname } = useLocation();
@@ -47,6 +51,8 @@ const AppRoutes: React.FC = () => {
       <Route path={GAME_BOARD_PATH} element={<GameBoard />} />
       <Route path="/characters/:id" element={<CharacterPage />} />
       <Route path={LEADERBOARD_PATH} element={<Leaderboard />} />
+      <Route path={AUCTION_HOUSE_PATH} element={<AuctionHouse />} />
+      <Route path={ITEM_PATH + ':itemId'} element={<AuctionItem />} />
     </Routes>
   );
 };

diff --git a/packages/client/src/components/AuctionAllowance.tsx b/packages/client/src/components/AuctionAllowance.tsx
@@ -0,0 +1,245 @@
+import {
+  Button,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  HStack,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Skeleton,
+  Switch,
+  Text,
+  VStack,
+} from '@chakra-ui/react';
+import { useComponentValue } from '@latticexyz/react';
+import { singletonEntity } from '@latticexyz/store-sync/recs';
+import { useCallback, useEffect, useState } from 'react';
+import { Address, erc20Abi, parseEther } from 'viem';
+import { useAccount, useBalance, useWalletClient } from 'wagmi';
+
+import { useMUD } from '../contexts/MUDContext';
+import { useToast } from '../hooks/useToast';
+import { ERC_1155ABI } from '../utils/constants';
+import { ConnectWalletButton } from './ConnectWalletButton';
+export const AuctionAllowance = ({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+}): JSX.Element => {
+  const { renderSuccess, renderError } = useToast();
+  const { data: externalWalletClient } = useWalletClient();
+  const { isConnected, address } = useAccount();
+  const {
+    network: { walletClient, worldContract, publicClient },
+    components: { UltimateDominionConfig },
+  } = useMUD();
+  useBalance({
+    address: externalWalletClient?.account.address,
+  });
+  const { goldToken } = useComponentValue(
+    UltimateDominionConfig,
+    singletonEntity,
+  ) ?? { goldToken: null };
+
+  const { items: itemsContract } = useComponentValue(
+    UltimateDominionConfig,
+    singletonEntity,
+  ) ?? { items: null };
+
+  const [goldAllowance, setGoldAllowance] = useState<string>('100');
+  const [isApprovingGold, setIsApprovingGold] = useState(false);
+  const [goldErrorMessage, setGoldErrorMessage] = useState<string | null>(null);
+
+  const [itemsApprovedInitial, setItemsApprovedInitial] = useState<
+    boolean | null
+  >(null);
+  const [itemAllowed, setItemAllowed] = useState(false);
+  const [isApprovingItems, setIsApprovingItems] = useState(false);
+
+  // Reset errorMessage state when any of the form fields change
+  useEffect(() => {
+    setGoldErrorMessage(null);
+  }, [goldAllowance]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setGoldAllowance('100');
+      if (externalWalletClient && itemsApprovedInitial == null) {
+        (async function () {
+          const auction = await worldContract.read.UD__auctionHouseAddress();
+          const t = await publicClient.readContract({
+            address: itemsContract as Address,
+            abi: ERC_1155ABI,
+            functionName: 'isApprovedForAll',
+            args: [externalWalletClient.account.address, auction as Address],
+          });
+          setItemAllowed(t as boolean);
+          setItemsApprovedInitial(true);
+        })();
+      }
+    }
+  }, [
+    externalWalletClient,
+    isOpen,
+    itemsApprovedInitial,
+    itemsContract,
+    publicClient,
+    walletClient.account,
+    worldContract.read,
+  ]);
+
+  const onGoldAllowance = useCallback(async () => {
+    try {
+      if (!externalWalletClient) {
+        throw new Error('No external wallet client found.');
+      }
+
+      setIsApprovingGold(true);
+      if (!goldAllowance || parseEther(goldAllowance) <= 0) {
+        setGoldErrorMessage('Amount must be greater than 0.');
+        return;
+      }
+
+      const auction = await worldContract.read.UD__auctionHouseAddress();
+
+      const { request } = await publicClient.simulateContract({
+        address: goldToken as Address,
+        abi: erc20Abi,
+        functionName: 'approve',
+        args: [auction, parseEther(goldAllowance)],
+      });
+      await externalWalletClient.writeContract(request);
+
+      setGoldAllowance(goldAllowance);
+      renderSuccess('Gold allowance successfully set!');
+    } catch (e) {
+      renderError((e as Error)?.message ?? 'Error setting gold allowance.', e);
+    } finally {
+      setIsApprovingGold(false);
+    }
+  }, [
+    externalWalletClient,
+    goldAllowance,
+    goldToken,
+    publicClient,
+    renderError,
+    renderSuccess,
+    worldContract.read,
+  ]);
+  const onItemsApproved = useCallback(async () => {
+    try {
+      if (!externalWalletClient) {
+        throw new Error('No external wallet client found.');
+      }
+
+      setIsApprovingItems(true);
+      const auction = await worldContract.read.UD__auctionHouseAddress();
+
+      const { request } = await publicClient.simulateContract({
+        address: itemsContract as Address,
+        abi: ERC_1155ABI,
+        functionName: 'setApprovalForAll',
+        args: [auction as Address, !itemAllowed],
+      });
+      await externalWalletClient.writeContract(request);
+      setItemAllowed(!itemAllowed);
+      setIsApprovingItems(false);
+      renderSuccess('Item allowance successfully set!');
+    } catch (e) {
+      renderError((e as Error)?.message ?? 'Error setting item allowance.', e);
+    } finally {
+      setIsApprovingItems(false);
+    }
+  }, [
+    externalWalletClient,
+    itemAllowed,
+    itemsContract,
+    publicClient,
+    renderError,
+    renderSuccess,
+    worldContract.read,
+  ]);
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          {isConnected ? 'Wallet Details' : 'Connect Wallet'}
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          {address && externalWalletClient && isConnected ? (
+            <VStack p={4} spacing={10}>
+              <VStack alignItems="start" spacing={4}>
+                <HStack>
+                  <FormControl isInvalid={!!goldErrorMessage}>
+                    <FormLabel fontSize="xs">
+                      Set Auction House gold allowance
+                    </FormLabel>
+                    {!!goldErrorMessage && (
+                      <FormHelperText color="red" fontSize="xs" mb={2}>
+                        {goldErrorMessage}
+                      </FormHelperText>
+                    )}
+                    <Input
+                      isDisabled={isApprovingGold}
+                      onChange={e => setGoldAllowance(e.target.value)}
+                      placeholder="Amount"
+                      type="number"
+                      value={goldAllowance}
+                    />
+                  </FormControl>
+                  <Button
+                    alignSelf="end"
+                    isLoading={isApprovingGold}
+                    onClick={onGoldAllowance}
+                    size="sm"
+                  >
+                    Allow
+                  </Button>
+                </HStack>
+                <HStack>
+                  <FormControl>
+                    <FormLabel fontSize="xs">
+                      Set Auction House item approval
+                    </FormLabel>
+                    {!itemsApprovedInitial ? (
+                      <Skeleton>
+                        <Switch />
+                      </Skeleton>
+                    ) : (
+                      <Switch
+                        isDisabled={isApprovingItems}
+                        onChange={onItemsApproved}
+                        isChecked={itemAllowed}
+                      ></Switch>
+                    )}
+                  </FormControl>
+                </HStack>
+              </VStack>
+            </VStack>
+          ) : (
+            <VStack p={4} spacing={10}>
+              <Text textAlign="center">Connect your wallet to play.</Text>
+              <ConnectWalletButton />
+            </VStack>
+          )}
+        </ModalBody>
+        <ModalFooter>
+          <Button onClick={onClose} size="sm">
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
diff --git a/packages/client/src/components/AuctionRow.tsx b/packages/client/src/components/AuctionRow.tsx
@@ -0,0 +1,123 @@
+import {
+  Avatar,
+  Box,
+  Button,
+  Center,
+  Flex,
+  HStack,
+  Text,
+  VStack,
+} from '@chakra-ui/react';
+import { FaHatWizard } from 'react-icons/fa';
+import { GiAxeSword, GiRogue } from 'react-icons/gi';
+import { IoIosArrowForward } from 'react-icons/io';
+import { useNavigate } from 'react-router-dom';
+
+import { ITEM_PATH } from '../Routes';
+export const AuctionRow = ({
+  name,
+  agiModifier,
+  hitPointModifier,
+  intModifier,
+  minLevel,
+  strModifier,
+  emoji,
+  tokenId,
+  floor,
+  itemClass,
+}: {
+  name: string;
+  image: string;
+  description: string;
+  agiModifier: string;
+  hitPointModifier: string;
+  intModifier: string;
+  minLevel: string;
+  strModifier: string;
+  emoji: string;
+  tokenId: string;
+  floor: string;
+  itemClass: string;
+}): JSX.Element => {
+  const navigate = useNavigate();
+
+  return (
+    <Flex
+      border="2px solid"
+      borderColor="grey400"
+      borderRadius={2}
+      justify="space-between"
+      onClick={() => navigate(`${ITEM_PATH}${tokenId}`)}
+      w="100%"
+      _hover={{
+        cursor: 'pointer',
+        button: {
+          bgColor: 'grey300',
+        },
+      }}
+      _active={{
+        button: {
+          bgColor: 'grey400',
+        },
+      }}
+    >
+      <Flex>
+        <Avatar
+          borderRadius={0}
+          size="lg"
+          name={' '}
+          backgroundColor={'grey300'}
+        >
+          {emoji}
+        </Avatar>
+        <VStack align="start" justify="center" ml={4}>
+          <HStack w="100%">
+            <Text size={{ base: '2xs', lg: 'sm' }}>{name}</Text>
+          </HStack>
+          <Text size={{ base: '3xs', sm: '2xs', lg: 'sm' }}>
+            HP {hitPointModifier} • STR {strModifier} • AGI {agiModifier} • INT{' '}
+            {intModifier}
+          </Text>
+        </VStack>
+      </Flex>
+      <HStack>
+        <HStack w={{ base: '130px', sm: '215px', md: '300px', lg: '450px' }}>
+          <Text
+            fontWeight={500}
+            size={{ base: 'xs', lg: 'md' }}
+            textAlign="center"
+            w="100%"
+          >
+            <Center>
+              {itemClass == '0' && <GiAxeSword size={15} />}
+              {itemClass == '1' && <GiRogue size={15} />}
+              {itemClass == '2' && <FaHatWizard size={15} />}
+            </Center>
+          </Text>
+          <Text
+            fontWeight={500}
+            size={{ base: 'xs', lg: 'md' }}
+            textAlign="center"
+            w="100%"
+          >
+            {Number(minLevel).toLocaleString()}
+          </Text>
+          <Text
+            display={{ base: 'none', lg: 'block' }}
+            fontWeight={500}
+            size={{ base: 'xs', lg: 'md' }}
+            textAlign="center"
+            w="100%"
+          >
+            {Number(floor) == 0 ? 'N/A' : Number(floor).toLocaleString()}
+          </Text>
+        </HStack>
+        <Box display={{ base: 'none', md: 'block' }} w="50px">
+          <Button p={3} variant="ghost">
+            <IoIosArrowForward />
+          </Button>
+        </Box>
+      </HStack>
+    </Flex>
+  );
+};