Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix oasis address links even when toggled to ETH addresses #1329

Merged
merged 2 commits into from
Mar 19, 2024
Merged

Fix oasis address links even when toggled to ETH addresses #1329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9143fe8
Fix oasis address links even when toggled to ETH addresses
lukaw3d Mar 15, 2024
243c96f
Remove "plain" prop from address links and always show a normal link
lukaw3d Mar 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .changelog/1329.bugfix.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Fix oasis address links even when toggled to ETH addresses
16 changes: 2 additions & 14 deletions src/app/components/Account/AccountLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,19 @@ import Link from '@mui/material/Link'
import { TrimLinkLabel } from '../TrimLinkLabel'
import { RouteUtils } from '../../utils/route-utils'
import Typography from '@mui/material/Typography'
import { COLORS } from '../../../styles/theme/colors'
import { SearchScope } from '../../../types/searchScope'

export const AccountLink: FC<{
scope: SearchScope
address: string
alwaysTrim?: boolean
plain?: boolean
}> = ({ scope, address, alwaysTrim, plain }) => {
}> = ({ scope, address, alwaysTrim }) => {
const { isTablet } = useScreenSize()
const to = RouteUtils.getAccountRoute(scope, address)
return (
<Typography
variant="mono"
component="span"
sx={
plain
? { color: COLORS.grayExtraDark, fontWeight: 400 }
: { color: COLORS.brandDark, fontWeight: 700 }
}
>
<Typography variant="mono" component="span">
{alwaysTrim || isTablet ? (
<TrimLinkLabel label={address} to={to} />
) : plain ? (
address
) : (
<Link component={RouterLink} to={to}>
{address}
Expand Down
54 changes: 9 additions & 45 deletions src/app/components/RuntimeEvents/RuntimeEventDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,11 +218,7 @@ export const RuntimeEventDetails: FC<{
<StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
<dt>{t('runtimeEvent.fields.owner')}</dt>
<dd>
<AccountLink
address={event.body.owner}
scope={scope}
plain={addressSwitchOption !== AddressSwitchOption.Oasis}
/>
<AccountLink address={event.body.owner} scope={scope} />
{addressSwitchOption === AddressSwitchOption.Oasis && (
<CopyToClipboard value={event.body.owner} />
)}
Expand All @@ -247,22 +243,14 @@ export const RuntimeEventDetails: FC<{
<MaybeEventErrorLine event={event} />
<dt>{t('common.from')}</dt>
<dd>
<AccountLink
address={event.body.from}
scope={scope}
plain={addressSwitchOption !== AddressSwitchOption.Oasis}
/>
<AccountLink address={event.body.from} scope={scope} />
{addressSwitchOption === AddressSwitchOption.Oasis && (
<CopyToClipboard value={event.body.from} />
)}
</dd>
<dt>{t('common.to')}</dt>
<dd>
<AccountLink
address={event.body.to}
scope={scope}
plain={addressSwitchOption !== AddressSwitchOption.Oasis}
/>
<AccountLink address={event.body.to} scope={scope} />
{addressSwitchOption === AddressSwitchOption.Oasis && <CopyToClipboard value={event.body.to} />}
</dd>
<dt>{t('runtimeEvent.fields.amount')}</dt>
Expand All @@ -283,22 +271,14 @@ export const RuntimeEventDetails: FC<{
<MaybeEventErrorLine event={event} />
<dt>{t('common.from')}</dt>
<dd>
<AccountLink
address={event.body.from}
scope={scope}
plain={addressSwitchOption !== AddressSwitchOption.Oasis}
/>
<AccountLink address={event.body.from} scope={scope} />
{addressSwitchOption === AddressSwitchOption.Oasis && (
<CopyToClipboard value={event.body.from} />
)}
</dd>
<dt>{t('common.to')}</dt>
<dd>
<AccountLink
address={event.body.to}
scope={scope}
plain={addressSwitchOption !== AddressSwitchOption.Oasis}
/>
<AccountLink address={event.body.to} scope={scope} />
{addressSwitchOption === AddressSwitchOption.Oasis && <CopyToClipboard value={event.body.to} />}
</dd>
<dt>{t('runtimeEvent.fields.amount')}</dt>
Expand All @@ -319,22 +299,14 @@ export const RuntimeEventDetails: FC<{
<MaybeEventErrorLine event={event} />
<dt>{t('common.from')}</dt>
<dd>
<AccountLink
address={event.body.from}
scope={scope}
plain={addressSwitchOption !== AddressSwitchOption.Oasis}
/>
<AccountLink address={event.body.from} scope={scope} />
{addressSwitchOption === AddressSwitchOption.Oasis && (
<CopyToClipboard value={event.body.from} />
)}
</dd>
<dt>{t('common.to')}</dt>
<dd>
<AccountLink
address={event.body.to}
scope={scope}
plain={addressSwitchOption !== AddressSwitchOption.Oasis}
/>
<AccountLink address={event.body.to} scope={scope} />
{addressSwitchOption === AddressSwitchOption.Oasis && <CopyToClipboard value={event.body.to} />}
</dd>
<dt>{t('runtimeEvent.fields.activeShares')}</dt>
Expand All @@ -354,22 +326,14 @@ export const RuntimeEventDetails: FC<{
<MaybeEventErrorLine event={event} />
<dt>{t('common.from')}</dt>
<dd>
<AccountLink
address={event.body.from}
scope={scope}
plain={addressSwitchOption !== AddressSwitchOption.Oasis}
/>
<AccountLink address={event.body.from} scope={scope} />
{addressSwitchOption === AddressSwitchOption.Oasis && (
<CopyToClipboard value={event.body.from} />
)}
</dd>
<dt>{t('common.to')}</dt>
<dd>
<AccountLink
address={event.body.to}
scope={scope}
plain={addressSwitchOption !== AddressSwitchOption.Oasis}
/>
<AccountLink address={event.body.to} scope={scope} />
{addressSwitchOption === AddressSwitchOption.Oasis && <CopyToClipboard value={event.body.to} />}
</dd>
<dt>{t('runtimeEvent.fields.amount')}</dt>
Expand Down
10 changes: 3 additions & 7 deletions src/app/components/Transactions/TransactionLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,19 @@ import { useScreenSize } from '../../hooks/useScreensize'
import { TrimLinkLabel } from '../TrimLinkLabel'
import { RouteUtils } from '../../utils/route-utils'
import { SearchScope } from '../../../types/searchScope'
import { COLORS } from '../../../styles/theme/colors'

export const TransactionLink: FC<{
alwaysTrim?: boolean
scope: SearchScope
hash: string
plain?: boolean
}> = ({ alwaysTrim, hash, scope, plain }) => {
}> = ({ alwaysTrim, hash, scope }) => {
const { isMobile } = useScreenSize()
const to = RouteUtils.getTransactionRoute(scope, hash)

return (
<Typography variant="mono" sx={{ ...(plain ? { color: COLORS.grayExtraDark, fontWeight: 400 } : {}) }}>
<Typography variant="mono">
{alwaysTrim || isMobile ? (
<TrimLinkLabel label={hash} to={to} plain={plain} />
) : plain ? (
hash
<TrimLinkLabel label={hash} to={to} />
) : (
<Link component={RouterLink} to={to}>
{hash}
Expand Down
21 changes: 8 additions & 13 deletions src/app/components/TrimLinkLabel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,43 +8,38 @@ import { tooltipDelay } from '../../../styles/theme'
type TrimLinkLabelProps = {
label: string
to: string
plain?: boolean
}

export const TrimLinkLabel: FC<TrimLinkLabelProps> = ({ label, to, plain }) => {
export const TrimLinkLabel: FC<TrimLinkLabelProps> = ({ label, to }) => {
const trimmedLabel = trimLongString(label)
if (!trimmedLabel) {
return null
}
return <TrimLink label={label} to={to} trimmedLabel={trimmedLabel} plain={plain} />
return <TrimLink label={label} to={to} trimmedLabel={trimmedLabel} />
}

type TrimEndLinkLabelProps = TrimLinkLabelProps & {
trimStart: number
}

export const TrimEndLinkLabel: FC<TrimEndLinkLabelProps> = ({ label, to, plain, trimStart }) => {
export const TrimEndLinkLabel: FC<TrimEndLinkLabelProps> = ({ label, to, trimStart }) => {
const trimmedLabel = trimLongString(label, trimStart, 0)
if (!trimmedLabel) {
return null
}
return <TrimLink label={label} to={to} trimmedLabel={trimmedLabel} plain={plain} />
return <TrimLink label={label} to={to} trimmedLabel={trimmedLabel} />
}

type TrimLinkProps = TrimLinkLabelProps & {
trimmedLabel: string
}

const TrimLink: FC<TrimLinkProps> = ({ label, to, trimmedLabel, plain }) => {
const TrimLink: FC<TrimLinkProps> = ({ label, to, trimmedLabel }) => {
return (
<Tooltip arrow placement="top" title={label} enterDelay={tooltipDelay} enterNextDelay={tooltipDelay}>
{plain ? (
<>{trimmedLabel}</>
) : (
<Link component={RouterLink} to={to}>
{trimmedLabel}
</Link>
)}
<Link component={RouterLink} to={to}>
{trimmedLabel}
</Link>
</Tooltip>
)
}
3 changes: 0 additions & 3 deletions src/app/pages/RuntimeTransactionDetailPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,6 @@ export const RuntimeTransactionDetailView: FC<{
hash={
hash || ((isOasisAddressFormat ? transaction?.eth_hash : transaction?.hash) as string)
}
plain={!hash}
/>
</TransactionInfoTooltip>
{hash && <CopyToClipboard value={hash} />}
Expand Down Expand Up @@ -286,7 +285,6 @@ export const RuntimeTransactionDetailView: FC<{
from ||
((isOasisAddressFormat ? transaction?.sender_0_eth : transaction?.sender_0) as string)
}
plain={!from}
/>
</TransactionInfoTooltip>
{from && <CopyToClipboard value={from} />}
Expand All @@ -310,7 +308,6 @@ export const RuntimeTransactionDetailView: FC<{
<AccountLink
scope={transaction}
address={to || ((isOasisAddressFormat ? transaction?.to_eth : transaction?.to) as string)}
plain={!to}
/>
</TransactionInfoTooltip>
{to && <CopyToClipboard value={to} />}
Expand Down
Loading