Remove NFT Gallery

src/components/AddressBlock/index.tsx

@@ -224,12 +224,7 @@ function AddressBlock(props: Props) {
     };
 
     function goToAccount(addressId, index, addressType, tokenName = '') {
-        const isMac = platform.indexOf('Mac') === 0;
-        if (isMac && addressType === AddressType.NFTGallery && isAppStore) {
-            setIsModalOpen(true, 'DisableNftModal');
-        } else {
-            dispatch(changeAccountThunk(addressId, publicKeyHash, index, identityIndex, addressType, tokenName));
-        }
+        dispatch(changeAccountThunk(addressId, publicKeyHash, index, identityIndex, addressType, tokenName));
     }
 
     function setIsModalOpen(open, active) {
@@ -326,9 +321,11 @@ function AddressBlock(props: Props) {
                 />
             )}
 
-            <AddDelegateLabel isActive={!isModalOpen && isNFTGallerysPageActive} onClick={() => goToAccount(publicKeyHash, 0, AddressType.NFTGallery)}>
-                <DelegateTitle>{t('general.nouns.nft_gallery')}</DelegateTitle>
-            </AddDelegateLabel>
+            {!(platform.indexOf('Mac') === 0 && isAppStore) && (
+                <AddDelegateLabel isActive={!isModalOpen && isNFTGallerysPageActive} onClick={() => goToAccount(publicKeyHash, 0, AddressType.NFTGallery)}>
+                    <DelegateTitle>{t('general.nouns.nft_gallery')}</DelegateTitle>
+                </AddDelegateLabel>
+            )}
 
             <AddDelegateLabel isActive={!isModalOpen && isLiquidityPageActive} onClick={() => goToAccount(publicKeyHash, 0, AddressType.PlatformLiquidity)}>
                 <DelegateTitle>{t('general.nouns.platform_liquidity')}</DelegateTitle>

src/components/FaqBar/MessageContent.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Trans } from 'react-i18next';
+import CloseIcon from '@mui/icons-material/Close';
+
+import styled from 'styled-components';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+
+const MessageContainer = styled.div`
+    padding: 12px 10px 12px 18px;
+    background-color: #1a315f;
+    width: 100%;
+    color: ${({ theme: { colors } }) => colors.white};
+`;
+
+const StyledCloseIcon = styled(CloseIcon)`
+    cursor: pointer;
+    position: absolute;
+    width: 15px !important;
+    height: 15px !important;
+    top: 10px;
+    right: 10px;
+    fill: #ffffff !important;
+`;
+
+const MessageHeader = styled.div<{ isWrap?: boolean }>`
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    font-size: 18px;
+    font-weight: 500;
+    letter-spacing: 1.1px;
+    white-space: ${({ isWrap }) => (!isWrap ? 'normal' : 'nowrap')};
+`;
+
+const DesText = styled.div`
+    font-size: 16px;
+    margin-left: 14px;
+    margin-right: 200px;
+    line-height: 19px;
+    font-weight: 300;
+`;
+
+const InfoIcon = styled(InfoOutlinedIcon)`
+    transform: rotate(180deg);
+`;
+
+const Link = styled.span`
+    cursor: pointer;
+    color: ${({ theme: { colors } }) => colors.white};
+    text-decoration: underline;
+`;
+
+interface Props {
+    openLink: (link?: string) => void;
+    onClose: () => void;
+}
+
+const MessageContent = (props: Props) => {
+    const { openLink, onClose } = props;
+    return (
+        <MessageContainer>
+            <StyledCloseIcon onClick={() => onClose()} />
+            <MessageHeader>
+                <InfoIcon />
+                <DesText>
+                    <Trans i18nKey="components.faq.description">
+                        Please visit our FAQ
+                        <Link onClick={() => openLink()}>FAQ</Link>
+                        for questions about app features.
+                    </Trans>
+                </DesText>
+            </MessageHeader>
+        </MessageContainer>
+    );
+};
+
+export default MessageContent;

