wallet-stack 1.0.0-alpha.121

package/src/components/multiSelect/NetworkMultiSelectBottomSheet.test.tsx

@@ -0,0 +1,77 @@
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import { Provider } from 'react-redux'
+import MultiSelectBottomSheet from 'src/components/multiSelect/MultiSelectBottomSheet'
+import NetworkMultiSelectBottomSheet from 'src/components/multiSelect/NetworkMultiSelectBottomSheet'
+import { NetworkId } from 'src/transactions/types'
+import { createMockStore } from 'test/utils'
+import { mockCusdTokenId, mockEthTokenId, mockTokenBalances } from 'test/values'
+
+jest.mock('src/components/multiSelect/MultiSelectBottomSheet')
+
+describe('NetworkMultiSelectBottomSheet', () => {
+  it('calls MultiSelectBottomSheet with the correct props', () => {
+    const setSelectedNetworkIds = jest.fn()
+    const forwardedRef = { current: null }
+    const onSelect = jest.fn()
+    const onOpen = jest.fn()
+    const allNetworkIds = [NetworkId['celo-alfajores'], NetworkId['ethereum-sepolia']]
+    const selectedNetworkIds = [NetworkId['celo-alfajores']]
+    const expectedOptions = [
+      {
+        text: 'Celo Alfajores',
+        iconUrl: 'url-for-cusd-icon',
+        id: NetworkId['celo-alfajores'],
+      },
+      {
+        text: 'Ethereum Sepolia',
+        iconUrl: 'url-for-eth-icon',
+        id: NetworkId['ethereum-sepolia'],
+      },
+    ]
+
+    render(
+      <Provider
+        store={createMockStore({
+          tokens: {
+            tokenBalances: {
+              ...mockTokenBalances,
+              [mockCusdTokenId]: {
+                ...mockTokenBalances[mockCusdTokenId],
+                networkIconUrl: 'url-for-cusd-icon',
+              },
+              [mockEthTokenId]: {
+                ...mockTokenBalances[mockEthTokenId],
+                networkIconUrl: 'url-for-eth-icon',
+              },
+            },
+          },
+        })}
+      >
+        <NetworkMultiSelectBottomSheet
+          forwardedRef={forwardedRef}
+          onSelect={onSelect}
+          onOpen={onOpen}
+          allNetworkIds={allNetworkIds}
+          selectedNetworkIds={selectedNetworkIds}
+          setSelectedNetworkIds={setSelectedNetworkIds}
+        />
+      </Provider>
+    )
+
+    expect(MultiSelectBottomSheet).toHaveBeenCalledWith(
+      {
+        forwardedRef,
+        onSelect,
+        onOpen,
+        selectedOptions: [NetworkId['celo-alfajores']],
+        setSelectedOptions: expect.any(Function),
+        options: expectedOptions,
+        selectAllText: 'multiSelect.allNetworks',
+        title: 'multiSelect.switchNetwork',
+        mode: 'select-all-or-one',
+      },
+      undefined
+    )
+  })
+})

package/src/components/multiSelect/NetworkMultiSelectBottomSheet.tsx

