Skip to content

Commit

Permalink
fix: Remove use of FF
Browse files Browse the repository at this point in the history
  • Loading branch information
LautaroPetaccio committed Mar 4, 2024
1 parent 13bfea0 commit 0ea9b12
Show file tree
Hide file tree
Showing 11 changed files with 35 additions and 267 deletions.
161 changes: 5 additions & 156 deletions src/components/ENSListPage/ENSListPage.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,9 @@
import React from 'react'
import { Link } from 'react-router-dom'
import { config } from 'config'
import {
Popup,
Button,
Table,
Row,
Column,
Header,
Section,
Container,
Pagination,
Dropdown,
Empty,
Icon as DCLIcon
} from 'decentraland-ui'
import { Popup, Button, Dropdown, Icon as DCLIcon } from 'decentraland-ui'
import { TableContainer, TableContent } from 'decentraland-ui/dist/components/v2'
import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
import { t } from 'decentraland-dapps/dist/modules/translation/utils'
import { DataTableType } from 'decentraland-ui/dist/components/v2/Table/TableContent/TableContent.types'
import { shorten } from 'lib/address'
import { locations } from 'routing/locations'
Expand Down Expand Up @@ -220,144 +207,6 @@ export default class ENSListPage extends React.PureComponent<Props, State> {
)
}

renderEnsList() {
const { ensList, hasProfileCreated } = this.props
const { page } = this.state

const total = ensList.length
const totalPages = Math.ceil(total / PAGE_SIZE)
const paginatedItems = this.paginate()
return (
<>
<div className="filters">
<Container>
<Row>
<Column>
<Row>
<Header sub className="items-count">
{t('ens_list_page.items', { count: ensList.length.toLocaleString() })}
</Header>
</Row>
</Column>
<Column align="right">
<Row>{ensList.length > 1 ? this.renderSortDropdown() : null}</Row>
</Column>
</Row>
</Container>
</div>
<Container>
<Section className="table-section">
{ensList.length > 0 ? (
<Table basic="very">
<Table.Header>
<Table.Row>
<Table.HeaderCell width="2">{t('ens_list_page.table.name')}</Table.HeaderCell>
<Table.HeaderCell width="2">{t('ens_list_page.table.assigned_to')}</Table.HeaderCell>
<Table.HeaderCell width="2">{t('ens_list_page.table.link')}</Table.HeaderCell>
<Table.HeaderCell width="2"></Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{paginatedItems.map((ens: ENS, index) => {
return (
<Table.Row className="TableRow" key={index}>
<Table.Cell>
<Row>
<Column className="subdomain-wrapper">
<div>{ens.name}</div>
{this.isAlias(ens) ? (
<Popup
content={t('ens_list_page.alias_popup')}
position="top center"
trigger={
<div>
<Icon name="profile" />
</div>
}
on="hover"
/>
) : null}
</Column>
</Row>
</Table.Cell>
<Table.Cell>
<Row>
<Column>{this.getAssignedToMessage(ens)}</Column>
</Row>
</Table.Cell>
<Table.Cell>
<Row>
<Column className="link">
{ens.landId ? (
<a target="_blank" href={`https://${ens.subdomain}.${config.get('ENS_GATEWAY')}`} rel="noopener noreferrer">
{ens.subdomain} <Icon name="right-round-arrow" />
</a>
) : null}
</Column>
</Row>
</Table.Cell>
<Table.Cell>
<Row>
{!this.isAlias(ens) ? (
<Column align="right">
<Popup
content={t('ens_list_page.not_profile_created')}
position="top center"
on="hover"
disabled={hasProfileCreated}
trigger={this.renderUseAsAliasButton(ens, hasProfileCreated)}
/>
</Column>
) : null}
{!ens.landId ? (
<Column align="right">
<Button className="ui basic button" onClick={() => this.handleAssignENS(ens)}>
{t('ens_list_page.button.assign')}
</Button>
</Column>
) : null}
{ens.landId ? (
<Column align="right">
<Button className="ui basic button" onClick={() => this.handleAssignENS(ens)}>
{t('ens_list_page.button.edit')}
</Button>
</Column>
) : null}
</Row>
</Table.Cell>
</Table.Row>
)
})}
</Table.Body>
</Table>
) : (
<Empty className="empty-names" height={200}>
<div>
<T
id="ens_list_page.empty_names"
values={{
br: <br />,
link: <a href={`${MARKETPLACE_WEB_URL}/names/claim`}>{t('global.click_here')}</a>
}}
/>
</div>
</Empty>
)}
{totalPages > 1 && (
<Pagination
firstItem={null}
lastItem={null}
totalPages={totalPages}
activePage={page}
onPageChange={(_event, props) => this.setState({ page: +props.activePage! })}
/>
)}
</Section>
</Container>
</>
)
}

