317 lines
11 KiB
TypeScript
317 lines
11 KiB
TypeScript
// React
|
|
import { useEffect, useState } from "react";
|
|
|
|
// NextJs
|
|
import Image from "next/image";
|
|
|
|
// Styles
|
|
import color from "../../styles/color";
|
|
|
|
// Components
|
|
import { Logo } from "../../components/logo";
|
|
import { SkeletonCircle, SkeletonText } from "../../components/skeleton";
|
|
import {
|
|
Container,
|
|
MainContainer,
|
|
ContentContainer,
|
|
ProfileContainer,
|
|
ProfileFollowContainer,
|
|
ProfileContentContainer,
|
|
ProfileImageContainer,
|
|
ProfileNameContainer,
|
|
ProfileFollowerContainer,
|
|
ProfileFollowBold,
|
|
ProfileUserNameContainer,
|
|
ProfileDescriptionContainer,
|
|
ChainListTitle,
|
|
SearchContainer,
|
|
ChainContainer,
|
|
ChainItemContainer,
|
|
ChainImageContainer,
|
|
ChainInfoContainer,
|
|
ChainListTitleContainer,
|
|
ChainName,
|
|
WalletAddress,
|
|
Flex1,
|
|
ChainCheckBox,
|
|
ButtonContainer,
|
|
SkeletonDivider,
|
|
SkeletonButton,
|
|
} from "./styled";
|
|
import { PrimaryButton } from "../../components/primary-button";
|
|
|
|
export default function VerificationPage() {
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const dummy = new Array(5);
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => setIsLoading(false), 1500);
|
|
}, []);
|
|
|
|
return (
|
|
<Container>
|
|
<Logo />
|
|
|
|
<MainContainer>
|
|
{isLoading ? (
|
|
<ContentContainer>
|
|
<ProfileContainer color={color.grey["700"]}>
|
|
<SkeletonCircle width="5.5rem" height="5.5rem" />
|
|
|
|
<ProfileContentContainer>
|
|
<ProfileNameContainer>
|
|
<SkeletonText width="5rem" height="1.5rem" />
|
|
</ProfileNameContainer>
|
|
<ProfileUserNameContainer>
|
|
<SkeletonText width="5rem" height="1rem" />
|
|
</ProfileUserNameContainer>
|
|
|
|
<ProfileFollowContainer>
|
|
<SkeletonText width="8rem" height="1rem" />
|
|
<SkeletonText width="8rem" height="1rem" />
|
|
</ProfileFollowContainer>
|
|
|
|
<SkeletonText width="20rem" height="1rem" />
|
|
</ProfileContentContainer>
|
|
</ProfileContainer>
|
|
|
|
<ChainListTitleContainer>
|
|
<SkeletonText width="8rem" height="1.5rem" />
|
|
</ChainListTitleContainer>
|
|
|
|
<ChainContainer color={color.grey["700"]}>
|
|
<ChainItemContainer>
|
|
<ChainImageContainer width="3rem" height="3rem">
|
|
<SkeletonCircle width="3rem" height="3rem" />
|
|
</ChainImageContainer>
|
|
<ChainInfoContainer>
|
|
<SkeletonText width="4rem" height="1rem" />
|
|
<SkeletonText width="12rem" height="1rem" />
|
|
</ChainInfoContainer>
|
|
</ChainItemContainer>
|
|
|
|
<SkeletonDivider />
|
|
|
|
<ChainItemContainer>
|
|
<ChainImageContainer width="3rem" height="3rem">
|
|
<SkeletonCircle width="3rem" height="3rem" />
|
|
</ChainImageContainer>
|
|
<ChainInfoContainer>
|
|
<SkeletonText width="4rem" height="1rem" />
|
|
<SkeletonText width="12rem" height="1rem" />
|
|
</ChainInfoContainer>
|
|
</ChainItemContainer>
|
|
|
|
<SkeletonDivider />
|
|
|
|
<ChainItemContainer>
|
|
<ChainImageContainer width="3rem" height="3rem">
|
|
<SkeletonCircle width="3rem" height="3rem" />
|
|
</ChainImageContainer>
|
|
<ChainInfoContainer>
|
|
<SkeletonText width="4rem" height="1rem" />
|
|
<SkeletonText width="12rem" height="1rem" />
|
|
</ChainInfoContainer>
|
|
</ChainItemContainer>
|
|
|
|
<SkeletonDivider />
|
|
|
|
<ChainItemContainer>
|
|
<ChainImageContainer width="3rem" height="3rem">
|
|
<SkeletonCircle width="3rem" height="3rem" />
|
|
</ChainImageContainer>
|
|
<ChainInfoContainer>
|
|
<SkeletonText width="4rem" height="1rem" />
|
|
<SkeletonText width="12rem" height="1rem" />
|
|
</ChainInfoContainer>
|
|
</ChainItemContainer>
|
|
|
|
<SkeletonDivider />
|
|
|
|
<ChainItemContainer>
|
|
<ChainImageContainer width="3rem" height="3rem">
|
|
<SkeletonCircle width="3rem" height="3rem" />
|
|
</ChainImageContainer>
|
|
<ChainInfoContainer>
|
|
<SkeletonText width="4rem" height="1rem" />
|
|
<SkeletonText width="12rem" height="1rem" />
|
|
</ChainInfoContainer>
|
|
</ChainItemContainer>
|
|
|
|
<SkeletonDivider />
|
|
</ChainContainer>
|
|
|
|
<ButtonContainer>
|
|
<SkeletonButton />
|
|
</ButtonContainer>
|
|
</ContentContainer>
|
|
) : (
|
|
<ContentContainer>
|
|
<ProfileContainer color={color.grey["700"]}>
|
|
<ProfileImageContainer>
|
|
<Image
|
|
src="https://pbs.twimg.com/profile_images/1503375455532974084/KWG1XmEc_400x400.jpg"
|
|
alt="profile image"
|
|
fill={true}
|
|
/>
|
|
</ProfileImageContainer>
|
|
|
|
<ProfileContentContainer>
|
|
<ProfileNameContainer>BaeHeesung</ProfileNameContainer>
|
|
<ProfileUserNameContainer>
|
|
@BaeHeesung25
|
|
</ProfileUserNameContainer>
|
|
|
|
<ProfileFollowContainer>
|
|
<ProfileFollowerContainer>
|
|
<ProfileFollowBold>42</ProfileFollowBold> Following
|
|
</ProfileFollowerContainer>
|
|
|
|
<ProfileFollowerContainer>
|
|
<ProfileFollowBold>42</ProfileFollowBold> Following
|
|
</ProfileFollowerContainer>
|
|
</ProfileFollowContainer>
|
|
|
|
<ProfileDescriptionContainer>
|
|
Product UIUX designer @Keplrwallet and I like @regen_network🌿
|
|
</ProfileDescriptionContainer>
|
|
</ProfileContentContainer>
|
|
</ProfileContainer>
|
|
|
|
<ChainListTitleContainer>
|
|
<ChainListTitle>Chain List</ChainListTitle>
|
|
<SearchContainer>Search</SearchContainer>
|
|
</ChainListTitleContainer>
|
|
|
|
<ChainContainer color={color.grey["700"]}>
|
|
<ChainItemContainer>
|
|
<ChainImageContainer width="3rem" height="3rem">
|
|
<Image
|
|
src="https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/osmosis/chain.png"
|
|
alt="chain image"
|
|
fill={true}
|
|
/>
|
|
</ChainImageContainer>
|
|
<ChainInfoContainer>
|
|
<ChainName>.osmo</ChainName>
|
|
<WalletAddress>
|
|
cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs
|
|
</WalletAddress>
|
|
</ChainInfoContainer>
|
|
|
|
<Flex1 />
|
|
|
|
<ChainCheckBox />
|
|
</ChainItemContainer>
|
|
|
|
<ChainItemContainer>
|
|
<ChainImageContainer width="3rem" height="3rem">
|
|
<Image
|
|
src="https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/osmosis/chain.png"
|
|
alt="chain image"
|
|
fill={true}
|
|
/>
|
|
</ChainImageContainer>
|
|
<ChainInfoContainer>
|
|
<ChainName>.osmo</ChainName>
|
|
<WalletAddress>
|
|
cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs
|
|
</WalletAddress>
|
|
</ChainInfoContainer>
|
|
|
|
<Flex1 />
|
|
|
|
<ChainCheckBox />
|
|
</ChainItemContainer>
|
|
|
|
<ChainItemContainer>
|
|
<ChainImageContainer width="3rem" height="3rem">
|
|
<Image
|
|
src="https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/osmosis/chain.png"
|
|
alt="chain image"
|
|
fill={true}
|
|
/>
|
|
</ChainImageContainer>
|
|
<ChainInfoContainer>
|
|
<ChainName>.osmo</ChainName>
|
|
<WalletAddress>
|
|
cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs
|
|
</WalletAddress>
|
|
</ChainInfoContainer>
|
|
|
|
<Flex1 />
|
|
|
|
<ChainCheckBox />
|
|
</ChainItemContainer>
|
|
|
|
<ChainItemContainer>
|
|
<ChainImageContainer width="3rem" height="3rem">
|
|
<Image
|
|
src="https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/osmosis/chain.png"
|
|
alt="chain image"
|
|
fill={true}
|
|
/>
|
|
</ChainImageContainer>
|
|
<ChainInfoContainer>
|
|
<ChainName>.osmo</ChainName>
|
|
<WalletAddress>
|
|
cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs
|
|
</WalletAddress>
|
|
</ChainInfoContainer>
|
|
|
|
<Flex1 />
|
|
|
|
<ChainCheckBox />
|
|
</ChainItemContainer>
|
|
|
|
<ChainItemContainer>
|
|
<ChainImageContainer width="3rem" height="3rem">
|
|
<Image
|
|
src="https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/osmosis/chain.png"
|
|
alt="chain image"
|
|
fill={true}
|
|
/>
|
|
</ChainImageContainer>
|
|
<ChainInfoContainer>
|
|
<ChainName>.osmo</ChainName>
|
|
<WalletAddress>
|
|
cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs
|
|
</WalletAddress>
|
|
</ChainInfoContainer>
|
|
|
|
<Flex1 />
|
|
|
|
<ChainCheckBox />
|
|
</ChainItemContainer>
|
|
|
|
<ChainItemContainer>
|
|
<ChainImageContainer width="3rem" height="3rem">
|
|
<Image
|
|
src="https://raw.githubusercontent.com/chainapsis/keplr-chain-registry/main/images/osmosis/chain.png"
|
|
alt="chain image"
|
|
fill={true}
|
|
/>
|
|
</ChainImageContainer>
|
|
<ChainInfoContainer>
|
|
<ChainName>.osmo</ChainName>
|
|
<WalletAddress>
|
|
cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs
|
|
</WalletAddress>
|
|
</ChainInfoContainer>
|
|
|
|
<Flex1 />
|
|
|
|
<ChainCheckBox />
|
|
</ChainItemContainer>
|
|
</ChainContainer>
|
|
|
|
<ButtonContainer>
|
|
<PrimaryButton>Register</PrimaryButton>
|
|
</ButtonContainer>
|
|
</ContentContainer>
|
|
)}
|
|
</MainContainer>
|
|
</Container>
|
|
);
|
|
}
|