@@ -0,0 +1,56 @@
+import { BottomSheetModal } from '@gorhom/bottom-sheet'
+import React, { Dispatch, SetStateAction, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import MultiSelectBottomSheet from 'src/components/multiSelect/MultiSelectBottomSheet'
+import { useSelector } from 'src/redux/hooks'
+import { NETWORK_NAMES } from 'src/shared/conts'
+import { networksIconSelector } from 'src/tokens/selectors'
+import { NetworkId } from 'src/transactions/types'
+
+interface Props {
+  forwardedRef: React.RefObject<BottomSheetModal | null>
+  onSelect?: (networks: NetworkId[]) => void
+  onOpen?: () => void
+  allNetworkIds: NetworkId[]
+  selectedNetworkIds: NetworkId[]
+  setSelectedNetworkIds: Dispatch<SetStateAction<NetworkId[]>>
+}
+
+function NetworkMultiSelectBottomSheet({
+  forwardedRef,
+  onSelect,
+  onOpen,
+  allNetworkIds,
+  selectedNetworkIds,
+  setSelectedNetworkIds,
+}: Props) {
+  const { t } = useTranslation()
+
+  const networkIconByNetworkId = useSelector(networksIconSelector)
+
+  const options = useMemo(
+    () =>
+      allNetworkIds.map((networkId) => ({
+        text: NETWORK_NAMES[networkId],
+        iconUrl: networkIconByNetworkId[networkId],
+        id: networkId,
+      })),
+    [allNetworkIds, networkIconByNetworkId]
+  )
+
+  return (
+    <MultiSelectBottomSheet<NetworkId>
+      forwardedRef={forwardedRef}
+      onSelect={onSelect}
+      onOpen={onOpen}
+      options={options}
+      selectedOptions={selectedNetworkIds}
+      setSelectedOptions={setSelectedNetworkIds}
+      selectAllText={t('multiSelect.allNetworks')}
+      title={t('multiSelect.switchNetwork')}
+      mode={'select-all-or-one'}
+    />
+  )
+}
+
+export default NetworkMultiSelectBottomSheet

package/src/components/useShowOrHideAnimation.tsx

@@ -0,0 +1,33 @@
+import { useEffect } from 'react'
+import Animated, { runOnJS, withTiming } from 'react-native-reanimated'
+
+const SHOW_DURATION = 200
+const HIDE_DURATION = 150
+/**
+ * - This hook will update the |progress| shared value when |showing| changes from true to
+ * false (and viceversa) applying an ease in-out function.
+ * - |progress| will be set to 1 when |showing| is true and 0 when |showing| is false.
+ * - |onShow| will be called immediately when |showing| turns to true and |onHide| will be
+ * called after the hiding animation finishes.
+ */
+export function useShowOrHideAnimation(
+  progress: Animated.SharedValue<number>,
+  showing: boolean,
+  onShow: () => void,
+  onHide: () => void
+) {
+  useEffect(() => {
+    progress.value = withTiming(
+      showing ? 1 : 0,
+      { duration: showing ? SHOW_DURATION : HIDE_DURATION },
+      (isFinished) => {
+        if (isFinished && !showing) {
+          runOnJS(onHide)()
+        }
+      }
+    )
+    if (showing) {
+      onShow()
+    }
+  }, [showing])
+}

package/src/config.ts

@@ -0,0 +1,186 @@
+import { CachesDirectoryPath } from '@divvi/react-native-fs'
+import { Network } from '@fiatconnect/fiatconnect-types'
+import Config from 'react-native-config'
+import { SpendMerchant } from 'src/fiatExchanges/Spend'
+import { LoggerLevel } from 'src/utils/LoggerLevels'
+// eslint-disable-next-line import/no-relative-packages
+import { TORUS_SAPPHIRE_NETWORK } from '@toruslabs/constants'
+import { LaunchArguments } from 'react-native-launch-arguments'
+import { getAppConfig } from 'src/appConfig'
+import { HomeActionName } from 'src/home/types'
+import { ToggleableOnboardingFeatures } from 'src/onboarding/types'
+import { stringToBoolean } from 'src/utils/parsing'
+import { ONE_HOUR_IN_MILLIS } from './utils/time'
+
+export interface ExpectedLaunchArgs {
+  statsigGateOverrides?: string // format: gate_1=true,gate_2=false
+  onboardingOverrides?: string // same format as ONBOARDING_FEATURES_ENABLED env var
+}
+
+const appConfig = getAppConfig()
+const experimentalConfig = appConfig.experimental ?? {}
+
+const configOrThrow = (key: string) => {
+  const value = Config[key]
+  if (value) {
+    return value
+  }
+  throw new RangeError(`Missing Config value for ${key}`)
+}
+
+export const APP_NAME = appConfig.displayName
+export const APP_REGISTRY_NAME = configOrThrow('APP_REGISTRY_NAME')
+
+// DEV only related settings
+export const isE2EEnv = stringToBoolean(process.env.EXPO_PUBLIC_DIVVI_E2E || 'false')
+export const DEV_RESTORE_NAV_STATE_ON_RELOAD = stringToBoolean(
+  Config.DEV_RESTORE_NAV_STATE_ON_RELOAD || 'false'
+)
+export const DEV_SETTINGS_ACTIVE_INITIALLY = stringToBoolean(
+  Config.DEV_SETTINGS_ACTIVE_INITIALLY || 'false'
+)
+
+// VALUES
+export const ALERT_BANNER_DURATION = 5000
+// The maximum allowed value to add funds
+export const DOLLAR_ADD_FUNDS_MAX_AMOUNT = 5000
+// The minimum allowed value for a transaction such as a transfer
+export const STABLE_TRANSACTION_MIN_AMOUNT = 0.01
+export const TOKEN_MIN_AMOUNT = 0.00000001
+// The minimum amount for a wallet to be considered as "funded"
+export const DOLLAR_MIN_AMOUNT_ACCOUNT_FUNDED = 0.01
+// The number of seconds before the sender can reclaim the payment.
+export const DEFAULT_TESTNET = configOrThrow('DEFAULT_TESTNET')
+// Additional gas added when setting the fee currency
+// See details where used.
+export const STATIC_GAS_PADDING = 50_000
+
+export const TIME_UNTIL_TOKEN_INFO_BECOMES_STALE = 12 * ONE_HOUR_IN_MILLIS
+
+export const DEFAULT_FORNO_URL =
+  DEFAULT_TESTNET === 'mainnet'
+    ? 'https://forno.celo.org/'
+    : 'https://alfajores-forno.celo-testnet.org/'
+
+export const ENABLED_NETWORK_IDS = configOrThrow('ENABLED_NETWORK_IDS').split(',')
+
+export const APP_BUNDLE_ID = configOrThrow('APP_BUNDLE_ID')
+export const DEEP_LINK_URL_SCHEME = configOrThrow('DEEP_LINK_URL_SCHEME')
+
+// The network that FiatConnect providers operate on
+export const FIATCONNECT_NETWORK =
+  DEFAULT_TESTNET === 'mainnet' ? Network.Mainnet : Network.Alfajores
+
+export const STATSIG_ENV = {
+  tier: DEFAULT_TESTNET === 'mainnet' ? 'production' : 'development',
+}
+
+// Keyless backup settings
+export const TORUS_NETWORK =
+  DEFAULT_TESTNET === 'mainnet'
+    ? TORUS_SAPPHIRE_NETWORK.SAPPHIRE_MAINNET
+    : TORUS_SAPPHIRE_NETWORK.SAPPHIRE_DEVNET
+
+// FEATURE FLAGS
+export const FIREBASE_ENABLED = stringToBoolean(Config.FIREBASE_ENABLED || 'true')
+export const SHOW_TESTNET_BANNER = stringToBoolean(Config.SHOW_TESTNET_BANNER || 'false')
+export const SENTRY_ENABLED = stringToBoolean(Config.SENTRY_ENABLED || 'false')
+
+export const WEB3AUTH_CLIENT_ID =
+  DEFAULT_TESTNET === 'mainnet'
+    ? 'BAJWXF8YqQSoNtdfX3z-vxgkZ0ZfN0hJVT0eGuf9BqoRbojNIxthU0wnW0oBScduV6XLeEePSmVhHQXuaqBMjcw'
+    : 'BH-yuQkutyRCHMwcTQu_zSpkbG5fGeJEoc45DeoW4krzESwLD6qhQXRCuTSrFU_-qbvIvLcZhUJv9G5xmoFip8M'
+
+// SECRETS
+export const ALCHEMY_API_KEY = experimentalConfig.alchemyApiKey
+
+export const STATSIG_API_KEY = appConfig.features?.statsig?.apiKey
+export const STATSIG_ENABLED = !isE2EEnv && !!STATSIG_API_KEY
+export const SEGMENT_API_KEY = appConfig.features?.segment?.apiKey
+export const AUTH0_CLIENT_ID =
+  DEFAULT_TESTNET === 'mainnet'
+    ? 'FS2sPfMvDBKy0udOoCbc4ao8HakvAR6b'
+    : 'YgsHPq93Egfap5Wc4iEQlGyQMqjLeBf2'
+
+export const AUTH0_DOMAIN = configOrThrow('AUTH0_DOMAIN')
+
+export const SPEND_MERCHANT_LINKS: SpendMerchant[] = [
+  {
+    name: 'Beam and Go',
+    link: 'https://valora.beamandgo.com/',
+  },
+  {
+    name: 'Merchant Map',
+    link: 'https://celo.org/experience/merchant/merchants-accepting-celo#map',
+    subtitleKey: 'findMerchants',
+  },
+]
+
+export const CELO_LOGO_URL =
+  'https://firebasestorage.googleapis.com/v0/b/celo-mobile-mainnet.appspot.com/o/images%2Fcelo.jpeg?alt=media'
+export const SUPERCHARGE_LOGO_URL =
+  'https://firebasestorage.googleapis.com/v0/b/celo-mobile-mainnet.appspot.com/o/images%2Fsupercharge_logo.png?alt=media'
+
+export const SIMPLEX_FEES_URL =
+  'https://support.simplex.com/hc/en-gb/articles/360014078420-What-fees-am-I-paying-'
+
+export const APP_STORE_ID = Config.APP_STORE_ID
+export const OTA_TRANSLATIONS_FILEPATH = `file://${CachesDirectoryPath}/translations`
+
+export const FETCH_TIMEOUT_DURATION = 15000 // 15 seconds
+
+export const DEFAULT_APP_LANGUAGE = 'en-US'
+
+// Logging and monitoring
+export const DEFAULT_SENTRY_TRACES_SAMPLE_RATE = 0.2
+export const DEFAULT_SENTRY_NETWORK_ERRORS = [
+  'network request failed',
+  'The network connection was lost',
+]
+
+const configLoggerLevels: { [key: string]: LoggerLevel } = {
+  debug: LoggerLevel.Debug,
+  info: LoggerLevel.Info,
+  warn: LoggerLevel.Warn,
+  error: LoggerLevel.Error,
+}
+
+export const LOGGER_LEVEL = Config.LOGGER_LEVEL
+  ? (configLoggerLevels[Config.LOGGER_LEVEL] ?? LoggerLevel.Debug)
+  : LoggerLevel.Debug
+
+export const PHONE_NUMBER_VERIFICATION_CODE_LENGTH = 6
+
+const ONBOARDING_FEATURES_ALL_DISABLED = Object.fromEntries(
+  Object.values(ToggleableOnboardingFeatures).map((value) => [value, false])
+)
+
+export const ONBOARDING_FEATURES_ENABLED = (
+  LaunchArguments.value<ExpectedLaunchArgs>()?.onboardingOverrides ??
+  Config.ONBOARDING_FEATURES_ENABLED ??
+  Object.values(ToggleableOnboardingFeatures).join(',')
+)
+  .split(',')
+  .filter(
+    (value) =>
+      !!value &&
+      Object.values(ToggleableOnboardingFeatures).includes(value as ToggleableOnboardingFeatures)
+  )
+  .reduce((acc, value) => {
+    acc[value] = true
+    return acc
+  }, ONBOARDING_FEATURES_ALL_DISABLED)
+
+export const ENABLED_QUICK_ACTIONS = (
+  Config.ENABLED_QUICK_ACTIONS ??
+  // Default to all actions
+  Object.values(HomeActionName).join(',')
+)
+  .split(',')
+  .filter(
+    (value) => !!value && Object.values(HomeActionName).includes(value as HomeActionName)
+  ) as HomeActionName[]
+
+export const FETCH_FIATCONNECT_QUOTES = true
+
+export const WALLETCONNECT_UNIVERSAL_LINK = 'https://valoraapp.com/wc'

package/src/dapps/DappShortcutTransactionRequest.test.tsx

@@ -0,0 +1,187 @@
+import { act, fireEvent, render, waitFor } from '@testing-library/react-native'
+import React from 'react'
+import { Provider } from 'react-redux'
+import DappShortcutTransactionRequest from 'src/dapps/DappShortcutTransactionRequest'
+import { RawShortcutTransaction, denyExecuteShortcut, executeShortcut } from 'src/positions/slice'
+import { ShortcutStatus } from 'src/positions/types'
+import { NetworkId } from 'src/transactions/types'
+import { prepareTransactions } from 'src/viem/prepareTransactions'
+import { getSerializablePreparedTransactions } from 'src/viem/preparedTransactionSerialization'
+import MockedNavigator from 'test/MockedNavigator'
+import { createMockStore } from 'test/utils'
+import { mockCeloTokenBalance, mockPositions, mockShortcuts } from 'test/values'
+import { parseGwei } from 'viem'
+
+jest.mock('src/statsig', () => ({
+  getFeatureGate: jest.fn(() => true),
+}))
+
+jest.mock('src/viem/prepareTransactions')
+
+const rewardId = 'claim-reward-0xda7f463c27ec862cfbf2369f3f74c364d050d93f-0.010209368244703615'
+
+function getMockStoreWithShortcutStatus(
+  status: ShortcutStatus,
+  transactions: RawShortcutTransaction[]
+) {
+  return createMockStore({
+    positions: {
+      positions: mockPositions,
+      shortcuts: mockShortcuts,
+      triggeredShortcutsStatus: {
+        [rewardId]: {
+          status,
+          transactions,
+          appName: 'some app name',
+          appImage: 'https://some.app/image.png',
+        },
+      },
+    },
+  })
+}
+
+describe('DappShortcutTransactionRequest', () => {
+  const transactions = [
+    {
+      from: '0x2b8441ef13333ffa955c9ea5ab5b3692da95260d',
+      networkId: NetworkId['celo-alfajores'],
+      data: '0x3d18b912',
+      to: '0xda7f463c27ec862cfbf2369f3f74c364d050d93f',
+    } as const,
+  ]
+  const gas = BigInt(100_000)
+  const maxFeePerGas = parseGwei('5')
+  const _baseFeePerGas = parseGwei('1')
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    jest.mocked(prepareTransactions).mockImplementation(async ({ baseTransactions }) => ({
+      transactions: baseTransactions.map((tx) => ({
+        ...tx,
+        gas,
+        maxFeePerGas,
+        _baseFeePerGas,
+      })),
+      type: 'possible' as const,
+      feeCurrency: mockCeloTokenBalance,
+    }))
+  })
+
+  it('should a loader when the shortcut transaction has not been fetched yet', async () => {
+    const { queryByText, getByTestId } = render(
+      <Provider store={getMockStoreWithShortcutStatus('loading', [])}>
+        <MockedNavigator component={DappShortcutTransactionRequest} params={{ rewardId }} />
+      </Provider>
+    )
+
+    await waitFor(() => expect(getByTestId('DappShortcutTransactionRequest/Loading')).toBeTruthy())
+    expect(queryByText('confirmTransaction')).toBeFalsy()
+  })
+
+  it('should display a dismiss-only bottom sheet if the user has insufficient gas funds', async () => {
+    const store = getMockStoreWithShortcutStatus('pendingAccept', transactions)
+    jest.mocked(prepareTransactions).mockImplementation(async ({ baseTransactions }) => ({
+      type: 'not-enough-balance-for-gas' as const,
+      feeCurrencies: [mockCeloTokenBalance],
+    }))
+    const { getByText, queryByText } = render(
+      <Provider store={store}>
+        <MockedNavigator component={DappShortcutTransactionRequest} params={{ rewardId }} />
+      </Provider>
+    )
+
+    await waitFor(() =>
+      expect(getByText('walletConnectRequest.notEnoughBalanceForGas.title')).toBeTruthy()
+    )
+    expect(
+      getByText(
+        'walletConnectRequest.notEnoughBalanceForGas.description, {"feeCurrencies":"CELO, cEUR, cUSD"}'
+      )
+    ).toBeTruthy()
+    expect(queryByText('allow')).toBeFalsy()
+
+    fireEvent.press(getByText('dismiss'))
+    expect(store.getActions()).toEqual([denyExecuteShortcut(rewardId)])
+  })
+
+  it("should display a dismiss-only bottom sheet if the transaction couldn't be prepared", async () => {
+    const store = getMockStoreWithShortcutStatus('pendingAccept', transactions)
+    jest.mocked(prepareTransactions).mockRejectedValue(new Error('some error'))
+    const { getByText, queryByText } = render(
+      <Provider store={store}>
+        <MockedNavigator component={DappShortcutTransactionRequest} params={{ rewardId }} />
+      </Provider>
+    )
+
+    await waitFor(() =>
+      expect(getByText('walletConnectRequest.failedToPrepareTransaction.title')).toBeTruthy()
+    )
+    expect(
+      getByText(
+        'walletConnectRequest.failedToPrepareTransaction.description, {"errorMessage":"some error"}'
+      )
+    ).toBeTruthy()
+    expect(queryByText('allow')).toBeFalsy()
+
+    fireEvent.press(getByText('dismiss'))
+    expect(store.getActions()).toEqual([denyExecuteShortcut(rewardId)])
+  })
+
+  it('should accept the transaction request and handle dismiss the bottom sheet', async () => {
+    const store = getMockStoreWithShortcutStatus('pendingAccept', transactions)
+    const { getByText, queryByTestId, getByTestId, unmount } = render(
+      <Provider store={store}>
+        <MockedNavigator component={DappShortcutTransactionRequest} params={{ rewardId }} />
+      </Provider>
+    )
+
+    await waitFor(() => expect(queryByTestId('EstimatedNetworkFee/Loading')).toBeFalsy())
+    expect(queryByTestId('DappShortcutTransactionRequest/Loading')).toBeFalsy()
+
+    expect(getByText('confirmTransaction')).toBeTruthy()
+
+    const expectedPreparedTransactions = getSerializablePreparedTransactions(
+      transactions.map((tx) => ({
+        from: tx.from,
+        to: tx.to,
+        value: undefined,
+        data: tx.data,
+        gas,
+        maxFeePerGas,
+        _baseFeePerGas,
+        _estimatedGasUse: undefined,
+      }))
+    )
+    expect(getByTestId('DappShortcutTransactionRequest/RewardTransactionData')).toHaveTextContent(
+      JSON.stringify(expectedPreparedTransactions),
+      { exact: false }
+    )
+
+    fireEvent.press(getByText('allow'))
+
+    expect(store.getActions()).toStrictEqual([
+      executeShortcut({ id: rewardId, preparedTransactions: expectedPreparedTransactions }),
+    ])
+
+    store.clearActions()
+    unmount()
+
+    // should not deny the transaction on dismiss bottom sheet if transaction is approved
+    expect(store.getActions()).toStrictEqual([])
+  })
+
+  it('should deny the transaction request on dismiss bottom sheet', async () => {
+    const store = getMockStoreWithShortcutStatus('pendingAccept', transactions)
+    const { unmount } = render(
+      <Provider store={store}>
+        <MockedNavigator component={DappShortcutTransactionRequest} params={{ rewardId }} />
+      </Provider>
+    )
+
+    await act(() => {
+      unmount()
+    })
+
+    expect(store.getActions()).toEqual([denyExecuteShortcut(rewardId)])
+  })
+})