wallet-stack 1.0.0-alpha.121

package/src/walletConnect/screens/RequestContent.tsx

@@ -0,0 +1,224 @@
+import { CoreTypes } from '@walletconnect/types'
+import React, { ReactElement, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, Text, View } from 'react-native'
+import Button, { BtnSizes, BtnTypes } from 'src/components/Button'
+import { activeDappSelector } from 'src/dapps/selectors'
+import { useSelector } from 'src/redux/hooks'
+import Colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import { Spacing } from 'src/styles/styles'
+import Logos from 'src/walletConnect/screens/Logos'
+
+export interface RequestDetail {
+  label: string
+  value: ReactElement<any> | string | null
+}
+
+interface BaseProps {
+  dappName: string
+  dappUrl?: string
+  dappImageUrl?: string
+  title: string
+  description: string | null
+  requestDetails?: RequestDetail[]
+  testId: string
+  children?: React.ReactNode
+  buttonText?: string | null
+  buttonLoading?: boolean
+}
+
+interface ConfirmProps extends BaseProps {
+  type: 'confirm'
+  onAccept(): void
+  onDeny(): void
+}
+
+interface DismissProps extends BaseProps {
+  type: 'dismiss'
+  onDismiss(): void
+}
+
+type Props = ConfirmProps | DismissProps
+
+export const useDappMetadata = (metadata?: CoreTypes.Metadata | null) => {
+  const activeDapp = useSelector(activeDappSelector)
+
+  if (!metadata) {
+    // should never happen
+    return {
+      url: '',
+      dappName: '',
+      dappImageUrl: '',
+    }
+  }
+
+  const { url, name, icons } = metadata
+
+  let dappOrigin = ''
+  let dappHostname = ''
+  try {
+    const dappUrl = new URL(url)
+    dappHostname = dappUrl.hostname
+    dappOrigin = dappUrl.origin
+  } catch {
+    // do nothing if an invalid url is received, use fallback values
+  }
+
+  // create a display name in case the WC request contains an empty string
+  const dappName =
+    name ||
+    (!!activeDapp && new URL(activeDapp.dappUrl).origin === dappOrigin
+      ? activeDapp.name
+      : dappHostname)
+  const dappImageUrl = icons[0] ?? `${url}/favicon.ico`
+
+  return {
+    url,
+    dappName,
+    dappImageUrl,
+  }
+}
+
+function RequestContent(props: Props) {
+  const {
+    type,
+    dappName,
+    dappImageUrl,
+    title,
+    description,
+    requestDetails,
+    testId,
+    children,
+    buttonText,
+    buttonLoading,
+  } = props
+  const { t } = useTranslation()
+  const [isPressed, setIsPressed] = useState(false)
+  const isPressedRef = useRef(false)
+
+  const showButtonLoading = buttonLoading || isPressed
+
+  const onPress = () => {
+    setIsPressed(true)
+  }
+
+  useEffect(() => {
+    isPressedRef.current = isPressed
+    if (isPressed) {
+      switch (props.type) {
+        case 'confirm':
+          props.onAccept()
+          break
+        case 'dismiss':
+          props.onDismiss()
+          break
+        default:
+          break
+      }
+    }
+  }, [isPressed])
+
+  useEffect(() => {
+    // This makes sure that the onDeny/onDismiss callback is called when the component is unmounted
+    return () => {
+      if (!isPressedRef.current) {
+        switch (props.type) {
+          case 'confirm':
+            props.onDeny()
+            break
+          case 'dismiss':
+            props.onDismiss()
+            break
+          default:
+            break
+        }
+      }
+    }
+  }, [])
+
+  return (
+    <>
+      <Logos dappName={dappName} dappImageUrl={dappImageUrl} />
+      <Text style={styles.header} testID={`${testId}Header`}>
+        {title}
+      </Text>
+      {!!description && <Text style={styles.description}>{description}</Text>}
+
+      {requestDetails && (
+        <View style={styles.requestDetailsContainer}>
+          {requestDetails.map(({ label, value }, index) =>
+            value ? (
+              <React.Fragment key={label}>
+                <Text
+                  style={[
+                    styles.requestDetailLabel,
+                    index > 0 ? { marginTop: Spacing.Regular16 } : undefined,
+                  ]}
+                >
+                  {label}
+                </Text>
+                {React.isValidElement(value) ? (
+                  value
+                ) : (
+                  <Text style={styles.requestDetailValue} numberOfLines={1} ellipsizeMode="tail">
+                    {value}
+                  </Text>
+                )}
+              </React.Fragment>
+            ) : null
+          )}
+        </View>
+      )}
+
+      {children}
+
+      {type == 'confirm' && (
+        <Button
+          type={BtnTypes.PRIMARY}
+          size={BtnSizes.FULL}
+          text={buttonText ?? t('allow')}
+          showLoading={showButtonLoading}
+          disabled={showButtonLoading}
+          onPress={onPress}
+          testID={`${testId}/Allow`}
+        />
+      )}
+      {type == 'dismiss' && (
+        <Button
+          type={BtnTypes.SECONDARY}
+          size={BtnSizes.FULL}
+          text={buttonText ?? t('dismiss')}
+          showLoading={showButtonLoading}
+          disabled={showButtonLoading}
+          onPress={onPress}
+          testID={`${testId}/Dismiss`}
+        />
+      )}
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  requestDetailsContainer: {
+    marginBottom: Spacing.Thick24,
+  },
+  header: {
+    ...typeScale.titleSmall,
+    paddingVertical: Spacing.Regular16,
+  },
+  description: {
+    ...typeScale.bodySmall,
+    marginBottom: Spacing.Thick24,
+  },
+  requestDetailLabel: {
+    ...typeScale.labelXSmall,
+    color: Colors.contentSecondary,
+    marginBottom: 4,
+  },
+  requestDetailValue: {
+    ...typeScale.labelSemiBoldSmall,
+  },
+})
+
+export default RequestContent

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

