[ERC20 Launchpad] - Added success step for tokenized community flow

packages/commonwealth/client/scripts/views/pages/LaunchToken/LaunchToken.tsx

@@ -7,6 +7,7 @@ import useAppStatus from '../../../hooks/useAppStatus';
 import { useBrowserAnalyticsTrack } from '../../../hooks/useBrowserAnalyticsTrack';
 import './LaunchToken.scss';
 import CommunityInformationStep from './steps/CommunityInformationStep';
+import SuccessStep from './steps/SuccessStep';
 import TokenInformationStep from './steps/TokenInformationStep';
 import useCreateCommunity from './useCreateCommunity';
 import { CreateTokenCommunityStep, getFormSteps } from './utils';
@@ -66,6 +67,8 @@ const LaunchToken = () => {
       case CreateTokenCommunityStep.SignatureLaunch:
         // TODO: https://github.com/hicommonwealth/commonwealth/issues/8707
         return <>Not Implemented</>;
+      case CreateTokenCommunityStep.Success:
+        return <SuccessStep communityId="" withToken />; // TODO: community id will come after 8707 is complete
     }
   };
 

packages/commonwealth/client/scripts/views/pages/LaunchToken/steps/SuccessStep/SuccessStep.scss

@@ -0,0 +1,40 @@
+@import '../../../../../../styles/shared';
+
+.SuccessStep {
+  margin: 40px auto 0;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  max-width: 600px;
+  gap: 12px;
+  will-change: opacity;
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+
+    .description {
+      color: $neutral-500;
+    }
+
+    .cta-btn {
+      min-width: 328px;
+
+      @include extraSmall {
+        min-width: auto;
+        width: 100%;
+      }
+    }
+  }
+
+  .img {
+    width: 220px;
+    height: 220px;
+  }
+}

packages/commonwealth/client/scripts/views/pages/LaunchToken/steps/SuccessStep/SuccessStep.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import tokenCommunityIsLiveImg from 'assets/img/tokenCommunityIsLive.png';
+import { useAnimation } from 'hooks/useAnimation';
+import { navigateToCommunity, useCommonNavigate } from 'navigation/helpers';
+import { CWText } from 'views/components/component_kit/cw_text';
+import { CWButton } from 'views/components/component_kit/new_designs/CWButton';
+
+import './SuccessStep.scss';
+
+interface SuccessStepProps {
+  communityId: string;
+  withToken: boolean;
+}
+
+const SuccessStep = ({ communityId, withToken }: SuccessStepProps) => {
+  const navigate = useCommonNavigate();
+  const { animationStyles } = useAnimation();
+
+  return (
+    <div className="SuccessStep" style={animationStyles}>
+      <img src={tokenCommunityIsLiveImg} alt="" className="img" />
+      <CWText type="h2">
+        Your {withToken ? 'token and' : ''} community is live!
+      </CWText>
+      <div className="container" style={animationStyles}>
+        <CWText type="b1" className="description">
+          Your {withToken ? 'token and' : ''} community is now live and
+          discoverable on Common. You can now use the admin panel to change
+          settings and create topics for discussion.
+        </CWText>
+        <CWButton
+          buttonWidth="wide"
+          label="Go to community"
+          containerClassName="cta-btn"
+          className="w-full"
+          onClick={() => {
+            navigateToCommunity({ navigate, path: '', chain: communityId });
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SuccessStep;

packages/commonwealth/client/scripts/views/pages/LaunchToken/steps/SuccessStep/index.ts

@@ -0,0 +1,3 @@
+import SuccessStep from './SuccessStep';
+
+export default SuccessStep;

packages/commonwealth/client/scripts/views/pages/LaunchToken/useCreateCommunity.ts

@@ -5,9 +5,7 @@ import { CreateTokenCommunityStep, handleChangeStep } from './utils';
 
 const useCreateCommunity = () => {
   const [createTokenCommunityStep, setCreateTokenCommunityStep] =
-    useState<CreateTokenCommunityStep>(
-      CreateTokenCommunityStep.TokenInformation,
-    );
+    useState<CreateTokenCommunityStep>(CreateTokenCommunityStep.Success);
   const [selectedAddress, setSelectedAddress] = useState<AddressInfo>();
   const [createdTokenInfo, setCreatedTokenInfo] = useState<TokenInfo>();