function App() {
    const { contract } = useContract("0x436492DBc2E30E56FaC8F2297BD1964833c0687d");
    const { data, isLoading, error } = useMetadata(contract);
  
    if (isLoading) {
      return <div>Loading...</div>;
    }
  
    if (error) {
      return <div>Error: {error.message}</div>;
    }
  
    if (data) {
      const { name, description, image, external_link } = data;
  
      return (
        <div>
          <h1>{name}</h1>
          {description && <p>{description}</p>}
          {image && <img src={image} alt="Contract"
          style={{ maxWidth: "300px" }}/>}
          {external_link && <a href={external_link}>External Link</a>}
        </div>
      );
    }
  
    return null;
  }

function App() {
    const { url, mimeType } = useResolvedMediaType(
      "https://bafybeiho45by6fkf3l7wuzavqod53aifrp4hme4meazx3hunlmbtstco7y.ipfs-public.thirdwebcdn.com/blue_circle.png", // URL or URI of the media asset
    );
  
    return <img src={url} type={mimeType} 
    style={{ maxWidth: "300px" }}/>;
  }

function App() {
    const { contract } = useContract("0xf4aef3201aaA673f424c671c19f36087aF541f8f");
    const {
      mutateAsync: updateMetadata,
      isLoading,
      error,
    } = useUpdateMetadata(contract);
  
    return (
      <Web3Button
        contractAddress="0xf4aef3201aaA673f424c671c19f36087aF541f8f"
        action={() =>
          updateMetadata({
            name: "My App",
            description: "My awesome Ethereum App",
            image: "/path/to/image.jpg", // URL, URI, or File object
            external_link: "https://myapp.com",
          })
        }
      >
        Update Metadata
      </Web3Button>
    );
  }