From fc58cad6a849cdd94a0470da965fee1c6303eb98 Mon Sep 17 00:00:00 2001 From: HeesungB Date: Fri, 9 Dec 2022 20:59:52 +0900 Subject: [PATCH] Divided into several components --- components/chain-list/chain-item.tsx | 63 ++++ components/chain-list/chain-list.tsx | 59 ++++ components/chain-list/index.ts | 2 + components/primary-button/index.ts | 13 +- components/skeleton/index.ts | 2 + components/skeleton/skeleton-chain-list.tsx | 140 ++++++++ components/twitter-profile/index.tsx | 133 +++++++ pages/verification/index.tsx | 362 ++------------------ styles/color.ts | 14 +- 9 files changed, 449 insertions(+), 339 deletions(-) create mode 100644 components/chain-list/chain-item.tsx create mode 100644 components/chain-list/chain-list.tsx create mode 100644 components/chain-list/index.ts create mode 100644 components/skeleton/skeleton-chain-list.tsx create mode 100644 components/twitter-profile/index.tsx diff --git a/components/chain-list/chain-item.tsx b/components/chain-list/chain-item.tsx new file mode 100644 index 0000000..7805fdd --- /dev/null +++ b/components/chain-list/chain-item.tsx @@ -0,0 +1,63 @@ +import { AccountInfo } from "../../types"; +import { FunctionComponent } from "react"; +import { + ChainImageContainer, + ChainInfoContainer, + ChainItemContainer, +} from "./chain-list"; + +import Image from "next/image"; +import color from "../../styles/color"; +import styled from "styled-components"; + +interface Props { + chainInfo: AccountInfo; +} + +export const ChainItem: FunctionComponent = (props) => { + const { chainInfo } = props; + return ( + + + {`${chainInfo.prefix} + + + {`.${chainInfo.prefix}`} + {chainInfo.address} + + + + + + + ); +}; + +const ChainName = styled.div` + font-weight: 600; + font-size: 0.8rem; + line-height: 1rem; + + color: ${color.grey["100"]}; +`; + +const WalletAddress = styled.div` + font-weight: 500; + font-size: 0.8rem; + line-height: 1rem; + + color: ${color.grey["400"]}; +`; + +const Flex1 = styled.div` + flex: 1; +`; + +const ChainCheckBox = styled.input.attrs({ type: "checkbox" })` + width: 1.5rem; + height: 1.5rem; +`; diff --git a/components/chain-list/chain-list.tsx b/components/chain-list/chain-list.tsx new file mode 100644 index 0000000..a3530ef --- /dev/null +++ b/components/chain-list/chain-list.tsx @@ -0,0 +1,59 @@ +import { FunctionComponent } from "react"; +import { AccountInfo, WidthHeightProps } from "../../types"; +import color from "../../styles/color"; +import styled from "styled-components"; +import { ChainItem } from "./chain-item"; + +interface Props { + chainList: AccountInfo[]; +} + +export const ChainList: FunctionComponent = (props) => { + const { chainList } = props; + return ( + + {chainList.map((chainInfo) => ( + + ))} + + ); +}; + +export const ChainContainer = styled.div` + display: flex; + flex-direction: column; + width: 100%; + max-height: 33rem; + overflow: scroll; + + background-color: ${(props) => props.color}; +`; + +export const ChainItemContainer = styled.div<{ isLoading: boolean }>` + display: flex; + flex-direction: row; + align-items: center; + + gap: 1rem; + + padding: 1.5rem; + + cursor: pointer; + + &:hover { + background: ${(props) => (props.isLoading ? null : color.grey["700"])}; + } +`; + +export const ChainImageContainer = styled.div` + width: ${(props) => props.width}; + height: ${(props) => props.height}; + + position: relative; +`; + +export const ChainInfoContainer = styled.div` + display: flex; + flex-direction: column; + gap: 0.5rem; +`; diff --git a/components/chain-list/index.ts b/components/chain-list/index.ts new file mode 100644 index 0000000..c7a2bc3 --- /dev/null +++ b/components/chain-list/index.ts @@ -0,0 +1,2 @@ +export * from "./chain-list"; +export * from "./chain-item"; diff --git a/components/primary-button/index.ts b/components/primary-button/index.ts index 45cace6..8f651f1 100644 --- a/components/primary-button/index.ts +++ b/components/primary-button/index.ts @@ -7,7 +7,7 @@ export const PrimaryButton = styled.button` border: none; - background-color: ${color.primary}; + background-color: ${color.orange["100"]}; padding: 11px 30px; font-family: "Inter", serif; @@ -16,7 +16,16 @@ export const PrimaryButton = styled.button` font-size: 1.5rem; line-height: 20px; - color: ${color.orange}; + color: ${color.orange["50"]}; cursor: pointer; + + &:hover { + transition-duration: 0.5s; + background-color: ${color.orange["200"]}; + } + + &:disabled { + background-color: ${color.orange["200"]}; + } `; diff --git a/components/skeleton/index.ts b/components/skeleton/index.ts index 67d020b..b314aba 100644 --- a/components/skeleton/index.ts +++ b/components/skeleton/index.ts @@ -1,3 +1,5 @@ export * from "./skeleton-animation"; export * from "./skeleton-circle"; export * from "./skeleton-text"; + +export * from "./skeleton-chain-list"; diff --git a/components/skeleton/skeleton-chain-list.tsx b/components/skeleton/skeleton-chain-list.tsx new file mode 100644 index 0000000..26db68b --- /dev/null +++ b/components/skeleton/skeleton-chain-list.tsx @@ -0,0 +1,140 @@ +import styled from "styled-components"; +import color from "../../styles/color"; + +import { FunctionComponent } from "react"; + +import { SkeletonAnimation } from "./skeleton-animation"; +import { SkeletonCircle } from "./skeleton-circle"; +import { SkeletonText } from "./skeleton-text"; +import { + ChainListTitleContainer, + ContentContainer, + ButtonContainer, +} from "../../pages/verification"; + +import { + ProfileContainer, + ProfileContentContainer, + ProfileFollowContainer, + ProfileNameContainer, + ProfileUserNameContainer, +} from "../twitter-profile"; +import { + ChainContainer, + ChainImageContainer, + ChainInfoContainer, + ChainItemContainer, +} from "../chain-list"; + +export const SkeletonChainList: FunctionComponent = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +const SkeletonTitle = styled.div` + width: 8rem; + height: 1.5rem; + background-color: ${color.grey["700"]}; +`; + +const SkeletonButton = styled.div` + width: 12rem; + height: 4rem; + + background-color: ${color.grey["700"]}; +`; + +const SkeletonDivider = styled(SkeletonAnimation)` + width: 100%; + height: 1px; + background-color: ${color.grey["500"]}; +`; diff --git a/components/twitter-profile/index.tsx b/components/twitter-profile/index.tsx new file mode 100644 index 0000000..6314efb --- /dev/null +++ b/components/twitter-profile/index.tsx @@ -0,0 +1,133 @@ +import color from "../../styles/color"; +import styled from "styled-components"; +import { TwitterAuthInfoResponse } from "../../types"; +import { FunctionComponent } from "react"; +import Image from "next/image"; + +interface Props { + twitterProfileInformation?: TwitterAuthInfoResponse | null; +} + +export const TwitterProfile: FunctionComponent = (props) => { + const { twitterProfileInformation } = props; + + return ( + + + twitter profile image + + + + + {twitterProfileInformation?.name} + + + @{twitterProfileInformation?.username} + + + + + + {twitterProfileInformation?.public_metrics?.following_count} + {" "} + Following + + + + + {twitterProfileInformation?.public_metrics?.followers_count} + {" "} + Followers + + + + + {twitterProfileInformation?.description} + + + + ); +}; + +export const ProfileContainer = styled.div` + display: flex; + flex-direction: row; + + width: 100%; + + padding: 1.5rem 2rem; + + background-color: ${(props) => props.color}; +`; + +export const ProfileContentContainer = styled.div` + display: flex; + flex-direction: column; + gap: 0.85rem; + + margin-left: 1.5rem; +`; + +export const ProfileImageContainer = styled.div` + width: 5rem; + height: 5rem; + + margin-top: -3rem; + + border-radius: 50%; + + overflow: hidden; + + position: relative; +`; + +export const ProfileNameContainer = styled.div` + font-weight: 600; + font-size: 1.2rem; + line-height: 1.5rem; + + color: ${color.white}; +`; + +export const ProfileUserNameContainer = styled.div` + font-weight: 500; + font-size: 0.8rem; + line-height: 1rem; + + color: ${color.grey["100"]}; +`; + +export const ProfileFollowContainer = styled.div` + display: flex; + flex-direction: row; + + gap: 1.5rem; +`; + +export const ProfileFollowerContainer = styled.div` + font-weight: 500; + font-size: 0.8rem; + line-height: 1rem; + + color: ${color.grey["400"]}; +`; + +export const ProfileFollowBold = styled.span` + font-weight: 600; + font-size: 0.8rem; + line-height: 1rem; + + color: ${color.white}; +`; + +export const ProfileDescriptionContainer = styled.div` + font-weight: 500; + font-size: 0.8rem; + line-height: 1rem; + + color: ${color.grey["100"]}; +`; diff --git a/pages/verification/index.tsx b/pages/verification/index.tsx index 1e0f776..d44640c 100644 --- a/pages/verification/index.tsx +++ b/pages/verification/index.tsx @@ -19,14 +19,15 @@ import color from "../../styles/color"; // Components import { Logo } from "../../components/logo"; -import { - SkeletonAnimation, - SkeletonCircle, - SkeletonText, -} from "../../components/skeleton"; +import { SkeletonChainList } from "../../components/skeleton"; import { PrimaryButton } from "../../components/primary-button"; import { AccountInfos } from "../../config"; +import { + ProfileContainer, + TwitterProfile, +} from "../../components/twitter-profile"; +import { ChainList } from "../../components/chain-list"; export default function VerificationPage() { const [twitterAuthInfo, setTwitterAuthInfo] = @@ -48,24 +49,24 @@ export default function VerificationPage() { setTwitterAuthInfo(newTwitterAuthInfo); - const verifierMsg: VerifierMsg = { - unique_twitter_id: newTwitterAuthInfo.id, - name: newTwitterAuthInfo.username, - claimer: "osmo1y5mm5nj5m8ttddt5ccspek6xgyyavehrkak7gq", - contract_address: "osmo1y5mm5nj5m8ttddt5ccspek6xgyyavehrkak7gq", - chain_id: "osmosis-1", - }; - - await request("/api/icns-verification", { - method: "post", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - msg: JSON.stringify(verifierMsg), - authToken: newTwitterAuthInfo.accessToken, - }), - }); + // const verifierMsg: VerifierMsg = { + // unique_twitter_id: newTwitterAuthInfo.id, + // name: newTwitterAuthInfo.username, + // claimer: "osmo1y5mm5nj5m8ttddt5ccspek6xgyyavehrkak7gq", + // contract_address: "osmo1y5mm5nj5m8ttddt5ccspek6xgyyavehrkak7gq", + // chain_id: "osmosis-1", + // }; + // + // await request("/api/icns-verification", { + // method: "post", + // headers: { + // "Content-Type": "application/json", + // }, + // body: JSON.stringify({ + // msg: JSON.stringify(verifierMsg), + // authToken: newTwitterAuthInfo.accessToken, + // }), + // }); setIsLoading(false); } @@ -80,164 +81,17 @@ export default function VerificationPage() { {isLoading ? ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + ) : ( - - - profile image - - - - - {twitterAuthInfo?.name} - - - {twitterAuthInfo?.username} - - - - - - {twitterAuthInfo?.public_metrics?.following_count} - {" "} - Following - - - - - {twitterAuthInfo?.public_metrics?.followers_count} - {" "} - Followers - - - - - {twitterAuthInfo?.description} - - - + Chain List Search - - {AccountInfos.map((accountInfo) => ( - - - {`${accountInfo.prefix} - - - {`.${accountInfo.prefix}`} - {accountInfo.address} - - - - - - - ))} - + Register @@ -261,7 +115,7 @@ const MainContainer = styled.div` color: white; `; -const ContentContainer = styled.div` +export const ContentContainer = styled.div` display: flex; flex-direction: column; align-items: center; @@ -271,143 +125,14 @@ const ContentContainer = styled.div` margin-top: 5rem; `; -const ProfileContainer = styled.div` - display: flex; - flex-direction: row; - - width: 100%; - - padding: 1.5rem 2rem; - - background-color: ${(props) => props.color}; -`; - -const ProfileContentContainer = styled.div` - display: flex; - flex-direction: column; - gap: 0.85rem; - - margin-left: 1.5rem; -`; - -const ProfileFollowContainer = styled.div` - display: flex; - flex-direction: row; - - gap: 1.5rem; -`; - -const ChainContainer = styled.div` - display: flex; - flex-direction: column; - width: 100%; - max-height: 33rem; - overflow: scroll; - - background-color: ${(props) => props.color}; -`; - -const ChainItemContainer = styled.div` - display: flex; - flex-direction: row; - align-items: center; - - gap: 1rem; - - padding: 1.5rem; - - &:hover { - background: ${color.grey["900"]}; - } -`; - -const ChainImageContainer = styled.div` - width: ${(props) => props.width}; - height: ${(props) => props.height}; - - position: relative; -`; - -const ChainInfoContainer = styled.div` - display: flex; - flex-direction: column; - gap: 0.5rem; -`; - -const ButtonContainer = styled.div` - width: 10rem; +export const ButtonContainer = styled.div` + width: 12rem; height: 4rem; margin-top: 2rem; `; -const SkeletonButton = styled.div` - width: 12rem; - height: 4rem; - - background-color: ${color.grey["700"]}; -`; - -const SkeletonDivider = styled(SkeletonAnimation)` - width: 100%; - height: 1px; - background-color: ${color.grey["600"]}; -`; - -const ProfileImageContainer = styled.div` - width: 5rem; - height: 5rem; - - margin-top: -3rem; - - border-radius: 50%; - - overflow: hidden; - - position: relative; -`; - -const ProfileNameContainer = styled.div` - font-weight: 600; - font-size: 1.2rem; - line-height: 1.5rem; - - color: ${color.white}; -`; - -const ProfileUserNameContainer = styled.div` - font-weight: 500; - font-size: 0.8rem; - line-height: 1rem; - - color: ${color.grey["100"]}; -`; - -const ProfileFollowerContainer = styled.div` - font-weight: 500; - font-size: 0.8rem; - line-height: 1rem; - - color: ${color.grey["400"]}; -`; - -const ProfileFollowBold = styled.span` - font-weight: 600; - font-size: 0.8rem; - line-height: 1rem; - - color: ${color.white}; -`; - -const ProfileDescriptionContainer = styled.div` - font-weight: 500; - font-size: 0.8rem; - line-height: 1rem; - - color: ${color.grey["300"]}; -`; - -const ChainListTitleContainer = styled.div` +export const ChainListTitleContainer = styled.div` display: flex; flex-direction: row; justify-content: space-between; @@ -438,28 +163,3 @@ const SearchContainer = styled.div` background-color: ${color.grey["700"]}; `; - -const ChainName = styled.div` - font-weight: 600; - font-size: 0.8rem; - line-height: 1rem; - - color: ${color.grey["100"]}; -`; - -const WalletAddress = styled.div` - font-weight: 500; - font-size: 0.8rem; - line-height: 1rem; - - color: ${color.grey["400"]}; -`; - -const Flex1 = styled.div` - flex: 1; -`; - -const ChainCheckBox = styled.input.attrs({ type: "checkbox" })` - width: 1.5rem; - height: 1.5rem; -`; diff --git a/styles/color.ts b/styles/color.ts index 395ae3c..bdf9128 100644 --- a/styles/color.ts +++ b/styles/color.ts @@ -1,7 +1,12 @@ -const primary = "#FB5232"; - -const orange = "#FFCDC3"; +const orange = { + 50: "#FFCDC3", + 100: "#FB5232", + 200: "#A13E2A", + 300: "#62332A", + 400: "#442924", +}; +const white = "#FCFCFC"; const grey = { 100: "#A3A3A3", 200: "#868686", @@ -13,12 +18,9 @@ const grey = { 800: "#242424", 900: "#181818", }; - -const white = "#FFFFFF"; const black = "#121212"; const color = { - primary, grey, white, black,