11// @flow
2- import React , { Component } from 'react' ;
2+ import React from 'react' ;
33import BigNumber from 'bignumber.js' ;
44import classnames from 'classnames' ;
55import { PopOver } from 'react-polymorph/lib/components/PopOver' ;
6- import { defineMessages , intlShape , FormattedHTMLMessage } from 'react-intl' ;
6+ import { defineMessages , FormattedHTMLMessage } from 'react-intl' ;
77import { observer } from 'mobx-react' ;
8+ import { discreetWalletTokenAmount } from '../../features/discreet-mode/replacers/discreetWalletTokenAmount' ;
89import styles from './AssetAmount.scss' ;
9- import { formattedTokenWalletAmount } from '../../utils/formatters' ;
1010import type { AssetMetadata } from '../../api/assets/types' ;
11+ import { useDiscreetModeFeature } from '../../features/discreet-mode' ;
1112
1213const messages = defineMessages ( {
1314 unformattedAmount : {
@@ -26,47 +27,57 @@ type Props = {
2627 isShort ?: boolean ,
2728} ;
2829
29- @observer
30- export default class AssetAmount extends Component < Props > {
31- static contextTypes = {
32- intl : intlShape . isRequired ,
33- } ;
30+ function AssetAmount ( {
31+ amount,
32+ metadata,
33+ decimals,
34+ isLoading,
35+ className,
36+ isShort,
37+ } : Props ) {
38+ const discreetModeFeature = useDiscreetModeFeature ( ) ;
3439
35- render ( ) {
36- const {
37- amount ,
38- metadata,
39- decimals,
40- isLoading,
41- className,
42- isShort,
43- } = this . props ;
44- if ( isLoading ) return '- ';
45- const componentStyles = classnames ( [ styles . component , className ] ) ;
46- const content = ! isLoading
47- ? formattedTokenWalletAmount ( amount , metadata , decimals , isShort )
48- : '-' ;
49- return (
50- < div className = { componentStyles } >
51- { decimals ? (
52- < PopOver
53- content = {
54- < FormattedHTMLMessage
55- { ...messages . unformattedAmount }
56- values = { {
57- amount : formattedTokenWalletAmount ( amount , null , 0 ) ,
58- } }
59- />
60- }
61- visible = { decimals ? undefined : false }
62- className = { styles . unformattedAmount }
63- >
64- { content }
65- </ PopOver >
66- ) : (
67- < span > { content } </ span >
68- ) }
69- </ div >
70- ) ;
71- }
40+ if ( isLoading ) return '-' ;
41+ const componentStyles = classnames ( [ styles . component , className ] ) ;
42+ const content = ! isLoading
43+ ? discreetModeFeature . discreetValue ( {
44+ replacer : discreetWalletTokenAmount ( {
45+ amount,
46+ metadata,
47+ decimals,
48+ isShort,
49+ } ) ,
50+ } )
51+ : '-' ;
52+
53+ return (
54+ < div className = { componentStyles } >
55+ { decimals ? (
56+ < PopOver
57+ content = {
58+ < FormattedHTMLMessage
59+ { ...messages . unformattedAmount }
60+ values = { {
61+ amount : discreetModeFeature . discreetValue ( {
62+ replacer : discreetWalletTokenAmount ( {
63+ amount,
64+ metadata : null ,
65+ decimals : 0 ,
66+ } ) ,
67+ } ) ,
68+ } }
69+ />
70+ }
71+ visible = { decimals ? undefined : false }
72+ className = { styles . unformattedAmount }
73+ >
74+ { content }
75+ </ PopOver >
76+ ) : (
77+ < span > { content } </ span >
78+ ) }
79+ </ div >
80+ ) ;
7281}
82+
83+ export default observer ( AssetAmount ) ;
0 commit comments