feat: Create pool canvas (#2061)

src/pages/Pools/Create/PoolRoles/index.tsx → src/canvas/CreatePool/PoolRoles/index.tsx

@@ -9,7 +9,7 @@ import { Header } from 'library/SetupSteps/Header';
 import { MotionContainer } from 'library/SetupSteps/MotionContainer';
 import type { SetupStepProps } from 'library/SetupSteps/types';
 import { useActiveAccounts } from 'contexts/ActiveAccounts';
-import { Roles } from '../../Roles';
+import { Roles } from 'pages/Pools/Roles';
 import type { PoolProgress } from 'contexts/Setup/types';
 import type { PoolRoles as PoolRolesInterface } from 'contexts/Pools/ActivePool/types';
 

src/pages/Pools/Create/Summary/index.tsx → src/canvas/CreatePool/Summary/index.tsx

@@ -21,6 +21,7 @@ import { useApi } from 'contexts/Api';
 import { useActiveAccounts } from 'contexts/ActiveAccounts';
 import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts';
 import { SummaryWrapper } from './Wrapper';
+import { useOverlay } from 'kits/Overlay/Provider';
 
 export const Summary = ({ section }: SetupStepProps) => {
   const { t } = useTranslation('pages');
@@ -32,11 +33,12 @@ export const Summary = ({ section }: SetupStepProps) => {
     networkData: { units, unit },
   } = useNetwork();
   const { newBatchCall } = useBatchCall();
+  const { closeCanvas } = useOverlay().canvas;
   const { accountHasSigner } = useImportedAccounts();
   const { getPoolSetup, removeSetupProgress } = useSetup();
+  const { activeAccount, activeProxy } = useActiveAccounts();
   const { queryPoolMember, addToPoolMembers } = usePoolMembers();
   const { queryBondedPool, addToBondedPools } = useBondedPools();
-  const { activeAccount, activeProxy } = useActiveAccounts();
 
   const poolId = lastPoolId.plus(1);
   const setup = getPoolSetup(activeAccount);
@@ -74,6 +76,9 @@ export const Summary = ({ section }: SetupStepProps) => {
     from: activeAccount,
     shouldSubmit: true,
     callbackInBlock: async () => {
+      // Close canvas.
+      closeCanvas();
+
       // query and add created pool to bondedPools list
       const pool = await queryBondedPool(poolId.toNumber());
       addToBondedPools(pool);

src/canvas/CreatePool/index.tsx

@@ -0,0 +1,70 @@
+// Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { useTranslation } from 'react-i18next';
+import { Element } from 'react-scroll';
+import { CardWrapper } from 'library/Card/Wrappers';
+import { Nominate } from 'library/SetupSteps/Nominate';
+import { Summary } from 'canvas/CreatePool/Summary';
+import { Bond } from 'canvas/CreatePool/Bond';
+import { PoolName } from 'canvas/CreatePool/PoolName';
+import { PoolRoles } from 'canvas/CreatePool/PoolRoles';
+import { CanvasFullScreenWrapper, CanvasTitleWrapper } from 'canvas/Wrappers';
+import { ButtonPrimary } from 'kits/Buttons/ButtonPrimary';
+import { useOverlay } from 'kits/Overlay/Provider';
+
+export const CreatePool = () => {
+  const { t } = useTranslation();
+  const { closeCanvas } = useOverlay().canvas;
+
+  return (
+    <CanvasFullScreenWrapper>
+      <div className="head">
+        <ButtonPrimary
+          text={t('pools.back', { ns: 'pages' })}
+          lg
+          onClick={() => closeCanvas()}
+          iconLeft={faTimes}
+          style={{ marginLeft: '1.1rem' }}
+        />
+      </div>
+
+      <CanvasTitleWrapper>
+        <div className="inner standalone">
+          <div className="empty"></div>
+          <div className="standalone">
+            <div className="title">
+              <h1>{t('pools.createAPool', { ns: 'pages' })}</h1>
+            </div>
+          </div>
+        </div>
+      </CanvasTitleWrapper>
+
+      <CardWrapper className="canvas">
+        <Element name="metadata" style={{ position: 'absolute' }} />
+        <PoolName section={1} />
+      </CardWrapper>
+
+      <CardWrapper className="canvas">
+        <Element name="nominate" style={{ position: 'absolute' }} />
+        <Nominate bondFor="pool" section={2} />
+      </CardWrapper>
+
+      <CardWrapper className="canvas">
+        <Element name="roles" style={{ position: 'absolute' }} />
+        <PoolRoles section={3} />
+      </CardWrapper>
+
+      <CardWrapper className="canvas">
+        <Element name="bond" style={{ position: 'absolute' }} />
+        <Bond section={4} />
+      </CardWrapper>
+
+      <CardWrapper className="canvas">
+        <Element name="summary" style={{ position: 'absolute' }} />
+        <Summary section={5} />
+      </CardWrapper>
+    </CanvasFullScreenWrapper>
+  );
+};

src/canvas/JoinPool/Header.tsx

@@ -8,14 +8,14 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { ButtonPrimary } from 'kits/Buttons/ButtonPrimary';
 import { ButtonPrimaryInvert } from 'kits/Buttons/ButtonPrimaryInvert';
-import { TitleWrapper } from './Wrappers';
 import { Polkicon } from '@w3ux/react-polkicon';
 import { determinePoolDisplay, remToUnit } from '@w3ux/utils';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { PageTitleTabs } from 'kits/Structure/PageTitleTabs';
 import { useTranslation } from 'react-i18next';
 import { useOverlay } from 'kits/Overlay/Provider';
 import type { JoinPoolHeaderProps } from './types';
+import { CanvasTitleWrapper } from 'canvas/Wrappers';
 
 export const Header = ({
   activeTab,
@@ -51,14 +51,14 @@ export const Header = ({
           lg
         />
         <ButtonPrimary
-          text={t('cancel', { ns: 'library' })}
+          text={t('pools.back', { ns: 'pages' })}
           lg
           onClick={() => closeCanvas()}
           iconLeft={faTimes}
           style={{ marginLeft: '1.1rem' }}
         />
       </div>
-      <TitleWrapper>
+      <CanvasTitleWrapper>
         <div className="inner">
           <div>
             <Polkicon
@@ -114,7 +114,7 @@ export const Header = ({
           tabClassName="canvas"
           inline={true}
         />
-      </TitleWrapper>
+      </CanvasTitleWrapper>
     </>
   );
 };

src/canvas/JoinPool/Preloader.tsx

@@ -10,12 +10,12 @@ import {
   JoinFormWrapper,
   JoinPoolInterfaceWrapper,
   PreloaderWrapper,
-  TitleWrapper,
 } from './Wrappers';
 import { PoolSync } from 'library/PoolSync';
 import { CallToActionLoader } from 'library/Loader/CallToAction';
 import { LoaderWrapper } from 'library/Loader/Wrappers';
 import { PageTitleTabs } from 'kits/Structure/PageTitleTabs';
+import { CanvasTitleWrapper } from 'canvas/Wrappers';
 
 export const Preloader = () => {
   const { t } = useTranslation();
@@ -31,14 +31,14 @@ export const Preloader = () => {
           lg
         />
         <ButtonPrimary
-          text={t('cancel', { ns: 'library' })}
+          text={t('pools.back', { ns: 'pages' })}
           lg
           onClick={() => closeCanvas()}
           iconLeft={faTimes}
           style={{ marginLeft: '1.1rem' }}
         />
       </div>
-      <TitleWrapper>
+      <CanvasTitleWrapper>
         <div className="inner">
           <div className="empty"></div>
           <div className="standalone">
@@ -78,7 +78,7 @@ export const Preloader = () => {
           tabClassName="canvas"
           inline={true}
         />
-      </TitleWrapper>
+      </CanvasTitleWrapper>
 
       <JoinPoolInterfaceWrapper>
         <div className="content">

src/canvas/JoinPool/Wrappers.ts

@@ -61,95 +61,6 @@ export const PreloaderWrapper = styled.div`
   opacity: 0.4;
 `;
 
-export const TitleWrapper = styled.div`
-  border-bottom: 1px solid var(--border-secondary-color);
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  margin: 2rem 0 1.55rem 0;
-  padding-bottom: 0.1rem;
-
-  > .inner {
-    display: flex;
-    align-items: center;
-    margin-bottom: 0.5rem;
-    flex: 1;
-
-    > div {
-      display: flex;
-      flex: 1;
-
-      &:nth-child(1) {
-        max-width: 4rem;
-
-        &.empty {
-          max-width: 0px;
-        }
-      }
-
-      &:nth-child(2) {
-        padding-left: 1rem;
-        flex-direction: column;
-
-        &.standalone {
-          padding-left: 0;
-        }
-
-        > .title {
-          position: relative;
-          padding-top: 2rem;
-          flex: 1;
-
-          h1 {
-            position: absolute;
-            top: 0;
-            left: 0;
-            margin: 0;
-            line-height: 2.2rem;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-            width: 100%;
-          }
-        }
-
-        > .labels {
-          display: flex;
-          margin-top: 1.1rem;
-
-          > h3 {
-            color: var(--text-color-secondary);
-            font-family: Inter, sans-serif;
-            margin: 0;
-
-            > svg {
-              margin: 0 0 0 0.2rem;
-            }
-
-            > span {
-              border: 1px solid var(--border-secondary-color);
-              border-radius: 0.5rem;
-              padding: 0.4rem 0.6rem;
-              margin-left: 1rem;
-              font-size: 1.1rem;
-
-              &.blocked {
-                color: var(--accent-color-secondary);
-                border-color: var(--accent-color-secondary);
-              }
-
-              &.destroying {
-                color: var(--status-danger-color);
-                border-color: var(--status-danger-color);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-
 export const JoinFormWrapper = styled.div`
   background: var(--background-canvas-card);
   border: 0.75px solid var(--border-primary-color);

src/canvas/Wrappers.ts

@@ -21,6 +21,99 @@ export const CanvasFullScreenWrapper = styled.div`
   }
 `;
 
+export const CanvasTitleWrapper = styled.div`
+  border-bottom: 1px solid var(--border-secondary-color);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin: 2rem 0 1.55rem 0;
+  padding-bottom: 0.1rem;
+
+  > .inner {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.5rem;
+    flex: 1;
+
+    &.standalone {
+      padding-bottom: 0.5rem;
+    }
+
+    > div {
+      display: flex;
+      flex: 1;
+
+      &:nth-child(1) {
+        max-width: 4rem;
+
+        &.empty {
+          max-width: 0px;
+        }
+      }
+
+      &:nth-child(2) {
+        padding-left: 1rem;
+        flex-direction: column;
+
+        &.standalone {
+          padding-left: 0;
+        }
+
+        > .title {
+          position: relative;
+          padding-top: 2rem;
+          flex: 1;
+
+          h1 {
+            position: absolute;
+            top: 0;
+            left: 0;
+            margin: 0;
+            line-height: 2.2rem;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            width: 100%;
+          }
+        }
+
+        > .labels {
+          display: flex;
+          margin-top: 1.1rem;
+
+          > h3 {
+            color: var(--text-color-secondary);
+            font-family: Inter, sans-serif;
+            margin: 0;
+
+            > svg {
+              margin: 0 0 0 0.2rem;
+            }
+
+            > span {
+              border: 1px solid var(--border-secondary-color);
+              border-radius: 0.5rem;
+              padding: 0.4rem 0.6rem;
+              margin-left: 1rem;
+              font-size: 1.1rem;
+
+              &.blocked {
+                color: var(--accent-color-secondary);
+                border-color: var(--accent-color-secondary);
+              }
+
+              &.destroying {
+                color: var(--status-danger-color);
+                border-color: var(--status-danger-color);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
 export const CanvasSubmitTxFooter = styled.div`
   border-radius: 1rem;
   overflow: hidden;

src/contexts/Setup/defaults.ts

@@ -31,9 +31,7 @@ export const defaultSetupContext: SetupContextInterface = {
   setActiveAccountSetup: (t, p) => {},
   setActiveAccountSetupSection: (t, s) => {},
   setOnNominatorSetup: (v) => {},
-  setOnPoolSetup: (v) => {},
   onNominatorSetup: false,
-  onPoolSetup: false,
   getNominatorSetup: (address) => ({
     section: 1,
     progress: defaultNominatorProgress,