mirror of
https://github.com/haveno-dex/haveno-ui.git
synced 2025-07-01 17:36:46 -04:00
250d742d48
- wired node settings to daemon and storage - updated tests and storybook - refactored for simplicity and code quality --- Reviewed-by: localredhead
99 lines
3.1 KiB
TypeScript
99 lines
3.1 KiB
TypeScript
// =============================================================================
|
|
// Copyright 2022 Haveno
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
// =============================================================================
|
|
|
|
import { useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { Stack, Container } from "@mantine/core";
|
|
import { CenteredLayout } from "@templates/CenteredLayout";
|
|
import { SetPassword } from "@organisms/SetPassword";
|
|
import { SetPrimaryFiat } from "@organisms/SetPrimaryFiat";
|
|
import { SelectMoneroNode } from "@organisms/SelectMoneroNode";
|
|
import { ReadyToUse } from "@molecules/ReadyToUse";
|
|
import { useCreateAccount } from "@hooks/storage/useCreateAccount";
|
|
import { ROUTES } from "@constants/routes";
|
|
import { CONTENT_MAX_WIDTH } from "./_constants";
|
|
|
|
enum Steps {
|
|
CreatePassword = "CreatePassword",
|
|
SetFiat = "SetFiat",
|
|
SelectNode = "SelectNode",
|
|
Completed = "Completed",
|
|
}
|
|
|
|
export function CreateAccount() {
|
|
const [step, setStep] = useState<Steps>(Steps.CreatePassword);
|
|
const [password, setPassword] = useState("");
|
|
const [fiat, setFiat] = useState("");
|
|
const navigate = useNavigate();
|
|
const { mutate: createAccount } = useCreateAccount();
|
|
|
|
const handleSetPassword = (value: string) => {
|
|
setPassword(value);
|
|
setStep(Steps.SetFiat);
|
|
};
|
|
|
|
const handleSetFiat = (value: string) => {
|
|
setFiat(value);
|
|
setStep(Steps.SelectNode);
|
|
};
|
|
|
|
const handleCreateAccount = () => {
|
|
createAccount(
|
|
{
|
|
password,
|
|
primaryFiat: fiat,
|
|
},
|
|
{
|
|
onSuccess: () => setStep(Steps.Completed),
|
|
}
|
|
);
|
|
};
|
|
|
|
return (
|
|
<CenteredLayout showHeader>
|
|
<Stack align="center" justify="center" sx={{ flex: 1 }}>
|
|
<Container size={CONTENT_MAX_WIDTH}>
|
|
{step === Steps.CreatePassword && (
|
|
<SetPassword
|
|
value={password}
|
|
onGoBack={() => navigate(ROUTES.Welcome)}
|
|
onNext={handleSetPassword}
|
|
/>
|
|
)}
|
|
|
|
{step === Steps.SetFiat && (
|
|
<SetPrimaryFiat
|
|
value={fiat}
|
|
onGoBack={() => setStep(Steps.CreatePassword)}
|
|
onNext={handleSetFiat}
|
|
/>
|
|
)}
|
|
|
|
{step === Steps.SelectNode && (
|
|
<SelectMoneroNode
|
|
onGoBack={() => setStep(Steps.SetFiat)}
|
|
onNext={handleCreateAccount}
|
|
/>
|
|
)}
|
|
|
|
{step === Steps.Completed && (
|
|
<ReadyToUse onSubmit={() => navigate(ROUTES.PaymentAccounts)} />
|
|
)}
|
|
</Container>
|
|
</Stack>
|
|
</CenteredLayout>
|
|
);
|
|
}
|