Skip to content

Commit

Permalink
Add setting up antenna screen
Browse files Browse the repository at this point in the history
  • Loading branch information
bryzettler committed Aug 9, 2023
1 parent 13b05b0 commit b11628f
Show file tree
Hide file tree
Showing 5 changed files with 219 additions and 20 deletions.
28 changes: 11 additions & 17 deletions src/features/collectables/AntennaSetupScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useEffect, useState, useMemo, useCallback, memo } from 'react'
import BackScreen from '@components/BackScreen'
import { ReAnimatedBlurBox } from '@components/AnimatedBox'
import { ReAnimatedBox } from '@components/AnimatedBox'
import Box from '@components/Box'
import ButtonPressable from '@components/ButtonPressable'
import CircleLoader from '@components/CircleLoader'
Expand All @@ -18,16 +18,19 @@ import {
import { useEntityKey } from '@hooks/useEntityKey'
import { useIotInfo } from '@hooks/useIotInfo'
import { Edge } from 'react-native-safe-area-context'
import { CollectableStackParamList } from './collectablesTypes'
import { DelayedFadeIn } from '@components/FadeInOut'
import {
CollectableNavigationProp,
CollectableStackParamList,
} from './collectablesTypes'
import { parseH3BNLocation } from '../../utils/h3'
import * as Logger from '../../utils/logger'
import { TabBarNavigationProp } from '../../navigation/rootTypes'

const BUTTON_HEIGHT = 65
type Route = RouteProp<CollectableStackParamList, 'AntennaSetupScreen'>
const AntennaSetupScreen = () => {
const { t } = useTranslation()
const navigation = useNavigation<TabBarNavigationProp>()
const nav = useNavigation<CollectableNavigationProp>()
const route = useRoute<Route>()
const { collectable } = route.params
const entityKey = useEntityKey(collectable)
Expand Down Expand Up @@ -76,11 +79,7 @@ const AntennaSetupScreen = () => {
elevation,
decimalGain: gain,
})
setUpdating(false)
navigation.reset({
index: 0,
routes: [{ name: 'Collectables' }],
})
nav.push('SettingUpAntennaScreen')
} catch (error) {
setUpdating(false)
Logger.error(error)
Expand All @@ -95,20 +94,15 @@ const AntennaSetupScreen = () => {
setUpdating,
setTransactionError,
submitUpdateEntityInfo,
navigation,
nav,
])

const showError = useMemo(() => {
if (transactionError) return transactionError
}, [transactionError])

return (
<ReAnimatedBlurBox
flexDirection="row"
position="absolute"
height="100%"
width="100%"
>
<ReAnimatedBox flex={1} entering={DelayedFadeIn}>
<BackScreen
headerTopMargin="l"
padding="none"
Expand Down Expand Up @@ -205,7 +199,7 @@ const AntennaSetupScreen = () => {
</KeyboardAvoidingView>
</TouchableWithoutFeedback>
</BackScreen>
</ReAnimatedBlurBox>
</ReAnimatedBox>
)
}

Expand Down
5 changes: 5 additions & 0 deletions src/features/collectables/CollectablesNavigator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import ClaimingRewardsScreen from './ClaimingRewardsScreen'
import CollectionScreen from './CollectionScreen'
import NftDetailsScreen from './NftDetailsScreen'
import AntennaSetupScreen from './AntennaSetupScreen'
import SettingUpAntennaScreen from './SettingUpAntennaScreen'

const CollectablesStack = createStackNavigator()

