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

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/components/toasts/MiniToast.tsx

@@ -0,0 +1,138 @@
+import React from "react";
+import { View, useWindowDimensions } from "react-native";
+
+import { Spinner } from "../Spinner";
+import { CustomPressable } from "../buttons/CustomPressable";
+
+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 interface MiniToastProps {
+  type?: ToastStatusType;
+  message: string;
+  variant?: ToastVariantType;
+  topOffset?: number;
+  showAlways?: boolean;
+  onPress?: () => void;
+}
+
+const getColors = (type: ToastStatusType) => {
+  switch (type) {
+    case "error":
+      return toastRed;
+    case "success":
+      return toastGreen;
+    case "warning":
+      return toastOrange;
+    case "loading":
+      return blueDefault;
+    default:
+      return blueDefault;
+  }
+};
+
+const getIcons = (type: ToastStatusType, variant: ToastVariantType) => {
+  switch (type) {
+    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 = ({
+  type = "info",
+  message,
+  variant = "solid",
+  topOffset = 70,
+  onPress,
+}: MiniToastProps) => {
+  const { width: windowWidth } = useWindowDimensions();
+
+  if (!message) {
+    return null;
+  }
+
+  const onToastPress = () => {
+    if (onPress) {
+      onPress();
+    }
+  };
+
+  return (
+    <CustomPressable
+      onPress={onToastPress}
+      style={{
+        position: "absolute",
+        top: topOffset || 70,
+        maxWidth: windowWidth - 40,
+        zIndex: 50000,
+        alignSelf: "center",
+      }}
+    >
+      <View
+        style={{
+          backgroundColor: variant === "outline" ? neutral00 : getColors(type),
+          borderColor: getColors(type),
+          borderWidth: 1,
+          borderStyle: "solid",
+          borderRadius: variant === "outline" ? 32 : 10,
+          paddingHorizontal: layout.spacing_x2,
+          paddingVertical: layout.spacing_x1_5,
+          flexDirection: "row",
+          gap: layout.spacing_x1,
+        }}
+      >
+        {type === "loading" ? (
+          <Spinner svg={getIcons(type, variant)} size={16} />
+        ) : (
+          <SVG
+            source={getIcons(type, variant)}
+            height={16}
+            width={16}
+            style={{ flexShrink: 0 }}
+          />
+        )}
+        <BrandText
+          style={[
+            fontSemibold14,
+            {
+              lineHeight: 16,
+              paddingRight: layout.spacing_x2,
+              maxWidth: "100%",
+            },
+          ]}
+        >
+          {message}
+        </BrandText>
+      </View>
+    </CustomPressable>
+  );
+};

packages/components/toasts/NormalToast.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { TouchableOpacity, useWindowDimensions, View } from "react-native";
+
+import warningSVG from "../../../assets/icons/warning.svg";
+import {
+  errorColor,
+  neutral11,
+  neutral77,
+  successColor,
+} from "../../utils/style/colors";
+import { BrandText } from "../BrandText";
+import { SVG } from "../SVG";
+import { Box } from "../boxes/Box";
+import { SpacerRow } from "../spacer";
+
+const marginHorizontal = 24;
+
+export interface NormalToastProps {
+  title: string;
+  message?: string;
+  onPress?: () => void;
+  type?: "error" | "success";
+  topOffset?: number;
+}
+
+export const NormalToast: React.FC<NormalToastProps> = ({
+  title,
+  message,
+  onPress,
+  type,
+  topOffset = 24,
+}) => {
+  const width = 432;
+  const { width: windowWidth } = useWindowDimensions();
+
+  const maxWidth = width < windowWidth ? width : windowWidth - marginHorizontal;
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={{
+        maxWidth,
+        width,
+        height: "auto",
+        position: "absolute",
+        top: topOffset,
+        left: windowWidth / 2 - maxWidth / 2,
+        zIndex: 999,
+      }}
+    >
+      <Box
+        notched
+        style={{
+          width: "100%",
+          height: "100%",
+          flexDirection: "row",
+          alignItems: "center",
+          backgroundColor: neutral11,
+          borderColor: type === "error" ? errorColor : successColor,
+          borderWidth: 1,
+        }}
+      >
+        {type === "error" && (
+          <>
+            <SpacerRow size={3} />
+            <SVG width={24} height={24} source={warningSVG} />
+          </>
+        )}
+        <SpacerRow size={3} />
+        <View
+          style={{ width: width - marginHorizontal * 2, marginVertical: 12 }}
+        >
+          <BrandText style={{ fontSize: 13, lineHeight: 20 }}>
+            {title}
+          </BrandText>
+          {message ? (
+            <BrandText
+              style={{ fontSize: 13, lineHeight: 15, color: neutral77 }}
+            >
+              {message}
+            </BrandText>
+          ) : null}
+        </View>
+      </Box>
+    </TouchableOpacity>
+  );
+};