92 lines
2.8 KiB
TypeScript
92 lines
2.8 KiB
TypeScript
import "./new-goal.css";
|
|
import { FormattedMessage } from "react-intl";
|
|
import { useContext, useState } from "react";
|
|
import { SnortContext } from "@snort/system-react";
|
|
|
|
import { Icon } from "./icon";
|
|
import { GOAL } from "@/const";
|
|
import { useLogin } from "@/hooks/login";
|
|
import { defaultRelays } from "@/const";
|
|
import { DefaultButton } from "./buttons";
|
|
import Modal from "./modal";
|
|
|
|
export function NewGoalDialog() {
|
|
const system = useContext(SnortContext);
|
|
const [open, setOpen] = useState(false);
|
|
const login = useLogin();
|
|
|
|
const [goalAmount, setGoalAmount] = useState("");
|
|
const [goalName, setGoalName] = useState("");
|
|
|
|
async function publishGoal() {
|
|
const pub = login?.publisher();
|
|
if (pub) {
|
|
const evNew = await pub.generic(eb => {
|
|
eb.kind(GOAL)
|
|
.tag(["amount", String(Number(goalAmount) * 1000)])
|
|
.tag(["relays", ...Object.keys(defaultRelays)])
|
|
.content(goalName);
|
|
return eb;
|
|
});
|
|
console.debug(evNew);
|
|
await system.BroadcastEvent(evNew);
|
|
setOpen(false);
|
|
setGoalName("");
|
|
setGoalAmount("");
|
|
}
|
|
}
|
|
const isValid = goalName.length && Number(goalAmount) > 0;
|
|
|
|
return (
|
|
<>
|
|
<DefaultButton onClick={() => setOpen(true)}>
|
|
<Icon name="zap-filled" size={12} />
|
|
<span>
|
|
<FormattedMessage defaultMessage="Add stream goal" id="wOy57k" />
|
|
</span>
|
|
</DefaultButton>
|
|
{open && (
|
|
<Modal id="new-goal" onClose={() => setOpen(false)}>
|
|
<div className="new-goal content-inner">
|
|
<div className="zap-goals">
|
|
<Icon name="zap-filled" className="stream-zap-goals-icon" size={16} />
|
|
<h3>
|
|
<FormattedMessage defaultMessage="Stream Zap Goals" id="0GfNiL" />
|
|
</h3>
|
|
</div>
|
|
<div>
|
|
<p>
|
|
<FormattedMessage defaultMessage="Name" id="HAlOn1" />
|
|
</p>
|
|
<input
|
|
type="text"
|
|
value={goalName}
|
|
placeholder="e.g. New Laptop"
|
|
onChange={e => setGoalName(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<p>
|
|
<FormattedMessage defaultMessage="Amount" id="/0TOL5" />
|
|
</p>
|
|
<input
|
|
type="number"
|
|
placeholder="21"
|
|
min="1"
|
|
max="2100000000000000"
|
|
value={goalAmount}
|
|
onChange={e => setGoalAmount(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="create-goal">
|
|
<DefaultButton disabled={!isValid} onClick={publishGoal}>
|
|
<FormattedMessage defaultMessage="Create Goal" id="X2PZ7D" />
|
|
</DefaultButton>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
)}
|
|
</>
|
|
);
|
|
}
|