Merge pull request #547 from Peersyst/fix/explore/usability-improvements

Explore ux improvements

CHANGELOG.md

@@ -33,6 +33,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 explore usabilty [fix/explore/usability-improvements](https://github.com/Peersyst/near-mobile-wallet/pull/547)
 -   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)

src/config/configs/config.base.json

@@ -83,7 +83,7 @@
             {
                 "name": "Meta Pool",
                 "description": "Stake NEAR. Receive a liquid token to simultaneously accrue staking rewards and unlock liquidity to participate in DeFi activities",
-                "url": "https://metapool.app/",
+                "url": "https://www.metapool.app/",
                 "logoUrl": "https://peersyst-public-production.s3.eu-west-1.amazonaws.com/647377ad-d8a3-4497-9ca6-2a41154664bc.png",
                 "tag": "liquidStaking",
                 "contractId": "meta-pool.near"

src/config/configs/config.dev.json

@@ -115,7 +115,7 @@
             {
                 "name": "Meta Pool",
                 "description": "Stake NEAR. Receive a liquid token to simultaneously accrue staking rewards and unlock liquidity to participate in DeFi activities",
-                "url": "https://metapool.app/",
+                "url": "https://www.metapool.app/",
                 "logoUrl": "https://peersyst-public-production.s3.eu-west-1.amazonaws.com/647377ad-d8a3-4497-9ca6-2a41154664bc.png",
                 "tag": "liquidStaking",
                 "contractId": "meta-pool.near"

src/config/configs/config.prod.json

@@ -115,7 +115,7 @@
             {
                 "name": "Meta Pool",
                 "description": "Stake NEAR. Receive a liquid token to simultaneously accrue staking rewards and unlock liquidity to participate in DeFi activities",
-                "url": "https://metapool.app/",
+                "url": "https://www.metapool.app/",
                 "logoUrl": "https://peersyst-public-production.s3.eu-west-1.amazonaws.com/647377ad-d8a3-4497-9ca6-2a41154664bc.png",
                 "tag": "liquidStaking",
                 "contractId": "meta-pool.near"

src/config/configs/config.staging.json

@@ -115,7 +115,7 @@
             {
                 "name": "Meta Pool",
                 "description": "Stake NEAR. Receive a liquid token to simultaneously accrue staking rewards and unlock liquidity to participate in DeFi activities",
-                "url": "https://metapool.app/",
+                "url": "https://www.metapool.app/",
                 "logoUrl": "https://peersyst-public-production.s3.eu-west-1.amazonaws.com/647377ad-d8a3-4497-9ca6-2a41154664bc.png",
                 "tag": "liquidStaking",
                 "contractId": "meta-pool.near"

src/config/configs/config.test.json

@@ -114,7 +114,7 @@
             {
                 "name": "Meta Pool",
                 "description": "Stake NEAR. Receive a liquid token to simultaneously accrue staking rewards and unlock liquidity to participate in DeFi activities",
-                "url": "https://metapool.app/",
+                "url": "https://www.metapool.app/",
                 "logoUrl": "https://peersyst-public-production.s3.eu-west-1.amazonaws.com/647377ad-d8a3-4497-9ca6-2a41154664bc.png",
                 "tag": "liquidStaking",
                 "contractId": "meta-pool.near"

src/module/dapp/containers/SearchModal/SearchModal.tsx

@@ -9,17 +9,28 @@ import useTranslate from "module/common/hook/useTranslate";
 
 export interface SearchModalProps extends ExposedBackdropProps {
     onSearch: (search: string) => void;
+    defaultUrl?: string;
 }
 
-const SearchModal = ({ defaultOpen, open: openProp, onClose: onCloseProp, onOpen, onSearch, ...rest }: SearchModalProps): JSX.Element => {
+const SearchModal = ({
+    defaultOpen,
+    open: openProp,
+    onClose: onCloseProp,
+    onOpen,
+    onSearch,
+    defaultUrl,
+    ...rest
+}: SearchModalProps): JSX.Element => {
     const [open, setOpen] = useControlled(defaultOpen, openProp, openProp ? onCloseProp : onOpen);
     const { mutate: addSearch } = useAddSearchToHistory();
     const translate = useTranslate();
 
     async function handleSearch(search: string) {
         const trimmedSearch = search.trim();
-        onSearch(trimmedSearch);
-        addSearch(trimmedSearch);
+        if (trimmedSearch !== "") {
+            onSearch(trimmedSearch);
+            addSearch(trimmedSearch);
+        }
         setOpen(false);
     }
 
@@ -29,6 +40,7 @@ const SearchModal = ({ defaultOpen, open: openProp, onClose: onCloseProp, onOpen
                 <Col flex={1} gap={8}>
                     <SearchBarModalWrapper>
                         <SearchBar
+                            defaultValue={defaultUrl}
                             autoFocus
                             onSubmitEditing={(e) => handleSearch(e.nativeEvent.text)}
                             style={{ flex: 1 }}

src/module/dapp/screen/BrowserScreen/BrowserScreenHeader/BrowserScreenHeaderInput/BrowserScreenHeaderInput.tsx

@@ -35,9 +35,11 @@ function BrowserScreenHeaderInput({ url, onSearch }: BrowserScreenHeaderInputPro
                         {url}
                     </Typography>
                 </TouchableOpacity>
-                <IconButton onPress={handleOnFavouritePress}>{isFavourite ? <FavouriteWebIcon /> : <NotFavouriteWebIcon />}</IconButton>
+                <IconButton hitSlop={5} onPress={handleOnFavouritePress}>
+                    {isFavourite ? <FavouriteWebIcon /> : <NotFavouriteWebIcon />}
+                </IconButton>
             </BrowserScreenHeaderInputRoot>
-            <SearchModal open={openSearchModal} onClose={() => setSearchModalOpen(false)} onSearch={onSearch} />
+            <SearchModal defaultUrl={url} open={openSearchModal} onClose={() => setSearchModalOpen(false)} onSearch={onSearch} />
             <AddDAppToFavouritesModal url={url} open={openAddToFavouritesModal} onClose={() => setAddToFavouritesModal(false)} />
         </>
     );

src/module/settings/components/core/DeleteData/DeleteData.tsx

@@ -8,6 +8,7 @@ import useTranslate from "module/common/hook/useTranslate";
 import useWalletState from "module/wallet/hook/useWalletState";
 import useCancelableDialog from "module/common/hook/useCancelableDialog";
 import { useState } from "react";
+import { DAppsStorage } from "module/dapp/DAppsStorage";
 
 const DeleteData = () => {
     const translate = useTranslate();
@@ -27,6 +28,7 @@ const DeleteData = () => {
         setWalletState((state) => ({ ...state, isAuthenticated: false, hasWallet: false }));
         serviceInstancesMap.clear();
         await SettingsStorage.clear();
+        await DAppsStorage.clear();
         queryClient.removeQueries();
         resetWalletState();
     };

src/module/signer/containers/DAppWebView/DAppWebView.tsx

@@ -50,6 +50,7 @@ const DAppWebView = forwardRef<WebView, DAppWebViewProps>(({ style, ...rest }, r
             setSupportMultipleWindows={false} // Prevents the WebView from opening native browser on Android
             onShouldStartLoadWithRequest={handleWebViewRequestLoad}
             injectedJavaScriptBeforeContentLoaded={injectedJavascript}
+            allowsInlineMediaPlayback={true} // Allows video playback in the WebView. Prevents fullscreen video playback on iOS.
             onStartShouldSetResponder={() => true}
             style={[{ backgroundColor: "transparent", flex: 1 }, style]}
             {...rest}

src/module/token/component/core/TokenDetailsModal/TokenDetailsModal.tsx

@@ -31,7 +31,7 @@ const TokenDetailsModal = createBackdrop<TokenDetailsModalProps>(
                 onClose={() => setOpen(false)}
                 {...rest}
             >
-                <TokenDetailsModalContent token={token} onSend={handleOnSend} />
+                <TokenDetailsModalContent token={token} onSend={handleOnSend} onSwap={() => setOpen(false)} />
             </CardNavigatorModal>
         );
     },

src/module/token/component/core/TokenDetailsModal/TokenDetailsModalContent.tsx

@@ -12,9 +12,10 @@ import { useMemo } from "react";
 export interface TokenDetailsModalContentProps {
     token: Token;
     onSend?: () => void;
+    onSwap?: () => void;
 }
 
-export default function TokenDetailsModalContent({ token, onSend }: TokenDetailsModalContentProps): JSX.Element {
+export default function TokenDetailsModalContent({ token, onSend, onSwap }: TokenDetailsModalContentProps): JSX.Element {
     const haveNearInAccount = useHaveNearInAccount();
     const translate = useTranslate("tokens");
     const haveTokenDescription = useMemo(() => Object.keys(tokens).includes(token.metadata?.symbol), [token.metadata?.symbol, tokens]);
@@ -26,7 +27,7 @@ export default function TokenDetailsModalContent({ token, onSend }: TokenDetails
                     {translate(token.metadata?.symbol as TokensResourceType)}
                 </Typography>
             )}
-            <TokenDetailsCard token={token} onSend={onSend} />
+            <TokenDetailsCard token={token} onSend={onSend} onSwap={onSwap} />
             {!haveNearInAccount && <YouDontHaveNearCard />}
         </Col>
     );

src/module/token/component/display/TokenDetailsCard/TokenDetailsCard.tsx

@@ -1,28 +1,34 @@
-import { Row, useModal } from "@peersyst/react-native-components";
+import { Row } from "@peersyst/react-native-components";
 import useTranslate from "module/common/hook/useTranslate";
 import { Token } from "near-peersyst-sdk";
 import { capitalize } from "@peersyst/react-utils";
 import TokenBalance from "../../display/TokenBalance/TokenBalance";
 import useGetSwapLink from "module/common/hook/useGetSwapLink";
 import { TokenDetailsCardButton, TokenDetailsCardRoot } from "./TokenDetailsCard.styles";
-
 import useHaveNearInAccount from "module/wallet/hook/useHaveNearInAccount";
-import { DAppWebViewModal } from "module/signer/containers/DAppWebViewModal/DAppWebViewModal";
+import useNavigation from "module/common/hook/useNavigation";
+import { MainScreens } from "module/common/component/navigation/MainNavigatorGroup/MainScreens";
+import { DAppScreens } from "module/dapp/navigator/DAppsNavigator.types";
 
 export interface TokenDetailsCardProps {
     token: Token;
     onSend?: () => void;
+    onSwap?: () => void;
 }
 
-const TokenDetailsCard = ({ token, onSend }: TokenDetailsCardProps): JSX.Element => {
+const TokenDetailsCard = ({ token, onSend, onSwap }: TokenDetailsCardProps): JSX.Element => {
     const translate = useTranslate();
-    const { showModal, hideModal } = useModal();
+    const { navigate } = useNavigation();
 
     const uriSwap = useGetSwapLink({ contractId: token.contractId });
     const haveNearInAccount = useHaveNearInAccount();
 
     function handleSwapPress(): void {
-        showModal(DAppWebViewModal, { url: uriSwap, name: capitalize(translate("swap")), onClose: () => hideModal(DAppWebViewModal.id) });
+        onSwap?.();
+        setTimeout(() => {
+            // We need to cast the navigate.navigate to any because the React Navigation types are not working properly
+            navigate(MainScreens.DAPPS, { screen: DAppScreens.WEBVIEW, params: { url: uriSwap } } as any);
+        }, 500);
     }
 
     return (

src/module/wallet/component/core/WalletCard/WalletCardButtons/WalletCardButtons.tsx

@@ -20,7 +20,7 @@ const WalletCardButtons = (): JSX.Element => {
     const { showModal } = useModal();
 
     function handleSwapPress(): void {
-        // (jordi): We need to cast the navigate.navigate to any because the React Navigation types are not working properly
+        // We need to cast the navigate.navigate to any because the React Navigation types are not working properly
         navigate.navigate(MainScreens.DAPPS, { screen: DAppScreens.WEBVIEW, params: { url: uriSwap } } as any);
     }