Add Privy login methods to HeaderMd and Login (#2552)

components
showtime-xyz · Nov 23, 2023 · 409aa88 · 409aa88
1 parent a8a5624
commit 409aa88
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 10 deletions.
diff --git a/packages/app/components/header/header.md.web.tsx b/packages/app/components/header/header.md.web.tsx
@@ -1,4 +1,11 @@
-import { useEffect, useRef, useState, Suspense, useMemo } from "react";
+import {
+  useEffect,
+  useRef,
+  useState,
+  Suspense,
+  useMemo,
+  useContext,
+} from "react";
 import { Platform, useWindowDimensions } from "react-native";
 
 import { usePrivy } from "@privy-io/react-auth";
@@ -49,6 +56,7 @@ import { downloadCollectorList } from "app/hooks/use-download-collector-list";
 import { useFooter } from "app/hooks/use-footer";
 import { useNotifications } from "app/hooks/use-notifications";
 import { useUser } from "app/hooks/use-user";
+import { PrivySetLoginMethodContext } from "app/lib/privy/privy-provider.web";
 import { Link, TextLink } from "app/navigation/link";
 import { useNavigateToLogin } from "app/navigation/use-navigate-to";
 
@@ -235,7 +243,7 @@ const ChannelsUnreadMessages = () => {
 
 export const HeaderMd = withColorScheme(() => {
   const { user, isAuthenticated } = useUser();
-  const { handleSubmitWallet, loading: loginLoading } = useLogin();
+  const { loading: loginLoading } = useLogin();
   const { links, social } = useFooter();
   const isDark = useIsDarkMode();
   const router = useRouter();
@@ -314,6 +322,7 @@ export const HeaderMd = withColorScheme(() => {
     ]
   );
 
+  const privyLoginMethodContext = useContext(PrivySetLoginMethodContext);
   return (
     <View tw="fixed top-0 h-full bg-white pl-2 dark:bg-black">
       <View tw="h-full min-h-screen w-60 overflow-y-auto pl-4">
@@ -564,7 +573,10 @@ export const HeaderMd = withColorScheme(() => {
                   if (privy.authenticated) {
                     await privy.logout();
                   }
-                  privy.login();
+                  privyLoginMethodContext.setLoginMethods(["wallet"]);
+                  setTimeout(() => {
+                    privy.login();
+                  });
                 }}
                 disabled={loginLoading}
               >
@@ -582,7 +594,14 @@ export const HeaderMd = withColorScheme(() => {
                   if (privy.authenticated) {
                     await privy.logout();
                   }
-                  privy.login();
+                  privyLoginMethodContext.setLoginMethods([
+                    "sms",
+                    "google",
+                    "apple",
+                  ]);
+                  setTimeout(() => {
+                    privy.login();
+                  });
                 }}
               >
                 <>

diff --git a/packages/app/components/login/index.web.tsx b/packages/app/components/login/index.web.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useContext } from "react";
 import { StyleSheet } from "react-native";
 
 import { PortalProvider } from "@gorhom/portal";
@@ -17,6 +17,7 @@ import { View } from "@showtime-xyz/universal.view";
 
 import { usePreviousValue } from "app/hooks/use-previous-value";
 import { useUser } from "app/hooks/use-user";
+import { PrivySetLoginMethodContext } from "app/lib/privy/privy-provider.web";
 
 import { useLogin } from "./use-login";
 
@@ -35,6 +36,7 @@ export function Login() {
   const prevUser = usePreviousValue(user);
   //#endregion
   const modalScreenContext = useModalScreenContext();
+  const privyLoginMethodContext = useContext(PrivySetLoginMethodContext);
 
   useEffect(() => {
     if (showSignMessage) {
@@ -89,7 +91,14 @@ export function Login() {
                 if (privy.authenticated) {
                   await privy.logout();
                 }
-                privy.login();
+                privyLoginMethodContext.setLoginMethods([
+                  "sms",
+                  "google",
+                  "apple",
+                ]);
+                setTimeout(() => {
+                  privy.login();
+                });
               }}
             >
               Phone & Social
@@ -103,7 +112,10 @@ export function Login() {
                 if (privy.authenticated) {
                   await privy.logout();
                 }
-                privy.login();
+                privyLoginMethodContext.setLoginMethods(["wallet"]);
+                setTimeout(() => {
+                  privy.login();
+                });
               }}
             >
               <View tw="absolute left-4 top-3">

diff --git a/packages/app/lib/privy/privy-provider.web.tsx b/packages/app/lib/privy/privy-provider.web.tsx
@@ -1,4 +1,11 @@
-import { forwardRef, useRef, useEffect } from "react";
+import {
+  forwardRef,
+  useRef,
+  useEffect,
+  useState,
+  useContext,
+  createContext,
+} from "react";
 
 import {
   PrivyProvider as PrivyProviderImpl,
@@ -15,13 +22,22 @@ import { baseChain } from "app/hooks/creator-token/utils";
 import { useStableCallback } from "app/hooks/use-stable-callback";
 import { useWallet } from "app/hooks/use-wallet";
 
+export const PrivySetLoginMethodContext = createContext<any>(null);
+
 export const PrivyProvider = ({ children }: any) => {
   const colorScheme = useIsDarkMode() ? "dark" : "light";
+  const [loginMethods, setLoginMethods] = useState<any>([
+    "wallet",
+    "sms",
+    "google",
+    "apple",
+  ] as const);
+
   return (
     <PrivyProviderImpl
       appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
       config={{
-        loginMethods: ["wallet", "sms", "google", "apple"],
+        loginMethods: loginMethods,
         defaultChain: baseChain,
         embeddedWallets: {
           noPromptOnSignature: true,
@@ -35,7 +51,9 @@ export const PrivyProvider = ({ children }: any) => {
         },
       }}
     >
-      {children}
+      <PrivySetLoginMethodContext.Provider value={{ setLoginMethods }}>
+        {children}
+      </PrivySetLoginMethodContext.Provider>
     </PrivyProviderImpl>
   );
 };