[CON-45 NFID] Auto fill in wallet principal ID after connecting wallet

* for New Beam (Get Paid) and New Meeting
BeamFi · Apr 17, 2023 · b43da42 · b43da42
1 parent 0747b28
commit b43da42
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 67 deletions.
diff --git a/ui/components/beam/auth/BeamSelectWalletModal.tsx b/ui/components/beam/auth/BeamSelectWalletModal.tsx
@@ -14,15 +14,25 @@ import {
   Link,
   Text,
   VStack,
-  useDisclosure
+  useDisclosure,
+  useToast
 } from "@chakra-ui/react"
 
 import { ExternalLinkIcon } from "@chakra-ui/icons"
 import { AuthProvider } from "../../../config"
 import { BlackOutlineButton } from "../../button/BlackOutlineButton"
 import { PlugConnectIcon } from "../../../icon"
+import { PlugConfig } from "../../../config/beamconfig"
+import { makeLogout } from "../../../service/actor/actor-locator"
+import { showToast } from "../../../utils/toast"
+import { createIILogin } from "../../auth/provider/internet-identity"
+import { createPlugLogin } from "../../auth/provider/plug"
 
-export const BeamSelectWalletModal = ({ isOpen, onClose, selectAuth }) => {
+export const BeamSelectWalletModal = ({
+  isOpen,
+  onClose,
+  handleAuthUpdate
+}) => {
   const {
     isOpen: isPlugModalOpen,
     onOpen: onPlugModalOpen,
@@ -31,6 +41,8 @@ export const BeamSelectWalletModal = ({ isOpen, onClose, selectAuth }) => {
 
   const { Plug, InternetIdentity } = AuthProvider
 
+  const toast = useToast()
+
   const onClickSelectAuth = authProvider => {
     switch (authProvider) {
       case Plug: {
@@ -52,6 +64,43 @@ export const BeamSelectWalletModal = ({ isOpen, onClose, selectAuth }) => {
     onClose()
   }
 
+  const selectAuth = async authProvider => {
+    onClose()
+
+    switch (authProvider) {
+      case Plug: {
+        const authLogin = createPlugLogin(
+          handleAuthUpdate,
+          authProvider,
+          PlugConfig.whitelist
+        )
+
+        showToast(
+          toast,
+          "Login with Plug",
+          "Please make sure your have unlocked your Plug Wallet.",
+          "info"
+        )
+
+        // Logout the other provider
+        const logoutFunc = makeLogout(InternetIdentity)
+        await logoutFunc()
+
+        await authLogin()
+        break
+      }
+      case InternetIdentity: {
+        const authLogin = createIILogin(handleAuthUpdate, authProvider)
+
+        // Logout the other provider
+        await makeLogout(Plug)
+
+        await authLogin()
+        break
+      }
+    }
+  }
+
   return (
     <>
       <Modal onClose={onClose} size="lg" isOpen={isOpen}>

diff --git a/ui/components/beam/screen/BeamConnectWallet.tsx b/ui/components/beam/screen/BeamConnectWallet.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect } from "react"
 
 import Head from "next/head"
 
@@ -20,13 +20,6 @@ import { BeamSelectWalletModal } from "../auth/BeamSelectWalletModal"
 
 import { showToast } from "../../../utils/toast"
 
-import { createPlugLogin } from "../../auth/provider/plug"
-import { PlugConfig } from "../../../config/beamconfig"
-import { AuthProvider } from "../../../config"
-import { createIILogin } from "../../auth/provider/internet-identity"
-
-import { makeLogout } from "../../../service/actor/actor-locator"
-
 const ActionButton = ({ children, ...others }) => {
   return (
     <BeamActionButton w={{ base: "200px", md: "223px" }} h="52px" {...others}>
@@ -39,8 +32,6 @@ export const BeamConnetWallet = ({ setBgColor, setHashtags }) => {
   const initLoading = 1
   const toast = useToast()
 
-  const { InternetIdentity, Plug } = AuthProvider
-
   useEffect(() => {
     setBgColor("beam_blue")
     setHashtags([])
@@ -59,10 +50,9 @@ export const BeamConnetWallet = ({ setBgColor, setHashtags }) => {
     onOpen: onSelectAuthOpen,
     onClose: onSelectAuthClose
   } = useDisclosure()
-  const [isLoading, setLoading] = useState(false)
 
   const cancelLogin = () => {
-    setLoading(false)
+    onSelectAuthClose()
   }
 
   const handleAuthUpdate = identity => {
@@ -85,47 +75,6 @@ export const BeamConnetWallet = ({ setBgColor, setHashtags }) => {
     navigateToMyBeams()
   }
 
-  const selectAuth = async authProvider => {
-    onSelectAuthClose()
-
-    switch (authProvider) {
-      case Plug: {
-        const authLogin = createPlugLogin(
-          handleAuthUpdate,
-          authProvider,
-          PlugConfig.whitelist
-        )
-
-        showToast(
-          toast,
-          "Login with Plug",
-          "Please make sure your have unlocked your Plug Wallet.",
-          "info"
-        )
-
-        setLoading(true)
-
-        // Logout the other provider
-        const logoutFunc = makeLogout(InternetIdentity)
-        await logoutFunc()
-
-        await authLogin()
-        break
-      }
-      case InternetIdentity: {
-        const authLogin = createIILogin(handleAuthUpdate, authProvider)
-
-        setLoading(true)
-
-        // Logout the other provider
-        await makeLogout(Plug)
-
-        await authLogin()
-        break
-      }
-    }
-  }
-
   return (
     <VStack
       spacing={{ base: "10px", md: "12px" }}
@@ -165,9 +114,9 @@ export const BeamConnetWallet = ({ setBgColor, setHashtags }) => {
         <BeamSelectWalletModal
           isOpen={isSelectAuthOpen}
           onClose={onSelectAuthClose}
-          selectAuth={selectAuth}
+          handleAuthUpdate={handleAuthUpdate}
         />
-        {isLoading && (
+        {isSelectAuthOpen && (
           <Button
             w="110px"
             h="38px"

diff --git a/ui/components/beam/screen/BeamGetPaid.tsx b/ui/components/beam/screen/BeamGetPaid.tsx
@@ -50,6 +50,7 @@ import { TokenTypeData } from "../../../config"
 import { TokenRadioGroup } from "../common/TokenRadioGroup"
 import { sanitizeJSURL } from "../../../utils/security"
 import { BeamSelectWalletModal } from "../auth/BeamSelectWalletModal"
+import { Identity } from "@dfinity/agent"
 
 const HeadlineStack = () => {
   return (
@@ -231,7 +232,11 @@ export const BeamGetPaid = ({ setBgColor, setHashtags }) => {
     onClose: onSelectAuthClose
   } = useDisclosure()
 
-  const selectAuth = async () => {}
+  const handleAuthUpdate = async (identity: Identity, setFieldValue) => {
+    const principal = await identity.getPrincipal()
+    const principalString = principal.toString()
+    setFieldValue("recipient", principalString)
+  }
 
   return (
     <Box h="100vh">
@@ -313,7 +318,7 @@ export const BeamGetPaid = ({ setBgColor, setHashtags }) => {
                       >
                         <BeamHeading>
                           <HStack>
-                            <Box>Your Plug Wallet</Box>
+                            <Box>Your Wallet</Box>
                             <Spacer />
                             <Button
                               variant="solid"
@@ -327,7 +332,9 @@ export const BeamGetPaid = ({ setBgColor, setHashtags }) => {
                         <BeamSelectWalletModal
                           isOpen={isSelectAuthOpen}
                           onClose={onSelectAuthClose}
-                          selectAuth={selectAuth}
+                          handleAuthUpdate={identity =>
+                            handleAuthUpdate(identity, setFieldValue)
+                          }
                         />
                       </FormInput>
                     )}

diff --git a/ui/components/beam/screen/BeamNewMeeting.tsx b/ui/components/beam/screen/BeamNewMeeting.tsx
@@ -54,6 +54,7 @@ import { TokenTypeData } from "../../../config"
 import { GradientHeading } from "../common/GradientHeading"
 import Image from "next/image"
 import { BeamSelectWalletModal } from "../auth/BeamSelectWalletModal"
+import { Identity } from "@dfinity/agent"
 
 const FormTitle = ({ children, ...rest }) => {
   return (
@@ -313,7 +314,11 @@ export const BeamNewMeeting = ({ setBgColor, setHashtags }) => {
     onClose: onSelectAuthClose
   } = useDisclosure()
 
-  const selectAuth = async () => {}
+  const handleAuthUpdate = async (identity: Identity, setFieldValue) => {
+    const principal = await identity.getPrincipal()
+    const principalString = principal.toString()
+    setFieldValue("recipient", principalString)
+  }
 
   return (
     <Box h="100vh">
@@ -397,7 +402,7 @@ export const BeamNewMeeting = ({ setBgColor, setHashtags }) => {
                       >
                         <FormTitle>
                           <HStack>
-                            <Box>Your Plug Wallet</Box>
+                            <Box>Your Wallet</Box>
                             <Spacer />
                             <Button
                               variant="solid"
@@ -412,7 +417,9 @@ export const BeamNewMeeting = ({ setBgColor, setHashtags }) => {
                         <BeamSelectWalletModal
                           isOpen={isSelectAuthOpen}
                           onClose={onSelectAuthClose}
-                          selectAuth={selectAuth}
+                          handleAuthUpdate={identity =>
+                            handleAuthUpdate(identity, setFieldValue)
+                          }
                         />
                       </FormInput>
                     )}
@@ -492,6 +499,7 @@ export const BeamNewMeeting = ({ setBgColor, setHashtags }) => {
                       <FormInput
                         id="meetingPassword"
                         field={field}
+                        type="password"
                         inputFontSize={{ base: "sm", md: "md" }}
                         themeColor="black_5"
                         placeholder="Zoom Meeting Password"

diff --git a/ui/components/beam/screen/BeamOut.tsx b/ui/components/beam/screen/BeamOut.tsx
@@ -686,10 +686,7 @@ export const BeamOut = ({ setBgColor, setHashtags }: BeamOutInProps) => {
                     <BeamSelectWalletModal
                       isOpen={isSelectAuthOpen}
                       onClose={onSelectAuthClose}
-                      selectAuth={() => {
-                        onSelectAuthClose()
-                        handleSubmit()
-                      }}
+                      handleAuthUpdate={handleSubmit}
                     />
                     {isLoading && (
                       <Button