wallet-stack 1.0.0-alpha.121

package/src/walletConnect/screens/ActionRequest.tsx

@@ -0,0 +1,227 @@
+import { getSdkError } from '@walletconnect/utils'
+import React, { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet } from 'react-native'
+import InLineNotification, { NotificationVariant } from 'src/components/InLineNotification'
+import { useDispatch, useSelector } from 'src/redux/hooks'
+import { NETWORK_NAMES } from 'src/shared/conts'
+import { Spacing } from 'src/styles/styles'
+import Logger from 'src/utils/Logger'
+import { acceptRequest, denyRequest } from 'src/walletConnect/actions'
+import { chainAgnosticActions, getDisplayTextFromAction } from 'src/walletConnect/constants'
+import ActionRequestPayload from 'src/walletConnect/screens/ActionRequestPayload'
+import DappsDisclaimer from 'src/walletConnect/screens/DappsDisclaimer'
+import EstimatedNetworkFee from 'src/walletConnect/screens/EstimatedNetworkFee'
+import RequestContent, { useDappMetadata } from 'src/walletConnect/screens/RequestContent'
+import { useIsDappListed } from 'src/walletConnect/screens/useIsDappListed'
+import { sessionsSelector } from 'src/walletConnect/selectors'
+import {
+  isSendCallsMethod,
+  isTransactionMethod,
+  MessageRequest,
+  SendCallsRequest,
+  TransactionRequest,
+} from 'src/walletConnect/types'
+import { walletConnectChainIdToNetworkId } from 'src/web3/networkConfig'
+
+export type ActionRequestProps =
+  | TransactionRequestProps
+  | MessageRequestProps
+  | SendCallsRequestProps
+
+type RequestProps = {
+  version: 2
+  supportedChains: string[]
+}
+
+type TransactionRequestProps = RequestProps & TransactionRequest
+
+type MessageRequestProps = RequestProps & MessageRequest
+
+type SendCallsRequestProps = RequestProps & SendCallsRequest
+
+function isTransactionRequest(props: ActionRequestProps): props is TransactionRequestProps {
+  return isTransactionMethod(props.method)
+}
+
+function isSendCallsRequest(props: ActionRequestProps): props is SendCallsRequestProps {
+  return isSendCallsMethod(props.method)
+}
+
+function ActionRequest(props: ActionRequestProps) {
+  const { t } = useTranslation()
+  const dispatch = useDispatch()
+
+  const { request, supportedChains, method } = props
+
+  const sessions = useSelector(sessionsSelector)
+  const activeSession = useMemo(() => {
+    return sessions.find((s) => s.topic === request.topic)
+  }, [sessions])
+  const { url, dappName, dappImageUrl } = useDappMetadata(activeSession?.peer.metadata)
+  const isDappListed = useIsDappListed(url)
+
+  if (!activeSession) {
+    // should never happen
+    Logger.error(
+      'WalletConnectRequest/ActionRequestV2',
+      'No active WallectConnect session could be found'
+    )
+    return null
+  }
+
+  const chainId = request.params.chainId
+  const networkId = walletConnectChainIdToNetworkId[chainId]
+  const networkName = NETWORK_NAMES[networkId]
+
+  const { description, title, action } = getDisplayTextFromAction(
+    t,
+    method,
+    dappName,
+    networkName,
+    (isSendCallsRequest(props) && props.request.params.request.params[0].calls.length) || 0
+  )
+
+  // Reject and warn if the chain is not supported
+  // Note: we still allow off-chain actions like personal_sign on unsupported
+  // chains (Cred Protocol does this) as this does not depend on the chainId
+  if (!supportedChains.includes(chainId) && !chainAgnosticActions.includes(method)) {
+    const supportedNetworkNames = supportedChains
+      .map((chain) => NETWORK_NAMES[walletConnectChainIdToNetworkId[chain]])
+      .join(`, `)
+
+    return (
+      <RequestContent
+        type="dismiss"
+        onDismiss={() => dispatch(denyRequest(request, getSdkError('UNSUPPORTED_CHAINS')))}
+        dappName={dappName}
+        dappImageUrl={dappImageUrl}
+        title={title}
+        description={description}
+        testId="WalletConnectActionRequest"
+      >
+        <InLineNotification
+          variant={NotificationVariant.Warning}
+          title={t('walletConnectRequest.unsupportedChain.title', { dappName, chainId })}
+          description={t('walletConnectRequest.unsupportedChain.descriptionV1_74', {
+            dappName,
+            chainId,
+            supportedNetworkNames,
+            count: supportedChains.length,
+          })}
+          style={styles.warning}
+        />
+      </RequestContent>
+    )
+  }
+
+  if ((isTransactionRequest(props) || isSendCallsRequest(props)) && props.hasInsufficientGasFunds) {
+    return (
+      <RequestContent
+        type="dismiss"
+        onDismiss={() => dispatch(denyRequest(request, getSdkError('USER_REJECTED')))}
+        dappName={dappName}
+        dappImageUrl={dappImageUrl}
+        title={title}
+        description={description}
+        testId="WalletConnectActionRequest"
+      >
+        <InLineNotification
+          variant={NotificationVariant.Warning}
+          title={t('walletConnectRequest.notEnoughBalanceForGas.title')}
+          description={t('walletConnectRequest.notEnoughBalanceForGas.description', {
+            feeCurrencies: props.feeCurrenciesSymbols.join(', '),
+          })}
+          style={styles.warning}
+        />
+      </RequestContent>
+    )
+  }
+
+  if (
+    (isTransactionRequest(props) || isSendCallsRequest(props)) &&
+    !props.preparedRequest.success
+  ) {
+    return (
+      <RequestContent
+        type="dismiss"
+        onDismiss={() => dispatch(denyRequest(request, getSdkError('USER_REJECTED')))}
+        dappName={dappName}
+        dappImageUrl={dappImageUrl}
+        title={title}
+        description={description}
+        testId="WalletConnectActionRequest"
+      >
+        <ActionRequestPayload session={activeSession} request={request} method={method} />
+        <InLineNotification
+          variant={NotificationVariant.Warning}
+          title={t('walletConnectRequest.failedToPrepareTransaction.title')}
+          description={t('walletConnectRequest.failedToPrepareTransaction.description', {
+            errorMessage: props.preparedRequest.errorMessage,
+          })}
+          style={styles.warning}
+        />
+      </RequestContent>
+    )
+  }
+
+  return (
+    <RequestContent
+      type="confirm"
+      buttonText={action}
+      onAccept={() => dispatch(acceptRequest(props))}
+      onDeny={() => {
+        dispatch(denyRequest(request, getSdkError('USER_REJECTED')))
+      }}
+      dappName={dappName}
+      dappImageUrl={dappImageUrl}
+      title={title}
+      description={description}
+      testId="WalletConnectActionRequest"
+    >
+      <ActionRequestPayload
+        session={activeSession}
+        request={request}
+        method={method}
+        preparedRequest={
+          (isTransactionRequest(props) || isSendCallsRequest(props)) &&
+          props.preparedRequest.success
+            ? props.preparedRequest.data
+            : undefined
+        }
+      />
+      {(isTransactionRequest(props) || isSendCallsRequest(props)) &&
+        props.preparedRequest.success && (
+          <EstimatedNetworkFee
+            isLoading={false}
+            networkId={networkId}
+            transactions={
+              isTransactionRequest(props)
+                ? [props.preparedRequest.data]
+                : props.preparedRequest.data
+            }
+          />
+        )}
+      {isSendCallsRequest(props) &&
+        props.preparedRequest.success &&
+        props.preparedRequest.data.length > 1 &&
+        !props.atomic && (
+          <InLineNotification
+            variant={NotificationVariant.Warning}
+            title={t('walletConnectRequest.nonAtomicExecution.title')}
+            description={t('walletConnectRequest.nonAtomicExecution.description')}
+            style={styles.warning}
+          />
+        )}
+      <DappsDisclaimer isDappListed={isDappListed} />
+    </RequestContent>
+  )
+}
+
+const styles = StyleSheet.create({
+  warning: {
+    marginBottom: Spacing.Thick24,
+  },
+})
+
+export default ActionRequest

