From c8c85b28473618fc2d14b846bdad1d709eec5632 Mon Sep 17 00:00:00 2001 From: Peter Piekarczyk Date: Tue, 20 Jun 2023 10:19:46 -0500 Subject: [PATCH] fix wallet picker regression, hook up balances (#4192) --- .../components/BottomSheetWalletPicker.tsx | 10 +- .../navigation/AccountSettingsNavigator.tsx | 6 ++ .../screens/Unlocked/EditWalletsScreen.tsx | 95 ++++++++++--------- 3 files changed, 64 insertions(+), 47 deletions(-) diff --git a/packages/app-mobile/src/components/BottomSheetWalletPicker.tsx b/packages/app-mobile/src/components/BottomSheetWalletPicker.tsx index fdfbff79b..ea57b5936 100644 --- a/packages/app-mobile/src/components/BottomSheetWalletPicker.tsx +++ b/packages/app-mobile/src/components/BottomSheetWalletPicker.tsx @@ -1,6 +1,6 @@ import type { Wallet } from "~types/types"; -import { Suspense, useCallback, useState } from "react"; +import { Suspense, useCallback, useMemo, useState } from "react"; import { FlatList, View, Alert } from "react-native"; import { useSuspenseQuery } from "@apollo/client"; @@ -46,7 +46,10 @@ function Container({ navigation }) { const { dismiss } = useBottomSheetModal(); const [loadingId, setLoadingId] = useState(null); - const wallets = coalesceWalletData(data, allWallets); + const wallets = useMemo( + () => coalesceWalletData(data, allWallets), + [data, allWallets] + ); const handlePressSelect = useCallback( async (wallet: Wallet) => { @@ -73,6 +76,7 @@ function Container({ navigation }) { [dismiss, navigation] ); + const keyExtractor = (item) => item.publicKey; const renderItem = useCallback( ({ item }) => { return ( @@ -99,7 +103,7 @@ function Container({ navigation }) { item.publicKey} + keyExtractor={keyExtractor} renderItem={renderItem} ItemSeparatorComponent={PaddedListItemSeparator} showsVerticalScrollIndicator={false} diff --git a/packages/app-mobile/src/navigation/AccountSettingsNavigator.tsx b/packages/app-mobile/src/navigation/AccountSettingsNavigator.tsx index 4921300f6..18eb11af3 100644 --- a/packages/app-mobile/src/navigation/AccountSettingsNavigator.tsx +++ b/packages/app-mobile/src/navigation/AccountSettingsNavigator.tsx @@ -1,4 +1,5 @@ import type { ChannelAppUiClient } from "@coral-xyz/common"; +import type { StackScreenProps } from "@react-navigation/stack"; import type { Commitment } from "@solana/web3.js"; import { useEffect, useState } from "react"; @@ -107,6 +108,11 @@ type AccountSettingsParamList = { UserAccountMenu: undefined; }; +export type EditWalletsScreenProps = StackScreenProps< + AccountSettingsParamList, + "edit-wallets" +>; + const Stack = createStackNavigator(); export function AccountSettingsNavigator(): JSX.Element { const theme = useTheme(); diff --git a/packages/app-mobile/src/screens/Unlocked/EditWalletsScreen.tsx b/packages/app-mobile/src/screens/Unlocked/EditWalletsScreen.tsx index 0e21ce4c4..f4d806698 100644 --- a/packages/app-mobile/src/screens/Unlocked/EditWalletsScreen.tsx +++ b/packages/app-mobile/src/screens/Unlocked/EditWalletsScreen.tsx @@ -1,10 +1,9 @@ -import type { Blockchain } from "@coral-xyz/common"; import type { Wallet } from "@coral-xyz/recoil"; -import { Suspense, useCallback } from "react"; +import { Suspense, useCallback, useMemo } from "react"; import { FlatList } from "react-native"; -import { usePrimaryWallets } from "@coral-xyz/recoil"; +import { useSuspenseQuery } from "@apollo/client"; import { PaddedListItemSeparator } from "@coral-xyz/tamagui"; import { ErrorBoundary } from "react-error-boundary"; import { useSafeAreaInsets } from "react-native-safe-area-context"; @@ -16,30 +15,51 @@ import { ScreenLoading, } from "~components/index"; +import { gql } from "~src/graphql/__generated__"; import { useWallets } from "~src/hooks/wallets"; -import { useSession } from "~src/lib/SessionProvider"; +import { coalesceWalletData } from "~src/lib/WalletUtils"; +import { EditWalletsScreenProps } from "~src/navigation/AccountSettingsNavigator"; -function WalletList2({ onPressItem }) { +const QUERY_USER_WALLETS = gql(` + query BottomSheetUserWallets { + user { + id + wallets { + edges { + node { + ...WalletFragment + } + } + } + } + } +`); + +function Container({ navigation }: EditWalletsScreenProps) { + const { data } = useSuspenseQuery(QUERY_USER_WALLETS); const { allWallets } = useWallets(); - const { setActiveWallet } = useSession(); - const primaryWallets = usePrimaryWallets(); const insets = useSafeAreaInsets(); - const handleSelectWallet = useCallback( - async (wallet: Wallet) => { - await setActiveWallet(wallet); + const wallets = useMemo( + () => coalesceWalletData(data, allWallets), + [data, allWallets] + ); + + const handlePressEdit = useCallback( + (wallet: Wallet) => { + navigation.navigate("edit-wallets-wallet-detail", { + name: wallet.name, + publicKey: wallet.publicKey, + }); }, - [setActiveWallet] + [navigation] ); + const keyExtractor = (item: Wallet) => item.publicKey; const renderItem = useCallback( ({ item, index }) => { - const isPrimary = !!primaryWallets.find( - (x) => x.publicKey === item.publicKey - ); - const isFirst = index === 0; - const isLast = index === allWallets.length - 1; + const isLast = index === wallets.length - 1; return ( ); }, - [onPressItem, allWallets.length, handleSelectWallet, primaryWallets] + [handlePressEdit, wallets.length] ); return ( item.publicKey} + keyExtractor={keyExtractor} ItemSeparatorComponent={PaddedListItemSeparator} style={{ paddingTop: 16, @@ -83,29 +103,16 @@ function WalletList2({ onPressItem }) { ); } -function Container({ navigation }): JSX.Element { - const handlePressItem = ( - blockchain: Blockchain, - { name, publicKey, type }: Wallet - ) => { - navigation.navigate("edit-wallets-wallet-detail", { - blockchain, - publicKey, - name, - type, - }); - }; - - return ; -} - -export function EditWalletsScreen({ navigation }): JSX.Element { +export function EditWalletsScreen({ + navigation, + route, +}: EditWalletsScreenProps): JSX.Element { return ( } > }> - + );