Skip to content

Commit 821154d

Browse files
thisconnectthisconnect
committed
Merge branch 'frontend-small-bitsurance-refactor'
2 parents d00e790 + 06a1dd9 commit 821154d

File tree

1 file changed

+53
-54
lines changed

1 file changed

+53
-54
lines changed

‎frontends/web/src/routes/bitsurance/dashboard.tsx

Lines changed: 53 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -140,65 +140,64 @@ export const BitsuranceDashboard = ({ accounts }: TProps) => {
140140
</div>
141141

142142
<div className={style.accountsContainer}>
143-
{accountsByKeystore?.length && insurances ? accountsByKeystore.map((keystore) => (
144-
<>
145-
{ anyAccountInsured(keystore) && (
146-
<>
147-
<p className={style.keystore}>{keystore.keystore.name}
148-
{ isAmbiguiousName(keystore.keystore.name, accountsByKeystore) ? (
149-
// Disambiguate accounts group by adding the fingerprint.
150-
// The most common case where this would happen is when adding accounts from the
151-
// same seed using different passphrases.
152-
<span className={style.subtle}> ({keystore.keystore.rootFingerprint})</span>
153-
) : null }
154-
</p>
155-
<div>
156-
{keystore.accounts?.length ? keystore.accounts.map(account => insurances && insurances[account.code] ? (
157-
<div key={account.code} className={style.row}>
158-
<div className="flex flex-items-center">
159-
<p className={`${style.text} ${style.accountName}`}>
160-
{accounts.filter(ac => ac.code === account.code).map(ac => ac.name)}
161-
</p>
162-
<span className={`${style.text} ${style.subtle}`}>
163-
{ balances && balances[account.code] ? (
164-
<>
165-
<Amount
166-
amount={balances[account.code].available.amount}
167-
unit={balances[account.code].available.unit}
168-
removeBtcTrailingZeroes
169-
/>
170-
{` ${balances[account.code].available.unit}`}
171-
</>
172-
) : <Skeleton/>}
173-
</span>
174-
</div>
143+
{accountsByKeystore?.length && insurances ? accountsByKeystore.map(({ accounts, keystore }) => (
144+
anyAccountInsured({ accounts, keystore }) && (
145+
<div key={keystore.rootFingerprint}>
146+
<p className={style.keystore}>{keystore.name}
147+
{ isAmbiguiousName(keystore.name, accountsByKeystore) ? (
148+
// Disambiguate accounts group by adding the fingerprint.
149+
// The most common case where this would happen is when adding accounts from the
150+
// same seed using different passphrases.
151+
<span className={style.subtle}> ({keystore.rootFingerprint})</span>
152+
) : null }
153+
</p>
154+
<div>
155+
{accounts?.length ? accounts.map(account => insurances && insurances[account.code] ? (
156+
<div key={account.code} className={style.row}>
157+
<div className="flex flex-items-center">
158+
<p className={`${style.text} ${style.accountName}`}>
159+
{accounts.filter(ac => ac.code === account.code).map(ac => ac.name)}
160+
</p>
161+
<span className={`${style.text} ${style.subtle}`}>
162+
{ balances && balances[account.code] ? (
163+
<>
164+
<Amount
165+
amount={balances[account.code].available.amount}
166+
unit={balances[account.code].available.unit}
167+
removeBtcTrailingZeroes
168+
/>
169+
{` ${balances[account.code].available.unit}`}
170+
</>
171+
) : <Skeleton/>}
172+
</span>
173+
</div>
175174

176-
<div className={'m-top-half m-bottom-half'}>
177-
<p className={`${style.text} ${style.subtle} m-bottom-quarter`}>{t('bitsurance.dashboard.coverage')}</p>
178-
<p className={style.text}>{insurances[account.code].details.maxCoverageFormatted} {insurances[account.code].details.currency}</p>
179-
</div>
175+
<div className={'m-top-half m-bottom-half'}>
176+
<p className={`${style.text} ${style.subtle} m-bottom-quarter`}>{t('bitsurance.dashboard.coverage')}</p>
177+
<p className={style.text}>{insurances[account.code].details.maxCoverageFormatted} {insurances[account.code].details.currency}</p>
178+
</div>
180179

181-
<div className="flex flex-column-mobile">
180+
<div className="flex flex-column-mobile">
181+
<div className="flex">
182+
<AccountStatusIcon status={insurances[account.code].status} />
183+
<p className={`${style.text} m-left-quarter m-right-half`}>{t('bitsurance.dashboard.' + insurances[account.code].status)}</p>
184+
</div>
185+
<A
186+
className={`${style.text} ${style.link} m-top-quarter-on-small`}
187+
href={insurances[account.code].details.support}
188+
>
182189
<div className="flex">
183-
<AccountStatusIcon status={insurances[account.code].status} />
184-
<p className={`${style.text} m-left-quarter m-right-half`}>{t('bitsurance.dashboard.' + insurances[account.code].status)}</p>
190+
<ExternalLink width={16} />
191+
<span className="m-left-quarter">{t('bitsurance.dashboard.supportLink')}</span>
185192
</div>
186-
<A
187-
className={`${style.text} ${style.link} m-top-quarter-on-small`}
188-
href={insurances[account.code].details.support}
189-
>
190-
<div className="flex">
191-
<ExternalLink width={16} />
192-
<span className="m-left-quarter">{t('bitsurance.dashboard.supportLink')}</span>
193-
</div>
194-
</A>
195-
</div>
196-
193+
</A>
197194
</div>
198-
) : null) : <HorizontallyCenteredSpinner />}
199-
</div>
200-
</>)}
201-
</>
195+
196+
</div>
197+
) : null) : <HorizontallyCenteredSpinner />}
198+
</div>
199+
</div>
200+
)
202201
)) : <HorizontallyCenteredSpinner />}
203202
</div>
204203
</ViewContent>

0 commit comments

Comments
 (0)