Skip to content

Commit 8274a0c

Browse files
csillagcsillag
authored
Merge pull request #2072 from oasisprotocol/csillag/enhance-endorsement-display
Further enhance ROFL app endorsement display
2 parents 834dabf + 1682084 commit 8274a0c

File tree

5 files changed

+303
-121
lines changed

5 files changed

+303
-121
lines changed

‎.changelog/2072.trivial.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Further enhance endorsement display

‎src/app/components/Account/AccountLink.tsx‎

Lines changed: 132 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,11 @@ interface Props {
5959
*/
6060
alwaysTrimOnTablet?: boolean
6161

62+
/**
63+
* Use adaptive trimming, ignoring the size
64+
*/
65+
alwaysAdapt?: boolean
66+
6267
/**
6368
* What part of the name should be highlighted (if any)
6469
*/
@@ -79,12 +84,112 @@ interface Props {
7984
labelOnly?: boolean
8085
}
8186

87+
// We want two lines, one for name (if available), one for address
88+
// Both lines adaptively shortened to fill available space
89+
const AdaptivelyTrimmedAccountLink: FC<
90+
Pick<Props, 'scope' | 'address' | 'labelOnly' | 'showOnlyAddress' | 'highlightPattern'> & {
91+
tooltipTitle: ReactNode
92+
}
93+
> = ({ scope, address, labelOnly, showOnlyAddress, highlightPattern, tooltipTitle }) => {
94+
const {
95+
metadata: accountMetadata,
96+
// isError, // Use this to indicate that we have failed to load the name for this account
97+
} = useAccountMetadata(scope, address)
98+
const accountName = accountMetadata?.name // TODO: we should also use the description
99+
const showAccountName = !showOnlyAddress && !!accountName
100+
101+
return (
102+
<WithTypographyAndLink scope={scope} address={address} mobile labelOnly={labelOnly}>
103+
<>
104+
{showAccountName && (
105+
<Box
106+
component="span"
107+
sx={{ display: 'inline-flex', alignItems: 'center', gap: 3, flexWrap: 'wrap' }}
108+
>
109+
<AccountMetadataSourceIndicator source={accountMetadata.source} />
110+
<AdaptiveHighlightedText
111+
idPrefix="account-name"
112+
text={accountName}
113+
pattern={highlightPattern}
114+
extraTooltip={tooltipTitle}
115+
minLength={5}
116+
/>
117+
</Box>
118+
)}
119+
<AdaptiveTrimmer
120+
idPrefix="account-address"
121+
text={address}
122+
strategy="middle"
123+
tooltipOverride={tooltipTitle}
124+
minLength={13}
125+
/>
126+
</>
127+
</WithTypographyAndLink>
128+
)
129+
}
130+
131+
const TrimmedAccountLink: FC<
132+
Pick<Props, 'scope' | 'address' | 'labelOnly' | 'showOnlyAddress'> & { tooltipTitle: ReactNode }
133+
> = ({ scope, address, labelOnly, tooltipTitle, showOnlyAddress }) => {
134+
const {
135+
metadata: accountMetadata,
136+
// isError, // Use this to indicate that we have failed to load the name for this account
137+
} = useAccountMetadata(scope, address)
138+
const accountName = accountMetadata?.name // TODO: we should also use the description
139+
const showAccountName = !showOnlyAddress && !!accountName
140+
return (
141+
<WithTypographyAndLink scope={scope} address={address} labelOnly={labelOnly}>
142+
<MaybeWithTooltip title={tooltipTitle}>
143+
{showAccountName ? (
144+
<Box component="span" sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
145+
<AccountMetadataSourceIndicator source={accountMetadata!.source} />{' '}
146+
{trimLongString(accountName, 12, 0)}
147+
</Box>
148+
) : (
149+
trimLongString(address, 6, 6)
150+
)}
151+
</MaybeWithTooltip>
152+
</WithTypographyAndLink>
153+
)
154+
}
155+
156+
const DesktopAccountLink: FC<
157+
Pick<Props, 'scope' | 'address' | 'labelOnly' | 'showOnlyAddress' | 'highlightPattern'> & {
158+
tooltipTitle: ReactNode
159+
}
160+
> = ({ scope, address, labelOnly, showOnlyAddress, highlightPattern, tooltipTitle }) => {
161+
const {
162+
metadata: accountMetadata,
163+
// isError, // Use this to indicate that we have failed to load the name for this account
164+
} = useAccountMetadata(scope, address)
165+
const accountName = accountMetadata?.name // TODO: we should also use the description
166+
const showAccountName = !showOnlyAddress && !!accountName
167+
return (
168+
<WithTypographyAndLink scope={scope} address={address} labelOnly={labelOnly}>
169+
<MaybeWithTooltip title={tooltipTitle}>
170+
{showAccountName ? (
171+
<Box
172+
component="span"
173+
sx={{ display: 'inline-flex', alignItems: 'center', gap: 3, flexWrap: 'wrap' }}
174+
>
175+
<AccountMetadataSourceIndicator source={accountMetadata!.source} />
176+
<HighlightedText text={accountName} pattern={highlightPattern} /> ({address})
177+
</Box>
178+
) : (
179+
address
180+
)}
181+
</MaybeWithTooltip>
182+
</WithTypographyAndLink>
183+
)
184+
}
185+
82186
export const AccountLink: FC<Props> = ({
83187
showOnlyAddress,
84188
scope,
85189
address,
86190
alwaysTrim,
87191
alwaysTrimOnTablet,
192+
alwaysAdapt,
88193
highlightPattern,
89194
extraTooltip,
90195
labelOnly,
@@ -128,75 +233,43 @@ export const AccountLink: FC<Props> = ({
128233
// Are we in a situation when we should always trim?
129234
if (alwaysTrim || (alwaysTrimOnTablet && isTablet)) {
130235
// In a table, we only ever want a short line
131-
132236
return (
133-
<WithTypographyAndLink scope={scope} address={address} labelOnly={labelOnly}>
134-
<MaybeWithTooltip title={tooltipTitle}>
135-
{showAccountName ? (
136-
<Box component="span" sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
137-
<AccountMetadataSourceIndicator source={accountMetadata!.source} />{' '}
138-
{trimLongString(accountName, 12, 0)}
139-
</Box>
140-
) : (
141-
trimLongString(address, 6, 6)
142-
)}
143-
</MaybeWithTooltip>
144-
</WithTypographyAndLink>
237+
<TrimmedAccountLink
238+
scope={scope}
239+
address={address}
240+
showOnlyAddress={showOnlyAddress}
241+
labelOnly={labelOnly}
242+
tooltipTitle={tooltipTitle}
243+
/>
145244
)
146245
}
147246

148-
if (!isTablet) {
149-
// Details in desktop mode.
247+
if (!isTablet && !alwaysTrimOnTablet) {
248+
// We are in desktop mode, and there is no need to do adaptive trimming
150249
// We want one long line, with name and address.
151250

152251
return (
153-
<WithTypographyAndLink scope={scope} address={address} labelOnly={labelOnly}>
154-
<MaybeWithTooltip title={tooltipTitle}>
155-
{showAccountName ? (
156-
<Box
157-
component="span"
158-
sx={{ display: 'inline-flex', alignItems: 'center', gap: 3, flexWrap: 'wrap' }}
159-
>
160-
<AccountMetadataSourceIndicator source={accountMetadata!.source} />
161-
<HighlightedText text={accountName} pattern={highlightPattern} /> ({address})
162-
</Box>
163-
) : (
164-
address
165-
)}
166-
</MaybeWithTooltip>
167-
</WithTypographyAndLink>
252+
<DesktopAccountLink
253+
scope={scope}
254+
address={address}
255+
showOnlyAddress={showOnlyAddress}
256+
labelOnly={labelOnly}
257+
highlightPattern={highlightPattern}
258+
tooltipTitle={tooltipTitle}
259+
/>
168260
)
169261
}
170262

171-
// We need to show the data in details mode on mobile.
172-
// We want two lines, one for name (if available), one for address
173-
// Both lines adaptively shortened to fill available space
263+
// We need to use adaptive mode, either because we are on tablet or mobile,
264+
// or because it has been explicitly requested
174265
return (
175-
<WithTypographyAndLink scope={scope} address={address} mobile labelOnly={labelOnly}>
176-
<>
177-
{showAccountName && (
178-
<Box
179-
component="span"
180-
sx={{ display: 'inline-flex', alignItems: 'center', gap: 3, flexWrap: 'wrap' }}
181-
>
182-
<AccountMetadataSourceIndicator source={accountMetadata.source} />
183-
<AdaptiveHighlightedText
184-
idPrefix="account-name"
185-
text={accountName}
186-
pattern={highlightPattern}
187-
extraTooltip={tooltipTitle}
188-
minLength={5}
189-
/>
190-
</Box>
191-
)}
192-
<AdaptiveTrimmer
193-
idPrefix="account-address"
194-
text={address}
195-
strategy="middle"
196-
tooltipOverride={tooltipTitle}
197-
minLength={13}
198-
/>
199-
</>
200-
</WithTypographyAndLink>
266+
<AdaptivelyTrimmedAccountLink
267+
scope={scope}
268+
address={address}
269+
showOnlyAddress={showOnlyAddress}
270+
labelOnly={labelOnly}
271+
highlightPattern={highlightPattern}
272+
tooltipTitle={tooltipTitle}
273+
/>
201274
)
202275
}

0 commit comments

Comments
 (0)