feat: Start nominating canvas (#2062)

src/canvas/CreatePool/Summary/index.tsx

@@ -79,17 +79,17 @@ export const Summary = ({ section }: SetupStepProps) => {
       // Close canvas.
       closeCanvas();
 
-      // query and add created pool to bondedPools list
+      // Query and add created pool to bondedPools list.
       const pool = await queryBondedPool(poolId.toNumber());
       addToBondedPools(pool);
 
-      // query and add account to poolMembers list
+      // Query and add account to poolMembers list.
       const member = await queryPoolMember(activeAccount);
       if (member) {
         addToPoolMembers(member);
       }
 
-      // reset localStorage setup progress
+      // Reset setup progress.
       removeSetupProgress('pool', activeAccount);
     },
   });

src/pages/Nominate/Setup/Summary/index.tsx → src/canvas/NominatorSetup/Summary/index.tsx

@@ -20,6 +20,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');
@@ -29,6 +30,7 @@ export const Summary = ({ section }: SetupStepProps) => {
   } = useNetwork();
   const { newBatchCall } = useBatchCall();
   const { getPayeeItems } = usePayeeConfig();
+  const { closeCanvas } = useOverlay().canvas;
   const { accountHasSigner } = useImportedAccounts();
   const { activeAccount, activeProxy } = useActiveAccounts();
   const { getNominatorSetup, removeSetupProgress } = useSetup();
@@ -70,6 +72,10 @@ export const Summary = ({ section }: SetupStepProps) => {
     from: activeAccount,
     shouldSubmit: true,
     callbackInBlock: () => {
+      // Close the canvas after the extrinsic is included in a block.
+      closeCanvas();
+
+      // Reset setup progress.
       removeSetupProgress('nominator', activeAccount);
     },
   });

src/canvas/NominatorSetup/index.tsx

@@ -0,0 +1,64 @@
+// 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 { Payee } from 'canvas/NominatorSetup/Payee';
+import { Bond } from 'canvas/NominatorSetup/Bond';
+import { Summary } from 'canvas/NominatorSetup/Summary';
+import { CanvasFullScreenWrapper, CanvasTitleWrapper } from 'canvas/Wrappers';
+import { ButtonPrimary } from 'kits/Buttons/ButtonPrimary';
+import { useOverlay } from 'kits/Overlay/Provider';
+
+export const NominatorSetup = () => {
+  const { t } = useTranslation('pages');
+  const { closeCanvas } = useOverlay().canvas;
+
+  return (
+    <CanvasFullScreenWrapper>
+      <div className="head">
+        <ButtonPrimary
+          text={t('pools.back')}
+          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('nominate.startNominating')}</h1>
+            </div>
+          </div>
+        </div>
+      </CanvasTitleWrapper>
+
+      <CardWrapper className="canvas">
+        <Element name="payee" style={{ position: 'absolute' }} />
+        <Payee section={1} />
+      </CardWrapper>
+
+      <CardWrapper className="canvas">
+        <Element name="nominate" style={{ position: 'absolute' }} />
+        <Nominate bondFor="nominator" section={2} />
+      </CardWrapper>
+
+      <CardWrapper className="canvas">
+        <Element name="bond" style={{ position: 'absolute' }} />
+        <Bond section={3} />
+      </CardWrapper>
+
+      <CardWrapper className="canvas">
+        <Element name="summary" style={{ position: 'absolute' }} />
+        <Summary section={4} />
+      </CardWrapper>
+    </CanvasFullScreenWrapper>
+  );
+};

src/contexts/Setup/defaults.ts

