From ff00328c64bf65449dcda5942683bbc826a29016 Mon Sep 17 00:00:00 2001 From: Luis Perrone Date: Thu, 17 Oct 2024 15:01:49 -0500 Subject: [PATCH] Rebase and address comments --- .../xcshareddata/swiftpm/Package.resolved | 21 +- package.json | 1 + src/components/DynamicQrScanner.tsx | 19 +- .../{BalanceText.tsx => TotalFiatBalance.tsx} | 4 +- src/features/account/AccountsScreen.tsx | 395 ------------------ src/features/home/HomeNavigator.tsx | 115 ----- src/features/home/homeTypes.ts | 55 --- .../keystone/ConnectKeystoneStartScreen.tsx | 46 +- .../keystone/KeystoneAccountAssignScreen.tsx | 27 +- src/features/keystone/KeystoneModal.tsx | 8 +- src/features/keystone/ScanQrCodeScreen.tsx | 2 +- .../keystone/SelectKeystoneAccountsScreen.tsx | 57 ++- src/features/keystone/SignTx/SignTxModal.tsx | 42 +- .../onboarding/CreateImportAccountScreen.tsx | 8 +- src/navigation/TabBarNavigator.tsx | 210 ---------- .../pages/WalletPage/TokensScreen.tsx | 4 +- yarn.lock | 3 +- 17 files changed, 138 insertions(+), 879 deletions(-) rename src/components/{BalanceText.tsx => TotalFiatBalance.tsx} (98%) delete mode 100644 src/features/account/AccountsScreen.tsx delete mode 100644 src/features/home/HomeNavigator.tsx delete mode 100644 src/features/home/homeTypes.ts delete mode 100644 src/navigation/TabBarNavigator.tsx diff --git a/ios/HeliumWallet.xcworkspace/xcshareddata/swiftpm/Package.resolved b/ios/HeliumWallet.xcworkspace/xcshareddata/swiftpm/Package.resolved index 8c8230ba7..7ebcc34da 100644 --- a/ios/HeliumWallet.xcworkspace/xcshareddata/swiftpm/Package.resolved +++ b/ios/HeliumWallet.xcworkspace/xcshareddata/swiftpm/Package.resolved @@ -1,5 +1,4 @@ { - "originHash" : "e70d3525c8e2819a8b34f22909815dab5c700c25a06c32388f3930f7b3627768", "pins" : [ { "identity" : "maplibre-gl-native-distribution", @@ -9,7 +8,25 @@ "revision" : "ffda61e298c1490d4860d5184e80d618aaadc089", "version" : "5.13.0" } + }, + { + "identity" : "swiftui-charts", + "kind" : "remoteSourceControl", + "location" : "https://github.com/spacenation/swiftui-charts", + "state" : { + "revision" : "b044e7eb04d0026490eecb115f4fc07197dad942", + "version" : "1.1.0" + } + }, + { + "identity" : "swiftui-shapes", + "kind" : "remoteSourceControl", + "location" : "https://github.com/spacenation/swiftui-shapes.git", + "state" : { + "revision" : "c58b15c37eae9bd20525c6daa93a06a689ca75cb", + "version" : "1.1.0" + } } ], - "version" : 3 + "version" : 2 } diff --git a/package.json b/package.json index 82ceee6df..9ff1cb38a 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "@metaplex-foundation/js": "^0.19.5", "@metaplex-foundation/mpl-bubblegum": "0.6.0", "@metaplex-foundation/mpl-token-metadata": "2.10.0", + "@ngraveio/bc-ur": "^1.1.13", "@novalabsxyz/mobile-theme": "2.0.0-y.25", "@onsol/tldparser": "^0.5.3", "@react-native-async-storage/async-storage": "1.18.1", diff --git a/src/components/DynamicQrScanner.tsx b/src/components/DynamicQrScanner.tsx index 1402a3870..e3d8a3571 100644 --- a/src/components/DynamicQrScanner.tsx +++ b/src/components/DynamicQrScanner.tsx @@ -6,6 +6,7 @@ import { useNavigation } from '@react-navigation/native' import { useAsync } from 'react-async-hook' import { useTranslation } from 'react-i18next' import useAlert from '@hooks/useAlert' +import { useColors } from '@theme/themeHooks' import { CameraScannerLayout } from './CameraScannerLayout' import Box from './Box' import BackScreen from './BackScreen' @@ -20,6 +21,7 @@ const DynamicQrScanner = ({ onBarCodeScanned, progress }: Props) => { const [hasPermission, setHasPermission] = useState() const navigation = useNavigation() const { showOKCancelAlert } = useAlert() + const colors = useColors() const { t } = useTranslation() useEffect(() => { @@ -60,7 +62,7 @@ const DynamicQrScanner = ({ onBarCodeScanned, progress }: Props) => { } return ( - + {/* if permission is not granted, show a black screen and notice alert modal */} {hasPermission !== true && } @@ -69,7 +71,10 @@ const DynamicQrScanner = ({ onBarCodeScanned, progress }: Props) => { { position="absolute" bottom="10%" alignSelf="center" - paddingHorizontal="s" + paddingHorizontal="1" > - + {t('keystone.payment.scanTxQrcodeScreenSubtitle3')} diff --git a/src/components/BalanceText.tsx b/src/components/TotalFiatBalance.tsx similarity index 98% rename from src/components/BalanceText.tsx rename to src/components/TotalFiatBalance.tsx index 608213b2c..eceb0d50b 100644 --- a/src/components/BalanceText.tsx +++ b/src/components/TotalFiatBalance.tsx @@ -7,7 +7,7 @@ import { useTheme } from '@shopify/restyle' import Box from './Box' import Text from './Text' -const BalanceText = () => { +const TotalFiatBalance = () => { const { total: amount } = useBalance() const { colors } = useTheme() @@ -150,4 +150,4 @@ const BalanceText = () => { // ) // } -export default memo(BalanceText) +export default memo(TotalFiatBalance) diff --git a/src/features/account/AccountsScreen.tsx b/src/features/account/AccountsScreen.tsx deleted file mode 100644 index d008951fd..000000000 --- a/src/features/account/AccountsScreen.tsx +++ /dev/null @@ -1,395 +0,0 @@ -import { ReAnimatedBox } from '@components/AnimatedBox' -import Box from '@components/Box' -import { NavBarHeight } from '@components/NavBar' -import WarningBanner, { BannerType } from '@components/WarningBanner' -import BottomSheet from '@gorhom/bottom-sheet' -import { HNT_MINT } from '@helium/spl-utils' -import useAppear from '@hooks/useAppear' -import useDisappear from '@hooks/useDisappear' -import useHaptic from '@hooks/useHaptic' -import useLayoutHeight from '@hooks/useLayoutHeight' -import useSolanaHealth from '@hooks/useSolanaHealth' -import { useNavigation } from '@react-navigation/native' -import { CSAccount } from '@storage/cloudStorage' -import { useBackgroundStyle, useColors } from '@theme/themeHooks' -import React, { - FC, - memo, - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from 'react' -import { useAsync } from 'react-async-hook' -import { Platform, View } from 'react-native' -import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated' -import { useSafeAreaInsets } from 'react-native-safe-area-context' -import SharedGroupPreferences from 'react-native-shared-group-preferences' -import { useSelector } from 'react-redux' -import { RootNavigationProp } from '../../navigation/rootTypes' -import { useSolana } from '../../solana/SolanaProvider' -import { useAccountStorage } from '../../storage/AccountStorageProvider' -import { useAppStorage } from '../../storage/AppStorageProvider' -import { useNotificationStorage } from '../../storage/NotificationStorageProvider' -import { checkSecureAccount } from '../../storage/secureStorage' -import { RootState } from '../../store/rootReducer' -import { appSlice } from '../../store/slices/appSlice' -import { useAppDispatch } from '../../store/store' -import { AccountBalance } from '../../types/balance' -import { useBalance } from '../../utils/Balance' -import StatusBanner from '../StatusPage/StatusBanner' -import { HomeNavigationProp } from '../home/homeTypes' -import { useOnboarding } from '../onboarding/OnboardingProvider' -import { OnboardingOpt } from '../onboarding/onboardingTypes' -import AccountActionBar from './AccountActionBar' -import AccountTokenCurrencyBalance from './AccountTokenCurrencyBalance' -import AccountTokenList from './AccountTokenList' -import AccountView from './AccountView' -import AccountsTopNav from './AccountsTopNav' -import { ITEM_HEIGHT } from './TokenListItem' -import ServiceNavBar from '@components/ServiceNavBar' -import { SvgProps } from 'react-native-svg' -import { Color } from '@theme/theme' -import Wallet from '@assets/images/wallet.svg' -import Receive from '@assets/images/receive.svg' -import Send from '@assets/images/send.svg' -import Swap from '@assets/images/swap.svg' -import Store from '@assets/images/store.svg' - -const AccountsScreen = () => { - const widgetGroup = 'group.com.helium.mobile.wallet.widget' - const navigation = useNavigation() - const rootNav = useNavigation() - const { sortedAccounts, currentAccount, defaultAccountAddress } = - useAccountStorage() - const [bannerHeight, setBannerHeight] = useLayoutHeight() - const [navLayoutHeight, setNavLayoutHeight] = useLayoutHeight() - const [pageHeight, setPageHeight] = useLayoutHeight(0) - const { openedNotification } = useNotificationStorage() - const { balanceHistory } = useBalance() - const { locked, currency } = useAppStorage() - const { cluster } = useSolana() - const { reset } = useOnboarding() - const [onboardingType, setOnboardingType] = useState('import') - const [selectedBalance, setSelectedBalance] = useState() - const { top } = useSafeAreaInsets() - const bottomSheetRef = useRef(null) - const listAnimatedPos = useSharedValue(0) - const [topHeaderHeight, setTopHeaderHeight] = useState(0) - const topHeaderRef = useRef(null) - const bottomSheetStyle = useBackgroundStyle('cardBackground') - const dispatch = useAppDispatch() - const { triggerImpact } = useHaptic() - const colors = useColors() - const { showBanner } = useSelector((state: RootState) => state.app) - const { isHealthy } = useSolanaHealth() - - const actualTop = useMemo(() => { - if (showBanner) { - return 0 - } - return top - }, [top, showBanner]) - - const actualBannerHeight = useMemo(() => { - if (showBanner) { - return bannerHeight - } - return 0 - }, [bannerHeight, showBanner]) - - const snapPoints = useMemo(() => { - if (!pageHeight) return undefined - const collapsedHeight = ITEM_HEIGHT * 2 - // Get safe area top height - const expandedHeight = - pageHeight - - navLayoutHeight - - actualTop - - topHeaderHeight - - actualBannerHeight - return [collapsedHeight, expandedHeight] - }, [ - navLayoutHeight, - pageHeight, - actualTop, - topHeaderHeight, - actualBannerHeight, - ]) - - useAppear(() => { - reset() - }) - - useDisappear(() => { - setSelectedBalance(undefined) - }) - - // if user signs out from lockscreen - useEffect(() => { - if (sortedAccounts.length === 0) { - rootNav.replace('OnboardingNavigator') - } - }, [rootNav, sortedAccounts.length]) - - const showChart = useMemo(() => { - return balanceHistory?.length >= 2 - }, [balanceHistory]) - - const chartValues = useMemo(() => { - // Need to have at least a two days of data to display - if (!showChart) return - - return balanceHistory?.map((bh) => { - return { y: bh.balance, info: bh } - }) - }, [balanceHistory, showChart]) - - useEffect(() => { - if (currentAccount?.ledgerDevice) return - // if current account is keystone account , check pass - if (currentAccount?.keystoneDevice) return - const address = currentAccount?.address - if (address) checkSecureAccount(address) - }, [ - currentAccount?.address, - currentAccount?.ledgerDevice, - currentAccount?.keystoneDevice, - ]) - - useEffect(() => { - if (openedNotification && !locked) { - // navigate to notifications if we are coming from tapping a push - navigation.push('NotificationsNavigator') - } - }, [navigation, openedNotification, locked]) - - useEffect(() => { - if (!currentAccount?.address || onboardingType === 'import') return - - // Set onboarding back to import when navigating away - setOnboardingType('import') - }, [currentAccount?.address, onboardingType]) - - // Hook that is used for helium balance widget. - useAsync(async () => { - if (Platform.OS === 'ios') { - const defaultAccount = sortedAccounts.find( - (account: CSAccount) => account.address === defaultAccountAddress, - ) - - await SharedGroupPreferences.setItem( - 'heliumWalletWidgetKey', - { - defaultAccountAddress: defaultAccount?.solanaAddress, - defaultAccountAlias: defaultAccount?.alias, - currencyType: currency, - cluster, - }, - widgetGroup, - ) - } - }, [defaultAccountAddress, sortedAccounts]) - - const toggleWalletsVisible = useCallback(() => { - triggerImpact('light') - dispatch(appSlice.actions.toggleConnectedWallets()) - setSelectedBalance(undefined) - }, [dispatch, triggerImpact]) - - const handleBalanceHistorySelected = useCallback( - (accountBalance?: AccountBalance) => { - setSelectedBalance(accountBalance) - }, - [], - ) - - const onTouchStart = useCallback(() => { - handleBalanceHistorySelected(undefined) - }, [handleBalanceHistorySelected]) - - const animatedStyle = useAnimatedStyle(() => { - if (!snapPoints) { - return { - opacity: 1, - paddingBottom: 0, - display: 'flex', - } - } - - const realHeight = pageHeight + NavBarHeight - const diff = realHeight - listAnimatedPos.value - const opacity = - (listAnimatedPos.value - - actualTop - - topHeaderHeight - - navLayoutHeight - - actualBannerHeight - - pageHeight * 0.3) / - (snapPoints[1] - snapPoints[0] - pageHeight * 0.3) - - return { - opacity, - paddingBottom: diff - NavBarHeight, - display: opacity <= 0 ? 'none' : 'flex', - } - }) - - const headerAnimatedStyle = useAnimatedStyle(() => { - if (!snapPoints) { - return { - opacity: 0, - position: 'absolute', - top: actualTop + navLayoutHeight + actualBannerHeight, - left: 0, - right: 0, - } - } - - const opacity = - (listAnimatedPos.value - - actualTop - - topHeaderHeight - - navLayoutHeight - - actualBannerHeight) / - (snapPoints[1] - snapPoints[0]) - - return { - opacity: 1 - opacity, - position: 'absolute', - top: actualTop + navLayoutHeight + actualBannerHeight, - left: 0, - right: 0, - } - }) - - const handleTopHeaderLayout = useCallback(() => { - topHeaderRef.current?.measure((...args) => { - const [, , , height, , pageY] = args - - if (!height || !pageY) return - setTopHeaderHeight(height) - }) - }, [setTopHeaderHeight]) - - const RetractedView = useMemo(() => { - return ( - - - - - - - ) - }, [handleTopHeaderLayout, headerAnimatedStyle]) - - const handleIndicatorStyle = useMemo(() => { - return { - backgroundColor: colors.secondaryText, - } - }, [colors.secondaryText]) - - const bannerVisible = useMemo(() => { - if (cluster === 'devnet') { - return true - } - return !isHealthy - }, [cluster, isHealthy]) - - const [selectedValue, setSelectedValue] = useState('wallet') - - const tabData = useMemo((): Array<{ - value: string - Icon: FC - iconColor: Color - }> => { - return [ - { value: 'wallet', Icon: Wallet, iconColor: 'primaryText' }, - { - value: 'receive', - Icon: Receive, - iconColor: 'primaryText', - }, - { - value: 'send', - Icon: Send, - iconColor: 'primaryText', - }, - { - value: 'swap', - Icon: Swap, - iconColor: 'primaryText', - }, - { - value: 'store', - Icon: Store, - iconColor: 'primaryText', - }, - ] - }, []) - - const onItemSelected = useCallback((value) => { - setSelectedValue(value) - }, []) - - return ( - - - {bannerVisible && ( - - )} - - {RetractedView} - {currentAccount?.address && ( - - - {}} - /> - - )} - - - - - - - ) -} - -export default AccountsScreen diff --git a/src/features/home/HomeNavigator.tsx b/src/features/home/HomeNavigator.tsx deleted file mode 100644 index d28599486..000000000 --- a/src/features/home/HomeNavigator.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import ConfirmPinScreen from '@components/ConfirmPinScreen' -import { - createStackNavigator, - StackNavigationOptions, -} from '@react-navigation/stack' -import React, { memo } from 'react' -import AccountsScreen from '../account/AccountsScreen' -import AccountTokenScreen from '../account/AccountTokenScreen' -import AirdropScreen from '../account/AirdropScreen' -import AccountManageTokenListScreen from '../account/AccountManageTokenListScreen' -import AddNewContact from '../addressBook/AddNewContact' -import AddressBookNavigator from '../addressBook/AddressBookNavigator' -import AddressQrScanner from '../addressBook/AddressQrScanner' -import BurnScreen from '../burn/BurnScreen' -import NotificationsNavigator from '../notifications/NotificationsNavigator' -import AccountAssignScreen from '../onboarding/AccountAssignScreen' -import ImportAccountNavigator from '../onboarding/import/ImportAccountNavigator' -import PaymentQrScanner from '../payment/PaymentQrScanner' -import PaymentScreen from '../payment/PaymentScreen' -import RequestScreen from '../request/RequestScreen' -import SettingsNavigator from '../settings/SettingsNavigator' -import SwapNavigator from '../swaps/SwapNavigator' -import AddNewAccountNavigator from './addNewAccount/AddNewAccountNavigator' -import ImportSubAccountsScreen from '../onboarding/import/ImportSubAccountsScreen' -import KeystoneAccountAssignScreen from '../keystone/KeystoneAccountAssignScreen' - -const HomeStack = createStackNavigator() - -const screenModalOptions = { - presentation: 'modal', -} as StackNavigationOptions - -const navigatorScreenOptions = { - headerShown: false, -} as StackNavigationOptions - -const HomeStackScreen = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - ) -} -export default memo(HomeStackScreen) diff --git a/src/features/home/homeTypes.ts b/src/features/home/homeTypes.ts deleted file mode 100644 index 22d3bf7d6..000000000 --- a/src/features/home/homeTypes.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { StackNavigationProp } from '@react-navigation/stack' -import { RouteAccount } from '../onboarding/create/createAccountNavTypes' - -export type PaymentRouteParam = { - payer?: string - payments?: string - payee?: string - amount?: string - memo?: string - netType?: string - defaultTokenType?: string - mint?: string -} - -export type BurnRouteParam = { - address: string - amount?: string - memo?: string - isDelegate?: boolean - mint?: string -} - -export type HomeStackParamList = { - AccountsScreen: undefined - AccountManageTokenListScreen: undefined - AccountTokenScreen: { mint: string } - AccountAssignScreen: undefined | RouteAccount - KeystoneAccountAssignScreen: undefined - ConfirmPin: { - action: 'payment' - } - PaymentScreen: undefined | PaymentRouteParam - AirdropScreen: { mint: string } - BurnScreen: BurnRouteParam - PaymentQrScanner: undefined - RequestScreen: undefined - AddressBookNavigator: undefined - NotificationsNavigator: undefined - SettingsNavigator: undefined - AddNewContact: undefined - AddNewAccountNavigator: undefined - SwapNavigator: undefined - ReImportAccountNavigator: - | undefined - | { - screen: 'AccountImportScreen' - params: { - restoringAccount?: boolean - accountAddress?: string - } - } - VoteNavigator: undefined -} - -export type HomeNavigationProp = StackNavigationProp diff --git a/src/features/keystone/ConnectKeystoneStartScreen.tsx b/src/features/keystone/ConnectKeystoneStartScreen.tsx index b0b620a32..c868830f2 100644 --- a/src/features/keystone/ConnectKeystoneStartScreen.tsx +++ b/src/features/keystone/ConnectKeystoneStartScreen.tsx @@ -43,11 +43,11 @@ const CameraPermissionBottomSheetAlert = forwardRef( })) const bottomSheetModalRef = useRef(null) - const { backgroundStyle } = useOpacity('surfaceSecondary', 1) - const { m } = useSpacing() + const { backgroundStyle } = useOpacity('primaryBackground', 1) + const spacing = useSpacing() const { colors } = useTheme() const snapPoints = useMemo(() => ['40%'], []) - const sheetHandleStyle = useMemo(() => ({ padding: m }), [m]) + const sheetHandleStyle = useMemo(() => ({ padding: spacing.xl }), [spacing]) const { handleDismiss } = useBackHandler(bottomSheetModalRef) const handleIndicatorStyle = useMemo(() => { return { @@ -95,29 +95,30 @@ const WarningContent = () => { - + {t('keystone.connectKeystoneStart.warning') as string} ) @@ -139,7 +140,7 @@ const ConnectKeystoneStart = () => { @@ -147,10 +148,15 @@ const ConnectKeystoneStart = () => { - + {t('keystone.connectKeystoneStart.title') as string} - + {t('keystone.connectKeystoneStart.subtitle') as string} @@ -161,17 +167,13 @@ const ConnectKeystoneStart = () => { ) diff --git a/src/features/keystone/KeystoneAccountAssignScreen.tsx b/src/features/keystone/KeystoneAccountAssignScreen.tsx index bca13beab..e1828df10 100644 --- a/src/features/keystone/KeystoneAccountAssignScreen.tsx +++ b/src/features/keystone/KeystoneAccountAssignScreen.tsx @@ -82,7 +82,7 @@ const KeystoneAccountAssignScreen = () => { if (hasAccounts) { rootNav.reset({ index: 0, - routes: [{ name: 'TabBarNavigator' }], + routes: [{ name: 'ServiceSheetNavigator' }], }) } else { // eslint-disable-next-line @typescript-eslint/ban-ts-comment @@ -108,13 +108,14 @@ const KeystoneAccountAssignScreen = () => { paddingHorizontal="xl" > { { { style={{ height: 20, width: 20 }} tintColors={{ true: colors.primaryText, - false: colors.transparent10, + false: colors.secondaryText, }} - onCheckColor={colors.secondary} + onCheckColor={colors.primaryBackground} onTintColor={colors.primaryText} - tintColor={colors.transparent10} + tintColor={colors.secondaryText} onFillColor={colors.primaryText} onAnimationType="fill" offAnimationType="fill" @@ -182,9 +183,9 @@ const KeystoneAccountAssignScreen = () => { /> {t('accountAssign.setDefault')} @@ -192,7 +193,7 @@ const KeystoneAccountAssignScreen = () => { {!loading && existingNames?.has(alias) ? ( - + {t('accountAssign.nameExists')} ) : null} @@ -202,11 +203,9 @@ const KeystoneAccountAssignScreen = () => { )} diff --git a/src/features/keystone/KeystoneModal.tsx b/src/features/keystone/KeystoneModal.tsx index a1beed44f..0236523d2 100644 --- a/src/features/keystone/KeystoneModal.tsx +++ b/src/features/keystone/KeystoneModal.tsx @@ -43,7 +43,7 @@ const KeystoneModal = forwardRef( useImperativeHandle(ref, () => ({ showKeystoneModal })) const eventEmitter = useMemo(() => new EventEmitter(), []) const { currentAccount } = useAccountStorage() - const { backgroundStyle } = useOpacity('surfaceSecondary', 1) + const { backgroundStyle } = useOpacity('primaryBackground', 1) const bottomSheetModalRef = useRef(null) const [solSignRequest, setSolSignRequest] = useState() @@ -114,9 +114,9 @@ const KeystoneModal = forwardRef( [], ) const snapPoints = useMemo(() => ['100%'], []) - const { m } = useSpacing() + const { xl } = useSpacing() const { colors } = useTheme() - const sheetHandleStyle = useMemo(() => ({ padding: m }), [m]) + const sheetHandleStyle = useMemo(() => ({ padding: xl }), [xl]) const { handleDismiss } = useBackHandler(bottomSheetModalRef) const handleIndicatorStyle = useMemo(() => { @@ -125,7 +125,7 @@ const KeystoneModal = forwardRef( } }, [colors.secondaryText]) return ( - + { // eslint-disable-next-line react-hooks/exhaustive-deps }, [isScanQrCodeComplete]) return ( - + { flexDirection="row" minHeight={72} alignItems="center" - paddingHorizontal="m" - paddingVertical="m" + paddingHorizontal="4" + paddingVertical="4" borderBottomColor="primaryBackground" borderBottomWidth={index === derivationAccounts.length - 1 ? 0 : 1} > - + {item.path} @@ -161,7 +161,7 @@ const SelectKeystoneAccountsScreen = () => { )} @@ -178,11 +178,11 @@ const SelectKeystoneAccountsScreen = () => { style={{ height: 18, width: 18 }} tintColors={{ true: colors.primaryText, - false: colors.transparent10, + false: colors.secondaryText, }} - onCheckColor={colors.secondary} + onCheckColor={colors.primaryBackground} onTintColor={colors.primaryText} - tintColor={colors.transparent10} + tintColor={colors.secondaryText} onFillColor={colors.primaryText} onAnimationType="fill" offAnimationType="fill" @@ -193,28 +193,29 @@ const SelectKeystoneAccountsScreen = () => { ) }, - [ - colors.primaryText, - colors.secondary, - colors.transparent10, - derivationAccounts, - selected, - ], + [colors, derivationAccounts, selected], ) return ( {t('keystone.selectKeystoneAccounts.title')} - + {t('keystone.selectKeystoneAccounts.subtitle')} { /> diff --git a/src/features/keystone/SignTx/SignTxModal.tsx b/src/features/keystone/SignTx/SignTxModal.tsx index 6abd97d9d..97dc4bb2a 100644 --- a/src/features/keystone/SignTx/SignTxModal.tsx +++ b/src/features/keystone/SignTx/SignTxModal.tsx @@ -83,9 +83,9 @@ const DaynamicQrScanner = ({ onBarCodeScanned, progress }: Props) => { bottom="15%" width="95%" alignSelf="center" - paddingHorizontal="s" + paddingHorizontal="1" > - + {t('keystone.payment.scanTxQrcodeScreenSubtitle3')} @@ -134,7 +134,7 @@ const ScanTxQrcodeScreen = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [signature, progress]) - const hitSlop = useHitSlop('l') + const hitSlop = useHitSlop('4') return ( {openQrCodeScanner && ( @@ -146,22 +146,22 @@ const ScanTxQrcodeScreen = ({ - + {openQrCodeScanner && ( - + {t('keystone.scanQrCode')} )} { eventEmitter.emit('closeKeystoneSignatureModal', '') }} @@ -172,16 +172,20 @@ const ScanTxQrcodeScreen = ({ flex={1} alignItems="center" justifyContent="space-between" - padding="l" + padding="4" marginTop="xl" > - + - + {t('keystone.payment.scanTxQrcodeScreenTitle')} - + {t('keystone.payment.scanTxQrcodeScreenSubtitle1')} {/* show the sol sign request qrcode */} @@ -191,24 +195,20 @@ const ScanTxQrcodeScreen = ({ cborData={solSignRequestUr.cbor.toString('hex')} /> )} - + {t('keystone.payment.scanTxQrcodeScreenSubtitle2')} )} diff --git a/src/features/onboarding/CreateImportAccountScreen.tsx b/src/features/onboarding/CreateImportAccountScreen.tsx index 16de71f0f..824a7ba07 100644 --- a/src/features/onboarding/CreateImportAccountScreen.tsx +++ b/src/features/onboarding/CreateImportAccountScreen.tsx @@ -76,9 +76,13 @@ const CreateImportAccountScreen = () => { - + - + {t('accountSetup.createImport.keystone')} diff --git a/src/navigation/TabBarNavigator.tsx b/src/navigation/TabBarNavigator.tsx deleted file mode 100644 index 6f1bbaa07..000000000 --- a/src/navigation/TabBarNavigator.tsx +++ /dev/null @@ -1,210 +0,0 @@ -import React, { FC, useCallback, useEffect, useMemo } from 'react' -import { SvgProps } from 'react-native-svg' -import { - BottomTabBarProps, - createBottomTabNavigator, -} from '@react-navigation/bottom-tabs' -import { Edge, useSafeAreaInsets } from 'react-native-safe-area-context' -import Dollar from '@assets/images/dollar.svg' -import Gem from '@assets/images/collectableIcon.svg' -import Transactions from '@assets/images/transactions.svg' -import Governance from '@assets/images/courthouse.svg' -import { Portal } from '@gorhom/portal' -import NavBar, { NavBarHeight } from '@components/NavBar' -import { Color } from '@theme/theme' -import SafeAreaBox from '@components/SafeAreaBox' -import Box from '@components/Box' -import useEnrichedTransactions from '@hooks/useEnrichedTransactions' -import useHaptic from '@hooks/useHaptic' -import Globe from '@assets/images/earth-globe.svg' -import { useDispatch } from 'react-redux' -import { useGovernance } from '@storage/GovernanceProvider' -import GovernanceNavigator from '../features/governance/GovernanceNavigator' -import { useAppStorage } from '../storage/AppStorageProvider' -import { useAccountStorage } from '../storage/AccountStorageProvider' -import SolanaMigration from '../features/migration/SolanaMigration' -import HomeNavigator from '../features/home/HomeNavigator' -import CollectablesNavigator from '../features/collectables/CollectablesNavigator' -import ActivityNavigator from '../features/activity/ActivityNavigator' -import BrowserNavigator from '../features/browser/BrowserNavigator' -import { appSlice } from '../store/slices/appSlice' -import { useSolana } from '../solana/SolanaProvider' - -const Tab = createBottomTabNavigator() - -function MyTabBar({ state, navigation }: BottomTabBarProps) { - const { hasNewTransactions, resetNewTransactions } = useEnrichedTransactions() - const { triggerImpact } = useHaptic() - const { hasUnseenProposals } = useGovernance() - - const tabData = useMemo((): Array<{ - value: string - Icon: FC - iconColor: Color - hasBadge?: boolean - }> => { - return [ - { value: 'account', Icon: Dollar, iconColor: 'primaryText' }, - { - value: 'collectables', - Icon: Gem, - iconColor: 'primaryText', - hasBadge: false, - }, - { - value: 'activity', - Icon: Transactions, - iconColor: 'primaryText', - hasBadge: hasNewTransactions && state.index !== 2, - }, - { - value: 'governance', - Icon: Governance, - iconColor: 'primaryText', - hasBadge: hasUnseenProposals && state.index !== 3, - }, - { value: 'browser', Icon: Globe, iconColor: 'primaryText' }, - ] - }, [hasNewTransactions, hasUnseenProposals, state.index]) - - const selectedValue = tabData[state.index].value - const safeEdges = useMemo(() => ['bottom'] as Edge[], []) - - const onPress = useCallback( - (type: string) => { - triggerImpact('light') - const index = tabData.findIndex((item) => item.value === type) - const isSelected = selectedValue === type - const event = navigation.emit({ - type: 'tabPress', - target: state.routes[index || 0].key, - canPreventDefault: true, - }) - - // Check if activty tab is selected and has new transactions - if (selectedValue === 'activity' && hasNewTransactions) { - resetNewTransactions() - } - - if (!isSelected && !event.defaultPrevented) { - // The `merge: true` option makes sure that the params inside the tab screen are preserved - navigation.navigate({ - name: state.routes[index || 0].name, - merge: true, - params: undefined, - }) - } - }, - [ - hasNewTransactions, - navigation, - resetNewTransactions, - selectedValue, - state.routes, - tabData, - triggerImpact, - ], - ) - - const onLongPress = useCallback( - (type: string) => { - const index = tabData.findIndex((item) => item.value === type) - - navigation.emit({ - type: 'tabLongPress', - target: state.routes[index || 0].key, - }) - }, - [navigation, state.routes, tabData], - ) - - return ( - - - - - - - - ) -} - -const TabBarNavigator = () => { - const dispatch = useDispatch() - - const { doneSolanaMigration, manualMigration } = useAppStorage() - const { cluster, updateCluster } = useSolana() - const { bottom } = useSafeAreaInsets() - const { currentAccount } = useAccountStorage() - const { anchorProvider } = useSolana() - - useEffect(() => { - dispatch(appSlice.actions.setShowBanner(cluster === 'devnet')) - }, [dispatch, cluster]) - - // Switch to mainnet-beta if migration is complete & user hasn't already migrated - useEffect(() => { - if (!currentAccount?.solanaAddress) { - return - } - - if ( - !doneSolanaMigration['mainnet-beta']?.includes( - currentAccount.solanaAddress, - ) && - !manualMigration['mainnet-beta'].includes(currentAccount.solanaAddress) - ) { - updateCluster('mainnet-beta') - } - }, [ - currentAccount, - doneSolanaMigration, - cluster, - manualMigration, - updateCluster, - ]) - - // keystone account do not need to migrate - return ( - <> - {currentAccount?.solanaAddress && - !currentAccount?.keystoneDevice && - anchorProvider && - !doneSolanaMigration[cluster]?.includes(currentAccount.solanaAddress) && - !manualMigration[cluster]?.includes(currentAccount.solanaAddress) && ( - - - - )} - } - screenOptions={{ - headerShown: false, - lazy: true, - }} - sceneContainerStyle={{ - paddingBottom: NavBarHeight + bottom - 5, - }} - > - - - - - - - - ) -} - -export default TabBarNavigator diff --git a/src/services/WalletService/pages/WalletPage/TokensScreen.tsx b/src/services/WalletService/pages/WalletPage/TokensScreen.tsx index 99ede9cdc..37b31229d 100644 --- a/src/services/WalletService/pages/WalletPage/TokensScreen.tsx +++ b/src/services/WalletService/pages/WalletPage/TokensScreen.tsx @@ -1,6 +1,6 @@ import Box from '@components/Box' import React, { useCallback, useEffect, useMemo } from 'react' -import BalanceText from '@components/BalanceText' +import TotalFiatBalance from '@components/TotalFiatBalance' import { AppState, FlatList, Platform, RefreshControl } from 'react-native' import { useBalance } from '@utils/Balance' import { DC_MINT, truthy } from '@helium/spl-utils' @@ -199,7 +199,7 @@ const TokensScreen = () => { - + ) diff --git a/yarn.lock b/yarn.lock index 0eab974a4..6e938f61e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4808,7 +4808,7 @@ __metadata: languageName: node linkType: hard -"@ngraveio/bc-ur@npm:^1.1.5, @ngraveio/bc-ur@npm:^1.1.6": +"@ngraveio/bc-ur@npm:^1.1.13, @ngraveio/bc-ur@npm:^1.1.5, @ngraveio/bc-ur@npm:^1.1.6": version: 1.1.13 resolution: "@ngraveio/bc-ur@npm:1.1.13" dependencies: @@ -13898,6 +13898,7 @@ __metadata: "@metaplex-foundation/js": ^0.19.5 "@metaplex-foundation/mpl-bubblegum": 0.6.0 "@metaplex-foundation/mpl-token-metadata": 2.10.0 + "@ngraveio/bc-ur": ^1.1.13 "@novalabsxyz/mobile-theme": 2.0.0-y.25 "@onsol/tldparser": ^0.5.3 "@react-native-async-storage/async-storage": 1.18.1