Fragmentize home screen

zallo-labs · Jul 17, 2023 · 44015fb · 44015fb
1 parent f829220
commit 44015fb
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 24 deletions.
diff --git a/app/src/components/AccountSelector/AccountSelector.tsx b/app/src/components/AccountSelector/AccountSelector.tsx
@@ -1,34 +1,38 @@
 import { makeStyles } from '@theme/makeStyles';
 import { TouchableOpacity } from 'react-native';
 import { Text } from 'react-native-paper';
-import { AddressLabel } from '../address/AddressLabel';
 import { AddressIcon } from '../Identicon/AddressIcon';
 import { useNavigation } from '@react-navigation/native';
-import { Suspense } from 'react';
-import { LineSkeleton } from '../skeleton/LineSkeleton';
-import { Address } from 'lib';
 import { Chevron } from '../Chevron';
+import { FragmentType, gql, useFragment } from '@api/gen';
+
+const FragmentDoc = gql(/* GraphQL */ `
+ fragment AccountSelector_account on Account {
+ id
+ address
+ name
+ }
+`);
 
 export interface AccountSelectorParams {
- account: Address;
+ account: FragmentType<typeof FragmentDoc>;
 }
 
-export const AccountSelector = ({ account }: AccountSelectorParams) => {
+export const AccountSelector = (props: AccountSelectorParams) => {
  const styles = useStyles();
  const { navigate } = useNavigation();
+ const account = useFragment(FragmentDoc, props.account);
 
  return (
  <TouchableOpacity
  style={styles.container}
- onPress={() => navigate('AccountsSheet', { account })}
+ onPress={() => navigate('AccountsSheet', { account: account.address })}
  >
- <AddressIcon address={account} size={styles.icon.fontSize} />
+ <AddressIcon address={account.address} size={styles.icon.fontSize} />
 
- <Suspense fallback={<LineSkeleton />}>
- <Text variant="titleLarge" numberOfLines={1} style={styles.text}>
- <AddressLabel address={account} />
- </Text>
- </Suspense>
+ <Text variant="titleLarge" numberOfLines={1} style={styles.text}>
+ {account.name}
+ </Text>
 
  <Chevron style={styles.text} />
  </TouchableOpacity>

diff --git a/app/src/screens/home/HomeAppbar.tsx b/app/src/screens/home/HomeAppbar.tsx
@@ -3,25 +3,37 @@ import { StyleSheet, View } from 'react-native';
 import { Appbar as BaseAppbar } from 'react-native-paper';
 import { AccountSelector } from '~/components/AccountSelector/AccountSelector';
 import { useNavigation } from '@react-navigation/native';
-import { Address } from 'lib';
+import { FragmentType, gql, useFragment } from '@api/gen';
+
+const FragmentDoc = gql(/* GraphQL */ `
+ fragment HomeAppbar_account on Account {
+ id
+ address
+ ...AccountSelector_account
+ }
+`);
 
 export interface HomeAppbarProps {
- account: Address;
+ account: FragmentType<typeof FragmentDoc>;
 }
 
-export const HomeAppbar = ({ account }: HomeAppbarProps) => {
+export const HomeAppbar = (props: HomeAppbarProps) => {
  const { navigate } = useNavigation();
+ const account = useFragment(FragmentDoc, props.account);
 
  return (
  <BaseAppbar.Header>
  <View style={styles.selectorContainer}>
  <AccountSelector account={account} />
  </View>
 
- <BaseAppbar.Action icon={ScanIcon} onPress={() => navigate('Scan', { account })} />
+ <BaseAppbar.Action
+ icon={ScanIcon}
+ onPress={() => navigate('Scan', { account: account.address })}
+ />
  <BaseAppbar.Action
  icon={SettingsOutlineIcon}
- onPress={() => navigate('Settings', { account })}
+ onPress={() => navigate('Settings', { account: account.address })}
  />
  </BaseAppbar.Header>
  );

diff --git a/app/src/screens/home/HomeScreen.tsx b/app/src/screens/home/HomeScreen.tsx
@@ -7,7 +7,21 @@ import { Tabs } from './Tabs';
 import { Splash } from '~/components/Splash';
 import { AccountValue } from './AccountValue';
 import { Address } from 'lib';
-import { useAccountIds } from '@api/account';
+import { NotFound } from '~/components/NotFound';
+import { gql } from '@api/gen';
+import { useSuspenseQuery } from '@apollo/client';
+import { HomeQuery, HomeQueryVariables } from '@api/gen/graphql';
+import { HomeDocument } from '@api/generated';
+
+gql(/* GraphQL */ `
+ query Home($account: Address) {
+ account(input: { address: $account }) {
+ id
+ address
+ ...HomeAppbar_account
+ }
+ }
+`);
 
 export interface HomeScreenParams {
  account?: Address;
@@ -16,18 +30,21 @@ export interface HomeScreenParams {
 export type HomeScreenProps = StackNavigatorScreenProps<'Home'>;
 
 export const HomeScreen = withSuspense(({ route }: HomeScreenProps) => {
- const accounts = useAccountIds();
- const account = route.params?.account ?? accounts[0];
+ const { account } = useSuspenseQuery<HomeQuery, HomeQueryVariables>(HomeDocument, {
+ variables: { account: route.params.account },
+ }).data;
+
+ if (!account) return <NotFound name="Account" />;
 
  return (
  <Screen>
  <HomeAppbar account={account} />
 
- <AccountValue account={account} />
+ <AccountValue account={account.address} />
 
- <QuickActions account={account} />
+ <QuickActions account={account.address} />
 
- <Tabs account={account} />
+ <Tabs account={account.address} />
  </Screen>
  );
 }, Splash);