feat: Modal to publish worlds to ENS names (#2903)

Author: fzavalia

src/components/Modals/DeployModal/DeployModal.container.ts

@@ -3,15 +3,17 @@ import { RootState } from 'modules/common/types'
 import { getCurrentProject } from 'modules/project/selectors'
 import { getData as getDeployments } from 'modules/deployment/selectors'
 import { getActivePoolGroup } from 'modules/poolGroup/selectors'
+import { getCurrentScene } from 'modules/scene/selectors'
+import { getIsWorldsForEnsOwnersEnabled } from 'modules/features/selectors'
 import { MapStateProps, OwnProps } from './DeployModal.types'
 import DeployModal from './DeployModal'
-import { getCurrentScene } from 'modules/scene/selectors'
 
 const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => ({
   deployment: getDeployments(state)[ownProps.metadata.projectId],
   currentPoolGroup: getActivePoolGroup(state),
   project: getCurrentProject(state),
-  scene: getCurrentScene(state)
+  scene: getCurrentScene(state),
+  isWorldsForEnsOwnersEnabled: getIsWorldsForEnsOwnersEnabled(state)
 })
 
 export default connect(mapState)(DeployModal)

src/components/Modals/DeployModal/DeployModal.tsx

@@ -6,6 +6,7 @@ import Icon from 'components/Icon'
 import DeployToLand from './DeployToLand'
 import DeployToPool from './DeployToPool'
 import DeployToWorld from './DeployToWorld'
+import DeployToWorldWorldsForEnsOwners from './DeployToWorld_WorldsForEnsOwnersFeature'
 import ClearDeployment from './ClearDeployment'
 import { Props, State, DeployModalView } from './DeployModal.types'
 import './DeployModal.css'
@@ -132,7 +133,7 @@ export default class DeployModal extends React.PureComponent<Props, State> {
 
   render() {
     const { view, deploymentId, claimedName } = this.state
-    const { name, currentPoolGroup, scene } = this.props
+    const { name, currentPoolGroup, scene, isWorldsForEnsOwnersEnabled } = this.props
 
     if (view === DeployModalView.CLEAR_DEPLOYMENT && deploymentId) {
       return <ClearDeployment deploymentId={deploymentId} name={name} onClose={this.handleClose} />
@@ -156,7 +157,11 @@ export default class DeployModal extends React.PureComponent<Props, State> {
     }
 
     if (view === DeployModalView.DEPLOY_TO_WORLD) {
-      return <DeployToWorld claimedName={claimedName} name={name} onClose={this.handleClose} onBack={this.handleBack} />
+      return isWorldsForEnsOwnersEnabled ? (
+        <DeployToWorldWorldsForEnsOwners claimedName={claimedName} name={name} onClose={this.handleClose} onBack={this.handleBack} />
+      ) : (
+        <DeployToWorld claimedName={claimedName} name={name} onClose={this.handleClose} onBack={this.handleBack} />
+      )
     }
 
     return this.renderChoiceForm()

src/components/Modals/DeployModal/DeployModal.types.ts

@@ -10,6 +10,7 @@ export type Props = ModalProps & {
   currentPoolGroup: PoolGroup | null
   project: Project | null
   scene: Scene | null
+  isWorldsForEnsOwnersEnabled: boolean
 }
 
 export type State = {
@@ -24,7 +25,7 @@ export type Step = {
 }
 
 export type OwnProps = Pick<Props, 'metadata'>
-export type MapStateProps = Pick<Props, 'deployment' | 'currentPoolGroup' | 'project' | 'scene'>
+export type MapStateProps = Pick<Props, 'deployment' | 'currentPoolGroup' | 'project' | 'scene' | 'isWorldsForEnsOwnersEnabled'>
 
 export enum DeployModalView {
   NONE = 'NONE',

src/components/Modals/DeployModal/DeployToWorld_WorldsForEnsOwnersFeature/DeployToWorld.container.ts

@@ -0,0 +1,39 @@
+import { connect } from 'react-redux'
+import { push, replace } from 'connected-react-router'
+import { RootState } from 'modules/common/types'
+import { getCurrentProject } from 'modules/project/selectors'
+import { getENSByWallet, getExternalNamesForConnectedWallet } from 'modules/ens/selectors'
+import { fetchExternalNamesRequest } from 'modules/ens/actions'
+import { deployToWorldRequest } from 'modules/deployment/actions'
+import { getCurrentMetrics } from 'modules/scene/selectors'
+import { recordMediaRequest } from 'modules/media/actions'
+import { getDeploymentsByWorlds, getProgress as getUploadProgress, getError, isLoading } from 'modules/deployment/selectors'
+import { Project } from 'modules/project/types'
+import { MapDispatch, MapDispatchProps, MapStateProps } from './DeployToWorld.types'
+
+import DeployToWorld from './DeployToWorld'
+
+const mapState = (state: RootState): MapStateProps => {
+  return {
+    ensList: getENSByWallet(state),
+    externalNames: getExternalNamesForConnectedWallet(state),
+    project: getCurrentProject(state) as Project,
+    metrics: getCurrentMetrics(state),
+    deployments: getDeploymentsByWorlds(state),
+    deploymentProgress: getUploadProgress(state),
+    error: getError(state),
+    isLoading: isLoading(state)
+  }
+}
+
+const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
+  onPublish: (projectId: string, name: string) => {
+    return dispatch(deployToWorldRequest(projectId, name))
+  },
+  onRecord: () => dispatch(recordMediaRequest()),
+  onNavigate: path => dispatch(push(path)),
+  onReplace: (path, locationState) => dispatch(replace(path, locationState)),
+  onFetchExternalNames: () => dispatch(fetchExternalNamesRequest())
+})
+
+export default connect(mapState, mapDispatch)(DeployToWorld)

src/components/Modals/DeployModal/DeployToWorld_WorldsForEnsOwnersFeature/DeployToWorld.module.css

@@ -0,0 +1,228 @@
+.modalBody {
+  width: 750px;
+  padding: 48px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.modalNavigation {
+  display: flex;
+  justify-content: space-between;
+}
+
+.modalNavigation.end {
+  justify-content: end;
+}
+
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.emptyState .modalHeader h3 {
+  font-size: 20px;
+  line-height: 24px;
+}
+
+.modalHeader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.modalHeader h3 {
+  font-weight: 600;
+  font-size: 30px;
+  line-height: 36px;
+}
+
+.modalHeader span {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 22px;
+}
+
+.modalBody .actionButton:global(.ui.button) {
+  height: auto;
+  width: fit-content;
+  align-self: flex-end;
+}
+
+.modalBodyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.modalBodyState .description {
+  text-align: center;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.modalBodyStateActions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.modalBodyStateActionButton {
+  height: 46px !important;
+  width: 475px !important;
+  margin: 8px 32px !important;
+}
+
+.modalForm {
+  display: flex;
+  gap: 36px;
+}
+
+.modalFormActions:has(.actionCheckbox):has(.actionButton) {
+  justify-content: space-between !important;
+}
+
+.actionCheckbox {
+  display: flex;
+  align-items: center;
+}
+
+.actionCheckbox div {
+  margin-right: 8px;
+}
+
+.actionCheckbox :global(.ui.checkbox input[type='checkbox'].hidden) ~ label:hover::before {
+  border: 2px solid white;
+}
+
+.thumbnail {
+  width: 240px;
+  height: 190px;
+  background-size: cover;
+  background-position: center;
+  border: 1px solid lightgray;
+}
+
+.thumbnailInfo {
+  float: right;
+  margin: 3px 7px !important;
+  filter: invert(84%) sepia(8%) saturate(12%) hue-rotate(24deg) brightness(102%) contrast(89%);
+}
+
+.thumbnailInfo:hover {
+  filter: invert(97%) sepia(97%) saturate(0%) hue-rotate(17deg) brightness(104%) contrast(104%);
+}
+
+.metricsList {
+  margin-top: 4px !important;
+}
+
+.metricsList div {
+  margin-left: 4px;
+  text-transform: capitalize;
+}
+
+.metricsList div::before {
+  content: '-\00a0';
+}
+
+.modalForm .worldDetails {
+  width: 375px;
+}
+
+.nameTypeOption {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.modalForm .worldDetailsDescription {
+  color: var(--text);
+  font-size: 14px;
+  margin-bottom: 18px;
+  overflow-wrap: break-word;
+}
+
+.modalForm .worldHasContent {
+  display: flex;
+  align-items: center;
+  background-color: rgba(115, 110, 125, 0.16);
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.modalForm .worldHasContent :global(.Icon) {
+  min-width: 24px;
+}
+
+.modalForm .worldHasContent div {
+  margin-right: 13px;
+}
+
+.navigationButton {
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+}
+
+.navigationButton:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.modalBodyEmptyState .emptyThumbnail {
+  height: 180px;
+  width: 180px;
+  margin-bottom: 10px;
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-image: url('../../../../images/empty-deploy-to-world.svg');
+}
+
+.modalBodySuccessState .description {
+  font-size: 14px;
+  margin-bottom: 28px;
+}
+
+.modalBodySuccessState .shareUrlFieldInput input {
+  border: 2px solid var(--text) !important;
+  padding: 9px 15px !important;
+  font-size: 15px !important;
+}
+
+.modalBodySuccessState .shareUrlFieldInput i {
+  opacity: 1 !important;
+}
+
+.shareUrlField {
+  width: 432px;
+}
+
+.shareUrlField p {
+  display: none !important;
+}
+
+.modalBodySuccessState .successImage {
+  height: 150px;
+  width: 150px;
+  margin-bottom: 10px;
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-image: url('../../../../images/save-world-success.svg');
+}
+
+.failureImage {
+  height: 150px;
+  width: 150px;
+  margin-bottom: 10px;
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-image: url('../../../../images/scene-error.svg');
+}