fix wallet picker regression, hook up balances (#4192)

coral-xyz · Jun 20, 2023 · c8c85b2 · c8c85b2 · vercel · Jun 20, 2023
1 parent 14953f3
commit c8c85b2
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 47 deletions.
diff --git 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<string | null>(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 }) {
       <BottomSheetTitle title="Wallets" />
       <FlatList
         data={wallets}
-        keyExtractor={(item) => 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
@@ -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<AccountSettingsParamList>();
 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
@@ -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,60 +15,81 @@ 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 (
         <RoundedContainerGroup
           disableTopRadius={!isFirst}
           disableBottomRadius={!isLast}
         >
           <ListItemWallet
-            loading={false}
             name={item.name}
-            publicKey={item.publicKey}
             type={item.type}
+            publicKey={item.publicKey}
             blockchain={item.blockchain}
+            isCold={item.isCold}
             selected={false}
-            primary={isPrimary}
-            onPressEdit={onPressItem}
-            onSelect={handleSelectWallet}
-            isCold={false}
-            balance={5555.34}
+            loading={false}
+            primary={item.isPrimary}
+            balance={item.balance}
+            onPressEdit={handlePressEdit}
+            onSelect={handlePressEdit}
           />
         </RoundedContainerGroup>
       );
     },
-    [onPressItem, allWallets.length, handleSelectWallet, primaryWallets]
+    [handlePressEdit, wallets.length]
   );
 
   return (
     <FlatList
-      data={allWallets}
+      data={wallets}
       renderItem={renderItem}
-      keyExtractor={(item) => 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 <WalletList2 onPressItem={handlePressItem} />;
-}
-
-export function EditWalletsScreen({ navigation }): JSX.Element {
+export function EditWalletsScreen({
+  navigation,
+  route,
+}: EditWalletsScreenProps): JSX.Element {
   return (
     <ErrorBoundary
       fallbackRender={({ error }) => <ScreenError error={error} />}
     >
       <Suspense fallback={<ScreenLoading />}>
-        <Container navigation={navigation} />
+        <Container navigation={navigation} route={route} />
       </Suspense>
     </ErrorBoundary>
   );