Skip to content
Permalink
Browse files

(Feature) UI changes required for phase0 (#1520)

* add: option to remove splashdesktop via env

* add: option popup add to home on desktop

* add: hide profile icon by default on send/receive

* add: reverse topbar children so it is aligned to the right

* add: snapshots

* fix: tabsview test

* fix: market condition in config.js

* refactor: app.js
  • Loading branch information
sirpy committed Mar 25, 2020
1 parent dda90ff commit 0288975ec2d316e2d5fd82b9d31f972e3582626c
@@ -91,3 +91,9 @@ REACT_APP_DELAY_MSG_NETWORK_DISCONNECTION
# The URL to the Dashboard
# Required.
REACT_APP_DASHBOARD_URL=

#boolean, whether to show the "for best experience move to mobile" on desktop (default false)
REACT_APP_SPLASH_DESKTOP=

#boolean, whether to show the "add icon to home screen" on desktop (default false)
REACT_APP_ADDTOHOME_DESKTOP=
@@ -1,6 +1,6 @@
// @flow
import { isMobile } from 'mobile-device-detect'
import React, { useEffect, useMemo, useState } from 'react'
import React, { memo, useCallback, useEffect, useState } from 'react'
import { Platform, SafeAreaView, StyleSheet } from 'react-native'
import PaperProvider from 'react-native-paper/src/core/Provider'
import InternetConnection from './components/common/connectionDialog/internetConnection'
@@ -13,10 +13,29 @@ import Splash from './components/splash/Splash'
import isWebApp from './lib/utils/isWebApp'
import logger from './lib/logger/pino-logger'
import { SimpleStoreDialog } from './components/common/dialogs/CustomDialog'
import Config from './config/config'
import * as serviceWorker from './serviceWorker'

const log = logger.child({ from: 'App' })
let serviceWorkerRegistred = false
const DisconnectedSplash = () => <Splash animation={false} />

const SplashOrRouter = memo(({ store }) => {
const isLoggedIn = !!store.get('isLoggedIn')
const [useDesktop, setUseDesktop] = useState(Config.showSplashDesktop === false || isLoggedIn)
const continueWithDesktop = useCallback(() => setUseDesktop(true), [setUseDesktop])

return (
<InternetConnection onDisconnect={DisconnectedSplash} isLoggedIn={isLoggedIn}>
{!isMobile && !useDesktop ? (
<SplashDesktop onContinue={continueWithDesktop} urlForQR={window.location.href} />
) : (
<RouterSelector />
)}
</InternetConnection>
)
})

const App = () => {
const store = SimpleStore.useStore()
useEffect(() => {
@@ -53,35 +72,17 @@ const App = () => {
// onRecaptcha = (token: string) => {
// userStorage.setProfileField('recaptcha', token, 'private')
// }
const [useDesktop, setUseDesktop] = useState(store.get('isLoggedIn') === true)

const continueWithDesktop = () => {
setUseDesktop(true)
}

const SplashOrRouter =
!isMobile && !useDesktop ? (
<SplashDesktop onContinue={continueWithDesktop} urlForQR={window.location.href} />
) : (
<RouterSelector />
)

return useMemo(
() => (
<PaperProvider theme={theme}>
<SafeAreaView style={styles.safeAreaView}>
<React.Fragment>
<SimpleStoreDialog />
<LoadingIndicator />
<InternetConnection onDisconnect={() => <Splash animation={false} />} isLoggedIn={store.get('isLoggedIn')}>
{SplashOrRouter}
{/* <ReCaptcha sitekey={Config.recaptcha} action="auth" verifyCallback={this.onRecaptcha} /> */}
</InternetConnection>
</React.Fragment>
</SafeAreaView>
</PaperProvider>
),
[isMobile, useDesktop]
return (
<PaperProvider theme={theme}>
<SafeAreaView style={styles.safeAreaView}>
<React.Fragment>
<SimpleStoreDialog />
<LoadingIndicator />
<SplashOrRouter store={store} />
</React.Fragment>
</SafeAreaView>
</PaperProvider>
)
}

@@ -1,6 +1,6 @@
import React, { useEffect } from 'react'
import { AsyncStorage, Image, View } from 'react-native'
import { isMobileSafari } from 'mobile-device-detect'
import { isMobile, isMobileSafari } from 'mobile-device-detect'
import moment from 'moment'
import SimpleStore from '../../../lib/undux/SimpleStore'
import { useDialog } from '../../../lib/undux/utils/dialog'
@@ -16,10 +16,9 @@ import addAppIlustration from '../../../assets/addApp.svg'
import Icon from '../view/Icon'
import userStorage from '../../../lib/gundb/UserStorage'
import API from '../../../lib/API/api'

import Text from '../../common/view/Text'

import logger from '../../../lib/logger/pino-logger'
import Config from '../../../config/config'

const log = logger.child({ from: 'AddWebApp' })

@@ -198,6 +197,10 @@ const AddWebApp = props => {
}

const checkShowDialog = async () => {
//dont show add to home on pure desktop
if (isMobile === false && Config.showAddToHomeDesktop === false) {
return
}
const [lastCheck, nextCheck, skipCount, lastClaim, iOSAdded] = await Promise.all([
AsyncStorage.getItem('GD_AddWebAppLastCheck'),
AsyncStorage.getItem('GD_AddWebAppNextCheck'),
@@ -13,21 +13,21 @@ import BigGoodDollar from './BigGoodDollar'
* @param {React.Node} props.children
* @returns {React.Node}
*/
const TopBar = ({ hideBalance, push, children }) => {
const TopBar = ({ hideBalance, push, children, hideProfile = true }) => {
const store = GDStore.useStore()
const { balance } = store.get('account')
const { avatar } = store.get('profile')

return (
<Section style={styles.topBar}>
<Section.Row alignItems="center">
<Avatar source={avatar} onPress={push && (() => push('Profile'))} />
<Section.Row alignItems="center" style={{ flexDirection: 'row-reverse' }}>
{/*
if children exist, it will be rendered
if children=undefined and hideBalance=false, BigGoodDollar will be rendered
if children=undefined and hideBalance=true, nothing will be rendered
*/}
{children ? children : !hideBalance && <BigGoodDollar number={balance} />}
{hideProfile !== true && <Avatar source={avatar} onPress={push && (() => push('Profile'))} />}
</Section.Row>
</Section>
)

0 comments on commit 0288975

Please sign in to comment.
You can’t perform that action at this time.