wallet-stack 1.0.0-alpha.121

package/src/public/sendTransactions.ts

@@ -0,0 +1,25 @@
+import { call } from 'typed-redux-saga'
+import type { RunSaga } from '../redux/store'
+import type { GetSerializablePreparedTransactions } from '../viem/preparedTransactionSerialization'
+import type { SendPreparedTransactions } from '../viem/saga'
+import type { PreparedTransactionsPossible } from './prepareTransactions'
+
+export async function sendTransactions(prepared: PreparedTransactionsPossible) {
+  const runSaga = require('../redux/store').runSaga as RunSaga
+  const getSerializablePreparedTransactions = require('../viem/preparedTransactionSerialization')
+    .getSerializablePreparedTransactions as GetSerializablePreparedTransactions
+  const sendPreparedTransactions = require('../viem/saga')
+    .sendPreparedTransactions as SendPreparedTransactions
+
+  const result = await runSaga(function* () {
+    const txHashes = yield* call(
+      sendPreparedTransactions,
+      getSerializablePreparedTransactions(prepared.transactions),
+      prepared.feeCurrency.networkId,
+      prepared.transactions.map(() => () => null)
+    )
+    return txHashes
+  })
+
+  return result
+}

package/src/public/types.tsx

@@ -0,0 +1,278 @@
+import type { ImageSourcePropType } from 'react-native'
+import { Address } from 'viem'
+import type { NavigatorScreen } from './navigate'
+
+// Type for tab configuration
+export interface TabScreenConfig {
+  name: string // Just a unique identifier for the screen
+  component: React.ComponentType<any>
+  icon: (props: { focused: boolean; color: string; size: number }) => React.ReactNode
+  label: (t: (key: string) => string) => string
+  testID?: string
+}
+
+// This will evolve. We should be mindful of breaking changes.
+// This structure should scale well as we add more features
+// and makes it clear what's core configuration vs optional features.
+//
+// Guidelines:
+// - We should only have a few core configuration options, and the rest should be optional features and/or with default values
+// - We should only add new configuration options that we want to support long term, and not just for a specific app
+// - Configuration options should be well documented and have clear purposes
+// - Breaking changes to configuration should be avoided when possible
+// - Configuration should be type-safe. In some cases we can consider runtime validation.
+export interface PublicAppConfig<tabScreenConfigs extends TabScreenConfig[] = TabScreenConfig[]> {
+  registryName: string
+  displayName: string
+  deepLinkUrlScheme: string
+
+  // Platform specific configuration
+  ios?: {
+    appStoreId?: string
+  }
+
+  // Theme configuration
+  themes?: {
+    // Rough example of what we might want to support
+    default: {
+      // To adjust status bar style, keyboard appearance, etc
+      isDark?: boolean
+      colors?: {
+        // backgrounds
+        backgroundPrimary?: string
+        backgroundSecondary?: string
+        backgroundTertiary?: string
+        backgroundScrim?: string
+        backgroundSplash?: string
+        // text, icons, and other content
+        contentPrimary?: string
+        contentSecondary?: string
+        contentTertiary?: string
+        textLink?: string
+
+        // borders, shadows, highlights, visual effects
+        borderPrimary?: string
+        borderSecondary?: string
+        softShadow?: string
+        lightShadow?: string
+        barShadow?: string
+        skeletonPlaceholderHighlight?: string
+        skeletonPlaceholderBackground?: string
+        loadingIndicator?: string
+
+        // interactive elements
+        navigationTopPrimary?: string
+        navigationTopSecondary?: string
+        navigationBottomPrimary?: string
+        navigationBottomSecondary?: string
+        bottomSheetHandle?: string
+        /**
+         * Can be a single color or array of colors for a linear gradient
+         */
+        buttonPrimaryBackground?: string | string[]
+        buttonPrimaryContent?: string
+        buttonPrimaryBorder?: string
+        buttonSecondaryBackground?: string
+        buttonSecondaryContent?: string
+        buttonSecondaryBorder?: string
+        buttonTertiaryBackground?: string
+        buttonTertiaryContent?: string
+        buttonTertiaryBorder?: string
+        buttonQuickActionBackground?: string
+        buttonQuickActionContent?: string
+        buttonQuickActionBorder?: string
+        textInputBackground?: string
+        qrTabBarPrimary?: string
+        qrTabBarSecondary?: string
+
+        // statuses and UI feedback colors
+        disabled?: string
+        inactive?: string
+        info?: string
+        successPrimary?: string
+        successSecondary?: string
+        warningPrimary?: string
+        warningSecondary?: string
+        errorPrimary?: string
+        errorSecondary?: string
+
+        // brand colors for decorative elements
+        accent?: string
+        brandGradientLeft?: string
+        brandGradientRight?: string
+        contentOnboardingComplete?: string
+        backgroundOnboardingComplete?: string
+      }
+
+      assets?: {
+        // TODO: refine this as we add more assets (e.g. do we want to group by type? or screens? etc)
+        welcomeLogo?: React.ComponentType<any>
+        welcomeBackgroundImage?: ImageSourcePropType
+        onboardingSuccessImage?: ImageSourcePropType
+        onboardingSuccessBackgroundImage?: ImageSourcePropType
+        splashBackgroundImage?: ImageSourcePropType
+        brandLogo?: React.ComponentType<{
+          size?: number
+          color?: string
+        }>
+        noEarnPoolsLogo?: React.ComponentType<any>
+        biometryImages?: {
+          face?: ImageSourcePropType
+          faceId?: ImageSourcePropType
+          fingerprint?: ImageSourcePropType
+          touchId?: ImageSourcePropType
+          iris?: ImageSourcePropType
+        }
+        backupAndRecoveryImages?: {
+          // TODO: consider renaming these to be more descriptive or switch to
+          // color parameterized svgs that are set based on theme colors
+          walletSafe?: ImageSourcePropType
+          cloudBackupEmail?: ImageSourcePropType
+          recoveryPhraseEducation1?: ImageSourcePropType
+          recoveryPhraseEducation2?: ImageSourcePropType
+          recoveryPhraseEducation3?: ImageSourcePropType
+          recoveryPhraseEducation4?: ImageSourcePropType
+        }
+      }
+    }
+  }
+
+  // Screen overrides
+  screens?: {
+    // Tab navigation configuration
+    tabs?: (args: {
+      defaultTabs: {
+        wallet: TabScreenConfig & { name: 'wallet' }
+        activity: TabScreenConfig & { name: 'activity' }
+        discover: TabScreenConfig & { name: 'discover' }
+        earn: TabScreenConfig & { name: 'earn' }
+      }
+    }) => {
+      screens?: tabScreenConfigs
+      initialScreen?: tabScreenConfigs[number]['name']
+    } // Later we could allow passing in a component for advanced cases
+    custom?: (Screen: NavigatorScreen) => React.JSX.Element
+  }
+
+  // Optional features/capabilities
+  features?: {
+    sentry?: {
+      clientUrl: string
+    }
+    // TODO: what's the marketing name for this?
+    cloudBackup?: boolean
+    walletConnect?: {
+      projectId: string
+    }
+    statsig?: {
+      apiKey: string
+    }
+    segment?: {
+      apiKey: string
+    }
+  }
+
+  /**
+   * Optional copies overwrite. This field should contain the same language keys as @interxyz/mobile.
+   * TODO: Eventually, we want to make this fully type-safe (maybe with generics?)
+   */
+  locales?: Partial<{
+    'en-US': Record<string, any>
+    'es-419': Record<string, any>
+    'pt-BR': Record<string, any>
+    de: Record<string, any>
+    'ru-RU': Record<string, any>
+    'fr-FR': Record<string, any>
+    'it-IT': Record<string, any>
+    'uk-UA': Record<string, any>
+    'th-TH': Record<string, any>
+    'tr-TR': Record<string, any>
+    'pl-PL': Record<string, any>
+    'vi-VN': Record<string, any>
+    'zh-CN': Record<string, any>
+  }>
+
+  //
+  networks?: {
+    enabledNetworkIds?: NetworkId[]
+    // TODO: we'll pass RPC urls, API urls, etc here
+  }
+
+  /**
+   * Experimental features that may change or be removed in future versions.
+   * These features are not part of the stable configuration API and should be used with caution.
+   *
+   * Features may graduate to the stable API or be removed entirely.
+   */
+  experimental?: {
+    firebase?: boolean
+    recaptcha?: {
+      iosSiteKey?: string
+      androidSiteKey?: string
+    }
+    alchemyApiKey?: string
+    onboarding?: {
+      enableBiometry?: boolean
+      protectWallet?: boolean
+    }
+    activity?: {
+      hideActionsCarousel?: boolean
+    }
+    earn?: {
+      showLearnMore?: boolean
+      showSafetyScoreOnPoolCard?: boolean
+    }
+    wallet?: {
+      showActionsCarousel?: boolean
+      emptyState?: React.ReactElement<any>
+    }
+    transactions?: {
+      emptyState?: React.ReactElement<any>
+    }
+    bidali?: {
+      url: string
+    }
+    inviteFriends?: {
+      shareUrl?: string
+    }
+    notificationCenter?: boolean
+    zendeskConfig?: {
+      apiKey: string
+      projectName: string
+    }
+    phoneNumberVerification?: boolean
+    tokens?: {
+      // list of tokens to display.
+      enabledTokenIds: string[]
+      // overrides for token metadata.
+      overrides?: {
+        [tokenId: string]: {
+          showZeroBalance?: boolean
+        }
+      }
+    }
+    disableNfts?: boolean
+    hideCashInTokenFilters?: boolean
+    otaTranslations?: {
+      crowdinDistributionHash: string
+    }
+    // statsig feature gate / dynamic config defaults
+    showPositions?: boolean
+    showImportTokensFlow?: boolean
+    showSwapTokenFilters?: boolean
+    enableSwapAppFee?: boolean
+  }
+
+  divviProtocol?: {
+    divviId: Address
+  }
+}
+
+// TODO: we'll use this type throughout the framework once we're able to make bigger refactor, eliminating the current NetworkId enum
+export type NetworkId =
+  | 'celo-mainnet'
+  | 'ethereum-mainnet'
+  | 'arbitrum-one'
+  | 'op-mainnet'
+  | 'polygon-pos-mainnet'
+  | 'base-mainnet'

