Skip to content
This repository has been archived by the owner on Jul 19, 2024. It is now read-only.

Commit

Permalink
fix: comment PR and using carver-js to converter
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sotatek-QuangDo
Sotatek-QuangDo committed Apr 12, 2023
1 parent 5118668 commit f5ff157
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 49 deletions.
2 changes: 1 addition & 1 deletion src/routes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ const routes: RouteType[] = [
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.',
'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.',
},
],
},
Expand Down
34 changes: 17 additions & 17 deletions src/views/Converter/ExtendedConverter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { FormInput } from 'components'
import { ReactElement } from 'react'
import styled from 'styled-components'
import { ConverterProps } from '.'
import { Unit } from 'caver-js'

const Title = styled.p`
font-size: 24px;
Expand Down Expand Up @@ -38,22 +39,21 @@ const FormGroup = styled.div`
`

const optionsExtended: {
key: string
unit: Unit
label: string
decimal: number
}[] = [
{ key: 'Peb', label: 'Peb', decimal: -18 },
{ key: 'KPeb', label: 'KPeb', decimal: -15 },
{ key: 'MPeb', label: 'MPeb', decimal: -12 },
{ key: 'GPeb', label: 'GPeb', decimal: -9 },
{ key: 'ston', label: 'ston', decimal: -9 },
{ key: 'uKLAY', label: 'uKLAY', decimal: -6 },
{ key: 'mKLAY', label: 'mKLAY', decimal: -3 },
{ key: 'KLAY', label: 'KLAY', decimal: 0 },
{ key: 'kKLAY', label: 'kKLAY', decimal: 3 },
{ key: 'MKLAY', label: 'MKLAY', decimal: 6 },
{ key: 'GKLAY', label: 'GKLAY', decimal: 9 },
{ key: 'TKLAY', label: 'TKLAY', decimal: 12 },
{ 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 => {
Expand All @@ -73,13 +73,13 @@ const ExtendedUnitConverter = (props: ConverterProps): ReactElement => {
<CardBodyConverter>
{optionsExtended.map((item) => {
return (
<FormGroup key={item.key}>
<FormGroup key={item.unit}>
<NameConverter>{item.label}</NameConverter>
<SFormInput
type="number"
placeholder={item.label}
onChange={(value): void => handleChange(value, item.decimal)}
value={getValue(item.decimal)}
onChange={(value): void => handleChange(value, item.unit)}
value={getValue(item.unit)}
/>
</FormGroup>
)
Expand Down
15 changes: 8 additions & 7 deletions src/views/Converter/SimpleConverter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { FormInput } from 'components'
import { ReactElement } from 'react'
import styled from 'styled-components'
import { ConverterProps } from '.'
import { Unit } from 'caver-js'


const Title = styled.p`
Expand Down Expand Up @@ -38,10 +39,10 @@ const FormGroup = styled.div`
align-items: center;
`

const optionsSimple: { key: string; label: string; decimal: number }[] = [
{ key: 'Peb', label: 'Peb', decimal: -18 },
{ key: 'ston', label: 'ston', decimal: -9 },
{ key: 'KLAY', label: 'KLAY', decimal: 0 },
const optionsSimple: { unit: Unit; label: string;}[] = [
{ unit: 'peb', label: 'Peb'},
{ unit: 'ston', label: 'ston'},
{ unit: 'KLAY', label: 'KLAY'},
]

const SimpleUnitConverter = (props: ConverterProps): ReactElement => {
Expand All @@ -61,12 +62,12 @@ const SimpleUnitConverter = (props: ConverterProps): ReactElement => {
<CardBodyConverter>
{optionsSimple.map((item) => {
return (
<FormGroup key={item.key}>
<FormGroup key={item.unit}>
<NameConverter>{item.label}</NameConverter>
<SFormInput
placeholder={item.label}
onChange={(value): void => handleChange(value, item.decimal)}
value={getValue(item.decimal)}
onChange={(value): void => handleChange(value, item.unit)}
value={getValue(item.unit)}
/>
</FormGroup>
)
Expand Down
57 changes: 33 additions & 24 deletions src/views/Converter/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@ import { ReactElement, useState } from 'react'
import styled from 'styled-components'
import SimpleUnitConverter from './SimpleConverter'
import ExtendedUnitConverter from './ExtendedConverter'
import Caver, { Unit } from 'caver-js'
import BigNumber from 'bignumber.js'
BigNumber.config({ EXPONENTIAL_AT: 1e9 })
const caver = new Caver(window.klaytn)

export interface ConverterProps {
handleChange: (value: string, decimal: number) => void
getValue: (decimal: number) => string
handleChange: (value: string, unit: Unit) => void
getValue: (unit: Unit) => string
}

const TabWraper = styled.div`
Expand Down Expand Up @@ -54,39 +56,46 @@ const KlaytnUnitConverter = (): ReactElement => {
const [currentTab, setCurrentTab] = useState<string>(TABSCONVERTER.Simple)
const defaultTabs = currentTab === TABSCONVERTER.Simple

const [value, setValue] = useState({ decimal: 0, value: '' })
const [value, setValue] = useState<{ unit: Unit; value: string }>({
unit: 'peb',
value: '',
})

const getValue = (decimal: number): string => {
if (!value) return ''
const rateDown = new BigNumber(10).exponentiatedBy(-decimal)
const rateUp = new BigNumber(10).exponentiatedBy(value.decimal)

const decimalPlaces = decimal === value.decimal ? 1e9 : 18 + decimal
if (/^[0-9]+([.][0-9]+)?$/.test(value.value))
return rateDown
.multipliedBy(value.value)
.multipliedBy(rateUp)
.decimalPlaces(decimalPlaces)
.toString()
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 (decimal === value.decimal) return value.value
return rateDown
.multipliedBy(value.value.replace('.', ''))
.multipliedBy(rateUp)
.decimalPlaces(decimalPlaces)
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, decimal: number): void => {
if (!value || value === '.') setValue({ decimal, value })
if (/^\d*\.?\d*$/.test(value)) setValue({ decimal, value })
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({ decimal: 0, value: '' })
setValue({ unit: 'peb', value: '' })
}

return (
Expand Down

0 comments on commit f5ff157

Please sign in to comment.