@@ -30,8 +30,6 @@ export const defaultSetupContext: SetupContextInterface = {
   getPoolSetupPercent: (a) => 0,
   setActiveAccountSetup: (t, p) => {},
   setActiveAccountSetupSection: (t, s) => {},
-  setOnNominatorSetup: (v) => {},
-  onNominatorSetup: false,
   getNominatorSetup: (address) => ({
     section: 1,
     progress: defaultNominatorProgress,

src/contexts/Setup/index.tsx

@@ -13,7 +13,6 @@ import { useEffectIgnoreInitial } from '@w3ux/hooks';
 import { useNetwork } from 'contexts/Network';
 import { useActiveAccounts } from 'contexts/ActiveAccounts';
 import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts';
-import { useStaking } from '../Staking';
 import {
   defaultNominatorProgress,
   defaultPoolProgress,
@@ -28,28 +27,20 @@ import type {
   PoolSetups,
   SetupContextInterface,
 } from './types';
-import { useBalances } from 'contexts/Balances';
 
 export const SetupContext =
   createContext<SetupContextInterface>(defaultSetupContext);
 
 export const useSetup = () => useContext(SetupContext);
 
 export const SetupProvider = ({ children }: { children: ReactNode }) => {
-  const { inSetup } = useStaking();
   const {
     network,
     networkData: { units },
   } = useNetwork();
   const { accounts } = useImportedAccounts();
-  const { getPoolMembership } = useBalances();
   const { activeAccount } = useActiveAccounts();
 
-  const poolMembership = getPoolMembership(activeAccount);
-
-  // is the user actively on the setup page
-  const [onNominatorSetup, setOnNominatorSetup] = useState<boolean>(false);
-
   // Store all imported accounts nominator setups.
   const [nominatorSetups, setNominatorSetups] = useState<NominatorSetups>({});
 
@@ -268,13 +259,6 @@ export const SetupProvider = ({ children }: { children: ReactNode }) => {
     }
   };
 
-  // Move away from setup pages on completion / network change.
-  useEffectIgnoreInitial(() => {
-    if (!inSetup()) {
-      setOnNominatorSetup(false);
-    }
-  }, [inSetup(), network, poolMembership]);
-
   // Update setup state when activeAccount changes
   useEffectIgnoreInitial(() => {
     if (accounts.length) {
@@ -290,8 +274,6 @@ export const SetupProvider = ({ children }: { children: ReactNode }) => {
         getPoolSetupPercent,
         setActiveAccountSetup,
         setActiveAccountSetupSection,
-        setOnNominatorSetup,
-        onNominatorSetup,
         getNominatorSetup,
         getPoolSetup,
       }}

src/contexts/Setup/types.ts

@@ -53,8 +53,6 @@ export interface SetupContextInterface {
     p: NominatorProgress | PoolProgress
   ) => void;
   setActiveAccountSetupSection: (t: BondFor, s: number) => void;
-  setOnNominatorSetup: (v: boolean) => void;
-  onNominatorSetup: boolean;
   getNominatorSetup: (address: MaybeAddress) => NominatorSetup;
   getPoolSetup: (address: MaybeAddress) => PoolSetup;
 }

src/library/SideMenu/Main.tsx

@@ -33,7 +33,6 @@ export const Main = () => {
   const { activeAccount } = useActiveAccounts();
   const { inSetup: inNominatorSetup, addressDifferentToStash } = useStaking();
   const {
-    onNominatorSetup,
     getPoolSetupPercent,
     getNominatorSetupPercent,
   }: SetupContextInterface = useSetup();
@@ -74,7 +73,6 @@ export const Main = () => {
         // configure Stake action
         const staking = !inNominatorSetup();
         const warning = !syncing && controllerDifferentToStash;
-        const setupPercent = getNominatorSetupPercent(activeAccount);
 
         if (staking) {
           pages[i].action = {
@@ -89,13 +87,6 @@ export const Main = () => {
             status: 'warning',
           };
         }
-        if (!staking && (onNominatorSetup || setupPercent > 0)) {
-          pages[i].action = {
-            type: 'text',
-            status: 'warning',
-            text: `${setupPercent}%`,
-          };
-        }
       }
 
       if (uri === `${import.meta.env.BASE_URL}pools`) {
@@ -128,7 +119,6 @@ export const Main = () => {
     getNominatorSetupPercent(activeAccount),
     getPoolSetupPercent(activeAccount),
     i18n.resolvedLanguage,
-    onNominatorSetup,
   ]);
 
   // remove pages that network does not support

src/overlay/index.tsx

@@ -32,6 +32,7 @@ import { ManageNominations } from '../canvas/ManageNominations';
 import { PoolMembers } from 'canvas/PoolMembers';
 import { JoinPool } from 'canvas/JoinPool';
 import { CreatePool } from 'canvas/CreatePool';
+import { NominatorSetup } from 'canvas/NominatorSetup';
 import { Overlay } from 'kits/Overlay';
 
 export const Overlays = () => {
@@ -72,6 +73,7 @@ export const Overlays = () => {
         PoolMembers,
         JoinPool,
         CreatePool,
+        NominatorSetup,
       }}
     />
   );

src/pages/Nominate/Active/Status/NewNominator.tsx

@@ -3,24 +3,21 @@
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { CallToActionWrapper } from 'library/CallToAction';
-import {
-  faChevronCircleRight,
-  faChevronRight,
-} from '@fortawesome/free-solid-svg-icons';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { useTranslation } from 'react-i18next';
-import { useSetup } from 'contexts/Setup';
 import { useActiveAccounts } from 'contexts/ActiveAccounts';
 import { useNavigate } from 'react-router-dom';
 import { useApi } from 'contexts/Api';
 import type { NewNominatorProps } from '../types';
 import { CallToActionLoader } from 'library/Loader/CallToAction';
 import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts';
+import { useOverlay } from 'kits/Overlay/Provider';
 
 export const NewNominator = ({ syncing }: NewNominatorProps) => {
   const { t } = useTranslation();
   const { isReady } = useApi();
   const navigate = useNavigate();
-  const { setOnNominatorSetup } = useSetup();
+  const { openCanvas } = useOverlay().canvas;
   const { activeAccount } = useActiveAccounts();
   const { isReadOnlyAccount } = useImportedAccounts();
 
@@ -33,27 +30,41 @@ export const NewNominator = ({ syncing }: NewNominatorProps) => {
         {syncing ? (
           <CallToActionLoader />
         ) : (
-          <section className="standalone">
-            <div className="buttons">
-              <div
-                className={`button primary${nominateButtonDisabled ? ` disabled` : ``}`}
-              >
-                <button
-                  onClick={() => setOnNominatorSetup(true)}
-                  disabled={nominateButtonDisabled}
+          <>
+            <section className="standalone">
+              <div className="buttons">
+                <div
+                  className={`button primary standalone${nominateButtonDisabled ? ` disabled` : ``}`}
                 >
-                  {t('nominate.startNominating', { ns: 'pages' })}
-                  <FontAwesomeIcon icon={faChevronCircleRight} />
-                </button>
+                  <button
+                    onClick={() =>
+                      openCanvas({
+                        key: 'NominatorSetup',
+                        options: {},
+                        size: 'xl',
+                      })
+                    }
+                    disabled={nominateButtonDisabled}
+                  >
+                    {t('nominate.startNominating', { ns: 'pages' })}
+                  </button>
+                </div>
               </div>
-              <div className="button secondary">
-                <button onClick={() => navigate('/validators')}>
-                  {t('browseValidators', { ns: 'library' })}
-                  <FontAwesomeIcon icon={faChevronRight} transform="shrink-4" />
-                </button>
+            </section>
+            <section>
+              <div className="buttons">
+                <div className={`button secondary standalone`}>
+                  <button onClick={() => navigate('/validators')}>
+                    {t('browseValidators', { ns: 'library' })}
+                    <FontAwesomeIcon
+                      icon={faChevronRight}
+                      transform="shrink-4"
+                    />
+                  </button>
+                </div>
               </div>
-            </div>
-          </section>
+            </section>
+          </>
         )}
       </div>
     </CallToActionWrapper>