forked from LaconicNetwork/icns-frontend
114 lines
3.1 KiB
TypeScript
114 lines
3.1 KiB
TypeScript
import { FunctionComponent, useState } from "react";
|
|
import ReactModal from "react-modal";
|
|
import styled from "styled-components";
|
|
import color from "../../styles/color";
|
|
import { WalletList, WalletType } from "../../constants/wallet";
|
|
import { WalletItem } from "./wallet-item";
|
|
import { ErrorMessage } from "../../types";
|
|
import { ErrorModal } from "../error-modal";
|
|
import { BeforeYouStartModal } from "../before-you-start-modal";
|
|
|
|
interface Props {
|
|
isModalOpen: boolean;
|
|
onCloseModal: () => void;
|
|
currentReferal?: string;
|
|
}
|
|
|
|
export const ConnectWalletModal: FunctionComponent<Props> = (props) => {
|
|
const { isModalOpen, onCloseModal, currentReferal } = props;
|
|
const [isErrorModalOpen, setErrorModalOpen] = useState(false);
|
|
const [isBeforeYouStartModalOpen, setBeforeYouStartModalOpen] =
|
|
useState(false);
|
|
const [selectedWalletItem, setSelectedWalletItem] = useState<WalletType>();
|
|
const [walletKeyName, setWalletKeyName] = useState("");
|
|
|
|
const [errorMessage, setErrorMessage] = useState<ErrorMessage>();
|
|
|
|
return (
|
|
<ReactModal
|
|
isOpen={isModalOpen}
|
|
onRequestClose={onCloseModal}
|
|
ariaHideApp={false}
|
|
style={{
|
|
overlay: { background: "#121212cc" },
|
|
content: {
|
|
top: "50%",
|
|
left: "50%",
|
|
right: "auto",
|
|
bottom: "auto",
|
|
padding: 0,
|
|
marginRight: "-50%",
|
|
transform: "translate(-50%, -50%)",
|
|
background: color.grey["800"],
|
|
border: 0,
|
|
},
|
|
}}
|
|
>
|
|
<ModalContainer>
|
|
<ModalTitle>Connect Wallet</ModalTitle>
|
|
<ModalDescription>
|
|
Make sure you have selected the correct account to link to your ICNS
|
|
name.
|
|
</ModalDescription>
|
|
|
|
{WalletList.map((walletItem) => {
|
|
return (
|
|
<WalletItem
|
|
wallet={walletItem}
|
|
key={walletItem.name}
|
|
setErrorModalOpen={setErrorModalOpen}
|
|
setErrorMessage={setErrorMessage}
|
|
setBeforeYouStartModalOpen={setBeforeYouStartModalOpen}
|
|
setWalletKeyName={setWalletKeyName}
|
|
setSelectedWalletItem={setSelectedWalletItem}
|
|
/>
|
|
);
|
|
})}
|
|
</ModalContainer>
|
|
|
|
<BeforeYouStartModal
|
|
isModalOpen={isBeforeYouStartModalOpen}
|
|
onCloseModal={() => setBeforeYouStartModalOpen(false)}
|
|
currentReferal={currentReferal}
|
|
walletKeyName={walletKeyName}
|
|
selectedWalletItem={selectedWalletItem}
|
|
/>
|
|
<ErrorModal
|
|
isModalOpen={isErrorModalOpen}
|
|
onCloseModal={() => setErrorModalOpen(false)}
|
|
errorMessage={errorMessage}
|
|
isWarning={true}
|
|
/>
|
|
</ReactModal>
|
|
);
|
|
};
|
|
|
|
const ModalContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.9rem;
|
|
padding: 2.2rem;
|
|
|
|
max-width: 28.5rem;
|
|
`;
|
|
|
|
const ModalTitle = styled.div`
|
|
font-family: "Inter", serif;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 1.5rem;
|
|
line-height: 1.8rem;
|
|
|
|
color: ${color.white};
|
|
`;
|
|
|
|
const ModalDescription = styled.div`
|
|
font-family: "Inter", serif;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 0.875rem;
|
|
line-height: 1.1rem;
|
|
|
|
color: ${color.grey["400"]};
|
|
`;
|