package/src/walletConnect/screens/ActionRequestPayload.tsx

@@ -0,0 +1,84 @@
+import { WalletKitTypes } from '@reown/walletkit'
+import { SessionTypes } from '@walletconnect/types'
+import React, { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { WalletConnectEvents } from 'src/analytics/Events'
+import DataFieldWithCopy from 'src/components/DataFieldWithCopy'
+import { activeDappSelector } from 'src/dapps/selectors'
+import { useSelector } from 'src/redux/hooks'
+import { trimLeading0x } from 'src/utils/address'
+import { SerializableTransactionRequest } from 'src/viem/preparedTransactionSerialization'
+import {
+  getDefaultRequestTrackedProperties,
+  getDefaultSessionTrackedProperties,
+} from 'src/walletConnect/analytics'
+import { SupportedActions } from 'src/walletConnect/constants'
+import { MessageMethod, SendCallsMethod, TransactionMethod } from 'src/walletConnect/types'
+
+interface BaseProps {
+  session: SessionTypes.Struct
+  request: WalletKitTypes.EventArguments['session_request']
+}
+
+interface MessageProps extends BaseProps {
+  method: MessageMethod
+}
+
+interface TransactionProps extends BaseProps {
+  method: TransactionMethod | SendCallsMethod
+  preparedRequest?: SerializableTransactionRequest | SerializableTransactionRequest[]
+}
+
+function ActionRequestPayload(props: MessageProps | TransactionProps) {
+  const method = props.method
+  const { params } = props.request.params.request
+
+  const { t } = useTranslation()
+  const activeDapp = useSelector(activeDappSelector)
+
+  const moreInfoString = useMemo(() => {
+    switch (method) {
+      case SupportedActions.eth_signTransaction:
+      case SupportedActions.eth_sendTransaction:
+      case SupportedActions.wallet_sendCalls:
+        return JSON.stringify(props.preparedRequest ?? params)
+      case SupportedActions.eth_signTypedData:
+      case SupportedActions.eth_signTypedData_v4:
+        return JSON.stringify(params[1])
+      case SupportedActions.personal_sign:
+        return (
+          Buffer.from(trimLeading0x(params[0]), 'hex').toString() ||
+          params[0] ||
+          t('action.emptyMessage')
+        )
+      default:
+        return null
+    }
+  }, [method, params, props])
+
+  const handleTrackCopyRequestPayload = () => {
+    const defaultTrackedProps = {
+      ...getDefaultSessionTrackedProperties(props.session, activeDapp),
+      ...getDefaultRequestTrackedProperties(props.request),
+    }
+
+    AppAnalytics.track(WalletConnectEvents.wc_copy_request_payload, defaultTrackedProps)
+  }
+
+  if (!moreInfoString) {
+    return null
+  }
+
+  return (
+    <DataFieldWithCopy
+      label={t('walletConnectRequest.transactionDataLabel')}
+      value={moreInfoString}
+      copySuccessMessage={t('walletConnectRequest.transactionDataCopied')}
+      testID="WalletConnectRequest/ActionRequestPayload"
+      onCopy={handleTrackCopyRequestPayload}
+    />
+  )
+}
+
+export default ActionRequestPayload

package/src/walletConnect/screens/ConnectionTimedOut.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, Text } from 'react-native'
+import Button, { BtnTypes } from 'src/components/Button'
+import { navigateBack } from 'src/navigator/NavigationService'
+import colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+
+function ConnectionTimedOut() {
+  const { t } = useTranslation()
+  return (
+    <>
+      <Text style={styles.title}>{t('timeoutTitle')}</Text>
+      <Text style={styles.subtitle}>{t('timeoutSubtitle')}</Text>
+      <Button onPress={navigateBack} text={t('goBackButton')} type={BtnTypes.SECONDARY} />
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  title: {
+    ...typeScale.titleMedium,
+    textAlign: 'center',
+  },
+  subtitle: {
+    ...typeScale.bodyMedium,
+    color: colors.contentSecondary,
+    textAlign: 'center',
+    marginTop: 16,
+    marginBottom: 24,
+  },
+})
+
+export default ConnectionTimedOut