src/components/FaqBar/index.tsx

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from 'react';
+import Snackbar from '@mui/material/Snackbar';
+import styled from 'styled-components';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import MessageContent from './MessageContent';
+
+import { clearMessageAction } from '../../reduxContent/message/actions';
+import { openBlockExplorerForOperation, openLink } from '../../utils/general';
+import { RootState, MessageState } from '../../types/store';
+import { getMainNode } from '../../utils/settings';
+
+const SnackbarWrapper = styled(Snackbar)`
+    &&& {
+        &.MuiSnackbar-root {
+            width: 732px;
+            padding: 0;
+        }
+        .MuiSnackbarContent-root {
+            padding: 0;
+            width: 100%;
+        }
+        .MuiSnackbarContent-message {
+            padding: 0;
+            width: 100%;
+        }
+    }
+`;
+
+const FaqUrl = 'https://cryptonomic.zendesk.com/hc/en-us/articles/5868256903053-The-NFT-gallery-and-dapp-interactions-are-unavailable-';
+
+function FaqBar() {
+    const dispatch = useDispatch();
+    const [open, setOpen] = useState(true);
+
+    function openLinkHandler() {
+        openLink(FaqUrl);
+    }
+
+    function onClose() {
+        setOpen(false);
+        setTimeout(() => {
+            dispatch(clearMessageAction());
+        }, 200);
+    }
+
+    return (
+        <SnackbarWrapper
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+            open={open}
+            onClose={() => onClose()}
+            message={<MessageContent openLink={() => openLinkHandler()} onClose={() => onClose()} />}
+        />
+    );
+}
+
+export default FaqBar;

src/containers/Home/index.tsx

@@ -12,12 +12,14 @@ import { createMessageAction } from '../../reduxContent/message/actions';
 import NodesStatus from '../../components/NodesStatus';
 import HomeMain from '../HomeMain';
 import HomeAdd from '../HomeAdd';
+import FaqBar from '../../components/FaqBar';
 
 import { getNodesError } from '../../utils/general';
 import { RootState, AppState, SettingsState } from '../../types/store';
+import { isAppStore } from '../../config.json';
 
 function HomePage() {
-    const { isLedger, nodesStatus } = useSelector<RootState, AppState>((state) => state.app, shallowEqual);
+    const { isLedger, nodesStatus, isInitedWallet, platform } = useSelector<RootState, AppState>((state) => state.app, shallowEqual);
     const { nodesList, selectedNode } = useSelector<RootState, SettingsState>((state) => state.settings, shallowEqual);
     const isIdentities = useSelector(getIsIdentitesSelector);
     const nodesErrorMessage = getNodesError(nodesStatus, nodesList, selectedNode);
@@ -57,6 +59,7 @@ function HomePage() {
                 <Route path="/home/add" component={HomeAdd} />
                 <Redirect to={redirectTo} />
             </Switch>
+            {!isInitedWallet && platform.indexOf('Mac') === 0 && isAppStore && <FaqBar />}
         </Fragment>
     );
 }

src/locales/en-US.json

@@ -609,6 +609,9 @@
             "nft_title": "The NFT gallery is unavailable in the App Store version of Galleon",
             "nft_description": "Due to App Store compliance requirements, dapp connectivity and the NFT gallery is not available in the App Store version of Galleon. <1>Learn More</1>",
             "beacon_title": "Dapp Interactions Unavailable"
