Skip to content

Commit 6b88f06

Browse files
lukaw3dlukaw3d
authored
Merge pull request #2342 from oasisprotocol/lw/advanced
Hide advanced fields
2 parents 5e1ad71 + 8b7c26b commit 6b88f06

File tree

9 files changed

+227
-167
lines changed

9 files changed

+227
-167
lines changed

‎.changelog/2342.feature.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Hide advanced fields

‎src/app/components/AdvancedField/AdvancedField.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { ReactNode } from 'react'
2+
import { useLocalSettings } from '../../hooks/useLocalSettings'
23

3-
export function AdvancedField(props: { children: ReactNode }) {
4-
// TODO
4+
// TODO: detect misused AdvancedFields: if there are AdvancedFields on page but no ToggleAdvancedFields
5+
export function AdvancedField(props: { children: ReactNode; alwaysVisible?: boolean }) {
6+
const { settings } = useLocalSettings()
7+
if (!settings.showAdvancedFields && !props.alwaysVisible) return null
58
return props.children
69
}

‎src/app/components/AdvancedField/ToggleAdvancedFields.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { useLocalSettings } from '../../hooks/useLocalSettings'
2+
import { useTranslation } from 'react-i18next'
3+
import { ChevronsDownIcon, ChevronsUpIcon } from 'lucide-react'
4+
import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
5+
6+
export function ToggleAdvancedFields() {
7+
const { t } = useTranslation()
8+
const {
9+
settings: { showAdvancedFields },
10+
changeSetting,
11+
} = useLocalSettings()
12+
13+
return (
14+
<div className="flex items-center gap-3">
15+
<hr className="grow" />
16+
<Button
17+
variant="link"
18+
className="hover:no-underline"
19+
onClick={() => changeSetting('showAdvancedFields', !showAdvancedFields)}
20+
>
21+
{showAdvancedFields ? (
22+
<>
23+
{t('advancedFields.hideAdvancedFields')}
24+
<ChevronsUpIcon size={'1.3em'} />
25+
</>
26+
) : (
27+
<>
28+
{t('advancedFields.showAdvancedFields')}
29+
<ChevronsDownIcon size={'1.3em'} />
30+
</>
31+
)}
32+
</Button>
33+
<hr className="grow" />
34+
</div>
35+
)
36+
}

‎src/app/pages/ConsensusTransactionDetailPage/index.tsx‎

Lines changed: 108 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { ConsensusEventTypeFilter } from '../../components/ConsensusEvents/Conse
2828
import { CardDivider } from '../../components/Divider'
2929
import { useConsensusEventTypeParam } from '../../hooks/useCommonParams'
3030
import { AdvancedField } from '../../components/AdvancedField/AdvancedField'
31+
import { ToggleAdvancedFields } from '../../components/AdvancedField/ToggleAdvancedFields'
3132

3233
export const ConsensusTransactionDetailPage: FC = () => {
3334
const { isMobile } = useScreenSize()
@@ -107,117 +108,121 @@ export const ConsensusTransactionDetailView: FC<{
107108
const tokenPriceInfo = tokenPrices?.[transaction.ticker]
108109

109110
return (
110-
<StyledDescriptionList standalone={!detailsPage} highlight={transaction.markAsNew}>
111-
{showLayer && (
112-
<>
113-
<dt>{t('common.paratime')}</dt>
114-
<dd>
115-
<DashboardLink scope={transaction} />
116-
</dd>
117-
</>
118-
)}
119-
<dt>{t('common.hash')}</dt>
120-
<dd>
121-
<TransactionLink scope={transaction} hash={transaction.hash} />
122-
<CopyToClipboard value={transaction.hash} />
123-
</dd>
124-
<dt>{t('common.status')}</dt>
125-
<dd style={{ flexWrap: 'wrap', gap: '10px' }}>
126-
<StatusIcon success={transaction.success} error={transaction.error} withText={true} />
127-
</dd>
128-
<dt>{t('common.type')}</dt>
129-
<dd className="p-0!">
130-
<ConsensusTransactionMethod method={transaction.method} />
131-
</dd>
132-
<dt>{t('common.timestamp')}</dt>
133-
<dd>{formattedTimestamp}</dd>
134-
<dt>{t('common.height')}</dt>
135-
<dd>
136-
<BlockLink scope={transaction} height={transaction.block} />
137-
<CopyToClipboard value={transaction.block.toString()} />
138-
</dd>
139-
<dt>{t('common.from')}</dt>
140-
<dd>
141-
<div className="inline-flex items-center">
142-
<ConsensusAccountLink
143-
network={transaction.network}
144-
address={transaction.sender}
145-
alwaysTrim={false}
146-
/>
147-
<CopyToClipboard value={transaction.sender} />
148-
</div>
149-
</dd>
150-
{transaction.to && (
151-
<>
152-
<dt>{t('common.to')}</dt>
153-
<dd>
154-
<div className="inline-flex items-center">
155-
<ConsensusAccountLink
156-
network={transaction.network}
157-
address={transaction.to}
158-
alwaysTrim={false}
159-
/>
160-
<CopyToClipboard value={transaction.to} />
161-
</div>
162-
</dd>
163-
</>
164-
)}
165-
{transaction.amount && (
166-
<>
167-
<dt>{t('common.amount')}</dt>
168-
<dd>
169-
<RoundedBalance value={transaction.amount} ticker={transaction.ticker} />
170-
</dd>
171-
</>
172-
)}
173-
{detailsPage && (
174-
<>
175-
{transaction.amount &&
176-
!!tokenPriceInfo &&
177-
!tokenPriceInfo.isLoading &&
178-
(tokenPriceInfo.hasFailed || (!tokenPriceInfo.isFree && tokenPriceInfo.price !== undefined)) && (
111+
<>
112+
<StyledDescriptionList standalone={!detailsPage} highlight={transaction.markAsNew}>
113+
{showLayer && (
114+
<>
115+
<dt>{t('common.paratime')}</dt>
116+
<dd>
117+
<DashboardLink scope={transaction} />
118+
</dd>
119+
</>
120+
)}
121+
<dt>{t('common.hash')}</dt>
122+
<dd>
123+
<TransactionLink scope={transaction} hash={transaction.hash} />
124+
<CopyToClipboard value={transaction.hash} />
125+
</dd>
126+
<dt>{t('common.status')}</dt>
127+
<dd style={{ flexWrap: 'wrap', gap: '10px' }}>
128+
<StatusIcon success={transaction.success} error={transaction.error} withText={true} />
129+
</dd>
130+
<dt>{t('common.type')}</dt>
131+
<dd className="p-0!">
132+
<ConsensusTransactionMethod method={transaction.method} />
133+
</dd>
134+
<dt>{t('common.timestamp')}</dt>
135+
<dd>{formattedTimestamp}</dd>
136+
<dt>{t('common.height')}</dt>
137+
<dd>
138+
<BlockLink scope={transaction} height={transaction.block} />
139+
<CopyToClipboard value={transaction.block.toString()} />
140+
</dd>
141+
<dt>{t('common.from')}</dt>
142+
<dd>
143+
<div className="inline-flex items-center">
144+
<ConsensusAccountLink
145+
network={transaction.network}
146+
address={transaction.sender}
147+
alwaysTrim={false}
148+
/>
149+
<CopyToClipboard value={transaction.sender} />
150+
</div>
151+
</dd>
152+
{transaction.to && (
153+
<>
154+
<dt>{t('common.to')}</dt>
155+
<dd>
156+
<div className="inline-flex items-center">
157+
<ConsensusAccountLink
158+
network={transaction.network}
159+
address={transaction.to}
160+
alwaysTrim={false}
161+
/>
162+
<CopyToClipboard value={transaction.to} />
163+
</div>
164+
</dd>
165+
</>
166+
)}
167+
{transaction.amount && (
168+
<>
169+
<dt>{t('common.amount')}</dt>
170+
<dd>
171+
<RoundedBalance value={transaction.amount} ticker={transaction.ticker} />
172+
</dd>
173+
</>
174+
)}
175+
{detailsPage && (
176+
<>
177+
{transaction.amount &&
178+
!!tokenPriceInfo &&
179+
!tokenPriceInfo.isLoading &&
180+
(tokenPriceInfo.hasFailed ||
181+
(!tokenPriceInfo.isFree && tokenPriceInfo.price !== undefined)) && (
182+
<>
183+
<dt>{t('currentFiatValue.title')}</dt>
184+
<dd>
185+
<CurrentFiatValue amount={transaction.amount} {...tokenPriceInfo} />
186+
</dd>
187+
</>
188+
)}
189+
{transaction.body?.shares && (
179190
<>
180-
<dt>{t('currentFiatValue.title')}</dt>
191+
<dt>{t('common.shares')}</dt>
181192
<dd>
182-
<CurrentFiatValue amount={transaction.amount} {...tokenPriceInfo} />
193+
<RoundedBalance compactLargeNumbers value={transaction.body?.shares} />
183194
</dd>
184195
</>
185196
)}
186-
{transaction.body?.shares && (
187-
<>
188-
<dt>{t('common.shares')}</dt>
189-
<dd>
190-
<RoundedBalance compactLargeNumbers value={transaction.body?.shares} />
191-
</dd>
192-
</>
193-
)}
194-
<dt>{t('common.fee')}</dt>
195-
<dd>
196-
<RoundedBalance value={transaction.fee} ticker={transaction.ticker} />
197-
</dd>
198-
199-
<AdvancedField>
200-
<dt>{t('common.gasUsed')}</dt>
201-
<dd>{transaction.gas_used ? transaction.gas_used.toLocaleString() : t('common.missing')}</dd>
202-
</AdvancedField>
197+
<dt>{t('common.fee')}</dt>
198+
<dd>
199+
<RoundedBalance value={transaction.fee} ticker={transaction.ticker} />
200+
</dd>
203201

204-
{transaction.gas_limit && (
205202
<AdvancedField>
206-
<dt>{t('common.gasLimit')}</dt>
207-
<dd>
208-
{t('common.valuePair', {
209-
value: transaction.gas_limit,
210-
})}
211-
</dd>
203+
<dt>{t('common.gasUsed')}</dt>
204+
<dd>{transaction.gas_used ? transaction.gas_used.toLocaleString() : t('common.missing')}</dd>
212205
</AdvancedField>
213-
)}
214206

215-
<AdvancedField>
216-
<dt>{t('common.nonce')}</dt>
217-
<dd>{transaction.nonce.toLocaleString()}</dd>
218-
</AdvancedField>
219-
</>
220-
)}
221-
</StyledDescriptionList>
207+
{transaction.gas_limit && (
208+
<AdvancedField>
209+
<dt>{t('common.gasLimit')}</dt>
210+
<dd>
211+
{t('common.valuePair', {
212+
value: transaction.gas_limit,
213+
})}
214+
</dd>
215+
</AdvancedField>
216+
)}
217+
218+
<AdvancedField>
219+
<dt>{t('common.nonce')}</dt>
220+
<dd>{transaction.nonce.toLocaleString()}</dd>
221+
</AdvancedField>
222+
</>
223+
)}
224+
</StyledDescriptionList>
225+
<ToggleAdvancedFields />
226+
</>
222227
)
223228
}

0 commit comments

Comments
 (0)