-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Implement changing adventurer name #276
Changes from 4 commits
476b890
721165a
3dcca47
2da197f
aa9f001
9e77c32
985607e
8018d11
fb6abb2
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -1,17 +1,18 @@ | ||||||||||||||
import { useEffect, useState } from "react"; | ||||||||||||||
import Info from "@/app/components/adventurer/Info"; | ||||||||||||||
import { Button } from "@/app/components/buttons/Button"; | ||||||||||||||
import useAdventurerStore from "@/app/hooks/useAdventurerStore"; | ||||||||||||||
import useNetworkAccount from "@/app/hooks/useNetworkAccount"; | ||||||||||||||
import useTransactionCartStore from "@/app/hooks/useTransactionCartStore"; | ||||||||||||||
import { padAddress } from "@/app/lib/utils"; | ||||||||||||||
import { Adventurer } from "@/app/types"; | ||||||||||||||
import Info from "@/app/components/adventurer/Info"; | ||||||||||||||
import { useProvider } from "@starknet-react/core"; | ||||||||||||||
import { ChangeEvent, useEffect, useState } from "react"; | ||||||||||||||
import { | ||||||||||||||
AccountInterface, | ||||||||||||||
constants, | ||||||||||||||
Contract, | ||||||||||||||
validateAndParseAddress, | ||||||||||||||
constants, | ||||||||||||||
} from "starknet"; | ||||||||||||||
import useTransactionCartStore from "@/app/hooks/useTransactionCartStore"; | ||||||||||||||
import { useAccount, useProvider } from "@starknet-react/core"; | ||||||||||||||
import useAdventurerStore from "@/app/hooks/useAdventurerStore"; | ||||||||||||||
import { padAddress } from "@/app/lib/utils"; | ||||||||||||||
import { StarknetIdNavigator } from "starknetid.js"; | ||||||||||||||
import { CartridgeIcon, StarknetIdIcon } from "../icons/Icons"; | ||||||||||||||
|
||||||||||||||
|
@@ -25,15 +26,24 @@ export interface AdventurerListCardProps { | |||||||||||||
from: string, | ||||||||||||||
recipient: string | ||||||||||||||
) => Promise<void>; | ||||||||||||||
changeAdventurerName: ( | ||||||||||||||
account: AccountInterface, | ||||||||||||||
adventurerId: number, | ||||||||||||||
name: string, | ||||||||||||||
index: number | ||||||||||||||
) => Promise<void>; | ||||||||||||||
index: number; | ||||||||||||||
} | ||||||||||||||
|
||||||||||||||
export const AdventurerListCard = ({ | ||||||||||||||
adventurer, | ||||||||||||||
gameContract, | ||||||||||||||
handleSwitchAdventurer, | ||||||||||||||
transferAdventurer, | ||||||||||||||
changeAdventurerName, | ||||||||||||||
index, | ||||||||||||||
}: AdventurerListCardProps) => { | ||||||||||||||
const { account, address } = useAccount(); | ||||||||||||||
const { account, address } = useNetworkAccount(); | ||||||||||||||
const { provider } = useProvider(); | ||||||||||||||
const starknetIdNavigator = new StarknetIdNavigator( | ||||||||||||||
provider, | ||||||||||||||
|
@@ -55,6 +65,10 @@ export const AdventurerListCard = ({ | |||||||||||||
"send" | "addToCart" | null | ||||||||||||||
>(null); | ||||||||||||||
|
||||||||||||||
const [isEditOpen, setIsEditOpen] = useState(false); | ||||||||||||||
const [adventurerName, setAdventurerName] = useState(""); | ||||||||||||||
const [isMaxLength, setIsMaxLength] = useState(false); | ||||||||||||||
|
||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Initialize 'adventurerName' with current name for better user experience Currently, Apply this change: -const [adventurerName, setAdventurerName] = useState("");
+const [adventurerName, setAdventurerName] = useState(adventurer.name || ""); 📝 Committable suggestion
Suggested change
|
||||||||||||||
const setAdventurer = useAdventurerStore((state) => state.setAdventurer); | ||||||||||||||
|
||||||||||||||
useEffect(() => { | ||||||||||||||
|
@@ -144,6 +158,18 @@ export const AdventurerListCard = ({ | |||||||||||||
setIsTransferOpen(false); | ||||||||||||||
}; | ||||||||||||||
|
||||||||||||||
const handleNameChange = ( | ||||||||||||||
e: ChangeEvent<HTMLInputElement | HTMLSelectElement> | ||||||||||||||
) => { | ||||||||||||||
const value = e.target.value; | ||||||||||||||
setAdventurerName(value.slice(0, 31)); | ||||||||||||||
if (value.length >= 31) { | ||||||||||||||
setIsMaxLength(true); | ||||||||||||||
} else { | ||||||||||||||
setIsMaxLength(false); | ||||||||||||||
} | ||||||||||||||
}; | ||||||||||||||
|
||||||||||||||
Comment on lines
+167
to
+177
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Enhance reusability and maintainability of handleNameChange The
These changes will make the code more maintainable and flexible for future modifications. |
||||||||||||||
return ( | ||||||||||||||
<> | ||||||||||||||
{adventurer && ( | ||||||||||||||
|
@@ -163,10 +189,18 @@ export const AdventurerListCard = ({ | |||||||||||||
size={"lg"} | ||||||||||||||
variant={"token"} | ||||||||||||||
onClick={() => setIsTransferOpen(!isTransferOpen)} | ||||||||||||||
className={`w-1/2 ${isTransferOpen && "animate-pulse"}`} | ||||||||||||||
className={`w-1/4 ${isTransferOpen && "animate-pulse"}`} | ||||||||||||||
> | ||||||||||||||
Transfer | ||||||||||||||
</Button> | ||||||||||||||
<Button | ||||||||||||||
size={"lg"} | ||||||||||||||
variant={"token"} | ||||||||||||||
onClick={() => setIsEditOpen(!isEditOpen)} | ||||||||||||||
className="w-1/4" | ||||||||||||||
> | ||||||||||||||
Edit | ||||||||||||||
</Button> | ||||||||||||||
{isTransferOpen && ( | ||||||||||||||
<> | ||||||||||||||
<div className="absolute bottom-20 bg-terminal-black border border-terminal-green flex flex-col gap-2 items-center justify-center w-3/4 p-2"> | ||||||||||||||
|
@@ -278,9 +312,47 @@ export const AdventurerListCard = ({ | |||||||||||||
</div> | ||||||||||||||
</> | ||||||||||||||
)} | ||||||||||||||
{isEditOpen && ( | ||||||||||||||
<> | ||||||||||||||
<div className="absolute bottom-20 bg-terminal-black border border-terminal-green flex flex-col gap-2 items-center justify-center w-3/4 p-2"> | ||||||||||||||
<div className="flex flex-row items-center justify-center w-full"> | ||||||||||||||
<span className="uppercase text-2xl text-center flex-grow"> | ||||||||||||||
Change Adventurer Name | ||||||||||||||
</span> | ||||||||||||||
</div> | ||||||||||||||
<div className="relative flex flex-col w-full items-center justify-center gap-10"> | ||||||||||||||
<input | ||||||||||||||
type="text" | ||||||||||||||
value={adventurerName} | ||||||||||||||
onChange={handleNameChange} | ||||||||||||||
className="p-1 h-12 text-2xl w-3/4 bg-terminal-black border border-terminal-green animate-pulse transform" | ||||||||||||||
/> | ||||||||||||||
{isMaxLength && ( | ||||||||||||||
<p className="absolute top-14">MAX LENGTH!</p> | ||||||||||||||
)} | ||||||||||||||
<div className="flex flex-row gap-2 items-center"> | ||||||||||||||
<Button | ||||||||||||||
size={"lg"} | ||||||||||||||
onClick={() => | ||||||||||||||
changeAdventurerName( | ||||||||||||||
account!, | ||||||||||||||
adventurer.id!, | ||||||||||||||
adventurerName, | ||||||||||||||
index | ||||||||||||||
) | ||||||||||||||
} | ||||||||||||||
disabled={adventurerName === ""} | ||||||||||||||
> | ||||||||||||||
Save | ||||||||||||||
</Button> | ||||||||||||||
</div> | ||||||||||||||
</div> | ||||||||||||||
</div> | ||||||||||||||
</> | ||||||||||||||
)} | ||||||||||||||
</div> | ||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Improve null checks and error handling in name editing UI The new name editing UI is well-structured, but there are some improvements that can be made for robustness:
|
||||||||||||||
)} | ||||||||||||||
{isTransferOpen && ( | ||||||||||||||
{(isTransferOpen || isEditOpen) && ( | ||||||||||||||
<div className="absolute inset-0 bg-terminal-black/75 z-[1]" /> | ||||||||||||||
)} | ||||||||||||||
<Info adventurer={adventurer} gameContract={gameContract} /> | ||||||||||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -41,6 +41,12 @@ export interface AdventurerListProps { | |
from: string, | ||
recipient: string | ||
) => Promise<void>; | ||
changeAdventurerName: ( | ||
account: AccountInterface, | ||
adventurerId: number, | ||
name: string, | ||
index: number | ||
) => Promise<void>; | ||
} | ||
|
||
export const AdventurersList = ({ | ||
|
@@ -51,6 +57,7 @@ export const AdventurersList = ({ | |
adventurersCount, | ||
aliveAdventurersCount, | ||
transferAdventurer, | ||
changeAdventurerName, | ||
}: AdventurerListProps) => { | ||
const { provider } = useProvider(); | ||
const starknetIdNavigator = new StarknetIdNavigator( | ||
|
@@ -548,6 +555,8 @@ export const AdventurersList = ({ | |
gameContract={gameContract} | ||
handleSwitchAdventurer={handleSwitchAdventurer} | ||
transferAdventurer={transferAdventurer} | ||
changeAdventurerName={changeAdventurerName} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 💡 Codebase verification
The
🔗 Analysis chainLGTM! Verify AdventurerListCard implementation. The To ensure the complete implementation of the name change functionality, let's verify the AdventurerListCard component: This script will help verify that the AdventurerListCard component properly implements the name change functionality. 🏁 Scripts executedThe following scripts were executed for the analysis: Script: #!/bin/bash
# Description: Verify the implementation of changeAdventurerName in AdventurerListCard
# Check if AdventurerListCard component uses the changeAdventurerName prop
echo "Checking AdventurerListCard implementation:"
rg --type typescript 'changeAdventurerName.*prop[s]?' ui/src/app/components/start/AdventurerListCard.tsx
# Check for any UI elements or functions related to changing the adventurer's name
echo "Checking for name change UI elements or functions:"
rg --type typescript 'change.*name|rename|updateName' ui/src/app/components/start/AdventurerListCard.tsx
Length of output: 491 Script: #!/bin/bash
# Description: Verify the implementation of changeAdventurerName in AdventurerListCard.tsx
# Locate the AdventurerListCard.tsx file
echo "Locating AdventurerListCard.tsx:"
ADVENTURER_FILE=$(fd 'AdventurerListCard\.tsx$' ui/src/app/components/start/)
if [ -z "$ADVENTURER_FILE" ]; then
echo "AdventurerListCard.tsx not found."
exit 1
fi
echo "Found: $ADVENTURER_FILE"
# Check if AdventurerListCard component uses the changeAdventurerName prop
echo "Checking for 'changeAdventurerName' prop usage in AdventurerListCard.tsx:"
rg 'changeAdventurerName\s*=' "$ADVENTURER_FILE"
# Check for any UI elements or functions related to changing the adventurer's name
echo "Checking for name change UI elements or functions in AdventurerListCard.tsx:"
rg 'change.*name|rename|updateName' "$ADVENTURER_FILE"
Length of output: 892 Script: #!/bin/bash
# Description: Comprehensive search for 'changeAdventurerName' usage across the codebase
# Search for 'changeAdventurerName' in all .tsx and .ts files
echo "Searching for 'changeAdventurerName' across the entire codebase:"
rg 'changeAdventurerName' --type-add 'typescript:*.ts,*.tsx' --typescript
Length of output: 655 Script: #!/bin/bash
# Description: Comprehensive search for 'changeAdventurerName' usage across the codebase
# Search for 'changeAdventurerName' in all .ts and .tsx files without using --type flag
echo "Searching for 'changeAdventurerName' in .ts and .tsx files across the codebase:"
rg 'changeAdventurerName' -g '*.ts' -g '*.tsx'
Length of output: 1220 |
||
index={selectedIndex} | ||
/> | ||
)} | ||
</div> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -40,9 +40,7 @@ export const getWaitRetryInterval = (network: string) => | |
export const ETH_INCREMENT = 0.001; | ||
export const LORDS_INCREMENT = 5; | ||
export const getMaxFee = (network: string) => | ||
network === "mainnet" || network === "sepolia" | ||
? 0.3 * 10 ** 18 | ||
: 0.03 * 10 ** 18; // 0.3ETH on mainnet or sepolia, 0.0003ETH on goerli | ||
network === "mainnet" ? 0.001 * 10 ** 18 : 0.3 * 10 ** 18; // 0.3ETH on mainnet or sepolia, 0.0003ETH on goerli | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 💡 Codebase verification Inconsistency Detected Between The Please address the following:
🔗 Analysis chainSignificant changes to The modification to the
Please address the following:
To ensure this change doesn't affect other parts of the codebase, please run the following script: This will help identify any other locations where the 🏁 Scripts executedThe following scripts were executed for the analysis: Script: #!/bin/bash
# Search for usages of getMaxFee function
rg "getMaxFee" --type typescript
Length of output: 67 Script: #!/bin/bash
# Search for usages of getMaxFee function in .ts files
rg "getMaxFee" --glob "*.ts"
Length of output: 536 |
||
export const ETH_PREFUND_AMOUNT = (network: string) => | ||
network === "mainnet" || network === "sepolia" | ||
? "0x2386F26FC10000" | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Include
timestamp
when updating adventurer name for consistencyConsistently including a
timestamp
in update operations helps maintain a uniform data structure and aids in tracking changes over time. Consider adding atimestamp
field to theupdateAdventurerName
function call.Suggested change:
return [ updateAdventurerName({ adventurerId: value.adventurerId, adventurerName: value.name, + timestamp: new Date().toISOString(), }), ];
📝 Committable suggestion