diff --git a/src/routes.tsx b/src/routes.tsx
index 79bc9fd..ec6c141 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -37,6 +37,7 @@ import KaikasTutorial3 from './views/Kaikas/KaikasTutorial3'
import KaikasTutorial4 from './views/Kaikas/KaikasTutorial4'
import { RouteType } from 'types'
+import KlaytnUnitConverter from 'views/Converter'
const routes: RouteType[] = [
{
@@ -285,6 +286,19 @@ const routes: RouteType[] = [
},
],
},
+ {
+ name: 'Converters',
+ path: '/converter',
+ items: [
+ {
+ path: '/klaytnUnitConverters',
+ name: 'Klaytn Unit Converter',
+ component: KlaytnUnitConverter,
+ description:
+ 'The Peb converter from Klaytn is a simple and easy-to-use tool for converting between peb, ston, and KLAY. The page housing this tool provides a comprehensive explanation of these different units and their relationship to the expenditure of Gas in the Klaytn ecosystem.',
+ },
+ ],
+ },
]
export default routes
diff --git a/src/views/Converter/ExtendedConverter.tsx b/src/views/Converter/ExtendedConverter.tsx
new file mode 100644
index 0000000..9ad0976
--- /dev/null
+++ b/src/views/Converter/ExtendedConverter.tsx
@@ -0,0 +1,117 @@
+import { ReactElement } from 'react'
+import styled from 'styled-components'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+import { IconCopy } from '@tabler/icons'
+
+import useToast from 'hooks/useToast'
+import { FormInput, View } from 'components'
+import { ConverterProps } from '.'
+import { Unit } from 'caver-js'
+import { STYLE } from 'consts'
+
+const Title = styled.p`
+ font-size: 24px;
+ font-weight: 700;
+ padding: 15px 15px 0;
+ border: 0;
+ color: rgba(255, 255, 255, 0.8);
+`
+const Description = styled.p`
+ font-size: 14px;
+ font-weight: 400;
+ padding: 15px 15px 0;
+ border: 0;
+ color: rgba(255, 255, 255, 0.8);
+`
+const NameConverter = styled.div`
+ color: #ffffff;
+ font-size: 16px;
+ font-weight: 400;
+ padding-bottom: 15px;
+ min-width: 140px;
+`
+
+const SFormInput = styled(FormInput)`
+ margin-bottom: 10px;
+ width: 100%;
+`
+const CardBodyConverter = styled.div`
+ padding: 20px 15px;
+`
+const FormGroup = styled.div`
+ display: flex;
+ align-items: center;
+ position: relative;
+`
+
+const StyledCopyIconBox = styled(View)`
+ ${STYLE.clickable}
+ position: absolute;
+ transform: translateY(-30%);
+ right: 10px;
+`
+
+const optionsExtended: {
+ unit: Unit
+ label: string
+}[] = [
+ { unit: 'peb', label: 'Peb' },
+ { unit: 'kpeb', label: 'KPeb' },
+ { unit: 'Mpeb', label: 'MPeb' },
+ { unit: 'Gpeb', label: 'GPeb' },
+ { unit: 'ston', label: 'ston' },
+ { unit: 'uKLAY', label: 'uKLAY' },
+ { unit: 'mKLAY', label: 'mKLAY' },
+ { unit: 'KLAY', label: 'KLAY' },
+ { unit: 'kKLAY', label: 'kKLAY' },
+ { unit: 'MKLAY', label: 'MKLAY' },
+ { unit: 'GKLAY', label: 'GKLAY' },
+ { unit: 'TKLAY', label: 'TKLAY' },
+]
+
+const ExtendedUnitConverter = (props: ConverterProps): ReactElement => {
+ const { toast } = useToast()
+
+ const { handleChange, getValue } = props
+
+ return (
+ <>
+
Extended Unit Converter
+
+ The Peb converter from Klaytn is a simple and easy-to-use tool for
+ converting between{' '}
+ {optionsExtended.map((item) => item.label).join(', ')}. The page housing
+ this tool provides a comprehensive explanation of these different units
+ and their relationship to the expenditure of Gas in the Klaytn
+ ecosystem.
+
+
+ {optionsExtended.map((item) => {
+ return (
+
+ {item.label}
+ handleChange(value, item.unit)}
+ value={getValue(item.unit)}
+ />
+
+ {
+ toast('Copied')
+ }}
+ >
+
+
+
+
+ )
+ })}
+
+ >
+ )
+}
+
+export default ExtendedUnitConverter
diff --git a/src/views/Converter/SimpleConverter.tsx b/src/views/Converter/SimpleConverter.tsx
new file mode 100644
index 0000000..f659b9a
--- /dev/null
+++ b/src/views/Converter/SimpleConverter.tsx
@@ -0,0 +1,102 @@
+import { ReactElement } from 'react'
+import styled from 'styled-components'
+import { ConverterProps } from '.'
+import { Unit } from 'caver-js'
+import useToast from 'hooks/useToast'
+import { FormInput, View } from 'components'
+import { STYLE } from 'consts'
+import CopyToClipboard from 'react-copy-to-clipboard'
+import { IconCopy } from '@tabler/icons'
+
+const Title = styled.p`
+ font-size: 24px;
+ font-weight: 700;
+ padding: 15px 15px 0;
+ border: 0;
+ color: rgba(255, 255, 255, 0.8);
+`
+const Description = styled.p`
+ font-size: 14px;
+ font-weight: 400;
+ padding: 15px 15px 0;
+ border: 0;
+ color: rgba(255, 255, 255, 0.8);
+`
+const NameConverter = styled.div`
+ color: #ffffff;
+ font-size: 16px;
+ font-weight: 400;
+ padding-bottom: 15px;
+ min-width: 140px;
+`
+
+const SFormInput = styled(FormInput)`
+ margin-bottom: 10px;
+ width: 100%;
+`
+const CardBodyConverter = styled.div`
+ padding: 20px 15px;
+`
+const FormGroup = styled.div`
+ display: flex;
+ align-items: center;
+ position: relative;
+`
+
+const StyledCopyIconBox = styled(View)`
+ ${STYLE.clickable}
+ position: absolute;
+ transform: translateY(-30%);
+ right: 10px;
+`
+
+const optionsSimple: { unit: Unit; label: string;}[] = [
+ { unit: 'peb', label: 'Peb'},
+ { unit: 'ston', label: 'ston'},
+ { unit: 'KLAY', label: 'KLAY'},
+]
+
+const SimpleUnitConverter = (props: ConverterProps): ReactElement => {
+ const { toast } = useToast()
+
+ const { handleChange, getValue } = props
+
+ return (
+ <>
+ Simple Unit Converter
+
+ The Peb converter from Klaytn is a simple and easy-to-use tool for
+ converting between {optionsSimple.map((item) => item.label).join(', ')}.
+ The page housing this tool provides a comprehensive explanation of these
+ different units and their relationship to the expenditure of Gas in the
+ Klaytn ecosystem.
+
+
+ {optionsSimple.map((item) => {
+ return (
+
+ {item.label}
+ handleChange(value, item.unit)}
+ value={getValue(item.unit)}
+ />
+
+ {
+ toast('Copied')
+ }}
+ >
+
+
+
+
+ )
+ })}
+
+ >
+ )
+}
+
+export default SimpleUnitConverter
diff --git a/src/views/Converter/index.tsx b/src/views/Converter/index.tsx
new file mode 100644
index 0000000..986c795
--- /dev/null
+++ b/src/views/Converter/index.tsx
@@ -0,0 +1,132 @@
+import { ReactElement, useState } from 'react'
+import styled from 'styled-components'
+import BigNumber from 'bignumber.js'
+
+import { Card, Container } from 'components'
+import SimpleUnitConverter from './SimpleConverter'
+import ExtendedUnitConverter from './ExtendedConverter'
+import Caver, { Unit } from 'caver-js'
+BigNumber.config({ EXPONENTIAL_AT: 1e9 })
+const caver = new Caver(window.klaytn)
+
+export interface ConverterProps {
+ handleChange: (value: string, unit: Unit) => void
+ getValue: (unit: Unit) => string
+}
+
+const TabWraper = styled.div`
+ margin-top: 1rem;
+ display: flex;
+ background: #27293d;
+ width: 100%;
+ gap: 15px;
+ padding: 20px;
+ color: #696969;
+ cursor: pointer;
+`
+const TabsBox = styled.div`
+ font-size: 16px;
+ font-weight: 700;
+ padding: 0.5em 1em 0.5em 1em;
+ &.active {
+ background: #444;
+ color: #fff;
+ border-radius: 6px;
+ }
+`
+
+const TABSCONVERTER = {
+ Simple: 'Simple',
+ Extended: 'Extended',
+}
+
+const TABS = [
+ {
+ key: TABSCONVERTER.Simple,
+ label: 'Simple Converter',
+ value: TABSCONVERTER.Simple,
+ },
+ {
+ key: TABSCONVERTER.Extended,
+ label: 'Extended Converter',
+ value: TABSCONVERTER.Simple,
+ },
+]
+
+const KlaytnUnitConverter = (): ReactElement => {
+ const [currentTab, setCurrentTab] = useState(TABSCONVERTER.Simple)
+ const defaultTabs = currentTab === TABSCONVERTER.Simple
+
+ const [value, setValue] = useState<{ unit: Unit; value: string }>({
+ unit: 'peb',
+ value: '',
+ })
+
+ const getValue = (unit: Unit): string => {
+ const decimalUnit = caver.utils.unitMap[value.unit]
+
+ if (!value.value) return ''
+ if (/^[0-9]+([.][0-9]+)?$/.test(value.value)) {
+ const isDecimalUnit = new BigNumber(
+ new BigNumber(decimalUnit).multipliedBy(value.value).toFixed(0)
+ )
+ .dividedBy(decimalUnit).toString();
+ return caver.utils
+ .convertFromPeb(caver.utils.convertToPeb(isDecimalUnit, value.unit), unit).toString()
+ }
+ if (/^[0-9]+([.]+)?$/.test(value.value)) {
+ if (unit === value.unit) return value.value
+ const isDecimalUnit = new BigNumber(
+ new BigNumber(decimalUnit)
+ .multipliedBy(value.value.replace('.', ''))
+ .toFixed(0)
+ )
+ .dividedBy(decimalUnit)
+ .toString()
+ return caver.utils
+ .convertFromPeb(caver.utils.convertToPeb(isDecimalUnit, value.unit), unit).toString()
+ }
+ return ''
+ }
+
+ const handleChange = (value: string, unit: Unit): void => {
+ if (!value || value === '.') setValue({ unit, value })
+ if (/^\d*\.?\d*$/.test(value)) setValue({ unit, value })
+ }
+
+ const handleChangeTabs = (value: string): void => {
+ setCurrentTab(value)
+ setValue({ unit: 'peb', value: '' })
+ }
+
+ return (
+
+
+
+ {TABS.map((tab) => (
+ handleChangeTabs(tab.key)}
+ >
+ {tab.label}
+
+ ))}
+
+ {defaultTabs ? (
+
+ ) : (
+
+ )}
+
+
+ )
+}
+
+export default KlaytnUnitConverter