fix: add auth loading stae in modal

showtime-xyz · Nov 16, 2023 · dadfa4a · dadfa4a
1 parent 1916e09
commit dadfa4a
Showing 1 changed file with 29 additions and 2 deletions.
diff --git a/packages/app/components/login/index.web.tsx b/packages/app/components/login/index.web.tsx
@@ -5,16 +5,19 @@ import { PortalProvider } from "@gorhom/portal";
 import { usePrivy } from "@privy-io/react-auth";
 
 import { Button } from "@showtime-xyz/universal.button";
+import { useIsDarkMode } from "@showtime-xyz/universal.hooks";
+import { Ethereum } from "@showtime-xyz/universal.icon";
 import { useModalScreenContext } from "@showtime-xyz/universal.modal-screen";
 import { useRouter } from "@showtime-xyz/universal.router";
 import { ScrollView } from "@showtime-xyz/universal.scroll-view";
+import Spinner from "@showtime-xyz/universal.spinner";
+import { colors } from "@showtime-xyz/universal.tailwind";
 import { Text } from "@showtime-xyz/universal.text";
 import { View } from "@showtime-xyz/universal.view";
 
 import { usePreviousValue } from "app/hooks/use-previous-value";
 import { useUser } from "app/hooks/use-user";
 
-import { ConnectButton } from "../connect-button";
 import { useLogin } from "./use-login";
 
 export function Login() {
@@ -49,6 +52,8 @@ export function Login() {
     }
   }, [router, user, prevUser]);
 
+  const isDark = useIsDarkMode();
+
   return (
     <PortalProvider>
       <ScrollView style={styles.container}>
@@ -79,6 +84,8 @@ export function Login() {
           <View tw="p-4">
             <Button
               size="regular"
+              tw={`${loading ? "opacity-[0.5]" : ""}`}
+              disabled={loading}
               onPress={async () => {
                 if (privy.authenticated) {
                   await privy.logout();
@@ -88,9 +95,29 @@ export function Login() {
             >
               Phone & Social
             </Button>
-            <ConnectButton handleSubmitWallet={handleSubmitWallet} />
+            <Button
+              size="regular"
+              variant="primary"
+              tw={`my-2 ${loading ? "opacity-[0.5]" : ""}`}
+              disabled={loading}
+              onPress={handleSubmitWallet}
+            >
+              <View tw="absolute left-4 top-3">
+                <Ethereum
+                  width={24}
+                  height={24}
+                  color={isDark ? colors.black : colors.white}
+                />
+              </View>
+              Connect
+            </Button>
           </View>
         )}
+        {loading ? (
+          <View tw="my-2 items-center">
+            <Spinner />
+          </View>
+        ) : null}
       </ScrollView>
     </PortalProvider>
   );