Add Playfab register hook function

src/state/playfab/index.ts

@@ -8,6 +8,12 @@ interface UserCreds {
   password: string
 }
 
+interface UserSignUp {
+  email: string
+  username: string
+  password: string
+}
+
 const initialState: PlayfabState = {
   isInitialized: false,
   isLoggedIn: false,
@@ -116,6 +122,37 @@ export const fetchPlayfabUser = createAsyncThunk<PlayfabLoginResult | null, User
   },
 )
 
+export const registerUser = createAsyncThunk<
+  PlayFabClientModels.RegisterPlayFabUserResult | PlayFabModule.IPlayFabError | null,
+  UserSignUp
+>('playfab/registerUser', async (params) => {
+  let _result
+
+  PlayFabClient.RegisterPlayFabUser(
+    {
+      Email: params.email,
+      Username: params.username,
+      Password: params.password,
+      RequireBothUsernameAndEmail: true,
+    },
+    (error, result) => {
+      if (error) {
+        console.error(error.errorMessage)
+        _result = error
+        return
+      }
+      _result = result
+    },
+  )
+
+  await timeout(1800)
+  if (_result === undefined) {
+    console.warn(`register user timeout!`)
+  }
+
+  return _result
+})
+
 export const bindWallet = createAsyncThunk<
   PlayFabCloudScriptModels.ExecuteFunctionResult | null,
   { address: string; userId: string }
@@ -175,6 +212,10 @@ export const playfabSlice = createSlice({
           : null
       }
     })
+    // Register user to Playfab
+    builder.addCase(registerUser.fulfilled, (state, action) => {
+      console.log(action.payload)
+    })
     // Bind wallet to playfab account
     builder.addCase(bindWallet.fulfilled, (state, action) => {
       console.log(action.payload)

src/views/MarketplaceV2/components/Navbar/index.tsx

@@ -8,7 +8,7 @@ import Logo from '../Foundation/Logo'
 import Anchor from '../Foundation/Anchor'
 import { useAppDispatch } from '../../../../state'
 import { usePlayfabUser } from '../../../../state/hooks'
-import { fetchPlayfabUser } from '../../../../state/playfab'
+import { fetchPlayfabUser, registerUser } from '../../../../state/playfab'
 
 const Navbar = () => {
   const { controllers } = useMarketplaceV2()
@@ -25,12 +25,24 @@ const Navbar = () => {
     console.log(user.payload)
   }
 
+  const HandleSignUp = async () => {
+    console.log('attempt sign up')
+    // Test register
+    const register = await dispatch(
+      registerUser({ email: '[email protected]', username: 'tester23', password: '123123' }),
+    )
+
+    console.log('Register User:')
+    console.log(register.payload)
+  }
+
   return (
     <StyledNav>
       <Anchor href={marketplaceURL}>
         <Logo size={60} />
       </Anchor>
       <StyledBtn onClick={() => HandleSignIn()}>Sign in</StyledBtn>
+      <StyledBtn onClick={() => HandleSignUp()}>Register</StyledBtn>
     </StyledNav>
   )
 }