From 35088528a627d5b0f824423f1ab29f1c9bcd762d Mon Sep 17 00:00:00 2001 From: Sachin Date: Wed, 21 Feb 2024 17:14:11 +0545 Subject: [PATCH 01/22] feat:created toast component for mini mode and added icons and colors required for it and, created ToastProvider component --- Root.tsx | 5 +- assets/icons/toast/check-circular-white.svg | 11 ++ assets/icons/toast/check-green.svg | 11 ++ assets/icons/toast/cross-red.svg | 3 + assets/icons/toast/cross-white.svg | 3 + assets/icons/toast/info-circle-blue.svg | 7 + assets/icons/toast/info-circle-white.svg | 7 + assets/icons/toast/loader-blue.svg | 11 ++ assets/icons/toast/loader-white.svg | 11 ++ assets/icons/toast/warning-orange.svg | 5 + assets/icons/toast/warning-white.svg | 5 + packages/components/MiniToast.tsx | 141 ++++++++++++++++++ packages/components/Spinner.tsx | 38 +++-- packages/context/ToastProvider.tsx | 30 ++++ .../screens/Mini/Chat/MiniFriendScreen.tsx | 4 +- ...{MiniToast.tsx => MiniToastWithAction.tsx} | 2 +- packages/utils/style/colors.ts | 3 + 17 files changed, 281 insertions(+), 16 deletions(-) create mode 100644 assets/icons/toast/check-circular-white.svg create mode 100644 assets/icons/toast/check-green.svg create mode 100644 assets/icons/toast/cross-red.svg create mode 100644 assets/icons/toast/cross-white.svg create mode 100644 assets/icons/toast/info-circle-blue.svg create mode 100644 assets/icons/toast/info-circle-white.svg create mode 100644 assets/icons/toast/loader-blue.svg create mode 100644 assets/icons/toast/loader-white.svg create mode 100644 assets/icons/toast/warning-orange.svg create mode 100644 assets/icons/toast/warning-white.svg create mode 100644 packages/components/MiniToast.tsx create mode 100644 packages/context/ToastProvider.tsx rename packages/screens/Mini/components/{MiniToast.tsx => MiniToastWithAction.tsx} (98%) diff --git a/Root.tsx b/Root.tsx index 36c8f8bd8b..a0ae438c44 100644 --- a/Root.tsx +++ b/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() { - + + + diff --git a/assets/icons/toast/check-circular-white.svg b/assets/icons/toast/check-circular-white.svg new file mode 100644 index 0000000000..18cd758df8 --- /dev/null +++ b/assets/icons/toast/check-circular-white.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/icons/toast/check-green.svg b/assets/icons/toast/check-green.svg new file mode 100644 index 0000000000..82769d438b --- /dev/null +++ b/assets/icons/toast/check-green.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/icons/toast/cross-red.svg b/assets/icons/toast/cross-red.svg new file mode 100644 index 0000000000..e92850cabd --- /dev/null +++ b/assets/icons/toast/cross-red.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/toast/cross-white.svg b/assets/icons/toast/cross-white.svg new file mode 100644 index 0000000000..1e0459ff54 --- /dev/null +++ b/assets/icons/toast/cross-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/toast/info-circle-blue.svg b/assets/icons/toast/info-circle-blue.svg new file mode 100644 index 0000000000..5f3fa2e9fc --- /dev/null +++ b/assets/icons/toast/info-circle-blue.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/icons/toast/info-circle-white.svg b/assets/icons/toast/info-circle-white.svg new file mode 100644 index 0000000000..0828f7ffbe --- /dev/null +++ b/assets/icons/toast/info-circle-white.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/icons/toast/loader-blue.svg b/assets/icons/toast/loader-blue.svg new file mode 100644 index 0000000000..9bfc2bfeb4 --- /dev/null +++ b/assets/icons/toast/loader-blue.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/icons/toast/loader-white.svg b/assets/icons/toast/loader-white.svg new file mode 100644 index 0000000000..2df3d5352c --- /dev/null +++ b/assets/icons/toast/loader-white.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/icons/toast/warning-orange.svg b/assets/icons/toast/warning-orange.svg new file mode 100644 index 0000000000..508eea0f1a --- /dev/null +++ b/assets/icons/toast/warning-orange.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/icons/toast/warning-white.svg b/assets/icons/toast/warning-white.svg new file mode 100644 index 0000000000..540430ee5b --- /dev/null +++ b/assets/icons/toast/warning-white.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/components/MiniToast.tsx b/packages/components/MiniToast.tsx new file mode 100644 index 0000000000..5762bef155 --- /dev/null +++ b/packages/components/MiniToast.tsx @@ -0,0 +1,141 @@ +import React, { useEffect, useState } 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; + 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(); + const [toastMessage, setToastMessage] = useState(""); + + useEffect(() => { + if (message) { + setToastMessage(message); + } + //always show toast when showAlways flag is enabled or status is loading + if (!showAlways && status !== "loading") { + const timeoutID = setTimeout(() => { + setToastMessage(""); + }, duration || 5000); + + return () => clearTimeout(timeoutID); + } + }, [message, duration, status, showAlways]); + + if (!toastMessage) { + return null; + } + + return ( + + {status === "loading" ? ( + + ) : ( + + )} + + {toastMessage} + + + ); +}; diff --git a/packages/components/Spinner.tsx b/packages/components/Spinner.tsx index c6193e7786..4fd1782640 100644 --- a/packages/components/Spinner.tsx +++ b/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; + 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 ( - + ); diff --git a/packages/context/ToastProvider.tsx b/packages/context/ToastProvider.tsx new file mode 100644 index 0000000000..3f5b98a104 --- /dev/null +++ b/packages/context/ToastProvider.tsx @@ -0,0 +1,30 @@ +import { ReactNode, createContext, useContext, useState } from "react"; + +import { MiniToastProps, MiniToast } from "@/components/MiniToast"; + +interface InitailValues { + toast: MiniToastProps; + setToast: (data: MiniToastProps) => void; +} + +const initialValues: InitailValues = { + toast: {}, + setToast: () => {}, +}; + +const ToastContext = createContext(initialValues); + +export const useToast = () => useContext(ToastContext); + +export const ToastContextProvider: React.FC<{ children: ReactNode }> = ({ + children, +}) => { + const [toast, setToast] = useState(initialValues.toast); + + return ( + + + {children} + + ); +}; diff --git a/packages/screens/Mini/Chat/MiniFriendScreen.tsx b/packages/screens/Mini/Chat/MiniFriendScreen.tsx index 24bf3368b6..04236c3f43 100644 --- a/packages/screens/Mini/Chat/MiniFriendScreen.tsx +++ b/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 && ( - setOpenToast({ type: undefined, message: "" })} diff --git a/packages/screens/Mini/components/MiniToast.tsx b/packages/screens/Mini/components/MiniToastWithAction.tsx similarity index 98% rename from packages/screens/Mini/components/MiniToast.tsx rename to packages/screens/Mini/components/MiniToastWithAction.tsx index b08e7da487..a31635ac01 100644 --- a/packages/screens/Mini/components/MiniToast.tsx +++ b/packages/screens/Mini/components/MiniToastWithAction.tsx @@ -25,7 +25,7 @@ interface MiniToastProp { style?: StyleProp; } -export default function MiniToast({ +export default function MiniToastWithAction({ message, type = "info", onClose, diff --git a/packages/utils/style/colors.ts b/packages/utils/style/colors.ts index cb2a1c74fc..d89b8fd1f8 100644 --- a/packages/utils/style/colors.ts +++ b/packages/utils/style/colors.ts @@ -4,6 +4,9 @@ export const primaryTextColor = "#2B0945"; export const secondaryColor = "#FFFFFF"; export const successColor = "#C8FFAE"; export const errorColor = "#F46F76"; +export const toastRed = "#F34242"; +export const toastGreen = "#52DB68"; +export const toastOrange = "#F6851B"; export const yellowDefault = "#FFE768"; export const yellowPremium = "#F5C900"; From b52efddca183b21b49b21dcc87430ad49bf041e4 Mon Sep 17 00:00:00 2001 From: Sachin Date: Thu, 22 Feb 2024 13:59:46 +0545 Subject: [PATCH 02/22] refactor: moved toast message clear logic from toast component to toast context provider --- packages/components/MiniToast.tsx | 23 ++++------------------- packages/context/ToastProvider.tsx | 28 ++++++++++++++++++++++------ 2 files changed, 26 insertions(+), 25 deletions(-) diff --git a/packages/components/MiniToast.tsx b/packages/components/MiniToast.tsx index 5762bef155..bfc3603592 100644 --- a/packages/components/MiniToast.tsx +++ b/packages/components/MiniToast.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React from "react"; import { View, useWindowDimensions } from "react-native"; import { Spinner } from "./Spinner"; @@ -30,7 +30,7 @@ type ToastVariantType = "solid" | "outline"; export type MiniToastProps = { status?: ToastStatusType; - message?: string; + message: string | null; variant?: ToastVariantType; duration?: number; topOffSet?: number; @@ -75,23 +75,8 @@ export const MiniToast = ({ showAlways = false, }: MiniToastProps) => { const { width: windowWidth } = useWindowDimensions(); - const [toastMessage, setToastMessage] = useState(""); - useEffect(() => { - if (message) { - setToastMessage(message); - } - //always show toast when showAlways flag is enabled or status is loading - if (!showAlways && status !== "loading") { - const timeoutID = setTimeout(() => { - setToastMessage(""); - }, duration || 5000); - - return () => clearTimeout(timeoutID); - } - }, [message, duration, status, showAlways]); - - if (!toastMessage) { + if (!message) { return null; } @@ -134,7 +119,7 @@ export const MiniToast = ({ }, ]} > - {toastMessage} + {message} ); diff --git a/packages/context/ToastProvider.tsx b/packages/context/ToastProvider.tsx index 3f5b98a104..a350444225 100644 --- a/packages/context/ToastProvider.tsx +++ b/packages/context/ToastProvider.tsx @@ -1,26 +1,42 @@ -import { ReactNode, createContext, useContext, useState } from "react"; +import { + ReactNode, + createContext, + useContext, + useEffect, + useState, +} from "react"; import { MiniToastProps, MiniToast } from "@/components/MiniToast"; -interface InitailValues { +interface DefaultValues { toast: MiniToastProps; setToast: (data: MiniToastProps) => void; } -const initialValues: InitailValues = { - toast: {}, +const defaultValues: DefaultValues = { + toast: { message: "" }, setToast: () => {}, }; -const ToastContext = createContext(initialValues); +const ToastContext = createContext(defaultValues); export const useToast = () => useContext(ToastContext); export const ToastContextProvider: React.FC<{ children: ReactNode }> = ({ children, }) => { - const [toast, setToast] = useState(initialValues.toast); + const [toast, setToast] = useState(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 ( From 2cb5fc368a8d6adafc56cf63263d3899c7439dbb Mon Sep 17 00:00:00 2001 From: Sachin Date: Thu, 22 Feb 2024 15:41:35 +0545 Subject: [PATCH 03/22] refactor: replaced MiniToast on mini comment input --- .../components/MiniCommentInput/index.tsx | 31 +++++-------------- 1 file changed, 7 insertions(+), 24 deletions(-) diff --git a/packages/screens/Mini/components/MiniCommentInput/index.tsx b/packages/screens/Mini/components/MiniCommentInput/index.tsx index a8bcc4acd9..28ec26a525 100644 --- a/packages/screens/Mini/components/MiniCommentInput/index.tsx +++ b/packages/screens/Mini/components/MiniCommentInput/index.tsx @@ -8,7 +8,6 @@ import { SelectAudioVideo } from "./SelectAudioVideo"; import { SelectPicture } from "./SelectPicture"; import priceSVG from "../../../../../assets/icons/price.svg"; import { CustomButton } from "../Button/CustomButton"; -import MiniToast from "../MiniToast"; import { BrandText } from "@/components/BrandText"; import FlexRow from "@/components/FlexRow"; @@ -17,6 +16,7 @@ import { FeedPostingProgressBar } from "@/components/loaders/FeedPostingProgress import { EmojiSelector } from "@/components/socialFeed/EmojiSelector"; import { GIFSelector } from "@/components/socialFeed/GIFSelector"; import { SpacerColumn } from "@/components/spacer"; +import { useToast } from "@/context/ToastProvider"; import { useWalletControl } from "@/context/WalletControlProvider"; import { useFeedPosting } from "@/hooks/feed/useFeedPosting"; import { useIpfs } from "@/hooks/useIpfs"; @@ -79,10 +79,8 @@ export const MiniCommentInput = React.forwardRef< const selectedWallet = useSelectedWallet(); const userId = getUserId(selectedNetworkId, selectedWallet?.address); const inputRef = useRef(null); - const [toastErrors, setToastErrors] = useState<{ - title: string; - message: string; - } | null>(null); + + const { setToast } = useToast(); const [isUploadLoading, setIsUploadLoading] = useState(false); const [isProgressBarShown, setIsProgressBarShown] = useState(false); @@ -229,9 +227,9 @@ export const MiniCommentInput = React.forwardRef< } if (formValues.files?.length && !remoteFiles.find((file) => file.url)) { console.error("upload file err : Fail to pin to IPFS"); - setToastErrors({ - title: "File upload failed", + setToast({ message: "Fail to pin to IPFS, please try to Publish again", + duration: 5000, }); setIsUploadLoading(false); return; @@ -255,30 +253,15 @@ export const MiniCommentInput = React.forwardRef< console.error("post submit err", err); setIsUploadLoading(false); setIsProgressBarShown(false); - setToastErrors({ - title: "Post creation failed", + setToast({ message: err instanceof Error ? err.message : `${err}`, + duration: 3000, }); - setTimeout(() => { - setToastErrors(null); - }, 3000); } }; return ( - {toastErrors && toastErrors.message && ( - - )} - Date: Fri, 23 Feb 2024 12:02:33 +0545 Subject: [PATCH 04/22] refactor: removed ToastProvider and moved added miniToast on feedback provider --- Root.tsx | 5 +- packages/components/MiniToast.tsx | 2 - packages/context/FeedbacksProvider.tsx | 41 +++++++++++++---- packages/context/ToastProvider.tsx | 46 ------------------- .../components/MiniCommentInput/index.tsx | 8 ++-- 5 files changed, 38 insertions(+), 64 deletions(-) delete mode 100644 packages/context/ToastProvider.tsx diff --git a/Root.tsx b/Root.tsx index a0ae438c44..36c8f8bd8b 100644 --- a/Root.tsx +++ b/Root.tsx @@ -30,7 +30,6 @@ 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 { @@ -112,9 +111,7 @@ export default function App() { - - - + diff --git a/packages/components/MiniToast.tsx b/packages/components/MiniToast.tsx index bfc3603592..35bbb7ee5e 100644 --- a/packages/components/MiniToast.tsx +++ b/packages/components/MiniToast.tsx @@ -70,9 +70,7 @@ export const MiniToast = ({ status = "info", message, variant = "solid", - duration = 3000, topOffSet = 70, - showAlways = false, }: MiniToastProps) => { const { width: windowWidth } = useWindowDimensions(); diff --git a/packages/context/FeedbacksProvider.tsx b/packages/context/FeedbacksProvider.tsx index 87491afad8..54a17d6c9c 100644 --- a/packages/context/FeedbacksProvider.tsx +++ b/packages/context/FeedbacksProvider.tsx @@ -11,6 +11,8 @@ import { LoaderFullScreen } from "../components/loaders/LoaderFullScreen"; import { ToastError } from "../components/toasts/ToastError"; import { ToastSuccess } from "../components/toasts/ToastSuccess"; +import { MiniToast, MiniToastProps } from "@/components/MiniToast"; + interface ToastMessage { title: string; message: string; @@ -40,6 +42,8 @@ interface FeedbacksProviderValue { success?: { title: string; message?: string }, errorTransform?: (err: unknown) => { title: string; message?: string }, ) => () => Promise; + miniToast: MiniToastProps; + setMiniToast: (data: MiniToastProps) => void; } const defaultValue: FeedbacksProviderValue = { toastError: initialToastError, @@ -49,6 +53,8 @@ const defaultValue: FeedbacksProviderValue = { loadingFullScreen: false, setLoadingFullScreen: () => {}, wrapWithFeedback: () => async () => {}, + miniToast: { message: "" }, + setMiniToast: () => {}, }; const FeedbacksContext = createContext(defaultValue); @@ -59,18 +65,31 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ const [loadingFullScreen, setLoadingFullScreen] = useState(false); const [toastError, setToastError] = useState(initialToastError); const [toastSuccess, setToastSuccess] = useState(initialToastSuccess); + const [miniToast, setMiniToast] = useState( + defaultValue.miniToast, + ); + console.log({ miniToast }); useEffect(() => { - const timeoutID = setTimeout( - () => { - setToastError(initialToastError); - setToastSuccess(initialToastSuccess); - }, - toastError.duration || toastSuccess.duration || 8000, - ); + const toastDuration = + miniToast.duration || + toastError.duration || + toastSuccess.duration || + miniToast.duration || + 8000; + + const timeoutID = setTimeout(() => { + setToastError(initialToastError); + setToastSuccess(initialToastSuccess); + + //always show mini toast when showAlways flag is enabled or status is loading + if (!miniToast.showAlways && miniToast.status !== "loading") { + setMiniToast(defaultValue.miniToast); + } + }, toastDuration); return () => clearTimeout(timeoutID); - }, [toastError, toastSuccess]); + }, [toastError, toastSuccess, miniToast]); const wrapWithFeedback: FeedbacksProviderValue["wrapWithFeedback"] = useCallback( @@ -107,6 +126,8 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ toastSuccess, setToastSuccess, wrapWithFeedback, + miniToast, + setMiniToast, }} > {/*==== Loader full screen*/} @@ -130,6 +151,10 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ message={toastSuccess.message} /> ) : null} + + {/* Mini Toast */} + {miniToast && miniToast.message && } + {/*==== Page content*/} {children} diff --git a/packages/context/ToastProvider.tsx b/packages/context/ToastProvider.tsx deleted file mode 100644 index a350444225..0000000000 --- a/packages/context/ToastProvider.tsx +++ /dev/null @@ -1,46 +0,0 @@ -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(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 ( - - - {children} - - ); -}; diff --git a/packages/screens/Mini/components/MiniCommentInput/index.tsx b/packages/screens/Mini/components/MiniCommentInput/index.tsx index 28ec26a525..f61f1c46d4 100644 --- a/packages/screens/Mini/components/MiniCommentInput/index.tsx +++ b/packages/screens/Mini/components/MiniCommentInput/index.tsx @@ -16,7 +16,7 @@ import { FeedPostingProgressBar } from "@/components/loaders/FeedPostingProgress import { EmojiSelector } from "@/components/socialFeed/EmojiSelector"; import { GIFSelector } from "@/components/socialFeed/GIFSelector"; import { SpacerColumn } from "@/components/spacer"; -import { useToast } from "@/context/ToastProvider"; +import { useFeedbacks } from "@/context/FeedbacksProvider"; import { useWalletControl } from "@/context/WalletControlProvider"; import { useFeedPosting } from "@/hooks/feed/useFeedPosting"; import { useIpfs } from "@/hooks/useIpfs"; @@ -80,7 +80,7 @@ export const MiniCommentInput = React.forwardRef< const userId = getUserId(selectedNetworkId, selectedWallet?.address); const inputRef = useRef(null); - const { setToast } = useToast(); + const { setMiniToast } = useFeedbacks(); const [isUploadLoading, setIsUploadLoading] = useState(false); const [isProgressBarShown, setIsProgressBarShown] = useState(false); @@ -227,7 +227,7 @@ export const MiniCommentInput = React.forwardRef< } if (formValues.files?.length && !remoteFiles.find((file) => file.url)) { console.error("upload file err : Fail to pin to IPFS"); - setToast({ + setMiniToast({ message: "Fail to pin to IPFS, please try to Publish again", duration: 5000, }); @@ -253,7 +253,7 @@ export const MiniCommentInput = React.forwardRef< console.error("post submit err", err); setIsUploadLoading(false); setIsProgressBarShown(false); - setToast({ + setMiniToast({ message: err instanceof Error ? err.message : `${err}`, duration: 3000, }); From 45f1daec25f874e5753013e551309dcf2bf5924a Mon Sep 17 00:00:00 2001 From: Sachin Date: Fri, 23 Feb 2024 12:04:43 +0545 Subject: [PATCH 05/22] chore: removed console.log --- packages/context/FeedbacksProvider.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/context/FeedbacksProvider.tsx b/packages/context/FeedbacksProvider.tsx index 54a17d6c9c..37ad184535 100644 --- a/packages/context/FeedbacksProvider.tsx +++ b/packages/context/FeedbacksProvider.tsx @@ -68,7 +68,6 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ const [miniToast, setMiniToast] = useState( defaultValue.miniToast, ); - console.log({ miniToast }); useEffect(() => { const toastDuration = From 1fe5339b519d00c05be6f840df785ca46917f8d2 Mon Sep 17 00:00:00 2001 From: Sachin Date: Fri, 23 Feb 2024 12:25:09 +0545 Subject: [PATCH 06/22] feat: added clear toast on press --- packages/components/MiniToast.tsx | 86 +++++++++++++++----------- packages/context/FeedbacksProvider.tsx | 12 +++- 2 files changed, 62 insertions(+), 36 deletions(-) diff --git a/packages/components/MiniToast.tsx b/packages/components/MiniToast.tsx index 35bbb7ee5e..0bd9c29828 100644 --- a/packages/components/MiniToast.tsx +++ b/packages/components/MiniToast.tsx @@ -2,6 +2,7 @@ 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"; @@ -33,8 +34,9 @@ export type MiniToastProps = { message: string | null; variant?: ToastVariantType; duration?: number; - topOffSet?: number; + topOffset?: number; showAlways?: boolean; + onPress?: () => void; }; const getColors = (status: ToastStatusType) => { @@ -70,7 +72,8 @@ export const MiniToast = ({ status = "info", message, variant = "solid", - topOffSet = 70, + topOffset = 70, + onPress, }: MiniToastProps) => { const { width: windowWidth } = useWindowDimensions(); @@ -78,47 +81,60 @@ export const MiniToast = ({ return null; } + const onToastPress = () => { + if (onPress) { + onPress(); + } + }; + return ( - - {status === "loading" ? ( - - ) : ( - - )} - - {message} - - + {status === "loading" ? ( + + ) : ( + + )} + + {message} + + + ); }; diff --git a/packages/context/FeedbacksProvider.tsx b/packages/context/FeedbacksProvider.tsx index 37ad184535..4a2e253372 100644 --- a/packages/context/FeedbacksProvider.tsx +++ b/packages/context/FeedbacksProvider.tsx @@ -68,6 +68,7 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ const [miniToast, setMiniToast] = useState( defaultValue.miniToast, ); + const { onPress, ...miniToastRestProps } = miniToast; useEffect(() => { const toastDuration = @@ -115,6 +116,13 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ [], ); + const tapToClear = () => { + setMiniToast(defaultValue.miniToast); + if (miniToast.onPress) { + miniToast.onPress(); + } + }; + return ( = ({ ) : null} {/* Mini Toast */} - {miniToast && miniToast.message && } + {miniToast && miniToast.message && ( + + )} {/*==== Page content*/} {children} From b7947c699568dc78468b404100ed6adcd70fcf97 Mon Sep 17 00:00:00 2001 From: Sachin Date: Wed, 28 Feb 2024 16:09:52 +0545 Subject: [PATCH 07/22] refactor: Feedback Provider to use single api for mini and normal toast, removed: ErrorToast and SuccesToast to make single NormalToast, deprecated use of setToastError and setToastSuccess --- .gitignore | 2 +- .../components/{ => toasts}/MiniToast.tsx | 43 ++--- packages/components/toasts/NormalToast.tsx | 87 ++++++++++ packages/components/toasts/ToastError.tsx | 58 ------- packages/components/toasts/ToastSuccess.tsx | 68 -------- packages/context/FeedbacksProvider.tsx | 159 ++++++++++-------- .../components/MiniCommentInput/index.tsx | 6 +- 7 files changed, 203 insertions(+), 220 deletions(-) rename packages/components/{ => toasts}/MiniToast.tsx (79%) create mode 100644 packages/components/toasts/NormalToast.tsx delete mode 100644 packages/components/toasts/ToastError.tsx delete mode 100644 packages/components/toasts/ToastSuccess.tsx diff --git a/.gitignore b/.gitignore index ef60fb6bab..b656de038a 100644 --- a/.gitignore +++ b/.gitignore @@ -93,7 +93,7 @@ substreams-*/target # weshnet -/temp/ +temp/ # eslint /.eslintcache diff --git a/packages/components/MiniToast.tsx b/packages/components/toasts/MiniToast.tsx similarity index 79% rename from packages/components/MiniToast.tsx rename to packages/components/toasts/MiniToast.tsx index 0bd9c29828..c62be70196 100644 --- a/packages/components/MiniToast.tsx +++ b/packages/components/toasts/MiniToast.tsx @@ -1,8 +1,8 @@ import React from "react"; import { View, useWindowDimensions } from "react-native"; -import { Spinner } from "./Spinner"; -import { CustomPressable } from "./buttons/CustomPressable"; +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"; @@ -26,21 +26,25 @@ import { 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 ToastStatusType = + | "info" + | "success" + | "error" + | "warning" + | "loading"; +export type ToastVariantType = "solid" | "outline"; -export type MiniToastProps = { - status?: ToastStatusType; - message: string | null; +export interface MiniToastProps { + type?: ToastStatusType; + message: string; variant?: ToastVariantType; - duration?: number; topOffset?: number; showAlways?: boolean; onPress?: () => void; -}; +} -const getColors = (status: ToastStatusType) => { - switch (status) { +const getColors = (type: ToastStatusType) => { + switch (type) { case "error": return toastRed; case "success": @@ -54,8 +58,8 @@ const getColors = (status: ToastStatusType) => { } }; -const getIcons = (status: ToastStatusType, variant: ToastVariantType) => { - switch (status) { +const getIcons = (type: ToastStatusType, variant: ToastVariantType) => { + switch (type) { case "error": return variant === "outline" ? crossRedSVG : crossWhiteSVG; case "success": @@ -69,7 +73,7 @@ const getIcons = (status: ToastStatusType, variant: ToastVariantType) => { } }; export const MiniToast = ({ - status = "info", + type = "info", message, variant = "solid", topOffset = 70, @@ -100,9 +104,8 @@ export const MiniToast = ({ > - {status === "loading" ? ( - + {type === "loading" ? ( + ) : ( void; + type?: "error" | "success"; + topOffset?: number; +} + +export const NormalToast: React.FC = ({ + title, + message, + onPress, + type, + topOffset = 24, +}) => { + const width = 432; + const { width: windowWidth } = useWindowDimensions(); + + const maxWidth = width < windowWidth ? width : windowWidth - marginHorizontal; + + return ( + + + {type === "error" && ( + <> + + + + )} + + + + {title} + + {message ? ( + + {message} + + ) : null} + + + + ); +}; diff --git a/packages/components/toasts/ToastError.tsx b/packages/components/toasts/ToastError.tsx deleted file mode 100644 index c966d5cc8e..0000000000 --- a/packages/components/toasts/ToastError.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React from "react"; -import { TouchableOpacity, useWindowDimensions, View } from "react-native"; - -import warningSVG from "../../../assets/icons/warning.svg"; -import { errorColor, neutral11, neutral77 } from "../../utils/style/colors"; -import { BrandText } from "../BrandText"; -import { SVG } from "../SVG"; -import { Box } from "../boxes/Box"; -import { SpacerRow } from "../spacer"; - -export const ToastError: React.FC<{ - title: string; - message?: string; - onPress: () => void; -}> = ({ title, message, onPress }) => { - const width = 432; - const { width: windowWidth } = useWindowDimensions(); - - return ( - - - - - - - - {title} - - - {message} - - - - - ); -}; diff --git a/packages/components/toasts/ToastSuccess.tsx b/packages/components/toasts/ToastSuccess.tsx deleted file mode 100644 index 64af97a08f..0000000000 --- a/packages/components/toasts/ToastSuccess.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React from "react"; -import { TouchableOpacity, useWindowDimensions, View } from "react-native"; - -import { neutral11, neutral77, successColor } from "../../utils/style/colors"; -import { BrandText } from "../BrandText"; -import { Box } from "../boxes/Box"; - -export const ToastSuccess: React.FC<{ - title: string; - message?: string; - onPress: () => void; -}> = ({ title, message, onPress }) => { - const width = 300; - const marginHorizontal = 24; - const { width: windowWidth } = useWindowDimensions(); - - return ( - - - - - {title} - - {message ? ( - - {message} - - ) : null} - - - - ); -}; diff --git a/packages/context/FeedbacksProvider.tsx b/packages/context/FeedbacksProvider.tsx index 4a2e253372..42842c609a 100644 --- a/packages/context/FeedbacksProvider.tsx +++ b/packages/context/FeedbacksProvider.tsx @@ -6,35 +6,48 @@ import React, { useEffect, useState, } from "react"; +import { Platform } from "react-native"; import { LoaderFullScreen } from "../components/loaders/LoaderFullScreen"; -import { ToastError } from "../components/toasts/ToastError"; -import { ToastSuccess } from "../components/toasts/ToastSuccess"; +import { + NormalToast, + NormalToastProps, +} from "../components/toasts/NormalToast"; -import { MiniToast, MiniToastProps } from "@/components/MiniToast"; +import { MiniToast, MiniToastProps } from "@/components/toasts/MiniToast"; -interface ToastMessage { - title: string; - message: string; +interface INormalToast extends NormalToastProps { + mode: "normal"; duration?: number; - onPress?: () => void; } -export const initialToastError: ToastMessage = { - title: "", +interface IMiniToast extends MiniToastProps { + mode: "mini"; + duration?: number; +} + +type Toast = IMiniToast | INormalToast; + +const initialToast: Toast = { message: "", - duration: 8000, -}; -const initialToastSuccess: ToastMessage = { title: "", - message: "", duration: 8000, + mode: "normal", + type: "success", }; interface FeedbacksProviderValue { - toastError: ToastMessage; - setToastError: (error: ToastMessage) => void; - toastSuccess: ToastMessage; - setToastSuccess: (info: ToastMessage) => void; + /** + * @deprecated Use setToast instead + */ + setToastError: ( + error: Pick, + ) => void; + /** + * @deprecated Use setToast instead + */ + setToastSuccess: ( + info: Pick, + ) => void; loadingFullScreen: boolean; setLoadingFullScreen: (loading: boolean) => void; wrapWithFeedback: ( @@ -42,19 +55,15 @@ interface FeedbacksProviderValue { success?: { title: string; message?: string }, errorTransform?: (err: unknown) => { title: string; message?: string }, ) => () => Promise; - miniToast: MiniToastProps; - setMiniToast: (data: MiniToastProps) => void; + setToast: (data: Toast) => void; } const defaultValue: FeedbacksProviderValue = { - toastError: initialToastError, setToastError: () => {}, - toastSuccess: initialToastSuccess, setToastSuccess: () => {}, loadingFullScreen: false, setLoadingFullScreen: () => {}, wrapWithFeedback: () => async () => {}, - miniToast: { message: "" }, - setMiniToast: () => {}, + setToast: () => {}, }; const FeedbacksContext = createContext(defaultValue); @@ -63,33 +72,25 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ children, }) => { const [loadingFullScreen, setLoadingFullScreen] = useState(false); - const [toastError, setToastError] = useState(initialToastError); - const [toastSuccess, setToastSuccess] = useState(initialToastSuccess); - const [miniToast, setMiniToast] = useState( - defaultValue.miniToast, - ); - const { onPress, ...miniToastRestProps } = miniToast; + const [toast, setToast] = useState(initialToast); + const { onPress: onToastPress, ...toastRestProps } = toast; + + const clearToast = () => setToast(initialToast); useEffect(() => { - const toastDuration = - miniToast.duration || - toastError.duration || - toastSuccess.duration || - miniToast.duration || - 8000; + const toastDuration = toast.duration || 8000; const timeoutID = setTimeout(() => { - setToastError(initialToastError); - setToastSuccess(initialToastSuccess); + // If the toast is in "mini" mode and showAlways flag is enabled, do not clear the toast + const shouldClearToast = !(toast.mode === "mini" && toast.showAlways); - //always show mini toast when showAlways flag is enabled or status is loading - if (!miniToast.showAlways && miniToast.status !== "loading") { - setMiniToast(defaultValue.miniToast); + if (shouldClearToast) { + clearToast(); } }, toastDuration); return () => clearTimeout(timeoutID); - }, [toastError, toastSuccess, miniToast]); + }, [toast]); const wrapWithFeedback: FeedbacksProviderValue["wrapWithFeedback"] = useCallback( @@ -107,9 +108,19 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ return async () => { try { await cb(); - setToastSuccess({ message: "", ...success }); + handleSetToast({ + mode: "normal", + type: "success", + message: "", + ...success, + }); } catch (err) { - setToastError({ message: "", ...errorTransform(err) }); + handleSetToast({ + mode: "normal", + type: "error", + message: "", + ...errorTransform(err), + }); } }; }, @@ -117,51 +128,59 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ ); const tapToClear = () => { - setMiniToast(defaultValue.miniToast); - if (miniToast.onPress) { - miniToast.onPress(); + clearToast(); + if (onToastPress) { + onToastPress(); } }; + const handleSetToast = ({ ...restArgs }: Toast) => { + setToast({ + ...restArgs, + }); + }; + console.log(toast); + return ( + handleSetToast({ mode: "normal", type: "error", title, ...args }), + setToastSuccess: ({ title = "", ...args }) => + handleSetToast({ + mode: "normal", + type: "success", + title, + ...args, + }), wrapWithFeedback, - miniToast, - setMiniToast, + setToast: handleSetToast, }} > {/*==== Loader full screen*/} {/*==== Toasts*/} - {toastError && toastError.title ? ( - setToastError(initialToastError)} - title={toastError.title} - message={toastError.message} - /> - ) : null} - {toastSuccess && toastSuccess.title ? ( - { - return toastSuccess.onPress - ? toastSuccess.onPress() - : setToastSuccess(initialToastSuccess); - }} - title={toastSuccess.title} - message={toastSuccess.message} + {toast && toast.mode === "normal" && toast.title ? ( + ) : null} {/* Mini Toast */} - {miniToast && miniToast.message && ( - + {toast && toast.mode === "mini" && toast.message && ( + )} {/*==== Page content*/} diff --git a/packages/screens/Mini/components/MiniCommentInput/index.tsx b/packages/screens/Mini/components/MiniCommentInput/index.tsx index f61f1c46d4..f61e7b3a96 100644 --- a/packages/screens/Mini/components/MiniCommentInput/index.tsx +++ b/packages/screens/Mini/components/MiniCommentInput/index.tsx @@ -80,7 +80,7 @@ export const MiniCommentInput = React.forwardRef< const userId = getUserId(selectedNetworkId, selectedWallet?.address); const inputRef = useRef(null); - const { setMiniToast } = useFeedbacks(); + const { setToast } = useFeedbacks(); const [isUploadLoading, setIsUploadLoading] = useState(false); const [isProgressBarShown, setIsProgressBarShown] = useState(false); @@ -227,7 +227,7 @@ export const MiniCommentInput = React.forwardRef< } if (formValues.files?.length && !remoteFiles.find((file) => file.url)) { console.error("upload file err : Fail to pin to IPFS"); - setMiniToast({ + setToast({ message: "Fail to pin to IPFS, please try to Publish again", duration: 5000, }); @@ -253,7 +253,7 @@ export const MiniCommentInput = React.forwardRef< console.error("post submit err", err); setIsUploadLoading(false); setIsProgressBarShown(false); - setMiniToast({ + setToast({ message: err instanceof Error ? err.message : `${err}`, duration: 3000, }); From ff0c80f9ba56f90a5bb987d40e462ba803560596 Mon Sep 17 00:00:00 2001 From: Sachin Date: Wed, 28 Feb 2024 16:55:31 +0545 Subject: [PATCH 08/22] fix: tsc errors --- packages/context/FeedbacksProvider.tsx | 12 ++++++++++++ .../Mini/components/MiniCommentInput/index.tsx | 4 ++++ 2 files changed, 16 insertions(+) diff --git a/packages/context/FeedbacksProvider.tsx b/packages/context/FeedbacksProvider.tsx index 42842c609a..5c958967e8 100644 --- a/packages/context/FeedbacksProvider.tsx +++ b/packages/context/FeedbacksProvider.tsx @@ -35,6 +35,18 @@ const initialToast: Toast = { type: "success", }; +/** + * @deprecated Use initialToast instead + */ +export const initialToastError: Pick< + INormalToast, + "message" | "duration" | "onPress" | "title" +> = { + title: "", + message: "", + duration: 8000, +}; + interface FeedbacksProviderValue { /** * @deprecated Use setToast instead diff --git a/packages/screens/Mini/components/MiniCommentInput/index.tsx b/packages/screens/Mini/components/MiniCommentInput/index.tsx index f61e7b3a96..ad9eb9e76f 100644 --- a/packages/screens/Mini/components/MiniCommentInput/index.tsx +++ b/packages/screens/Mini/components/MiniCommentInput/index.tsx @@ -230,6 +230,8 @@ export const MiniCommentInput = React.forwardRef< setToast({ message: "Fail to pin to IPFS, please try to Publish again", duration: 5000, + mode: "mini", + type: "error", }); setIsUploadLoading(false); return; @@ -256,6 +258,8 @@ export const MiniCommentInput = React.forwardRef< setToast({ message: err instanceof Error ? err.message : `${err}`, duration: 3000, + mode: "mini", + type: "error", }); } }; From 080813de443f10a07014d4b42ffd7ef7ae24d82b Mon Sep 17 00:00:00 2001 From: Sachin Date: Wed, 28 Feb 2024 16:56:58 +0545 Subject: [PATCH 09/22] fix: unused exports error --- packages/components/toasts/MiniToast.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/components/toasts/MiniToast.tsx b/packages/components/toasts/MiniToast.tsx index c62be70196..38f11e3516 100644 --- a/packages/components/toasts/MiniToast.tsx +++ b/packages/components/toasts/MiniToast.tsx @@ -26,13 +26,8 @@ import { import { fontSemibold14 } from "@/utils/style/fonts"; import { layout } from "@/utils/style/layout"; -export type ToastStatusType = - | "info" - | "success" - | "error" - | "warning" - | "loading"; -export type ToastVariantType = "solid" | "outline"; +type ToastStatusType = "info" | "success" | "error" | "warning" | "loading"; +type ToastVariantType = "solid" | "outline"; export interface MiniToastProps { type?: ToastStatusType; From 46fc3aba86f4201da9818783d06d062af119df3f Mon Sep 17 00:00:00 2001 From: Sachin Date: Wed, 21 Feb 2024 17:14:11 +0545 Subject: [PATCH 10/22] feat:created toast component for mini mode and added icons and colors required for it and, created ToastProvider component --- Root.tsx | 5 +- assets/icons/toast/check-circular-white.svg | 11 ++ assets/icons/toast/check-green.svg | 11 ++ assets/icons/toast/cross-red.svg | 3 + assets/icons/toast/cross-white.svg | 3 + assets/icons/toast/info-circle-blue.svg | 7 + assets/icons/toast/info-circle-white.svg | 7 + assets/icons/toast/loader-blue.svg | 11 ++ assets/icons/toast/loader-white.svg | 11 ++ assets/icons/toast/warning-orange.svg | 5 + assets/icons/toast/warning-white.svg | 5 + packages/components/MiniToast.tsx | 141 ++++++++++++++++++ packages/components/Spinner.tsx | 38 +++-- packages/context/ToastProvider.tsx | 30 ++++ .../screens/Mini/Chat/MiniFriendScreen.tsx | 4 +- ...{MiniToast.tsx => MiniToastWithAction.tsx} | 2 +- packages/utils/style/colors.ts | 3 + 17 files changed, 281 insertions(+), 16 deletions(-) create mode 100644 assets/icons/toast/check-circular-white.svg create mode 100644 assets/icons/toast/check-green.svg create mode 100644 assets/icons/toast/cross-red.svg create mode 100644 assets/icons/toast/cross-white.svg create mode 100644 assets/icons/toast/info-circle-blue.svg create mode 100644 assets/icons/toast/info-circle-white.svg create mode 100644 assets/icons/toast/loader-blue.svg create mode 100644 assets/icons/toast/loader-white.svg create mode 100644 assets/icons/toast/warning-orange.svg create mode 100644 assets/icons/toast/warning-white.svg create mode 100644 packages/components/MiniToast.tsx create mode 100644 packages/context/ToastProvider.tsx rename packages/screens/Mini/components/{MiniToast.tsx => MiniToastWithAction.tsx} (98%) diff --git a/Root.tsx b/Root.tsx index 36c8f8bd8b..a0ae438c44 100644 --- a/Root.tsx +++ b/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() { - + + + diff --git a/assets/icons/toast/check-circular-white.svg b/assets/icons/toast/check-circular-white.svg new file mode 100644 index 0000000000..18cd758df8 --- /dev/null +++ b/assets/icons/toast/check-circular-white.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/icons/toast/check-green.svg b/assets/icons/toast/check-green.svg new file mode 100644 index 0000000000..82769d438b --- /dev/null +++ b/assets/icons/toast/check-green.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/icons/toast/cross-red.svg b/assets/icons/toast/cross-red.svg new file mode 100644 index 0000000000..e92850cabd --- /dev/null +++ b/assets/icons/toast/cross-red.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/toast/cross-white.svg b/assets/icons/toast/cross-white.svg new file mode 100644 index 0000000000..1e0459ff54 --- /dev/null +++ b/assets/icons/toast/cross-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/toast/info-circle-blue.svg b/assets/icons/toast/info-circle-blue.svg new file mode 100644 index 0000000000..5f3fa2e9fc --- /dev/null +++ b/assets/icons/toast/info-circle-blue.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/icons/toast/info-circle-white.svg b/assets/icons/toast/info-circle-white.svg new file mode 100644 index 0000000000..0828f7ffbe --- /dev/null +++ b/assets/icons/toast/info-circle-white.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/icons/toast/loader-blue.svg b/assets/icons/toast/loader-blue.svg new file mode 100644 index 0000000000..9bfc2bfeb4 --- /dev/null +++ b/assets/icons/toast/loader-blue.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/icons/toast/loader-white.svg b/assets/icons/toast/loader-white.svg new file mode 100644 index 0000000000..2df3d5352c --- /dev/null +++ b/assets/icons/toast/loader-white.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/icons/toast/warning-orange.svg b/assets/icons/toast/warning-orange.svg new file mode 100644 index 0000000000..508eea0f1a --- /dev/null +++ b/assets/icons/toast/warning-orange.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/icons/toast/warning-white.svg b/assets/icons/toast/warning-white.svg new file mode 100644 index 0000000000..540430ee5b --- /dev/null +++ b/assets/icons/toast/warning-white.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/components/MiniToast.tsx b/packages/components/MiniToast.tsx new file mode 100644 index 0000000000..5762bef155 --- /dev/null +++ b/packages/components/MiniToast.tsx @@ -0,0 +1,141 @@ +import React, { useEffect, useState } 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; + 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(); + const [toastMessage, setToastMessage] = useState(""); + + useEffect(() => { + if (message) { + setToastMessage(message); + } + //always show toast when showAlways flag is enabled or status is loading + if (!showAlways && status !== "loading") { + const timeoutID = setTimeout(() => { + setToastMessage(""); + }, duration || 5000); + + return () => clearTimeout(timeoutID); + } + }, [message, duration, status, showAlways]); + + if (!toastMessage) { + return null; + } + + return ( + + {status === "loading" ? ( + + ) : ( + + )} + + {toastMessage} + + + ); +}; diff --git a/packages/components/Spinner.tsx b/packages/components/Spinner.tsx index c6193e7786..4fd1782640 100644 --- a/packages/components/Spinner.tsx +++ b/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; + 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 ( - + ); diff --git a/packages/context/ToastProvider.tsx b/packages/context/ToastProvider.tsx new file mode 100644 index 0000000000..3f5b98a104 --- /dev/null +++ b/packages/context/ToastProvider.tsx @@ -0,0 +1,30 @@ +import { ReactNode, createContext, useContext, useState } from "react"; + +import { MiniToastProps, MiniToast } from "@/components/MiniToast"; + +interface InitailValues { + toast: MiniToastProps; + setToast: (data: MiniToastProps) => void; +} + +const initialValues: InitailValues = { + toast: {}, + setToast: () => {}, +}; + +const ToastContext = createContext(initialValues); + +export const useToast = () => useContext(ToastContext); + +export const ToastContextProvider: React.FC<{ children: ReactNode }> = ({ + children, +}) => { + const [toast, setToast] = useState(initialValues.toast); + + return ( + + + {children} + + ); +}; diff --git a/packages/screens/Mini/Chat/MiniFriendScreen.tsx b/packages/screens/Mini/Chat/MiniFriendScreen.tsx index ffc0a7d82c..8f99994161 100644 --- a/packages/screens/Mini/Chat/MiniFriendScreen.tsx +++ b/packages/screens/Mini/Chat/MiniFriendScreen.tsx @@ -31,7 +31,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 = { @@ -52,7 +52,7 @@ export const MiniFriendScreen: ScreenFC<"MiniFriend"> = ({ navigation }) => { title="Friend Requests" customHeader={ openToast.type && ( - setOpenToast({ type: undefined, message: "" })} diff --git a/packages/screens/Mini/components/MiniToast.tsx b/packages/screens/Mini/components/MiniToastWithAction.tsx similarity index 98% rename from packages/screens/Mini/components/MiniToast.tsx rename to packages/screens/Mini/components/MiniToastWithAction.tsx index b08e7da487..a31635ac01 100644 --- a/packages/screens/Mini/components/MiniToast.tsx +++ b/packages/screens/Mini/components/MiniToastWithAction.tsx @@ -25,7 +25,7 @@ interface MiniToastProp { style?: StyleProp; } -export default function MiniToast({ +export default function MiniToastWithAction({ message, type = "info", onClose, diff --git a/packages/utils/style/colors.ts b/packages/utils/style/colors.ts index 0df679439d..e88e9fb716 100644 --- a/packages/utils/style/colors.ts +++ b/packages/utils/style/colors.ts @@ -4,6 +4,9 @@ export const primaryTextColor = "#2B0945"; export const secondaryColor = "#FFFFFF"; export const successColor = "#C8FFAE"; export const errorColor = "#F46F76"; +export const toastRed = "#F34242"; +export const toastGreen = "#52DB68"; +export const toastOrange = "#F6851B"; export const yellowDefault = "#FFE768"; export const yellowPremium = "#F5C900"; From 06d66ba289c17a2cf8c49dc345a5d257a271b367 Mon Sep 17 00:00:00 2001 From: Sachin Date: Thu, 22 Feb 2024 13:59:46 +0545 Subject: [PATCH 11/22] refactor: moved toast message clear logic from toast component to toast context provider --- packages/components/MiniToast.tsx | 23 ++++------------------- packages/context/ToastProvider.tsx | 28 ++++++++++++++++++++++------ 2 files changed, 26 insertions(+), 25 deletions(-) diff --git a/packages/components/MiniToast.tsx b/packages/components/MiniToast.tsx index 5762bef155..bfc3603592 100644 --- a/packages/components/MiniToast.tsx +++ b/packages/components/MiniToast.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React from "react"; import { View, useWindowDimensions } from "react-native"; import { Spinner } from "./Spinner"; @@ -30,7 +30,7 @@ type ToastVariantType = "solid" | "outline"; export type MiniToastProps = { status?: ToastStatusType; - message?: string; + message: string | null; variant?: ToastVariantType; duration?: number; topOffSet?: number; @@ -75,23 +75,8 @@ export const MiniToast = ({ showAlways = false, }: MiniToastProps) => { const { width: windowWidth } = useWindowDimensions(); - const [toastMessage, setToastMessage] = useState(""); - useEffect(() => { - if (message) { - setToastMessage(message); - } - //always show toast when showAlways flag is enabled or status is loading - if (!showAlways && status !== "loading") { - const timeoutID = setTimeout(() => { - setToastMessage(""); - }, duration || 5000); - - return () => clearTimeout(timeoutID); - } - }, [message, duration, status, showAlways]); - - if (!toastMessage) { + if (!message) { return null; } @@ -134,7 +119,7 @@ export const MiniToast = ({ }, ]} > - {toastMessage} + {message} ); diff --git a/packages/context/ToastProvider.tsx b/packages/context/ToastProvider.tsx index 3f5b98a104..a350444225 100644 --- a/packages/context/ToastProvider.tsx +++ b/packages/context/ToastProvider.tsx @@ -1,26 +1,42 @@ -import { ReactNode, createContext, useContext, useState } from "react"; +import { + ReactNode, + createContext, + useContext, + useEffect, + useState, +} from "react"; import { MiniToastProps, MiniToast } from "@/components/MiniToast"; -interface InitailValues { +interface DefaultValues { toast: MiniToastProps; setToast: (data: MiniToastProps) => void; } -const initialValues: InitailValues = { - toast: {}, +const defaultValues: DefaultValues = { + toast: { message: "" }, setToast: () => {}, }; -const ToastContext = createContext(initialValues); +const ToastContext = createContext(defaultValues); export const useToast = () => useContext(ToastContext); export const ToastContextProvider: React.FC<{ children: ReactNode }> = ({ children, }) => { - const [toast, setToast] = useState(initialValues.toast); + const [toast, setToast] = useState(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 ( From 3402c3b930bb6638e36788373da908b6cf3ac1ce Mon Sep 17 00:00:00 2001 From: Sachin Date: Thu, 22 Feb 2024 15:41:35 +0545 Subject: [PATCH 12/22] refactor: replaced MiniToast on mini comment input --- .../components/MiniCommentInput/index.tsx | 31 +++++-------------- 1 file changed, 7 insertions(+), 24 deletions(-) diff --git a/packages/screens/Mini/components/MiniCommentInput/index.tsx b/packages/screens/Mini/components/MiniCommentInput/index.tsx index 187aac15de..292ce9aacd 100644 --- a/packages/screens/Mini/components/MiniCommentInput/index.tsx +++ b/packages/screens/Mini/components/MiniCommentInput/index.tsx @@ -9,7 +9,6 @@ import { SelectPicture } from "./SelectPicture"; import { SimpleCommentInput } from "./SimpleCommentInput"; import priceSVG from "../../../../../assets/icons/price.svg"; import { CustomButton } from "../Button/CustomButton"; -import MiniToast from "../MiniToast"; import { BrandText } from "@/components/BrandText"; import FlexRow from "@/components/FlexRow"; @@ -18,6 +17,7 @@ import { FeedPostingProgressBar } from "@/components/loaders/FeedPostingProgress import { EmojiSelector } from "@/components/socialFeed/EmojiSelector"; import { GIFSelector } from "@/components/socialFeed/GIFSelector"; import { SpacerColumn } from "@/components/spacer"; +import { useToast } from "@/context/ToastProvider"; import { useWalletControl } from "@/context/WalletControlProvider"; import { useFeedPosting } from "@/hooks/feed/useFeedPosting"; import { useIpfs } from "@/hooks/useIpfs"; @@ -81,10 +81,8 @@ export const MiniCommentInput = React.forwardRef< const selectedWallet = useSelectedWallet(); const userId = getUserId(selectedNetworkId, selectedWallet?.address); const inputRef = useRef(null); - const [toastErrors, setToastErrors] = useState<{ - title: string; - message: string; - } | null>(null); + + const { setToast } = useToast(); const [isUploadLoading, setIsUploadLoading] = useState(false); const [isProgressBarShown, setIsProgressBarShown] = useState(false); const [showFullCommentInput, setShowFullCommentInput] = useState(false); @@ -234,9 +232,9 @@ export const MiniCommentInput = React.forwardRef< } if (formValues.files?.length && !remoteFiles.find((file) => file.url)) { console.error("upload file err : Fail to pin to IPFS"); - setToastErrors({ - title: "File upload failed", + setToast({ message: "Fail to pin to IPFS, please try to Publish again", + duration: 5000, }); setIsUploadLoading(false); return; @@ -260,13 +258,10 @@ export const MiniCommentInput = React.forwardRef< console.error("post submit err", err); setIsUploadLoading(false); setIsProgressBarShown(false); - setToastErrors({ - title: "Post creation failed", + setToast({ message: err instanceof Error ? err.message : `${err}`, + duration: 3000, }); - setTimeout(() => { - setToastErrors(null); - }, 3000); } }; @@ -292,18 +287,6 @@ export const MiniCommentInput = React.forwardRef< return ( - {toastErrors && toastErrors.message && ( - - )} - Date: Fri, 23 Feb 2024 12:02:33 +0545 Subject: [PATCH 13/22] refactor: removed ToastProvider and moved added miniToast on feedback provider --- Root.tsx | 5 +- packages/components/MiniToast.tsx | 2 - packages/context/FeedbacksProvider.tsx | 41 +++++++++++++---- packages/context/ToastProvider.tsx | 46 ------------------- .../components/MiniCommentInput/index.tsx | 8 ++-- 5 files changed, 38 insertions(+), 64 deletions(-) delete mode 100644 packages/context/ToastProvider.tsx diff --git a/Root.tsx b/Root.tsx index a0ae438c44..36c8f8bd8b 100644 --- a/Root.tsx +++ b/Root.tsx @@ -30,7 +30,6 @@ 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 { @@ -112,9 +111,7 @@ export default function App() { - - - + diff --git a/packages/components/MiniToast.tsx b/packages/components/MiniToast.tsx index bfc3603592..35bbb7ee5e 100644 --- a/packages/components/MiniToast.tsx +++ b/packages/components/MiniToast.tsx @@ -70,9 +70,7 @@ export const MiniToast = ({ status = "info", message, variant = "solid", - duration = 3000, topOffSet = 70, - showAlways = false, }: MiniToastProps) => { const { width: windowWidth } = useWindowDimensions(); diff --git a/packages/context/FeedbacksProvider.tsx b/packages/context/FeedbacksProvider.tsx index 87491afad8..54a17d6c9c 100644 --- a/packages/context/FeedbacksProvider.tsx +++ b/packages/context/FeedbacksProvider.tsx @@ -11,6 +11,8 @@ import { LoaderFullScreen } from "../components/loaders/LoaderFullScreen"; import { ToastError } from "../components/toasts/ToastError"; import { ToastSuccess } from "../components/toasts/ToastSuccess"; +import { MiniToast, MiniToastProps } from "@/components/MiniToast"; + interface ToastMessage { title: string; message: string; @@ -40,6 +42,8 @@ interface FeedbacksProviderValue { success?: { title: string; message?: string }, errorTransform?: (err: unknown) => { title: string; message?: string }, ) => () => Promise; + miniToast: MiniToastProps; + setMiniToast: (data: MiniToastProps) => void; } const defaultValue: FeedbacksProviderValue = { toastError: initialToastError, @@ -49,6 +53,8 @@ const defaultValue: FeedbacksProviderValue = { loadingFullScreen: false, setLoadingFullScreen: () => {}, wrapWithFeedback: () => async () => {}, + miniToast: { message: "" }, + setMiniToast: () => {}, }; const FeedbacksContext = createContext(defaultValue); @@ -59,18 +65,31 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ const [loadingFullScreen, setLoadingFullScreen] = useState(false); const [toastError, setToastError] = useState(initialToastError); const [toastSuccess, setToastSuccess] = useState(initialToastSuccess); + const [miniToast, setMiniToast] = useState( + defaultValue.miniToast, + ); + console.log({ miniToast }); useEffect(() => { - const timeoutID = setTimeout( - () => { - setToastError(initialToastError); - setToastSuccess(initialToastSuccess); - }, - toastError.duration || toastSuccess.duration || 8000, - ); + const toastDuration = + miniToast.duration || + toastError.duration || + toastSuccess.duration || + miniToast.duration || + 8000; + + const timeoutID = setTimeout(() => { + setToastError(initialToastError); + setToastSuccess(initialToastSuccess); + + //always show mini toast when showAlways flag is enabled or status is loading + if (!miniToast.showAlways && miniToast.status !== "loading") { + setMiniToast(defaultValue.miniToast); + } + }, toastDuration); return () => clearTimeout(timeoutID); - }, [toastError, toastSuccess]); + }, [toastError, toastSuccess, miniToast]); const wrapWithFeedback: FeedbacksProviderValue["wrapWithFeedback"] = useCallback( @@ -107,6 +126,8 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ toastSuccess, setToastSuccess, wrapWithFeedback, + miniToast, + setMiniToast, }} > {/*==== Loader full screen*/} @@ -130,6 +151,10 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ message={toastSuccess.message} /> ) : null} + + {/* Mini Toast */} + {miniToast && miniToast.message && } + {/*==== Page content*/} {children} diff --git a/packages/context/ToastProvider.tsx b/packages/context/ToastProvider.tsx deleted file mode 100644 index a350444225..0000000000 --- a/packages/context/ToastProvider.tsx +++ /dev/null @@ -1,46 +0,0 @@ -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(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 ( - - - {children} - - ); -}; diff --git a/packages/screens/Mini/components/MiniCommentInput/index.tsx b/packages/screens/Mini/components/MiniCommentInput/index.tsx index 292ce9aacd..561c62886e 100644 --- a/packages/screens/Mini/components/MiniCommentInput/index.tsx +++ b/packages/screens/Mini/components/MiniCommentInput/index.tsx @@ -17,7 +17,7 @@ import { FeedPostingProgressBar } from "@/components/loaders/FeedPostingProgress import { EmojiSelector } from "@/components/socialFeed/EmojiSelector"; import { GIFSelector } from "@/components/socialFeed/GIFSelector"; import { SpacerColumn } from "@/components/spacer"; -import { useToast } from "@/context/ToastProvider"; +import { useFeedbacks } from "@/context/FeedbacksProvider"; import { useWalletControl } from "@/context/WalletControlProvider"; import { useFeedPosting } from "@/hooks/feed/useFeedPosting"; import { useIpfs } from "@/hooks/useIpfs"; @@ -82,7 +82,7 @@ export const MiniCommentInput = React.forwardRef< const userId = getUserId(selectedNetworkId, selectedWallet?.address); const inputRef = useRef(null); - const { setToast } = useToast(); + const { setMiniToast } = useFeedbacks(); const [isUploadLoading, setIsUploadLoading] = useState(false); const [isProgressBarShown, setIsProgressBarShown] = useState(false); const [showFullCommentInput, setShowFullCommentInput] = useState(false); @@ -232,7 +232,7 @@ export const MiniCommentInput = React.forwardRef< } if (formValues.files?.length && !remoteFiles.find((file) => file.url)) { console.error("upload file err : Fail to pin to IPFS"); - setToast({ + setMiniToast({ message: "Fail to pin to IPFS, please try to Publish again", duration: 5000, }); @@ -258,7 +258,7 @@ export const MiniCommentInput = React.forwardRef< console.error("post submit err", err); setIsUploadLoading(false); setIsProgressBarShown(false); - setToast({ + setMiniToast({ message: err instanceof Error ? err.message : `${err}`, duration: 3000, }); From d956383bfa76b1ac1b1bfbf29a37c031cbd0a9e5 Mon Sep 17 00:00:00 2001 From: Sachin Date: Fri, 23 Feb 2024 12:04:43 +0545 Subject: [PATCH 14/22] chore: removed console.log --- packages/context/FeedbacksProvider.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/context/FeedbacksProvider.tsx b/packages/context/FeedbacksProvider.tsx index 54a17d6c9c..37ad184535 100644 --- a/packages/context/FeedbacksProvider.tsx +++ b/packages/context/FeedbacksProvider.tsx @@ -68,7 +68,6 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ const [miniToast, setMiniToast] = useState( defaultValue.miniToast, ); - console.log({ miniToast }); useEffect(() => { const toastDuration = From 713687ee4bf29e650cdd28c9852f09a53a2178b9 Mon Sep 17 00:00:00 2001 From: Sachin Date: Fri, 23 Feb 2024 12:25:09 +0545 Subject: [PATCH 15/22] feat: added clear toast on press --- packages/components/MiniToast.tsx | 86 +++++++++++++++----------- packages/context/FeedbacksProvider.tsx | 12 +++- 2 files changed, 62 insertions(+), 36 deletions(-) diff --git a/packages/components/MiniToast.tsx b/packages/components/MiniToast.tsx index 35bbb7ee5e..0bd9c29828 100644 --- a/packages/components/MiniToast.tsx +++ b/packages/components/MiniToast.tsx @@ -2,6 +2,7 @@ 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"; @@ -33,8 +34,9 @@ export type MiniToastProps = { message: string | null; variant?: ToastVariantType; duration?: number; - topOffSet?: number; + topOffset?: number; showAlways?: boolean; + onPress?: () => void; }; const getColors = (status: ToastStatusType) => { @@ -70,7 +72,8 @@ export const MiniToast = ({ status = "info", message, variant = "solid", - topOffSet = 70, + topOffset = 70, + onPress, }: MiniToastProps) => { const { width: windowWidth } = useWindowDimensions(); @@ -78,47 +81,60 @@ export const MiniToast = ({ return null; } + const onToastPress = () => { + if (onPress) { + onPress(); + } + }; + return ( - - {status === "loading" ? ( - - ) : ( - - )} - - {message} - - + {status === "loading" ? ( + + ) : ( + + )} + + {message} + + + ); }; diff --git a/packages/context/FeedbacksProvider.tsx b/packages/context/FeedbacksProvider.tsx index 37ad184535..4a2e253372 100644 --- a/packages/context/FeedbacksProvider.tsx +++ b/packages/context/FeedbacksProvider.tsx @@ -68,6 +68,7 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ const [miniToast, setMiniToast] = useState( defaultValue.miniToast, ); + const { onPress, ...miniToastRestProps } = miniToast; useEffect(() => { const toastDuration = @@ -115,6 +116,13 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ [], ); + const tapToClear = () => { + setMiniToast(defaultValue.miniToast); + if (miniToast.onPress) { + miniToast.onPress(); + } + }; + return ( = ({ ) : null} {/* Mini Toast */} - {miniToast && miniToast.message && } + {miniToast && miniToast.message && ( + + )} {/*==== Page content*/} {children} From 149d2a445fe5240ec5899d70ae0f702b9996ad88 Mon Sep 17 00:00:00 2001 From: Sachin Date: Wed, 28 Feb 2024 16:09:52 +0545 Subject: [PATCH 16/22] refactor: Feedback Provider to use single api for mini and normal toast, removed: ErrorToast and SuccesToast to make single NormalToast, deprecated use of setToastError and setToastSuccess --- .../components/{ => toasts}/MiniToast.tsx | 43 ++--- packages/components/toasts/NormalToast.tsx | 87 ++++++++++ packages/components/toasts/ToastError.tsx | 58 ------- packages/components/toasts/ToastSuccess.tsx | 68 -------- packages/context/FeedbacksProvider.tsx | 159 ++++++++++-------- .../components/MiniCommentInput/index.tsx | 6 +- 6 files changed, 202 insertions(+), 219 deletions(-) rename packages/components/{ => toasts}/MiniToast.tsx (79%) create mode 100644 packages/components/toasts/NormalToast.tsx delete mode 100644 packages/components/toasts/ToastError.tsx delete mode 100644 packages/components/toasts/ToastSuccess.tsx diff --git a/packages/components/MiniToast.tsx b/packages/components/toasts/MiniToast.tsx similarity index 79% rename from packages/components/MiniToast.tsx rename to packages/components/toasts/MiniToast.tsx index 0bd9c29828..c62be70196 100644 --- a/packages/components/MiniToast.tsx +++ b/packages/components/toasts/MiniToast.tsx @@ -1,8 +1,8 @@ import React from "react"; import { View, useWindowDimensions } from "react-native"; -import { Spinner } from "./Spinner"; -import { CustomPressable } from "./buttons/CustomPressable"; +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"; @@ -26,21 +26,25 @@ import { 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 ToastStatusType = + | "info" + | "success" + | "error" + | "warning" + | "loading"; +export type ToastVariantType = "solid" | "outline"; -export type MiniToastProps = { - status?: ToastStatusType; - message: string | null; +export interface MiniToastProps { + type?: ToastStatusType; + message: string; variant?: ToastVariantType; - duration?: number; topOffset?: number; showAlways?: boolean; onPress?: () => void; -}; +} -const getColors = (status: ToastStatusType) => { - switch (status) { +const getColors = (type: ToastStatusType) => { + switch (type) { case "error": return toastRed; case "success": @@ -54,8 +58,8 @@ const getColors = (status: ToastStatusType) => { } }; -const getIcons = (status: ToastStatusType, variant: ToastVariantType) => { - switch (status) { +const getIcons = (type: ToastStatusType, variant: ToastVariantType) => { + switch (type) { case "error": return variant === "outline" ? crossRedSVG : crossWhiteSVG; case "success": @@ -69,7 +73,7 @@ const getIcons = (status: ToastStatusType, variant: ToastVariantType) => { } }; export const MiniToast = ({ - status = "info", + type = "info", message, variant = "solid", topOffset = 70, @@ -100,9 +104,8 @@ export const MiniToast = ({ > - {status === "loading" ? ( - + {type === "loading" ? ( + ) : ( void; + type?: "error" | "success"; + topOffset?: number; +} + +export const NormalToast: React.FC = ({ + title, + message, + onPress, + type, + topOffset = 24, +}) => { + const width = 432; + const { width: windowWidth } = useWindowDimensions(); + + const maxWidth = width < windowWidth ? width : windowWidth - marginHorizontal; + + return ( + + + {type === "error" && ( + <> + + + + )} + + + + {title} + + {message ? ( + + {message} + + ) : null} + + + + ); +}; diff --git a/packages/components/toasts/ToastError.tsx b/packages/components/toasts/ToastError.tsx deleted file mode 100644 index c966d5cc8e..0000000000 --- a/packages/components/toasts/ToastError.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React from "react"; -import { TouchableOpacity, useWindowDimensions, View } from "react-native"; - -import warningSVG from "../../../assets/icons/warning.svg"; -import { errorColor, neutral11, neutral77 } from "../../utils/style/colors"; -import { BrandText } from "../BrandText"; -import { SVG } from "../SVG"; -import { Box } from "../boxes/Box"; -import { SpacerRow } from "../spacer"; - -export const ToastError: React.FC<{ - title: string; - message?: string; - onPress: () => void; -}> = ({ title, message, onPress }) => { - const width = 432; - const { width: windowWidth } = useWindowDimensions(); - - return ( - - - - - - - - {title} - - - {message} - - - - - ); -}; diff --git a/packages/components/toasts/ToastSuccess.tsx b/packages/components/toasts/ToastSuccess.tsx deleted file mode 100644 index 64af97a08f..0000000000 --- a/packages/components/toasts/ToastSuccess.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React from "react"; -import { TouchableOpacity, useWindowDimensions, View } from "react-native"; - -import { neutral11, neutral77, successColor } from "../../utils/style/colors"; -import { BrandText } from "../BrandText"; -import { Box } from "../boxes/Box"; - -export const ToastSuccess: React.FC<{ - title: string; - message?: string; - onPress: () => void; -}> = ({ title, message, onPress }) => { - const width = 300; - const marginHorizontal = 24; - const { width: windowWidth } = useWindowDimensions(); - - return ( - - - - - {title} - - {message ? ( - - {message} - - ) : null} - - - - ); -}; diff --git a/packages/context/FeedbacksProvider.tsx b/packages/context/FeedbacksProvider.tsx index 4a2e253372..42842c609a 100644 --- a/packages/context/FeedbacksProvider.tsx +++ b/packages/context/FeedbacksProvider.tsx @@ -6,35 +6,48 @@ import React, { useEffect, useState, } from "react"; +import { Platform } from "react-native"; import { LoaderFullScreen } from "../components/loaders/LoaderFullScreen"; -import { ToastError } from "../components/toasts/ToastError"; -import { ToastSuccess } from "../components/toasts/ToastSuccess"; +import { + NormalToast, + NormalToastProps, +} from "../components/toasts/NormalToast"; -import { MiniToast, MiniToastProps } from "@/components/MiniToast"; +import { MiniToast, MiniToastProps } from "@/components/toasts/MiniToast"; -interface ToastMessage { - title: string; - message: string; +interface INormalToast extends NormalToastProps { + mode: "normal"; duration?: number; - onPress?: () => void; } -export const initialToastError: ToastMessage = { - title: "", +interface IMiniToast extends MiniToastProps { + mode: "mini"; + duration?: number; +} + +type Toast = IMiniToast | INormalToast; + +const initialToast: Toast = { message: "", - duration: 8000, -}; -const initialToastSuccess: ToastMessage = { title: "", - message: "", duration: 8000, + mode: "normal", + type: "success", }; interface FeedbacksProviderValue { - toastError: ToastMessage; - setToastError: (error: ToastMessage) => void; - toastSuccess: ToastMessage; - setToastSuccess: (info: ToastMessage) => void; + /** + * @deprecated Use setToast instead + */ + setToastError: ( + error: Pick, + ) => void; + /** + * @deprecated Use setToast instead + */ + setToastSuccess: ( + info: Pick, + ) => void; loadingFullScreen: boolean; setLoadingFullScreen: (loading: boolean) => void; wrapWithFeedback: ( @@ -42,19 +55,15 @@ interface FeedbacksProviderValue { success?: { title: string; message?: string }, errorTransform?: (err: unknown) => { title: string; message?: string }, ) => () => Promise; - miniToast: MiniToastProps; - setMiniToast: (data: MiniToastProps) => void; + setToast: (data: Toast) => void; } const defaultValue: FeedbacksProviderValue = { - toastError: initialToastError, setToastError: () => {}, - toastSuccess: initialToastSuccess, setToastSuccess: () => {}, loadingFullScreen: false, setLoadingFullScreen: () => {}, wrapWithFeedback: () => async () => {}, - miniToast: { message: "" }, - setMiniToast: () => {}, + setToast: () => {}, }; const FeedbacksContext = createContext(defaultValue); @@ -63,33 +72,25 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ children, }) => { const [loadingFullScreen, setLoadingFullScreen] = useState(false); - const [toastError, setToastError] = useState(initialToastError); - const [toastSuccess, setToastSuccess] = useState(initialToastSuccess); - const [miniToast, setMiniToast] = useState( - defaultValue.miniToast, - ); - const { onPress, ...miniToastRestProps } = miniToast; + const [toast, setToast] = useState(initialToast); + const { onPress: onToastPress, ...toastRestProps } = toast; + + const clearToast = () => setToast(initialToast); useEffect(() => { - const toastDuration = - miniToast.duration || - toastError.duration || - toastSuccess.duration || - miniToast.duration || - 8000; + const toastDuration = toast.duration || 8000; const timeoutID = setTimeout(() => { - setToastError(initialToastError); - setToastSuccess(initialToastSuccess); + // If the toast is in "mini" mode and showAlways flag is enabled, do not clear the toast + const shouldClearToast = !(toast.mode === "mini" && toast.showAlways); - //always show mini toast when showAlways flag is enabled or status is loading - if (!miniToast.showAlways && miniToast.status !== "loading") { - setMiniToast(defaultValue.miniToast); + if (shouldClearToast) { + clearToast(); } }, toastDuration); return () => clearTimeout(timeoutID); - }, [toastError, toastSuccess, miniToast]); + }, [toast]); const wrapWithFeedback: FeedbacksProviderValue["wrapWithFeedback"] = useCallback( @@ -107,9 +108,19 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ return async () => { try { await cb(); - setToastSuccess({ message: "", ...success }); + handleSetToast({ + mode: "normal", + type: "success", + message: "", + ...success, + }); } catch (err) { - setToastError({ message: "", ...errorTransform(err) }); + handleSetToast({ + mode: "normal", + type: "error", + message: "", + ...errorTransform(err), + }); } }; }, @@ -117,51 +128,59 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ ); const tapToClear = () => { - setMiniToast(defaultValue.miniToast); - if (miniToast.onPress) { - miniToast.onPress(); + clearToast(); + if (onToastPress) { + onToastPress(); } }; + const handleSetToast = ({ ...restArgs }: Toast) => { + setToast({ + ...restArgs, + }); + }; + console.log(toast); + return ( + handleSetToast({ mode: "normal", type: "error", title, ...args }), + setToastSuccess: ({ title = "", ...args }) => + handleSetToast({ + mode: "normal", + type: "success", + title, + ...args, + }), wrapWithFeedback, - miniToast, - setMiniToast, + setToast: handleSetToast, }} > {/*==== Loader full screen*/} {/*==== Toasts*/} - {toastError && toastError.title ? ( - setToastError(initialToastError)} - title={toastError.title} - message={toastError.message} - /> - ) : null} - {toastSuccess && toastSuccess.title ? ( - { - return toastSuccess.onPress - ? toastSuccess.onPress() - : setToastSuccess(initialToastSuccess); - }} - title={toastSuccess.title} - message={toastSuccess.message} + {toast && toast.mode === "normal" && toast.title ? ( + ) : null} {/* Mini Toast */} - {miniToast && miniToast.message && ( - + {toast && toast.mode === "mini" && toast.message && ( + )} {/*==== Page content*/} diff --git a/packages/screens/Mini/components/MiniCommentInput/index.tsx b/packages/screens/Mini/components/MiniCommentInput/index.tsx index 561c62886e..fd3544b9ce 100644 --- a/packages/screens/Mini/components/MiniCommentInput/index.tsx +++ b/packages/screens/Mini/components/MiniCommentInput/index.tsx @@ -82,7 +82,7 @@ export const MiniCommentInput = React.forwardRef< const userId = getUserId(selectedNetworkId, selectedWallet?.address); const inputRef = useRef(null); - const { setMiniToast } = useFeedbacks(); + const { setToast } = useFeedbacks(); const [isUploadLoading, setIsUploadLoading] = useState(false); const [isProgressBarShown, setIsProgressBarShown] = useState(false); const [showFullCommentInput, setShowFullCommentInput] = useState(false); @@ -232,7 +232,7 @@ export const MiniCommentInput = React.forwardRef< } if (formValues.files?.length && !remoteFiles.find((file) => file.url)) { console.error("upload file err : Fail to pin to IPFS"); - setMiniToast({ + setToast({ message: "Fail to pin to IPFS, please try to Publish again", duration: 5000, }); @@ -258,7 +258,7 @@ export const MiniCommentInput = React.forwardRef< console.error("post submit err", err); setIsUploadLoading(false); setIsProgressBarShown(false); - setMiniToast({ + setToast({ message: err instanceof Error ? err.message : `${err}`, duration: 3000, }); From 2b4ac8da394133408e3e2a5552635a4b4fd2767c Mon Sep 17 00:00:00 2001 From: Sachin Date: Wed, 28 Feb 2024 16:55:31 +0545 Subject: [PATCH 17/22] fix: tsc errors --- packages/context/FeedbacksProvider.tsx | 12 ++++++++++++ .../Mini/components/MiniCommentInput/index.tsx | 4 ++++ 2 files changed, 16 insertions(+) diff --git a/packages/context/FeedbacksProvider.tsx b/packages/context/FeedbacksProvider.tsx index 42842c609a..5c958967e8 100644 --- a/packages/context/FeedbacksProvider.tsx +++ b/packages/context/FeedbacksProvider.tsx @@ -35,6 +35,18 @@ const initialToast: Toast = { type: "success", }; +/** + * @deprecated Use initialToast instead + */ +export const initialToastError: Pick< + INormalToast, + "message" | "duration" | "onPress" | "title" +> = { + title: "", + message: "", + duration: 8000, +}; + interface FeedbacksProviderValue { /** * @deprecated Use setToast instead diff --git a/packages/screens/Mini/components/MiniCommentInput/index.tsx b/packages/screens/Mini/components/MiniCommentInput/index.tsx index fd3544b9ce..af757f38d1 100644 --- a/packages/screens/Mini/components/MiniCommentInput/index.tsx +++ b/packages/screens/Mini/components/MiniCommentInput/index.tsx @@ -235,6 +235,8 @@ export const MiniCommentInput = React.forwardRef< setToast({ message: "Fail to pin to IPFS, please try to Publish again", duration: 5000, + mode: "mini", + type: "error", }); setIsUploadLoading(false); return; @@ -261,6 +263,8 @@ export const MiniCommentInput = React.forwardRef< setToast({ message: err instanceof Error ? err.message : `${err}`, duration: 3000, + mode: "mini", + type: "error", }); } }; From a43cf0415717944cf70fc7793005762612610e93 Mon Sep 17 00:00:00 2001 From: Sachin Date: Wed, 28 Feb 2024 16:56:58 +0545 Subject: [PATCH 18/22] fix: unused exports error --- packages/components/toasts/MiniToast.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/components/toasts/MiniToast.tsx b/packages/components/toasts/MiniToast.tsx index c62be70196..38f11e3516 100644 --- a/packages/components/toasts/MiniToast.tsx +++ b/packages/components/toasts/MiniToast.tsx @@ -26,13 +26,8 @@ import { import { fontSemibold14 } from "@/utils/style/fonts"; import { layout } from "@/utils/style/layout"; -export type ToastStatusType = - | "info" - | "success" - | "error" - | "warning" - | "loading"; -export type ToastVariantType = "solid" | "outline"; +type ToastStatusType = "info" | "success" | "error" | "warning" | "loading"; +type ToastVariantType = "solid" | "outline"; export interface MiniToastProps { type?: ToastStatusType; From 52da131485bd296ecfb1903c279a2ac792b16a64 Mon Sep 17 00:00:00 2001 From: Sakul Budhathoki Date: Wed, 28 Feb 2024 23:54:52 +0545 Subject: [PATCH 19/22] fix: regression --- packages/components/toasts/NormalToast.tsx | 9 ++++++++- packages/context/FeedbacksProvider.tsx | 19 ++++++------------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/components/toasts/NormalToast.tsx b/packages/components/toasts/NormalToast.tsx index 44042f8a76..dd81185207 100644 --- a/packages/components/toasts/NormalToast.tsx +++ b/packages/components/toasts/NormalToast.tsx @@ -63,7 +63,14 @@ export const NormalToast: React.FC = ({ {type === "error" && ( <> - + )} diff --git a/packages/context/FeedbacksProvider.tsx b/packages/context/FeedbacksProvider.tsx index 5c958967e8..4ee277c93c 100644 --- a/packages/context/FeedbacksProvider.tsx +++ b/packages/context/FeedbacksProvider.tsx @@ -90,7 +90,7 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ const clearToast = () => setToast(initialToast); useEffect(() => { - const toastDuration = toast.duration || 8000; + const toastDuration = toast.duration || initialToast.duration; const timeoutID = setTimeout(() => { // If the toast is in "mini" mode and showAlways flag is enabled, do not clear the toast @@ -120,14 +120,14 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ return async () => { try { await cb(); - handleSetToast({ + setToast({ mode: "normal", type: "success", message: "", ...success, }); } catch (err) { - handleSetToast({ + setToast({ mode: "normal", type: "error", message: "", @@ -146,29 +146,22 @@ export const FeedbacksContextProvider: React.FC<{ children: ReactNode }> = ({ } }; - const handleSetToast = ({ ...restArgs }: Toast) => { - setToast({ - ...restArgs, - }); - }; - console.log(toast); - return ( - handleSetToast({ mode: "normal", type: "error", title, ...args }), + setToast({ mode: "normal", type: "error", title, ...args }), setToastSuccess: ({ title = "", ...args }) => - handleSetToast({ + setToast({ mode: "normal", type: "success", title, ...args, }), wrapWithFeedback, - setToast: handleSetToast, + setToast, }} > {/*==== Loader full screen*/} From effd8766b8bee5b63256d4b9e3fad4be473f50a1 Mon Sep 17 00:00:00 2001 From: Sachin Date: Thu, 29 Feb 2024 17:10:38 +0545 Subject: [PATCH 20/22] fix: regression no right padding --- packages/components/toasts/NormalToast.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/components/toasts/NormalToast.tsx b/packages/components/toasts/NormalToast.tsx index 44042f8a76..948b2b010c 100644 --- a/packages/components/toasts/NormalToast.tsx +++ b/packages/components/toasts/NormalToast.tsx @@ -75,11 +75,17 @@ export const NormalToast: React.FC = ({ {message ? ( {message} ) : null} + From 3a9f7c803c31ef63beef0755e58cb1b560737503 Mon Sep 17 00:00:00 2001 From: Sachin Date: Thu, 29 Feb 2024 17:21:17 +0545 Subject: [PATCH 21/22] fix:padding diffrenece in success and error --- packages/components/toasts/NormalToast.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/toasts/NormalToast.tsx b/packages/components/toasts/NormalToast.tsx index 8c0a00437a..4436f74824 100644 --- a/packages/components/toasts/NormalToast.tsx +++ b/packages/components/toasts/NormalToast.tsx @@ -86,7 +86,7 @@ export const NormalToast: React.FC = ({ fontSize: 13, lineHeight: 15, color: neutral77, - maxWidth: maxWidth - 130, + maxWidth: type === "error" ? maxWidth - 130 : maxWidth - 50, }} > {message} From 26e1b4c6c5959f4dd367effb0241e8df8424eebd Mon Sep 17 00:00:00 2001 From: Sachin Date: Thu, 29 Feb 2024 17:38:43 +0545 Subject: [PATCH 22/22] fix: different with for success and error as in main --- packages/components/toasts/NormalToast.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/toasts/NormalToast.tsx b/packages/components/toasts/NormalToast.tsx index 4436f74824..aec6d0f1f3 100644 --- a/packages/components/toasts/NormalToast.tsx +++ b/packages/components/toasts/NormalToast.tsx @@ -30,7 +30,7 @@ export const NormalToast: React.FC = ({ type, topOffset = 24, }) => { - const width = 432; + const width = type === "success" ? 300 : 432; const { width: windowWidth } = useWindowDimensions(); const maxWidth = width < windowWidth ? width : windowWidth - marginHorizontal;