Skip to content

Commit 6ccdb1f

Browse files
ckeshavackeshava
authored
Merge branch 'staging' into refactor/streams-take-3
2 parents 9a3be32 + bb1d642 commit 6ccdb1f

File tree

13 files changed

+985
-1
lines changed

13 files changed

+985
-1
lines changed

‎src/containers/App/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ import { Nodes } from '../Network/Nodes'
4545
import { ValidatorsPage } from '../Network/Validators'
4646
import { UpgradeStatus } from '../Network/UpgradeStatus'
4747
import { Tokens } from '../Tokens'
48+
import { TokenNonMain } from '../TokenNonMain'
4849

4950
export const AppWrapper = () => {
5051
const mode = process.env.VITE_ENVIRONMENT
@@ -76,7 +77,7 @@ export const AppWrapper = () => {
7677
[UPGRADE_STATUS_ROUTE, UpgradeStatus],
7778
[AMENDMENTS_ROUTE, Amendments],
7879
[VALIDATOR_ROUTE, Validator],
79-
[TOKEN_ROUTE, Token],
80+
[TOKEN_ROUTE, mode === 'mainnet' ? Token : TokenNonMain],
8081
[TOKENS_ROUTE, Tokens],
8182
[NFT_ROUTE, NFT],
8283
[AMENDMENT_ROUTE, Amendment],

‎src/containers/TokenNonMain/TokenHeader/index.tsx‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
import { useTranslation } from 'react-i18next'
2+
import './styles.scss'
3+
import { localizeNumber, formatLargeNumber } from '../../shared/utils'
4+
import Currency from '../../shared/components/Currency'
5+
import { Account } from '../../shared/components/Account'
6+
import DomainLink from '../../shared/components/DomainLink'
7+
import { TokenTableRow } from '../../shared/components/TokenTableRow'
8+
import { useLanguage } from '../../shared/hooks'
9+
import { LEDGER_ROUTE, TRANSACTION_ROUTE } from '../../App/routes'
10+
import { RouteLink } from '../../shared/routing'
11+
import { TokenData } from '../../../rippled/token'
12+
import { XRP_BASE } from '../../shared/transactionUtils'
13+
14+
const CURRENCY_OPTIONS = {
15+
style: 'currency',
16+
currency: 'XRP',
17+
minimumFractionDigits: 2,
18+
maximumFractionDigits: 6,
19+
}
20+
21+
interface TokenHeaderProps {
22+
accountId: string
23+
currency: string
24+
data: TokenData
25+
}
26+
27+
export const TokenHeader = ({
28+
accountId,
29+
currency,
30+
data,
31+
}: TokenHeaderProps) => {
32+
const language = useLanguage()
33+
const { t } = useTranslation()
34+
const { domain, rate, emailHash, previousLedger, previousTxn } = data
35+
36+
const renderDetails = () => {
37+
const prevTxn = previousTxn && previousTxn.replace(/(.{20})..+/, '$1...')
38+
const abbrvEmail = emailHash && emailHash.replace(/(.{20})..+/, '$1...')
39+
return (
40+
<table className="token-table">
41+
<tbody>
42+
{domain && (
43+
<TokenTableRow
44+
label={t('domain')}
45+
value={<DomainLink domain={domain} />}
46+
/>
47+
)}
48+
{rate && <TokenTableRow label={t('fee_rate')} value={`${rate}%`} />}
49+
{previousLedger && (
50+
<TokenTableRow
51+
label={t('last_ledger')}
52+
value={
53+
<RouteLink
54+
to={LEDGER_ROUTE}
55+
params={{ identifier: previousLedger }}
56+
>
57+
{previousLedger}
58+
</RouteLink>
59+
}
60+
/>
61+
)}
62+
<TokenTableRow
63+
label={t('last_affecting_transaction')}
64+
value={
65+
<RouteLink
66+
to={TRANSACTION_ROUTE}
67+
params={{ identifier: previousTxn }}
68+
>
69+
{prevTxn}
70+
</RouteLink>
71+
}
72+
/>
73+
{emailHash && (
74+
<TokenTableRow label={t('email_hash')} value={abbrvEmail} />
75+
)}
76+
</tbody>
77+
</table>
78+
)
79+
}
80+
81+
const renderSettings = () => {
82+
const { flags } = data
83+
84+
const rippling =
85+
flags && flags.includes('lsfDefaultRipple') ? 'enabled' : 'disabled'
86+
const depositAuth =
87+
flags && flags.includes('lsfDepositAuth') ? 'enabled' : 'disabled'
88+
const masterKey =
89+
flags && flags.includes('lsfDisableMaster') ? 'disabled' : 'enabled'
90+
const receivingXRP =
91+
flags && flags.includes('lsfDisallowXRP') ? 'disabled' : 'enabled'
92+
const frozen = flags && flags.includes('lsfGlobalFreeze') ? 'true' : 'false'
93+
const noFreeze = flags && flags.includes('lsfNoFreeze') ? 'true' : 'false'
94+
const requireAuth =
95+
flags && flags.includes('lsfRequireAuth') ? 'true' : 'false'
96+
const requireDestTag =
97+
flags && flags.includes('lsfRequireDestTag') ? 'true' : 'false'
98+
const clawback =
99+
flags && flags.includes('lsfAllowTrustLineClawback') ? 'true' : 'false'
100+
101+
return (
102+
<table className="token-table">
103+
<tbody>
104+
<TokenTableRow label="Rippling" value={rippling} />
105+
<TokenTableRow label="Deposit Auth" value={depositAuth} />
106+
<TokenTableRow label="Master Key" value={masterKey} />
107+
<TokenTableRow label="Receiving XRP" value={receivingXRP} />
108+
<TokenTableRow label="Frozen" value={frozen} />
109+
<TokenTableRow label="No freeze" value={noFreeze} />
110+
<TokenTableRow label="Require Auth" value={requireAuth} />
111+
<TokenTableRow label="Require Dest Tag" value={requireDestTag} />
112+
<TokenTableRow label="Allow TrustLine Clawback" value={clawback} />
113+
</tbody>
114+
</table>
115+
)
116+
}
117+
118+
const renderHeaderContent = () => {
119+
const { balance, sequence, obligations, reserve } = data
120+
const currencyBalance = localizeNumber(
121+
parseInt(balance, 10) / XRP_BASE || 0.0,
122+
language,
123+
CURRENCY_OPTIONS,
124+
)
125+
const reserveBalance = localizeNumber(
126+
reserve || 0.0,
127+
language,
128+
CURRENCY_OPTIONS,
129+
)
130+
const obligationsBalance = formatLargeNumber(
131+
Number.parseFloat(obligations || '0'),
132+
)
133+
134+
return (
135+
<div className="section header-container">
136+
<div className="info-container">
137+
<div className="values">
138+
<div className="title">{t('accounts.xrp_balance')}</div>
139+
<div className="value">{currencyBalance}</div>
140+
</div>
141+
<div className="values">
142+
<div className="title">{t('reserve')}</div>
143+
<div className="value">{reserveBalance}</div>
144+
</div>
145+
<div className="values">
146+
<div className="title">{t('sequence_number_short')}</div>
147+
<div className="value">{sequence}</div>
148+
</div>
149+
<div className="values">
150+
<div className="title">{t('issuer_address')}</div>
151+
<div className="value">
152+
<Account account={accountId} />
153+
</div>
154+
</div>
155+
<div className="values">
156+
<div className="title">{t('obligations')}</div>
157+
<div className="value">
158+
{obligationsBalance.num}
159+
{obligationsBalance.unit}
160+
</div>
161+
</div>
162+
</div>
163+
<div className="bottom-container">
164+
<div className="details">
165+
<h2>{t('details')}</h2>
166+
{renderDetails()}
167+
</div>
168+
<div className="settings">
169+
<h2 className="title">{t('settings')}</h2>
170+
{renderSettings()}
171+
</div>
172+
</div>
173+
</div>
174+
)
175+
}
176+
177+
return (
178+
<div className="box token-header-non-main">
179+
<div className="section box-header">
180+
<h1>
181+
<Currency currency={currency} />
182+
</h1>
183+
{emailHash && (
184+
<img
185+
alt={`${currency} logo`}
186+
src={`https://www.gravatar.com/avatar/${emailHash.toLowerCase()}`}
187+
/>
188+
)}
189+
</div>
190+
<div className="box-content">{renderHeaderContent()}</div>
191+
</div>
192+
)
193+
}

0 commit comments

Comments
 (0)