Merge branch 'main' of https://github.com/interchain-name/icns-frontend into main
This commit is contained in:
delivan
commit
6f3fe64125
@ -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;
|
||||
`;
|
||||
|
||||
@ -31,7 +31,7 @@ import {
|
||||
sendMsgs,
|
||||
simulateMsgs,
|
||||
} from "../../wallets";
|
||||
import { ChainIdHelper } from "@keplr-wallet/cosmos";
|
||||
import { Bech32Address, ChainIdHelper } from "@keplr-wallet/cosmos";
|
||||
|
||||
import { AllChainsItem } from "../../components/chain-list/all-chains-item";
|
||||
import { SearchInput } from "../../components/search-input";
|
||||
@ -89,8 +89,8 @@ export default function VerificationPage() {
|
||||
|
||||
const [searchValue, setSearchValue] = useState("");
|
||||
|
||||
const [nftOwnerAddress, setNFTOwnerAddress] = useState("");
|
||||
const [isOwner, setIsOwner] = useState(false);
|
||||
// const [isAgree, setIsAgree] = useState(false);
|
||||
|
||||
const [isModalOpen, setModalOpen] = useState(false);
|
||||
|
||||
@ -193,6 +193,7 @@ export default function VerificationPage() {
|
||||
if (keplrWallet) {
|
||||
const key = await keplrWallet.getKey(MainChainId);
|
||||
setIsOwner(ownerOfQueryResponse.data.owner === key.bech32Address);
|
||||
setNFTOwnerAddress(ownerOfQueryResponse.data.owner);
|
||||
}
|
||||
|
||||
const addressesQueryResponse = await queryAddressesFromTwitterName(
|
||||
@ -406,6 +407,10 @@ export default function VerificationPage() {
|
||||
};
|
||||
|
||||
const isRegisterButtonDisable = (() => {
|
||||
if (!isOwner) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const hasCheckedItem = checkedItems.size > 0;
|
||||
|
||||
return !hasCheckedItem;
|
||||
@ -422,7 +427,6 @@ export default function VerificationPage() {
|
||||
<ContentContainer>
|
||||
<BackButton />
|
||||
<TwitterProfile twitterProfileInformation={twitterAuthInfo} />
|
||||
|
||||
<ChainListTitleContainer>
|
||||
<ChainListTitle>Chain List</ChainListTitle>
|
||||
<SearchInput
|
||||
@ -430,7 +434,6 @@ export default function VerificationPage() {
|
||||
setSearchValue={setSearchValue}
|
||||
/>
|
||||
</ChainListTitleContainer>
|
||||
|
||||
{!searchValue ? (
|
||||
<AllChainsItem
|
||||
chainList={chainList}
|
||||
@ -438,7 +441,6 @@ export default function VerificationPage() {
|
||||
setCheckedItems={setCheckedItems}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<ChainList
|
||||
chainList={chainList.filter(
|
||||
(chain) =>
|
||||
@ -456,14 +458,14 @@ export default function VerificationPage() {
|
||||
setCheckedItems={setCheckedItems}
|
||||
/>
|
||||
|
||||
{/*<AgreeContainer*/}
|
||||
{/* onClick={() => {*/}
|
||||
{/* setIsAgree(!isAgree);*/}
|
||||
{/* }}*/}
|
||||
{/*>*/}
|
||||
{/* <AgreeCheckBox type="checkbox" checked={isAgree} readOnly />I*/}
|
||||
{/* check that Osmo is required for this transaction*/}
|
||||
{/*</AgreeContainer>*/}
|
||||
{!isOwner && nftOwnerAddress ? (
|
||||
<OwnerAlert>
|
||||
You are not owner of this name.
|
||||
<br />
|
||||
Please select the account (
|
||||
{Bech32Address.shortenAddress(nftOwnerAddress, 28)})
|
||||
</OwnerAlert>
|
||||
) : null}
|
||||
|
||||
{chainList.length > 0 && (
|
||||
<ButtonContainer disabled={isRegisterButtonDisable}>
|
||||
@ -553,30 +555,15 @@ const ChainListTitle = styled.div`
|
||||
color: ${color.white};
|
||||
`;
|
||||
|
||||
// const AgreeContainer = styled.div`
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// gap: 0.5rem;
|
||||
//
|
||||
// font-family: "Inter", serif;
|
||||
// font-style: normal;
|
||||
// font-weight: 500;
|
||||
// font-size: 0.8rem;
|
||||
// line-height: 0.8rem;
|
||||
//
|
||||
// text-transform: uppercase;
|
||||
// user-select: none;
|
||||
//
|
||||
// color: ${color.grey["400"]};
|
||||
//
|
||||
// padding: 2rem 0;
|
||||
//
|
||||
// cursor: pointer;
|
||||
// `;
|
||||
//
|
||||
// const AgreeCheckBox = styled.input.attrs({ type: "checkbox" })`
|
||||
// width: 1.2rem;
|
||||
// height: 1.2rem;
|
||||
//
|
||||
// accent-color: ${color.orange["200"]};
|
||||
// `;
|
||||
const OwnerAlert = styled.div`
|
||||
font-family: "Inter", serif;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.1rem;
|
||||
text-align: center;
|
||||
|
||||
color: ${color.grey["400"]};
|
||||
|
||||
padding-top: 1.25rem;
|
||||
`;
|
||||
|
||||
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