package/src/public/unlockAccount.test.ts

@@ -0,0 +1,79 @@
+/* eslint-disable require-yield */
+import { mockAccount } from 'test/values'
+import {
+  UnlockResult as InternalUnlockResult,
+  unlockAccount as unlockAccountSaga,
+} from '../web3/saga'
+import { walletAddressSelector } from '../web3/selectors'
+import { unlockAccount } from './unlockAccount'
+
+jest.mock('../web3/selectors', () => ({
+  ...jest.requireActual('../web3/selectors'),
+  walletAddressSelector: jest.fn(),
+}))
+jest.mock('../web3/saga', () => ({
+  ...jest.requireActual('../web3/saga'),
+  unlockAccount: jest.fn(),
+}))
+
+const mockWalletSelector = jest.mocked(walletAddressSelector)
+const mockUnlockSaga = jest.mocked(unlockAccountSaga)
+
+describe('unlockAccount', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    // Set default mock values
+    mockWalletSelector.mockReturnValue(mockAccount)
+    mockUnlockSaga.mockImplementation(function* () {
+      return InternalUnlockResult.SUCCESS
+    })
+  })
+
+  it('should return success when unlock is successful', async () => {
+    mockUnlockSaga.mockImplementation(function* () {
+      return InternalUnlockResult.SUCCESS
+    })
+
+    const result = await unlockAccount()
+    expect(result).toBe('success')
+    expect(mockUnlockSaga).toHaveBeenCalledWith(mockAccount)
+  })
+
+  it('should return failure when unlock fails', async () => {
+    mockUnlockSaga.mockImplementation(function* () {
+      return InternalUnlockResult.FAILURE
+    })
+
+    const result = await unlockAccount()
+    expect(result).toBe('failure')
+    expect(mockUnlockSaga).toHaveBeenCalledWith(mockAccount)
+  })
+
+  it('should return canceled when unlock is canceled', async () => {
+    mockUnlockSaga.mockImplementation(function* () {
+      return InternalUnlockResult.CANCELED
+    })
+
+    const result = await unlockAccount()
+    expect(result).toBe('canceled')
+    expect(mockUnlockSaga).toHaveBeenCalledWith(mockAccount)
+  })
+
+  it('should return failure when saga throws an error', async () => {
+    mockUnlockSaga.mockImplementation(function* () {
+      throw new Error('Some error')
+    })
+
+    const result = await unlockAccount()
+    expect(result).toBe('failure')
+    expect(mockUnlockSaga).toHaveBeenCalledWith(mockAccount)
+  })
+
+  it('should return failure when no wallet address is found', async () => {
+    mockWalletSelector.mockReturnValue(null)
+
+    const result = await unlockAccount()
+    expect(result).toBe('failure')
+    expect(mockUnlockSaga).not.toHaveBeenCalled()
+  })
+})

