diff --git a/components/before-you-start-modal/index.tsx b/components/before-you-start-modal/index.tsx index ed3f3ef..a117d81 100644 --- a/components/before-you-start-modal/index.tsx +++ b/components/before-you-start-modal/index.tsx @@ -85,7 +85,7 @@ export const BeforeYouStartModal: FunctionComponent = (props) => { {selectedWalletItem && ( )} - {walletKeyName} + {walletKeyName} @@ -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; diff --git a/constants/error-message.ts b/constants/error-message.ts index 74d7dfb..19e633e 100644 --- a/constants/error-message.ts +++ b/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."; diff --git a/pages/complete/index.tsx b/pages/complete/index.tsx index 50285c6..82e17d5 100644 --- a/pages/complete/index.tsx +++ b/pages/complete/index.tsx @@ -98,9 +98,9 @@ export default function CompletePage() { strings={registeredAddressed.map( (address) => address.bech32_prefix, )} - typeSpeed={150} - backSpeed={150} - backDelay={1000} + typeSpeed={30} + backSpeed={30} + backDelay={500} loop smartBackspace onStringTyped={(arrayPos: number) => { @@ -113,16 +113,6 @@ export default function CompletePage() { - - - - - - ICNS name will stay the same even if your twitter handle changes in - the future. - - - - SHARE MY NAME + INVITE FRIENDS @@ -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; diff --git a/pages/index.tsx b/pages/index.tsx index fea3f29..ccd3717 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -81,11 +81,18 @@ export default function Home() { - Osmo is required for this transaction + 0.5+ Osmo is required for this transaction{" "} + + GET OSMO + - More wallet support coming soon + Make sure you have a Cosmos wallet installed @@ -246,4 +253,8 @@ const CheckContainer = styled.div` padding-left: 0.75rem; color: ${color.grey["400"]}; + + a { + color: ${color.grey["400"]}; + } `; diff --git a/pages/verification/index.tsx b/pages/verification/index.tsx index a7cfde5..8311e24 100644 --- a/pages/verification/index.tsx +++ b/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); }