Z 305 fix linking token not found

app/package.json

@@ -92,6 +92,7 @@
  "immer": "^10.1.1",
  "isows": "^1.0.4",
  "jotai": "^2.8.4",
+ "jotai-effect": "^1.0.0",
  "jotai-immer": "^0.4.1",
  "jwt-decode": "^4.0.0",
  "lib": "workspace:*",

app/src/api/environment.ts

@@ -43,13 +43,11 @@ export async function getEnvironment({ key, approver, persist }: EnvironmentConf
  if (environment) return environment;
 
  const store = new Store(recordSource, {
- gcReleaseBufferSize: 100, // gc exempt queries
- queryCacheExpirationTime: 10 * 60_000,
+ gcReleaseBufferSize: 100, // Queries not retained excluded from GC
  gcScheduler: (run) => {
  InteractionManager.runAfterInteractions(run);
  },
  });
- // persist && store.notify(undefined, true); // Invalidate persisted data
 
  const network = createNetworkLayer({
  store,

app/src/api/index.ts

@@ -1,2 +1,3 @@
 export * from './environment';
-export * from './useMutation';
+export * from './useLazyQuery';
+export * from './useMutation';

app/src/api/useLazyQuery.ts

@@ -0,0 +1,43 @@
+import { useLazyLoadQuery } from 'react-relay';
+import {
+ GraphQLTaggedNode,
+ OperationType,
+ VariablesOf,
+ getRequest,
+ createOperationDescriptor,
+} from 'relay-runtime';
+import {
+ useSetRequestLastFetched,
+ useTtlFetchPolicy,
+ useTtlLastUpdated,
+} from './useTtlFetchPolicy';
+import { useEffect } from 'react';
+
+export type QueryOptions = Parameters<typeof useLazyLoadQuery>[2];
+
+export function useLazyQuery<TQuery extends OperationType>(
+ gqlQuery: GraphQLTaggedNode,
+ variables: VariablesOf<TQuery>,
+ options?: QueryOptions,
+): TQuery['response'] {
+ const descriptor = createOperationDescriptor(
+ getRequest(gqlQuery),
+ variables,
+ options?.networkCacheConfig,
+ );
+ const requestId = descriptor.request.identifier;
+
+ const query = useLazyLoadQuery<TQuery>(gqlQuery, variables, {
+ fetchPolicy: useTtlFetchPolicy(requestId),
+ fetchKey: useTtlLastUpdated(),
+ ...options,
+ });
+
+ const setLastFetched = useSetRequestLastFetched(requestId);
+ useEffect(() => {
+ // Query is only fetched once per mount of a unique request
+ setLastFetched(Date.now());
+ }, [setLastFetched, requestId]);
+
+ return query;
+}

app/src/api/useTtlFetchPolicy.ts

@@ -0,0 +1,43 @@
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+import { atomFamily } from 'jotai/utils';
+import { FetchPolicy } from 'relay-runtime';
+import { RequestIdentifier } from 'relay-runtime/lib/util/getRequestIdentifier';
+import { atomEffect } from 'jotai-effect';
+
+const TTL = 5 * 60_000;
+const ttlLastUpdated = atom(Date.now());
+export function useTtlLastUpdated() {
+ return useAtomValue(ttlLastUpdated);
+}
+
+const updateTtlEffect = atomEffect((get, set) => {
+ // Update TTL immediately if it's been more than TTL since last update
+ if (get.peek(ttlLastUpdated) < Date.now() - TTL) set(ttlLastUpdated, Date.now());
+
+ const timer = setInterval(() => {
+ set(ttlLastUpdated, Date.now());
+ }, TTL);
+
+ return () => clearInterval(timer);
+});
+
+const requestLastFetched = atomFamily((_requestId: RequestIdentifier) => atom<number>(0));
+
+export function useSetRequestLastFetched(id: RequestIdentifier) {
+ return useSetAtom(requestLastFetched(id));
+}
+
+const requestFetchPolicy = atomFamily((requestId: RequestIdentifier) =>
+ atom((get): FetchPolicy => {
+ const lastFetched = get(requestLastFetched(requestId));
+
+ const lastUpdated = get(ttlLastUpdated);
+ get(updateTtlEffect);
+
+ return lastFetched < lastUpdated - TTL ? 'store-and-network' : 'store-or-network';
+ }),
+);
+
+export function useTtlFetchPolicy(id: RequestIdentifier) {
+ return useAtomValue(requestFetchPolicy(id));
+}

app/src/app/(modal)/[account]/receive.tsx

@@ -4,7 +4,7 @@ import { Button } from '#/Button';
 import { QrModal } from '#/QrModal';
 import { useLocalParams } from '~/hooks/useLocalParams';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { receive_ReceiveModalQuery } from '~/api/__generated__/receive_ReceiveModalQuery.graphql';
 import { useRequestTokens } from '~/hooks/mutations/useRequestTokens';
 
@@ -20,7 +20,7 @@ export default function ReceiveModal() {
  const { account } = useLocalParams(AccountParams);
  const requestTokens = useRequestTokens();
 
- const { requestableTokens } = useLazyLoadQuery<receive_ReceiveModalQuery>(Query, {
+ const { requestableTokens } = useLazyQuery<receive_ReceiveModalQuery>(Query, {
  account,
  });
 

app/src/app/(modal)/accounts/join.tsx

@@ -14,10 +14,11 @@ import { useMemo } from 'react';
 import { View } from 'react-native';
 import { Switch, Text } from 'react-native-paper';
 import QRCode from 'react-native-qrcode-svg';
-import { useLazyLoadQuery, useSubscription } from 'react-relay';
+import { useSubscription } from 'react-relay';
 import { graphql } from 'relay-runtime';
 import { Subject } from 'rxjs';
 import { z } from 'zod';
+import { useLazyQuery } from '~/api';
 import { join_JoinAccountModalQuery } from '~/api/__generated__/join_JoinAccountModalQuery.graphql';
 import { join_JoinAccountModalSubscription } from '~/api/__generated__/join_JoinAccountModalSubscription.graphql';
 import { useScanAddress } from '~/app/scan';
@@ -65,7 +66,7 @@ function JoinAccountModal() {
 
  const setPersonal = (v: boolean) => router.setParams({ personal: v ? 'true' : 'false' });
 
- const { user } = useLazyLoadQuery<join_JoinAccountModalQuery>(Query, {});
+ const { user } = useLazyQuery<join_JoinAccountModalQuery>(Query, {});
  const linkingToken = useLinkingTokenUrl({ user });
  const value = personal ? linkingToken : approver;
 

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

@@ -21,7 +21,7 @@
 import { ListHeader } from '#/list/ListHeader';
 import { DateTime } from 'luxon';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import {
  activity_ActivityPaneQuery,
  activity_ActivityPaneQuery$data,
@@ -64,7 +64,7 @@
  const { styles } = useStyles(stylesheet);
  const { account } = useLocalParams(AccountParams);
 
- const { account: a, user } = useLazyLoadQuery<activity_ActivityPaneQuery>(Query, { account });
+ const { account: a, user } = useLazyQuery<activity_ActivityPaneQuery>(Query, { account });
 
  const items = [...(a?.proposals ?? []), ...(a?.transfers ?? [])]
  .map((v) => ({ ...v, section: getItemSection(v), timestamp: asDateTime(v.timestamp) }))
@@ -115,7 +115,7 @@
  ) : null,
  )
  .with({ __typename: 'Transfer' }, (t) => (
  <IncomingTransferItem transfer={t as any} containerStyle={containerStyle} />
  ))
  .otherwise(() => {
  throw new Error('Unexpected item type');
@@ -164,7 +164,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)/index.tsx

@@ -16,8 +16,8 @@ import { FlatList, View } from 'react-native';
 import { CORNER } from '@theme/paper';
 import { ITEM_LIST_GAP } from '#/layout/ItemList';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
 import { HomePaneQuery } from '~/api/__generated__/HomePaneQuery.graphql';
+import { useLazyQuery } from '~/api/useLazyQuery';
 
 const Query = graphql`
  query HomePaneQuery($account: UAddress!, $chain: Chain!) {
@@ -49,7 +49,7 @@ function HomePane_() {
  const { styles } = useStyles(stylesheet);
  const address = useLocalParams(AccountParams).account;
  const chain = asChain(address);
- const { account, user, tokens } = useLazyLoadQuery<HomePaneQuery>(Query, {
+ const { account, user, tokens } = useLazyQuery<HomePaneQuery>(Query, {
  account: address,
  chain,
  });

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

@@ -13,7 +13,7 @@ import { AppbarHeader } from '#/Appbar/AppbarHeader';
 import { withSuspense } from '#/skeleton/withSuspense';
 import { Splash } from '#/Splash';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { Layout_AccountLayoutQuery } from '~/api/__generated__/Layout_AccountLayoutQuery.graphql';
 
 // Must use Query.accounts to avoid potential redirect loop with LandingScreen
@@ -37,7 +37,7 @@ export function AccountLayout() {
  const params = useLocalSearchParams();
  const router = useRouter();
 
- const found = !!useLazyLoadQuery<Layout_AccountLayoutQuery>(Query, {}).accounts.find(
+ const found = !!useLazyQuery<Layout_AccountLayoutQuery>(Query, {}).accounts.find(
  (a) => a.address === account,
  );
 

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

@@ -22,7 +22,7 @@ import { ScrollableScreenSurface } from '#/layout/ScrollableScreenSurface';
 import Decimal from 'decimal.js';
 import { ampli } from '~/lib/ampli';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { send_SendScreenQuery } from '~/api/__generated__/send_SendScreenQuery.graphql';
 
 const Query = graphql`
@@ -62,7 +62,7 @@ function SendScreen() {
  const selectToken = useSelectToken();
  const selectedToken = useSelectedToken(chain);
 
- const { token, account } = useLazyLoadQuery<send_SendScreenQuery>(Query, {
+ const { token, account } = useLazyQuery<send_SendScreenQuery>(Query, {
  account: accountAddress,
  token: selectedToken,
  });

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

@@ -18,7 +18,7 @@ import { useSetAtom } from 'jotai';
 import { ApproverPolicies } from '#/approver/ApproverPolicies';
 import { Scrollable } from '#/Scrollable';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { Address_ApproverSettingsQuery } from '~/api/__generated__/Address_ApproverSettingsQuery.graphql';
 import { asChain } from 'lib';
 import { ScreenSkeleton } from '#/skeleton/ScreenSkeleton';
@@ -55,7 +55,7 @@ function ApproverSettingsScreen() {
  const { address } = params;
  const showSheet = useSetAtom(SIDE_SHEET);
 
- const { account, approver, user } = useLazyLoadQuery<Address_ApproverSettingsQuery>(Query, {
+ const { account, approver, user } = useLazyQuery<Address_ApproverSettingsQuery>(Query, {
  account: params.account,
  approver: address,
  });
@@ -126,4 +126,4 @@ const styles = createStyles({
 
 export default withSuspense(ApproverSettingsScreen, <ScreenSkeleton />);
 
-export { ErrorBoundary } from '#/ErrorBoundary';
+export { ErrorBoundary } from '#/ErrorBoundary';

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

@@ -4,13 +4,13 @@
 import { useForm } from 'react-hook-form';
 import { createStyles } from '@theme/styles';
 import { Appbar } from '#/Appbar/Appbar';
 import { Surface } from '#/layout/Surface';
 import { View } from 'react-native';
 import { AccountNameFormField } from '#/fields/AccountNameFormField';
 import { Actions } from '#/layout/Actions';
 import { FormSubmitButton } from '#/fields/FormSubmitButton';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { details_AccountDetailsQuery } from '~/api/__generated__/details_AccountDetailsQuery.graphql';
 import { useMutation } from '~/api';
 import { details_AccountDetailsMutation } from '~/api/__generated__/details_AccountDetailsMutation.graphql';
@@ -42,7 +42,7 @@
  const { account } = useLocalParams(AccountSettingsParams);
  const update = useMutation<details_AccountDetailsMutation>(Update);
 
- const a = useLazyLoadQuery<details_AccountDetailsQuery>(Query, { account }).account;
+ const a = useLazyQuery<details_AccountDetailsQuery>(Query, { account }).account;
 
  const { control, handleSubmit, reset } = useForm<Inputs>({ defaultValues: { name: a?.name } });
 

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

@@ -21,7 +21,7 @@ import { PolicyPresetKey } from '~/lib/policy/usePolicyPresets';
 import { UPGRADE_APPROVER } from 'lib';
 import { MenuOrSearchIcon } from '#/Appbar/MenuOrSearchIcon';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { settings_AccountSettingsQuery } from '~/api/__generated__/settings_AccountSettingsQuery.graphql';
 
 const Query = graphql`
@@ -66,7 +66,7 @@ function AccountSettingsPane_() {
  const path = usePath();
  const currentRouteParams = useRouteInfo().params;
 
- const { account: a, user } = useLazyLoadQuery<settings_AccountSettingsQuery>(Query, { account });
+ const { account: a, user } = useLazyQuery<settings_AccountSettingsQuery>(Query, { account });
 
  const approvers = a.approvers.filter(
  (approver) => approver.address !== UPGRADE_APPROVER[a.chain],

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

@@ -10,7 +10,7 @@ import { PolicyDraft, PolicyDraftContext, policyAsDraft } from '~/lib/policy/pol
 import { atom } from 'jotai';
 import { PolicyPane } from '#/policy/PolicyPane';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { Id_PolicyScreenQuery } from '~/api/__generated__/Id_PolicyScreenQuery.graphql';
 
 const Query = graphql`
@@ -52,7 +52,7 @@ function PolicyScreen() {
  const params = useLocalParams(PolicyScreenParams);
  const id = params.id !== 'add' ? params.id : undefined;
 
- const { account, policy, user } = useLazyLoadQuery<Id_PolicyScreenQuery>(Query, {
+ const { account, policy, user } = useLazyQuery<Id_PolicyScreenQuery>(Query, {
  account: params.account,
  policy: id ?? ZERO_UUID,
  includePolicy: !!id,

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

@@ -29,7 +29,7 @@ import { showError } from '#/provider/SnackbarProvider';
 import { estimateSwap } from '~/util/swap/syncswap/estimate';
 import { ScreenSkeleton } from '#/skeleton/ScreenSkeleton';
 import { graphql } from 'relay-runtime';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 import { swap_SwapScreenQuery } from '~/api/__generated__/swap_SwapScreenQuery.graphql';
 
 const DownArrow = materialCommunityIcon('arrow-down-thin');
@@ -68,7 +68,7 @@ function SwapScreen() {
  const selectToken = useSelectToken();
  const swappableTokens = useSwappableTokens(chain);
 
- const query = useLazyLoadQuery<swap_SwapScreenQuery>(Query, {
+ const query = useLazyQuery<swap_SwapScreenQuery>(Query, {
  account,
  tokens: swappableTokens,
  });

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

@@ -15,7 +15,7 @@ import { ScreenSurface } from '#/layout/ScreenSurface';
 import { MenuOrSearchIcon } from '#/Appbar/MenuOrSearchIcon';
 import { graphql } from 'relay-runtime';
 import { tokens_TokensScreenQuery } from '~/api/__generated__/tokens_TokensScreenQuery.graphql';
-import { useLazyLoadQuery } from 'react-relay';
+import { useLazyQuery } from '~/api';
 
 const Query = graphql`
  query tokens_TokensScreenQuery($account: UAddress!, $chain: Chain, $query: String) {
@@ -36,7 +36,7 @@ function TokensScreen() {
 
  const [query, setQuery] = useState('');
 
- const { tokens } = useLazyLoadQuery<tokens_TokensScreenQuery>(Query, {
+ const { tokens } = useLazyQuery<tokens_TokensScreenQuery>(Query, {
  account,
  chain: asChain(account),
  query: query || null,