diff --git a/CHANGELOG.md b/CHANGELOG.md index 676b8aaa9..377de6803 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,7 @@ This document logs notable, developer-facing updates to the NEAR Mobile Wallet. ### 🐛 Bug Fixes +- Fix dapps webview loading [fix/dapps-webview-loading](https://github.com/Peersyst/near-mobile-wallet/pull/548) - Fix account being duplicated when creating new account [fix/create-account-duplicated](https://github.com/Peersyst/near-mobile-wallet/pull/546) - Fix withdraw showing success when failing [fix/android-opening-default-browser](https://github.com/Peersyst/near-mobile-wallet/pull/545) - Fix Android opening default browser [fix/android-opening-default-browser](https://github.com/Peersyst/near-mobile-wallet/pull/544) diff --git a/src/module/common/component/feedback/LoadingLogo/LoadingLogo.styles.ts b/src/module/common/component/feedback/LoadingLogo/LoadingLogo.styles.ts new file mode 100644 index 000000000..a117f81f5 --- /dev/null +++ b/src/module/common/component/feedback/LoadingLogo/LoadingLogo.styles.ts @@ -0,0 +1,17 @@ +import { CircularProgress } from "@peersyst/react-native-components"; +import styled from "@peersyst/react-native-styled"; +import { NearLoadingIcon } from "icons"; +import { LoadingLogoIconProps, LoadingLogoRootProps } from "./LoadingLogo.types"; +import { alpha } from "@peersyst/react-utils"; + +export const LoadingLogoIconRoot = styled(CircularProgress)(({ size, color }) => ({ + size, + thickness: 3, + color, + backgroundColor: alpha(color, 0.2), +})); + +export const LoadingLogoIcon = styled(NearLoadingIcon)(({ size, color }) => ({ + color, + fontSize: size * 0.4, +})); diff --git a/src/module/common/component/feedback/LoadingLogo/LoadingLogo.tsx b/src/module/common/component/feedback/LoadingLogo/LoadingLogo.tsx new file mode 100644 index 000000000..b752a4067 --- /dev/null +++ b/src/module/common/component/feedback/LoadingLogo/LoadingLogo.tsx @@ -0,0 +1,17 @@ +import { useColor } from "@peersyst/react-native-components"; +import { LoadingLogoIcon, LoadingLogoIconRoot } from "./LoadingLogo.styles"; +import { LoadingLogoProps } from "./LoadingLogo.types"; +import useWalletColor from "module/wallet/hook/useWalletColor"; + +export function LoadingLogo({ style = {}, color: colorProp }: LoadingLogoProps): JSX.Element { + const walletColor = useWalletColor(); + const parsedThemeColor = useColor(colorProp); + const { size = 120, color: styleColor, ...restStyle } = style; + const color = styleColor ?? parsedThemeColor ?? walletColor; + + return ( + + + + ); +} diff --git a/src/module/common/component/feedback/LoadingLogo/LoadingLogo.types.ts b/src/module/common/component/feedback/LoadingLogo/LoadingLogo.types.ts new file mode 100644 index 000000000..3c8c6394a --- /dev/null +++ b/src/module/common/component/feedback/LoadingLogo/LoadingLogo.types.ts @@ -0,0 +1,13 @@ +import { CircularProgressStyle, ThemeColor } from "@peersyst/react-native-components"; + +export type LoadingLogoProps = { + color?: ThemeColor; + style?: CircularProgressStyle; +}; + +export type LoadingLogoRootProps = { + color: string; + size: number; +}; + +export type LoadingLogoIconProps = LoadingLogoRootProps; diff --git a/src/module/common/component/feedback/LoadingModal/LoadingModal.styles.ts b/src/module/common/component/feedback/LoadingModal/LoadingModal.styles.ts index 23ba2b14c..bf8e7655e 100644 --- a/src/module/common/component/feedback/LoadingModal/LoadingModal.styles.ts +++ b/src/module/common/component/feedback/LoadingModal/LoadingModal.styles.ts @@ -1,8 +1,8 @@ import styled from "@peersyst/react-native-styled"; -import { CircularProgress, Col } from "@peersyst/react-native-components"; +import { Col } from "@peersyst/react-native-components"; import GradientPage from "module/common/component/layout/GradientPage/GradientPage"; import { View } from "react-native"; -import { CircleCheckIcon, NearLoadingIcon } from "icons"; +import { CircleCheckIcon } from "icons"; import Typography from "module/common/component/display/Typography/Typography"; export const DarkLoadingModalOverlay = styled(View)(({ theme }) => ({ @@ -32,15 +32,3 @@ export const SuccessIcon = styled(CircleCheckIcon)(({ theme }) => ({ export const LoadingModalMessage = styled(Typography)(({ theme }) => ({ color: theme.palette.white, })); - -export const LoadingModalContentIcon = styled(CircularProgress)(({ theme }) => ({ - size: 120, - thickness: 3, - color: theme.palette.white, - backgroundColor: theme.palette.overlay["20%"], -})); - -export const LoadingModalIcon = styled(NearLoadingIcon)(({ theme }) => ({ - color: theme.palette.white, - fontSize: 48, -})); diff --git a/src/module/common/component/feedback/LoadingModal/LoadingModal.tsx b/src/module/common/component/feedback/LoadingModal/LoadingModal.tsx index 6b047f53d..003e87bec 100644 --- a/src/module/common/component/feedback/LoadingModal/LoadingModal.tsx +++ b/src/module/common/component/feedback/LoadingModal/LoadingModal.tsx @@ -1,18 +1,11 @@ import { LoadingModalProps } from "./LoadingModal.types"; -import { - DarkLoadingModalOverlay, - LoadingModalRoot, - SuccessIcon, - LoadingModalContent, - LoadingModalMessage, - LoadingModalContentIcon, - LoadingModalIcon, -} from "./LoadingModal.styles"; +import { DarkLoadingModalOverlay, LoadingModalRoot, SuccessIcon, LoadingModalContent, LoadingModalMessage } from "./LoadingModal.styles"; import { useEffect, useState } from "react"; import { notificationAsync, NotificationFeedbackType } from "expo-haptics"; import useTranslate from "module/common/hook/useTranslate"; import { Backdrop, Col } from "@peersyst/react-native-components"; import Button from "module/common/component/input/Button/Button"; +import { LoadingLogo } from "../LoadingLogo/LoadingLogo"; const LoadingModal = ({ loading, @@ -75,9 +68,7 @@ const LoadingModal = ({ ) : ( - - - + {processingMessage || translate("processing")} diff --git a/src/module/dapp/screen/BrowserScreen/BrowserScreen.styles.tsx b/src/module/dapp/screen/BrowserScreen/BrowserScreen.styles.tsx index 36c98db96..d19cacf32 100644 --- a/src/module/dapp/screen/BrowserScreen/BrowserScreen.styles.tsx +++ b/src/module/dapp/screen/BrowserScreen/BrowserScreen.styles.tsx @@ -1,7 +1,23 @@ import { Col } from "@peersyst/react-native-components"; import styled from "@peersyst/react-native-styled"; +import DAppWebView from "module/signer/containers/DAppWebView/DAppWebView"; export const BrowserScreenRoot = styled(Col)(({ theme }) => ({ flex: 1, backgroundColor: theme.palette.background, })); + +export const BrowserScreenWebView = styled(DAppWebView)(({ theme }) => ({ + backgroundColor: theme.palette.background, +})); + +export const BrowserScreenLoadingContainer = styled(Col)(({ theme }) => ({ + alignItems: "center", + justifyContent: "center", + backgroundColor: theme.palette.background, + position: "absolute", + top: 0, + left: 0, + width: "100%", + height: "100%", +})); diff --git a/src/module/dapp/screen/BrowserScreen/BrowserScreen.tsx b/src/module/dapp/screen/BrowserScreen/BrowserScreen.tsx index 6671ea78b..f4c21b1b9 100644 --- a/src/module/dapp/screen/BrowserScreen/BrowserScreen.tsx +++ b/src/module/dapp/screen/BrowserScreen/BrowserScreen.tsx @@ -1,31 +1,33 @@ -import { BrowserScreenRoot } from "./BrowserScreen.styles"; +import { BrowserScreenLoadingContainer, BrowserScreenRoot, BrowserScreenWebView } from "./BrowserScreen.styles"; import { useBrowserScreen } from "./hooks/useBrowserScreen"; import BrowserScreenHeader from "./BrowserScreenHeader/BrowserScreenHeader"; -import DAppWebView from "module/signer/containers/DAppWebView/DAppWebView"; import { useEffect, useState } from "react"; +import { LoadingLogo } from "module/common/component/feedback/LoadingLogo/LoadingLogo"; +import { Col } from "@peersyst/react-native-components"; const BrowserScreen = (): JSX.Element => { const { headerProps, webviewProps } = useBrowserScreen(); - // Workaround to ensure the screen infers the correct height without the header const [isLoaded, setIsLoaded] = useState(false); + const [isWebViewLoaded, setIsWebViewLoaded] = useState(false); useEffect(() => { setTimeout(() => { setIsLoaded(true); - }, 250); + }, 500); }, []); return ( - {isLoaded ? ( - <> - - - - ) : ( - <> - )} + + + {isLoaded && setIsWebViewLoaded(true)} {...webviewProps} />} + {(!isLoaded || !isWebViewLoaded) && ( + + + + )} + ); };