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 (
<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">
{
<form className="form" onSubmit={handleCommit}>

View File

@ -83,7 +83,7 @@ function ImportKeyfile({
return (
<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">
{loading ? (
<Loader msg="Setting up node..." />

View File

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