adding use context pr change.

ts/components/session/registration/RegistrationStages.tsx

@@ -16,6 +16,7 @@ import { fromHex } from '../../../session/utils/String';
 import { TaskTimedOutError } from '../../../session/utils/Promise';
 import { mn_decode } from '../../../session/crypto/mnemonic';
 import { getSwarmPollingInstance } from '../../../session/snode_api/swarmPolling';
+import { createContext } from 'react';
 
 export const MAX_USERNAME_LENGTH = 20;
 // tslint:disable: use-simple-attributes
@@ -158,6 +159,16 @@ export enum RegistrationPhase {
   SignUp,
 }
 
+interface RegistrationPhaseContext {
+  registrationPhase: RegistrationPhase;
+  setRegistrationPhase: (phase: RegistrationPhase) => void;
+}
+
+export const RegistrationContext = createContext<RegistrationPhaseContext>({
+  registrationPhase: RegistrationPhase.Start,
+  setRegistrationPhase: () => {}
+});
+
 export const RegistrationStages = () => {
   const [generatedRecoveryPhrase, setGeneratedRecoveryPhrase] = useState('');
   const [hexGeneratedPubKey, setHexGeneratedPubKey] = useState('');
@@ -190,18 +201,21 @@ export const RegistrationStages = () => {
 
   return (
     <div className="session-registration-container">
-      {(registrationPhase === RegistrationPhase.Start ||
-        registrationPhase === RegistrationPhase.SignUp) && (
-        <SignUpTab
-          generatedRecoveryPhrase={generatedRecoveryPhrase}
-          hexGeneratedPubKey={hexGeneratedPubKey}
-          setRegistrationPhase={setRegistrationPhase}
-        />
-      )}
-      {(registrationPhase === RegistrationPhase.Start ||
-        registrationPhase === RegistrationPhase.SignIn) && (
-        <SignInTab setRegistrationPhase={setRegistrationPhase} />
-      )}
+      <RegistrationContext.Provider value={{registrationPhase, setRegistrationPhase}}>
+        {(registrationPhase === RegistrationPhase.Start ||
+          registrationPhase === RegistrationPhase.SignUp) && (
+            <SignUpTab
+              generatedRecoveryPhrase={generatedRecoveryPhrase}
+              hexGeneratedPubKey={hexGeneratedPubKey}
+              // setRegistrationPhase={setRegistrationPhase}
+            />
+          )}
+        {(registrationPhase === RegistrationPhase.Start ||
+          registrationPhase === RegistrationPhase.SignIn) && (
+            <SignInTab />
+          )}
+
+      </RegistrationContext.Provider>
     </div>
   );
 };

ts/components/session/registration/SignInTab.tsx

@@ -1,9 +1,9 @@
-import React, { createContext, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Flex } from '../../basic/Flex';
 import { SpacerLG } from '../../basic/Text';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../SessionButton';
 import { SessionSpinner } from '../SessionSpinner';
-import { RegistrationPhase, signInWithLinking, signInWithRecovery } from './RegistrationStages';
+import { RegistrationContext, RegistrationPhase, signInWithLinking, signInWithRecovery } from './RegistrationStages';
 import { RegistrationUserDetails } from './RegistrationUserDetails';
 import { TermsAndConditions } from './TermsAndConditions';
 
@@ -85,12 +85,9 @@ const SignInButtons = (props: {
   );
 };
 
-interface Props {
-  setRegistrationPhase: (phase: RegistrationPhase) => void;
-}
+export const SignInTab = () => {
+  const { setRegistrationPhase } = useContext(RegistrationContext);
 
-export const SignInTab = (props: Props) => {
-  const { setRegistrationPhase } = props;
   const [signInMode, setSignInMode] = useState(SignInMode.Default);
   const [recoveryPhrase, setRecoveryPhrase] = useState('');
   const [recoveryPhraseError, setRecoveryPhraseError] = useState(undefined as string | undefined);

ts/components/session/registration/SignUpTab.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../SessionButton';
 import { SessionIdEditable } from '../SessionIdEditable';
-import { RegistrationPhase, signUp } from './RegistrationStages';
+import { RegistrationContext, RegistrationPhase, signUp } from './RegistrationStages';
 import { RegistrationUserDetails } from './RegistrationUserDetails';
 import { TermsAndConditions } from './TermsAndConditions';
 
@@ -15,7 +15,6 @@ export interface Props {
   // tslint:disable: react-unused-props-and-state
   generatedRecoveryPhrase: string;
   hexGeneratedPubKey: string;
-  setRegistrationPhase: (phase: any) => any;
 }
 
 const CreateSessionIdButton = ({ createSessionID }: { createSessionID: any }) => {
@@ -63,7 +62,8 @@ const SignUpSessionIDShown = (props: { continueSignUp: () => void }) => {
 };
 
 export const SignUpTab = (props: Props) => {
-  const { setRegistrationPhase } = props;
+  const { setRegistrationPhase } = useContext(RegistrationContext);
+
   const [signUpMode, setSignUpMode] = useState(SignUpMode.Default);
   const [displayName, setDisplayName] = useState('');
   const [displayNameError, setDisplayNameError] = useState('');