Z 260 incoming transfers

api/schema.graphql

@@ -604,6 +604,7 @@ type Query {
   tokenMetadata(address: UAddress!): TokenMetadata
   tokens(input: TokensInput! = {}): [Token!]!
   transaction(id: ID!): Transaction
+  transfer(id: ID!): Transferlike
   user: User!
 }
 

api/src/feat/transfers/transfers.resolver.ts

@@ -1,11 +1,11 @@
-import { Context, Parent, Resolver, Subscription } from '@nestjs/graphql';
+import { Args, Context, Info, Parent, Query, Resolver, Subscription } from '@nestjs/graphql';
 import {
   TRANSFER_VALUE_FIELDS_SHAPE,
   TransferValueSelectFields,
   TransfersService,
 } from './transfers.service';
 import { TransferSubscriptionInput } from './transfers.input';
-import { Transfer, TransferDetails } from './transfers.model';
+import { Transfer, TransferDetails, Transferlike } from './transfers.model';
 import { GraphQLResolveInfo } from 'graphql';
 import { getShape } from '~/core/database';
 import { Input, InputArgs } from '~/common/decorators/input.decorator';
@@ -16,6 +16,7 @@ import { TransferSubscriptionPayload, transferTrigger } from './transfers.events
 import { ComputedField } from '~/common/decorators/computed.decorator';
 import { DecimalScalar } from '~/common/scalars/Decimal.scalar';
 import Decimal from 'decimal.js';
