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 More", "beacon_title": "Dapp Interactions Unavailable" + }, + "faq": { + "description": "Please visit our <1>FAQ 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 {