Merge pull request #82 from Sotatek-QuangDo/feat/test

feat: Development of simple webpage for online toolkit

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

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 (
+    <>
+      <Title>Extended Unit Converter</Title>
+      <Description>
+        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.
+      </Description>
+      <CardBodyConverter>
+        {optionsExtended.map((item) => {
+          return (
+            <FormGroup key={item.unit}>
+              <NameConverter>{item.label}</NameConverter>
+              <SFormInput
+                type="number"
+                placeholder={item.label}
+                onChange={(value): void => handleChange(value, item.unit)}
+                value={getValue(item.unit)}
+              />
+              <StyledCopyIconBox>
+                <CopyToClipboard
+                  text={getValue(item.unit)}
+                  onCopy={(): void => {
+                    toast('Copied')
+                  }}
+                >
+                  <IconCopy color={'black'} size={16} />
+                </CopyToClipboard>
+              </StyledCopyIconBox>
+            </FormGroup>
+          )
+        })}
+      </CardBodyConverter>
+    </>
+  )
+}
+
+export default ExtendedUnitConverter

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 (
+    <>
+      <Title>Simple Unit Converter</Title>
+      <Description>
+        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.
+      </Description>
+      <CardBodyConverter>
+        {optionsSimple.map((item) => {
+          return (
+            <FormGroup key={item.unit}>
+              <NameConverter>{item.label}</NameConverter>
+              <SFormInput
+                placeholder={item.label}
+                onChange={(value): void => handleChange(value, item.unit)}
+                value={getValue(item.unit)}
+              />
+              <StyledCopyIconBox>
+                <CopyToClipboard
+                  text={getValue(item.unit)}
+                  onCopy={(): void => {
+                    toast('Copied')
+                  }}
+                >
+                  <IconCopy color={'black'} size={16} />
+                </CopyToClipboard>
+              </StyledCopyIconBox>
+            </FormGroup>
+          )
+        })}
+      </CardBodyConverter>
+    </>
+  )
+}
+
+export default SimpleUnitConverter

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<string>(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 (
+    <Container>
+      <Card>
+        <TabWraper>
+          {TABS.map((tab) => (
+            <TabsBox
+              key={tab.key}
+              className={`${currentTab === tab.key && 'active'}`}
+              onClick={(): void => handleChangeTabs(tab.key)}
+            >
+              {tab.label}
+            </TabsBox>
+          ))}
+        </TabWraper>
+        {defaultTabs ? (
+          <SimpleUnitConverter
+            handleChange={handleChange}
+            getValue={getValue}
+          />
+        ) : (
+          <ExtendedUnitConverter
+            handleChange={handleChange}
+            getValue={getValue}
+          />
+        )}
+      </Card>
+    </Container>
+  )
+}
+
+export default KlaytnUnitConverter