feat: publish process

src/components/DoBooster/index.tsx

@@ -33,9 +33,17 @@ interface IProps {
   actionBtn?: React.ReactNode;
   onSuccess?: () => void;
   initAddOrRemove?: 'add' | 'remove';
+  initialOpen?: boolean;
 }
 
-const DoBooster: FC<IProps> = ({ projectId, deploymentId, actionBtn, initAddOrRemove = 'add', onSuccess }) => {
+const DoBooster: FC<IProps> = ({
+  projectId,
+  deploymentId,
+  actionBtn,
+  initialOpen = false,
+  initAddOrRemove = 'add',
+  onSuccess,
+}) => {
   const { address: account } = useAccount();
   const [form] = useForm();
   const formBoostVal = useWatch('boostVal', form);
@@ -55,7 +63,7 @@ const DoBooster: FC<IProps> = ({ projectId, deploymentId, actionBtn, initAddOrRe
     fetchPolicy: 'network-only',
   });
 
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(initialOpen);
   const [loading, setLoading] = useState(false);
   const [addOrRemove, setAddOrRemove] = useState<'add' | 'remove'>(initAddOrRemove);
 

src/components/FTextInput/FTextInput.module.less

@@ -0,0 +1,5 @@
+.textInput {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}

src/components/FTextInput.tsx → src/components/FTextInput/FTextInput.tsx

@@ -4,12 +4,22 @@ import React from 'react';
 import { TextInput } from '@subql/components';
 import { useField } from 'formik';
 
+import styles from './FTextInput.module.less';
+
 const FTextInput: React.FC<
   Omit<React.ComponentProps<typeof TextInput>, 'error' | 'value' | 'onChange'> & { id: string }
 > = ({ id, ...rest }) => {
   const [field, meta] = useField(id);
 
-  return <TextInput {...field} {...(rest as any)} name={id} error={meta.touched && meta.error} />;
+  return (
+    <TextInput
+      containerClassName={styles.textInput}
+      {...field}
+      {...(rest as any)}
+      name={id}
+      error={meta.touched && meta.error}
+    />
+  );
 };
 
 export default FTextInput;

src/components/GetEndpoint/index.tsx

@@ -25,6 +25,7 @@ import styles from './index.module.less';
 interface IProps {
   deploymentId: string;
   project: Pick<ProjectDetailsQuery, 'id' | 'metadata'>;
+  initialOpen?: boolean;
 }
 
 export const proxyGateway = import.meta.env.VITE_PROXYGATEWAY;
@@ -72,9 +73,9 @@ export const getWsEndpointWithApiKey = (projectId: string, apiKey: string) =>
       }-archive/ws?apikey=${apiKey}`
     : '';
 
-const GetEndpoint: FC<IProps> = ({ deploymentId, project }) => {
+const GetEndpoint: FC<IProps> = ({ deploymentId, project, initialOpen = false }) => {
   const { address: account } = useAccount();
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = React.useState(initialOpen);
   const beforeStep = React.useRef<'select' | 'createFlexPlan' | 'checkFree' | 'checkEndpointWithApiKey'>('select');
   const [currentStep, setCurrentStep] = React.useState<
     'select' | 'createFlexPlan' | 'checkFree' | 'checkEndpointWithApiKey'

src/components/ProjectHeader/ProjectHeader.tsx

@@ -3,12 +3,15 @@
 
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router';
+import { useSearchParams } from 'react-router-dom';
 import GetEndpoint from '@components/GetEndpoint';
 import { IndexerName } from '@components/IndexerDetails/IndexerName';
 import UnsafeWarn from '@components/UnsafeWarn';
 import { useConsumerHostServices } from '@hooks/useConsumerHostServices';
 import { Manifest } from '@hooks/useGetDeploymentManifest';
 import { ProjectDetailsQuery } from '@hooks/useProjectFromQuery';
+import { ProjectActionArgv } from '@pages/explorer/Project/type';
 import { Tag, Typography } from '@subql/components';
 import { ProjectType } from '@subql/network-query';
 import { useAsyncMemo } from '@subql/react-hooks';
@@ -45,7 +48,13 @@ const ProjectHeader: React.FC<Props> = ({
   const { t } = useTranslation();
   const { projectDbSize, projectInfo } = useProjectStore();
   const { getStatisticQueries } = useConsumerHostServices({ autoLogin: false });
-
+  const [searchParams] = useSearchParams();
+  const initialOpenModal = React.useMemo(() => {
+    if (searchParams.get('action') === ProjectActionArgv.CREATE_PLAN) {
+      return true;
+    }
+    return false;
+  }, [searchParams]);
   const createdAtStr = React.useMemo(() => dayjs(project.createdTimestamp).utc(true).fromNow(), [project]);
   const updatedAtStr = React.useMemo(() => dayjs(project.updatedTimestamp).utc(true).fromNow(), [project]);
 
@@ -162,7 +171,11 @@ const ProjectHeader: React.FC<Props> = ({
             <VersionDropdown />
             <span style={{ flex: 1 }}></span>
             <div className={`flex ${styles.groupButton}`}>
-              <GetEndpoint deploymentId={currentVersion || ''} project={project}></GetEndpoint>
+              <GetEndpoint
+                deploymentId={currentVersion || ''}
+                project={project}
+                initialOpen={initialOpenModal}
+              ></GetEndpoint>
             </div>
           </div>
           <IndexerName address={project.owner} size="tiny"></IndexerName>

src/components/ProjectOverview/ProjectOverview.tsx

@@ -3,6 +3,7 @@
 
 import * as React from 'react';
 import { BsGithub, BsGlobe, BsInfoCircle } from 'react-icons/bs';
+import { useSearchParams } from 'react-router-dom';
 import { gql, useQuery } from '@apollo/client';
 import DoBooster from '@components/DoBooster';
 import Expand from '@components/Expand/Expand';
@@ -13,6 +14,7 @@ import { Manifest } from '@hooks/useGetDeploymentManifest';
 import { ProjectDetailsQuery } from '@hooks/useProjectFromQuery';
 import { BalanceLayout } from '@pages/dashboard';
 import { DeploymentRewardsLine } from '@pages/explorer/Project/components/DeploymentRewardsChart';
+import { ProjectActionArgv } from '@pages/explorer/Project/type';
 import { Markdown, Spinner, SubqlCard, Tag, Typography } from '@subql/components';
 import { cidToBytes32 } from '@subql/network-clients';
 import { SQNetworks } from '@subql/network-config';
@@ -56,7 +58,13 @@ const ProjectOverview: React.FC<Props> = ({ project, metadata, deploymentDescrip
   const query = useRouteQuery();
   const { contracts } = useWeb3Store();
   const provider = useEthersProviderWithPublic();
-
+  const [searchParams] = useSearchParams();
+  const initialOpenModal = React.useMemo(() => {
+    if (searchParams.get('action') === ProjectActionArgv.BOOST) {
+      return true;
+    }
+    return false;
+  }, [searchParams]);
   const deploymentId = React.useMemo(() => {
     return query.get('deploymentId') || project.deploymentId;
   }, [project, query]);
@@ -312,7 +320,7 @@ const ProjectOverview: React.FC<Props> = ({ project, metadata, deploymentDescrip
               </div>
               <span style={{ flex: 1 }}></span>
 
-              <DoBooster projectId={project.id} deploymentId={deploymentId}></DoBooster>
+              <DoBooster projectId={project.id} deploymentId={deploymentId} initialOpen={initialOpenModal}></DoBooster>
             </div>
           }
         >

src/i18n/en/explorer.ts

@@ -113,7 +113,7 @@ const translation = {
   deployment: {
     create: {
       title: 'Create New Deployment',
-      version: 'Version',
+      version: 'Version Name',
       description: 'Description',
       deploymentId: 'Deployment ID',
       explainer: 'You can get a deployment id by running `subql publish` from the command line',

src/pages/explorer/Project/type.ts

@@ -0,0 +1,4 @@
+export enum ProjectActionArgv {
+  BOOST = 'boost',
+  CREATE_PLAN = 'createPlan',
+}

src/pages/projects/Create/Create.module.less

@@ -54,9 +54,48 @@
     .ant-modal-confirm-paragraph.ant-modal-confirm-paragraph {
       max-width: 100%;
     }
+
+    .ant-result {
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      .anticon-check-circle {
+        font-size: 50px;
+      }
+
+      &-icon {
+        margin-bottom: 0;
+      }
+
+      &-title {
+        margin: 0;
+        font-size: 20px;
+        line-height: 30px;
+        font-family: var(--sq-font-family);
+      }
+
+      &-subtitle {
+        font-size: 16px;
+      }
+
+      &-extra {
+        margin-top: 0;
+      }
+    }
   }
 }
 
+.plainCard {
+  border-radius: 8px;
+  border: 1px solid rgba(223, 227, 232, .6);
+  padding: 24px;
+  text-align: left;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
 .markdownWrapper {
   :global {
     .subql-markdown-preview {