package/src/public/unlockAccount.ts

@@ -0,0 +1,43 @@
+// See useWallet for why we don't directly import internal modules, except for the types
+import { call, select } from 'typed-redux-saga'
+import type { RunSaga } from '../redux/store'
+import type { UnlockResultType as InternalUnlockResultType, UnlockAccount } from '../web3/saga'
+import type { WalletAddressSelector } from '../web3/selectors'
+
+export type UnlockResult =
+  /** unlocked account successfully */
+  | 'success'
+  /** failure while unlocking account */
+  | 'failure'
+  /** user canceled */
+  | 'canceled'
+
+export async function unlockAccount(): Promise<UnlockResult> {
+  const runSaga = require('../redux/store').runSaga as RunSaga
+  const unlockAccount = require('../web3/saga').unlockAccount as UnlockAccount
+  const InternalUnlockResult = require('../web3/saga').UnlockResult as InternalUnlockResultType
+  const walletAddressSelector = require('../web3/selectors')
+    .walletAddressSelector as WalletAddressSelector
+
+  const result = await runSaga(function* () {
+    const address = yield* select(walletAddressSelector)
+    if (!address) {
+      throw new Error('No wallet address found')
+    }
+    return yield* call(unlockAccount, address)
+  }).catch((error) => {
+    return InternalUnlockResult.FAILURE
+  })
+
+  switch (result) {
+    case InternalUnlockResult.SUCCESS:
+      return 'success'
+    case InternalUnlockResult.FAILURE:
+      return 'failure'
+    case InternalUnlockResult.CANCELED:
+      return 'canceled'
+    default:
+      const exhaustiveCheck: never = result
+      return exhaustiveCheck
+  }
+}