@@ -0,0 +1,274 @@
+import { WalletKitTypes } from '@reown/walletkit'
+import { fireEvent, render, within } from '@testing-library/react-native'
+import { buildApprovedNamespaces, getSdkError } from '@walletconnect/utils'
+import * as React from 'react'
+import 'react-native'
+import { Provider } from 'react-redux'
+import { acceptSession, denySession } from 'src/walletConnect/actions'
+import { SupportedActions, SupportedEvents } from 'src/walletConnect/constants'
+import SessionRequest from 'src/walletConnect/screens/SessionRequest'
+import { createMockStore } from 'test/utils'
+import { mockAccount } from 'test/values'
+
+describe(SessionRequest, () => {
+  const pendingSession: WalletKitTypes.EventArguments['session_proposal'] = {
+    id: 1690539550772665,
+    params: {
+      id: 1690539550772665,
+      pairingTopic: 'b655eac1cf0cc18780a1c6503d7395f633b3d10791b7a628d9602d10b2fe3f26',
+      expiryTimestamp: 1690539851,
+      requiredNamespaces: {
+        eip155: {
+          methods: ['eth_sendTransaction', 'personal_sign'],
+          chains: ['eip155:11155111', 'eip155:44787'],
+          events: ['chainChanged', 'accountsChanged'],
+        },
+      },
+      optionalNamespaces: {},
+      relays: [
+        {
+          protocol: 'irn',
+        },
+      ],
+      proposer: {
+        publicKey: 'd0d67fc544702f5b354130b0776801584e8eeabe208ab3e32ad438fd12e6063b',
+        metadata: {
+          description: 'React App for WalletConnect',
+          url: 'https://react-app.walletconnect.com',
+          icons: ['https://avatars.githubusercontent.com/u/37784886'],
+          name: 'React App',
+          verifyUrl: 'https://verify.walletconnect.com',
+        },
+      },
+    },
+    verifyContext: {
+      verified: {
+        verifyUrl: 'https://verify.walletconnect.com',
+        validation: 'VALID',
+        origin: 'https://react-app.walletconnect.com',
+      },
+    },
+  }
+
+  const namespacesToApprove = buildApprovedNamespaces({
+    proposal: pendingSession.params,
+    supportedNamespaces: {
+      eip155: {
+        chains: ['eip155:11155111', 'eip155:44787'],
+        methods: Object.values(SupportedActions) as string[],
+        events: Object.values(SupportedEvents) as string[],
+        accounts: [`eip155:11155111:${mockAccount}`, `eip155:44787:${mockAccount}`],
+      },
+    },
+  })
+
+  const supportedChains = ['eip155:44787']
+
+  const store = createMockStore({})
+
+  beforeEach(() => {
+    store.clearActions()
+  })
+
+  describe('new session', () => {
+    it('renders the correct elements', () => {
+      const { getByText, queryByText, queryByTestId } = render(
+        <Provider store={store}>
+          <SessionRequest
+            version={2}
+            pendingSession={pendingSession}
+            namespacesToApprove={namespacesToApprove}
+            supportedChains={['eip155:11155111', 'eip155:44787']}
+          />
+        </Provider>
+      )
+
+      expect(getByText('connectToWallet, {"dappName":"React App"}')).toBeTruthy()
+      expect(getByText('shareInfo')).toBeTruthy()
+      expect(getByText('walletConnectRequest.connectWalletAction')).toBeTruthy()
+      expect(queryByText('dismiss')).toBeFalsy()
+      const networkChips = queryByTestId('SessionRequest/NetworkChips')
+      expect(within(networkChips!).getByText('Celo Alfajores')).toBeTruthy()
+      expect(within(networkChips!).getByText('Ethereum Sepolia')).toBeTruthy()
+      expect(getByText(mockAccount.toLowerCase())).toBeTruthy()
+    })
+
+    it('dispatches the correct action on press connect wallet', () => {
+      const { getByText } = render(
+        <Provider store={store}>
+          <SessionRequest
+            version={2}
+            pendingSession={pendingSession}
+            namespacesToApprove={namespacesToApprove}
+            supportedChains={supportedChains}
+          />
+        </Provider>
+      )
+
+      fireEvent.press(getByText('walletConnectRequest.connectWalletAction'))
+      expect(store.getActions()).toEqual([acceptSession(pendingSession, namespacesToApprove)])
+    })
+
+    it('dispatches the correct action on dismiss bottom sheet', () => {
+      const { unmount } = render(
+        <Provider store={store}>
+          <SessionRequest
+            version={2}
+            pendingSession={pendingSession}
+            namespacesToApprove={namespacesToApprove}
+            supportedChains={supportedChains}
+          />
+        </Provider>
+      )
+
+      unmount()
+      expect(store.getActions()).toEqual([
+        denySession(pendingSession, getSdkError('USER_REJECTED')),
+      ])
+    })
+  })
+
+  describe('no namespace to approve', () => {
+    it('should show a warning', () => {
+      const { getByText, queryByText } = render(
+        <Provider store={store}>
+          <SessionRequest
+            version={2}
+            pendingSession={pendingSession}
+            namespacesToApprove={null}
+            supportedChains={supportedChains}
+          />
+        </Provider>
+      )
+
+      expect(getByText('connectToWallet, {"dappName":"React App"}')).toBeTruthy()
+      expect(getByText('shareInfo')).toBeTruthy()
+      expect(queryByText('allow')).toBeFalsy()
+      expect(getByText('dismiss')).toBeTruthy()
+      expect(queryByText(mockAccount.toLowerCase())).toBeFalsy()
+      expect(
+        getByText(
+          'walletConnectRequest.session.failUnsupportedNamespace.title, {"dappName":"React App"}'
+        )
+      ).toBeTruthy()
+    })
+
+    it('dispatches the correct action on press dismiss', () => {
+      const { getByText } = render(
+        <Provider store={store}>
+          <SessionRequest
+            version={2}
+            pendingSession={pendingSession}
+            namespacesToApprove={null}
+            supportedChains={supportedChains}
+          />
+        </Provider>
+      )
+
+      fireEvent.press(getByText('dismiss'))
+      expect(store.getActions()).toEqual([
+        denySession(pendingSession, getSdkError('UNSUPPORTED_NAMESPACE_KEY')),
+      ])
+    })
+  })
+
+  describe('unsupported chain', () => {
+    it('should show a warning', () => {
+      const { getByText, queryByText } = render(
+        <Provider store={store}>
+          <SessionRequest
+            version={2}
+            pendingSession={pendingSession}
+            namespacesToApprove={{
+              ...namespacesToApprove,
+              eip155: {
+                ...namespacesToApprove.eip155,
+                chains: ['eip155:1'],
+                accounts: [`eip155:1:${mockAccount}`],
+              },
+            }}
+            supportedChains={supportedChains}
+          />
+        </Provider>
+      )
+
+      expect(getByText('connectToWallet, {"dappName":"React App"}')).toBeTruthy()
+      expect(getByText('shareInfo')).toBeTruthy()
+      // We still want to allow connection
+      expect(getByText('walletConnectRequest.connectWalletAction')).toBeTruthy()
+      expect(queryByText('dismiss')).toBeFalsy()
+      expect(queryByText(mockAccount.toLowerCase())).toBeTruthy()
+      expect(
+        getByText(
+          'walletConnectRequest.session.warnUnsupportedChains.title, {"dappName":"React App"}'
+        )
+      ).toBeTruthy()
+    })
+  })
+
+  describe('unsupported method', () => {
+    it('should show a warning', () => {
+      const { getByText, queryByText } = render(
+        <Provider store={store}>
+          <SessionRequest
+            version={2}
+            pendingSession={pendingSession}
+            namespacesToApprove={{
+              ...namespacesToApprove,
+              eip155: {
+                ...namespacesToApprove.eip155,
+                methods: [...namespacesToApprove.eip155.methods, 'some_unsupported_method'],
+              },
+            }}
+            supportedChains={supportedChains}
+          />
+        </Provider>
+      )
+
+      expect(getByText('connectToWallet, {"dappName":"React App"}')).toBeTruthy()
+      expect(getByText('shareInfo')).toBeTruthy()
+      // We still want to allow connection
+      expect(getByText('walletConnectRequest.connectWalletAction')).toBeTruthy()
+      expect(queryByText('dismiss')).toBeFalsy()
+      expect(queryByText(mockAccount.toLowerCase())).toBeTruthy()
+      expect(
+        getByText(
+          'walletConnectRequest.session.warnSomeUnsupportedMethods.title, {"dappName":"React App"}'
+        )
+      ).toBeTruthy()
+    })
+  })
+
+  describe('unsupported event', () => {
+    it('should show a warning', () => {
+      const { getByText, queryByText } = render(
+        <Provider store={store}>
+          <SessionRequest
+            version={2}
+            pendingSession={pendingSession}
+            namespacesToApprove={{
+              ...namespacesToApprove,
+              eip155: {
+                ...namespacesToApprove.eip155,
+                events: [...namespacesToApprove.eip155.events, 'some_unsupported_event'],
+              },
+            }}
+            supportedChains={supportedChains}
+          />
+        </Provider>
+      )
+
+      expect(getByText('connectToWallet, {"dappName":"React App"}')).toBeTruthy()
+      expect(getByText('shareInfo')).toBeTruthy()
+      // We still want to allow connection
+      expect(getByText('walletConnectRequest.connectWalletAction')).toBeTruthy()
+      expect(queryByText('dismiss')).toBeFalsy()
+      expect(queryByText(mockAccount.toLowerCase())).toBeTruthy()
+      expect(
+        getByText(
+          'walletConnectRequest.session.warnSomeUnsupportedEvents.title, {"dappName":"React App"}'
+        )
+      ).toBeTruthy()
+    })
+  })
+})