Merge pull request #262 from zallo-labs/Z-303-fix-rm-transaction

Z 303 fix rm transaction

Author: hbriese

app/src/api/ApiProvider.tsx

@@ -1,36 +1,12 @@
-import { ReactNode, useEffect, useState } from 'react';
+import { ReactNode } from 'react';
 import { RelayEnvironmentProvider } from 'react-relay';
-import { getEnvironment, setEnvironment, useApiEnvironment } from './environment';
-import { withSuspense } from '#/skeleton/withSuspense';
-import { Splash } from '#/Splash';
-import { useApproverWallet } from '@network/useApprover';
-import { Environment } from 'relay-runtime';
-
-let promisedEnvironment: Promise<Environment> | undefined;
+import { useApiEnvironment } from './environment';
 
 export interface ApiProviderProps {
   children: ReactNode;
 }
 
 export function ApiProvider({ children }: ApiProviderProps) {
-  // const approver = useApproverWallet();
-  // console.log(approver);
-
-  // const [env, setEnv] = useState<Environment | null>(null);
-  // useEffect(() => {
-  //   getEnvironment({
-  //     key: 'main',
-  //     approver: new Promise<typeof approver>((resolve) => resolve(approver)),
-  //     persist: true,
-  //   }).then((env) => {
-  //     setEnv(env);
-  //     setEnvironment(env);
-  //   });
-  // }, [approver]);
-
-  // if (!env) return <Splash />;
-
   return <RelayEnvironmentProvider environment={useApiEnvironment()}>{children}</RelayEnvironmentProvider>;
 }
 
-// export const ApiProvider = withSuspense(ApiProvider_, <Splash />);

app/src/api/PersistedRecordSource.ts

@@ -23,32 +23,52 @@ export class PersitedRecordSource extends RecordSource {
   }
 
   set(dataID: DataID, record: Record): void {
-    this.save();
+    this.saveAfterDelay();
     return super.set(dataID, record);
   }
 
-  private save() {
-    // Clear pending save
-    if (this.pending) {
-      clearTimeout(this.pending.timer);
-      this.pending.listener.remove();
-      this.pending = undefined;
-    }
-
-    const save = () => {
-      AsyncStorage.setItem(this.key, JSON.stringify(this.toJSON()));
-    };
+  private saveAfterDelay() {
+    this.clearPending();
 
     // Save after delay (debounce)
     const timer = setTimeout(() => {
-      InteractionManager.runAfterInteractions(save);
+      InteractionManager.runAfterInteractions(() => this.save());
     }, DELAY);
 
     // Save pending immediately on background
     const listener = AppState.addEventListener('change', (state) => {
-      if (state === 'background') save();
+      if (state === 'background') this.save();
     });
 
     this.pending = { timer, listener };
   }
+
+  private clearPending() {
+    if (this.pending) {
+      clearTimeout(this.pending.timer);
+      this.pending.listener.remove();
+      this.pending = undefined;
+    }
+  }
+
+  private save() {
+    this.clearPending();
+
+    const allRecords = this.toJSON();
+
+    const filteredRecords = Object.fromEntries(
+      Object.entries(allRecords)
+        .filter(([key]) => !key.startsWith('client:local'))
+        .map(([key, value]) => {
+          if (value && '__invalidated_at' in value) {
+            const { __invalidated_at, ...rest } = value;
+            return [key, rest];
+          }
+
+          return [key, value];
+        }),
+    );
+
+    AsyncStorage.setItem(this.key, JSON.stringify(filteredRecords));
+  }
 }

app/src/api/environment.ts

@@ -3,7 +3,6 @@ import { PrivateKeyAccount } from 'viem';
 import { atom, useAtomValue } from 'jotai';
 import { DANGEROUS_approverAtom } from '@network/useApprover';
 import { InteractionManager } from 'react-native';
-import { atomFamily } from 'jotai/utils';
 import { createNetworkLayer } from './network/layer';
 import { fetchExchange } from './network/fetch';
 import { CONFIG } from '~/util/config';
@@ -26,30 +25,13 @@ export function useApiEnvironment() {
   return useAtomValue(environmentAtom);
 }
 
-const approverEnvironment = atomFamily(
-  (approver: PrivateKeyAccount) =>
-    atom(async () => {
-      const promisedApprover = new Promise<PrivateKeyAccount>((resolve) => resolve(approver));
-      return getEnvironment({ key: approver.address, approver: promisedApprover, persist: false });
-    }),
-  (a, b) => a.address === b.address,
-);
-
-export function useApproverApiEnvironment(approver: PrivateKeyAccount) {
-  return useAtomValue(approverEnvironment(approver));
-}
-
 export interface EnvironmentConfig {
   key: string;
   approver: Promise<PrivateKeyAccount>;
   persist?: boolean;
 }
 
