forked from LaconicNetwork/icns-frontend
Merge branch 'Thunnini/final-modal-redegisn'
This commit is contained in:
Thunnini
commit
68dfe40ee5
@ -8,6 +8,7 @@ import { PrimaryButton } from "../primary-button";
|
||||
import { SecondaryButton } from "../secondary-button";
|
||||
import { MINIMUM_OSMO_FEE } from "../../constants/wallet";
|
||||
import { useRouter } from "next/router";
|
||||
import { Bech32Address } from "@keplr-wallet/cosmos";
|
||||
|
||||
interface Props {
|
||||
twitterUserName: string | undefined;
|
||||
@ -53,43 +54,85 @@ export const FinalCheckModal: FunctionComponent<Props> = (props) => {
|
||||
>
|
||||
<ModalContainer>
|
||||
<ModalTitle>Final Checks</ModalTitle>
|
||||
<MainText>You are claiming the ICNS name</MainText>
|
||||
<ICNSNameContainer>
|
||||
<BoldText>{twitterUserName}</BoldText>
|
||||
<TwitterImageContainer>
|
||||
<Image
|
||||
src={TwitterIcon}
|
||||
fill={true}
|
||||
sizes="2rem"
|
||||
alt="twitter icon"
|
||||
/>
|
||||
</TwitterImageContainer>
|
||||
</ICNSNameContainer>
|
||||
<MainText>on</MainText>
|
||||
<BoldText>{walletInfo?.name}</BoldText>
|
||||
<MainText>({walletInfo?.bech32Address})</MainText>
|
||||
<Divider />
|
||||
<SubText>
|
||||
☑️ ICNS name can only be claimed once per Twitter account.
|
||||
<br />
|
||||
☑️ ICNS name can’t be transferred at this time.
|
||||
<br />
|
||||
☑️ Please make sure you’ve selected the right account on your wallet.
|
||||
</SubText>
|
||||
<ModalDescription>{`You are claiming the ICNS name ${twitterUserName} on main keplr account`}</ModalDescription>
|
||||
|
||||
<SubText>
|
||||
<SubBoldText>{MINIMUM_OSMO_FEE}</SubBoldText> will be spent as a
|
||||
spam-prevention fee.
|
||||
</SubText>
|
||||
<NameBox
|
||||
marginTop="3.875rem"
|
||||
icon={
|
||||
<Image
|
||||
src={require("../../public/images/icons/twitter-small.png")}
|
||||
alt="twitter"
|
||||
width={24}
|
||||
height={24}
|
||||
style={{
|
||||
marginRight: "4px",
|
||||
}}
|
||||
/>
|
||||
}
|
||||
title="Your Twitter ID"
|
||||
content={`@${twitterUserName}`}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "3.625rem",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="48"
|
||||
height="48"
|
||||
fill="none"
|
||||
viewBox="0 0 48 48"
|
||||
>
|
||||
<path
|
||||
stroke="#EBEBEB"
|
||||
strokeLinecap="round"
|
||||
strokeWidth="2"
|
||||
d="M18.44 19.008h-2.656a5.162 5.162 0 00-5.162 5.162v0a5.162 5.162 0 005.162 5.162h2.655M29.305 28.988h2.655a5.162 5.162 0 005.162-5.162v0a5.162 5.162 0 00-5.162-5.162h-2.655M19.295 24.242h9.155"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<NameBox
|
||||
marginTop="0"
|
||||
icon={
|
||||
<Image
|
||||
src={require("../../public/images/icons/keplr-small.png")}
|
||||
alt="twitter"
|
||||
width={20}
|
||||
height={20}
|
||||
style={{
|
||||
marginRight: "8px",
|
||||
}}
|
||||
/>
|
||||
}
|
||||
title="Main Keplr Account"
|
||||
content={Bech32Address.shortenAddress(
|
||||
walletInfo?.bech32Address || "",
|
||||
28,
|
||||
)}
|
||||
/>
|
||||
|
||||
<SubTextsContainer>
|
||||
<SubText>
|
||||
☑️ ICNS name can only be claimed once per Twitter account.
|
||||
<br />
|
||||
☑️ ICNS name can’t be transferred at this time.
|
||||
<br />
|
||||
☑️ Please make sure you’ve selected the right account on your
|
||||
wallet.
|
||||
</SubText>
|
||||
<br />
|
||||
<SubText>
|
||||
<SubBoldText>{MINIMUM_OSMO_FEE}</SubBoldText> will be spent as a
|
||||
spam-prevention fee.
|
||||
</SubText>
|
||||
</SubTextsContainer>
|
||||
|
||||
<ButtonContainer>
|
||||
<SecondaryButton
|
||||
onClick={async () => {
|
||||
await router.push("/");
|
||||
}}
|
||||
>
|
||||
Use a different account
|
||||
</SecondaryButton>
|
||||
<RegisterButton>
|
||||
<PrimaryButton
|
||||
onClick={onClickRegisterButton}
|
||||
@ -98,6 +141,15 @@ export const FinalCheckModal: FunctionComponent<Props> = (props) => {
|
||||
Register
|
||||
</PrimaryButton>
|
||||
</RegisterButton>
|
||||
<CancelButton>
|
||||
<SecondaryButton
|
||||
onClick={async () => {
|
||||
await router.push("/");
|
||||
}}
|
||||
>
|
||||
Use a different account
|
||||
</SecondaryButton>
|
||||
</CancelButton>
|
||||
</ButtonContainer>
|
||||
</ModalContainer>
|
||||
</ReactModal>
|
||||
@ -107,55 +159,42 @@ export const FinalCheckModal: FunctionComponent<Props> = (props) => {
|
||||
const ModalContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.625rem;
|
||||
|
||||
width: 50rem;
|
||||
max-width: 43.5rem;
|
||||
|
||||
padding: 1.75rem 2rem;
|
||||
padding: 2rem 2.25rem;
|
||||
|
||||
font-family: "Inter", serif;
|
||||
font-style: normal;
|
||||
`;
|
||||
|
||||
const ModalTitle = styled.div`
|
||||
font-family: "Inter", serif;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.8rem;
|
||||
|
||||
margin-bottom: 1rem;
|
||||
|
||||
color: ${color.white};
|
||||
`;
|
||||
|
||||
const ICNSNameContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
gap: 0.5rem;
|
||||
`;
|
||||
|
||||
const TwitterImageContainer = styled.div`
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
|
||||
margin-top: 0.4rem;
|
||||
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const MainText = styled.div`
|
||||
font-family: "Inter", serif;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2rem;
|
||||
font-size: 1.625rem;
|
||||
line-height: 1.94rem;
|
||||
|
||||
color: ${color.white};
|
||||
|
||||
margin-bottom: 1.75rem;
|
||||
`;
|
||||
|
||||
const ModalDescription = styled.div`
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
line-height: 1.18rem;
|
||||
|
||||
color: ${color.grey["100"]};
|
||||
`;
|
||||
|
||||
const SubTextsContainer = styled.div`
|
||||
margin-top: 1.75rem;
|
||||
|
||||
padding: 2rem 1.5rem;
|
||||
|
||||
background-color: ${color.grey["700"]};
|
||||
`;
|
||||
|
||||
const SubText = styled.div`
|
||||
font-family: "Inter", serif;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
@ -167,35 +206,95 @@ const SubBoldText = styled.span`
|
||||
color: ${color.grey["100"]};
|
||||
`;
|
||||
|
||||
const BoldText = styled.div`
|
||||
font-family: "Inter", serif;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 2rem;
|
||||
line-height: 2.5rem;
|
||||
|
||||
color: ${color.orange["50"]};
|
||||
`;
|
||||
|
||||
const Divider = styled.div`
|
||||
width: 100%;
|
||||
|
||||
margin: 1.625rem 0;
|
||||
|
||||
border: 0.5px solid ${color.grey["500"]};
|
||||
`;
|
||||
|
||||
const ButtonContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 3.5rem;
|
||||
flex-direction: column;
|
||||
|
||||
margin-top: 2.5rem;
|
||||
padding: 0 4.25rem;
|
||||
align-items: center;
|
||||
|
||||
gap: 3.5rem;
|
||||
margin-top: 1.75rem;
|
||||
`;
|
||||
|
||||
const RegisterButton = styled.div`
|
||||
width: 10rem;
|
||||
width: 60%;
|
||||
height: 4.125rem;
|
||||
`;
|
||||
|
||||
const CancelButton = styled.div`
|
||||
width: 80%;
|
||||
height: 3.8rem;
|
||||
`;
|
||||
|
||||
const NameBox: FunctionComponent<{
|
||||
title: string;
|
||||
content: string;
|
||||
|
||||
icon?: React.ReactElement;
|
||||
|
||||
marginTop: string;
|
||||
}> = ({ icon, title, content, marginTop }) => {
|
||||
return (
|
||||
<NameBoxContainer
|
||||
style={{
|
||||
marginTop,
|
||||
}}
|
||||
>
|
||||
<NameBoxTitleContainer>
|
||||
{icon ? <NameBoxIconContainer>{icon}</NameBoxIconContainer> : null}
|
||||
<NameBoxTitle>{title}</NameBoxTitle>
|
||||
</NameBoxTitleContainer>
|
||||
<NameBoxContentContainer>{content}</NameBoxContentContainer>
|
||||
</NameBoxContainer>
|
||||
);
|
||||
};
|
||||
|
||||
const NameBoxContainer = styled.div`
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
font-family: "Inter", serif;
|
||||
font-style: normal;
|
||||
`;
|
||||
|
||||
const NameBoxTitleContainer = styled.div`
|
||||
position: absolute;
|
||||
top: -1.9rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const NameBoxIconContainer = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
height: 1px;
|
||||
`;
|
||||
|
||||
const NameBoxTitle = styled.div`
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
line-height: 1.18rem;
|
||||
|
||||
color: ${color.grey["400"]};
|
||||
`;
|
||||
|
||||
const NameBoxContentContainer = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
padding: 2.125rem 0;
|
||||
|
||||
background-color ${color.grey["700"]};
|
||||
border: 1px solid ${color.grey["300"]};
|
||||
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.81rem;
|
||||
|
||||
color: ${color.white}
|
||||
`;
|
||||
|
||||
@ -11,14 +11,14 @@ export const SecondaryButton = styled.button`
|
||||
|
||||
font-family: "Inter", serif;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
line-height: 1.025rem;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: ${color.white};
|
||||
background-color: ${color.grey["300"]};
|
||||
color: ${color.grey["200"]};
|
||||
background-color: transparent;
|
||||
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
BIN
public/images/icons/keplr-small.png
Normal file
BIN
public/images/icons/keplr-small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
public/images/icons/twitter-small.png
Normal file
BIN
public/images/icons/twitter-small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 912 B |
Loading…
Reference in New Issue
Block a user