+import { NodeArgs } from '../nodes/nodes.input';
 
 @Resolver(() => TransferDetails)
 export class TransfersResolver {
@@ -24,6 +25,11 @@ export class TransfersResolver {
     private pubsub: PubsubService,
   ) {}
 
+  @Query(() => Transferlike, { nullable: true })
+  async transfer(@Args() { id }: NodeArgs, @Info() info: GraphQLResolveInfo) {
+    return this.service.selectUnique(id, getShape(info));
+  }
+
   @ComputedField(() => DecimalScalar, TRANSFER_VALUE_FIELDS_SHAPE, { nullable: true })
   async value(@Parent() parent: TransferValueSelectFields): Promise<Decimal | null> {
     return this.service.value(parent);

api/src/feat/transfers/transfers.service.ts

@@ -24,11 +24,11 @@ export class TransfersService {
     private prices: PricesService,
   ) {}
 
-  async selectUnique(id: uuid, shape?: ShapeFunc<typeof e.Transfer>) {
+  async selectUnique(id: uuid, shape?: ShapeFunc<typeof e.Transferlike>) {
     return this.db.queryWith(
       { id: e.uuid },
       ({ id }) =>
-        e.select(e.Transfer, (transfer) => ({
+        e.select(e.Transferlike, (transfer) => ({
           filter_single: { id },
           ...shape?.(transfer),
         })),

app/package.json

@@ -94,6 +94,7 @@
     "jotai": "^2.8.4",
     "jotai-effect": "^1.0.0",
     "jotai-immer": "^0.4.1",
+    "jotai-scope": "^0.7.0",
     "jwt-decode": "^4.0.0",
     "lib": "workspace:*",
     "luxon": "^3.4.4",

app/src/api/field-handlers.ts

@@ -1,6 +1,6 @@
 import { MissingFieldHandler, ROOT_TYPE } from 'relay-runtime';
 
-const NODE_RESOLVERS = new Set(['node', 'proposal', 'transaction', 'message']);
+const NODE_RESOLVERS = new Set(['node', 'proposal', 'transaction', 'message', 'transfer']);
 
 export const missingFieldHandlers: MissingFieldHandler[] = [
   {

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

@@ -1,12 +1,12 @@
 import { Panes } from '#/layout/Panes';
 import { Slot } from 'expo-router';
 import { ActivityPane } from './index';
 
 export default function ActivityLayout() {
   return (
-    <Panes>
+    <>
       <ActivityPane />
       <Slot />
-    </Panes>
+    </>
   );
 }

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

@@ -1,5 +1,4 @@
 import { Searchbar } from '#/Appbar/Searchbar';
-import { FirstPane } from '#/layout/FirstPane';
 import { PaneSkeleton } from '#/skeleton/PaneSkeleton';
 import { withSuspense } from '#/skeleton/withSuspense';
 import { AccountParams } from '../../_layout';
@@ -26,6 +25,7 @@
   activity_ActivityPaneQuery,
   activity_ActivityPaneQuery$data,
 } from '~/api/__generated__/activity_ActivityPaneQuery.graphql';
+import { Pane } from '#/layout/Pane';
 
 const Query = graphql`
   query activity_ActivityPaneQuery($account: UAddress!) {
@@ -78,7 +78,7 @@
     });
 
   return (
-    <FirstPane flex>
+    <Pane flex>
       <FlashList
         ListHeaderComponent={
           <>
@@ -115,7 +115,7 @@
               ) : null,
             )
             .with({ __typename: 'Transfer' }, (t) => (
               <IncomingTransferItem transfer={t as any} containerStyle={containerStyle} />
             ))
             .otherwise(() => {
               throw new Error('Unexpected item type');
@@ -130,7 +130,7 @@
         keyExtractor={(item) => (typeof item === 'string' ? item : item.id)}
         getItemType={(item) => (typeof item === 'string' ? 'section' : item.__typename)}
       />
-    </FirstPane>
+    </Pane>
   );
 }
 
@@ -163,7 +163,7 @@
   return match(item)
     .with({ __typename: 'Transaction', status: 'Pending' }, () => 'Pending approval' as const)
     .with({ __typename: 'Transaction', status: 'Scheduled' }, () => 'Scheduled' as const)
     .with({ __typename: 'Message', signature: P.nullish }, (m) => 'Pending approval' as const)
     .otherwise((v) => {
       const t = asDateTime(v.timestamp).startOf('day');
 

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

@@ -0,0 +1,199 @@
+import { withSuspense } from '#/skeleton/withSuspense';
+import { zUuid } from '~/lib/zod';
+import { AccountParams } from '../../../_layout';
+import { useLocalParams } from '~/hooks/useLocalParams';
+import { Pane } from '#/layout/Pane';
+import { graphql } from 'relay-runtime';
+import { useLazyQuery } from '~/api';
+import { Id_TransferScreenQuery } from '~/api/__generated__/Id_TransferScreenQuery.graphql';
+import { Scrollable } from '#/Scrollable';
+import { TokenIcon } from '#/token/TokenIcon';
+import { OverlayIcon } from '#/layout/OverlayIcon';
+import { ContactsOutlineIcon, ReceiveIcon, ShareIcon, WebIcon } from '@theme/icons';
+import { View } from 'react-native';
+import { ICON_SIZE } from '@theme/paper';
+import { Text } from 'react-native-paper';
+import { createStyles, useStyles } from '@theme/styles';
+import { Timestamp } from '#/format/Timestamp';
+import { Appbar } from '#/Appbar/Appbar';
+import { TokenAmount } from '#/token/TokenAmount';
+import { FiatValue } from '#/FiatValue';
+import { ItemList } from '#/layout/ItemList';
+import { ListItem } from '#/list/ListItem';
+import { AddressIcon } from '#/Identicon/AddressIcon';
+import { Chip } from '#/Chip';
+import { SelectableAddress } from '#/address/SelectableAddress';
+import { asChain, asUAddress } from 'lib';
+import { Link, useRouter } from 'expo-router';
+import Decimal from 'decimal.js';
+import { Actions } from '#/layout/Actions';
+import { Button } from '#/Button';
+import { share } from '~/lib/share';
+import { CHAINS } from 'chains';
+import { PaneSkeleton } from '#/skeleton/PaneSkeleton';
+
+const Query = graphql`
+  query Id_TransferScreenQuery($id: ID!, $account: UAddress!) {
+    transfer(id: $id) @required(action: THROW) {
+      id
+      tokenAddress
+      timestamp
+      from
+      amount
+      value
+      systxHash
+      token {
+        ...TokenIcon_token
+        ...TokenAmount_token
+        balance(input: { account: $account })
+        price {
+          id
+          usd
+        }
+      }
+      account {
+        id
+        address
+      }
+    }
+  }
+`;
+
+const TransferScreenParams = AccountParams.extend({ id: zUuid() });
+
+function TransferScreen() {
+  const { id, account } = useLocalParams(TransferScreenParams);
+  const { styles } = useStyles(stylesheet);
+  const router = useRouter();
+
+  const { transfer: t } = useLazyQuery<Id_TransferScreenQuery>(Query, { id, account });
+  const chain = asChain(t.tokenAddress);
+  const from = asUAddress(t.from, chain);
+
+  const blockExplorer = CHAINS[chain].blockExplorers?.default;
+  const explorerUrl = blockExplorer && `${blockExplorer.url}/tx/${t.systxHash}`;
+
+  return (
+    <Pane flex>
+      <Scrollable>
+        <Appbar mode="small" />
+        <View style={styles.centered}>
+          <View style={styles.icon}>
+            <TokenIcon token={t.token} size={ICON_SIZE.extraLarge} />
+            <OverlayIcon icon={ReceiveIcon} parentSize={ICON_SIZE.extraLarge} />
+          </View>
+
+          <Text variant="titleLarge" style={styles.received}>
+            Received <Timestamp timestamp={t.timestamp} />
+          </Text>
+
+          <Text variant="headlineMedium">
+            {/* TODO: generic token resolution */}
+            {t.token && <TokenAmount token={t.token} amount={t.amount} />}
+
+            <Text style={styles.value}>
+              {' ('}
+              <FiatValue value={t.amount} />
+              {')'}
+            </Text>
+          </Text>
+        </View>
+
+        <ItemList>
+          <ListItem
+            leading={<AddressIcon address={from} />}
+            overline="From"
+            headline={<SelectableAddress address={from} />}
+            trailing={
+              <Chip
+                mode="outlined"
+                icon={(props) => (
+                  <ContactsOutlineIcon {...props} color={styles.contactChip.color} />
+                )}
+                onPress={() =>
+                  router.push({ pathname: `/(nav)/contacts/[address]`, params: { address: from } })
+                }
+              >
+                Contact
+              </Chip>
+            }
+            containerStyle={styles.item}
+          />
+
+          <ListItem
+            leading={<AddressIcon address={t.account.address} />}
+            overline="Account"
+            headline={<SelectableAddress address={t.account.address} />}
+            containerStyle={styles.item}
+            trailing={({ Text }) =>
+              t.token && (
+                <View style={styles.balanceContainer}>
+                  <Text>
+                    <TokenAmount token={t.token} amount={t.token.balance} />
+                  </Text>
+
+                  {t.token.price && (
+                    <Text>
+                      <FiatValue value={new Decimal(t.token.balance).mul(t.token.price.usd)} />
+                    </Text>
+                  )}
+                </View>
+              )
+            }
+          />
+        </ItemList>
+
+        {explorerUrl && (
+          <Actions horizontal style={styles.actions}>
+            <Link href={explorerUrl} asChild>
+              <Button mode="contained-tonal" icon={WebIcon}>
+                Explorer
+              </Button>
+            </Link>
+
+            <Button
+              mode="contained-tonal"
+              icon={ShareIcon}
+              onPress={() => share({ url: explorerUrl })}
+            >
+              Share
+            </Button>
+          </Actions>
+        )}
+      </Scrollable>
+    </Pane>
+  );
+}
+
+const stylesheet = createStyles(({ colors }) => ({
+  centered: {
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  icon: {
+    marginBottom: 16,
+  },
+  received: {
+    color: colors.onSurfaceVariant,
+  },
+  value: {
+    color: colors.tertiary,
+  },
+  item: {
+    backgroundColor: colors.surface,
+  },
+  balanceContainer: {
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+  },
+  contactChip: {
+    color: colors.onSurface,
+  },
+  actions: {
+    marginVertical: 8,
+  },
+}));
+
+export default withSuspense(TransferScreen, <PaneSkeleton />);
+
+export { ErrorBoundary } from '#/ErrorBoundary';

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

@@ -1,4 +1,3 @@
-import { FirstPane } from '#/layout/FirstPane';
 import { PaneSkeleton } from '#/skeleton/PaneSkeleton';
 import { withSuspense } from '#/skeleton/withSuspense';
 import { useLocalParams } from '~/hooks/useLocalParams';
@@ -18,6 +17,7 @@ import { ITEM_LIST_GAP } from '#/layout/ItemList';
 import { graphql } from 'relay-runtime';
 import { HomePaneQuery } from '~/api/__generated__/HomePaneQuery.graphql';
 import { useLazyQuery } from '~/api/useLazyQuery';
+import { Pane } from '#/layout/Pane';
 
 const Query = graphql`
   query HomePaneQuery($account: UAddress!, $chain: Chain!) {
@@ -62,7 +62,7 @@ function HomePane_() {
     .sort((a, b) => b.value.comparedTo(a.value));
 
   return (
-    <FirstPane flex padding={false}>
+    <Pane flex padding={false}>
       <FlatList
         contentContainerStyle={styles.container}
         ListHeaderComponent={
@@ -95,7 +95,7 @@ function HomePane_() {
         keyExtractor={(item) => item.id}
         showsVerticalScrollIndicator={false}
       />
-    </FirstPane>
+    </Pane>
   );
 }
 

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

@@ -11,7 +11,6 @@ import { ListItem } from '#/list/ListItem';
 import { AddCircleIcon } from '#/AddCircleIcon';
 import { PolicyItem } from '#/policy/PolicyItem';
 import { usePath } from '#/usePath';
-import { FirstPane } from '#/layout/FirstPane';
 import { useRouteInfo, useRouter } from 'expo-router/build/hooks';
 import { ItemList } from '#/layout/ItemList';
 import { PolicySuggestions } from '#/account/PolicySuggestions';
@@ -24,6 +23,7 @@ import { graphql } from 'relay-runtime';
 import { useLazyQuery } from '~/api';
 import { settings_AccountSettingsQuery } from '~/api/__generated__/settings_AccountSettingsQuery.graphql';
 import { UpgradePolicyItem } from '#/account/UpgradePolicyItem';
+import { Pane } from '#/layout/Pane';
 
 const Query = graphql`
   query settings_AccountSettingsQuery($account: UAddress!) {
@@ -79,7 +79,7 @@ function AccountSettingsPane_() {
   const upgradePolicy = a.policies.find((p) => p.key === PolicyPresetKey.upgrade);
 
   return (
-    <FirstPane fixed>
+    <Pane fixed>
       <ScrollView contentContainerStyle={styles.pane} showsVerticalScrollIndicator={false}>
         <Searchbar
           leading={MenuOrSearchIcon}
@@ -186,7 +186,7 @@ function AccountSettingsPane_() {
           </Link>
         </ItemList>
       </ScrollView>
-    </FirstPane>
+    </Pane>
   );
 }