wallet-stack 1.0.0-alpha.121

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

@@ -0,0 +1,727 @@
+import Clipboard from '@react-native-clipboard/clipboard'
+import { WalletKitTypes } from '@reown/walletkit'
+import { fireEvent, render, within } from '@testing-library/react-native'
+import { SessionTypes } from '@walletconnect/types'
+import { getSdkError } from '@walletconnect/utils'
+import * as React from 'react'
+import 'react-native'
+import { Provider } from 'react-redux'
+import { ActiveDapp, DappSection } from 'src/dapps/types'
+import {
+  acceptRequest as acceptRequestV2,
+  denyRequest as denyRequestV2,
+} from 'src/walletConnect/actions'
+import { SupportedActions } from 'src/walletConnect/constants'
+import ActionRequest from 'src/walletConnect/screens/ActionRequest'
+import { createMockStore } from 'test/utils'
+import { mockAccount, mockAccount2 } from 'test/values'
+
+describe('ActionRequest with WalletConnect V2', () => {
+  const v2Session: SessionTypes.Struct = {
+    expiry: 1670411909,
+    self: {
+      metadata: {
+        icons: ['https://example.com/favicon.ico'],
+        description: 'A mobile payments wallet that works worldwide',
+        name: 'App Name',
+        url: 'https://example.com/',
+      },
+      publicKey: 'b991206845c62280479fd1f24087e9c6f0df3921b5f9d94f4619fbf995a81149',
+    },
+    relay: {
+      protocol: 'irn',
+    },
+    peer: {
+      metadata: {
+        name: 'WalletConnect Example',
+        description: '',
+        icons: [],
+        url: 'https://react-app.walletconnect.com',
+      },
+      publicKey: '3c78ff702b703e873a90a9619598effa0e3b01deb977cb277d3b0eecff3a0320',
+    },
+    controller: 'b991206845c62280479fd1f24087e9c6f0df3921b5f9d94f4619fbf995a81149',
+    namespaces: {
+      eip155: {
+        accounts: ['eip155:44787:0x047154ac4d7e01b1dc9ddeea9e8996b57895a747'],
+        methods: [
+          'eth_sendTransaction',
+          'eth_signTransaction',
+          'eth_sign',
+          'personal_sign',
+          'eth_signTypedData',
+        ],
+        events: ['chainChanged', 'accountsChanged'],
+      },
+    },
+    acknowledged: true,
+    topic: 'd8afe1f5c3efa38bbb62c68005f572a7218afcd48703e4b02bdc5df2549ac5b5',
+    pairingTopic: '20eca0383221cb6feb7af40d06d5cdd867965dd885e9ad36fb4540d9cc25267b',
+    requiredNamespaces: {
+      eip155: {
+        methods: [
+          'eth_sendTransaction',
+          'eth_signTransaction',
+          'eth_sign',
+          'personal_sign',
+          'eth_signTypedData',
+        ],
+        chains: ['eip155:44787'],
+        events: ['chainChanged', 'accountsChanged'],
+      },
+    },
+    optionalNamespaces: {},
+  }
+
+  const signMessageRequest: WalletKitTypes.EventArguments['session_request'] = {
+    id: 1669810746892321,
+    topic: 'd8afe1f5c3efa38bbb62c68005f572a7218afcd48703e4b02bdc5df2549ac5b5',
+    params: {
+      chainId: 'eip155:44787',
+      request: {
+        method: 'personal_sign',
+        params: [
+          '0x4d65737361676520746f207369676e', // hex of 'Message to sign'
+          '0x047154ac4d7e01b1dc9ddeea9e8996b57895a747',
+        ],
+      },
+    },
+    verifyContext: {
+      verified: {
+        origin: '',
+        validation: 'UNKNOWN',
+        verifyUrl: '',
+      },
+    },
+  }
+
+  const sendTransactionRequest = {
+    ...signMessageRequest,
+    params: {
+      ...signMessageRequest.params,
+      request: {
+        ...signMessageRequest.params.request,
+        method: 'eth_sendTransaction',
+      },
+    },
+  }
+
+  const supportedChains = ['eip155:44787']
+  const signMessageMethod = SupportedActions.personal_sign as const
+  const sendTransactionMethod = SupportedActions.eth_sendTransaction as const
+  const feeCurrenciesSymbols = ['CELO']
+
+  const preparedTransactionSuccess = {
+    success: true,
+    data: {
+      from: mockAccount,
+      to: mockAccount2,
+      data: '0xTEST',
+      nonce: 100,
+      maxFeePerGas: '12000000000',
+      maxPriorityFeePerGas: '2000000000',
+      gas: '100000',
+      _baseFeePerGas: '5000000000',
+    },
+  } as const
+
+  const preparedTransactionFailure = {
+    success: false,
+    errorMessage: 'execution reverted',
+  } as const
+
+  const signMessageActionableRequest = {
+    version: 2,
+    supportedChains: supportedChains,
+    method: signMessageMethod,
+    request: signMessageRequest,
+  } as const
+
+  const sendTransactionActionableRequest = {
+    version: 2,
+    supportedChains,
+    method: sendTransactionMethod,
+    request: sendTransactionRequest,
+    hasInsufficientGasFunds: false,
+    feeCurrenciesSymbols: feeCurrenciesSymbols,
+    preparedRequest: preparedTransactionSuccess,
+  }
+
+  describe('eth_sendTransaction', () => {
+    const store = createMockStore({
+      walletConnect: {
+        sessions: [v2Session],
+      },
+    })
+
+    beforeEach(() => {
+      store.clearActions()
+    })
+
+    it('should display a dismiss-only bottom sheet if the user has insufficient gas funds', () => {
+      const { getByText, queryByText } = render(
+        <Provider store={store}>
+          <ActionRequest
+            version={2}
+            method={sendTransactionMethod}
+            request={sendTransactionRequest}
+            supportedChains={supportedChains}
+            hasInsufficientGasFunds={true}
+            feeCurrenciesSymbols={feeCurrenciesSymbols}
+            preparedRequest={preparedTransactionFailure}
+          />
+        </Provider>
+      )
+
+      expect(getByText('walletConnectRequest.notEnoughBalanceForGas.title')).toBeTruthy()
+      expect(
+        getByText(
+          'walletConnectRequest.notEnoughBalanceForGas.description, {"feeCurrencies":"CELO"}'
+        )
+      ).toBeTruthy()
+      expect(queryByText('allow')).toBeFalsy()
+
+      fireEvent.press(getByText('dismiss'))
+      expect(store.getActions()).toEqual([
+        denyRequestV2(sendTransactionRequest, getSdkError('USER_REJECTED')),
+      ])
+    })
+
+    it("should display a dismiss-only bottom sheet if the transaction couldn't be prepared", () => {
+      const { getByText, queryByText } = render(
+        <Provider store={store}>
+          <ActionRequest
+            version={2}
+            method={sendTransactionMethod}
+            request={sendTransactionRequest}
+            supportedChains={supportedChains}
+            hasInsufficientGasFunds={false}
+            feeCurrenciesSymbols={feeCurrenciesSymbols}
+            preparedRequest={preparedTransactionFailure}
+          />
+        </Provider>
+      )
+
+      expect(getByText('walletConnectRequest.failedToPrepareTransaction.title')).toBeTruthy()
+      expect(
+        getByText(
+          'walletConnectRequest.failedToPrepareTransaction.description, {"errorMessage":"execution reverted"}'
+        )
+      ).toBeTruthy()
+      expect(queryByText('allow')).toBeFalsy()
+
+      fireEvent.press(getByText('dismiss'))
+      expect(store.getActions()).toEqual([
+        denyRequestV2(sendTransactionRequest, getSdkError('USER_REJECTED')),
+      ])
+    })
+
+    it('should accept the request with the prepared transaction', () => {
+      const { getByText, getByTestId } = render(
+        <Provider store={store}>
+          <ActionRequest
+            version={2}
+            method={sendTransactionMethod}
+            request={sendTransactionRequest}
+            supportedChains={supportedChains}
+            hasInsufficientGasFunds={false}
+            feeCurrenciesSymbols={feeCurrenciesSymbols}
+            preparedRequest={preparedTransactionSuccess}
+          />
+        </Provider>
+      )
+
+      expect(
+        within(getByTestId('WalletConnectRequest/ActionRequestPayload/Value')).getByText(
+          JSON.stringify(preparedTransactionSuccess.data)
+        )
+      ).toBeTruthy()
+      expect(
+        getByText('walletConnectRequest.estimatedNetworkFee, {"networkName":"Celo Alfajores"}')
+      ).toBeTruthy()
+      const fee = within(getByTestId('EstimatedNetworkFee'))
+      expect(fee.getByText('0.0007 CELO')).toBeTruthy() // gas * (_baseFeePerGas + maxPriorityFeePerGas)
+      expect(fee.getByText('₱0.0047')).toBeTruthy()
+
+      fireEvent.press(getByText('walletConnectRequest.sendTransactionAction'))
+      expect(store.getActions()).toEqual([acceptRequestV2(sendTransactionActionableRequest)])
+    })
+  })
+
+  describe('personal_sign', () => {
+    const store = createMockStore({
+      walletConnect: {
+        sessions: [v2Session],
+      },
+    })
+
+    beforeEach(() => {
+      store.clearActions()
+    })
+
+    it('renders the correct elements', () => {
+      const { getByText, getByTestId, queryByTestId } = render(
+        <Provider store={store}>
+          <ActionRequest
+            version={2}
+            method={signMessageMethod}
+            request={signMessageRequest}
+            supportedChains={supportedChains}
+          />
+        </Provider>
+      )
+
+      expect(getByText('walletConnectRequest.signPayloadTitle')).toBeTruthy()
+      expect(
+        getByText('walletConnectRequest.signPayload, {"dappName":"WalletConnect Example"}')
+      ).toBeTruthy()
+      expect(getByText('allow')).toBeTruthy()
+      expect(
+        within(getByTestId('WalletConnectRequest/ActionRequestPayload/Value')).getByText(
+          'Message to sign'
+        )
+      ).toBeTruthy()
+      expect(getByText('dappsDisclaimerUnlistedDapp')).toBeTruthy()
+      expect(queryByTestId('EstimatedNetworkFee')).toBeFalsy()
+    })
+
+    it('copies the request payload', () => {
+      const { getByTestId } = render(
+        <Provider store={store}>
+          <ActionRequest
+            version={2}
+            method={signMessageMethod}
+            request={signMessageRequest}
+            supportedChains={supportedChains}
+          />
+        </Provider>
+      )
+
+      fireEvent.press(getByTestId('WalletConnectRequest/ActionRequestPayload/Copy'))
+      expect(Clipboard.setString).toHaveBeenCalledWith('Message to sign')
+    })
+
+    it('shows request details with raw string if message cannot be decoded', () => {
+      signMessageRequest.params.request.params[0] = 'invalid hex'
+      const { getByTestId } = render(
+        <Provider store={store}>
+          <ActionRequest
+            version={2}
+            method={signMessageMethod}
+            request={signMessageRequest}
+            supportedChains={supportedChains}
+          />
+        </Provider>
+      )
+
+      expect(
+        within(getByTestId('WalletConnectRequest/ActionRequestPayload/Value')).getByText(
+          'invalid hex'
+        )
+      ).toBeTruthy()
+    })
+
+    it('shows request details with empty message', () => {
+      signMessageRequest.params.request.params[0] = ''
+      const { getByTestId } = render(
+        <Provider store={store}>
+          <ActionRequest
+            version={2}
+            method={signMessageMethod}
+            request={signMessageRequest}
+            supportedChains={supportedChains}
+          />
+        </Provider>
+      )
+
+      expect(
+        within(getByTestId('WalletConnectRequest/ActionRequestPayload/Value')).getByText(
+          'action.emptyMessage'
+        )
+      ).toBeTruthy()
+    })
+
+    it('dispatches the correct action on press allow', () => {
+      const { getByText } = render(
+        <Provider store={store}>
+          <ActionRequest
+            version={2}
+            method={signMessageMethod}
+            request={signMessageRequest}
+            supportedChains={supportedChains}
+          />
+        </Provider>
+      )
+
+      fireEvent.press(getByText('allow'))
+      expect(store.getActions()).toEqual([acceptRequestV2(signMessageActionableRequest)])
+    })
+
+    it('dispatches the correct action on dismiss bottom sheet', () => {
+      const { unmount } = render(
+        <Provider store={store}>
+          <ActionRequest
+            version={2}
+            method={signMessageMethod}
+            request={signMessageRequest}
+            supportedChains={supportedChains}
+          />
+        </Provider>
+      )
+
+      unmount()
+      expect(store.getActions()).toEqual([
+        denyRequestV2(signMessageRequest, getSdkError('USER_REJECTED')),
+      ])
+    })
+  })
+
+  describe('displayed dapp name fallbacks', () => {
+    const activeDapp: ActiveDapp = {
+      id: 'someDappId',
+      categories: ['someCategory'],
+      iconUrl: '',
+      name: 'someDappName',
+      description: '',
+      dappUrl: 'https://react-app.walletconnect.com',
+      openedFrom: DappSection.All,
+    }
+
+    it('should use the name from activeDapp if the request domain matches', () => {
+      const store = createMockStore({
+        dapps: {
+          activeDapp,
+        },
+        walletConnect: {
+          sessions: [
+            {
+              ...v2Session,
+              peer: {
+                metadata: {
+                  name: '',
+                  description: '',
+                  icons: [],
+                  url: 'https://react-app.walletconnect.com/somePath',
+                },
+                publicKey: '',
+              },
+            },
+          ],
+        },
+      })
+
+      const { getByText } = render(
+        <Provider store={store}>
+          <ActionRequest
+            version={2}
+            method={signMessageMethod}
+            request={signMessageRequest}
+            supportedChains={supportedChains}
+          />
+        </Provider>
+      )
+
+      expect(getByText('walletConnectRequest.signPayloadTitle')).toBeTruthy()
+      expect(
+        getByText('walletConnectRequest.signPayload, {"dappName":"someDappName"}')
+      ).toBeTruthy()
+    })
+
+    it("should use the payload domain if activeDapp doesn't match", () => {
+      const store = createMockStore({
+        dapps: {
+          activeDapp,
+        },
+        walletConnect: {
+          sessions: [
+            {
+              ...v2Session,
+              peer: {
+                metadata: {
+                  name: '',
+                  description: '',
+                  icons: [],
+                  url: 'https://some.dapp.com',
+                },
+                publicKey: '',
+              },
+            },
+          ],
+        },
+      })
+
+      const { getByText } = render(
+        <Provider store={store}>
+          <ActionRequest
+            version={2}
+            method={signMessageMethod}
+            request={signMessageRequest}
+            supportedChains={supportedChains}
+          />
+        </Provider>
+      )
+
+      expect(getByText('walletConnectRequest.signPayloadTitle')).toBeTruthy()
+      expect(
+        getByText('walletConnectRequest.signPayload, {"dappName":"some.dapp.com"}')
+      ).toBeTruthy()
+    })
+
+    it('should display an empty fallback', () => {
+      const store = createMockStore({
+        dapps: {
+          activeDapp,
+        },
+        walletConnect: {
+          sessions: [
+            {
+              ...v2Session,
+              peer: {
+                metadata: {
+                  name: '',
+                  description: '',
+                  icons: [],
+                  url: '',
+                },
+                publicKey: '',
+              },
+            },
+          ],
+        },
+      })
+
+      const { getByText } = render(
+        <Provider store={store}>
+          <ActionRequest
+            version={2}
+            method={signMessageMethod}
+            request={signMessageRequest}
+            supportedChains={supportedChains}
+          />
+        </Provider>
+      )
+
+      expect(getByText('walletConnectRequest.signPayloadTitle')).toBeTruthy()
+      expect(getByText('walletConnectRequest.signPayload, {"dappName":""}')).toBeTruthy()
+    })
+  })
+
+  describe('wallet_sendCalls', () => {
+    const sendCallsRequest = {
+      ...signMessageRequest,
+      params: {
+        ...signMessageRequest.params,
+        request: {
+          ...signMessageRequest.params.request,
+          method: 'wallet_sendCalls',
+          params: [
+            {
+              calls: [
+                {
+                  to: mockAccount2,
+                  data: '0x',
+                  value: '0x0',
+                },
+                {
+                  to: mockAccount2,
+                  data: '0x',
+                  value: '0x0',
+                },
+              ],
+              capabilities: {},
+              atomicRequired: false,
+            },
+          ],
+        },
+      },
+    }
+
+    const sendCallsMethod = SupportedActions.wallet_sendCalls as const
+
+    const singleTransaction = [preparedTransactionSuccess.data]
+
+    const manyTransactions = [
+      preparedTransactionSuccess.data,
+      {
+        ...preparedTransactionSuccess.data,
+        nonce: preparedTransactionSuccess.data.nonce + 1,
+      },
+    ]
+
+    const store = createMockStore({
+      walletConnect: {
+        sessions: [v2Session],
+      },
+    })
+
+    beforeEach(() => {
+      store.clearActions()
+    })
+
+    it('should show a warning for non-atomic SendCalls requests', () => {
+      const { getByText } = render(
+        <Provider store={store}>
+          <ActionRequest
+            version={2}
+            method={sendCallsMethod}
+            request={sendCallsRequest}
+            supportedChains={supportedChains}
+            atomic={false}
+            hasInsufficientGasFunds={false}
+            feeCurrenciesSymbols={feeCurrenciesSymbols}
+            preparedRequest={{
+              success: true,
+              data: manyTransactions,
+            }}
+          />
+        </Provider>
+      )
+
+      expect(getByText('walletConnectRequest.nonAtomicExecution.title')).toBeTruthy()
+      expect(getByText('walletConnectRequest.nonAtomicExecution.description')).toBeTruthy()
+    })
+
+    it('should not show a warning for non-atomic SendCalls requests with a single transaction', () => {
+      const { queryByText } = render(
+        <Provider store={store}>
+          <ActionRequest
+            version={2}
+            method={sendCallsMethod}
+            request={sendCallsRequest}
+            supportedChains={supportedChains}
+            atomic={false}
+            hasInsufficientGasFunds={false}
+            feeCurrenciesSymbols={feeCurrenciesSymbols}
+            preparedRequest={{
+              success: true,
+              data: singleTransaction,
+            }}
+          />
+        </Provider>
+      )
+
+      expect(queryByText('walletConnectRequest.nonAtomicExecution.title')).toBeFalsy()
+      expect(queryByText('walletConnectRequest.nonAtomicExecution.description')).toBeFalsy()
+    })
+
+    it('should not show a warning for atomic SendCalls requests', () => {
+      const { queryByText } = render(
+        <Provider store={store}>
+          <ActionRequest
+            version={2}
+            method={sendCallsMethod}
+            request={sendCallsRequest}
+            supportedChains={supportedChains}
+            atomic={true}
+            hasInsufficientGasFunds={false}
+            feeCurrenciesSymbols={feeCurrenciesSymbols}
+            preparedRequest={{
+              success: true,
+              data: manyTransactions,
+            }}
+          />
+        </Provider>
+      )
+
+      expect(queryByText('walletConnectRequest.nonAtomicExecution.title')).toBeFalsy()
+      expect(queryByText('walletConnectRequest.nonAtomicExecution.description')).toBeFalsy()
+    })
+  })
+
+  describe('unsupported chain', () => {
+    it.each([
+      [
+        sendTransactionMethod,
+        'walletConnectRequest.sendTransactionTitle',
+        'walletConnectRequest.sendDappTransactionUnknownNetwork',
+      ],
+      [
+        SupportedActions.eth_signTransaction as const,
+        'walletConnectRequest.signTransactionTitle',
+        'walletConnectRequest.signDappTransactionUnknownNetwork',
+      ],
+    ])('%s: should show a warning if the chain is not supported', (method, title, description) => {
+      const store = createMockStore({
+        walletConnect: {
+          sessions: [v2Session],
+        },
+      })
+
+      const { getByText, queryByText, queryByTestId } = render(
+        <Provider store={store}>
+          <ActionRequest
+            version={2}
+            method={method}
+            request={{
+              ...signMessageRequest,
+              params: {
+                ...signMessageRequest.params,
+                request: {
+                  ...signMessageRequest.params.request,
+                  method,
+                },
+                chainId: 'eip155:123456', // unsupported chain
+              },
+            }}
+            supportedChains={supportedChains}
+            hasInsufficientGasFunds={false}
+            feeCurrenciesSymbols={feeCurrenciesSymbols}
+            preparedRequest={preparedTransactionSuccess}
+          />
+        </Provider>
+      )
+
+      expect(getByText(title)).toBeTruthy()
+      expect(getByText(`${description}, {"dappName":"WalletConnect Example"}`)).toBeTruthy()
+      expect(queryByText('allow')).toBeFalsy()
+      expect(getByText('dismiss')).toBeTruthy()
+      expect(
+        getByText(
+          'walletConnectRequest.unsupportedChain.title, {"dappName":"WalletConnect Example","chainId":"eip155:123456"}'
+        )
+      ).toBeTruthy()
+      expect(queryByTestId('EstimatedNetworkFee')).toBeFalsy()
+    })
+
+    it('should not show a warning if the chain is not supported and the method is personal_sign', () => {
+      const store = createMockStore({
+        walletConnect: {
+          sessions: [v2Session],
+        },
+      })
+
+      const { getByText, queryByText } = render(
+        <Provider store={store}>
+          <ActionRequest
+            version={2}
+            method={signMessageMethod}
+            request={{
+              ...signMessageRequest,
+              params: {
+                ...signMessageRequest.params,
+                request: {
+                  ...signMessageRequest.params.request,
+                  method: 'personal_sign',
+                },
+                chainId: 'eip155:1', // unsupported chain
+              },
+            }}
+            supportedChains={supportedChains}
+          />
+        </Provider>
+      )
+
+      expect(getByText('walletConnectRequest.signPayloadTitle')).toBeTruthy()
+      expect(
+        getByText('walletConnectRequest.signPayload, {"dappName":"WalletConnect Example"}')
+      ).toBeTruthy()
+      expect(getByText('allow')).toBeTruthy()
+      expect(queryByText('dismiss')).toBeFalsy()
+      expect(
+        queryByText(
+          'walletConnectRequest.unsupportedChain.title, {"dappName":"WalletConnect Example","chainId":"eip155:1"}'
+        )
+      ).toBeFalsy()
+    })
+  })
+})