[CHORE]: Remove transaction inconsistencies and improve type safety #6137

walmat · 2024-09-24T14:26:14Z

What changed (plus any additional context for devs)

This PR cleans up a lot of the unused code stemming back from the transaction redux => Zustand refactor. A lot of our types were duplicated and all over the place. Now they all are in @/entities/transactions/... and can be referenced via @/entities.

I also coupled this PR with cleaning up the ProfileScreen => ActivityList since it's touching 100% of the transactions code. Noticed lots of things once converting those two files to typescript.

Note there are still a bit of casts as in this PR that I want to create smaller follow-up PRs for

Screen recordings / screenshots

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-10-01.at.13.54.08.mp4

What to test

All things transactions

sends
swaps
mints
etc. etc.

walmat · 2024-10-01T17:22:05Z

src/components/ActivityIndicator.tsx

typescript conversion

walmat · 2024-10-01T17:22:22Z

src/__swaps__/types/refraction.ts

moved all txn types into @/entities

walmat · 2024-10-01T17:22:43Z

package.json

this types declaration file was missing when converting ActivityIndicator to typescript

walmat · 2024-10-01T17:22:58Z

src/components/Divider.tsx

typescript conversion

walmat · 2024-10-01T17:23:19Z

src/components/activity-list/ActivityList.js

socket-security · 2024-10-01T17:24:13Z

New dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@types/[email protected]	None	`0`	7.64 kB	types

View full report↗︎

walmat · 2024-10-01T17:25:11Z

src/components/activity-list/ActivityList.tsx

