+
+
+ {address ?
+ (
+ supportNetwork ?
+
+
+
+ )
+}
diff --git a/src/commons/Modal/index.tsx b/src/commons/Modal/index.tsx
new file mode 100644
index 0000000..6648b0d
--- /dev/null
+++ b/src/commons/Modal/index.tsx
@@ -0,0 +1,64 @@
+import React, { PropsWithChildren, useEffect, useState } from 'react';
+import { CloseIcon } from '../resources';
+import styles from './modal.module.scss';
+
+interface PropsType extends PropsWithChildren {
+ visible?: boolean;
+ className?: string;
+ contentClassName?: string;
+ closeIcon?: React.ReactNode;
+ closeIconClassName?: string;
+ onClose?: () => void;
+ backdrop?: boolean | (() => void);
+ backdropClassName?: string;
+}
+
+export default function Modal(props: PropsType) {
+ const [visible, setVisible] = useState
+ {label}
+
+ {icon}
+
+ {content}
+
+
+
+
+ )
+}
diff --git a/src/commons/Modal/modal.module.scss b/src/commons/Modal/modal.module.scss
new file mode 100644
index 0000000..914878a
--- /dev/null
+++ b/src/commons/Modal/modal.module.scss
@@ -0,0 +1,61 @@
+.modal {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+ .backdrop {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: var(--black-008);
+ z-index: 999;
+ }
+ .contentContainer {
+ width: max-content;
+ height: max-content;
+ position: relative;
+ z-index: 1000;
+ .close {
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ top: 10px;
+ right: 10px;
+ width: 24px;
+ height: 24px;
+ z-index: 1001;
+ border-radius: 12px;
+ cursor: pointer;
+ img {
+ width: 20px;
+ height: 20px;
+ &.closeIcon {
+ filter: contrast(0.1);
+ }
+ }
+ &:hover {
+ img {
+ &.closeIcon {
+ filter: contrast(1);
+ }
+ }
+ }
+ }
+ .content {
+ z-index: 1000;
+ background-color: var(--white);
+ border-radius: 5px;
+ border: 1px solid var(--blue-100);
+ padding: var(--space-12x) var(--space-10x);
+ box-shadow: 2px 2px 8px var(--black-005);
+ }
+ }
+}
diff --git a/src/commons/Tooltip/index.tsx b/src/commons/Tooltip/index.tsx
new file mode 100644
index 0000000..bd99256
--- /dev/null
+++ b/src/commons/Tooltip/index.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import styles from './tooltip.module.scss';
+
+type Children = React.DetailedReactHTMLElement
+ {closeIcon &&
+
+
+ {closeIcon}
+
+ }
+
+ {children}
+
+
+
+ , document.body)}
+
+ );
+}
diff --git a/src/commons/Tooltip/tooltip.module.scss b/src/commons/Tooltip/tooltip.module.scss
new file mode 100644
index 0000000..b579878
--- /dev/null
+++ b/src/commons/Tooltip/tooltip.module.scss
@@ -0,0 +1,70 @@
+.tooltip {
+ position: fixed;
+ z-index: 10000;
+ .point {
+ height: 1px;
+ width: 1px;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ .container {
+ position: absolute;
+ width: max-content;
+ height: max-content;
+ background-color: var(--white);
+ padding: var(--space-3x);;
+ border-radius: 5px;
+ border: 1px solid var(--gray-300);
+ box-shadow: 0px 2px 5px var(--black-005);
+ font-size: 0.75rem;
+ color: var(--black);
+ &::after {
+ content: "";
+ position: absolute;
+ border: 8px solid var(--white);
+ }
+ &.top {
+ flex-direction: column-reverse;
+ bottom: 8px;
+ &::after {
+ left: calc(50% - 8px);
+ bottom: -8px;
+ border-right-color: transparent;
+ border-bottom: none;
+ border-left-color: transparent;
+ }
+ }
+ &.right {
+ left: 8px;
+ &::after {
+ top: calc(50% - 8px);
+ left: -8px;
+ border-top-color: transparent;
+ border-bottom-color: transparent;
+ border-left: none;
+ }
+ }
+ &.bottom {
+ top: 20px;
+ &::after {
+ left: calc(50% - 8px);
+ top: -8px;
+ border-top: none;
+ border-right-color: transparent;
+ border-left-color: transparent;
+ }
+ }
+ &.left {
+ right: 8px;
+ &::after {
+ top: calc(50% - 8px);
+ right: -8px;
+ border-top-color: transparent;
+ border-right: none;
+ border-bottom-color: transparent;
+ }
+ }
+ }
+ }
+}
diff --git a/src/commons/resources.ts b/src/commons/resources.ts
new file mode 100644
index 0000000..31da0da
--- /dev/null
+++ b/src/commons/resources.ts
@@ -0,0 +1,35 @@
+import FaucetIcon from '../resources/icons/icon-faucet-on.svg';
+import AlertIcon from '../resources/icons/alert.svg';
+import AlertDiamondIcon from '../resources/icons/alert_diamond.svg';
+import CaretIcon from '../resources/icons/caret.svg';
+import WalletFilledIcon from '../resources/icons/wallet_filled.svg';
+import TwitterIcon from '../resources/icons/twitter.svg';
+import MediumIcon from '../resources/icons/medium.svg';
+import DiscordIcon from '../resources/icons/discord.svg';
+import EthereumIcon from '../resources/icons/ethereum.svg';
+import CopyIcon from '../resources/icons/copy.svg';
+import CheckedGrayIcon from '../resources/icons/check_circle_chainlink_gray.svg';
+import CloseIcon from '../resources/icons/close.svg';
+import MetaMaskIcon from '../resources/images/metamask.svg';
+import KaiKasIcon from '../resources/images/kaikas.png';
+import KlaytnIcon from '../resources/images/klaytn.png';
+
+
+
+export {
+ FaucetIcon,
+ AlertIcon,
+ AlertDiamondIcon,
+ CaretIcon,
+ WalletFilledIcon,
+ TwitterIcon,
+ MediumIcon,
+ DiscordIcon,
+ EthereumIcon,
+ CopyIcon,
+ CheckedGrayIcon,
+ CloseIcon,
+ MetaMaskIcon,
+ KaiKasIcon,
+ KlaytnIcon,
+}
\ No newline at end of file
diff --git a/src/commons/utils/caver.ts b/src/commons/utils/caver.ts
new file mode 100644
index 0000000..8f46444
--- /dev/null
+++ b/src/commons/utils/caver.ts
@@ -0,0 +1,89 @@
+
+import _ from 'lodash';
+import BN from 'bn.js';
+import { keccak256 } from "@ethersproject/keccak256";
+
+const isBN = function (bn: string) {
+ return BN.isBN(bn)
+}
+const isHexStrict = function (hex: string) {
+ return (_.isString(hex) || _.isNumber(hex)) && /^(-)?0x[0-9a-f]*$/i.test(hex)
+}
+
+const hexToBytes = function (hex: any) {
+ hex = hex.toString(16)
+
+ if (!isHexStrict(hex)) {
+ throw new Error(`Given value "${hex}" is not a valid hex string.`)
+ }
+
+ hex = hex.replace(/^0x/i, '')
+
+ const bytes = []
+ for (let c = 0; c < hex.length; c += 2) {
+ bytes.push(parseInt(hex.substr(c, 2), 16))
+ }
+ return bytes
+}
+
+
+const SHA3_NULL_S = '0xc5d2460186f7233c927e7db2dcc703c0e500b653ca82273b7bfad8045d85a470'
+
+const sha3 = function (value: any) {
+ // return null when value is not string type.
+ if (typeof value === 'number') return null
+
+ if (isHexStrict(value) && /^0x/i.test(value.toString())) {
+ value = hexToBytes(value)
+ }
+
+ if (isBN(value)) {
+ value = value.toString(10)
+ }
+
+ const returnValue = keccak256(value);
+
+ if (returnValue === SHA3_NULL_S) {
+ return null
+ }
+ return returnValue
+}
+
+const checkAddressChecksum = function (address: string) {
+ // Check each case
+ address = address.replace(/^0x/i, '');
+ const addressHash = (sha3(address.toLowerCase()) || "").replace(/^0x/i, '')
+
+ for (let i = 0; i < 40; i++) {
+ // the nth letter should be uppercase if the nth digit of casemap is 1
+ if (
+ (parseInt(addressHash[i], 16) > 7 && address[i].toUpperCase() !== address[i]) ||
+ (parseInt(addressHash[i], 16) <= 7 && address[i].toLowerCase() !== address[i])
+ ) {
+ return false
+ }
+ }
+ return true
+}
+
+
+const isAddress = function (address: string) {
+ // check if it has the basic requirements of an address
+ if (!/^(0x)?[0-9a-f]{40}$/i.test(address)) {
+ return false
+ // If it's ALL lowercase or ALL upppercase
+ }
+ if (/^(0x|0X)?[0-9a-f]{40}$/.test(address) || /^(0x|0X)?[0-9A-F]{40}$/.test(address)) {
+ return true
+ // Otherwise check each case
+ }
+ try {
+ return checkAddressChecksum(address)
+ }
+ catch {
+ return false
+ }
+}
+export const utils = {
+ isAddress
+}
\ No newline at end of file
diff --git a/src/commons/utils/constants.ts b/src/commons/utils/constants.ts
new file mode 100644
index 0000000..dbac32a
--- /dev/null
+++ b/src/commons/utils/constants.ts
@@ -0,0 +1,57 @@
+import { AlertIcon, EthereumIcon } from "../resources";
+
+export type Network = {
+ chainID: string;
+ chainIDHex: string;
+ network: string;
+ name: string;
+ icon: string;
+ rpcs: string[],
+ blockExplorerUrls: string[],
+ nativeCurrency: {
+ name: string;
+ symbol: string;
+ decimals: number,
+ },
+}
+
+export enum Wallet {
+ METAMASK = "METAMASK",
+ KAIKAS = "KAIKAS"
+}
+
+export enum Extension {
+ METAMASK = "https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn",
+ KAIKAS = "https://chrome.google.com/webstore/detail/kaikas/jblndlipeogpafnldhgmapagcccfchpi"
+}
+
+export const SUPPORTED_NETWORKS: Network[] = [{
+ chainID: "1001",
+ chainIDHex: "0x3e9",
+ network: "baobab",
+ name: "Klaytn Baobab Testnest",
+ icon: EthereumIcon,
+ rpcs: ["https://api.baobab.klaytn.net:8651"],
+ blockExplorerUrls: ["https://baobab.scope.klaytn.com/"],
+ nativeCurrency: {
+ name: "KLAY",
+ symbol: "KLAY",
+ decimals: 18,
+ },
+}];
+
+export const UNKNOW_NETWORK: Network = {
+ chainID: "",
+ chainIDHex: "",
+ network: "unknown",
+ name: "Unknown network",
+ icon: AlertIcon,
+ rpcs: [],
+ blockExplorerUrls: [],
+ nativeCurrency: {
+ name: "",
+ symbol: "",
+ decimals: 0,
+ },
+}
+export const SCAN_URL = "https://baobab.klaytnfinder.io/account"
\ No newline at end of file
diff --git a/src/commons/utils/helper.ts b/src/commons/utils/helper.ts
new file mode 100644
index 0000000..18bfc38
--- /dev/null
+++ b/src/commons/utils/helper.ts
@@ -0,0 +1,21 @@
+export const getShortWallet = (address: string) => {
+ return `${address.slice(0, 6)}...${address.slice(-6)}`;
+}
+
+export const getDifferentTime = (after: string | number | Date, before?: string | number | Date) => {
+ const first = new Date(after).getTime();
+ const last = (before && new Date(before).getTime()) || (Date.now() + new Date().getTimezoneOffset() * 60 * 1000);
+ const diff = (last - first) / 1000;
+ if (diff > 24 * 60 * 60) return `${Math.round(diff / (24 * 60 * 60))} days ago`;
+ if (diff > 60 * 60) return `${Math.round(diff / (60 * 60))} hours ago`;
+ if (diff > 60) return `${Math.round(diff / 60)} minutes ago`;
+ if (diff > 0) return `${Math.round(diff)} seconds ago`;
+ return "";
+}
+
+export const formatNumber = (value: number | string, decimal: number = 0) => {
+ const arr = `${value}`.split(".");
+ if (!decimal) return arr[0];
+ if (!arr[1]) arr.push("0");
+ return arr[0] + "." + arr[1].slice(0, decimal) + ("0".repeat(decimal - arr[1].slice(0, decimal).length))
+}
\ No newline at end of file
diff --git a/src/commons/utils/services.ts b/src/commons/utils/services.ts
new file mode 100644
index 0000000..690b33d
--- /dev/null
+++ b/src/commons/utils/services.ts
@@ -0,0 +1,36 @@
+import axios from "axios";
+
+const API_BASE_URL = process.env.REACT_APP_API_BASE_URL || "https://api-baobab.wallet.klaytn.com/faucet";
+export type RequestTokenParams = {
+ address: string;
+ token?: string;
+ ekey?: string;
+}
+
+export type ResposeRequestToken = {
+ status: number;
+ data: {
+ code: number,
+ target: "api",
+ result: "SUCCESS" | "ADDRESS ERROR",
+ data: string
+ }
+}
+
+export const axiosInstance = axios.create({
+ baseURL: API_BASE_URL,
+ headers: {
+ "Content-Type": "application/json",
+ "Accept": "application/json",
+ }
+})
+
+export const requestToken = async (params: RequestTokenParams): Promise
+
+
+ {title}
+
+
+
+ );
+}
diff --git a/src/components/Footer/footer.module.scss b/src/components/Footer/footer.module.scss
new file mode 100644
index 0000000..c6e319b
--- /dev/null
+++ b/src/components/Footer/footer.module.scss
@@ -0,0 +1,68 @@
+footer {
+ background-color: var(--gray-900);
+ .footerBox {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 36px var(--space-0x);
+ .footerLogo {
+ display: flex;
+ align-items: center;
+ img {
+ width: 28px;
+ height: 28px;
+ filter: invert(0.7);
+ margin-right: var(--space-2x);
+ }
+ span {
+ color: var(--gray-400);
+ font-weight: var(--font-weight-medium);
+ font-size: 1rem;
+ line-height: 1;
+ }
+ &:hover {
+ img {
+ filter: invert((1));
+ }
+ span {
+ color: var(--white);
+ }
+ }
+ }
+ .social {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ list-style: none;
+ margin: var(--space-0x);
+ li {
+ list-style: none;
+ margin-right: var(--space-3x);
+ a,
+ a:link,
+ a:visited {
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ img {
+ margin-right: var(--space-1x);
+ }
+ span {
+ color: var(--gray-400);
+ font-size: 0.875rem;
+ line-height: 1;
+ font-weight: var(--font-weight-medium);
+ }
+ }
+ a:hover {
+ img {
+ filter: brightness(100);
+ }
+ span {
+ color: var(--white);
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
new file mode 100644
index 0000000..5b197c7
--- /dev/null
+++ b/src/components/Footer/index.tsx
@@ -0,0 +1,36 @@
+import { DiscordIcon, KlaytnIcon, MediumIcon, TwitterIcon } from '../../commons/resources';
+import styles from './footer.module.scss';
+
+
+export default function Footer() {
+ return (
+
+ );
+}
diff --git a/src/components/Header/ConnectWallet/connect_wallet.module.scss b/src/components/Header/ConnectWallet/connect_wallet.module.scss
new file mode 100644
index 0000000..53fb361
--- /dev/null
+++ b/src/components/Header/ConnectWallet/connect_wallet.module.scss
@@ -0,0 +1,139 @@
+.connectNetwork {
+ .button {
+ display: flex;
+ align-items: center;
+ padding: var(--space-2x) var(--space-6x);
+ color: var(--blue-600);
+ border: 2px solid var(--blue-600);
+ border-radius: var(--space-1x);
+ background-color: var(--white);
+ font-weight: var(--font-weight-medium);
+ cursor: pointer;
+ height: 40px;
+ &:hover {
+ color: var(--blue-800);
+ border-color: var(--blue-800);
+ background-color: var(--blue-100);
+ }
+ img {
+ width: 16px;
+ height: 16px;
+ min-width: 16px;
+ margin-right: var(--space-2x);
+ }
+ }
+ .avatar {
+ width: 24px;
+ height: 24px;
+ min-width: 26px;
+ margin-right: var(--space-2x);
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAS9JREFUaEPtWLsNwkAMvetYgC0oqUB09Eh0TIBEQ8MY1KxAlyUiUVGyBQvQQXMpkO7hvMQhBD3K4PjyPnFsx/tq/wyZ3+ZyzV2G13bFhIo/rW9U/Hk2zcZHAUi8SAHDULKQ9cYNxkLoQRfHkYXx7f/y8MjGo+rkZiEBSLxLgUQE/SGThbwtVJTbbC9ElZQQglcVYs+NApAokwKsd6oqJAv1baHleJ6tQqj3aKh069vQhBgFoDW39RJIgXo8dRf1vwqgtQrq1xHH7J6HHUHRlx620wJgvA5SwJrIZKG+LYTOR/WY7Z288sAqJACGhaSAVYVkoW9ZyGsm7q4P/ZzZbS8kAA0ZkAINiXO7bfgKsBMZmozY7pXN4zaRsQcjr7B5BKBikmVOChjLY3or8WsKvAC3e3d27f4IIgAAAABJRU5ErkJggg==);
+ background-size: cover;
+ border-radius: 5px;
+ }
+ .label {
+ display: flex;
+ align-items: center;
+ span {
+ font-size: 0.875rem;
+ line-height: 1rem;
+ }
+ }
+ .contentContainer {
+ padding: 0px;
+ width: 294px;
+ .content {
+ .user {
+ padding: var(--space-4x);
+ background-color: var(--gray-100);
+ margin: var(--space-4x);
+ .wallet {
+ display: flex;
+ align-items: center;
+ margin-bottom: var(--space-2x);
+ color: var(--blue-800);
+ span {
+ font-size: 0.75rem;
+ }
+ img {
+ width: 16px;
+ height: 16px;
+ margin: var(--space-2x);
+ }
+ }
+ .address {
+ display: flex;
+ align-items: center;
+ a,
+ a:visited,
+ a:hover {
+ color: var(--blue-600);
+ cursor: pointer;
+ text-decoration: none;
+ font-size: 0.875rem;
+ }
+ .copyIcon {
+ display: block;
+ margin-left: var(--space-2x);
+ cursor: pointer;
+ background-image: url(../../../resources/icons/copy.svg);
+ background-size: cover;
+ height: 16px;
+ width: 16px;
+ &.copied {
+ background-image: url(../../../resources/icons/check_circle_chainlink_gray.svg);
+ }
+ }
+ }
+ }
+ .blance {
+ border-top: 1px solid #e7e8ea;
+ padding: 16px;
+ display: flex;
+ justify-items: center;
+ img {
+ width: 48px;
+ height: 48px;
+ }
+ .tokenInfo {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ .tokenName {
+ display: block;
+ margin-left: var(--space-4x);
+ font-size: 0.875rem;
+ line-height: 1.5;
+ color: var(--gray-600);
+ }
+ .tokenValue {
+ display: block;
+ font-weight: var(--font-weight-normal);
+ margin-left: var(--space-4x);
+ color: var(--gray-900);
+ font-size: 1rem;
+ line-height: 1rem;
+ }
+ }
+ }
+ }
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .connectNetwork {
+ padding: var(--space-2x);
+ .label {
+ span {
+ display: none;
+ }
+ }
+ .content {
+ img {
+ width: 16px;
+ height: 16px;
+ margin-right: var(--space-2x);
+ }
+ }
+ }
+}
diff --git a/src/components/Header/ConnectWallet/index.tsx b/src/components/Header/ConnectWallet/index.tsx
new file mode 100644
index 0000000..d5c5913
--- /dev/null
+++ b/src/components/Header/ConnectWallet/index.tsx
@@ -0,0 +1,101 @@
+import { useContext, useEffect, useState } from 'react'
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { AppContext } from '../../../AppContext';
+import { Extension, SCAN_URL, SUPPORTED_NETWORKS, Wallet } from '../../../commons/utils/constants';
+import Dropdown from '../../../commons/Dropdown';
+import { getShortWallet } from '../../../commons/utils/helper';
+import { KaiKasIcon, KlaytnIcon, MetaMaskIcon, WalletFilledIcon } from '../../../commons/resources';
+import styles from './connect_wallet.module.scss';
+import Tooltip from '../../../commons/Tooltip';
+
+
+export default function ConnectWallet() {
+ const { setVisibleModal, address, wallet, isInstall, chainID, balance, getBalance } = useContext(AppContext);
+ const [copied, setCopied] = useState(false);
+ const currentNetwork = SUPPORTED_NETWORKS.find(network => network.chainID === chainID);
+
+ useEffect(() => {
+ const timeOut = setTimeout(() => {
+ if (copied) setCopied(false);
+ }, 1000);
+
+ return () => {
+ clearTimeout(timeOut)
+ }
+ }, [copied, setCopied]);
+
+ const handleClick = () => {
+ if (isInstall) {
+ setVisibleModal(true)
+ }
+ else {
+ const url = wallet === Wallet.METAMASK ? Extension.METAMASK : Extension.KAIKAS;
+ window.open(url, "_blank");
+ }
+ }
+
+
+ if (!address) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+ else {
+ return (
+
+
+ }
+ />
+ )
+ }
+}
+
diff --git a/src/components/Header/SwitchNetwork/index.tsx b/src/components/Header/SwitchNetwork/index.tsx
new file mode 100644
index 0000000..05c27cc
--- /dev/null
+++ b/src/components/Header/SwitchNetwork/index.tsx
@@ -0,0 +1,31 @@
+import { useContext } from 'react'
+import { AppContext } from '../../../AppContext';
+import { SUPPORTED_NETWORKS, UNKNOW_NETWORK } from '../../../commons/utils/constants';
+import Dropdown from '../../../commons/Dropdown';
+import styles from './switch_network.module.scss';
+import { AlertIcon } from '../../../commons/resources';
+
+
+export default function SwitchNetwork() {
+ const { chainID } = useContext(AppContext);
+ const currentNetwork = SUPPORTED_NETWORKS.find(item => item.chainID === chainID) || UNKNOW_NETWORK;
+
+ return (
+
+
+
+ Connected with {wallet === Wallet.METAMASK ? "MetaMask" : "KaiKas"}
+ 
+
+
+
+
+ {getShortWallet(address)}
+
+
+
+
+
+ setCopied(true)}>
+
+
+
+
+ 
+
+
+ {currentNetwork?.nativeCurrency?.symbol}
+ {balance}
+
+
+ 
+ Your wallet is connected to an unknown network.
+
+ }
+ className={styles.switchNetwork}
+ />
+ )
+}
diff --git a/src/components/Header/SwitchNetwork/switch_network.module.scss b/src/components/Header/SwitchNetwork/switch_network.module.scss
new file mode 100644
index 0000000..e886f22
--- /dev/null
+++ b/src/components/Header/SwitchNetwork/switch_network.module.scss
@@ -0,0 +1,53 @@
+.switchNetwork {
+ margin-right: var(--space-2x);
+ .label {
+ display: flex;
+ align-items: center;
+ height: 24px;
+ img {
+ width: 16px;
+ height: 16px;
+ margin-right: var(--space-2x);
+ }
+ span {
+ font-size: 0.875rem;
+ line-height: 1rem;
+ }
+ }
+ .content {
+ background-color: var(--red-100);
+ padding: var(--space-4x);
+ display: flex;
+ align-items: center;
+ font-size: 0.875rem;
+ line-height: 1.5rem;
+ img {
+ width: 16px;
+ height: 16px;
+ margin-right: 8px;
+ }
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .switchNetwork {
+ padding: var(--space-2x);
+ .label {
+ img {
+ width: 24px;
+ height: 24px;
+ margin-right: var(--space-0x);
+ }
+ span {
+ display: none;
+ }
+ }
+ .content {
+ img {
+ width: 16px;
+ height: 16px;
+ margin-right: var(--space-2x);
+ }
+ }
+ }
+}
diff --git a/src/components/Header/header.module.scss b/src/components/Header/header.module.scss
new file mode 100644
index 0000000..4ac2e26
--- /dev/null
+++ b/src/components/Header/header.module.scss
@@ -0,0 +1,29 @@
+.header {
+ background-color: var(--white);
+ border-bottom: 1px solid var(--gray-200);
+ box-shadow: 0px 0px 5px var(--black-003);
+
+ .headerContainer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: var(--space-6x) var(--space-0x);
+ .logo {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 1.25rem;
+ color: var(--blue-600);
+ font-weight: var(--font-weight-medium);
+ line-height: 1;
+ img {
+ margin-right: 10px;
+ }
+ }
+ .right {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ }
+ }
+}
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
new file mode 100644
index 0000000..17f2d4e
--- /dev/null
+++ b/src/components/Header/index.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import ConnectWallet from './ConnectWallet';
+import SwitchNetwork from './SwitchNetwork';
+import styles from './header.module.scss';
+import { FaucetIcon } from '../../commons/resources';
+
+
+export default function Header() {
+ return (
+
+
+
+
+
+ 
+ KLAY Faucets
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/Main/ConnectWalletModal/connect_wallet_modal.module.scss b/src/components/Main/ConnectWalletModal/connect_wallet_modal.module.scss
new file mode 100644
index 0000000..e803fba
--- /dev/null
+++ b/src/components/Main/ConnectWalletModal/connect_wallet_modal.module.scss
@@ -0,0 +1,40 @@
+.modal {
+ .modalContent {
+ width: 560px;
+ .title {
+ margin: var(--space-0x) var(--space-0x) var(--space-6x);
+ font-size: 1.75rem;
+ color: var(--blue-800);
+ }
+ .list {
+ list-style: none;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ grid-gap: var(--space-8x);
+ gap: var(--space-8x);
+ margin: var(--space-0x);
+ padding: var(--space-0x);
+ li {
+ list-style: none;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: var(--space-6x);
+ background-color: var(--blue-100);
+ color: var(--blue-600);
+ font-size: 1rem;
+ font-weight: var(--font-weight-normal);
+ grid-gap: 10px;
+ gap: 10px;
+ width: 100%;
+ margin: var(--space-0x);
+ cursor: pointer;
+ img{
+ width: 80px;
+ height: 80px;
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/Main/ConnectWalletModal/index.tsx b/src/components/Main/ConnectWalletModal/index.tsx
new file mode 100644
index 0000000..0fc15cb
--- /dev/null
+++ b/src/components/Main/ConnectWalletModal/index.tsx
@@ -0,0 +1,37 @@
+import { useContext } from 'react'
+import { AppContext } from '../../../AppContext';
+import { Wallet } from '../../../commons/utils/constants';
+import Modal from '../../../commons/Modal';
+import { KaiKasIcon, MetaMaskIcon } from '../../../commons/resources';
+import styles from './connect_wallet_modal.module.scss';
+
+
+export default function ConnectWalletModal() {
+ const { handleConnect, visibleModal, setVisibleModal } = useContext(AppContext);
+
+ const handleConnectMetamask = () => {
+ handleConnect(Wallet.METAMASK);
+ }
+ const handleConnectKaikas = () => {
+ handleConnect(Wallet.KAIKAS);
+ }
+
+ return (
+ Testnet KLAY covers transactions for testing purposes
+Funds that you receive through Klaytn Faucets are not real funds.
To get testnet KLAY, connect to your wallet.
+
+ Connect your wallet
+-
+
-
+
+ MetaMask +
+ -
+
+ KaiKas +
+
+
+ )
+}
diff --git a/src/components/Main/RequestForm/form.module.scss b/src/components/Main/RequestForm/form.module.scss
new file mode 100644
index 0000000..b886064
--- /dev/null
+++ b/src/components/Main/RequestForm/form.module.scss
@@ -0,0 +1,129 @@
+.form {
+ font-size: 0.875rem;
+ label {
+ margin: var(--space-0x) var(--space-0x) var(--space-2x);
+ width: 100%;
+ color: var(--blue-800);
+ font-size: 14px;
+ font-weight: var(--font-weight-medium);
+ line-height: 24px;
+ display: flex;
+ -webkit-box-align: center;
+ align-items: center;
+ max-width: 680px;
+ }
+ input {
+ display: block;
+ font-size: 14px;
+ font-family: var(--font-family-text);
+ border: 1px solid var(--gray-300);
+ width: 100%;
+ color: rgb(12, 22, 44);
+ background-color: var(--white);
+ padding: var(--space-2x) var(--space-2x) var(--space-2x) var(--space-4x);
+ background-position: left 8px top 50%;
+ background-repeat: no-repeat;
+ appearance: none;
+ line-height: 22px;
+ border-radius: var(--space-1x);
+ margin: var(--space-0x);
+ margin-bottom: var(--space-6x);
+ max-width: 680px;
+ outline: 0px;
+ }
+ .error {
+ margin: -16px var(--space-0x) var(--space-6x);
+ font-size: 14px;
+ line-height: 24px;
+ color: var(--gray-600);
+ font-weight: var(--font-weight-medium);
+ max-width: 680px;
+ img {
+ margin: var(--space-0x) var(--space-1x) var(--space-0x) var(--space-0x);
+ max-width: 100%;
+ height: auto;
+ max-height: 100%;
+ width: 16px;
+ vertical-align: text-bottom;
+ }
+ }
+ .captcha {
+ max-width: 680px;
+ }
+ .submit {
+ margin-top: var(--space-12x);
+ appearance: none;
+ border-radius: var(--space-1x);
+ border-style: solid;
+ border-width: 2px;
+ display: inline-block;
+ font-family: var(--font-family-text);
+ font-size: 14px;
+ font-weight: var(--font-weight-medium);
+ line-height: 20px;
+ padding: var(--space-2x) var(--space-6x);
+ text-align: center;
+ text-decoration: none;
+ outline: 0;
+ box-shadow: none;
+ color: var(--white);
+ background-color: var(--blue-600);
+ border-color: var(--blue-600);
+ margin-bottom: var(--space-6x);
+ cursor: pointer;
+ &:hover {
+ border-color: var(--gray-900);
+ background-color: var(--blue-800);
+ }
+ &:disabled {
+ border-color: var(--gray-200);
+ background-color: var(--gray-200);
+ color: var(--gray-500);
+ cursor: not-allowed;
+ }
+ }
+}
+.modalContent {
+ width: 310px;
+ text-align: center;
+ .modalTitle {
+ font-size: 14px;
+ font-weight: var(--font-weight-medium);
+ line-height: 1.29;
+ font-weight: var(--font-weight-bold);
+ color: var(--blue-800);
+ margin: 0px 0px var(--space-2x);
+ text-align: left;
+ }
+ .modalDescription {
+ font-size: 14px;
+ font-weight: var(--font-weight-normal);
+ line-height: 1.29;
+ color: var(--gray-500);
+ margin-bottom: var(--space-5x);
+ text-align: left;
+ }
+ .closeButton {
+ font-size: 14px;
+ font-weight: var(--font-weight-normal);
+ line-height: 1.29;
+ display: inline-block;
+ border: 0;
+ background-color: var(--green-300);
+ color: var(--white);
+ cursor: pointer;
+ padding: 0 var(--space-5x);
+ min-width: 140px;
+ height: 48px;
+ line-height: 48px;
+ text-align: center;
+ outline: 0;
+ box-shadow: 0 4px 8px 0 rgb(106 209 186 / 25%);
+ transition: background 0.3s;
+ margin: auto;
+ &:hover,
+ &:active {
+ background-color: var(--green-400);
+ }
+ }
+}
diff --git a/src/components/Main/RequestForm/index.tsx b/src/components/Main/RequestForm/index.tsx
new file mode 100644
index 0000000..94d86bf
--- /dev/null
+++ b/src/components/Main/RequestForm/index.tsx
@@ -0,0 +1,127 @@
+import { ChangeEvent, FormEvent, useContext, useEffect, useState } from 'react';
+import { ethers } from 'ethers';
+import * as cavers from '../../../commons/utils/caver';
+import { AppContext } from '../../../AppContext';
+import styles from './form.module.scss';
+import { getRequestTime, requestToken } from '../../../commons/utils/services';
+import Modal from '../../../commons/Modal';
+import HCaptcha from '@hcaptcha/react-hcaptcha';
+import { AlertDiamondIcon } from '../../../commons/resources';
+import { getDifferentTime } from '../../../commons/utils/helper';
+
+const REACT_APP_HCAPTCHA_SITE_KEY = process.env.REACT_APP_HCAPTCHA_SITE_KEY || "7be2579c-e9e0-47c7-b5b1-4819e593ff1c"
+
+export default function RequestForm() {
+ const { address, getBalance } = useContext(AppContext);
+ const [value, setValue] = useState
+
+ Request testnet LINK
++ {'Get testnet KLAY for an account on one of the supported blockchain testnets so you can create and test your own oracle and Klaytn smart contract. '} + Learn more +
+
+
+ Your KLAY Fauccet request accepted.
+You can run faucet once every 24 hours.
+
+
+
+
+ )
+}
diff --git a/src/components/Main/RequestNetwork/request_network.module.scss b/src/components/Main/RequestNetwork/request_network.module.scss
new file mode 100644
index 0000000..85752a0
--- /dev/null
+++ b/src/components/Main/RequestNetwork/request_network.module.scss
@@ -0,0 +1,42 @@
+.requestNetwork {
+ text-align: center;
+ image {
+ width: 224px;
+ height: 224px;
+ }
+ h4 {
+ margin: auto;
+ margin-top: var(--space-6x);
+ margin-bottom: var(--space-4x);
+ font-size: 24px;
+ font-weight: var(--font-weight-medium);
+ color: var(--blue-800);
+ margin: auto;
+ margin-bottom: var(--space-4x);
+ }
+ p {
+ margin: auto;
+ margin-bottom: var(--space-8x);
+ color: var(--gray-600);
+ max-width: 640px;
+ }
+ .button {
+ display: flex;
+ align-items: center;
+ padding: var(--space-2x) var(--space-6x);
+ color: var(--white);
+ border: 2px solid var(--blue-600);
+ border-radius: var(--space-1x);
+ background-color: var(--blue-600);
+ font-weight: var(--font-weight-medium);
+ cursor: pointer;
+ height: 40px;
+ margin: auto;
+ margin-bottom: var(--space-6x);
+ &:hover {
+ color: var(--white);
+ border-color: var(--blue-800);
+ background-color: var(--blue-800);
+ }
+ }
+}
diff --git a/src/components/Main/index.tsx b/src/components/Main/index.tsx
new file mode 100644
index 0000000..5367727
--- /dev/null
+++ b/src/components/Main/index.tsx
@@ -0,0 +1,37 @@
+import React, { useContext } from 'react';
+import { AppContext } from '../../AppContext';
+import { SUPPORTED_NETWORKS } from '../../commons/utils/constants';
+import Description from './Description';
+import styles from './main.module.scss';
+import ConnectWallet from './ConnectWallet';
+import RequestNetwork from './RequestNetwork';
+import RequestForm from './RequestForm';
+import ConnectWalletModal from './ConnectWalletModal';
+
+
+export default function Main() {
+ const { address, chainID } = useContext(AppContext);
+ const supportNetwork = SUPPORTED_NETWORKS.find(item => item.chainID === chainID);
+ return (
+ This network is not supported by Klaytn Faucets
+Your wallet is connected to an unsupported network. Please change to Klaytn Baobab network to continue
+ {wallet === Wallet.METAMASK && + + } +