formatToTable(ensList: ENS[]): DataTableType[] {
return ensList.map(ens => ({
name: (
Expand Down Expand Up @@ -441,7 +290,7 @@ export default class ENSListPage extends React.PureComponent<Props, State> {
)
}

renderNewEnsList() {
renderEnsList() {
const { ensList } = this.props
const { page } = this.state

Expand Down Expand Up @@ -509,7 +358,7 @@ export default class ENSListPage extends React.PureComponent<Props, State> {
}

render() {
const { isLoading, isEnsAddressEnabled, error } = this.props
const { isLoading, error } = this.props
return (
<LoggedInDetailPage
className="ENSListPage view"
Expand All @@ -518,7 +367,7 @@ export default class ENSListPage extends React.PureComponent<Props, State> {
isLoading={isLoading}
isPageFullscreen={true}
>
{isEnsAddressEnabled ? this.renderNewEnsList() : this.renderEnsList()}
{this.renderEnsList()}
</LoggedInDetailPage>
)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,7 @@ export default class LandAssignENSForm extends React.PureComponent<Props> {
}

render() {
const { ens, land, isLoading, isWaitingTxSetContent, isWaitingTxSetResolver, isWaitingTxReclaim, error, isEnsAddressEnabled } =
this.props
const { ens, land, isLoading, isWaitingTxSetContent, isWaitingTxSetResolver, isWaitingTxReclaim, error } = this.props

const needsReclaiming = ens.ensOwnerAddress !== ens.nftOwnerAddress
const hasResolver = !isResolverEmpty(ens) && ens.resolver.toLowerCase() === ENS_RESOLVER_ADDRESS.toLowerCase()
Expand All @@ -52,9 +51,7 @@ export default class LandAssignENSForm extends React.PureComponent<Props> {

const setResolverButtonClassName = hasResolver && !isWaitingTxSetResolver && !hasResolverError ? 'grey-button' : ''
const setContentButtonClassName = hasContent && !isWaitingTxSetContent && !hasContentError ? 'grey-button' : ''
const reclaimContentButtonClassName = !needsReclaiming && !isWaitingTxReclaim && !hasReclaimError ? 'grey-button' : ''

const isReclaimButtonDisabled = hasReclaimError || !needsReclaiming
const isSetResolverButtonDisabled = hasResolverError || hasData || needsReclaiming || isWaitingTxSetResolver || isWaitingTxReclaim
const isSetContentButtonDisabled =
hasContentError ||
Expand All @@ -74,36 +71,6 @@ export default class LandAssignENSForm extends React.PureComponent<Props> {
{t('land_assign_ens_page.set_name_message', { strong: (children: React.ReactElement) => <strong>{children}</strong> })}
</p>
</Row>
{!isEnsAddressEnabled ? (
<Row>
<div className={isReclaimButtonDisabled ? 'box box-disabled' : 'box'}>
<h3>{t('land_assign_ens_page.reclaim')}</h3>
<div className="message-box">
<p>{t('land_assign_ens_page.reclaim_explanation')}</p>
<NetworkButton
type="submit"
disabled={isReclaimButtonDisabled}
onClick={this.handleReclaim}
className={reclaimContentButtonClassName}
loading={isWaitingTxReclaim}
primary
network={Network.ETHEREUM}
>
{hasReclaimError ? (
t('global.retry_tx')
) : !needsReclaiming ? (
<>
{t('global.approved_tx')}
{!isWaitingTxReclaim ? <Icon name="check" /> : null}
</>
) : (
t('global.submit')
)}
</NetworkButton>
</div>
</div>
</Row>
) : null}
<Row>
<div className={isSetResolverButtonDisabled ? 'box box-disabled' : 'box'}>
<h3>{t('land_assign_ens_page.set_resolver')}</h3>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ export type Props = {
isWaitingTxSetResolver: boolean
isWaitingTxReclaim: boolean
error: ENSError | null
isEnsAddressEnabled: boolean
onSetENSResolver: (ens: ENS) => void
onSetENSContent: (ens: ENS, land: Land) => void
onReclaimName: (ens: ENS) => void
Expand Down
2 changes: 0 additions & 2 deletions src/components/LandAssignENSPage/LandAssignENSPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ export default class LandAssignENSPage extends React.PureComponent<Props> {
isWaitingTxSetContent,
isWaitingTxReclaim,
isWaitingTxSetResolver,
isEnsAddressEnabled,
onSetENSResolver,
onSetENSContent,
onReclaimName,
Expand All @@ -42,7 +41,6 @@ export default class LandAssignENSPage extends React.PureComponent<Props> {
}
>
<LandAssignENSForm
isEnsAddressEnabled={isEnsAddressEnabled}
land={land}
ens={ens}
error={error}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react'
import { Network } from '@dcl/schemas'
import { Form, Row, Button, InputOnChangeData, Field } from 'decentraland-ui'
import { Form, Row, Button, InputOnChangeData } from 'decentraland-ui'
import { NetworkButton } from 'decentraland-dapps/dist/containers'
import { t } from 'decentraland-dapps/dist/modules/translation/utils'
import { AddressField } from 'decentraland-dapps/dist/components/AddressField'
Expand Down Expand Up @@ -52,7 +52,7 @@ export default class LandOperatorForm extends React.PureComponent<Props, State>
}

render() {
const { land, isEnsAddressEnabled } = this.props
const { land } = this.props
const { address, loading, dirty, revoked, editing, initial } = this.state

const isRevokable = editing && isEqual(address, initial)
Expand All @@ -73,34 +73,18 @@ export default class LandOperatorForm extends React.PureComponent<Props, State>

return (
<Form className="LandOperatorForm">
{isEnsAddressEnabled ? (
<AddressField
placeholder="0x..."
label={t('operator_page.address')}
className={classes.join(' ')}
value={address}
onChange={this.handleChange}
loading={loading}
action={isRevokable ? (revoked ? t('operator_page.undo') : t('operator_page.revoke')) : undefined}
onAction={isRevokable ? (revoked ? this.handleUndo : this.handleRevoke) : undefined}
error={hasError}
message={hasError ? t('operator_page.invalid_address') : undefined}
/>
) : (
<Field
placeholder="0x..."
label={t('operator_page.address')}
className={classes.join(' ')}
value={address}
onChange={this.handleChange}
loading={loading}
action={isRevokable ? (revoked ? t('operator_page.undo') : t('operator_page.revoke')) : undefined}
onAction={isRevokable ? (revoked ? this.handleUndo : this.handleRevoke) : undefined}
error={hasError}
message={hasError ? t('operator_page.invalid_address') : undefined}
/>
)}

<AddressField
placeholder="0x..."
label={t('operator_page.address')}
className={classes.join(' ')}
value={address}
onChange={this.handleChange}
loading={loading}
action={isRevokable ? (revoked ? t('operator_page.undo') : t('operator_page.revoke')) : undefined}
onAction={isRevokable ? (revoked ? this.handleUndo : this.handleRevoke) : undefined}
error={hasError}
message={hasError ? t('operator_page.invalid_address') : undefined}
/>
<Row>
<Link className="cancel" to={locations.landDetail(land.id)}>
<Button>{t('global.cancel')}</Button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { Land } from 'modules/land/types'

export type Props = {
land: Land
isEnsAddressEnabled: boolean
onSetOperator: (land: Land, address: string | null) => void
}

Expand Down
4 changes: 2 additions & 2 deletions src/components/LandOperatorPage/LandOperatorPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { Props } from './LandOperatorPage.types'

export default class LandOperatorPage extends React.PureComponent<Props> {
render() {
const { isEnsAddressEnabled, onSetOperator } = this.props
const { onSetOperator } = this.props
return (
<LandProviderPage>
{land => (
Expand All @@ -25,7 +25,7 @@ export default class LandOperatorPage extends React.PureComponent<Props> {
/>
}
>
<LandOperatorForm land={land} onSetOperator={onSetOperator} isEnsAddressEnabled={isEnsAddressEnabled} />
<LandOperatorForm land={land} onSetOperator={onSetOperator} />
</LandAction>
)}
</LandProviderPage>
Expand Down
Loading

0 comments on commit 0ea9b12

Please sign in to comment.