+const ActivityListHeaderHeight = 42;
+const TRANSACTION_COIN_ROW_VERTICAL_PADDING = 7;
+
+const getItemLayout = sectionListGetItemLayout({


this was causing issues with the SectionList below, so I added a @ts-expect-error declaration for now. Maybe bumping react-native will fix it? But not worried about it for now.

walmat · 2024-10-01T17:25:42Z

src/components/activity-list/ActivityList.tsx

+const keyExtractor = (data: TransactionSections['data'][number]) => {
+  if ('hash' in data) {
+    return (data.hash || data.timestamp ? data.timestamp?.toString() : performance.now().toString()) ?? performance.now().toString();
+  }
+  return (
+    (data.displayDetails?.timestampInMs ? data.displayDetails.timestampInMs.toString() : performance.now().toString()) ??
+    performance.now().toString()
+  );
+};


we need the key extractor to always fallback to a string, so theoretically we should never hit performance.now calls, but added them in case we do.

walmat · 2024-10-01T17:26:20Z

src/components/activity-list/ActivityList.tsx

+  const { accountAddress, nativeCurrency } = useAccountSettings();
+
+  const { setScrollToTopRef } = useSectionListScrollToTopContext();
+  const { sections, nextPage, transactionsCount, remainingItemsLabel } = useAccountTransactions();


Moved the sections and transaction stuff in here instead of in ProfileScreen since we don't need to re-render the whole page just the list.

walmat · 2024-10-01T17:26:36Z

src/components/activity-list/ActivityList.tsx

+
+  const handleScrollToTopRef = (ref: SectionList<TransactionItemForSectionList, TransactionSections> | null) => {
+    if (!ref) return;
+    // @ts-expect-error - no idea why this is not working


welcoming ideas on how to get this to work if anyone has one

const { setScrollToTopRef } = useSectionListScrollToTopContext<TransactionItemForSectionList, TransactionSections>();

walmat · 2024-10-01T17:26:55Z

src/components/activity-list/ActivityList.tsx

+      }}
+      testID={'wallet-activity-list'}
+      ListEmptyComponent={<ActivityListEmptyState />}
+      // @ts-expect-error - mismatch between react-native-section-list-get-item-layout and SectionList


see comment: https://github.com/rainbow-me/rainbow/pull/6137/files#r1783234185

walmat · 2024-10-01T17:28:00Z

src/components/coin-row/FastTransactionStatusBadge.tsx

+  const getStatusTitle = useCallback((status: TransactionStatus, title: string) => {
+    const transactionType = lang.l.transactions.type[title as keyof typeof lang.l.transactions.type];
+    if (typeof transactionType === 'string') {
+      return transactionType;
+    }
+    return transactionType[status as keyof typeof transactionType] || '';
+  }, []);
+


I don't know if this was intentional or not, but our i18n for some keys had pending | failed | confirmed keys inside of lang.l.transactions.type. I need to test this to confirm.

walmat · 2024-10-01T17:28:45Z

src/entities/transactions/transaction.ts

@@ -61,7 +102,7 @@ export interface RainbowTransaction {
  nonce?: number | null;
  protocol?: ProtocolType | null;
  flashbots?: boolean;
-  approvalAmount?: 'UNLIMITED' | (string & object);
+  approvalAmount?: 'UNLIMITED' | (string & Record<string, never>);


keeps type inference but loosens it at the same time

src/entities/transactions/transaction.ts

walmat · 2024-10-01T17:29:43Z

src/entities/transactions/transaction.ts

+export enum FlashbotsStatus {
+  PENDING = 'PENDING',
+  INCLUDED = 'INCLUDED',
+  FAILED = 'FAILED',
+  CANCELLED = 'CANCELLED',
+  UNKNOWN = 'UNKNOWN',
+}


these were used in a couple different files, so collocated it here and expanded it.

walmat · 2024-10-01T17:30:14Z

src/handlers/transactions.ts

lot of stuff in this file was unused so just cleaned up

walmat · 2024-10-01T17:30:36Z

src/helpers/buildTransactionsSectionsSelector.tsx

  }
  return {
-    sections: requestsToApprove.concat(sectionedTransactions),
+    sections: sectionedTransactions as SectionListData<TransactionItemForSectionList, TransactionSections>[],


don't love this, but unsure how to make it work without casts

walmat · 2024-10-01T17:31:35Z

src/parsers/index.ts

 export { getRequestDisplayDetails } from './requests';
-export { getDescription } from './transactions';
+export { getDescription, convertNewTransactionToRainbowTransaction } from './transactions';


renamed parseNewTransaction to convertNewTransactionToRainbowTransaction to properly describe what it does

walmat · 2024-10-01T17:32:11Z

src/raps/actions/claimBridge.ts

@@ -55,7 +61,7 @@ export async function claimBridge({ parameters, wallet, baseNonce }: ActionProps
  const provider = getProvider({ chainId: ChainId.optimism });

  const l1GasFeeOptimism = await ethereumUtils.calculateL1FeeOptimism(
-    // @ts-ignore
+    // @ts-expect-error - TODO: fix improper arguments here


this will be fixed in the send sheet PR, so just ts-expect-error'd it for now

src/raps/references.ts

walmat · 2024-10-01T17:33:29Z

src/raps/actions/claimBridge.ts

cc @benisgold for visibility, assuming i will need to rebase once your raps work is in?

walmat · 2024-10-01T17:34:44Z

src/screens/ProfileScreen.tsx

 import { ActivityList } from '../components/activity-list';
 import { Page } from '../components/layout';
 import { useNavigation } from '../navigation/Navigation';
 import { ButtonPressAnimation } from '@/components/animations';
-import { useAccountProfile, useAccountSettings, useAccountTransactions, useRequests } from '@/hooks';
+import { useAccountProfile, useAccountSettings, useAccountTransactions } from '@/hooks';


useRequests was unused so cleaned up this file a lot

derHowie

Good stuff. Just one question. ✅

src/components/activity-list/ActivityListEmptyState.tsx

brunobar79 · 2024-10-04T16:08:08Z

Launch in simulator or device for 43d4fad

greg-schrammel · 2024-10-04T19:55:07Z

src/components/activity-list/ActivityList.tsx

+  useEffect(() => {
+    if (isLoading) {
+      onPress();
+      setIsLoading(false);
+    }
+  }, [isLoading, setIsLoading, onPress]);
+  const onPressWrapper = () => {
+    setIsLoading(true);
+  };


how does this work?
onPress sets isLoading to true, rerenders run props.onPress, then right after sets isLoading to false wouldn't that just quickly flash the loading component? unless onPress is doing some crazy expensive blocking work

is it not the same as

const onPressWrapper = () => { setIsLoading(true); onPress(); setIsLoading(false); };

Not sure I didn't originally write this

afaik this is just for fetching the next batch of transactions

src/entities/transactions/transaction.ts

greg-schrammel · 2024-10-04T21:08:32Z

src/entities/transactions/transaction.ts

+export enum TransactionStatus {
+  approved = 'approved',
+  approving = 'approving',
+  bridging = 'bridging',
+  bridged = 'bridged',
+  cancelled = 'cancelled',
+  cancelling = 'cancelling',
+  confirmed = 'confirmed',
+  contract_interaction = 'contract interaction',
+  deposited = 'deposited',
+  depositing = 'depositing',
+  dropped = 'dropped',
+  failed = 'failed',
+  minted = 'minted',
+  minting = 'minting',
+  pending = 'pending',
+  purchased = 'purchased',
+  purchasing = 'purchasing',
+  received = 'received',
+  receiving = 'receiving',
+  self = 'self',
+  selling = 'selling',
+  sold = 'sold',
+  sending = 'sending',
+  sent = 'sent',
+  speeding_up = 'speeding up',
+  swapped = 'swapped',
+  swapping = 'swapping',
+  unknown = 'unknown status',
+  withdrawing = 'withdrawing',
+  withdrew = 'withdrew',
+}


what's this for?
It was a pain to refactor something similar in the bx, I think it's more manageable to have transaction status as 'confirmed' | 'pending' | 'failed' and then in conjunction with transaction type 'swap' | 'send' | 'mint' | ...
we derive the label like a type: 'swap', status: 'confirmed' = 'swapped'

I think this can further be cleaned up, not going to tackle that in this PR as it's already a lot.

src/helpers/buildTransactionsSectionsSelector.tsx

src/hooks/useWatchPendingTxs.ts

src/entities/transactions/transaction.ts

src/screens/SignTransactionSheet.tsx

src/navigation/types.ts

src/utils/gas.ts

brunobar79 · 2024-10-08T16:53:14Z

Launch in simulator or device for 38882f5

brunobar79 · 2024-10-08T17:29:21Z

Launch in simulator or device for 87d143f

brunobar79 · 2024-10-09T15:45:30Z

Launch in simulator or device for 70f4755

brunobar79 · 2024-10-10T17:14:43Z

Launch in simulator or device for fe1be15

brunobar79 · 2024-10-10T18:44:44Z

Launch in simulator or device for f1a41db

…safety (#6137)" This reverts commit 3ac1661.

walmat added 6 commits September 23, 2024 12:42

lots of typescript improvements

2a4c08f

lots of deduping of types and consolidation of files

e574971

chore: merge

8f93649

Merge branch 'develop' into @matthew/fix-speed-up-and-cancel

e633236

more cleanup and move to enums for flashbots

fac310e

good lord

f6f85cb