package/src/qrcode/NotAuthorizedView.test.tsx

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react-native'
+import * as React from 'react'
+import NotAuthorizedView from 'src/qrcode/NotAuthorizedView'
+
+describe('NotAuthorizedView', () => {
+  it('renders correctly', () => {
+    const { toJSON } = render(<NotAuthorizedView />)
+
+    expect(toJSON()).toMatchSnapshot()
+  })
+})

package/src/qrcode/NotAuthorizedView.tsx

@@ -0,0 +1,47 @@
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Platform, StyleSheet, Text, View } from 'react-native'
+import * as AndroidOpenSettings from 'react-native-android-open-settings'
+import TextButton from 'src/components/TextButton'
+import colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import { navigateToURI } from 'src/utils/linking'
+
+export default function NotAuthorizedView() {
+  const { t } = useTranslation()
+  const onPressSettings = useCallback(() => {
+    if (Platform.OS === 'ios') {
+      navigateToURI('app-settings:')
+    } else if (Platform.OS === 'android') {
+      AndroidOpenSettings.appDetailsSettings()
+    }
+  }, [])
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{t('cameraNotAuthorizedTitle')}</Text>
+      <Text style={styles.description}>{t('cameraNotAuthorizedDescription')}</Text>
+      <TextButton onPress={onPressSettings}>{t('cameraSettings')}</TextButton>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+  },
+  title: {
+    ...typeScale.titleSmall,
+    marginBottom: 8,
+    color: colors.qrTabBarSecondary,
+  },
+  description: {
+    ...typeScale.bodyMedium,
+    color: colors.qrTabBarSecondary,
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+})

