(component: React.ComponentType, defaultProps: DP) => {\n type Props = Partial & Omit;\n // eslint-disable-next-line\n component.defaultProps = defaultProps;\n return component as React.ComponentType;\n};\n\nexport default withDefaults;\n","import React, { useEffect, useState } from 'react';\nimport withDefaults from 'utils/withDefaults';\n\ninterface Props {\n visible?: boolean;\n enterTime?: number;\n leaveTime?: number;\n clearTime?: number;\n className?: string;\n name?: string;\n}\n\nconst defaultProps = {\n visible: false,\n enterTime: 60,\n leaveTime: 60,\n clearTime: 60,\n className: '',\n name: 'transition',\n};\n\nexport type CSSTransitionProps = Props & typeof defaultProps;\n\nconst CSSTransition: React.FC> = ({\n children,\n className,\n visible,\n enterTime,\n leaveTime,\n clearTime,\n name,\n ...props\n}) => {\n const [classes, setClasses] = useState('');\n const [renderable, setRenderable] = useState(visible);\n\n useEffect(() => {\n const statusClassName = visible ? 'enter' : 'leave';\n const time = visible ? enterTime : leaveTime;\n if (visible && !renderable) {\n setRenderable(true);\n }\n\n setClasses(`${name}-${statusClassName}`);\n\n // set class to active\n const timer = setTimeout(() => {\n setClasses(`${name}-${statusClassName} ${name}-${statusClassName}-active`);\n clearTimeout(timer);\n }, time);\n\n // remove classess when animation over\n const clearClassesTimer = setTimeout(() => {\n if (!visible) {\n setClasses('');\n setRenderable(false);\n }\n clearTimeout(clearClassesTimer);\n }, time + clearTime);\n\n return () => {\n clearTimeout(timer);\n clearTimeout(clearClassesTimer);\n };\n }, [visible, renderable]);\n if (!React.isValidElement(children) || !renderable) return null;\n\n return React.cloneElement(children, {\n ...props,\n className: `${children.props.className} ${className} ${classes}`,\n });\n};\n\nexport default withDefaults(CSSTransition, defaultProps);\n","import React, { MouseEvent, useCallback, ReactElement } from 'react';\nimport withDefaults from 'utils/withDefaults';\nimport useCurrentState from 'hooks/useCurrentState';\nimport cn from 'classnames';\nimport CssTransition from '../CssTransition/CssTransition';\nimport styles from './Backdrop.module.scss';\n\ninterface Props {\n onClick?: (event: MouseEvent) => void;\n visible?: boolean;\n children?: ReactElement;\n className?: string;\n}\n\nconst defaultProps = {\n onClick: () => {},\n visible: false,\n};\n\nexport type BackdropProps = Props & typeof defaultProps;\n\nconst Backdrop: React.FC> = React.memo(\n ({ children, onClick, visible, className }: BackdropProps) => {\n const [, setIsContentMouseDown, IsContentMouseDownRef] = useCurrentState(false);\n const clickHandler = (event: MouseEvent) => {\n if (IsContentMouseDownRef.current) return;\n if (onClick) {\n onClick(event);\n }\n };\n const childrenClickHandler = useCallback((event: MouseEvent) => {\n event.stopPropagation();\n }, []);\n const mouseUpHandler = () => {\n if (!IsContentMouseDownRef.current) return;\n const timer = setTimeout(() => {\n setIsContentMouseDown(false);\n clearTimeout(timer);\n }, 0);\n };\n\n return (\n \n \n
\n
setIsContentMouseDown(true)}\n >\n {children}\n \n
\n
{title}
\n \n {description}\n \n \n {primaryButtonContent}\n \n \n {secondaryButtonContent}\n \n \n
\n\n \n
= React.FC
;\ntype ComponentProps = Partial &\n Omit &\n NativeAttrs;\n\nInfoModal.defaultProps = defaultProps;\n\nexport default InfoModal as ModalComponent;\n","import React, { useState, useCallback } from 'react';\nimport { Form, Field } from 'react-final-form';\nimport InfoModal from 'components/common/InfoModal/InfoModal';\nimport cn from 'classnames';\nimport nodeApi from '../../../../../api/api';\nimport customToast from '../../../../../utils/toast';\nimport CopyToClipboard from '../../../../common/CopyToClipboard';\nimport constants from '../../../../../utils/constants';\n\ntype Errors = {\n recipientAddress?: string;\n amount?: string;\n fee?: string;\n asset?: string;\n assetAmount?: string;\n};\n\nconst PaymentSendForm = ({\n apiKey,\n walletBalanceData,\n getWalletBalance,\n explorerSubdomain,\n}: {\n apiKey: string;\n walletBalanceData: any;\n getWalletBalance: any;\n explorerSubdomain: string;\n}) => {\n const currentBalance = walletBalanceData?.balance;\n\n const [transactionId, setTransactionId] = useState(null);\n const [isSentModalOpen, setIsSentModalOpen] = useState(false);\n const [assetCheckbox, setAssetCheckbox] = useState(false);\n\n const paymentSend = useCallback(\n ({ recipientAddress, amount, fee, asset, assetAmount }) => {\n const request = {\n address: recipientAddress.trim(),\n value: Number((parseFloat(amount) * constants.nanoErgInErg).toFixed(1)),\n assets:\n assetCheckbox && asset !== 'none' && assetAmount > 0\n ? [{ tokenId: asset, amount: Number(assetAmount) }]\n : [],\n };\n return nodeApi.post(\n '/wallet/transaction/send',\n {\n requests: [request],\n fee: Number((parseFloat(fee) * constants.nanoErgInErg).toFixed(1)),\n },\n {\n headers: {\n api_key: apiKey,\n },\n },\n );\n },\n [assetCheckbox, apiKey],\n );\n\n const resetForm = (form: any) => {\n form.restart();\n setIsSentModalOpen(false);\n };\n\n const sendForm = useCallback(\n (values) => {\n if (values.recipientAddress.trim() === '' || !values.recipientAddress) {\n return;\n }\n\n paymentSend(values)\n .then(({ data }) => {\n setTransactionId(data);\n setIsSentModalOpen(true);\n getWalletBalance();\n })\n .catch((err) => {\n const errMessage = err.data ? err.data.detail : err.message;\n customToast('error', errMessage);\n });\n },\n [paymentSend, getWalletBalance],\n );\n\n const validateForm = useCallback(\n (values) => {\n const errors: Errors = {};\n\n const totalFeeAndAmount =\n (Number(values.amount) + Number(values.fee)) * constants.nanoErgInErg;\n\n if (!values.recipientAddress || values.recipientAddress?.trim() === '') {\n errors.recipientAddress = 'The field cannot be empty';\n }\n\n if (!values.fee || values.fee < 0.001) {\n errors.fee = 'Minimum 0.001 ERG';\n }\n\n if (values.asset === 'none') {\n errors.asset = 'You need to choose asset';\n }\n\n if (\n walletBalanceData &&\n values.assetAmount &&\n values.asset !== 'none' &&\n values.assetAmount > walletBalanceData.assets[values.asset]\n ) {\n errors.assetAmount = `Maximum ${walletBalanceData.assets[values.asset]}`;\n }\n\n if (assetCheckbox && !values.assetAmount) {\n errors.assetAmount = \"The field can't be empty\";\n }\n\n if (currentBalance < totalFeeAndAmount) {\n errors.amount = `Maximum ${Math.abs(\n currentBalance / constants.nanoErgInErg - Number(values.fee),\n )} ERG`;\n }\n if (values.amount < 0) {\n errors.amount = \"Amount can't be negative\";\n }\n\n if (currentBalance === 0) {\n errors.amount = 'Your balance is empty';\n }\n\n if (values.fee < 0) {\n errors.fee = \"Fee can't be negative\";\n }\n\n return errors;\n },\n [assetCheckbox, walletBalanceData, currentBalance],\n );\n\n return (\n \n
\n
Payment send
\n
{\n return (\n <>\n \n\n {\n setIsSentModalOpen(false);\n }}\n title=\"Payment sent\"\n description={\n <>\n \n Your payment has been sent successfully. The transaction ID is -{' '}\n {transactionId}\n
\n \n \n Click Here To Go To The Explorer\n \n
\n \n }\n primaryButtonContent={OK}\n secondaryButtonContent=\"Send again\"\n onPrimaryHandler={() => resetForm(form)}\n />\n \n );\n }}\n />\n \n
\n
Issue Tokens
\n
{\n return (\n <>\n \n\n {\n setIsSentModalOpen(false);\n }}\n title=\"Congratulations!\"\n description={\n <>\n \n {`You have successfully issued ${assetAmount} ${assetName} tokens! The transaction ID is\\n`}\n {transactionId}\n
\n \n \n Click Here To View Transaction\n \n
\n \n }\n primaryButtonContent={OK}\n secondaryButtonContent=\"Send again\"\n onPrimaryHandler={() => resetForm(form)}\n />\n \n );\n }}\n />\n \n {value.map((item) => (\n
\n
\n {item.value || ''} {item.name || ''}\n
\n
\n
\n ))}\n
{resultContent}
}\n \n );\n};\n\nconst WalletInformationTable = (props: any) => {\n const {\n walletBalance,\n dispatchGetWalletBalance,\n dispatchGetErgPrice,\n dispatchGetWalletAddresses,\n walletAddresses,\n explorerSubdomain,\n } = props;\n\n const getValues = useCallback(() => {\n dispatchGetWalletBalance();\n dispatchGetErgPrice();\n dispatchGetWalletAddresses();\n }, [dispatchGetWalletBalance, dispatchGetErgPrice, dispatchGetWalletAddresses]);\n\n const getAddreses = useCallback((addresses: String[], subdomain: String) => {\n if (addresses.length === 0) {\n return 0;\n }\n\n return addresses.map((item) => ({\n value: (\n \n {item}\n \n ),\n }));\n }, []);\n\n const getAssets = useCallback((assets) => {\n if (Object.values(assets).length === 0) {\n return 0;\n }\n\n return Object.keys(assets).map((key) => ({\n name: {key},\n value: {assets[key]},\n }));\n }, []);\n\n useEffect(() => {\n getValues();\n }, [getValues]);\n\n const data = useMemo(\n () => [\n {\n name: 'Balance',\n value: walletBalance\n ? `${walletBalance.balance / constants.nanoErgInErg} ERG`\n : 'loading...',\n },\n // {\n // name: 'Balance in USD',\n // value: walletBalance\n // ? `$ ${(walletBalance.balance / constants.nanoErgInErg) * ergPrice}`\n // : 'Loading...',\n // },\n {\n name: 'Assets',\n value: walletBalance ? getAssets(walletBalance.assets) : `Loading...`,\n },\n {\n name: 'Addresses',\n value: walletAddresses ? getAddreses(walletAddresses, explorerSubdomain) : `Loading...`,\n },\n ],\n [walletBalance, getAssets, walletAddresses, getAddreses, explorerSubdomain],\n );\n\n const updateValues = useCallback(() => {\n getValues();\n }, [getValues]);\n\n return (\n \n
\n
\n Wallet Information{' '}\n \n
\n \n
\n {data.map(({ value, name }) => (\n \n ))}\n
\n
\n
The wallet UI is locked. You need to unlock the wallet to access its UI.
\n
\n
You need to initialize your wallet to access wallet UI.
\n
\n
To continue, please set your API key.
\n
\n
Menu
\n
\n
\n {Object.values(localRouteList).map(({ href, icon, title }, index) => (\n \n {icon} {title}\n \n ))}\n
\n
External links
\n
\n
\n {Object.values(externalRouteList).map(({ href, icon, title }, index) => (\n
\n {icon} {title}\n \n ))}\n \n \n
\n {renderButton(apiKey, handleShow)}\n
handleHide()} centered>\n submitForm(values, uuid)}\n >\n {() => (\n \n )}\n \n \n
\n {this.renderButton()}\n
this.handleHide()}\n centered\n aria-labelledby=\"example-custom-modal-styling-title\"\n >\n \n {({ isSubmitting }) => (\n \n )}\n \n \n \n
Initialize wallet
\n
\n {({ status, isSubmitting }) => (\n \n )}\n \n
\n
Re-store wallet
\n
this.handleSubmit(values, props, uuid)}\n >\n {({ status, isSubmitting }) => (\n \n )}\n \n \n {this.renderButton()}\n
this.handleHide()} centered size=\"lg\">\n \n Wallet initialization\n \n \n \n \n
\n \n \n
\n \n \n \n \n \n
\n \n
\n );\n }\n\n return (\n \n \n
\n );\n};\n\nconst HeaderView = ({ isApiKeySetted, isWalletInitialized }) => {\n const [openedModal, setOpenedModal] = useState(null);\n\n return (\n \n \n \n 
\n \n \n \n {isApiKeySetted && renderWalletForms(isWalletInitialized, openedModal, setOpenedModal)}\n \n );\n};\n\nexport default memo(HeaderView);\n","import HeaderContainer from './HeaderContainer';\n\nexport default HeaderContainer;\n","import React, { memo, useEffect } from 'react';\nimport { connect } from 'react-redux';\nimport { apiKeySelector } from '../../store/selectors/app';\nimport { isWalletInitializedSelector } from '../../store/selectors/wallet';\nimport walletActions from '../../store/actions/walletActions';\nimport HeaderView from './HeaderView';\n\nconst mapStateToProps = (state) => ({\n apiKey: apiKeySelector(state),\n isWalletInitialized: isWalletInitializedSelector(state),\n});\n\nconst mapDispatchToProps = (dispatch) => ({\n dispatchCheckWalletStatus: () => dispatch(walletActions.checkWalletStatus()),\n});\n\nconst HeaderContainer = (props) => {\n const { apiKey, dispatchCheckWalletStatus, isWalletInitialized } = props;\n\n useEffect(() => {\n if (apiKey !== '') {\n dispatchCheckWalletStatus();\n }\n }, [apiKey, dispatchCheckWalletStatus]);\n\n const isApiKeySetted = apiKey !== '';\n\n return ;\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(memo(HeaderContainer));\n","import React from 'react';\nimport { withRouter } from 'react-router-dom';\nimport MenuList from '../common/MenuList';\nimport './index.scss';\nimport Header from '../Header';\n\nexport const Layout = withRouter((props) => {\n return (\n \n
\n
\n \n
\n
\n {props.children}
\n \n
Synchronization state
\n \n Active synchronization\n
\n \n );\n\n renderCompleteSynchronization = () => (\n <>\n Synchronization state
\n \n Node is synced\n
\n \n );\n\n renderSynchronizationState = (state) =>\n ({\n active: this.renderActiveSynchronization,\n complete: this.renderCompleteSynchronization,\n }[state]);\n\n getSynchronizationState = ({ fullHeight, headersHeight }) => {\n if (fullHeight !== null && headersHeight !== null && fullHeight === headersHeight) {\n return 'complete';\n }\n\n return 'active';\n };\n\n render() {\n const currentSynchState = this.getSynchronizationState(this.props.nodeInfo);\n return (\n \n {this.renderSynchronizationState(currentSynchState)()}\n \n );\n }\n}\n","import React, { Component } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faSync, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';\nimport InfoCard from '../InfoCard';\n\nexport default class WalletSyncCard extends Component {\n renderActiveSynchronization = () => (\n <>\n Synchronization state
\n \n Active synchronization\n
\n \n );\n\n renderCompleteSynchronization = () => (\n <>\n Synchronization state
\n \n Wallet is synced\n
\n \n );\n\n renderErrorSynchronization = () => (\n <>\n Synchronization state
\n \n Error - {this.props.walletStatusData.error}\n
\n \n );\n\n renderSynchronizationState = (state) =>\n ({\n active: this.renderActiveSynchronization,\n complete: this.renderCompleteSynchronization,\n error: this.renderErrorSynchronization,\n }[state]);\n\n getSynchronizationState = (walletStatusData, headersHeight) => {\n if (walletStatusData.error?.trim().length !== 0) {\n return 'error';\n }\n\n if (\n walletStatusData.walletHeight !== null &&\n headersHeight !== null &&\n walletStatusData.walletHeight === headersHeight\n ) {\n return 'complete';\n }\n\n return 'active';\n };\n\n render() {\n const { walletStatusData, headersHeight } = this.props;\n const currentSynchState = this.getSynchronizationState(walletStatusData, headersHeight);\n return (\n \n {this.renderSynchronizationState(currentSynchState)()}\n \n );\n }\n}\n","import React from 'react';\nimport './index.scss';\n\nconst LoaderLogo = () => {\n return (\n \n );\n};\n\nexport default LoaderLogo;\n","import React from 'react';\nimport { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { format } from 'date-fns';\nimport constants from 'utils/constants';\nimport InfoCard from './InfoCard';\nimport SynchCard from './SynchCard';\nimport WalletSyncCard from './WalletSyncCard';\nimport LoaderLogo from '../../common/ErgoLoader/index';\n\nconst getWalletStatus = (isWalletInitialized) => {\n if (!isWalletInitialized) {\n return 'Not initialized';\n }\n\n return 'Initialized';\n};\n\nconst DashboardView = ({\n error,\n nodeInfo,\n isWalletInitialized,\n walletStatusData,\n walletBalanceData,\n ergPrice,\n}) => {\n if (error !== null) {\n return (\n <>\n \n
\n \n \n {error}\n
\n
\n \n );\n }\n\n if (nodeInfo === null) {\n return (\n <>\n \n \n
\n \n );\n }\n\n const { peersCount, bestHeaderId, launchTime, fullHeight, appVersion, isMining } = nodeInfo;\n\n return (\n <>\n \n
Node Information
\n
\n
\n
\n Version
\n {appVersion}
\n \n
\n
\n \n
\n
\n
\n Started at
\n \n {format(new Date(launchTime), 'MM-dd-yyyy HH:mm:ss')}\n
\n \n
\n {fullHeight === null ? null : (\n
\n
\n Current height
\n {fullHeight}
\n \n
\n )}\n {bestHeaderId === null ? null : (\n
\n
\n Best block id
\n {bestHeaderId}
\n \n
\n )}\n
\n
\n Mining enabled
\n {isMining ? 'Yes' : 'No'}
\n \n
\n
\n
\n Peers connected
\n {peersCount}
\n \n
\n
\n
\n
ERG Information
\n
\n
\n
\n \n ERG price in $
\n (based on oracle pool data)\n
\n {ergPrice}
\n \n
\n
\n
\n
Wallet Information
\n
\n
\n
\n Initialization state
\n {getWalletStatus(isWalletInitialized)}
\n \n
\n
\n
\n Lock state
\n \n {walletStatusData.isUnlocked ? 'Unlocked' : 'Locked'}\n
\n \n
\n
\n \n
\n {walletBalanceData && (\n
\n
\n Balance
\n \n {walletBalanceData.balance / constants.nanoErgInErg} ERG{' '}\n {ergPrice &&\n `~ $${Number(\n ergPrice * (walletBalanceData.balance / constants.nanoErgInErg),\n ).toFixed(2)}`}\n
\n \n
\n )}\n {walletBalanceData && (\n
\n
\n Assets
\n \n {Object.values(walletBalanceData.assets).length || '0'}\n
\n \n
\n )}\n
\n
= [S, Dispatch>, MutableRefObject];\n\n// Добавляет ref, по которому текущее значение стейта можно получить\n// сразу вместо того чтобы ждать следующего рендера\nconst useCurrentState = (initialState: S | (() => S)): CurrentStateType => {\n const [state, setState] = useState(() => {\n return typeof initialState === 'function' ? (initialState as () => S)() : initialState;\n });\n const ref = useRef(initialState as S);\n\n useEffect(() => {\n ref.current = state;\n }, [state]);\n\n const setValue = (val: SetStateAction) => {\n const result = typeof val === 'function' ? (val as (prevState: S) => S)(ref.current) : val;\n ref.current = result;\n setState(result);\n };\n\n return [state, setValue, ref];\n};\n\nexport default useCurrentState;\n","import React, { ReactNode } from 'react';\nimport cn from 'classnames';\n\ntype TextVariant =\n | 'h1'\n | 'h2'\n | 'h3'\n | 'h4'\n | 'h5'\n | 'h6'\n | 'subtitle1'\n | 'subtitle2'\n | 'body-text1'\n | 'body-text2'\n | 'small-text1'\n | 'small-text2'\n | 'small-text3';\n\nexport type TextColor =\n | 'brandOrange'\n | 'purple'\n | 'black'\n | 'spaceGray'\n | 'gray5'\n | 'gray4'\n | 'gray3'\n | 'gray2'\n | 'gray1'\n | 'white'\n | 'orange'\n | 'red'\n | 'green'\n | 'blue'\n | 'blueHover'\n | 'brandOrangeHover'\n | 'brandOrangeActive'\n | 'purpleHover'\n | 'purpleActive';\n\nexport type TextComponent = 'span' | 'p' | 'div' | 'h1' | 'label' | 'h2' | 'h3';\n\ninterface IText {\n children?: ReactNode;\n variant?: TextVariant;\n xl?: TextVariant;\n lg?: TextVariant;\n md?: TextVariant;\n sm?: TextVariant;\n component?: TextComponent;\n color?: TextColor;\n className?: string;\n dangerouslySetInnerHTML?: any;\n htmlFor?: string;\n}\n\nconst Text = ({\n children,\n variant,\n component,\n color,\n className,\n dangerouslySetInnerHTML,\n ...props\n}: IText) => {\n const currentVariant = variant;\n\n const Component = component || 'p';\n\n if (dangerouslySetInnerHTML) {\n return (\n <>\n \n\n \n \n );\n }\n\n return (\n \n {children}\n \n \n );\n};\n\nexport default Text;\n","import React from 'react';\n\n// Прокидывает default параметры в компонент\nconst withDefaults = (component: React.ComponentType, defaultProps: DP) => {\n type Props = Partial & Omit;\n // eslint-disable-next-line\n component.defaultProps = defaultProps;\n return component as React.ComponentType;\n};\n\nexport default withDefaults;\n","import React, { useEffect, useState } from 'react';\nimport withDefaults from 'utils/withDefaults';\n\ninterface Props {\n visible?: boolean;\n enterTime?: number;\n leaveTime?: number;\n clearTime?: number;\n className?: string;\n name?: string;\n}\n\nconst defaultProps = {\n visible: false,\n enterTime: 60,\n leaveTime: 60,\n clearTime: 60,\n className: '',\n name: 'transition',\n};\n\nexport type CSSTransitionProps = Props & typeof defaultProps;\n\nconst CSSTransition: React.FC> = ({\n children,\n className,\n visible,\n enterTime,\n leaveTime,\n clearTime,\n name,\n ...props\n}) => {\n const [classes, setClasses] = useState('');\n const [renderable, setRenderable] = useState(visible);\n\n useEffect(() => {\n const statusClassName = visible ? 'enter' : 'leave';\n const time = visible ? enterTime : leaveTime;\n if (visible && !renderable) {\n setRenderable(true);\n }\n\n setClasses(`${name}-${statusClassName}`);\n\n // set class to active\n const timer = setTimeout(() => {\n setClasses(`${name}-${statusClassName} ${name}-${statusClassName}-active`);\n clearTimeout(timer);\n }, time);\n\n // remove classess when animation over\n const clearClassesTimer = setTimeout(() => {\n if (!visible) {\n setClasses('');\n setRenderable(false);\n }\n clearTimeout(clearClassesTimer);\n }, time + clearTime);\n\n return () => {\n clearTimeout(timer);\n clearTimeout(clearClassesTimer);\n };\n }, [visible, renderable]);\n if (!React.isValidElement(children) || !renderable) return null;\n\n return React.cloneElement(children, {\n ...props,\n className: `${children.props.className} ${className} ${classes}`,\n });\n};\n\nexport default withDefaults(CSSTransition, defaultProps);\n","import React, { MouseEvent, useCallback, ReactElement } from 'react';\nimport withDefaults from 'utils/withDefaults';\nimport useCurrentState from 'hooks/useCurrentState';\nimport cn from 'classnames';\nimport CssTransition from '../CssTransition/CssTransition';\nimport styles from './Backdrop.module.scss';\n\ninterface Props {\n onClick?: (event: MouseEvent) => void;\n visible?: boolean;\n children?: ReactElement;\n className?: string;\n}\n\nconst defaultProps = {\n onClick: () => {},\n visible: false,\n};\n\nexport type BackdropProps = Props & typeof defaultProps;\n\nconst Backdrop: React.FC> = React.memo(\n ({ children, onClick, visible, className }: BackdropProps) => {\n const [, setIsContentMouseDown, IsContentMouseDownRef] = useCurrentState(false);\n const clickHandler = (event: MouseEvent) => {\n if (IsContentMouseDownRef.current) return;\n if (onClick) {\n onClick(event);\n }\n };\n const childrenClickHandler = useCallback((event: MouseEvent) => {\n event.stopPropagation();\n }, []);\n const mouseUpHandler = () => {\n if (!IsContentMouseDownRef.current) return;\n const timer = setTimeout(() => {\n setIsContentMouseDown(false);\n clearTimeout(timer);\n }, 0);\n };\n\n return (\n \n \n
\n
setIsContentMouseDown(true)}\n >\n {children}\n \n
\n
{title}
\n \n {description}\n \n \n {primaryButtonContent}\n \n \n {secondaryButtonContent}\n \n \n
\n\n \n
= React.FC
;\ntype ComponentProps = Partial &\n Omit &\n NativeAttrs;\n\nInfoModal.defaultProps = defaultProps;\n\nexport default InfoModal as ModalComponent;\n","import React, { useState, useCallback } from 'react';\nimport { Form, Field } from 'react-final-form';\nimport InfoModal from 'components/common/InfoModal/InfoModal';\nimport cn from 'classnames';\nimport nodeApi from '../../../../../api/api';\nimport customToast from '../../../../../utils/toast';\nimport CopyToClipboard from '../../../../common/CopyToClipboard';\nimport constants from '../../../../../utils/constants';\n\ntype Errors = {\n recipientAddress?: string;\n amount?: string;\n fee?: string;\n asset?: string;\n assetAmount?: string;\n};\n\nconst PaymentSendForm = ({\n apiKey,\n walletBalanceData,\n getWalletBalance,\n explorerSubdomain,\n}: {\n apiKey: string;\n walletBalanceData: any;\n getWalletBalance: any;\n explorerSubdomain: string;\n}) => {\n const currentBalance = walletBalanceData?.balance;\n\n const [transactionId, setTransactionId] = useState(null);\n const [isSentModalOpen, setIsSentModalOpen] = useState(false);\n const [assetCheckbox, setAssetCheckbox] = useState(false);\n\n const paymentSend = useCallback(\n ({ recipientAddress, amount, fee, asset, assetAmount }) => {\n const request = {\n address: recipientAddress.trim(),\n value: Number((parseFloat(amount) * constants.nanoErgInErg).toFixed(1)),\n assets:\n assetCheckbox && asset !== 'none' && assetAmount > 0\n ? [{ tokenId: asset, amount: Number(assetAmount) }]\n : [],\n };\n return nodeApi.post(\n '/wallet/transaction/send',\n {\n requests: [request],\n fee: Number((parseFloat(fee) * constants.nanoErgInErg).toFixed(1)),\n },\n {\n headers: {\n api_key: apiKey,\n },\n },\n );\n },\n [assetCheckbox, apiKey],\n );\n\n const resetForm = (form: any) => {\n form.restart();\n setIsSentModalOpen(false);\n };\n\n const sendForm = useCallback(\n (values) => {\n if (values.recipientAddress.trim() === '' || !values.recipientAddress) {\n return;\n }\n\n paymentSend(values)\n .then(({ data }) => {\n setTransactionId(data);\n setIsSentModalOpen(true);\n getWalletBalance();\n })\n .catch((err) => {\n const errMessage = err.data ? err.data.detail : err.message;\n customToast('error', errMessage);\n });\n },\n [paymentSend, getWalletBalance],\n );\n\n const validateForm = useCallback(\n (values) => {\n const errors: Errors = {};\n\n const totalFeeAndAmount =\n (Number(values.amount) + Number(values.fee)) * constants.nanoErgInErg;\n\n if (!values.recipientAddress || values.recipientAddress?.trim() === '') {\n errors.recipientAddress = 'The field cannot be empty';\n }\n\n if (!values.fee || values.fee < 0.001) {\n errors.fee = 'Minimum 0.001 ERG';\n }\n\n if (values.asset === 'none') {\n errors.asset = 'You need to choose asset';\n }\n\n if (\n walletBalanceData &&\n values.assetAmount &&\n values.asset !== 'none' &&\n values.assetAmount > walletBalanceData.assets[values.asset]\n ) {\n errors.assetAmount = `Maximum ${walletBalanceData.assets[values.asset]}`;\n }\n\n if (assetCheckbox && !values.assetAmount) {\n errors.assetAmount = \"The field can't be empty\";\n }\n\n if (currentBalance < totalFeeAndAmount) {\n errors.amount = `Maximum ${Math.abs(\n currentBalance / constants.nanoErgInErg - Number(values.fee),\n )} ERG`;\n }\n if (values.amount < 0) {\n errors.amount = \"Amount can't be negative\";\n }\n\n if (currentBalance === 0) {\n errors.amount = 'Your balance is empty';\n }\n\n if (values.fee < 0) {\n errors.fee = \"Fee can't be negative\";\n }\n\n return errors;\n },\n [assetCheckbox, walletBalanceData, currentBalance],\n );\n\n return (\n \n
\n
Payment send
\n
{\n return (\n <>\n \n\n {\n setIsSentModalOpen(false);\n }}\n title=\"Payment sent\"\n description={\n <>\n \n Your payment has been sent successfully. The transaction ID is -{' '}\n {transactionId}\n
\n \n \n Click Here To Go To The Explorer\n \n
\n \n }\n primaryButtonContent={OK}\n secondaryButtonContent=\"Send again\"\n onPrimaryHandler={() => resetForm(form)}\n />\n \n );\n }}\n />\n \n
\n
Issue Tokens
\n
{\n return (\n <>\n \n\n {\n setIsSentModalOpen(false);\n }}\n title=\"Congratulations!\"\n description={\n <>\n \n {`You have successfully issued ${assetAmount} ${assetName} tokens! The transaction ID is\\n`}\n {transactionId}\n
\n \n \n Click Here To View Transaction\n \n
\n \n }\n primaryButtonContent={OK}\n secondaryButtonContent=\"Send again\"\n onPrimaryHandler={() => resetForm(form)}\n />\n \n );\n }}\n />\n \n {value.map((item) => (\n
\n
\n {item.value || ''} {item.name || ''}\n
\n
\n
\n ))}\n
{resultContent}
}\n \n );\n};\n\nconst WalletInformationTable = (props: any) => {\n const {\n walletBalance,\n dispatchGetWalletBalance,\n dispatchGetErgPrice,\n dispatchGetWalletAddresses,\n walletAddresses,\n explorerSubdomain,\n } = props;\n\n const getValues = useCallback(() => {\n dispatchGetWalletBalance();\n dispatchGetErgPrice();\n dispatchGetWalletAddresses();\n }, [dispatchGetWalletBalance, dispatchGetErgPrice, dispatchGetWalletAddresses]);\n\n const getAddreses = useCallback((addresses: String[], subdomain: String) => {\n if (addresses.length === 0) {\n return 0;\n }\n\n return addresses.map((item) => ({\n value: (\n \n {item}\n \n ),\n }));\n }, []);\n\n const getAssets = useCallback((assets) => {\n if (Object.values(assets).length === 0) {\n return 0;\n }\n\n return Object.keys(assets).map((key) => ({\n name: {key},\n value: {assets[key]},\n }));\n }, []);\n\n useEffect(() => {\n getValues();\n }, [getValues]);\n\n const data = useMemo(\n () => [\n {\n name: 'Balance',\n value: walletBalance\n ? `${walletBalance.balance / constants.nanoErgInErg} ERG`\n : 'loading...',\n },\n // {\n // name: 'Balance in USD',\n // value: walletBalance\n // ? `$ ${(walletBalance.balance / constants.nanoErgInErg) * ergPrice}`\n // : 'Loading...',\n // },\n {\n name: 'Assets',\n value: walletBalance ? getAssets(walletBalance.assets) : `Loading...`,\n },\n {\n name: 'Addresses',\n value: walletAddresses ? getAddreses(walletAddresses, explorerSubdomain) : `Loading...`,\n },\n ],\n [walletBalance, getAssets, walletAddresses, getAddreses, explorerSubdomain],\n );\n\n const updateValues = useCallback(() => {\n getValues();\n }, [getValues]);\n\n return (\n \n
\n
\n Wallet Information{' '}\n \n
\n \n
\n {data.map(({ value, name }) => (\n \n ))}\n
\n
\n
The wallet UI is locked. You need to unlock the wallet to access its UI.
\n
\n
You need to initialize your wallet to access wallet UI.
\n
\n
To continue, please set your API key.
\n