-export let environment: Environment | undefined;
-export function setEnvironment(env: Environment) {
-  environment = env;
-}
-
+let environment: Environment | undefined;
 export async function getEnvironment({ key, approver, persist }: EnvironmentConfig) {
   if (environment) return environment;
 
@@ -67,7 +49,7 @@ export async function getEnvironment({ key, approver, persist }: EnvironmentConf
       InteractionManager.runAfterInteractions(run);
     },
   });
-  persist && store.notify(undefined, true); // Invalidate persisted data
+  // persist && store.notify(undefined, true); // Invalidate persisted data
 
   const network = createNetworkLayer({
     store,

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

@@ -21,6 +21,8 @@ import { graphql } from 'relay-runtime';
 import { useLazyLoadQuery } from 'react-relay';
 import { Address_ApproverSettingsQuery } from '~/api/__generated__/Address_ApproverSettingsQuery.graphql';
 import { asChain } from 'lib';
+import { ScreenSkeleton } from '#/skeleton/ScreenSkeleton';
+import { withSuspense } from '#/skeleton/withSuspense';
 
 const Query = graphql`
   query Address_ApproverSettingsQuery($account: UAddress!, $approver: Address!) {
@@ -48,7 +50,7 @@ const ApproverSettingsParams = AccountParams.extend({
   address: zAddress(),
 });
 
-export default function ApproverSettingsScreen() {
+function ApproverSettingsScreen() {
   const params = useLocalParams(ApproverSettingsParams);
   const { address } = params;
   const showSheet = useSetAtom(SIDE_SHEET);
@@ -121,3 +123,7 @@ const styles = createStyles({
     gap: 8,
   },
 });
+
+export default withSuspense(ApproverSettingsScreen, <ScreenSkeleton />);
+
+export { ErrorBoundary } from '#/ErrorBoundary';

app/src/app/(nav)/contacts/[address].tsx

@@ -86,7 +86,6 @@ function ContactScreen_(props: ContactScreenProps) {
       address: asUAddress(address, chain),
       previousAddress: current?.address,
     });
-    router.back();
     reset(input);
   });
 

app/src/app/(nav)/message/[id].tsx

@@ -31,6 +31,7 @@ const Query = graphql`
         id
         chain
         ...AccountSection_account
+        ...useRemoveMessage_account
       }
       dapp {
         ...DappHeader_dappMetadata
@@ -53,7 +54,7 @@ export default function MessageScreen() {
   const { id } = useLocalParams(MessageScreenParams);
 
   const { message: m, user } = useLazyLoadQuery<Id_MessageScreenQuery>(Query, { id });
-  const remove = useRemoveMessage(m);
+  const remove = useRemoveMessage({ account: m.account, message: m });
 
   return (
     <SideSheetLayout defaultVisible>

app/src/app/(nav)/transaction/[id].tsx

@@ -60,6 +60,7 @@ const Transaction = graphql`
       id
       address
       ...AccountSection_account
+      ...useRemoveTransaction_account
     }
     dapp {
       ...DappHeader_dappMetadata
@@ -82,7 +83,7 @@ function TransactionScreen() {
 
   const query = useLazyLoadQuery<Id_TransactionScreenQuery>(Query, { id });
   const t = useFragment<Id_TransactionScreen_transaction$key>(Transaction, query.transaction);
-  const remove = useRemoveTransaction({ transaction: t });
+  const remove = useRemoveTransaction({ account: t.account, transaction: t });
 
   useSubscription(
     useMemo(() => ({ subscription: Subscription, variables: { transaction: id } }), [id]),

app/src/app/(sheet)/select/address.tsx

@@ -85,8 +85,6 @@ function SelectAddressSheet() {
     contacts: include.includes('contacts'),
   });
 
-  console.log(query);
-
   const accounts =
     query.accounts?.filter(
       (a) => !disabled?.has(a.address) && (!chain || asChain(a.address) === chain),

app/src/components/GlobalSubscriptions/useTransfersSubscription.ts

@@ -39,8 +39,8 @@ export function useTransfersSubscription(params: UseTransfersSubscriptionParams)
         const t = data?.transfer;
         if (!t) return;
 
-        // Invalidate Token.balance
-        if (t.token) store.get(t.token.id)?.invalidateRecord();
+        // TODO: Invalidate Token.balance; disabled to prevent home screen from suspending whilst re-fetching
+        // if (t.token) store.get(t.token.id)?.invalidateRecord();
 
         // Prepend to Account.transfers
         if (t.incoming && !t.internal) {

app/src/components/message/useRemoveMessage.ts

@@ -1,23 +1,53 @@
 import { useRouter } from 'expo-router';
 import { useFragment } from 'react-relay';
-import { graphql } from 'relay-runtime';
+import { graphql, SelectorStoreUpdater } from 'relay-runtime';
 import { useMutation } from '~/api';
+import { useRemoveMessage_account$key } from '~/api/__generated__/useRemoveMessage_account.graphql';
 import { useRemoveMessage_message$key } from '~/api/__generated__/useRemoveMessage_message.graphql';
-import { useRemoveMessageMutation } from '~/api/__generated__/useRemoveMessageMutation.graphql';
+import {
+  useRemoveMessageMutation,
+  useRemoveMessageMutation$data,
+} from '~/api/__generated__/useRemoveMessageMutation.graphql';
+import { useRemoveMessageUpdatableQuery } from '~/api/__generated__/useRemoveMessageUpdatableQuery.graphql';
 import { useConfirmRemoval } from '~/hooks/useConfirm';
 import { useSelectedAccount } from '~/hooks/useSelectedAccount';
 
+graphql`
+  fragment useRemoveMessage_assignable_message on Message @assignable {
+    __typename
+  }
+`;
+
+const Account = graphql`
+  fragment useRemoveMessage_account on Account {
+    address
+    proposals {
+      id
+      ...useRemoveMessage_assignable_message
+    }
+    pendingProposals: proposals(input: { pending: true }) {
+      id
+      ...useRemoveMessage_assignable_message
+    }
+  }
+`;
+
 const Message = graphql`
   fragment useRemoveMessage_message on Message {
     id
     signature
   }
 `;
 
-export function useRemoveMessage(messageFrag: useRemoveMessage_message$key) {
-  const m = useFragment(Message, messageFrag);
+export interface RemoveMessageParams {
+  account: useRemoveMessage_account$key;
+  message: useRemoveMessage_message$key;
+}
+
+export function useRemoveMessage(params: RemoveMessageParams) {
+  const account = useFragment(Account, params.account);
+  const m = useFragment(Message, params.message);
   const router = useRouter();
-  const account = useSelectedAccount();
   const confirmRemoval = useConfirmRemoval({
     message: 'Are you sure you want to remove this message proposal?',
   });
@@ -35,11 +65,50 @@ export function useRemoveMessage(messageFrag: useRemoveMessage_message$key) {
 
   return async () => {
     if (await confirmRemoval()) {
-      await commit({ proposal: m.id });
+      router.replace({
+        pathname: '/(nav)/[account]/(home)/activity',
+        params: { account: account.address },
+      });
+
+      const updater: SelectorStoreUpdater<useRemoveMessageMutation$data> = (store, data) => {
+        const id = data?.removeMessage;
+        if (!id) return;
+
+        // Remove from proposals
+        const { updatableData } = store.readUpdatableQuery<useRemoveMessageUpdatableQuery>(
+          graphql`
+            query useRemoveMessageUpdatableQuery($address: UAddress!) @updatable {
+              account(address: $address) {
+                proposals {
+                  ...useProposeMessage_assignable_proposal
+                }
+                pendingProposals: proposals(input: { pending: true }) {
+                  ...useProposeMessage_assignable_proposal
+                }
+              }
+            }
+          `,
+          { address: account.address },
+        );
+
+        if (updatableData.account) {
+          // @ts-expect-error one __typename is 'string' the other is 'Transaction'
+          updatableData.account.proposals = account.proposals.filter((p) => p.id !== id);
+          // @ts-expect-error one __typename is 'string' the other is 'Transaction'
+          updatableData.account.pendingProposals = account.pendingProposals.filter(
+            (p) => p.id !== id,
+          );
+        }
+      };
 
-      account
-        ? router.push({ pathname: '/(nav)/[account]/(home)/activity', params: { account } })
-        : router.back();
+      await commit(
+        { proposal: m.id },
+        {
+          optimisticResponse: { removeMessage: m.id },
+          optimisticUpdater: updater,
+          updater,
+        },
+      );
     }
   };
 }