package/src/walletConnect/screens/DappsDisclaimer.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, Text } from 'react-native'
+import Colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import { Spacing } from 'src/styles/styles'
+
+interface Props {
+  isDappListed: boolean
+}
+
+const DappsDisclaimer = ({ isDappListed }: Props) => {
+  const { t } = useTranslation()
+
+  return (
+    <Text style={styles.dappNotListedDisclaimer}>
+      {isDappListed ? t('dappsDisclaimerSingleDapp') : t('dappsDisclaimerUnlistedDapp')}
+    </Text>
+  )
+}
+
+const styles = StyleSheet.create({
+  dappNotListedDisclaimer: {
+    ...typeScale.bodyXSmall,
+    color: Colors.contentSecondary,
+    marginBottom: Spacing.Thick24,
+    textAlign: 'center',
+  },
+})
+
+export default DappsDisclaimer

package/src/walletConnect/screens/EstimatedNetworkFee.test.tsx

@@ -0,0 +1,88 @@
+import { render } from '@testing-library/react-native'
+import * as React from 'react'
+import { Provider } from 'react-redux'
+import { NetworkId } from 'src/transactions/types'
+import EstimatedNetworkFee from 'src/walletConnect/screens/EstimatedNetworkFee'
+import { createMockStore } from 'test/utils'
+import { parseGwei } from 'viem'
+
+describe('EstimatedNetworkFee', () => {
+  const mockTransaction = {
+    from: '0x2b8441ef13333ffa955c9ea5ab5b3692da95260d',
+    networkId: NetworkId['celo-alfajores'],
+    data: '0x3d18b912',
+    to: '0xda7f463c27ec862cfbf2369f3f74c364d050d93f',
+    gas: '100000',
+    maxFeePerGas: parseGwei('5').toString(),
+    _baseFeePerGas: parseGwei('1').toString(),
+  } as const
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('shows the estimate network fee', () => {
+    const store = createMockStore({})
+    const { getByText, getByTestId, queryByTestId } = render(
+      <Provider store={store}>
+        <EstimatedNetworkFee
+          isLoading={false}
+          networkId={NetworkId['celo-alfajores']}
+          transactions={[mockTransaction]}
+        />
+      </Provider>
+    )
+
+    expect(
+      getByText('walletConnectRequest.estimatedNetworkFee, {"networkName":"Celo Alfajores"}')
+    ).toBeTruthy()
+
+    expect(getByTestId('EstimatedNetworkFee/Amount')).toHaveTextContent('0.0001 CELO', {
+      exact: false,
+    }) // gas * _baseFeePerGas
+    expect(getByTestId('EstimatedNetworkFee/AmountLocal')).toHaveTextContent('₱0.00067', {
+      exact: false,
+    })
+
+    expect(queryByTestId('EstimatedNetworkFee/Loading')).toBeFalsy()
+  })
+
+  it("shows the loading state when the network fee hasn't been calculated yet", () => {
+    const store = createMockStore({})
+    const { getByText, getByTestId } = render(
+      <Provider store={store}>
+        <EstimatedNetworkFee
+          isLoading={true}
+          networkId={NetworkId['celo-alfajores']}
+          transactions={[]}
+        />
+      </Provider>
+    )
+
+    expect(
+      getByText('walletConnectRequest.estimatedNetworkFee, {"networkName":"Celo Alfajores"}')
+    ).toBeTruthy()
+
+    expect(getByTestId('EstimatedNetworkFee/Loading')).toBeTruthy()
+  })
+
+  it("renders null when there isn't enough information to display the fee", () => {
+    const store = createMockStore({})
+    const { queryByTestId } = render(
+      <Provider store={store}>
+        <EstimatedNetworkFee
+          isLoading={false}
+          networkId={NetworkId['celo-alfajores']}
+          transactions={[
+            {
+              ...mockTransaction,
+              _baseFeePerGas: undefined, // This is the missing information
+            },
+          ]}
+        />
+      </Provider>
+    )
+
+    expect(queryByTestId('EstimatedNetworkFee')).toBeFalsy()
+  })
+})

