From 318d07d2ddc4e840567f990b74744363bb689d6a Mon Sep 17 00:00:00 2001 From: ECWireless Date: Tue, 3 Sep 2024 17:07:40 -0600 Subject: [PATCH 1/7] Remove allowance stuff from WalletDetailsModal --- .../src/components/WalletDetailsModal.tsx | 174 +----------------- 1 file changed, 4 insertions(+), 170 deletions(-) diff --git a/packages/client/src/components/WalletDetailsModal.tsx b/packages/client/src/components/WalletDetailsModal.tsx index 9f476bb37..37fb2e53e 100644 --- a/packages/client/src/components/WalletDetailsModal.tsx +++ b/packages/client/src/components/WalletDetailsModal.tsx @@ -13,20 +13,15 @@ import { 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, formatEther, parseEther } from 'viem'; +import { formatEther, parseEther } from 'viem'; import { useAccount, useBalance, useWalletClient } from 'wagmi'; import { useMUD } from '../contexts/MUDContext'; import { useToast } from '../hooks/useToast'; -import { ERC_1155_ABI } from '../utils/constants'; import { shortenAddress } from '../utils/helpers'; import { ConnectWalletButton } from './ConnectWalletButton'; import { CopyText } from './CopyText'; @@ -43,21 +38,11 @@ export const WalletDetailsModal = ({ const { burnerAddress, burnerBalance, - network: { walletClient, worldContract, publicClient }, - components: { UltimateDominionConfig }, + network: { walletClient }, } = useMUD(); const { data: externalWalletBalance, refetch } = useBalance({ address: externalWalletClient?.account.address, }); - const { goldToken } = useComponentValue( - UltimateDominionConfig, - singletonEntity, - ) ?? { goldToken: null }; - - const { items: itemsContract } = useComponentValue( - UltimateDominionConfig, - singletonEntity, - ) ?? { items: null }; const [depositAmount, setDepositAmount] = useState('0'); const [isDepositing, setIsDepositing] = useState(false); @@ -71,22 +56,11 @@ export const WalletDetailsModal = ({ string | null >(null); - const [goldAllowance, setGoldAllowance] = useState('100'); - const [isApprovingGold, setIsApprovingGold] = useState(false); - const [goldErrorMessage, setGoldErrorMessage] = useState(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(() => { setDepositErrorMessage(null); setWithdrawErrorMessage(null); - setGoldErrorMessage(null); - }, [depositAmount, withdrawAmount, goldAllowance]); + }, [depositAmount, withdrawAmount]); useEffect(() => { if (isOpen) { @@ -94,32 +68,8 @@ export const WalletDetailsModal = ({ setWithdrawAmount('0'); refetch(); - - 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_1155_ABI, - functionName: 'isApprovedForAll', - args: [externalWalletClient.account.address, auction as Address], - }); - setItemAllowed(t as boolean); - setItemsApprovedInitial(true); - })(); - } } - }, [ - externalWalletClient, - isOpen, - itemsApprovedInitial, - itemsContract, - publicClient, - refetch, - walletClient.account, - worldContract.read, - ]); + }, [isOpen, refetch]); const onDeposit = useCallback(async () => { try { @@ -196,77 +146,6 @@ export const WalletDetailsModal = ({ walletClient, withdrawAmount, ]); - 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_1155_ABI, - 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 ( @@ -364,51 +243,6 @@ export const WalletDetailsModal = ({ Withdraw - - - - Set Auction House gold allowance - - {!!goldErrorMessage && ( - - {goldErrorMessage} - - )} - setGoldAllowance(e.target.value)} - placeholder="Amount" - type="number" - value={goldAllowance} - /> - - - - - - - Set Auction House item approval - - {!itemsApprovedInitial ? ( - - - - ) : ( - - )} - - ) : ( From bf3bea18492eae5345647fcfb50c3e89358837e3 Mon Sep 17 00:00:00 2001 From: ECWireless Date: Tue, 3 Sep 2024 17:10:58 -0600 Subject: [PATCH 2/7] Only prompt top-off on mount if not garnet chain --- packages/client/src/App.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx index e13a570f3..af8e5873d 100644 --- a/packages/client/src/App.tsx +++ b/packages/client/src/App.tsx @@ -1,4 +1,5 @@ import { Grid, useBreakpointValue } from '@chakra-ui/react'; +import { garnet } from '@latticexyz/common/chains'; import { useEffect } from 'react'; import { BrowserRouter as Router, useLocation } from 'react-router-dom'; @@ -9,6 +10,7 @@ import { BattleProvider } from './contexts/BattleContext'; import { MapProvider } from './contexts/MapContext'; import { MovementProvider } from './contexts/MovementContext'; import { useMUD } from './contexts/MUDContext'; +import { DEFAULT_CHAIN_ID } from './lib/web3'; import AppRoutes, { HOME_PATH } from './Routes'; export const App = (): JSX.Element => { @@ -42,7 +44,12 @@ const AppInner = (): JSX.Element => { useEffect(() => { if (pathname === HOME_PATH) return; - if (burnerBalanceFetched && burnerBalance === '0' && isSynced) { + if ( + burnerBalanceFetched && + burnerBalance === '0' && + isSynced && + DEFAULT_CHAIN_ID !== garnet.id + ) { onOpenWalletDetailsModal(); } }, [ From 7dd48f9d769db4725caec8d5ad4fb763216f5dc8 Mon Sep 17 00:00:00 2001 From: ECWireless Date: Tue, 3 Sep 2024 17:30:45 -0600 Subject: [PATCH 3/7] Add transition animation to progress bar --- .../client/src/components/ActionsPanel.tsx | 29 +++++++++---------- packages/client/src/utils/theme.ts | 3 ++ 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/packages/client/src/components/ActionsPanel.tsx b/packages/client/src/components/ActionsPanel.tsx index e29e85eef..1dc840e5f 100644 --- a/packages/client/src/components/ActionsPanel.tsx +++ b/packages/client/src/components/ActionsPanel.tsx @@ -156,6 +156,20 @@ export const ActionsPanel = (): JSX.Element => { return ( + {currentBattle && equippedSpellsAndWeapons.length === 0 && ( + + You have no equipped items. In order to attack, you must go to your{' '} + + character page + {' '} + and equip at least 1 item. + + )} {!battleOver && currentBattle && equippedSpellsAndWeapons.length !== 0 && @@ -200,21 +214,6 @@ export const ActionsPanel = (): JSX.Element => { )} - {equippedSpellsAndWeapons.length === 0 && ( - - You have no equipped items. In order to attack, you must go - to your{' '} - - character page - {' '} - and equip at least 1 item. - - )} )} diff --git a/packages/client/src/utils/theme.ts b/packages/client/src/utils/theme.ts index 94ce06fe7..83284918b 100644 --- a/packages/client/src/utils/theme.ts +++ b/packages/client/src/utils/theme.ts @@ -142,6 +142,9 @@ const Progress = { track: { borderRadius: 5, }, + filledTrack: { + transition: 'width 0.5s', + }, }, defaultProps: { variant: 'filling', From 608945c9538ee397298eaeac8cfcd16e7addebc1 Mon Sep 17 00:00:00 2001 From: ECWireless Date: Tue, 3 Sep 2024 18:29:48 -0600 Subject: [PATCH 4/7] Disable ability point + button if maxed out --- packages/client/src/components/LevelingPanel.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/client/src/components/LevelingPanel.tsx b/packages/client/src/components/LevelingPanel.tsx index 49074843d..27c4dcd44 100644 --- a/packages/client/src/components/LevelingPanel.tsx +++ b/packages/client/src/components/LevelingPanel.tsx @@ -244,6 +244,7 @@ export const LevelingPanel = ({ {canLevel && ( + {allItems.length}/{MAX_EQUIPPED_ITEMS} @@ -200,14 +216,7 @@ export const StatsPanel = (): JSX.Element => { w="100%" > {item.name} - + ))} {Array.from({ @@ -222,6 +231,7 @@ export const StatsPanel = (): JSX.Element => { > Empty Slot + + + Balance: {Number(burnerBalance).toFixed(5)} + From 1139aa81af82c757a13864886746dd3ba1960e17 Mon Sep 17 00:00:00 2001 From: ECWireless Date: Tue, 3 Sep 2024 20:31:31 -0600 Subject: [PATCH 7/7] Add links to get back to game board --- packages/client/src/components/Header.tsx | 14 ++++++++++++-- packages/client/src/pages/AuctionHouse.tsx | 15 +++++++++++++-- packages/client/src/pages/Character.tsx | 18 ++++++++++++++++-- packages/client/src/pages/Leaderboard.tsx | 15 +++++++++++++-- 4 files changed, 54 insertions(+), 8 deletions(-) diff --git a/packages/client/src/components/Header.tsx b/packages/client/src/components/Header.tsx index aaf516f3c..2a5f189cc 100644 --- a/packages/client/src/components/Header.tsx +++ b/packages/client/src/components/Header.tsx @@ -1,4 +1,12 @@ -import { Box, Button, Heading, HStack, Stack, Text } from '@chakra-ui/react'; +import { + Box, + Button, + Heading, + HStack, + Stack, + Text, + Tooltip, +} from '@chakra-ui/react'; import { useLocation, useNavigate } from 'react-router-dom'; import { useMUD } from '../contexts/MUDContext'; @@ -39,7 +47,9 @@ export const Header = ({ > Wallet Details - Balance: {Number(burnerBalance).toFixed(5)} + + Balance: {Number(burnerBalance).toFixed(5)} + { } return ( - + + { return ( + {character ? ( { } return ( - + +