mirror of
https://github.com/uqbar-dao/nectar.git
synced 2024-12-22 16:11:38 +03:00
mint automatically after commit, fix back button styling
This commit is contained in:
parent
70dd1bccc0
commit
191cb5b6fd
@ -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}>
|
||||||
|
@ -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..." />
|
||||||
|
@ -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}>
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user