Expand All @@ -46,6 +47,10 @@ const CollectablesStackScreen = () => {
name="AntennaSetupScreen"
component={AntennaSetupScreen}
/>
<CollectablesStack.Screen
name="SettingUpAntennaScreen"
component={SettingUpAntennaScreen}
/>
<CollectablesStack.Screen
name="PaymentScreen"
component={PaymentScreen}
Expand Down
196 changes: 196 additions & 0 deletions src/features/collectables/SettingUpAntennaScreen.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
import React, { memo, useCallback } from 'react'
import Box from '@components/Box'
import { useAccountStorage } from '@storage/AccountStorageProvider'
import { useNavigation } from '@react-navigation/native'
import { TabBarNavigationProp } from 'src/navigation/rootTypes'
import { ReAnimatedBox } from '@components/AnimatedBox'
import { DelayedFadeIn } from '@components/FadeInOut'
import BackArrow from '@assets/images/backArrow.svg'
import AccountIcon from '@components/AccountIcon'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
import Text from '@components/Text'
import ButtonPressable from '@components/ButtonPressable'
import IndeterminateProgressBar from '@components/IndeterminateProgressBar'
import { parseTransactionError } from '@utils/solanaUtils'
import { useBN } from '@hooks/useBN'
import { useCurrentWallet } from '@hooks/useCurrentWallet'
import { useSolOwnedAmount } from '@helium/helium-react-hooks'
import { RootState } from '../../store/rootReducer'

const SettingUpAntennaScreen = () => {
const { currentAccount } = useAccountStorage()
const navigation = useNavigation<TabBarNavigationProp>()
const wallet = useCurrentWallet()
const solBalance = useBN(useSolOwnedAmount(wallet).amount)
const { bottom } = useSafeAreaInsets()

const { t } = useTranslation()
const solanaPayment = useSelector(
(reduxState: RootState) => reduxState.solana.payment,
)

const onReturn = useCallback(() => {
// Reset Collectables stack to first screen
navigation.reset({
index: 0,
routes: [{ name: 'Collectables' }],
})
}, [navigation])

if (!currentAccount) {
return null
}

return (
<ReAnimatedBox
entering={DelayedFadeIn}
flex={1}
backgroundColor="secondaryBackground"
>
<Box
backgroundColor="transparent"
flex={1}
padding="m"
alignItems="center"
justifyContent="center"
>
<Box flexGrow={1} justifyContent="center" alignItems="center">
<Box
shadowColor="black"
shadowOpacity={0.4}
shadowOffset={{ width: 0, height: 10 }}
shadowRadius={10}
elevation={12}
>
<AccountIcon address={currentAccount?.solanaAddress} size={76} />
</Box>
{solanaPayment && !solanaPayment.error && !solanaPayment.loading && (
<Animated.View
style={{ alignItems: 'center' }}
entering={FadeIn}
exiting={FadeOut}
>
<Text variant="h1Medium" color="white" marginTop="xl">
{t('antennaSetupScreen.settingUpComplete')}
</Text>
<Text
variant="body2"
color="secondaryText"
marginTop="xl"
numberOfLines={2}
textAlign="center"
>
{t('antennaSetupScreen.settingUpCompleteBody')}
</Text>
</Animated.View>
)}

{solanaPayment?.error && (
<Animated.View
style={{
alignItems: 'center',
}}
entering={FadeIn}
exiting={FadeOut}
>
<Text
variant="h1Medium"
color="white"
marginTop="xl"
textAlign="center"
>
{t('collectablesScreen.rewardsError')}
</Text>
<Text
variant="body2"
color="secondaryText"
marginTop="xl"
numberOfLines={2}
textAlign="center"
>
{parseTransactionError(
solBalance,
solanaPayment?.error?.message,
)}
</Text>
</Animated.View>
)}

{!solanaPayment && (
<Animated.View
style={{ alignItems: 'center' }}
entering={FadeIn}
exiting={FadeOut}
>
<Text
textAlign="center"
variant="h1Medium"
color="white"
marginTop="xl"
>
{t('antennaSetupScreen.settingUpError')}
</Text>
</Animated.View>
)}

{solanaPayment && solanaPayment.loading && (
<Animated.View
style={{ alignItems: 'center' }}
entering={FadeIn}
exiting={FadeOut}
>
<Text
variant="h1Medium"
color="white"
marginTop="xl"
textAlign="center"
>
{t('antennaSetupScreen.settingUp')}
</Text>
<Text
variant="body0"
color="grey600"
textAlign="center"
marginBottom="m"
marginTop="s"
>
{t('antennaSetupScreen.settingUpBody')}
</Text>
<Box flexDirection="row" marginHorizontal="xxl" marginTop="m">
<IndeterminateProgressBar paddingHorizontal="l" />
</Box>
</Animated.View>
)}
</Box>
<Box
width="100%"
justifyContent="flex-end"
style={{ marginBottom: bottom }}
>
<ButtonPressable
marginHorizontal="m"
marginBottom="m"
height={65}
borderRadius="round"
backgroundColor="white"
backgroundColorOpacity={0.1}
backgroundColorOpacityPressed={0.05}
titleColorPressedOpacity={0.3}
title={t('collectablesScreen.returnToCollectables')}
titleColor="white"
onPress={onReturn}
disabled={solanaPayment && solanaPayment.loading}
LeadingComponent={
<BackArrow width={16} height={15} color="white" />
}
/>
</Box>
</Box>
</ReAnimatedBox>
)
}

export default memo(SettingUpAntennaScreen)
4 changes: 1 addition & 3 deletions src/features/collectables/collectablesTypes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,13 @@ export type CollectableStackParamList = {
AntennaSetupScreen: {
collectable: HotspotWithPendingRewards
}
SettingUpAntennaScreen: undefined
PaymentScreen: undefined | PaymentRouteParam

ClaimRewardsScreen: {
hotspot: HotspotWithPendingRewards
}
ClaimAllRewardsScreen: undefined
ClaimingRewardsScreen: undefined

CollectionScreen: {
collection: Collectable[]
}
Expand All @@ -44,7 +43,6 @@ export type CollectableStackParamList = {
TransferCompleteScreen: {
collectable: CompressedNFT | Collectable
}

AddNewContact: undefined
PaymentQrScanner: undefined
AddressBookNavigator: undefined
Expand Down
6 changes: 6 additions & 0 deletions src/locales/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -332,6 +332,12 @@ export default {
gainPlaceholder: 'TX / RX Gain (dBi)',
elevationPlaceholder: 'Elevation (meters)',
submit: 'Update Antenna',
settingUp: 'Setting up your antenna...',
settingUpBody: 'Please wait while we update your Antenna!',
settingUpError: 'Antenna Setup failed. Please try again later.',
settingUpComplete: 'Antenna Setup!',
settingUpCompleteBody:
'We’ve updated the gain and elevation of your antenna.',
},
swapsScreen: {
title: 'Swap my Tokens',
Expand Down

0 comments on commit b11628f

Please sign in to comment.