wallet-stack 1.0.0-alpha.121

package/src/transactions/TransferAvatars.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import ContactCircle from 'src/components/ContactCircle'
+import ContactCircleSelf from 'src/components/ContactCircleSelf'
+import CircleArrowIcon from 'src/icons/CircleArrowIcon'
+import { Recipient } from 'src/recipients/recipient'
+
+interface Props {
+  type: 'sent' | 'received'
+  recipient: Recipient
+}
+
+export default function TransferAvatars({ type, recipient }: Props) {
+  const userAvatar = <ContactCircle recipient={recipient} />
+
+  const selfAvatar = <ContactCircleSelf />
+
+  return (
+    <View style={[styles.container, type === 'sent' && styles.containerSent]}>
+      {userAvatar}
+      <CircleArrowIcon style={styles.arrow} />
+      {selfAvatar}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  containerSent: {
+    flexDirection: 'row-reverse',
+  },
+  arrow: {
+    marginHorizontal: -8,
+    zIndex: 1,
+  },
+})

package/src/transactions/UserSection.tsx

@@ -0,0 +1,133 @@
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { LayoutAnimation, StyleSheet, Text, View } from 'react-native'
+import AccountNumber from 'src/components/AccountNumber'
+import Expandable from 'src/components/Expandable'
+import Touchable from 'src/components/Touchable'
+import { Screens } from 'src/navigator/Screens'
+import { getDisplayName, Recipient, recipientHasNumber } from 'src/recipients/recipient'
+import colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import { getDisplayNumberInternational } from 'src/utils/phoneNumbers'
+
+interface Props {
+  type: 'sent' | 'received' | 'withdrawn'
+  addressHasChanged?: boolean
+  recipient: Recipient
+  avatar: React.ReactNode
+  expandable?: boolean
+  testID?: string
+}
+
+export default function UserSection({
+  type,
+  addressHasChanged = false,
+  recipient,
+  avatar,
+  expandable = true,
+  testID = '',
+}: Props) {
+  const { t } = useTranslation()
+  const [expanded, setExpanded] = useState(expandable && addressHasChanged)
+
+  const toggleExpanded = () => {
+    LayoutAnimation.easeInEaseOut()
+    setExpanded(!expanded)
+  }
+
+  const displayName = getDisplayName(recipient, t)
+  const displayNumber = recipientHasNumber(recipient)
+    ? getDisplayNumberInternational(recipient.e164PhoneNumber)
+    : undefined
+  const address = recipient.address || ''
+
+  const sectionLabel = {
+    received: t('receivedFrom'),
+    sent: t('sentTo'),
+    withdrawn: t('withdrawnTo'),
+  }[type]
+
+  return (
+    <View>
+      <View style={styles.header}>
+        <View style={styles.userContainer}>
+          <Text style={styles.sectionLabel}>{sectionLabel}</Text>
+          <Touchable onPress={toggleExpanded} disabled={!expandable}>
+            <>
+              <Expandable isExpandable={expandable && !displayNumber} isExpanded={expanded}>
+                <Text style={styles.username} testID={`${testID}/name`}>
+                  {displayName}
+                </Text>
+              </Expandable>
+              {!!displayNumber && (
+                <Expandable isExpandable={expandable && !!displayNumber} isExpanded={expanded}>
+                  <Text style={styles.phoneNumber} testID={`${testID}/number`}>
+                    {displayNumber}
+                  </Text>
+                </Expandable>
+              )}
+            </>
+          </Touchable>
+        </View>
+        <View style={styles.avatarContainer}>{avatar}</View>
+      </View>
+      {expanded && (
+        <View style={styles.expandedContainer}>
+          {addressHasChanged && (
+            <Text style={styles.addressHasChanged} testID={'transferAddressChanged'}>
+              {t('transferAddressChanged')}
+            </Text>
+          )}
+          <View style={styles.accountBox}>
+            <Text style={styles.accountLabel}>{t('accountAddressLabel')}</Text>
+            <AccountNumber address={address} location={Screens.TransactionDetailsScreen} />
+          </View>
+        </View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+  },
+  sectionLabel: {
+    ...typeScale.labelSemiBoldSmall,
+    color: colors.contentSecondary,
+    marginBottom: 4,
+  },
+  userContainer: {
+    flex: 3,
+    marginRight: 8,
+  },
+  username: {
+    ...typeScale.bodyMedium,
+  },
+  phoneNumber: {
+    ...typeScale.bodySmall,
+    color: colors.contentSecondary,
+  },
+  avatarContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  expandedContainer: {
+    marginTop: 8,
+  },
+  addressHasChanged: {
+    ...typeScale.bodySmall,
+    color: colors.contentSecondary,
+    marginBottom: 8,
+  },
+  accountBox: {
+    borderRadius: 4,
+    backgroundColor: colors.backgroundTertiary,
+    flexDirection: 'column',
+    padding: 16,
+  },
+  accountLabel: {
+    ...typeScale.labelSemiBoldSmall,
+    color: colors.contentSecondary,
+  },
+})

package/src/transactions/api.ts

@@ -0,0 +1,67 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { getAppConfig } from 'src/appConfig'
+import { type LocalCurrencyCode } from 'src/localCurrency/consts'
+import {
+  FEED_V2_INCLUDE_TYPES,
+  FEED_V2_INCLUDE_TYPES_NO_NFT,
+  type PageInfo,
+  type TokenTransaction,
+} from 'src/transactions/types'
+import networkConfig from 'src/web3/networkConfig'
+import { getSupportedNetworkIds } from 'src/web3/utils'
+
+export type TransactionFeedV2Response = {
+  transactions: TokenTransaction[]
+  pageInfo: PageInfo
+}
+
+const baseQuery = fetchBaseQuery({
+  baseUrl: networkConfig.getWalletTransactionsUrl,
+  headers: { Accept: 'application/json' },
+})
+
+export const transactionFeedV2Api = createApi({
+  reducerPath: 'transactionFeedV2Api',
+  baseQuery,
+  endpoints: (builder) => ({
+    transactionFeedV2: builder.query<
+      TransactionFeedV2Response,
+      {
+        address: string
+        localCurrencyCode: LocalCurrencyCode
+        endCursor: PageInfo['endCursor'] | undefined
+      }
+    >({
+      query: ({ address, localCurrencyCode, endCursor: afterCursor }) => {
+        const includeTypes = getAppConfig().experimental?.disableNfts
+          ? FEED_V2_INCLUDE_TYPES_NO_NFT
+          : FEED_V2_INCLUDE_TYPES
+        return {
+          url: '',
+          params: {
+            address,
+            networkIds: getSupportedNetworkIds().join(','),
+            includeTypes: includeTypes.join(','),
+            localCurrencyCode,
+            ...(afterCursor && { afterCursor }),
+          },
+        }
+      },
+      keepUnusedDataFor: 60, // 1 min
+      transformErrorResponse: (error, meta) => {
+        if (meta) {
+          const params = new URL(meta.request.url).searchParams
+          return {
+            ...error,
+            // only requests for next pages have the afterCursor search param
+            hasAfterCursor: params.get('afterCursor'),
+          }
+        }
+
+        return error
+      },
+    }),
+  }),
+})
+
+export const { useTransactionFeedV2Query } = transactionFeedV2Api

package/src/transactions/apiTestHelpers.ts

@@ -0,0 +1,55 @@
+import type { EnhancedStore, Middleware, Reducer, UnknownAction } from '@reduxjs/toolkit'
+import { combineReducers, configureStore } from '@reduxjs/toolkit'
+import { ApiReducersKeys } from 'src/redux/apiReducersList'
+import { RootState } from 'src/redux/reducers'
+import { getMockStoreData, RecursivePartial } from 'test/utils'
+
+/**
+ * This function is taken from the Redux team. It creates a testable store that is compatible
+ * with RTK-Query. It is slightly modified to also include the preloaded state.
+ * https://github.com/reduxjs/redux-toolkit/blob/e7540a5594b0d880037f2ff41a83a32c629d3117/packages/toolkit/src/tests/utils/helpers.tsx#L186
+ *
+ * For more info on why this is needed and how it works - here's an article that answers some of the questions:
+ * https://medium.com/@johnmcdowell0801/testing-rtk-query-with-jest-cdfa5aaf3dc1
+ */
+export function setupApiStore<
+  A extends {
+    reducer: Reducer<any, any>
+    reducerPath: string
+    middleware: Middleware
+  },
+  Preloaded extends RecursivePartial<Omit<RootState, ApiReducersKeys>>,
+  R extends Record<string, Reducer<any, any>> = Record<never, never>,
+>(api: A, preloadedState: Preloaded, extraReducers?: R) {
+  // destructure _persist from the preloaded state as it is an unexpected key in
+  // the mocked store and logs an error during test execution
+  const { _persist, ...mockStoreData } = getMockStoreData(preloadedState)
+  const getStore = () =>
+    configureStore({
+      preloadedState: mockStoreData,
+      reducer: combineReducers({
+        [api.reducerPath]: api.reducer,
+        ...extraReducers,
+      }),
+      middleware: (getDefaultMiddleware) => {
+        return getDefaultMiddleware({
+          serializableCheck: false,
+          immutableCheck: false,
+        }).concat(api.middleware)
+      },
+    })
+
+  type Store = { api: ReturnType<A['reducer']> } & { [K in keyof R]: ReturnType<R[K]> }
+  type StoreType = EnhancedStore<
+    Store,
+    UnknownAction,
+    ReturnType<typeof getStore> extends EnhancedStore<any, any, infer M> ? M : never
+  >
+
+  const initialStore = getStore() as StoreType
+  const refObj = { api, store: initialStore }
+  const store = getStore() as StoreType
+  refObj.store = store
+
+  return refObj
+}

package/src/transactions/feed/ClaimRewardFeedItem.test.tsx

@@ -0,0 +1,164 @@
+import { fireEvent, render, within } from '@testing-library/react-native'
+import React from 'react'
+import { Provider } from 'react-redux'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { HomeEvents } from 'src/analytics/Events'
+import { navigate } from 'src/navigator/NavigationService'
+import { Screens } from 'src/navigator/Screens'
+import { getFeatureGate } from 'src/statsig'
+import { StatsigFeatureGates } from 'src/statsig/types'
+import ClaimRewardFeedItem from 'src/transactions/feed/ClaimRewardFeedItem'
+import { NetworkId } from 'src/transactions/types'
+import { createMockStore } from 'test/utils'
+import {
+  mockAaveArbUsdcAddress,
+  mockAaveArbUsdcTokenId,
+  mockArbArbTokenId,
+  mockArbUsdcTokenId,
+  mockClaimRewardTransaction,
+} from 'test/values'
+
+jest.mock('src/statsig')
+jest
+  .mocked(getFeatureGate)
+  .mockImplementation((featureGateName) => featureGateName === StatsigFeatureGates.SHOW_POSITIONS)
+
+const store = createMockStore({
+  tokens: {
+    tokenBalances: {
+      [mockArbUsdcTokenId]: {
+        tokenId: mockArbUsdcTokenId,
+        symbol: 'USDC',
+        priceUsd: '1',
+        priceFetchedAt: Date.now(),
+        networkId: NetworkId['arbitrum-sepolia'],
+      },
+      [mockArbArbTokenId]: {
+        tokenId: mockArbArbTokenId,
+        symbol: 'ARB',
+        priceUsd: '0.9898',
+        priceFetchedAt: Date.now(),
+        networkId: NetworkId['arbitrum-sepolia'],
+      },
+      [mockAaveArbUsdcTokenId]: {
+        networkId: NetworkId['arbitrum-sepolia'],
+        address: mockAaveArbUsdcAddress,
+        tokenId: mockAaveArbUsdcTokenId,
+        symbol: 'aArbSepUSDC',
+        priceUsd: '1',
+        priceFetchedAt: Date.now(),
+      },
+    },
+  },
+  positions: {
+    positions: [
+      {
+        type: 'app-token',
+        networkId: NetworkId['arbitrum-sepolia'],
+        address: '0x460b97bd498e1157530aeb3086301d5225b91216',
+        tokenId: 'arbitrum-sepolia:0x460b97bd498e1157530aeb3086301d5225b91216',
+        positionId: 'arbitrum-sepolia:0x460b97bd498e1157530aeb3086301d5225b91216',
+        appId: 'aave',
+        appName: 'Aave',
+        symbol: 'aArbSepUSDC',
+        decimals: 6,
+        displayProps: {
+          title: 'USDC',
+          description: 'Supplied (APY: 1.92%)',
+          imageUrl: 'https://raw.githubusercontent.com/valora-xyz/dapp-list/main/assets/aave.png',
+        },
+        dataProps: {
+          yieldRates: [
+            {
+              percentage: 1.9194202601763743,
+              label: 'Earnings APY',
+              tokenId: 'arbitrum-sepolia:0x75faf114eafb1bdbe2f0316df893fd58ce46aa4d',
+            },
+          ],
+          earningItems: [],
+          depositTokenId: 'arbitrum-sepolia:0x75faf114eafb1bdbe2f0316df893fd58ce46aa4d',
+          withdrawTokenId: 'arbitrum-sepolia:0x460b97bd498e1157530aeb3086301d5225b91216',
+        },
+        tokens: [
+          {
+            tokenId: 'arbitrum-sepolia:0x75faf114eafb1bdbe2f0316df893fd58ce46aa4d',
+            networkId: NetworkId['arbitrum-sepolia'],
+            address: '0x75faf114eafb1BDbe2F0316DF893fd58CE46AA4d',
+            symbol: 'USDC',
+            decimals: 6,
+            priceUsd: '0',
+            type: 'base-token',
+            balance: '0',
+          },
+        ],
+        pricePerShare: ['1'],
+        priceUsd: '0.999',
+        balance: '10',
+        supply: '190288.768509',
+        availableShortcutIds: ['deposit', 'withdraw'],
+      },
+    ],
+    earnPositionIds: ['arbitrum-sepolia:0x460b97bd498e1157530aeb3086301d5225b91216'],
+  },
+})
+
+describe('ClaimRewardFeedItem', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should render correctly', () => {
+    const { getByText, getByTestId } = render(
+      <Provider store={store}>
+        <ClaimRewardFeedItem transaction={mockClaimRewardTransaction} />
+      </Provider>
+    )
+
+    expect(getByText('transactionFeed.claimRewardTitle')).toBeTruthy()
+    expect(getByText('transactionFeed.claimRewardSubtitle, {"txAppName":"Aave"}')).toBeTruthy()
+    expect(
+      within(getByTestId('ClaimRewardFeedItem/amount-crypto')).getByText('+1.50 ARB')
+    ).toBeTruthy()
+    expect(within(getByTestId('ClaimRewardFeedItem/amount-local')).getByText('₱1.97')).toBeTruthy()
+  })
+
+  it('should display when app name is not available', () => {
+    const { getByText } = render(
+      <Provider store={store}>
+        <ClaimRewardFeedItem transaction={{ ...mockClaimRewardTransaction, appName: undefined }} />
+      </Provider>
+    )
+
+    expect(getByText('transactionFeed.claimRewardSubtitle, {"context":"noTxAppName"}')).toBeTruthy()
+  })
+
+  it('should navigate correctly on tap', () => {
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <ClaimRewardFeedItem transaction={mockClaimRewardTransaction} />
+      </Provider>
+    )
+
+    fireEvent.press(
+      getByTestId(`ClaimRewardFeedItem/${mockClaimRewardTransaction.transactionHash}`)
+    )
+    expect(navigate).toHaveBeenCalledWith(Screens.TransactionDetailsScreen, {
+      transaction: mockClaimRewardTransaction,
+    })
+  })
+
+  it('should fire analytic event on tap', () => {
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <ClaimRewardFeedItem transaction={mockClaimRewardTransaction} />
+      </Provider>
+    )
+
+    fireEvent.press(
+      getByTestId(`ClaimRewardFeedItem/${mockClaimRewardTransaction.transactionHash}`)
+    )
+    expect(AppAnalytics.track).toHaveBeenCalledWith(HomeEvents.transaction_feed_item_select, {
+      itemType: mockClaimRewardTransaction.type,
+    })
+  })
+})

