Merge pull request #271 from zallo-labs/Z-307-improved-send-screen

Z 307 improved send screen

app/src/app/(modal)/_layout.tsx

@@ -1,16 +1,8 @@
-import { Slot, Stack } from 'expo-router';
+import { Slot } from 'expo-router';
 
 export default function SheetLayout() {
  return (
  <>
- <Stack.Screen
- options={{
- presentation: 'transparentModal',
- headerShown: false,
- animation: 'fade',
- animationDuration: 100,
- }}
- />
  <Slot />
  </>
  );

app/src/app/(nav)/[account]/(home)/_layout.tsx

@@ -1,11 +1,10 @@
 import { Panes } from '#/layout/Panes';
-import { Slot, Stack } from 'expo-router';
+import { Slot } from 'expo-router';
 import { HomePane } from './index';
 
 export default function HomeLayout() {
  return (
  <Panes>
- <Stack.Screen options={{ headerShown: false }} />
  <HomePane />
  <Slot />
  </Panes>

app/src/app/(nav)/[account]/(home)/activity/_layout.tsx

@@ -1,4 +1,3 @@
-import { Panes } from '#/layout/Panes';
 import { Slot } from 'expo-router';
 import { ActivityPane } from './index';
 

app/src/app/(nav)/[account]/(home)/index.tsx

@@ -63,17 +63,17 @@ function HomePane_() {
 
  return (
  <Pane flex padding={false}>
+ <Appbar
+ leading="menu"
+ center
+ headline={<AccountSelector account={account} />}
+ style={styles.appbar}
+ noPadding
+ />
  <FlatList
  contentContainerStyle={styles.container}
  ListHeaderComponent={
  <>
- <Appbar
- leading="menu"
- center
- headline={<AccountSelector account={account} />}
- style={styles.appbar}
- noPadding
- />
  <QuickActions account={address} />
  <ActivitySection account={account} user={user} />
  <AccountValue tokens={tokens} />

app/src/app/(nav)/[account]/(home)/send.tsx

@@ -0,0 +1,135 @@
+import { PaneSkeleton } from '#/skeleton/PaneSkeleton';
+import { withSuspense } from '#/skeleton/withSuspense';
+import { zUAddress } from '~/lib/zod';
+import { AccountParams } from '../_layout';
+import { useLocalParams } from '~/hooks/useLocalParams';
+import { graphql } from 'relay-runtime';
+import { useState } from 'react';
+import Decimal from 'decimal.js';
+import { z } from 'zod';
+import { Pane } from '#/layout/Pane';
+import { TokenAmountInput } from '#/token/TokenAmountInput';
+import { useLazyQuery } from '~/api';
+import { send_SendScreen2Query } from '~/api/__generated__/send_SendScreen2Query.graphql';
+import { useSelectedToken } from '~/hooks/useSelectToken';
+import { asChain } from 'lib';
+import { Scrollable } from '#/Scrollable';
+import { Appbar } from '#/Appbar/Appbar';
+import { View } from 'react-native';
+import { createStyles, useStyles } from '@theme/styles';
+import { SendMode, SendModeChips } from '#/send/SendModeChips';
+import { ItemList } from '#/layout/ItemList';
+import { SendAccount } from '#/send/SendAccount';
+import { SendTo } from '#/send/SendTo';
+import { match } from 'ts-pattern';
+import { TransferMode } from '#/send/TransferMode';
+import { TransferFromMode } from '#/send/TransferFromMode';
+import { Text } from 'react-native-paper';
+
+const Query = graphql`
+ query send_SendScreen2Query($account: UAddress!, $token: UAddress!) {
+ token(address: $token) @required(action: THROW) {
+ id
+ address
+ decimals
+ balance(input: { account: $account })
+ price {
+ usd
+ }
+ ...TokenAmountInput_token
+ ...SendAccount_token @arguments(account: $account)
+ ...TransferMode_token
+ ...TransferFromMode_token
+ }
+
+ account(address: $account) @required(action: THROW) {
+ address
+ ...useProposeTransaction_account
+ ...SendAccount_account
+ ...TransferMode_account
+ ...TransferFromMode_account
+ }
+ }
+`;
+
+export const SendScreenParams = AccountParams.extend({
+ to: zUAddress().optional(),
+});
+export type SendScreenParams = z.infer<typeof SendScreenParams>;
+
+function SendScreen() {
+ const params = useLocalParams(SendScreenParams);
+ const { styles } = useStyles(stylesheet);
+ const chain = asChain(params.account);
+
+ const { token, account } = useLazyQuery<send_SendScreen2Query>(Query, {
+ account: params.account,
+ token: useSelectedToken(chain),
+ });
+
+ const [amount, setAmount] = useState<Decimal>(new Decimal(0));
+ const [mode, setMode] = useState<SendMode>('transfer');
+ const [to, setTo] = useState(params.to);
+
+ const warning = amount.gt(token.balance) && 'Insufficient balance';
+
+ return (
+ <Pane flex padding={false}>
+ <Scrollable contentContainerStyle={styles.container}>
+ <Appbar noPadding />
+ <View style={styles.inputContainer}>
+ <TokenAmountInput
+ account={account.address}
+ amount={amount}
+ onChange={setAmount}
+ token={token}
+ />
+ <Text variant="headlineMedium" style={styles.warning}>
+ {warning}
+ </Text>
+ </View>
+
+ <View style={styles.sendModeChipsContainer}>
+ <SendModeChips mode={mode} onChange={setMode} />
+ </View>
+
+ <ItemList>
+ <SendAccount account={account} token={token} style={styles.item} />
+ <SendTo chain={chain} to={to} onChange={setTo} containerStyle={styles.item} />
+ </ItemList>
+
+ {match(mode)
+ .with('transfer', () => (
+ <TransferMode account={account} token={token} to={to} amount={amount} />
+ ))
+ .with('transferFrom', () => (
+ <TransferFromMode account={account} token={token} to={to} amount={amount} />
+ ))
+ .exhaustive()}
+ </Scrollable>
+ </Pane>
+ );
+}
+
+const stylesheet = createStyles(({ colors, padding, negativeMargin }) => ({
+ container: {
+ gap: 8,
+ paddingHorizontal: padding,
+ },
+ inputContainer: {
+ marginVertical: 16,
+ },
+ sendModeChipsContainer: {
+ marginHorizontal: negativeMargin,
+ },
+ item: {
+ backgroundColor: colors.surface,
+ },
+ warning: {
+ color: colors.warning,
+ },
+}));
+
+export default withSuspense(SendScreen, <PaneSkeleton />);
+
+export { ErrorBoundary } from '#/ErrorBoundary';

app/src/app/(nav)/[account]/_layout.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useLayoutEffect } from 'react';
-import { Redirect, Stack, useLocalSearchParams, useRouter } from 'expo-router';
+import { Redirect, Slot, useLocalSearchParams, useRouter } from 'expo-router';
 import {
  ErrorBoundary as BaseErrorBoundary,
  ErrorBoundaryProps,
@@ -9,7 +9,6 @@ import NotFound from '~/app/+not-found';
 import { useLocalParams } from '~/hooks/useLocalParams';
 import { useSelectedAccount, useSetSelectedAccont } from '~/hooks/useSelectedAccount';
 import { zUAddress } from '~/lib/zod';
-import { AppbarHeader } from '#/Appbar/AppbarHeader';
 import { withSuspense } from '#/skeleton/withSuspense';
 import { Splash } from '#/Splash';
 import { graphql } from 'relay-runtime';
@@ -52,12 +51,7 @@ export function AccountLayout() {
  // Redirect to the home page if account isn't found
  if (!found) return <Redirect href="/" />;
 
- return (
- <>
- <Stack.Screen options={{ headerShown: false }} />
- <Stack screenOptions={{ header: (props) => <AppbarHeader {...props} /> }} />
- </>
- );
+ return <Slot />;
 }
 
 export default withSuspense(AccountLayout, <Splash />);