From 50fa19d4ec6eb861e2e931bd1ff6f825e768392e Mon Sep 17 00:00:00 2001
From: Juan Cazala <juancazala@gmail.com>
Date: Wed, 30 Oct 2024 17:36:43 -0300
Subject: [PATCH] refactor: split into components

---
 packages/main/src/modules/cli.ts              |   3 +-
 .../src/components/EditorPage/component.tsx   |   4 +-
 .../AlternativeServers/component.tsx          |  98 +++++++++++
 .../AlternativeServers/index.ts               |   1 +
 .../{ => AlternativeServers}/styles.css       |  26 ---
 .../PublishProject/Deploy/component.tsx       |   8 +
 .../Modals/PublishProject/Deploy/index.ts     |   1 +
 .../Modals/PublishProject/Deploy/styles.css   |   3 +
 .../PublishProject/Initial/component.tsx      |  39 +++++
 .../Modals/PublishProject/Initial/index.ts    |   1 +
 .../Modals/PublishProject/Initial/styles.css  |  27 +++
 .../PublishToLand/component.tsx               |  17 +-
 .../PublishToWorld/component.tsx              |  15 +-
 .../Modals/PublishProject/component.tsx       | 156 ++----------------
 .../components/Modals/PublishProject/index.ts |   4 +-
 .../components/Modals/PublishProject/types.ts |  13 +-
 16 files changed, 225 insertions(+), 191 deletions(-)
 create mode 100644 packages/renderer/src/components/Modals/PublishProject/AlternativeServers/component.tsx
 create mode 100644 packages/renderer/src/components/Modals/PublishProject/AlternativeServers/index.ts
 rename packages/renderer/src/components/Modals/PublishProject/{ => AlternativeServers}/styles.css (81%)
 create mode 100644 packages/renderer/src/components/Modals/PublishProject/Deploy/component.tsx
 create mode 100644 packages/renderer/src/components/Modals/PublishProject/Deploy/index.ts
 create mode 100644 packages/renderer/src/components/Modals/PublishProject/Deploy/styles.css
 create mode 100644 packages/renderer/src/components/Modals/PublishProject/Initial/component.tsx
 create mode 100644 packages/renderer/src/components/Modals/PublishProject/Initial/index.ts
 create mode 100644 packages/renderer/src/components/Modals/PublishProject/Initial/styles.css

