diff --git a/components/final-check-modal/index.tsx b/components/final-check-modal/index.tsx index ee31793..b102d5d 100644 --- a/components/final-check-modal/index.tsx +++ b/components/final-check-modal/index.tsx @@ -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) => { > Final Checks - You are claiming the ICNS name - - {twitterUserName} - - twitter icon - - - on - {walletInfo?.name} - ({walletInfo?.bech32Address}) - - - ☑️ ICNS name can only be claimed once per Twitter account. -
- ☑️ ICNS name can’t be transferred at this time. -
- ☑️ Please make sure you’ve selected the right account on your wallet. -
+ {`You are claiming the ICNS name ${twitterUserName} on main keplr account`} - - {MINIMUM_OSMO_FEE} will be spent as a - spam-prevention fee. - + + } + title="Your Twitter ID" + content={`@${twitterUserName}`} + /> +
+ + + +
+ + } + title="Main Keplr Account" + content={Bech32Address.shortenAddress( + walletInfo?.bech32Address || "", + 28, + )} + /> + + + + ☑️ ICNS name can only be claimed once per Twitter account. +
+ ☑️ ICNS name can’t be transferred at this time. +
+ ☑️ Please make sure you’ve selected the right account on your + wallet. +
+
+ + {MINIMUM_OSMO_FEE} will be spent as a + spam-prevention fee. + +
- { - await router.push("/"); - }} - > - Use a different account - = (props) => { Register + + { + await router.push("/"); + }} + > + Use a different account + +
@@ -107,55 +159,42 @@ export const FinalCheckModal: FunctionComponent = (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 ( + + + {icon ? {icon} : null} + {title} + + {content} + + ); +}; + +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} `; diff --git a/components/secondary-button/index.tsx b/components/secondary-button/index.tsx index 3190f37..ca15e2e 100644 --- a/components/secondary-button/index.tsx +++ b/components/secondary-button/index.tsx @@ -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; `; diff --git a/public/images/icons/keplr-small.png b/public/images/icons/keplr-small.png new file mode 100644 index 0000000..66d6d9e Binary files /dev/null and b/public/images/icons/keplr-small.png differ diff --git a/public/images/icons/twitter-small.png b/public/images/icons/twitter-small.png new file mode 100644 index 0000000..d914026 Binary files /dev/null and b/public/images/icons/twitter-small.png differ