mint automatically after commit, fix back button styling

This commit is contained in:
dr-frmr 2024-11-20 16:46:15 -05:00
parent 70dd1bccc0
commit 191cb5b6fd
No known key found for this signature in database
4 changed files with 31 additions and 34 deletions

View File

@ -95,7 +95,7 @@ function CommitDotOsName({
return ( return (
<div className="container fade-in"> <div className="container fade-in">
<button onClick={() => history.back()} className="button secondary">🔙</button> <button onClick={() => history.back()} className="button secondary back">🔙</button>
<div className="section"> <div className="section">
{ {
<form className="form" onSubmit={handleCommit}> <form className="form" onSubmit={handleCommit}>

View File

@ -83,7 +83,7 @@ function ImportKeyfile({
return ( return (
<div className="container fade-in"> <div className="container fade-in">
<button onClick={() => history.back()} className="button secondary">🔙</button> <button onClick={() => history.back()} className="button secondary back">🔙</button>
<div className="section"> <div className="section">
{loading ? ( {loading ? (
<Loader msg="Setting up node..." /> <Loader msg="Setting up node..." />

View File

@ -118,7 +118,7 @@ function MintCustom({
return ( return (
<div className="container fade-in"> <div className="container fade-in">
<button onClick={() => history.back()} className="button secondary">🔙</button> <button onClick={() => history.back()} className="button secondary back">🔙</button>
<div className="section"> <div className="section">
{ {
<form className="form" onSubmit={handleMint}> <form className="form" onSubmit={handleMint}>

View File

@ -1,4 +1,4 @@
import { useState, useEffect, FormEvent, useCallback } from "react"; import { useState, useEffect, useCallback } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import Loader from "../components/Loader"; import Loader from "../components/Loader";
import { PageProps } from "../lib/types"; import { PageProps } from "../lib/types";
@ -36,28 +36,28 @@ function MintDotOsName({
}); });
const addRecentTransaction = useAddRecentTransaction(); const addRecentTransaction = useAddRecentTransaction();
const [triggerNameCheck, setTriggerNameCheck] = useState<boolean>(false) const [hasMinted, setHasMinted] = useState(false);
useEffect(() => { useEffect(() => {
document.title = "Mint" document.title = "Mint"
}, []) }, [])
useEffect(() => setTriggerNameCheck(!triggerNameCheck), [address])
useEffect(() => { useEffect(() => {
if (!address) { if (!address) {
openConnectModal?.(); openConnectModal?.();
} }
}, [address, openConnectModal]); }, [address, openConnectModal]);
let handleMint = useCallback(async (e: FormEvent) => { const handleMint = useCallback(async () => {
e.preventDefault()
e.stopPropagation()
if (!address) { if (!address) {
openConnectModal?.() openConnectModal?.()
return return
} }
if (hasMinted) {
return
}
setHasMinted(true);
const initCall = await generateNetworkingKeys({ const initCall = await generateNetworkingKeys({
direct, direct,
@ -71,8 +71,6 @@ function MintDotOsName({
reset: false, reset: false,
}); });
console.log("minting name: ", knsName)
// strip .os suffix // strip .os suffix
const name = knsName.replace(/\.os$/, ''); const name = knsName.replace(/\.os$/, '');
const commitSecret = keccak256(stringToHex(name)) const commitSecret = keccak256(stringToHex(name))
@ -101,8 +99,15 @@ function MintDotOsName({
}) })
} catch (error) { } catch (error) {
console.error('Failed to send transaction:', error) console.error('Failed to send transaction:', error)
setHasMinted(false);
} }
}, [direct, address, sendTransaction, setNetworkingKey, setIpAddress, setWsPort, setTcpPort, setRouters, openConnectModal]) }, [direct, address, sendTransaction, setNetworkingKey, setIpAddress, setWsPort, setTcpPort, setRouters, openConnectModal, knsName, hasMinted])
useEffect(() => {
if (address && !isPending && !isConfirming) {
handleMint();
}
}, [address, handleMint, isPending, isConfirming]);
useEffect(() => { useEffect(() => {
if (isConfirmed) { if (isConfirmed) {
@ -113,26 +118,18 @@ function MintDotOsName({
return ( return (
<div className="container fade-in"> <div className="container fade-in">
<div className="section"> <div className="section">
{ <div className="form">
<form className="form" onSubmit={handleMint}>
{isPending || isConfirming ? ( {isPending || isConfirming ? (
<Loader msg={isConfirming ? 'Minting name...' : 'Please confirm the transaction in your wallet'} /> <Loader msg={isConfirming ? 'Minting name...' : 'Please confirm the transaction in your wallet'} />
) : ( ) : (
<> <Loader msg="Preparing to mint..." />
<div className="button-group">
<button type="submit" className="button">
Mint {knsName}
</button>
</div>
</>
)} )}
{isError && ( {isError && (
<p className="error-message"> <p className="error-message">
Error: {error?.message || 'There was an error minting your name, please try again.'} Error: {error?.message || 'There was an error minting your name, please try again.'}
</p> </p>
)} )}
</form> </div>
}
</div> </div>
</div> </div>
); );