+        },
+        "faq": {
+            "description": "Please visit our <1>FAQ</1> for questions about app features."
         }
     },
     "containers": {

src/reduxContent/app/actions.ts

@@ -33,9 +33,10 @@ import {
     SET_BEACON_LOADING,
     SET_LAUNCH_URL,
     SetLaunchUrlAction,
+    SetWalletInitedAction,
 } from './types';
 import { NodeStatus, AddressType } from '../../types/general';
-import { SetPlatformAction, SET_PLATFORM } from './types';
+import { SetPlatformAction, SET_PLATFORM, WALLET_IS_INITED } from './types';
 
 export function setIsLoadingAction(isLoading: boolean): SetIsLoadingAction {
     return {
@@ -147,3 +148,9 @@ export function setPlatformAction(platform: string): SetPlatformAction {
         platform,
     };
 }
+
+export function setWalletInitedAction(): SetWalletInitedAction {
+    return {
+        type: WALLET_IS_INITED,
+    };
+}

src/reduxContent/app/reducers.ts

@@ -18,6 +18,7 @@ import {
     SET_BEACON_LOADING,
     SET_LAUNCH_URL,
     SET_PLATFORM,
+    WALLET_IS_INITED,
 } from './types';
 
 const initState: AppState = {
@@ -44,6 +45,7 @@ const initState: AppState = {
     beaconConnection: null,
     launchUrl: null,
     platform: '',
+    isInitedWallet: false,
 };
 
 export function appReducer(state: AppState = initState, action: AppActionTypes) {
@@ -78,6 +80,8 @@ export function appReducer(state: AppState = initState, action: AppActionTypes)
             return { ...state, launchUrl: action.url };
         case SET_PLATFORM:
             return { ...state, platform: action.platform };
+        case WALLET_IS_INITED:
+            return { ...state, isInitedWallet: true };
         default:
             return state;
     }

src/reduxContent/app/types.ts

@@ -18,6 +18,7 @@ export const SET_BEACON_LOADING = 'SET_BEACON_LOADING';
 export const SET_BEACON_CLIENT = 'SET_BEACON_CLIENT';
 export const SET_LAUNCH_URL = 'SET_LAUNCH_URL';
 export const SET_PLATFORM = 'SET_PLATFORM';
+export const WALLET_IS_INITED = 'WALLET_IS_INITED';
 
 export interface SetBeaconClientAction {
     type: typeof SET_BEACON_CLIENT;
@@ -88,6 +89,10 @@ export interface SetLaunchUrlAction {
     url: string;
 }
 
+export interface SetWalletInitedAction {
+    type: typeof WALLET_IS_INITED;
+}
+
 export interface ChangeAccountType {
     selectedAccountHash: string;
     selectedParentHash: string;
@@ -127,4 +132,5 @@ export type AppActionTypes =
     | SetBeaconMessageAction
     | SetBeaconLoadingAction
     | SetLaunchUrlAction
-    | SetPlatformAction;
+    | SetPlatformAction
+    | SetWalletInitedAction;

src/reduxContent/wallet/thunks.ts

@@ -49,6 +49,7 @@ import {
     setLedgerAction,
     setIsLedgerConnectingAction,
     changeAccountAction,
+    setWalletInitedAction,
 } from '../app/actions';
 
 import { clearNFTCollectionsAction, endNFTSyncAction } from '../nft/actions';
@@ -766,6 +767,7 @@ export function importAddressThunk(activeTab, seed, pkh?, activationCode?, usern
                     dispatch(setIsLoadingAction(false));
                     dispatch(push('/home'));
                     await dispatch(syncAccountOrIdentityThunk(publicKeyHash, publicKeyHash, AddressType.Manager));
+                    dispatch(setWalletInitedAction());
                 } else {
                     dispatch(createMessageAction('components.messageBar.messages.identity_exist', true));
                 }
@@ -859,6 +861,7 @@ export function loginThunk(loginType, walletLocation, walletFileName, password)
             dispatch(setIsLoadingAction(false));
             dispatch(push('/home'));
             await dispatch(syncWalletThunk());
+            dispatch(setWalletInitedAction());
         } catch (e) {
             console.error(e);
             dispatch(setIsLoadingAction(false));
@@ -890,6 +893,7 @@ export function connectLedgerThunk() {
                 dispatch(automaticAccountRefresh());
                 dispatch(push('/home'));
                 await dispatch(syncWalletThunk());
+                dispatch(setWalletInitedAction());
             } catch (e) {
                 console.error(e);
                 let message = e.name;

src/types/store.ts

@@ -25,6 +25,7 @@ export interface AppState {
     beaconLoading: boolean;
     launchUrl: string | null;
     platform: string;
+    isInitedWallet: boolean;
 }
 
 export interface WalletState {