Merge branch 'main' of https://github.com/interchain-name/icns-frontend into main

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>
-          <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>
 
-        <SubText>
+        <NameBox
-          <SubBoldText>{MINIMUM_OSMO_FEE}</SubBoldText> will be spent as a
+          marginTop="3.875rem"
-          spam-prevention fee.
+          icon={
-        </SubText>
+            <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;
+  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;
 `;

pages/verification/index.tsx

@@ -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*/}
+            {!isOwner && nftOwnerAddress ? (
-            {/*  onClick={() => {*/}
+              <OwnerAlert>
-            {/*    setIsAgree(!isAgree);*/}
+                You are not owner of this name.
-            {/*  }}*/}
+                <br />
-            {/*>*/}
+                Please select the account (
-            {/*  <AgreeCheckBox type="checkbox" checked={isAgree} readOnly />I*/}
+                {Bech32Address.shortenAddress(nftOwnerAddress, 28)})
-            {/*  check that Osmo is required for this transaction*/}
+              </OwnerAlert>
-            {/*</AgreeContainer>*/}
+            ) : null}
 
             {chainList.length > 0 && (
               <ButtonContainer disabled={isRegisterButtonDisable}>
@@ -553,30 +555,15 @@ const ChainListTitle = styled.div`
   color: ${color.white};
 `;
 
-// const AgreeContainer = styled.div`
+const OwnerAlert = styled.div`
-//   display: flex;
+  font-family: "Inter", serif;
-//   align-items: center;
+  font-style: normal;
-//   gap: 0.5rem;
+  font-weight: 500;
-//
+  font-size: 0.9rem;
-//   font-family: "Inter", serif;
+  line-height: 1.1rem;
-//   font-style: normal;
+  text-align: center;
-//   font-weight: 500;
+
-//   font-size: 0.8rem;
+  color: ${color.grey["400"]};
-//   line-height: 0.8rem;
+
-//
+  padding-top: 1.25rem;
-//   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"]};
-// `;