From fb69c979232cfd53a38b803b6fc4544610d2f431 Mon Sep 17 00:00:00 2001 From: Thunnini Date: Tue, 20 Dec 2022 23:37:56 +0900 Subject: [PATCH 1/2] Some improvements for complete page --- pages/complete/index.tsx | 212 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 204 insertions(+), 8 deletions(-) diff --git a/pages/complete/index.tsx b/pages/complete/index.tsx index 82e17d5..33f9c3c 100644 --- a/pages/complete/index.tsx +++ b/pages/complete/index.tsx @@ -111,6 +111,15 @@ export default function CompletePage() { {availableAddress} + + + Make your way up the leaderboard + + + Tweet an invite link and both you and your friend will earn points + on the ICNS leaderboard. + + @@ -120,8 +129,100 @@ export default function CompletePage() { width={28} height={28} /> - INVITE FRIENDS + TWEET INVITE LINK + { + e.preventDefault(); + + const { twitterUsername } = router.query; + + navigator.clipboard.writeText( + `https://app.icns.xyz?referral=${twitterUsername}`, + ); + }} + > + copy invite link + + + + + + + + + + + + + + + Coming soon + + + Leaderboard + + + + + + + + + ); @@ -142,14 +243,10 @@ const MainContainer = styled.div` color: white; `; -const MainTitle = styled.h1` - text-overflow: ; -`; - const ContentContainer = styled.div` width: 31rem; - padding: 2.625rem 3rem; + padding: 2.625rem 0; background-color: ${color.grey["900"]}; `; @@ -174,7 +271,7 @@ const TitleContainer = styled.div` const RecipentContainer = styled.div` display: flex; flex-direction: column; - margin: 0 1rem; + margin: 0 4rem; gap: 0.5rem; `; @@ -188,6 +285,33 @@ const RecipentTitle = styled.div` color: ${color.grey["400"]}; `; +const SubLeaderboardIntroContainer = styled.div` + margin: 0 2.5rem; + margin-top: 2.5rem; + + padding: 1.25rem 1.5rem; + + background-color: ${color.grey["700"]}; +`; + +const SubLeaderboardIntroTitle = styled.div` + font-weight: 600; + font-size: 0.8125rem; + line-height: 123.5%; + + margin-bottom: 0.75rem; + + color: ${color.grey["100"]}; +`; + +const SubLeaderboardIntroDescription = styled.div` + font-weight: 400; + font-size: 0.8125rem; + line-height: 138%; + + color: ${color.grey["300"]}; +`; + const AddressContainer = styled.div` font-family: "Inter", serif; font-style: normal; @@ -260,7 +384,8 @@ const ShareButtonContainer = styled.div` width: 20rem; height: 5rem; - margin-top: 0.75rem; + margin-top: 1.5rem; + margin-bottom: 1.125rem; cursor: pointer; user-select: none; @@ -278,3 +403,74 @@ const ShareButtonText = styled.div` color: ${color.grey["100"]}; `; + +const CopyInviteLink = styled.div` + display: flex; + align-items: center; + + font-weight: 600; + font-size: 0.875rem; + line-height: 102.5%; + + text-align: center; + letter-spacing: 0.07em; + text-transform: uppercase; + + color: ${color.grey["200"]}; + stroke: ${color.grey["200"]}; + + &:hover { + color: ${color.grey["300"]}; + stroke: ${color.grey["300"]}; + } + + cursor: pointer; +`; + +const ComingSoonLeaderboardContainer = styled.div` + margin-top: 4.5rem; + + height: 5rem; + + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +`; + +const ComingSoonLeaderboardContent = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + width: 10rem; +`; + +const ComingSoonLeaderboardContent1 = styled.div` + font-weight: 600; + font-size: 0.8125rem; + line-height: 102.5%; + + letter-spacing: 0.19em; + text-transform: uppercase; + + margin-bottom: 0.5rem; + + color: ${color.grey["700"]}; +`; + +const ComingSoonLeaderboardContent2 = styled.div` + font-weight: 600; + font-size: 1rem; + line-height: 102.5%; + + letter-spacing: 0.07em; + text-transform: uppercase; + + color: ${color.grey["500"]}; +`; + +const RotateSvg = styled.svg` + animation: ${spinAnimation} 4s linear infinite; +`; From 85e18f1b6531433302ff634355d5ad57a771e76d Mon Sep 17 00:00:00 2001 From: HeesungB Date: Tue, 20 Dec 2022 23:54:17 +0900 Subject: [PATCH 2/2] Add referral error case --- constants/error-message.ts | 4 ++++ pages/verification/index.tsx | 18 ++++++++++++++++-- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/constants/error-message.ts b/constants/error-message.ts index 19e633e..b50f388 100644 --- a/constants/error-message.ts +++ b/constants/error-message.ts @@ -19,3 +19,7 @@ export const ACCOUNT_NOT_EXIST_MESSAGE = 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."; + +export const INVALID_REFERRAL_ERROR = "Invalid referral:"; +export const INVALID_REFERRAL_MESSAGE = + "Make sure that the referrer ICNS name has been registered."; diff --git a/pages/verification/index.tsx b/pages/verification/index.tsx index 8311e24..1ca5caa 100644 --- a/pages/verification/index.tsx +++ b/pages/verification/index.tsx @@ -56,6 +56,8 @@ import { ACCOUNT_NOT_EXIST_MESSAGE, INSUFFICIENT_GAS_ERROR, INSUFFICIENT_GAS_MESSAGE, + INVALID_REFERRAL_ERROR, + INVALID_REFERRAL_MESSAGE, KEPLR_NOT_FOUND_ERROR, TWITTER_LOGIN_ERROR, VERIFICATION_THRESHOLD_ERROR, @@ -454,6 +456,12 @@ export default function VerificationPage() { return; } + if (message.includes(INVALID_REFERRAL_ERROR)) { + setErrorMessage({ message: INVALID_REFERRAL_MESSAGE }); + setErrorModalOpen(true); + return; + } + setErrorMessage({ message: (error?.response?.data as QueryError).message, }); @@ -528,8 +536,10 @@ export default function VerificationPage() { You are not owner of this name.
- Please select the account ( - {Bech32Address.shortenAddress(nftOwnerAddress, 28)}) + Please select the account{" "} + + ({Bech32Address.shortenAddress(nftOwnerAddress, 28)}) + ) : null} @@ -639,3 +649,7 @@ const OwnerAlert = styled.div` padding-top: 1.25rem; `; + +const AddressBold = styled.span` + color: ${color.white}; +`;