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

components/before-you-start-modal/index.tsx

@@ -85,7 +85,7 @@ export const BeforeYouStartModal: FunctionComponent<Props> = (props) => {
             {selectedWalletItem && (
               <selectedWalletItem.IconComponent width={16} height={16} />
             )}
-            {walletKeyName}
+            <WalletAccountName>{walletKeyName}</WalletAccountName>
           </WalletAccountValue>
         </WalletAccountContainer>
         <ClaimWithTwitterButton onClick={handleClickButton}>
@@ -186,6 +186,13 @@ const WalletAccountValue = styled.div`
   color: ${color.grey["100"]};
 `;
 
+const WalletAccountName = styled.div`
+  max-width: 11rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 const ClaimWithTwitterButton = styled.button`
   display: flex;
   align-items: center;

constants/error-message.ts

@@ -7,3 +7,15 @@ export const KEPLR_VERSION_ERROR = "You should update keplr";
 export const KEPLR_NO_ACCOUNT_ERROR = "key doesn't exist";
 export const KEPLR_NO_ACCOUNT_MESSAGE =
   "Create a wallet account to get started with ICNS!";
+
+export const INSUFFICIENT_GAS_ERROR = "insufficient funds: invalid request";
+export const INSUFFICIENT_GAS_MESSAGE =
+  "Not enough OSMO in your account. Please add more OSMO to your account";
+
+export const ACCOUNT_NOT_EXIST_ERROR = "does not exist: unknown address";
+export const ACCOUNT_NOT_EXIST_MESSAGE =
+  "Account has not been registered on chain. Please add some OSMO to your account and try again.";
+
+export const VERIFICATION_THRESHOLD_ERROR = "verfication is below threshold:";
+export const VERIFICATION_THRESHOLD_MESSAGE =
+  "Verifier consensus failed. Verifiers may be offline. Please try again later.";

pages/complete/index.tsx

@@ -98,9 +98,9 @@ export default function CompletePage() {
                   strings={registeredAddressed.map(
                     (address) => address.bech32_prefix,
                   )}
-                  typeSpeed={150}
+                  typeSpeed={30}
-                  backSpeed={150}
+                  backSpeed={30}
-                  backDelay={1000}
+                  backDelay={500}
                   loop
                   smartBackspace
                   onStringTyped={(arrayPos: number) => {
@@ -113,16 +113,6 @@ export default function CompletePage() {
           </RecipentContainer>
         </ContentContainer>
 
-        <DescriptionContainer>
-          <AlertIcon>
-            <AlertCircleOutlineIcon />
-          </AlertIcon>
-          <DescriptionText>
-            ICNS name will stay the same even if your twitter handle changes in
-            the future.
-          </DescriptionText>
-        </DescriptionContainer>
-
         <ShareButtonContainer onClick={onClickShareButton}>
           <Image
             src="/images/icons/twitter-small.png"
@@ -130,7 +120,7 @@ export default function CompletePage() {
             width={28}
             height={28}
           />
-          <ShareButtonText>SHARE MY NAME</ShareButtonText>
+          <ShareButtonText>INVITE FRIENDS</ShareButtonText>
         </ShareButtonContainer>
       </MainContainer>
     </Container>
@@ -224,40 +214,6 @@ const AvailableAddressText = styled.div`
   color: ${color.blue};
 `;
 
-const DescriptionContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  gap: 1rem;
-
-  width: 31rem;
-
-  margin-top: 1.5rem;
-  padding: 1.25rem 2rem;
-
-  background-color: ${color.grey["900"]};
-`;
-
-const AlertIcon = styled.div`
-  position: relative;
-
-  width: 1.5rem;
-  height: 1.5rem;
-`;
-
-const DescriptionText = styled.div`
-  width: 100%;
-
-  font-family: "Inter", serif;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 0.8rem;
-  line-height: 140%;
-
-  color: ${color.grey["400"]};
-`;
-
 const SpinnerWrapper = styled.div`
   display: flex;
   position: relative;

pages/index.tsx

@@ -81,11 +81,18 @@ export default function Home() {
           <SubContainer>
             <CheckContainer>
               <CheckIcon />
-              Osmo is required for this transaction
+              0.5+ Osmo is required for this transaction{" "}
+              <a
+                href="https://app.osmosis.zone"
+                target="_blank"
+                rel="noreferrer"
+              >
+                GET OSMO
+              </a>
             </CheckContainer>
             <CheckContainer>
               <CheckIcon />
-              More wallet support coming soon
+              Make sure you have a Cosmos wallet installed
             </CheckContainer>
           </SubContainer>
         </MainTitleContainer>
@@ -246,4 +253,8 @@ const CheckContainer = styled.div`
   padding-left: 0.75rem;
 
   color: ${color.grey["400"]};
+
+  a {
+    color: ${color.grey["400"]};
+  }
 `;

pages/verification/index.tsx

@@ -52,8 +52,14 @@ import {
   verifyTwitterAccount,
 } from "../../queries";
 import {
+  ACCOUNT_NOT_EXIST_ERROR,
+  ACCOUNT_NOT_EXIST_MESSAGE,
+  INSUFFICIENT_GAS_ERROR,
+  INSUFFICIENT_GAS_MESSAGE,
   KEPLR_NOT_FOUND_ERROR,
   TWITTER_LOGIN_ERROR,
+  VERIFICATION_THRESHOLD_ERROR,
+  VERIFICATION_THRESHOLD_MESSAGE,
 } from "../../constants/error-message";
 import { makeClaimMessage, makeSetRecordMessage } from "../../messages";
 import Axios from "axios";
@@ -428,6 +434,26 @@ export default function VerificationPage() {
       }
     } catch (error) {
       if (Axios.isAxiosError(error)) {
+        const message = (error?.response?.data as QueryError).message;
+
+        if (message.includes(INSUFFICIENT_GAS_ERROR)) {
+          setErrorMessage({ message: INSUFFICIENT_GAS_MESSAGE });
+          setErrorModalOpen(true);
+          return;
+        }
+
+        if (message.includes(ACCOUNT_NOT_EXIST_ERROR)) {
+          setErrorMessage({ message: ACCOUNT_NOT_EXIST_MESSAGE });
+          setErrorModalOpen(true);
+          return;
+        }
+
+        if (message.includes(VERIFICATION_THRESHOLD_ERROR)) {
+          setErrorMessage({ message: VERIFICATION_THRESHOLD_MESSAGE });
+          setErrorModalOpen(true);
+          return;
+        }
+
         setErrorMessage({
           message: (error?.response?.data as QueryError).message,
         });
@@ -437,6 +463,7 @@ export default function VerificationPage() {
 
       if (error instanceof Error) {
         console.log(error.message);
+
         setErrorMessage({ message: error.message });
         setErrorModalOpen(true);
       }