cerc-io/icns-frontend
16
0
Fork 0
forked from LaconicNetwork/icns-frontend
Code Pull Requests Actions Activity

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

Browse Source
This commit is contained in:
delivan 2022-12-20 22:39:33 +09:00
commit fdfbb02f98
5 changed files with 64 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/before-you-start-modal/index.tsx
View File

@ -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;

12
constants/error-message.ts
View File

@ -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.";

52
pages/complete/index.tsx
View File

@ -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() {
</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;

15
pages/index.tsx
View File

@ -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"]};
}
`;

27
pages/verification/index.tsx
View File

@ -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);
}