Skip to content

Commit

Permalink
feat: LW improvements and fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@LautaroPetaccio
LautaroPetaccio committed Sep 27, 2024
1 parent 16f79af commit ece25b2
Show file tree
Hide file tree
Showing 23 changed files with 622 additions and 253 deletions.
2 changes: 1 addition & 1 deletion src/components/CollectionsPage/CollectionsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ export default function CollectionsPage(props: Props) {
<EventBanner />
<div className="filters">
<Container>
{(hasUserOrphanItems || isThirdPartyManager) && (
{(hasUserOrphanItems || isThirdPartyManager || isLinkedWearablesPaymentsEnabled) && (
<div className="action-tabs-container">
<img src={collectionsIcon} className="collections-icon" />
<Tabs isFullscreen>
Expand Down
6 changes: 4 additions & 2 deletions src/components/MappingEditor/MappingEditor.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,12 @@
}

.mappings.compact {
width: 100%;
min-width: 0;
flex: 1;
}

.mappings.compact > div {
flex-grow: 1;
flex: 1;
}

/* Input margin */
Expand Down Expand Up @@ -94,6 +95,7 @@

.range {
display: flex;
min-width: 0;
}

.range.compact {
Expand Down
58 changes: 37 additions & 21 deletions ...nItemsStep/ConfirmCollectionItemsStep.css → ...tep/ConfirmCollectionItemsStep.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.ConfirmCollectionItemsStep .details {
.details {
background-color: rgba(var(--dark-raw), 0.48);
border-radius: 8px;
width: 100%;
Expand All @@ -8,82 +8,82 @@
line-height: 24px;
}

.ConfirmCollectionItemsStep .details .title {
.details .title {
font-size: 18px;
font-weight: 700;
line-height: 24px;
}

.ConfirmCollectionItemsStep .details .subtitle {
.details .subtitle {
font-size: 15px;
font-weight: 600;
line-height: 24px;
color: var(--clear-divider);
margin-bottom: 0px;
}

.ConfirmCollectionItemsStep .details .description {
.details .description {
font-size: 15px;
font-weight: 400;
line-height: 24px;
color: var(--clear-divider);
}

.ConfirmCollectionItemsStep .details .fields .dcl.field {
.details :global(.fields .dcl.field) {
margin-top: 32px;
}

.ConfirmCollectionItemsStep .actions {
.actions {
margin-top: 24px;
width: 100%;
justify-content: space-between !important;
}

.ConfirmCollectionItemsStep .actions .button {
.actions :global(.button) {
width: 180px;
}

.ConfirmCollectionItemsStep .items {
.items {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.ConfirmCollectionItemsStep .items tbody {
.items tbody {
display: block;
max-height: 425px;
overflow-y: auto;
}

.ConfirmCollectionItemsStep .items thead,
.ConfirmCollectionItemsStep .items tbody tr {
.items thead,
.items tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}

.ConfirmCollectionItemsStep .items thead.has-scrollbar {
.items thead.hasScrollBar {
width: calc(100% - 10px);
}

.ConfirmCollectionItemsStep .avatarColumn .avatarContainer {
.avatarColumn .avatarContainer {
display: flex;
align-items: center;
}

.ConfirmCollectionItemsStep .avatarColumn .avatarContainer .ItemImage {
.avatarColumn .avatarContainer .itemImage {
height: 48px;
width: 48px;
margin-right: 16px;
}

.ConfirmCollectionItemsStep .avatarColumn .avatarContainer .info {
.avatarColumn .avatarContainer .info {
display: flex;
align-items: center;
}

.ConfirmCollectionItemsStep .avatarColumn .avatarContainer .name {
.avatarColumn .avatarContainer .name {
margin-right: 8px;
font-size: 15px;
white-space: nowrap;
Expand All @@ -92,23 +92,23 @@
max-width: 150px;
}

.ConfirmCollectionItemsStep .avatarColumn .avatarContainer .badge {
.avatarColumn .avatarContainer .badge {
background-color: var(--smart-grey);
}

.ConfirmCollectionItemsStep .avatarColumn .avatarContainer .badge::before {
.avatarColumn .avatarContainer .badge::before {
filter: none;
}

.ConfirmCollectionItemsStep .column.priceColumn .ui.mana {
.priceColumn :global(.ui.mana) {
font-size: 15px;
}

.ui.visible.popup.price-popup {
.price-popup:global(.ui.visible.popup) {
z-index: 4000;
}

.ConfirmCollectionItemsStep .loading-overlay {
.loadingOverlay {
position: absolute;
top: 0px;
left: 0px;
Expand All @@ -125,3 +125,19 @@
align-items: center;
justify-content: center;
}

.categoryBadge {
width: fit-content;
}

.categoryBadge.thirdParty {
height: 32px;
}

.itemNumber {
background-color: #43404a;
border-radius: 8px;
padding: 2px 12px 2px 12px;
width: fit-content;
font-size: 12px;
}
117 changes: 86 additions & 31 deletions ...ls/PublishWizardCollectionModal/ConfirmCollectionItemsStep/ConfirmCollectionItemsStep.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,28 @@
import React from 'react'
import React, { useCallback } from 'react'
import classNames from 'classnames'
import { ethers } from 'ethers'
import { Network } from '@dcl/schemas'
import { Button, Column, Loader, Mana, Modal, Popup, Row, Table } from 'decentraland-ui'
import { EmoteDataADR74, Network } from '@dcl/schemas'
import { Button, Column, IconBadge, Loader, Mana, Modal, Popup, Row, Table } from 'decentraland-ui'
import { RarityBadge } from 'decentraland-dapps/dist/containers/RarityBadge'
import { t } from 'decentraland-dapps/dist/modules/translation/utils'
import { Item } from 'modules/item/types'
import { isFree } from 'modules/item/utils'
import { getMapping, isEmote, isFree } from 'modules/item/utils'
import { Collection } from 'modules/collection/types'
import ItemImage from 'components/ItemImage'
import ItemBadge from 'components/ItemBadge'
import './ConfirmCollectionItemsStep.css'
import { MappingEditor } from 'components/MappingEditor'
import styles from './ConfirmCollectionItemsStep.module.css'

export const ConfirmCollectionItemsStep: React.FC<{
items: Item[]
onNextStep: () => void
onPrevStep: () => void
isSigningCheque: boolean
isThirdParty: boolean
collection: Collection
}> = props => {
const { items, onNextStep, onPrevStep, isSigningCheque, isThirdParty } = props
const { items, collection, onNextStep, onPrevStep, isSigningCheque, isThirdParty } = props
const isCollectionLinked = collection.linkedContractAddress && collection.linkedContractNetwork

const renderPrice = (item: Item) => {
const price = ethers.utils.formatEther(item.price!)
Expand All @@ -31,7 +35,7 @@ export const ConfirmCollectionItemsStep: React.FC<{
<Mana className="mana" network={Network.MATIC}>
{price.length > 10 ? (
<Popup
className="price-popup"
className={styles.pricePopup}
content={price}
position="top center"
trigger={<span>{`${price.slice(0, 3)}...${price.slice(-4)}`}</span>}
Expand All @@ -49,38 +53,89 @@ export const ConfirmCollectionItemsStep: React.FC<{
)
}

const renderThirdPartyItemsTable = useCallback(
() => (
<Table basic="very">
<Table.Header className={classNames({ [styles.hasScrollBar]: items.length > 5 })}>
<Table.Row>
<Table.HeaderCell width={1}></Table.HeaderCell>
<Table.HeaderCell width={5}>{t('collection_detail_page.table.item')}</Table.HeaderCell>
<Table.HeaderCell width={1}></Table.HeaderCell>
<Table.HeaderCell>Linked to</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{items.map((item, index) => {
const itemMapping = getMapping(item)
return (
<Table.Row key={item.id}>
<Table.Cell width={1}>
<div className={styles.itemNumber}>{index + 1}</div>
</Table.Cell>
<Table.Cell width={5} className={classNames(styles.column, styles.avatarColumn)}>
<div className={styles.avatarContainer}>
<ItemImage className={styles.itemImage} item={item} />
<div className={styles.info}>
<div className={styles.name} title={item.name}>
{item.name}
</div>
<ItemBadge className={styles.badge} item={item} size="small" />
</div>
</div>
</Table.Cell>
<Table.Cell width={1}>
<IconBadge className={classNames(styles.categoryBadge, styles.thirdParty)} icon={item.data.category} />
</Table.Cell>
<Table.Cell className={styles.mapping}>
{itemMapping && <MappingEditor mapping={itemMapping} onChange={() => undefined} disabled isCompact />}
</Table.Cell>
</Table.Row>
)
})}
</Table.Body>
</Table>
),
[items]
)

const renderItemsTable = () => {
return (
<Table basic="very">
<Table.Header className={classNames({ 'has-scrollbar': items.length > 5 })}>
<Table.Row className="row">
<Table.Header className={classNames({ [styles.hasScrollBar]: items.length > 5 })}>
<Table.Row>
<Table.HeaderCell width={1}></Table.HeaderCell>
<Table.HeaderCell width={7}>{t('collection_detail_page.table.item')}</Table.HeaderCell>
<Table.HeaderCell>{t('collection_detail_page.table.rarity')}</Table.HeaderCell>
<Table.HeaderCell>{t('collection_detail_page.table.category')}</Table.HeaderCell>
<Table.HeaderCell>{t('collection_detail_page.table.price')}</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{items.map(item => (
<Table.Row key={item.id} className="CollectionItem row">
<Table.Cell width={7} className="column avatarColumn">
<div className="avatarContainer">
<ItemImage className="itemImage" item={item} hasRarityBackground={false} />
<div className="info">
<div className="name" title={item.name}>
{items.map((item, index) => (
<Table.Row key={item.id}>
<Table.Cell width={1}>
<div className={styles.itemNumber}>{index + 1}</div>
</Table.Cell>
<Table.Cell width={7} className={classNames(styles.column, styles.avatarColumn)}>
<div className={styles.avatarContainer}>
<ItemImage className={styles.itemImage} item={item} />
<div className={styles.info}>
<div className={styles.name} title={item.name}>
{item.name}
</div>
<ItemBadge className="badge" item={item} size="small"></ItemBadge>
<ItemBadge className={styles.badge} item={item} size="small" />
</div>
</div>
</Table.Cell>
<Table.Cell className="column">
{item.rarity ? <RarityBadge rarity={item.rarity} size="small" withTooltip={false} /> : null}
</Table.Cell>
<Table.Cell className="column">
<div>{t(`${item.type}.category.${item.data.category!}`)}</div>
<Table.Cell>{item.rarity ? <RarityBadge rarity={item.rarity} size="small" withTooltip={false} /> : null}</Table.Cell>
<Table.Cell>
<IconBadge
className={styles.categoryBadge}
icon={isEmote(item) ? ((item.data as EmoteDataADR74).loop ? 'play-loop' : 'play-once') : item.data.category}
text={t(`${item.type}.category.${item.data.category!}`)}
></IconBadge>
</Table.Cell>
<Table.Cell className="column priceColumn">{renderPrice(item)}</Table.Cell>
<Table.Cell className={styles.priceColumn}>{renderPrice(item)}</Table.Cell>
</Table.Row>
))}
</Table.Body>
Expand All @@ -89,29 +144,29 @@ export const ConfirmCollectionItemsStep: React.FC<{
}

return (
<Modal.Content className="ConfirmCollectionItemsStep">
<Modal.Content>
<Column>
<Row className="details">
<Row className={styles.details}>
{isSigningCheque && (
<div className="loading-overlay">
<div className={styles.loadingOverlay}>
<Loader inline size="massive" />
{t('publish_wizard_collection_modal.accept_in_wallet')}
</div>
)}
<Column grow={true}>
<p className="title">{t('publish_wizard_collection_modal.confirm_collection_items_step.title')}</p>
<p className="subtitle">
<p className={styles.title}>{t('publish_wizard_collection_modal.confirm_collection_items_step.title')}</p>
<p className={styles.subtitle}>
{t(`publish_wizard_collection_modal.confirm_collection_items_step.${isThirdParty ? 'third_party' : 'standard'}.subtitle`, {
br: <br />
})}
</p>
<p className="description">
<p className={styles.description}>
{t(`publish_wizard_collection_modal.confirm_collection_items_step.${isThirdParty ? 'third_party' : 'standard'}.description`)}
</p>
<div className="items">{renderItemsTable()}</div>
<div className={styles.items}>{isCollectionLinked && isThirdParty ? renderThirdPartyItemsTable() : renderItemsTable()}</div>
</Column>
</Row>
<Row className="actions">
<Row className={styles.actions}>
<Button className="back" secondary disabled={isSigningCheque} onClick={onPrevStep}>
{t('global.back')}
</Button>
Expand Down
Loading

0 comments on commit ece25b2

Please sign in to comment.