diff --git a/components/logo/index.tsx b/components/logo/index.tsx
index d5aa6b3..eb1f80e 100644
--- a/components/logo/index.tsx
+++ b/components/logo/index.tsx
@@ -1,5 +1,6 @@
// NextJs
import Image from "next/image";
+import Link from "next/link";
// Image Assets
import LogoIcon from "../../public/images/svg/logo.svg";
@@ -10,8 +11,10 @@ import { FunctionComponent } from "react";
export const Logo: FunctionComponent = () => {
return (
-
-
-
+
+
+
+
+
);
};
diff --git a/components/primary-button/index.tsx b/components/primary-button/index.ts
similarity index 100%
rename from components/primary-button/index.tsx
rename to components/primary-button/index.ts
diff --git a/components/skeleton/index.ts b/components/skeleton/index.ts
new file mode 100644
index 0000000..67d020b
--- /dev/null
+++ b/components/skeleton/index.ts
@@ -0,0 +1,3 @@
+export * from "./skeleton-animation";
+export * from "./skeleton-circle";
+export * from "./skeleton-text";
diff --git a/components/skeleton/skeleton-animation.ts b/components/skeleton/skeleton-animation.ts
new file mode 100644
index 0000000..b1f5bb9
--- /dev/null
+++ b/components/skeleton/skeleton-animation.ts
@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import color from "../../styles/color";
+
+export const SkeletonAnimation = styled.div`
+ opacity: 0.35 !important;
+ background-image: linear-gradient(
+ 0.25turn,
+ transparent,
+ ${color.grey["400"]},
+ transparent
+ ),
+ linear-gradient(${color.grey["500"]}, ${color.grey["500"]}),
+ radial-gradient(
+ 38px circle at 19px 19px,
+ ${color.grey["500"]} 50%,
+ transparent 51%
+ ),
+ linear-gradient(${color.grey["500"]}, ${color.grey["500"]});
+ background-repeat: no-repeat;
+ background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
+ background-position: -315px 0, 0 0, 0px 190px, 50px 195px;
+ animation: loading 2s infinite;
+
+ @keyframes loading {
+ to {
+ background-position: 315px 0, 0 0, 0 190px, 50px 195px;
+ }
+ }
+`;
diff --git a/components/skeleton/skeleton-circle.ts b/components/skeleton/skeleton-circle.ts
new file mode 100644
index 0000000..d2fdc4f
--- /dev/null
+++ b/components/skeleton/skeleton-circle.ts
@@ -0,0 +1,17 @@
+// Styles
+import color from "../../styles/color";
+import styled from "styled-components";
+
+// Components
+import { SkeletonAnimation } from "./skeleton-animation";
+
+// Types
+import { WidthHeightProps } from "../../types";
+
+export const SkeletonCircle = styled(SkeletonAnimation)`
+ width: ${(props) => props.width};
+ height: ${(props) => props.height};
+
+ background-color: ${color.grey["500"]};
+ border-radius: 50%;
+`;
diff --git a/components/skeleton/skeleton-text.ts b/components/skeleton/skeleton-text.ts
new file mode 100644
index 0000000..8d18e2f
--- /dev/null
+++ b/components/skeleton/skeleton-text.ts
@@ -0,0 +1,13 @@
+// Styles
+import styled from "styled-components";
+
+// Components
+import { SkeletonAnimation } from "./skeleton-animation";
+
+// Types
+import { WidthHeightProps } from "../../types";
+
+export const SkeletonText = styled(SkeletonAnimation)`
+ width: ${(props) => props.width};
+ height: ${(props) => props.height};
+`;
diff --git a/next.config.js b/next.config.js
index 6fee067..d3197ea 100644
--- a/next.config.js
+++ b/next.config.js
@@ -5,6 +5,18 @@ const nextConfig = {
compiler: {
styledComponents: true,
},
+ images: {
+ remotePatterns: [
+ {
+ protocol: "https",
+ hostname: "pbs.twimg.com",
+ },
+ {
+ protocol: "https",
+ hostname: "raw.githubusercontent.com",
+ },
+ ],
+ },
};
module.exports = nextConfig;
diff --git a/pages/verification/index.tsx b/pages/verification/index.tsx
index c506adc..20a97df 100644
--- a/pages/verification/index.tsx
+++ b/pages/verification/index.tsx
@@ -1,249 +1,316 @@
-// Style
-import styled from "styled-components";
-import { Logo } from "../../components/logo";
+// 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 (
-
-
-
-
-
-
-
-
-
+ {isLoading ? (
+
+
+
-
-
-
+
+
+
+
+
+
+
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
-
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ) : (
+
+
+
+
+
+
+
+ BaeHeesung
+
+ @BaeHeesung25
+
+
+
+
+ 42 Following
+
+
+
+ 42 Following
+
+
+
+
+ Product UIUX designer @Keplrwallet and I like @regen_network🌿
+
+
+
+
+
+ Chain List
+ Search
+
+
+
+
+
+
+
+
+ .osmo
+
+ cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs
+
+
+
+
+
+
+
+
+
+
+
+
+
+ .osmo
+
+ cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs
+
+
+
+
+
+
+
+
+
+
+
+
+
+ .osmo
+
+ cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs
+
+
+
+
+
+
+
+
+
+
+
+
+
+ .osmo
+
+ cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs
+
+
+
+
+
+
+
+
+
+
+
+
+
+ .osmo
+
+ cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs
+
+
+
+
+
+
+
+
+
+
+
+
+
+ .osmo
+
+ cosmos14ky6udatsvdx859050mrnr7rvml0huue2wszvs
+
+
+
+
+
+
+
+
+
+
+ Register
+
+
+ )}
);
}
-
-const Container = styled.div`
- width: 100vw;
- height: 100vh;
-`;
-
-const MainContainer = styled.div`
- display: flex;
- justify-content: center;
-
- color: white;
-`;
-
-const ContentContainer = styled.div`
- display: flex;
- flex-direction: column;
-
- width: 40rem;
-
- margin-top: 5rem;
-`;
-
-const ProfileContainer = styled.div`
- display: flex;
- flex-direction: row;
-
- width: 100%;
-
- padding: 2rem 2rem;
-
- background-color: ${(props) => props.color};
-`;
-
-const ProfileContentContainer = styled.div`
- display: flex;
- flex-direction: column;
- gap: 1rem;
-
- margin-left: 1.5rem;
-`;
-
-const ProfileFollowContainer = styled.div`
- display: flex;
- flex-direction: row;
-
- gap: 2rem;
-`;
-
-const ChainContainer = styled.div`
- display: flex;
- flex-direction: column;
- gap: 1rem;
-
- width: 100%;
-
- padding: 2rem 2rem 1rem 2rem;
-
- background-color: ${(props) => props.color};
-`;
-
-const ChainItemContainer = styled.div`
- display: flex;
- flex-direction: row;
-
- gap: 1rem;
-`;
-
-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`
- display: flex;
- justify-content: center;
-
- margin-top: 2rem;
-`;
-
-interface WidthHeightProps {
- width: string | number;
- height: string | number;
-}
-
-const SkeletonAnimation = styled.div`
- opacity: 0.35 !important;
- background-image: linear-gradient(
- 0.25turn,
- transparent,
- ${color.grey["400"]},
- transparent
- ),
- linear-gradient(${color.grey["500"]}, ${color.grey["500"]}),
- radial-gradient(
- 38px circle at 19px 19px,
- ${color.grey["500"]} 50%,
- transparent 51%
- ),
- linear-gradient(${color.grey["500"]}, ${color.grey["500"]});
- background-repeat: no-repeat;
- background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
- background-position: -315px 0, 0 0, 0px 190px, 50px 195px;
- animation: loading 2s infinite;
-
- @keyframes loading {
- to {
- background-position: 315px 0, 0 0, 0 190px, 50px 195px;
- }
- }
-`;
-
-const SkeletonCircle = styled(SkeletonAnimation)`
- width: ${(props) => props.width};
- height: ${(props) => props.height};
-
- background-color: ${color.grey["500"]};
- border-radius: 50%;
-`;
-
-const SkeletonText = styled(SkeletonAnimation)`
- width: ${(props) => props.width};
- height: ${(props) => props.height};
-`;
-
-const SkeletonTitle = styled.div`
- width: 8rem;
- height: 1.5rem;
-
- margin-top: 3rem;
- margin-bottom: 1rem;
-
- 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["600"]};
-`;
diff --git a/pages/verification/styled.ts b/pages/verification/styled.ts
new file mode 100644
index 0000000..38c2dfd
--- /dev/null
+++ b/pages/verification/styled.ts
@@ -0,0 +1,219 @@
+import styled from "styled-components";
+import color from "../../styles/color";
+import { WidthHeightProps } from "../../types";
+import { SkeletonAnimation } from "../../components/skeleton";
+
+export const Container = styled.div`
+ width: 100vw;
+ height: 100vh;
+`;
+
+export const MainContainer = styled.div`
+ display: flex;
+ justify-content: center;
+
+ color: white;
+`;
+
+export const ContentContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ width: 40rem;
+
+ margin-top: 5rem;
+`;
+
+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 ProfileFollowContainer = styled.div`
+ display: flex;
+ flex-direction: row;
+
+ gap: 1.5rem;
+`;
+
+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`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ gap: 1rem;
+
+ padding: 1.5rem;
+
+ &:hover {
+ background: ${color.grey["900"]};
+ }
+`;
+
+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;
+`;
+
+export const ButtonContainer = styled.div`
+ width: 10rem;
+ height: 4rem;
+
+ margin-top: 2rem;
+`;
+
+export const SkeletonButton = styled.div`
+ width: 12rem;
+ height: 4rem;
+
+ background-color: ${color.grey["700"]};
+`;
+
+export const SkeletonDivider = styled(SkeletonAnimation)`
+ width: 100%;
+ height: 1px;
+ background-color: ${color.grey["600"]};
+`;
+
+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 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["300"]};
+`;
+
+export const ChainListTitleContainer = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+
+ width: 100%;
+
+ margin-top: 2rem;
+ margin-bottom: 1rem;
+`;
+
+export const ChainListTitle = styled.div`
+ font-weight: 700;
+ font-size: 1.5rem;
+ line-height: 1.9rem;
+
+ color: ${color.white};
+`;
+
+export const SearchContainer = styled.div`
+ display: flex;
+ align-items: center;
+
+ border-radius: 3rem;
+
+ min-width: 10rem;
+ height: 2rem;
+
+ background-color: ${color.grey["700"]};
+`;
+
+export const ChainName = styled.div`
+ font-weight: 600;
+ font-size: 0.8rem;
+ line-height: 1rem;
+
+ color: ${color.grey["100"]};
+`;
+
+export const WalletAddress = styled.div`
+ font-weight: 500;
+ font-size: 0.8rem;
+ line-height: 1rem;
+
+ color: ${color.grey["400"]};
+`;
+
+export const Flex1 = styled.div`
+ flex: 1;
+`;
+
+export const ChainCheckBox = styled.input.attrs({ type: "checkbox" })`
+ width: 1.5rem;
+ height: 1.5rem;
+`;
diff --git a/styles/color.ts b/styles/color.ts
index 22c0d2a..395ae3c 100644
--- a/styles/color.ts
+++ b/styles/color.ts
@@ -14,11 +14,13 @@ const grey = {
900: "#181818",
};
+const white = "#FFFFFF";
const black = "#121212";
const color = {
primary,
grey,
+ white,
black,
orange,
};
diff --git a/types/index.ts b/types/index.ts
new file mode 100644
index 0000000..02795f0
--- /dev/null
+++ b/types/index.ts
@@ -0,0 +1 @@
+export * from "./width-height-props";
diff --git a/types/width-height-props.ts b/types/width-height-props.ts
new file mode 100644
index 0000000..ee65f11
--- /dev/null
+++ b/types/width-height-props.ts
@@ -0,0 +1,4 @@
+export interface WidthHeightProps {
+ width: string | number;
+ height: string | number;
+}