package/src/transactions/feed/ClaimRewardFeedItem.tsx

@@ -0,0 +1,142 @@
+import BigNumber from 'bignumber.js'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, Text, View } from 'react-native'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { HomeEvents } from 'src/analytics/Events'
+import TokenDisplay from 'src/components/TokenDisplay'
+import Touchable from 'src/components/Touchable'
+import { navigate } from 'src/navigator/NavigationService'
+import { Screens } from 'src/navigator/Screens'
+import Colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import { Spacing } from 'src/styles/styles'
+import variables from 'src/styles/variables'
+import TransactionFeedItemImage from 'src/transactions/feed/TransactionFeedItemImage'
+import { ClaimReward } from 'src/transactions/types'
+
+interface DescriptionProps {
+  transaction: ClaimReward
+}
+
+function Description({ transaction }: DescriptionProps) {
+  const { t } = useTranslation()
+  const txAppName = transaction.appName
+  const title = t('transactionFeed.claimRewardTitle')
+  const subtitle = t('transactionFeed.claimRewardSubtitle', {
+    context: !txAppName ? 'noTxAppName' : undefined,
+    txAppName,
+  })
+
+  return (
+    <View style={styles.contentContainer}>
+      <Text style={styles.title} testID={'ClaimRewardFeedItem/title'} numberOfLines={1}>
+        {title}
+      </Text>
+      <Text style={styles.subtitle} testID={'ClaimRewardFeedItem/subtitle'} numberOfLines={1}>
+        {subtitle}
+      </Text>
+    </View>
+  )
+}
+
+interface AmountDisplayProps {
+  transaction: ClaimReward
+  isLocal: boolean
+}
+
+function AmountDisplay({ transaction, isLocal }: AmountDisplayProps) {
+  const amountValue = new BigNumber(transaction.amount.value)
+  const tokenId = transaction.amount.tokenId
+
+  const textStyle = isLocal ? styles.amountSubtitle : [styles.amountTitle, { color: Colors.accent }]
+
+  return (
+    <TokenDisplay
+      amount={amountValue}
+      localAmount={transaction.amount.localAmount}
+      tokenId={tokenId}
+      showLocalAmount={isLocal}
+      showSymbol={true}
+      showExplicitPositiveSign={!isLocal}
+      hideSign={!!isLocal}
+      style={textStyle}
+      testID={`ClaimRewardFeedItem/amount-${isLocal ? 'local' : 'crypto'}`}
+    />
+  )
+}
+
+interface AmountProps {
+  transaction: ClaimReward
+}
+
+function Amount({ transaction }: AmountProps) {
+  return (
+    <View style={styles.amountContainer}>
+      <AmountDisplay transaction={transaction} isLocal={false} />
+      <AmountDisplay transaction={transaction} isLocal={true} />
+    </View>
+  )
+}
+
+interface Props {
+  transaction: ClaimReward
+}
+
+export default function ClaimRewardFeedItem({ transaction }: Props) {
+  return (
+    <Touchable
+      testID={`ClaimRewardFeedItem/${transaction.transactionHash}`}
+      onPress={() => {
+        AppAnalytics.track(HomeEvents.transaction_feed_item_select, {
+          itemType: transaction.type,
+        })
+        navigate(Screens.TransactionDetailsScreen, { transaction })
+      }}
+    >
+      <View style={styles.container}>
+        <TransactionFeedItemImage
+          status={transaction.status}
+          transactionType={transaction.type}
+          networkId={transaction.networkId}
+        />
+        <Description transaction={transaction} />
+        <Amount transaction={transaction} />
+      </View>
+    </Touchable>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    paddingVertical: Spacing.Small12,
+    paddingHorizontal: variables.contentPadding,
+    alignItems: 'center',
+  },
+  contentContainer: {
+    flex: 1,
+    paddingHorizontal: variables.contentPadding,
+  },
+  title: {
+    ...typeScale.labelMedium,
+  },
+  subtitle: {
+    ...typeScale.bodySmall,
+    color: Colors.contentSecondary,
+  },
+  amountContainer: {
+    maxWidth: '50%',
+  },
+  amountTitle: {
+    ...typeScale.labelMedium,
+    flexWrap: 'wrap',
+    textAlign: 'right',
+  },
+  amountSubtitle: {
+    ...typeScale.bodySmall,
+    color: Colors.contentSecondary,
+    flexWrap: 'wrap',
+    textAlign: 'right',
+  },
+})