diff --git a/src/components/AddressBlock/index.tsx b/src/components/AddressBlock/index.tsx
index 946e528e..22c998f2 100644
--- a/src/components/AddressBlock/index.tsx
+++ b/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) {
/>
)}
- goToAccount(publicKeyHash, 0, AddressType.NFTGallery)}>
- {t('general.nouns.nft_gallery')}
-
+ {!(platform.indexOf('Mac') === 0 && isAppStore) && (
+ goToAccount(publicKeyHash, 0, AddressType.NFTGallery)}>
+ {t('general.nouns.nft_gallery')}
+
+ )}
goToAccount(publicKeyHash, 0, AddressType.PlatformLiquidity)}>
{t('general.nouns.platform_liquidity')}
diff --git a/src/components/FaqBar/MessageContent.tsx b/src/components/FaqBar/MessageContent.tsx
new file mode 100644
index 00000000..32ce538c
--- /dev/null
+++ b/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 (
+
+ onClose()} />
+
+
+
+
+ Please visit our FAQ
+ openLink()}>FAQ
+ for questions about app features.
+
+
+
+
+ );
+};
+
+export default MessageContent;
diff --git a/src/components/FaqBar/index.tsx b/src/components/FaqBar/index.tsx
new file mode 100644
index 00000000..6185c2c7
--- /dev/null
+++ b/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 (
+ onClose()}
+ message={ openLinkHandler()} onClose={() => onClose()} />}
+ />
+ );
+}
+
+export default FaqBar;
diff --git a/src/containers/Home/index.tsx b/src/containers/Home/index.tsx
index 003e16d1..42442250 100644
--- a/src/containers/Home/index.tsx
+++ b/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((state) => state.app, shallowEqual);
+ const { isLedger, nodesStatus, isInitedWallet, platform } = useSelector((state) => state.app, shallowEqual);
const { nodesList, selectedNode } = useSelector((state) => state.settings, shallowEqual);
const isIdentities = useSelector(getIsIdentitesSelector);
const nodesErrorMessage = getNodesError(nodesStatus, nodesList, selectedNode);
@@ -57,6 +59,7 @@ function HomePage() {
+ {!isInitedWallet && platform.indexOf('Mac') === 0 && isAppStore && }
);
}
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 9cdb6f2c..f157c3ca 100644
--- a/src/locales/en-US.json
+++ b/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 More1>",
"beacon_title": "Dapp Interactions Unavailable"
+ },
+ "faq": {
+ "description": "Please visit our <1>FAQ1> for questions about app features."
}
},
"containers": {
diff --git a/src/reduxContent/app/actions.ts b/src/reduxContent/app/actions.ts
index 63c6fd61..102f4428 100644
--- a/src/reduxContent/app/actions.ts
+++ b/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,
+ };
+}
diff --git a/src/reduxContent/app/reducers.ts b/src/reduxContent/app/reducers.ts
index 3d00945e..b695cfdc 100644
--- a/src/reduxContent/app/reducers.ts
+++ b/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;
}
diff --git a/src/reduxContent/app/types.ts b/src/reduxContent/app/types.ts
index d601972e..cfd99097 100644
--- a/src/reduxContent/app/types.ts
+++ b/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;
diff --git a/src/reduxContent/wallet/thunks.ts b/src/reduxContent/wallet/thunks.ts
index e7d183ea..c44252da 100644
--- a/src/reduxContent/wallet/thunks.ts
+++ b/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;
diff --git a/src/types/store.ts b/src/types/store.ts
index e370d986..de092e4e 100644
--- a/src/types/store.ts
+++ b/src/types/store.ts
@@ -25,6 +25,7 @@ export interface AppState {
beaconLoading: boolean;
launchUrl: string | null;
platform: string;
+ isInitedWallet: boolean;
}
export interface WalletState {