feat: rework toasts api and add mini mode support in toasts

Root.tsx

@@ -30,6 +30,7 @@ import { MessageContextProvider } from "./packages/context/MessageProvider";
 import { SearchBarContextProvider } from "./packages/context/SearchBarProvider";
 import { TNSMetaDataListContextProvider } from "./packages/context/TNSMetaDataListProvider";
 import { TNSContextProvider } from "./packages/context/TNSProvider";
+import { ToastContextProvider } from "./packages/context/ToastProvider";
 import { TransactionModalsProvider } from "./packages/context/TransactionModalsProvider";
 import { WalletControlContextProvider } from "./packages/context/WalletControlProvider";
 import {
@@ -111,7 +112,9 @@ export default function App() {
                                         <MessageContextProvider>
                                           <MediaPlayerContextProvider>
                                             <StatusBar style="inverted" />
-                                            <Navigator />
+                                            <ToastContextProvider>
+                                              <Navigator />
+                                            </ToastContextProvider>
                                           </MediaPlayerContextProvider>
                                         </MessageContextProvider>
                                       </MenuProvider>

packages/components/MiniToast.tsx

@@ -0,0 +1,126 @@
+import React from "react";
+import { View, useWindowDimensions } from "react-native";
+
+import { Spinner } from "./Spinner";
+
+import checkWhiteSVG from "@/assets/icons/toast/check-circular-white.svg";
+import checkSVG from "@/assets/icons/toast/check-green.svg";
+import crossRedSVG from "@/assets/icons/toast/cross-red.svg";
+import crossWhiteSVG from "@/assets/icons/toast/cross-white.svg";
+import infoBlueSVG from "@/assets/icons/toast/info-circle-blue.svg";
+import infoWhiteSVG from "@/assets/icons/toast/info-circle-white.svg";
+import loaderBlueSVG from "@/assets/icons/toast/loader-blue.svg";
+import loaderWhiteSVG from "@/assets/icons/toast/loader-white.svg";
+import warningOrangeSVG from "@/assets/icons/toast/warning-orange.svg";
+import warningWhiteSVG from "@/assets/icons/toast/warning-white.svg";
+import { BrandText } from "@/components/BrandText";
+import { SVG } from "@/components/SVG";
+import {
+  blueDefault,
+  neutral00,
+  toastGreen,
+  toastOrange,
+  toastRed,
+} from "@/utils/style/colors";
+import { fontSemibold14 } from "@/utils/style/fonts";
+import { layout } from "@/utils/style/layout";
+
+type ToastStatusType = "info" | "success" | "error" | "warning" | "loading";
+type ToastVariantType = "solid" | "outline";
+
+export type MiniToastProps = {
+  status?: ToastStatusType;
+  message: string | null;
+  variant?: ToastVariantType;
+  duration?: number;
+  topOffSet?: number;
+  showAlways?: boolean;
+};
+
+const getColors = (status: ToastStatusType) => {
+  switch (status) {
+    case "error":
+      return toastRed;
+    case "success":
+      return toastGreen;
+    case "warning":
+      return toastOrange;
+    case "loading":
+      return blueDefault;
+    default:
+      return blueDefault;
+  }
+};
+
+const getIcons = (status: ToastStatusType, variant: ToastVariantType) => {
+  switch (status) {
+    case "error":
+      return variant === "outline" ? crossRedSVG : crossWhiteSVG;
+    case "success":
+      return variant === "outline" ? checkSVG : checkWhiteSVG;
+    case "warning":
+      return variant === "outline" ? warningOrangeSVG : warningWhiteSVG;
+    case "loading":
+      return variant === "outline" ? loaderBlueSVG : loaderWhiteSVG;
+    default:
+      return variant === "outline" ? infoBlueSVG : infoWhiteSVG;
+  }
+};
+export const MiniToast = ({
+  status = "info",
+  message,
+  variant = "solid",
+  duration = 3000,
+  topOffSet = 70,
+  showAlways = false,
+}: MiniToastProps) => {
+  const { width: windowWidth } = useWindowDimensions();
+
+  if (!message) {
+    return null;
+  }
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        top: topOffSet || 70,
+        maxWidth: windowWidth - 40,
+        zIndex: 50000,
+        alignSelf: "center",
+        backgroundColor: variant === "outline" ? neutral00 : getColors(status),
+        borderColor: getColors(status),
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderRadius: variant === "outline" ? 32 : 10,
+        paddingHorizontal: layout.spacing_x2,
+        paddingVertical: layout.spacing_x1_5,
+        flexDirection: "row",
+        gap: layout.spacing_x1,
+      }}
+    >
+      {status === "loading" ? (
+        <Spinner svg={getIcons(status, variant)} size={16} />
+      ) : (
+        <SVG
+          source={getIcons(status, variant)}
+          height={16}
+          width={16}
+          style={{ flexShrink: 0 }}
+        />
+      )}
+      <BrandText
+        style={[
+          fontSemibold14,
+          {
+            lineHeight: 16,
+            paddingRight: layout.spacing_x2,
+            maxWidth: "100%",
+          },
+        ]}
+      >
+        {message}
+      </BrandText>
+    </View>
+  );
+};