package/src/walletConnect/screens/EstimatedNetworkFee.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, Text, View } from 'react-native'
+import SkeletonPlaceholder from 'src/components/SkeletonPlaceholder'
+import TokenDisplay from 'src/components/TokenDisplay'
+import { useSelector } from 'src/redux/hooks'
+import { NETWORK_NAMES } from 'src/shared/conts'
+import Colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import { Spacing } from 'src/styles/styles'
+import { tokensByIdSelector } from 'src/tokens/selectors'
+import { TokenBalances } from 'src/tokens/slice'
+import { NetworkId } from 'src/transactions/types'
+import Logger from 'src/utils/Logger'
+import {
+  getEstimatedGasFee,
+  getFeeCurrencyToken,
+  getFeeDecimals,
+} from 'src/viem/prepareTransactions'
+import {
+  SerializableTransactionRequest,
+  getPreparedTransaction,
+} from 'src/viem/preparedTransactionSerialization'
+
+const TAG = 'WalletConnect/EstimatedNetworkFee'
+
+interface Props {
+  isLoading: boolean
+  networkId: NetworkId
+  transactions: SerializableTransactionRequest[]
+}
+
+function getNetworkFee(
+  transactions: SerializableTransactionRequest[],
+  networkId: NetworkId,
+  tokensById: TokenBalances
+) {
+  try {
+    const preparedTransactions = transactions.map(getPreparedTransaction)
+    const feeCurrency = getFeeCurrencyToken(preparedTransactions, networkId, tokensById)
+    if (!feeCurrency) {
+      Logger.warn(TAG, 'No fee token info found', { transactions, networkId })
+      return null
+    }
+
+    const feeDecimals = getFeeDecimals(preparedTransactions, feeCurrency)
+    return {
+      token: feeCurrency,
+      amount: getEstimatedGasFee(preparedTransactions).shiftedBy(-feeDecimals),
+    }
+  } catch (error) {
+    Logger.warn(TAG, 'Failed to get estimated gas fee', error)
+    return null
+  }
+}
+
+export default function EstimatedNetworkFee({ isLoading, networkId, transactions }: Props) {
+  const { t } = useTranslation()
+
+  const tokensById = useSelector(tokensByIdSelector)
+  const networkFee = getNetworkFee(transactions, networkId, tokensById)
+
+  const networkName = NETWORK_NAMES[networkId]
+
+  if (!networkFee || !networkName) {
+    Logger.warn(TAG, 'Insufficient information to display fee details', {
+      networkName,
+      transactions,
+    })
+    return null
+  }
+
+  return (
+    <View style={styles.container} testID="EstimatedNetworkFee">
+      <Text style={styles.labelText}>
+        {t('walletConnectRequest.estimatedNetworkFee', { networkName })}
+      </Text>
+      <View>
+        <View style={isLoading ? styles.contentLoading : undefined}>
+          <TokenDisplay
+            style={styles.amountPrimaryText}
+            amount={networkFee.amount}
+            tokenId={networkFee.token.tokenId}
+            showLocalAmount={false}
+            showSymbol={true}
+            hideSign={true}
+            testID="EstimatedNetworkFee/Amount"
+          />
+          <TokenDisplay
+            style={styles.amountSecondaryText}
+            amount={networkFee.amount}
+            tokenId={networkFee.token.tokenId}
+            showLocalAmount={true}
+            showSymbol={true}
+            hideSign={true}
+            testID="EstimatedNetworkFee/AmountLocal"
+          />
+        </View>
+        {!!isLoading && (
+          <View style={StyleSheet.absoluteFill}>
+            <SkeletonPlaceholder testID="EstimatedNetworkFee/Loading">
+              <View style={styles.loader} />
+            </SkeletonPlaceholder>
+          </View>
+        )}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: Spacing.Thick24,
+  },
+  labelText: {
+    ...typeScale.labelXSmall,
+    color: Colors.contentSecondary,
+    marginBottom: Spacing.Tiny4,
+  },
+  amountPrimaryText: {
+    ...typeScale.labelSemiBoldSmall,
+  },
+  amountSecondaryText: {
+    ...typeScale.bodyXSmall,
+    color: Colors.contentSecondary,
+  },
+  contentLoading: {
+    opacity: 0,
+  },
+  loader: {
+    height: '100%',
+    width: 100,
+  },
+})

