import * as styles from './styles/assets.styl' ; import cn from 'classnames' ; import * as React from 'react' ; import { useState } from 'react' ; import { ActiveAccountCard } from '../accounts/activeAccountCard' ; import { Trans } from 'react-i18next' ; import { getBalances , setActiveAccount , setUiState } from '../../actions' ; import { PAGES } from '../../pageConfig' ; import { Asset , Money } from '@waves/data-entities' ; import { Button , BUTTON_TYPE , Input , Modal , Tab , TabList , TabPanels , Tabs , } from '../ui' ; import { Intro } from './Intro' ; import { FeatureUpdateInfo } from './FeatureUpdateInfo' ; import { useAppDispatch , useAppSelector } from 'ui/store' ; import { AssetInfo } from './assets/assetInfo' ; import { TabAssets } from './assets/tabs/tabAssets' ; import { TabNfts } from './assets/tabs/tabNfts' ; import { TabTxHistory } from './assets/tabs/tabTxHistory' ; import { AssetDetail } from '../../services/Background' ; export function SearchInput ( { value , onInput , onClear } ) { const input = React . createRef < Input > ( ) ; return ( < div className = { cn ( 'flex grow' , styles . searchInputWrapper ) } > < Input ref = { input } className = { cn ( styles . searchInput , 'font300' ) } onInput = { onInput } value = { value } spellCheck = { false } / > { value && ( < Button className = { styles . searchClose } type = { BUTTON_TYPE . CUSTOM } onClick = { ( ) => { input . current . focus ( ) ; onClear ( ) ; } } > < svg width = "14" height = "14" viewBox = "0 0 18 18" fill = "none" > < path d = "M10.1523 9L14.7614 4.39091C15.0795 4.07272 15.0795 3.55683 14.7614 3.23864C14.4432 2.92045 13.9273 2.92045 13.6091 3.23864L9 7.84773L4.39091 3.23864C4.07272 2.92045 3.55683 2.92045 3.23864 3.23864C2.92045 3.55683 2.92045 4.07272 3.23864 4.39091L7.84773 9L3.23864 13.6091C2.92045 13.9273 2.92045 14.4432 3.23864 14.7614C3.55683 15.0795 4.07272 15.0795 4.39091 14.7614L9 10.1523L13.6091 14.7614C13.9273 15.0795 14.4432 15.0795 14.7614 14.7614C15.0795 14.4432 15.0795 13.9273 14.7614 13.6091L10.1523 9Z" fill = "currentColor" / > < /svg> < /Button>)} < /div>); } interface Props { setTab : ( newTab : string ) => void ; } export function Assets ( { setTab } ) { const dispatch = useAppDispatch ( ) ; const activeAccount = useAppSelector ( state => state . accounts . find ( ( { address } ) => address === state . selectedAccount . address ) ) ; const assets = useAppSelector ( state => state . assets ) ; const balances = useAppSelector ( state => state . balances ) ; const notifications = useAppSelector ( state => state . localState . notifications ) ; const showUpdateInfo = useAppSelector ( state => ! state . uiState . isFeatureUpdateShown && ! ! state . accounts . length ) ; const activeTab = useAppSelector ( state => state . uiState ?. assetsTab ) ; const [ showAsset , setShowAsset ] = useState ( false ) ; const [ showCopy , setShowCopy ] = React . useState ( false ) ; const [ currentAsset , setCurrentAsset ] = [ useAppSelector ( state => state . uiState ?. currentAsset ) , ( assetId ) => dispatch ( setUiState ( { currentAsset : assetId } ) ) , ] ; const [ currentTab , setCurrentTab ] = [ useAppSelector ( state => state . uiState ?. assetsTab || 0 ) , ( tabIndex ) => dispatch ( setUiState ( { assetsTab : tabIndex } ) ) , ] ; const address = activeAccount && activeAccount . address ; React . useEffect ( ( ) => { setCurrentAsset ( null ) ; if ( ! balances [ address ] ) { dispatch ( getBalances ( ) ) ; } } , [ ] ) ; const onSelectHandler = account => { dispatch ( setActiveAccount ( account ) ) ; setTab ( PAGES . ACCOUNT_INFO ) ; } ; if ( ! activeAccount ) { return < Intro />; } const assetInfo = assets [ 'WAVES' ] ; let wavesBalance ; if ( assetInfo ) { const asset = new Asset ( assetInfo ) ; wavesBalance = new Money ( balances [ address ] ?. available || 0 , asset ) ; } return ( < div className = { styles . assets } > < div className = { styles . activeAccount } > < ActiveAccountCard account = { activeAccount } balance = { wavesBalance } onCopy = { ( ) => { setShowCopy ( true ) ; setTimeout ( ( ) => setShowCopy ( false ) , 1000 ) ; } } onSwapClick = { ( ) => { setTab ( PAGES . SWAP ) ; } } onOtherAccountsClick = { ( ) => { setTab ( PAGES . OTHER_ACCOUNTS ) ; } } onClick = { onSelectHandler } onShowQr = { ( ) => { setTab ( PAGES . QR_CODE_SELECTED ) ; } } /> < /div> < Tabs activeTab = { activeTab } onTabChange = { activeIndex => activeIndex !== currentTab && setCurrentTab ( activeIndex ) } > < TabList className = "flex body3" > < Tab className = { styles . tabItem } > < Trans i18nKey = "assets.assets" / > < /Tab> < Tab className = { styles . tabItem } > < Trans i18nKey = "assets.nfts" / > < /Tab> < Tab className = { styles . tabItem } > < Trans i18nKey = "assets.history" / > < /Tab> < /TabList> < TabPanels className = { styles . tabPanels } > < TabAssets onInfoClick = { assetId => { setCurrentAsset ( assets [ assetId ] ) ; setShowAsset ( true ) ; } } onSendClick = { assetId => { setCurrentAsset ( assets [ assetId ] ) ; setTab ( PAGES . SEND ) ; } } /> < TabNfts onInfoClick = { assetId => { setCurrentAsset ( assets [ assetId ] ) ; setShowAsset ( true ) ; } } onSendClick = { assetId => { setCurrentAsset ( assets [ assetId ] ) ; setTab ( PAGES . SEND ) ; } } /> < TabTxHistory / > < /TabPanels> < /Tabs> < Modal animation = { Modal . ANIMATION . FLASH_SCALE } showModal = { showCopy } > < div className = "modal notification" > < Trans i18nKey = "assets.copied" / > < /div> < /Modal> < Modal animation = { Modal . ANIMATION . FLASH_SCALE } showModal = { notifications . accountCreationSuccess } > < div className = "modal notification" > < div > < Trans i18nKey = "assets.accountCreationSuccessNotification" / > < /div> < /div> < /Modal> < Modal animation = { Modal . ANIMATION . FLASH_SCALE } showModal = { notifications . accountImportSuccess } > < div className = "modal notification" > < div > < Trans i18nKey = "assets.accountImportSuccessNotification" / > < /div> < /div> < /Modal> < Modal animation = { Modal . ANIMATION . FLASH_SCALE } showModal = { notifications . selected } > < div className = "modal notification" > < div > < Trans i18nKey = "assets.selectAccountNotification" / > < /div> < /div> < /Modal> < Modal animation = { Modal . ANIMATION . FLASH_SCALE } showModal = { notifications . deleted } > < div className = "modal notification active-asset" > < div > < Trans i18nKey = "assets.deleteAccount" / > < /div> < /div> < /Modal> < Modal animation = { Modal . ANIMATION . FLASH } showModal = { currentAsset && showAsset } onExited = { ( ) => setCurrentAsset ( null ) } > < AssetInfo asset = { currentAsset } onCopy = { ( ) => { setShowCopy ( true ) ; setTimeout ( ( ) => setShowCopy ( false ) , 1000 ) ; } } onClose = { ( ) => setShowAsset ( false ) } /> < /Modal> < Modal animation = { Modal . ANIMATION . FLASH } showModal = { showUpdateInfo } > < FeatureUpdateInfo onClose = { ( ) => { dispatch ( setUiState ( { isFeatureUpdateShown : true } ) ) ; } } onSubmit = { ( ) => { dispatch ( setUiState ( { isFeatureUpdateShown : true } ) ) ; setTab ( PAGES . EXPORT_ACCOUNTS ) ; } } /> < /Modal> < /div>); }