packages/components/Spinner.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { View } from "react-native";
 import Animated, {
   Easing,
@@ -7,23 +7,30 @@ import Animated, {
   withRepeat,
   withTiming,
 } from "react-native-reanimated";
+import { SvgProps } from "react-native-svg";
 
 import { SVG } from "./SVG";
 
 import refreshSVG from "@/assets/icons/refresh-white.svg";
 
 const SVG_SIZE = 20;
-
-export const Spinner = () => {
+type SpinnerProps = {
+  svg?: React.FC<SvgProps>;
+  size?: number;
+};
+export const Spinner = ({ size, svg }: SpinnerProps) => {
   const rotate = useSharedValue(0);
 
-  rotate.value = withRepeat(
-    withTiming(360, {
-      duration: 1000,
-      easing: Easing.linear,
-    }),
-    -1,
-  );
+  useEffect(() => {
+    rotate.value = withRepeat(
+      withTiming(360, {
+        duration: 1000,
+        easing: Easing.linear,
+      }),
+      -1,
+    );
+  }, [rotate]);
+
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [{ rotate: `${rotate.value}deg` }],
@@ -32,9 +39,16 @@ export const Spinner = () => {
   return (
     <View>
       <Animated.View
-        style={[animatedStyle, { height: SVG_SIZE, width: SVG_SIZE }]}
+        style={[
+          animatedStyle,
+          { height: size || SVG_SIZE, width: size || SVG_SIZE },
+        ]}
       >
-        <SVG source={refreshSVG} width={SVG_SIZE} height={SVG_SIZE} />
+        <SVG
+          source={svg || refreshSVG}
+          width={size || SVG_SIZE}
+          height={size || SVG_SIZE}
+        />
       </Animated.View>
     </View>
   );

packages/context/ToastProvider.tsx

@@ -0,0 +1,46 @@
+import {
+  ReactNode,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+import { MiniToastProps, MiniToast } from "@/components/MiniToast";
+
+interface DefaultValues {
+  toast: MiniToastProps;
+  setToast: (data: MiniToastProps) => void;
+}
+
+const defaultValues: DefaultValues = {
+  toast: { message: "" },
+  setToast: () => {},
+};
+
+const ToastContext = createContext(defaultValues);
+
+export const useToast = () => useContext(ToastContext);
+
+export const ToastContextProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [toast, setToast] = useState<MiniToastProps>(defaultValues.toast);
+
+  useEffect(() => {
+    //always show toast when showAlways flag is enabled or status is loading
+    if (!toast.showAlways && toast.status !== "loading") {
+      const timeoutID = setTimeout(() => {
+        setToast(defaultValues.toast);
+      }, toast.duration || 5000);
+
+      return () => clearTimeout(timeoutID);
+    }
+  }, [toast]);
+  return (
+    <ToastContext.Provider value={{ setToast, toast }}>
+      <MiniToast {...toast} />
+      {children}
+    </ToastContext.Provider>
+  );
+};

packages/screens/Mini/Chat/MiniFriendScreen.tsx

@@ -32,7 +32,7 @@ import {
 import { bytesFromString } from "../../../weshnet/utils";
 import { CustomButton } from "../components/Button/CustomButton";
 import MiniTextInput from "../components/MiniTextInput";
-import MiniToast from "../components/MiniToast";
+import MiniToastWithAction from "../components/MiniToastWithAction";
 import { BlurScreenContainer } from "../layout/BlurScreenContainer";
 
 type ToastType = {
@@ -54,7 +54,7 @@ export const MiniFriendScreen: ScreenFC<"MiniFriend"> = ({ navigation }) => {
       title="Friend Requests"
       customHeader={
         openToast.type && (
-          <MiniToast
+          <MiniToastWithAction
             message={openToast.message}
             type={openToast.type ?? "info"}
             onClose={() => setOpenToast({ type: undefined, message: "" })}