diff --git a/packages/main/src/modules/cli.ts b/packages/main/src/modules/cli.ts
index 35ceb296..9323fd09 100644
--- a/packages/main/src/modules/cli.ts
+++ b/packages/main/src/modules/cli.ts
@@ -44,6 +44,7 @@ export async function deploy({ path, target, targetContent }: DeployOptions) {
   deployServer = run('@dcl/sdk-commands', 'sdk-commands', {
     args: [
       'deploy',
+      '--no-browser',
       '--port',
       port.toString(),
       ...(target ? ['--target', target] : []),
@@ -54,7 +55,7 @@ export async function deploy({ path, target, targetContent }: DeployOptions) {
   });
 
   // App ready at
-  await deployServer.waitFor(/app ready at/i);
+  await deployServer.waitFor(/listening/i);
 
   return port;
 }
diff --git a/packages/renderer/src/components/EditorPage/component.tsx b/packages/renderer/src/components/EditorPage/component.tsx
index 6190e8a0..c2510a41 100644
--- a/packages/renderer/src/components/EditorPage/component.tsx
+++ b/packages/renderer/src/components/EditorPage/component.tsx
@@ -80,7 +80,7 @@ export function EditorPage() {
     setOpen(undefined);
   }, []);
 
-  const handleSubmitModal = useCallback(
+  const handleTarget = useCallback(
     ({ target, value }: StepValue) => {
       switch (target) {
         case 'worlds':
@@ -204,7 +204,7 @@ export function EditorPage() {
               open={open === 'publish'}
               project={project}
               onClose={handleCloseModal}
-              onSubmit={handleSubmitModal}
+              onTarget={handleTarget}
             />
           )}
         </>
diff --git a/packages/renderer/src/components/Modals/PublishProject/AlternativeServers/component.tsx b/packages/renderer/src/components/Modals/PublishProject/AlternativeServers/component.tsx
new file mode 100644
index 00000000..b9c8534b
--- /dev/null
+++ b/packages/renderer/src/components/Modals/PublishProject/AlternativeServers/component.tsx
@@ -0,0 +1,98 @@
+import { type ChangeEvent, useCallback, useState } from 'react';
+import { Button, MenuItem, Select, type SelectChangeEvent } from 'decentraland-ui2';
+import { t } from '/@/modules/store/translation/utils';
+import GenesisPlazaPng from '/assets/images/genesis_plaza.png';
+import type { AlternativeTarget, TargetProps, TargetValue } from '../types';
+
+import './styles.css';
+import { isUrl } from '/shared/utils';
+import { misc } from '#preload';
+
+export function AlternativeServers({ onTarget: onClick }: TargetProps) {
+  const [option, setOption] = useState<AlternativeTarget>('test');
+  const [customUrl, setCustomUrl] = useState('');
+  const [error, setError] = useState('');
+
+  const handleClick = useCallback(() => {
+    if (option === 'custom' && !isUrl(customUrl)) {
+      return setError(t('modal.publish_project.alternative_servers.errors.url'));
+    }
+    const value: TargetValue = { target: option, value: customUrl };
+    onClick(value);
+  }, [option, customUrl]);
+
+  const handleChangeSelect = useCallback((e: SelectChangeEvent<AlternativeTarget>) => {
+    setOption(e.target.value as AlternativeTarget);
+  }, []);
+
+  const handleChangeCustom = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      if (error) setError('');
+      setCustomUrl(e.target.value);
+    },
+    [error],
+  );
+
+  const handleClickLearnMore = useCallback(() => {
+    if (option === 'custom') {
+      return misc.openExternal(
+        'https://docs.decentraland.org/creator/development-guide/sdk7/publishing/#custom-servers',
+      );
+    }
+    misc.openExternal(
+      'https://docs.decentraland.org/creator/development-guide/sdk7/publishing/#the-test-server',
+    );
+  }, [option]);
+
+  return (
+    <div className="AlternativeServers">
+      <span className="select">{t('modal.publish_project.select')}</span>
+      <div className="box">
+        <div className="selection">
+          <div>
+            <h3>{t('modal.publish_project.alternative_servers.list')}</h3>
+            <Select
+              variant="standard"
+              value={option}
+              onChange={handleChangeSelect}
+            >
+              <MenuItem value="test">
+                {t('modal.publish_project.alternative_servers.options.test_server')}
+              </MenuItem>
+              <MenuItem value="custom">
+                {t('modal.publish_project.alternative_servers.options.custom_server')}
+              </MenuItem>
+            </Select>
+            {option === 'custom' && (
+              <div className="custom_input">
+                <span className="title">
+                  {t('modal.publish_project.alternative_servers.custom_server_url')}
+                </span>
+                <input
+                  value={customUrl}
+                  onChange={handleChangeCustom}
+                />
+                <span className="error">{error}</span>
+              </div>
+            )}
+          </div>
+          <img
+            className="thumbnail"
+            src={GenesisPlazaPng}
+          />
+        </div>
+        <div className="actions">
+          <span
+            className="learn-more"
+            onClick={handleClickLearnMore}
+          >
+            {t('option_box.learn_more')}
+          </span>
+          <Button onClick={handleClick}>
+            {t(`modal.publish_project.alternative_servers.action.${option}_server`)}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/renderer/src/components/Modals/PublishProject/AlternativeServers/index.ts b/packages/renderer/src/components/Modals/PublishProject/AlternativeServers/index.ts
new file mode 100644
index 00000000..33ff9f08
--- /dev/null
+++ b/packages/renderer/src/components/Modals/PublishProject/AlternativeServers/index.ts
@@ -0,0 +1 @@
+export { AlternativeServers } from './component';
diff --git a/packages/renderer/src/components/Modals/PublishProject/styles.css b/packages/renderer/src/components/Modals/PublishProject/AlternativeServers/styles.css
similarity index 81%
rename from packages/renderer/src/components/Modals/PublishProject/styles.css
rename to packages/renderer/src/components/Modals/PublishProject/AlternativeServers/styles.css
index e14bdcae..f2d3990e 100644
--- a/packages/renderer/src/components/Modals/PublishProject/styles.css
+++ b/packages/renderer/src/components/Modals/PublishProject/AlternativeServers/styles.css
@@ -1,31 +1,5 @@
 /* TODO: update the Modal component in ui2 to allow providing a className to the Material Modal...*/
 
-/* Initial Modal */
-.MuiModal-root .Initial {
-  display: flex;
-  flex-direction: column;
-}
-
-.MuiModal-root .Initial .select,
-.MuiModal-root .Initial .alternative_servers {
-  text-align: center;
-}
-
-.MuiModal-root .Initial .options {
-  display: flex;
-  margin: 20px 0;
-}
-
-.MuiModal-root .Initial .options .OptionBox + .OptionBox {
-  margin-left: 20px;
-}
-
-.MuiModal-root .Initial .alternative_servers {
-  text-decoration: underline;
-  text-transform: uppercase;
-  cursor: pointer;
-}
-
 /* AlternativeServers Modal */
 .MuiModal-root .AlternativeServers {
   display: flex;
diff --git a/packages/renderer/src/components/Modals/PublishProject/Deploy/component.tsx b/packages/renderer/src/components/Modals/PublishProject/Deploy/component.tsx
new file mode 100644
index 00000000..62aebfc4
--- /dev/null
+++ b/packages/renderer/src/components/Modals/PublishProject/Deploy/component.tsx
@@ -0,0 +1,8 @@
+import { Loader } from '/@/components/Loader';
+import { useEditor } from '/@/hooks/useEditor';
+import './styles.css';
+
+export function Deploy() {
+  const { loadingPublish } = useEditor();
+  return <div className="Deploy">{loadingPublish ? <Loader /> : 'Deploy'}</div>;
+}
diff --git a/packages/renderer/src/components/Modals/PublishProject/Deploy/index.ts b/packages/renderer/src/components/Modals/PublishProject/Deploy/index.ts
new file mode 100644
index 00000000..7d6651e1
--- /dev/null
+++ b/packages/renderer/src/components/Modals/PublishProject/Deploy/index.ts
@@ -0,0 +1 @@
+export { Deploy } from './component';
diff --git a/packages/renderer/src/components/Modals/PublishProject/Deploy/styles.css b/packages/renderer/src/components/Modals/PublishProject/Deploy/styles.css
new file mode 100644
index 00000000..4d68c41b
--- /dev/null
+++ b/packages/renderer/src/components/Modals/PublishProject/Deploy/styles.css
@@ -0,0 +1,3 @@
+.Deploy {
+  color: red;
+}
diff --git a/packages/renderer/src/components/Modals/PublishProject/Initial/component.tsx b/packages/renderer/src/components/Modals/PublishProject/Initial/component.tsx
new file mode 100644
index 00000000..cdbde597
--- /dev/null
+++ b/packages/renderer/src/components/Modals/PublishProject/Initial/component.tsx
@@ -0,0 +1,39 @@
+import { OptionBox } from '/@/components/EditorPage/OptionBox';
+import { t } from '/@/modules/store/translation/utils';
+import LandPng from '/assets/images/land.png';
+import WorldsPng from '/assets/images/worlds.png';
+import type { Step } from '../types';
+
+import './styles.css';
+
+export function Initial({ onStepChange }: { onStepChange: (step: Step) => () => void }) {
+  return (
+    <div className="Initial">
+      <span className="select">{t('modal.publish_project.select')}</span>
+      <div className="options">
+        <OptionBox
+          thumbnailSrc={WorldsPng}
+          title={t('modal.publish_project.worlds.title')}
+          description={t('modal.publish_project.worlds.description')}
+          buttonText={t('modal.publish_project.worlds.action')}
+          onClickPublish={onStepChange('publish-to-world')}
+          learnMoreUrl="https://docs.decentraland.org/creator/worlds/about/#publish-a-world"
+        />
+        <OptionBox
+          thumbnailSrc={LandPng}
+          title={t('modal.publish_project.land.title')}
+          description={t('modal.publish_project.land.description')}
+          buttonText={t('modal.publish_project.land.action')}
+          onClickPublish={onStepChange('publish-to-land')}
+          learnMoreUrl="https://docs.decentraland.org/creator/development-guide/sdk7/publishing-permissions/#land-permission-options"
+        />
+      </div>
+      <span
+        className="alternative_servers"
+        onClick={onStepChange('alternative-servers')}
+      >
+        {t('modal.publish_project.alternative_servers.title')}
+      </span>
+    </div>
+  );
+}
diff --git a/packages/renderer/src/components/Modals/PublishProject/Initial/index.ts b/packages/renderer/src/components/Modals/PublishProject/Initial/index.ts
new file mode 100644
index 00000000..58143fdf
--- /dev/null
+++ b/packages/renderer/src/components/Modals/PublishProject/Initial/index.ts
@@ -0,0 +1 @@
+export { Initial } from './component';
diff --git a/packages/renderer/src/components/Modals/PublishProject/Initial/styles.css b/packages/renderer/src/components/Modals/PublishProject/Initial/styles.css
new file mode 100644
index 00000000..534925a4
--- /dev/null
+++ b/packages/renderer/src/components/Modals/PublishProject/Initial/styles.css
@@ -0,0 +1,27 @@
+/* TODO: update the Modal component in ui2 to allow providing a className to the Material Modal...*/
+
+/* Initial Modal */
+.MuiModal-root .Initial {
+  display: flex;
+  flex-direction: column;
+}
+
+.MuiModal-root .Initial .select,
+.MuiModal-root .Initial .alternative_servers {
+  text-align: center;
+}
+
+.MuiModal-root .Initial .options {
+  display: flex;
+  margin: 20px 0;
+}
+
+.MuiModal-root .Initial .options .OptionBox + .OptionBox {
+  margin-left: 20px;
+}
+
+.MuiModal-root .Initial .alternative_servers {
+  text-decoration: underline;
+  text-transform: uppercase;
+  cursor: pointer;
+}
diff --git a/packages/renderer/src/components/Modals/PublishProject/PublishToLand/component.tsx b/packages/renderer/src/components/Modals/PublishProject/PublishToLand/component.tsx
index 606a7806..87cf6530 100644
--- a/packages/renderer/src/components/Modals/PublishProject/PublishToLand/component.tsx
+++ b/packages/renderer/src/components/Modals/PublishProject/PublishToLand/component.tsx
@@ -8,6 +8,7 @@ import { t } from '/@/modules/store/translation/utils';
 import { selectors as landSelectors } from '/@/modules/store/land';
 import { useEditor } from '/@/hooks/useEditor';
 import { COLORS, type Coordinate } from './types';
+import { type TargetProps } from '../types';
 
 function calculateParcels(project: Project, point: Coordinate): Coordinate[] {
   const [baseX, baseY] = project.scene.base.split(',').map(coord => parseInt(coord, 10));
@@ -17,8 +18,8 @@ function calculateParcels(project: Project, point: Coordinate): Coordinate[] {
   });
 }
 
-export function PublishToLand({ onClose }: { onClose: () => void }) {
-  const { project, publishScene, updateProject } = useEditor();
+export function PublishToLand({ onTarget }: TargetProps) {
+  const { project, updateProject } = useEditor();
   const tiles = useSelector(state => state.land.tiles);
   const landTiles = useSelector(state => landSelectors.getLandTiles(state.land));
   const [hover, setHover] = useState<Coordinate>({ x: 0, y: 0 });
@@ -29,10 +30,12 @@ export function PublishToLand({ onClose }: { onClose: () => void }) {
   // Memoize the project parcels centered around the hover position
   const projectParcels = useMemo(() => calculateParcels(project, hover), [project, hover]);
 
-  const handleClickPublish = useCallback(() => {
-    publishScene({ target: import.meta.env.VITE_CATALYST_SERVER || DEPLOY_URLS.CATALYST_SERVER });
-    onClose();
-  }, [publishScene, onClose]);
+  const handleNext = useCallback(() => {
+    onTarget({
+      target: 'land',
+      value: import.meta.env.VITE_CATALYST_SERVER || DEPLOY_URLS.CATALYST_SERVER,
+    });
+  }, [onTarget]);
 
   const handleHover = useCallback((x: number, y: number) => {
     setHover({ x, y });
@@ -170,7 +173,7 @@ export function PublishToLand({ onClose }: { onClose: () => void }) {
           variant="contained"
           color="primary"
           size="large"
-          onClick={handleClickPublish}
+          onClick={handleNext}
           disabled={!placement}
           sx={{ height: '45px' }}
         >
diff --git a/packages/renderer/src/components/Modals/PublishProject/PublishToWorld/component.tsx b/packages/renderer/src/components/Modals/PublishProject/PublishToWorld/component.tsx
index 528cecf8..667379ba 100644
--- a/packages/renderer/src/components/Modals/PublishProject/PublishToWorld/component.tsx
+++ b/packages/renderer/src/components/Modals/PublishProject/PublishToWorld/component.tsx
@@ -23,6 +23,7 @@ import { ENSProvider } from '/@/modules/store/ens/types';
 import { getEnsProvider } from '/@/modules/store/ens/utils';
 import { useAuth } from '/@/hooks/useAuth';
 import { useEditor } from '/@/hooks/useEditor';
+import { type TargetProps } from '../types';
 
 import EmptyWorldSVG from '/assets/images/empty-deploy-to-world.svg';
 import LogoDCLSVG from '/assets/images/logo-dcl.svg';
@@ -32,20 +33,22 @@ import { Button } from '../../../Button';
 
 import './styles.css';
 
-export function PublishToWorld({ onClose }: { onClose: () => void }) {
-  const { project, publishScene } = useEditor();
+export function PublishToWorld({ onTarget }: TargetProps) {
+  const { project } = useEditor();
   const names = useSelector(state => state.ens.data);
   const emptyNames = Object.keys(names).length === 0;
 
-  const handleClickPublish = useCallback(() => {
-    publishScene({ targetContent: import.meta.env.VITE_WORLDS_SERVER || DEPLOY_URLS.WORLDS });
-    onClose();
+  const handleNext = useCallback(() => {
+    onTarget({
+      target: 'worlds',
+      value: import.meta.env.VITE_WORLDS_SERVER || DEPLOY_URLS.WORLDS,
+    });
   }, []);
 
   return !emptyNames ? (
     <SelectWorld
       project={project!}
-      onPublish={handleClickPublish}
+      onPublish={handleNext}
     />
   ) : (
     <EmptyNames />
diff --git a/packages/renderer/src/components/Modals/PublishProject/component.tsx b/packages/renderer/src/components/Modals/PublishProject/component.tsx
index bbc5e1b0..9258c285 100644
--- a/packages/renderer/src/components/Modals/PublishProject/component.tsx
+++ b/packages/renderer/src/components/Modals/PublishProject/component.tsx
@@ -1,25 +1,15 @@
-import { type ChangeEvent, useCallback, useState } from 'react';
-import { MenuItem, Select, type SelectChangeEvent } from 'decentraland-ui2';
+import { useCallback, useState } from 'react';
 import { Modal } from 'decentraland-ui2/dist/components/Modal/Modal';
-
-import { misc } from '#preload';
-import { isUrl } from '/shared/utils';
 import { t } from '/@/modules/store/translation/utils';
-
-import GenesisPlazaPng from '/assets/images/genesis_plaza.png';
-import LandPng from '/assets/images/land.png';
-import WorldsPng from '/assets/images/worlds.png';
-
-import { Button } from '../../Button';
-import { OptionBox } from '../../EditorPage/OptionBox';
+import { Initial } from './Initial';
+import { AlternativeServers } from './AlternativeServers';
 import { PublishToWorld } from './PublishToWorld';
 import { PublishToLand } from './PublishToLand';
+import { Deploy } from './Deploy';
 
-import type { AlternativeTarget, Step, StepProps, StepValue, Props } from './types';
+import type { TargetValue, Props, Step } from './types';
 
-import './styles.css';
-
-export function PublishProject({ open, project, onSubmit, onClose }: Props) {
+export function PublishProject({ open, project, onTarget, onClose }: Props) {
   const [step, setStep] = useState<Step>('initial');
 
   const close = useCallback(() => {
@@ -36,9 +26,9 @@ export function PublishProject({ open, project, onSubmit, onClose }: Props) {
     [],
   );
 
-  const handleClickPublish = useCallback((value: StepValue) => {
-    onSubmit(value);
-    close();
+  const handleTarget = useCallback((value: TargetValue) => {
+    onTarget(value);
+    setStep('deploy');
   }, []);
 
   return (
@@ -54,130 +44,10 @@ export function PublishProject({ open, project, onSubmit, onClose }: Props) {
       onBack={step !== 'initial' ? handleChangeStep('initial') : undefined}
     >
       {step === 'initial' && <Initial onStepChange={handleChangeStep} />}
-      {step === 'alternative-servers' && <AlternativeServers onClick={handleClickPublish} />}
-      {step === 'publish-to-land' && <PublishToLand onClose={onClose} />}
-      {step === 'publish-to-world' && <PublishToWorld onClose={onClose} />}
+      {step === 'alternative-servers' && <AlternativeServers onTarget={handleTarget} />}
+      {step === 'publish-to-land' && <PublishToLand onTarget={handleTarget} />}
+      {step === 'publish-to-world' && <PublishToWorld onTarget={handleTarget} />}
+      {step === 'deploy' && <Deploy />}
     </Modal>
   );
 }
-
-function Initial({ onStepChange }: { onStepChange: (step: Step) => () => void }) {
-  return (
-    <div className="Initial">
-      <span className="select">{t('modal.publish_project.select')}</span>
-      <div className="options">
-        <OptionBox
-          thumbnailSrc={WorldsPng}
-          title={t('modal.publish_project.worlds.title')}
-          description={t('modal.publish_project.worlds.description')}
-          buttonText={t('modal.publish_project.worlds.action')}
-          onClickPublish={onStepChange('publish-to-world')}
-          learnMoreUrl="https://docs.decentraland.org/creator/worlds/about/#publish-a-world"
-        />
-        <OptionBox
-          thumbnailSrc={LandPng}
-          title={t('modal.publish_project.land.title')}
-          description={t('modal.publish_project.land.description')}
-          buttonText={t('modal.publish_project.land.action')}
-          onClickPublish={onStepChange('publish-to-land')}
-          learnMoreUrl="https://docs.decentraland.org/creator/development-guide/sdk7/publishing-permissions/#land-permission-options"
-        />
-      </div>
-      <span
-        className="alternative_servers"
-        onClick={onStepChange('alternative-servers')}
-      >
-        {t('modal.publish_project.alternative_servers.title')}
-      </span>
-    </div>
-  );
-}
-
-function AlternativeServers({ onClick }: StepProps) {
-  const [option, setOption] = useState<AlternativeTarget>('test');
-  const [customUrl, setCustomUrl] = useState('');
-  const [error, setError] = useState('');
-
-  const handleClick = useCallback(() => {
-    if (option === 'custom' && !isUrl(customUrl)) {
-      return setError(t('modal.publish_project.alternative_servers.errors.url'));
-    }
-    const value: StepValue = { target: option, value: customUrl };
-    onClick(value);
-  }, [option, customUrl]);
-
-  const handleChangeSelect = useCallback((e: SelectChangeEvent<AlternativeTarget>) => {
-    setOption(e.target.value as AlternativeTarget);
-  }, []);
-
-  const handleChangeCustom = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
-      if (error) setError('');
-      setCustomUrl(e.target.value);
-    },
-    [error],
-  );
-
-  const handleClickLearnMore = useCallback(() => {
-    if (option === 'custom') {
-      return misc.openExternal(
-        'https://docs.decentraland.org/creator/development-guide/sdk7/publishing/#custom-servers',
-      );
-    }
-    misc.openExternal(
-      'https://docs.decentraland.org/creator/development-guide/sdk7/publishing/#the-test-server',
-    );
-  }, [option]);
-
-  return (
-    <div className="AlternativeServers">
-      <span className="select">{t('modal.publish_project.select')}</span>
-      <div className="box">
-        <div className="selection">
-          <div>
-            <h3>{t('modal.publish_project.alternative_servers.list')}</h3>
-            <Select
-              variant="standard"
-              value={option}
-              onChange={handleChangeSelect}
-            >
-              <MenuItem value="test">
-                {t('modal.publish_project.alternative_servers.options.test_server')}
-              </MenuItem>
-              <MenuItem value="custom">
-                {t('modal.publish_project.alternative_servers.options.custom_server')}
-              </MenuItem>
-            </Select>
-            {option === 'custom' && (
-              <div className="custom_input">
-                <span className="title">
-                  {t('modal.publish_project.alternative_servers.custom_server_url')}
-                </span>
-                <input
-                  value={customUrl}
-                  onChange={handleChangeCustom}
-                />
-                <span className="error">{error}</span>
-              </div>
-            )}
-          </div>
-          <img
-            className="thumbnail"
-            src={GenesisPlazaPng}
-          />
-        </div>
-        <div className="actions">
-          <span
-            className="learn-more"
-            onClick={handleClickLearnMore}
-          >
-            {t('option_box.learn_more')}
-          </span>
-          <Button onClick={handleClick}>
-            {t(`modal.publish_project.alternative_servers.action.${option}_server`)}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/packages/renderer/src/components/Modals/PublishProject/index.ts b/packages/renderer/src/components/Modals/PublishProject/index.ts
index 0d3eda45..cf7bb420 100644
--- a/packages/renderer/src/components/Modals/PublishProject/index.ts
+++ b/packages/renderer/src/components/Modals/PublishProject/index.ts
@@ -1,3 +1,3 @@
 import { PublishProject } from './component';
-import type { StepValue } from './types';
-export { PublishProject, StepValue };
+import type { TargetValue } from './types';
+export { PublishProject, TargetValue as StepValue };
diff --git a/packages/renderer/src/components/Modals/PublishProject/types.ts b/packages/renderer/src/components/Modals/PublishProject/types.ts
index f007062a..c701ae2c 100644
--- a/packages/renderer/src/components/Modals/PublishProject/types.ts
+++ b/packages/renderer/src/components/Modals/PublishProject/types.ts
@@ -4,13 +4,18 @@ export type Props = {
   open: boolean;
   project: Project;
   onClose: () => void;
-  onSubmit: (value: StepValue) => void;
+  onTarget: (value: TargetValue) => void;
 };
 
-export type Step = 'initial' | 'alternative-servers' | 'publish-to-world' | 'publish-to-land';
+export type Step =
+  | 'initial'
+  | 'alternative-servers'
+  | 'publish-to-world'
+  | 'publish-to-land'
+  | 'deploy';
 export type InitialTarget = 'worlds' | 'land';
 export type AlternativeTarget = 'test' | 'custom';
 
 export type Target = InitialTarget | AlternativeTarget;
-export type StepValue = { target: Target; value?: string };
-export type StepProps = { onClick: (value: StepValue) => void };
+export type TargetValue = { target: Target; value?: string };
+export type TargetProps = { onTarget: (value: TargetValue) => void };