package/src/qrcode/QRCode.test.tsx

@@ -0,0 +1,117 @@
+import Clipboard from '@react-native-clipboard/clipboard'
+import { fireEvent, render } from '@testing-library/react-native'
+import * as React from 'react'
+import { Provider } from 'react-redux'
+import { navigate } from 'src/navigator/NavigationService'
+import { Screens } from 'src/navigator/Screens'
+import QRCode from 'src/qrcode/QRCode'
+import { createMockStore } from 'test/utils'
+import { mockExchanges } from 'test/values'
+
+const mockStore = createMockStore({
+  web3: {
+    account: '0x0000',
+  },
+  account: {
+    name: 'username',
+  },
+})
+
+function getProps() {
+  return {
+    qrSvgRef: jest.fn() as any,
+    exchanges: mockExchanges,
+    onCloseBottomSheet: jest.fn(),
+    onPressCopy: jest.fn(),
+    onPressInfo: jest.fn(),
+    onPressExchange: jest.fn(),
+  }
+}
+
+describe('ExchangeQR', () => {
+  beforeEach(() => {
+    mockStore.dispatch = jest.fn()
+    jest.clearAllMocks()
+  })
+
+  it('displays QR code, name, and address', () => {
+    const { queryByTestId } = render(
+      <Provider store={mockStore}>
+        <QRCode {...getProps()} />
+      </Provider>
+    )
+    expect(queryByTestId('styledQRCode')).toBeTruthy()
+    expect(queryByTestId('displayName')).toBeTruthy()
+    expect(queryByTestId('address')).toBeTruthy()
+  })
+
+  it('does not display name when it has not been set', () => {
+    const store = createMockStore({
+      web3: {
+        account: '0x000',
+      },
+      account: {
+        name: undefined,
+      },
+    })
+    store.dispatch = jest.fn()
+    const { queryByTestId } = render(
+      <Provider store={store}>
+        <QRCode {...getProps()} />
+      </Provider>
+    )
+    expect(queryByTestId('displayName')).toBeFalsy()
+  })
+  it('displays inline notification instead of exchange info when exchanges is not set', () => {
+    const store = createMockStore({
+      web3: {
+        account: '0x000',
+      },
+      account: {
+        name: undefined,
+      },
+    })
+    store.dispatch = jest.fn()
+    const { queryByTestId } = render(
+      <Provider store={store}>
+        <QRCode {...{ ...getProps(), exchanges: undefined }} />
+      </Provider>
+    )
+    expect(queryByTestId('bottomSheetLink')).toBeFalsy()
+    expect(queryByTestId('supportedNetworksNotification')).toBeTruthy()
+  })
+
+  it('copies address when copy button pressed', async () => {
+    const props = getProps()
+    const { queryByTestId, getByTestId } = render(
+      <Provider store={mockStore}>
+        <QRCode {...props} />
+      </Provider>
+    )
+
+    expect(queryByTestId('copyButton')).toBeTruthy()
+    await fireEvent.press(getByTestId('copyButton'))
+    expect(props.onPressCopy).toHaveBeenCalledTimes(1)
+    expect(Clipboard.setString).toHaveBeenCalledWith('0x0000')
+  })
+
+  it('opens bottom sheet and can press link', async () => {
+    const props = getProps()
+    const { queryByTestId, getByTestId } = render(
+      <Provider store={mockStore}>
+        <QRCode {...props} />
+      </Provider>
+    )
+
+    expect(queryByTestId('bottomSheetLink')).toBeTruthy()
+    fireEvent.press(getByTestId('bottomSheetLink'))
+    expect(props.onPressInfo).toHaveBeenCalledTimes(1)
+
+    fireEvent.press(getByTestId('Bittrex-Touchable'))
+    expect(navigate).toHaveBeenCalledWith(Screens.WebViewScreen, {
+      uri: 'https://bittrex.com/Market/Index?MarketName=USD-CELO',
+    })
+    expect(props.onPressExchange).toHaveBeenCalledTimes(1)
+    expect(props.onPressExchange).toHaveBeenCalledWith(mockExchanges[0])
+  })
+})