package/src/walletConnect/screens/Logos.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import { Image, StyleSheet, Text, View } from 'react-native'
+import { SvgUri } from 'react-native-svg'
+import Logo from 'src/images/Logo'
+import Colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import { Shadow, Spacing, getShadowStyle } from 'src/styles/styles'
+
+const DAPP_IMAGE_SIZE = 40
+
+interface Props {
+  dappImageUrl?: string
+  dappName: string
+}
+
+export default function Logos({ dappImageUrl, dappName }: Props) {
+  if (!dappImageUrl) {
+    return null
+  }
+
+  let isDappImageSvg = false
+  try {
+    const parsedUrl = new URL(dappImageUrl ?? '')
+    isDappImageSvg = parsedUrl.pathname.toLowerCase().endsWith('.svg')
+  } catch (error) {
+    // do nothing if the url cannot be parsed
+  }
+
+  return (
+    <View style={styles.logoContainer}>
+      <View style={styles.logoShadow}>
+        <View style={styles.logoBackground}>
+          <Logo size={24} />
+        </View>
+      </View>
+      <View style={styles.logoShadow}>
+        {isDappImageSvg ? (
+          <View style={styles.logoBackground}>
+            <SvgUri width={24} height={24} uri={dappImageUrl} />
+          </View>
+        ) : dappImageUrl ? (
+          <Image style={styles.dappImage} source={{ uri: dappImageUrl }} resizeMode="cover" />
+        ) : (
+          <View style={[styles.logoBackground, styles.placeholderLogoBackground]}>
+            <Text allowFontScaling={false} style={styles.placeholderLogoText}>
+              {dappName.charAt(0).toUpperCase()}
+            </Text>
+          </View>
+        )}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  logoContainer: {
+    flexDirection: 'row',
+  },
+  logoShadow: {
+    ...getShadowStyle(Shadow.SoftLight),
+    borderRadius: 100,
+  },
+  logoBackground: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: DAPP_IMAGE_SIZE,
+    width: DAPP_IMAGE_SIZE,
+    borderRadius: 100,
+    backgroundColor: Colors.backgroundPrimary,
+  },
+  dappImage: {
+    height: DAPP_IMAGE_SIZE,
+    width: DAPP_IMAGE_SIZE,
+    borderRadius: 100,
+    backgroundColor: Colors.backgroundPrimary,
+    marginLeft: -4,
+  },
+  placeholderLogoBackground: {
+    backgroundColor: Colors.backgroundPrimary,
+    marginRight: -Spacing.Small12,
+    borderColor: Colors.borderPrimary,
+    borderWidth: 1,
+  },
+  placeholderLogoText: {
+    ...typeScale.titleMedium,
+    lineHeight: undefined,
+    color: Colors.contentSecondary,
+  },
+})