Ml/nostack 10 22 feat add dependency control pattern

assets/Encrypted.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import Svg, { Path } from "react-native-svg";
 
-interface EncryptedProps {
+type EncryptedProps = {
   width?: number;
   height?: number;
   color?: string;
-}
+};
 
 const Encrypted: React.FC<EncryptedProps> = ({
   width = 40,

components/Banner/AnimatedBanner.tsx

@@ -11,14 +11,14 @@ import Reanimated, {
 
 import Banner from "./Banner";
 
-interface AnimatedBannerProps {
+type AnimatedBannerProps = {
   title: string;
   description: string;
   cta?: string;
   onButtonPress?: () => void;
   onDismiss?: () => void;
   style?: StyleProp<ViewStyle>;
-}
+};
 
 const VERTICAL_MARGIN = Margins.default;
 
@@ -66,8 +66,8 @@ const AnimatedBanner: React.FC<AnimatedBannerProps> = React.memo((props) => {
     height: isAnimating
       ? height.value
       : measuredHeight.current !== null
-      ? height.value
-      : "auto",
+        ? height.value
+        : "auto",
     overflow: "hidden",
   }));
 

components/Banner/Banner.tsx

@@ -19,7 +19,7 @@ import {
   Platform,
 } from "react-native";
 
-interface BannerProps {
+type BannerProps = {
   title: string;
   description: string;
   cta?: string;
@@ -29,7 +29,7 @@ interface BannerProps {
   onDismiss: () => void;
   style?: StyleProp<ViewStyle>;
   onLayout?: (event: LayoutChangeEvent) => void;
-}
+};
 
 const Banner: React.FC<BannerProps> = ({
   title,

components/Chat/ChatNullState.tsx

@@ -1,5 +1,9 @@
 import Recommendations from "@components/Recommendations/Recommendations";
-import { useSettingsStore } from "@data/store/accountsStore";
+import {
+  useSettingsStore,
+  useProfilesStore,
+  useRecommendationsStore,
+} from "@data/store/accountsStore";
 import { translate } from "@i18n/index";
 import {
   backgroundColor,
@@ -14,10 +18,6 @@ import React from "react";
 import { Platform, StyleSheet, Text, useColorScheme, View } from "react-native";
 
 import config from "../../config";
-import {
-  useProfilesStore,
-  useRecommendationsStore,
-} from "../../data/store/accountsStore";
 import { ShareProfileContent } from "../../screens/ShareProfile";
 import {
   getPreferredAvatar,
@@ -27,11 +27,11 @@ import {
 } from "../../utils/profile";
 import NewConversationButton from "../ConversationList/NewConversationButton";
 
-interface ChatNullStateProps {
+type ChatNullStateProps = {
   currentAccount: string;
   navigation: any;
   route: any;
-}
+};
 
 const ChatNullState: React.FC<ChatNullStateProps> = ({
   currentAccount,

components/Chat/Message/MessageReactions/MessageReactionsDrawer/MessageReactions.store.tsx

@@ -9,13 +9,13 @@ const initialMessageReactionsState: RolledUpReactions = {
   detailed: [],
 };
 
-export interface IMessageReactionsStore {
+export type IMessageReactionsStore = {
   rolledUpReactions: RolledUpReactions;
   setRolledUpReactions: (reactions: RolledUpReactions) => void;
 
   // TODO: update state when new reactions come up and drawer is open
   // updateReactions: (updates: Partial<RolledUpReactions>) => void;
-}
+};
 
 export const useMessageReactionsStore = create<IMessageReactionsStore>(
   (set) => ({

components/Chat/Message/MessageTail.tsx

@@ -20,12 +20,12 @@ class MessageTailComponent extends React.Component<SvgProps> {
 const MessageTailAnimated =
   Reanimated.createAnimatedComponent(MessageTailComponent);
 
-interface MessageTailProps {
+type MessageTailProps = {
   fromMe: boolean;
   colorScheme: ColorSchemeName;
   hideBackground: boolean;
   style?: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
-}
+};
 
 const MessageTail: React.FC<MessageTailProps> = ({
   fromMe,
@@ -40,8 +40,8 @@ const MessageTail: React.FC<MessageTailProps> = ({
         hideBackground
           ? "transparent"
           : fromMe
-          ? myMessageBubbleColor(colorScheme)
-          : messageBubbleColor(colorScheme)
+            ? myMessageBubbleColor(colorScheme)
+            : messageBubbleColor(colorScheme)
       }
     />
   );

components/ConversationList/NewConversationButton.tsx

@@ -10,9 +10,11 @@ import Picto from "../Picto/Picto";
 
 export default function NewConversationButton() {
   const colorScheme = useColorScheme();
+
   const onPress = useCallback(() => {
     navigate("NewConversation");
   }, []);
+
   const showDebug = useCallback(() => {
     converseEventEmitter.emit("showDebugMenu");
   }, []);

components/ConversationList/RequestsSegmentedController.tsx

@@ -12,11 +12,11 @@ import {
   useColorScheme,
 } from "react-native";
 
-interface SegmentedControllerProps {
+type SegmentedControllerProps = {
   options: string[];
   selectedIndex: number;
   onSelect: (index: number) => void;
-}
+};
 
 const RequestsSegmentedController: React.FC<SegmentedControllerProps> = ({
   options,

components/Drawer.tsx

@@ -38,27 +38,27 @@ const DRAWER_ANIMATION_DURATION = 300;
 const DRAWER_THRESHOLD = 100;
 const TRANSLATION = 1000;
 
-export interface DrawerProps {
+export type DrawerProps = {
   visible: boolean;
   children: React.ReactNode;
   onClose?: () => void;
   style?: ViewStyle;
   showHandle?: boolean;
-}
+};
 
 export const DrawerContext = React.createContext<{
   closeDrawer: () => void;
 }>({
   closeDrawer: () => {},
 });
 
-export interface DrawerRef {
+export type DrawerRef = {
   /**
    * Will tell the drawer to close, but still needs
    * @returns
    */
   closeDrawer: (callback: () => void) => void;
-}
+};
 
 export const Drawer = forwardRef<DrawerRef, DrawerProps>(function Drawer(
   { children, visible, onClose, style, showHandle },

components/EmojiPicker/EmojiRow.tsx

@@ -2,10 +2,10 @@ import { CategorizedEmojisRecord, Emoji } from "@utils/emojis/interfaces";
 import { FC, memo, useMemo } from "react";
 import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
 
-interface EmojiRowProps {
+type EmojiRowProps = {
   item: CategorizedEmojisRecord;
   onPress: (emoji: string) => void;
-}
+};
 
 export const EmojiRow: FC<EmojiRowProps> = memo(({ item, onPress }) => {
   const items = useMemo(() => {

components/ErroredHeader.tsx

@@ -5,9 +5,9 @@ import { StyleSheet, useColorScheme, View, ViewStyle } from "react-native";
 
 import Picto from "./Picto/Picto";
 
-interface ErroredHeaderProps {
+type ErroredHeaderProps = {
   style?: ViewStyle;
-}
+};
 
 export const ErroredHeader: FC<ErroredHeaderProps> = ({ style }) => {
   const colorScheme = useColorScheme();

components/Onboarding/ConnectViaWallet/useConnectViaWalletDisconnect.tsx

@@ -31,7 +31,7 @@ export function useConnectViaWalletDisconnect() {
 
       logger.debug("[Connect Wallet] Disconnected");
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+
     [thirdwebWallet]
   );
 }

components/Screen/ScreenComp/Screen.props.tsx

@@ -3,7 +3,7 @@ import { ScrollViewProps, StyleProp, ViewStyle } from "react-native";
 
 import { ExtendedEdge } from "./Screen.helpers";
 
-interface BaseScreenProps {
+type BaseScreenProps = {
   /**
    * Children components.
    */
@@ -40,13 +40,13 @@ interface BaseScreenProps {
    * By how much should we offset the keyboard? Defaults to 0.
    */
   keyboardOffset?: number;
-}
+};
 
-export interface FixedScreenProps extends BaseScreenProps {
+export type FixedScreenProps = {
   preset?: "fixed";
-}
+} & BaseScreenProps;
 
-export interface ScrollScreenProps extends BaseScreenProps {
+export type ScrollScreenProps = {
   preset?: "scroll";
   /**
    * Should keyboard persist on screen tap. Defaults to handled.
@@ -57,16 +57,16 @@ export interface ScrollScreenProps extends BaseScreenProps {
    * Pass any additional props directly to the ScrollView component.
    */
   ScrollViewProps?: ScrollViewProps;
-}
+} & BaseScreenProps;
 
-export interface AutoScreenProps extends Omit<ScrollScreenProps, "preset"> {
+export type AutoScreenProps = {
   preset?: "auto";
   /**
    * Threshold to trigger the automatic disabling/enabling of scroll ability.
    * Defaults to `{ percent: 0.92 }`.
    */
   scrollEnabledToggleThreshold?: { percent?: number; point?: number };
-}
+} & Omit<ScrollScreenProps, "preset">;
 
 export type IScreenProps =
   | ScrollScreenProps

components/Snackbar/Snackbar.store.ts

@@ -2,11 +2,11 @@ import { ISnackbar } from "@components/Snackbar/Snackbar.types";
 import { create } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
 
-export interface ISnackBarStore {
+export type ISnackBarStore = {
   snackbars: ISnackbar[];
   showSnackbar: (snackbar: ISnackbar) => void;
   clearAllSnackbars: () => void;
-}
+};
 
 export const useSnackBarStore = create<ISnackBarStore>()(
   subscribeWithSelector((set) => ({

components/Snackbar/Snackbar.tsx

@@ -3,6 +3,7 @@ import {
   SNACKBAR_BOTTOM_OFFSET,
   SNACKBAR_HEIGHT,
   SNACKBAR_LARGE_TEXT_HEIGHT,
+  SNACKBAR_SPACE_BETWEEN_SNACKBARS,
 } from "@components/Snackbar/Snackbar.constants";
 import {
   getNumberOfSnackbars,
@@ -28,7 +29,6 @@ import {
   withSpring,
   withTiming,
 } from "react-native-reanimated";
-import { SNACKBAR_SPACE_BETWEEN_SNACKBARS } from "./Snackbar.constants";
 
 type SnackbarProps = {
   snackbar: ISnackbar;

components/TransactionPreview/TransactionSimulationResult.tsx

@@ -24,6 +24,7 @@ export const SimulationResult = ({
 }: SimulationResultProps) => {
   const profiles = useProfilesStore((s) => s.profiles);
   const accountAddress = useCurrentAccount() as string;
+
   const myChanges = useMemo(() => {
     const myAddresses = [accountAddress.toLowerCase()];
     if (walletAddress) {

data/store/accountsStore.ts

@@ -9,13 +9,17 @@ import {
   initRecommendationsStore,
   RecommendationsStoreType,
 } from "./recommendationsStore";
-import { initSettingsStore, SettingsStoreType } from "./settingsStore";
+import {
+  GroupStatus,
+  initSettingsStore,
+  SettingsStoreType,
+} from "./settingsStore";
 import {
   initTransactionsStore,
   TransactionsStoreType,
 } from "./transactionsStore";
 import { initWalletStore, WalletStoreType } from "./walletStore";
-import { removeLogoutTask } from "../../utils/logout";
+import { removeLogoutTask } from "@utils/logout";
 import mmkv, { zustandMMKVStorage } from "../../utils/mmkv";
 
 type AccountStoreType = {
@@ -230,8 +234,37 @@ const getAccountStore = (account: string) => {
   }
 };
 
-export const currentAccount = () => useAccountsStore.getState().currentAccount;
+export const currentAccount = (): string =>
+  (useAccountsStore.getState() as AccountsStoreStype).currentAccount;
+
+//
+/**
+ * TODO: determine if this is the way we want to transition to imperatively
+ * calling our Zustand store.
+ * TODO: move this to a different file
+ *
+ * It isn't very ergonomic and mocking things seems a little difficult.
+ *
+ * We might want to look into creating a subscription to our stores and a
+ * behavior subject by which to observe it across the app.
+ *
+ * Set the group status for the current account
+ * @param groupStatus The group status to set
+ */
+export const setGroupStatus = (groupStatus: GroupStatus) => {
+  const account = currentAccount();
+  if (!account) {
+    logger.warn("[setGroupStatus] No current account");
+    return;
+  }
+  const setGroupStatus = getSettingsStore(account).getState().setGroupStatus;
+  setGroupStatus(groupStatus);
+};
 
+// we'll be able to create a subscription to our stores and a behavior subject
+// by which to observe it across the app
+// We'll seed the behaviorsubject with the getState.value api
+// export const _currentAccount = () => useAccountsStore.subscribe((s) => s.);
 export const useCurrentAccount = () => {
   const currentAccount = useAccountsStore((s) => s.currentAccount);
   return currentAccount === TEMPORARY_ACCOUNT_NAME ? undefined : currentAccount;

data/store/authStore.ts

@@ -3,9 +3,9 @@ import { subscribeWithSelector } from "zustand/middleware";
 
 export type IAuthStatus = "idle" | "signedOut" | "signedIn";
 
-export interface IAuthStore {
+export type IAuthStore = {
   status: IAuthStatus;
-}
+};
 
 export const useAuthStore = create<IAuthStore>()(
   subscribeWithSelector((set, get) => ({

data/store/settingsStore.ts

@@ -34,9 +34,7 @@ export type SettingsStoreType = {
   }) => void;
 
   groupStatus: GroupStatus;
-  setGroupStatus: (groupStatus: {
-    [groupId: string]: "allowed" | "denied";
-  }) => void;
+  setGroupStatus: (groupStatus: GroupStatus) => void;
 
   ephemeralAccount: boolean;
   setEphemeralAccount: (ephemeral: boolean) => void;