chore: hide connected apps tab

packages/app/components/edit-profile.tsx

@@ -1,4 +1,10 @@
-import React, { useEffect, useMemo, useState, useRef } from "react";
+import React, {
+  useEffect,
+  useMemo,
+  useState,
+  useRef,
+  useCallback,
+} from "react";
 import {
   Platform,
   useWindowDimensions,
@@ -11,6 +17,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { Controller, useForm } from "react-hook-form";
 import { useSWRConfig } from "swr";
 
+import { useAlert } from "@showtime-xyz/universal.alert";
 import { BottomSheetModalProvider } from "@showtime-xyz/universal.bottom-sheet";
 import { Button } from "@showtime-xyz/universal.button";
 import { ErrorText, Fieldset } from "@showtime-xyz/universal.fieldset";
@@ -34,6 +41,9 @@ import { BottomSheetScrollView } from "app/components/bottom-sheet-scroll-view";
 import { getLocalFileURI, Preview } from "app/components/preview";
 import { USER_PROFILE_KEY } from "app/hooks/api-hooks";
 import { useAddMagicSocialAccount } from "app/hooks/use-add-magic-social-account";
+import { useDisconnectInstagram } from "app/hooks/use-disconnect-instagram";
+import { useDisconnectTwitter } from "app/hooks/use-disconnect-twitter";
+import { useListSocialAccounts } from "app/hooks/use-list-social-accounts";
 import { useMatchMutate } from "app/hooks/use-match-mutate";
 import { useUser } from "app/hooks/use-user";
 import { useValidateUsername } from "app/hooks/use-validate-username";
@@ -261,6 +271,20 @@ export const EditProfile = () => {
     () => (width < 768 ? width / 3 : 160),
     [width]
   );
+  const accounts = useListSocialAccounts();
+
+  const [instagramProviderId, twitterProviderId] = useMemo(() => {
+    let data: any = [];
+    accounts.data?.forEach((v) => {
+      if (v.provider === "instagram") {
+        data[0] = v.provider_account_id;
+      }
+      if (v.provider === "twitter") {
+        data[1] = v.provider_account_id;
+      }
+    });
+    return data;
+  }, [accounts.data]);
 
   return (
     <>
@@ -531,6 +555,7 @@ export const EditProfile = () => {
                     </View>
                     <ConnectButton
                       type="twitter"
+                      providerId={twitterProviderId}
                       isConnected={
                         user?.data?.profile?.social_login_connections?.twitter
                       }
@@ -548,6 +573,7 @@ export const EditProfile = () => {
                     </View>
                     <ConnectButton
                       type="instagram"
+                      providerId={instagramProviderId}
                       isConnected={
                         user?.data?.profile?.social_login_connections?.instagram
                       }
@@ -623,25 +649,73 @@ const ConnectButton = ({
   type,
   isConnected,
   handle,
+  providerId,
 }: {
   type: "apple" | "google" | "instagram" | "twitter";
   isConnected?: boolean;
   handle?: string | null;
+  providerId: any;
 }) => {
   const isDark = useIsDarkMode();
   const { trigger, isMutating } = useAddMagicSocialAccount();
+  const { trigger: disconnectTwitter, isMutating: isDisconnectingTwitter } =
+    useDisconnectTwitter();
+  const { trigger: disconnectInstagram, isMutating: isDisconnectingInstagram } =
+    useDisconnectInstagram();
+  const Alert = useAlert();
+
+  const handlePress = useCallback(async () => {
+    if (isConnected) {
+      Alert.alert(
+        "Disconnect " + type,
+        "Are you sure you want to disconnect this social account?",
+        [
+          {
+            text: "Cancel",
+          },
+          {
+            text: "Disconnect",
+            style: "destructive",
+            onPress: async () => {
+              if (type === "twitter") {
+                await disconnectTwitter({
+                  providerId,
+                });
+              } else if (type === "instagram") {
+                await disconnectInstagram({
+                  providerId,
+                  provider: "instagram",
+                });
+              }
+            },
+          },
+        ]
+      );
+    } else {
+      try {
+        await trigger({
+          type,
+        });
+      } catch {
+        // do nothing
+      }
+    }
+  }, [
+    Alert,
+    disconnectInstagram,
+    disconnectTwitter,
+    isConnected,
+    providerId,
+    trigger,
+    type,
+  ]);
+
   return (
     <PressableHover
-      onPress={async () => {
-        try {
-          await trigger({
-            type,
-          });
-        } catch {
-          // do nothing
-        }
-      }}
-      disabled={isConnected || isMutating}
+      onPress={handlePress}
+      disabled={
+        isMutating || isDisconnectingInstagram || isDisconnectingTwitter
+      }
       tw={"items-center justify-center"}
     >
       <View
@@ -667,7 +741,7 @@ const ConnectButton = ({
                 : "text-black dark:text-white"
             }`}
           >
-            {isMutating
+            {isMutating || isDisconnectingInstagram || isDisconnectingTwitter
               ? "Loading..."
               : isConnected
               ? `@${handle}` ?? "Connected"

packages/app/components/header/notifications-setting-icon.tsx

@@ -1,5 +1,3 @@
-import { Platform } from "react-native";
-
 import { useIsDarkMode } from "@showtime-xyz/universal.hooks";
 import { Settings } from "@showtime-xyz/universal.icon";
 import { PressableScale } from "@showtime-xyz/universal.pressable-scale";
@@ -8,11 +6,10 @@ import { useRouter } from "@showtime-xyz/universal.router";
 export const NotificationsSettingIcon = ({ size = 24 }) => {
   const router = useRouter();
   const isDark = useIsDarkMode();
-  const tabIndex = Platform.OS === "web" ? 2 : 1;
   return (
     <PressableScale
       onPress={() => {
-        router.push(`/settings?tab=${tabIndex}`);
+        router.push(`/settings?tab=1`);
       }}
       tw="h-8 w-8 items-center justify-center rounded-full"
     >

packages/app/components/settings/tabs/index.tsx

@@ -29,7 +29,7 @@ export const SETTINGS_ROUTES = [
   {
     title: "Connected Apps",
     key: "Account",
-    hidden: Platform.OS !== "web",
+    hidden: true,
   },
   {
     title: "Notifications",

packages/app/hooks/use-wallet/use-wallet.web.ts

@@ -13,7 +13,6 @@ const useWallet = (): UseWalletReturnType => {
   const privy = usePrivy();
   const wallets = useWallets();
   const latestConnectedWallet = useLatestValueRef(wallets.wallets[0]);
-  console.log("connected wallets ", wallets);
   useConnectWallet({
     onSuccess: (wallet) => {
       console.log("wallet connect success", wallet);
@@ -59,7 +58,6 @@ const useWallet = (): UseWalletReturnType => {
     };
   }, [connected, disconnect, privy, latestConnectedWallet, wallets.wallets]);
 
-  console.log("wallet address ", result.address);
   return result;
 };