Merge branch 'Thunnini/final-modal-redegisn'

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> = (props) => {
     >
       <ModalContainer>
         <ModalTitle>Final Checks</ModalTitle>
-        <MainText>You are claiming the ICNS name</MainText>
+        <ModalDescription>{`You are claiming the ICNS name ${twitterUserName} on main keplr account`}</ModalDescription>
-        <ICNSNameContainer>
+
-          <BoldText>{twitterUserName}</BoldText>
+        <NameBox
-          <TwitterImageContainer>
+          marginTop="3.875rem"
+          icon={
             <Image
-              src={TwitterIcon}
+              src={require("../../public/images/icons/twitter-small.png")}
-              fill={true}
+              alt="twitter"
-              sizes="2rem"
+              width={24}
-              alt="twitter icon"
+              height={24}
+              style={{
+                marginRight: "4px",
+              }}
             />
-          </TwitterImageContainer>
+          }
-        </ICNSNameContainer>
+          title="Your Twitter ID"
-        <MainText>on</MainText>
+          content={`@${twitterUserName}`}
-        <BoldText>{walletInfo?.name}</BoldText>
+        />
-        <MainText>({walletInfo?.bech32Address})</MainText>
+        <div
-        <Divider />
+          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.
+            ☑️ 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;
+  font-size: 1.625rem;
-  line-height: 1.2rem;
+  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;
+  flex-direction: column;
-  height: 3.5rem;
 
-  margin-top: 2.5rem;
+  align-items: center;
-  padding: 0 4.25rem;
 
-  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}
 `;

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-weight: 400;
-  font-size: 1.25rem;
+  font-size: 1rem;
-  line-height: 1.25rem;
+  line-height: 1.025rem;
   letter-spacing: 0.07em;
   text-transform: uppercase;
 
-  color: ${color.white};
+  color: ${color.grey["200"]};
-  background-color: ${color.grey["300"]};
+  background-color: transparent;
 
   cursor: pointer;
 `;