import React, { useState } from 'react';
import { getContract, createThirdwebClient } from 'thirdweb';
import { celo } from "thirdweb/chains";
import { updateMetadata } from "thirdweb/extensions/erc721";
export function App() {
const [newName, setNewName] = useState('');
const [isUpdating, setIsUpdating] = useState(false);
const client = createThirdwebClient({
clientId: import.meta.env.VITE_TEMPLATE_CLIENT_ID
});
const contract = getContract({
client,
address: import.meta.env.VITE_CONTRACT_ADDRESS,
chain: celo,
});
const updateContractName = async () => {
if (!newName) {
alert("Please enter a new name");
return;
}
setIsUpdating(true);
try {
console.log("Updating contract metadata name to:", newName);
const transaction = await updateMetadata({
contract,
metadata: {
name: newName,
},
});
console.log("Transaction sent:", transaction);
console.log("Contract metadata updated successfully!");
alert("Contract metadata updated successfully!");
} catch (error) {
console.error('Error updating contract metadata:', error);
alert("Failed to update contract metadata. Check the console for details.");
} finally {
setIsUpdating(false);
}
};
return (
<div>
<h2>Update Contract Metadata Name</h2>
<input
type="text"
placeholder="Enter new name"
value={newName}
onChange={(e) => setNewName(e.target.value)}
/>
<button onClick={updateContractName} disabled={isUpdating}>
{isUpdating ? "Updating..." : "Update Name"}
</button>
</div>
);