From f7d84850e069d52cff5bed387540b30d81eec060 Mon Sep 17 00:00:00 2001 From: Alex Bakoushin Date: Tue, 28 Oct 2025 10:51:40 +0100 Subject: [PATCH 1/9] skeleton --- .../mobile/src/ethereumProvider/events.ts | 24 +++ .../src/ethereumProvider/injectedProvider.ts | 150 ++++++++++++++++++ .../mobile/src/ethereumProvider/requests.ts | 38 +++++ .../mobile/src/ethereumProvider/types.ts | 38 +++++ .../ethereumProvider/useEthereumProvider.ts | 66 ++++++++ .../mobile/src/walletConnect/constants.ts | 12 ++ .../mobile/src/webview/WebViewScreen.tsx | 6 +- 7 files changed, 333 insertions(+), 1 deletion(-) create mode 100644 packages/@divvi/mobile/src/ethereumProvider/events.ts create mode 100644 packages/@divvi/mobile/src/ethereumProvider/injectedProvider.ts create mode 100644 packages/@divvi/mobile/src/ethereumProvider/requests.ts create mode 100644 packages/@divvi/mobile/src/ethereumProvider/types.ts create mode 100644 packages/@divvi/mobile/src/ethereumProvider/useEthereumProvider.ts diff --git a/packages/@divvi/mobile/src/ethereumProvider/events.ts b/packages/@divvi/mobile/src/ethereumProvider/events.ts new file mode 100644 index 0000000000..78cfb7594a --- /dev/null +++ b/packages/@divvi/mobile/src/ethereumProvider/events.ts @@ -0,0 +1,24 @@ +import { WebViewRef } from 'src/components/WebView' +import { rpcError } from 'src/walletConnect/constants' +import { Hex } from 'viem' + +function emitEvent(webViewRef: React.RefObject, event: string, data: any): void { + const script = ` + if (window.ethereum && window.ethereum._handleEvent) { + window.ethereum._handleEvent({ + event: '${event}', + data: ${JSON.stringify(data)} + }); + } + true; // Required for injection to work + ` + webViewRef.current?.injectJavaScript(script) +} + +export function emitConnect(webViewRef: React.RefObject, chainId: Hex): void { + emitEvent(webViewRef, 'connect', { chainId }) +} + +export function emitDisconnect(webViewRef: React.RefObject): void { + emitEvent(webViewRef, 'disconnect', { error: rpcError.DISCONNECTED }) +} diff --git a/packages/@divvi/mobile/src/ethereumProvider/injectedProvider.ts b/packages/@divvi/mobile/src/ethereumProvider/injectedProvider.ts new file mode 100644 index 0000000000..3ae4b76615 --- /dev/null +++ b/packages/@divvi/mobile/src/ethereumProvider/injectedProvider.ts @@ -0,0 +1,150 @@ +import { Hex } from 'viem' + +export function getInjectedProviderScript({ + isConnected = false, + chainId = null, +}: { + isConnected: boolean + chainId: Hex | null +}): string { + return ` + (function() { + // Prevent multiple injections + if (window.ethereum) { + return; + } + + var _isConnected = ${isConnected}; + var _chainId = ${JSON.stringify(chainId)}; + + var requestId = 0; + var pendingRequests = {}; + var eventListeners = {}; + + // Generate unique request ID + function generateRequestId() { + return 'req_' + (++requestId) + '_' + Date.now(); + } + + // Execute callback with error handling + function executeCallback(callback, data) { + try { + callback(data); + } catch (error) { + console.error('Error in event listener:', error); + } + } + + // Update internal state based on events + function updateInternalState(event, data) { + switch (event) { + case 'connect': + if (data && data.chainId) { + _chainId = data.chainId; + _isConnected = true; + } + break; + case 'disconnect': + _isConnected = false; + break; + } + } + + // Handle responses from React Native + function handleResponse(response) { + var id = response.id; + var result = response.result; + var error = response.error; + var resolver = pendingRequests[id]; + + if (resolver) { + delete pendingRequests[id]; + if (error) { + resolver.reject(error); + } else { + resolver.resolve(result); + } + } + } + + // Handle events from React Native + function handleEvent(eventData) { + var event = eventData.event; + var data = eventData.data; + + // Update internal state + updateInternalState(event, data); + + var listeners = eventListeners[event] || []; + for (var i = 0; i < listeners.length; i++) { + executeCallback(listeners[i], data); + } + } + + // Ethereum provider + window.ethereum = { + request: function(args) { + var method = args.method; + var params = args.params || []; + + return new Promise(function(resolve, reject) { + var id = generateRequestId(); + var request = { + id: id, + method: method, + params: params + }; + + // Store the promise resolvers + pendingRequests[id] = { resolve: resolve, reject: reject }; + + // Send request to React Native + window.ReactNativeWebView.postMessage(JSON.stringify({ + type: 'request', + data: request + })); + }); + }, + + on: function(event, callback) { + if (!eventListeners[event]) { + eventListeners[event] = []; + } + eventListeners[event].push(callback); + + // Auto-fire 'connect' event for late subscribers + if (event === 'connect' && _isConnected && _chainId) { + executeCallback(callback, { chainId: _chainId }); + } + }, + + removeListener: function(event, callback) { + var listeners = eventListeners[event]; + if (listeners) { + var index = listeners.indexOf(callback); + if (index > -1) { + listeners.splice(index, 1); + } + } + }, + + isConnected: function() { + return _isConnected; + }, + + // Internal methods for React Native communication + _handleResponse: handleResponse, + _handleEvent: handleEvent, + }; + + // chainId getter prop + Object.defineProperty(window.ethereum, 'chainId', { + get: function() { + return _chainId; + }, + enumerable: true, + }); + })(); + true; // Required for injection to work + ` +} diff --git a/packages/@divvi/mobile/src/ethereumProvider/requests.ts b/packages/@divvi/mobile/src/ethereumProvider/requests.ts new file mode 100644 index 0000000000..ff051a49d1 --- /dev/null +++ b/packages/@divvi/mobile/src/ethereumProvider/requests.ts @@ -0,0 +1,38 @@ +import { WebViewRef } from 'src/components/WebView' +import { rpcError } from 'src/walletConnect/constants' +import { EthereumProviderRequest, EthereumProviderResponse } from './types' + +function sendResponseToWebView( + webViewRef: React.RefObject, + response: EthereumProviderResponse +): void { + const script = ` + if (window.ethereum && window.ethereum._handleResponse) { + window.ethereum._handleResponse(${JSON.stringify(response)}); + } + true; // Required for injection to work + ` + webViewRef.current?.injectJavaScript(script) +} + +export function handleProviderRequest( + webViewRef: React.RefObject, + request: EthereumProviderRequest +): void { + const { id, method: _ } = request + try { + // TODO: Implement actual methods + const response: EthereumProviderResponse = { + id, + error: rpcError.UNSUPPORTED_METHOD, + } + sendResponseToWebView(webViewRef, response) + return + } catch (error) { + const response: EthereumProviderResponse = { + id, + error: rpcError.INTERNAL_ERROR, + } + sendResponseToWebView(webViewRef, response) + } +} diff --git a/packages/@divvi/mobile/src/ethereumProvider/types.ts b/packages/@divvi/mobile/src/ethereumProvider/types.ts new file mode 100644 index 0000000000..1fa3493faa --- /dev/null +++ b/packages/@divvi/mobile/src/ethereumProvider/types.ts @@ -0,0 +1,38 @@ +export type EthereumProviderEvent = 'connect' | 'disconnect' + +export interface EthereumProviderError { + code: number + message: string + data?: unknown +} + +export interface EthereumProviderRequest { + id: string + method: string + params?: unknown[] +} + +export interface EthereumProviderResponse { + id: string + result?: unknown + error?: EthereumProviderError +} + +export interface ProviderEventMessage { + event: EthereumProviderEvent + data?: unknown +} + +export type ProviderMessage = + | { + type: 'request' + data: EthereumProviderRequest + } + | { + type: 'response' + data: EthereumProviderResponse + } + | { + type: 'event' + data: ProviderEventMessage + } diff --git a/packages/@divvi/mobile/src/ethereumProvider/useEthereumProvider.ts b/packages/@divvi/mobile/src/ethereumProvider/useEthereumProvider.ts new file mode 100644 index 0000000000..c97ab09a94 --- /dev/null +++ b/packages/@divvi/mobile/src/ethereumProvider/useEthereumProvider.ts @@ -0,0 +1,66 @@ +import { WebViewMessageEvent } from '@interaxyz/react-native-webview' +import { useCallback, useEffect, useRef, useState } from 'react' +import { WebViewRef } from 'src/components/WebView' +import { networkConnectedSelector } from 'src/networkInfo/selectors' +import { useSelector } from 'src/redux/hooks' +import Logger from 'src/utils/Logger' +import networkConfig, { networkIdToNetwork } from 'src/web3/networkConfig' +import { toHex } from 'viem' +import { emitConnect, emitDisconnect } from './events' +import { getInjectedProviderScript } from './injectedProvider' +import { handleProviderRequest } from './requests' +import { ProviderMessage } from './types' + +const TAG = 'ethereumProvider/useEthereumProvider' + +export function useEthereumProvider(webViewRef: React.RefObject) { + const isNetworkConnected = useSelector(networkConnectedSelector) + const prevIsConnected = useRef(null) + + const defaultChainId = toHex( + networkConfig.viemChain[networkIdToNetwork[networkConfig.defaultNetworkId]].id + ) + + const [injectedJavaScript] = useState(() => + getInjectedProviderScript({ isConnected: isNetworkConnected, chainId: defaultChainId }) + ) + + // Handle incoming messages from WebView + const handleMessage = useCallback( + (event: WebViewMessageEvent) => { + try { + const message: ProviderMessage = JSON.parse(event.nativeEvent.data) + + if (message.type === 'request') { + handleProviderRequest(webViewRef, message.data) + } + } catch (error) { + Logger.error(TAG, 'Error parsing provider message', error) + } + }, + [webViewRef] + ) + + // Handle online/offline transitions + useEffect(() => { + if (webViewRef.current) { + if (prevIsConnected.current !== null && prevIsConnected.current !== isNetworkConnected) { + // Only emit events when connection status actually changes + if (isNetworkConnected) { + // Network came back online + emitConnect(webViewRef, defaultChainId) + } else { + // Network went offline + emitDisconnect(webViewRef) + } + } + + prevIsConnected.current = isNetworkConnected + } + }, [webViewRef.current, isNetworkConnected, defaultChainId]) + + return { + injectedJavaScript, + handleMessage, + } +} diff --git a/packages/@divvi/mobile/src/walletConnect/constants.ts b/packages/@divvi/mobile/src/walletConnect/constants.ts index 2f07752c51..3496573205 100644 --- a/packages/@divvi/mobile/src/walletConnect/constants.ts +++ b/packages/@divvi/mobile/src/walletConnect/constants.ts @@ -134,10 +134,22 @@ export const rpcError = { code: -32602, message: 'Invalid params', }, + INTERNAL_ERROR: { + code: -32603, + message: 'Internal error', + }, UNAUTHORIZED: { code: 4100, message: 'Unauthorized', }, + UNSUPPORTED_METHOD: { + code: 4200, + message: 'Unsupported method', + }, + DISCONNECTED: { + code: 4900, + message: 'Disconnected', + }, UNSUPPORTED_NON_OPTIONAL_CAPABILITY: { code: 5700, message: 'Unsupported non-optional capability', diff --git a/packages/@divvi/mobile/src/webview/WebViewScreen.tsx b/packages/@divvi/mobile/src/webview/WebViewScreen.tsx index f8a80ecdf7..9797beb117 100644 --- a/packages/@divvi/mobile/src/webview/WebViewScreen.tsx +++ b/packages/@divvi/mobile/src/webview/WebViewScreen.tsx @@ -21,6 +21,7 @@ import WebView, { WebViewRef } from 'src/components/WebView' import { DEEP_LINK_URL_SCHEME } from 'src/config' import { activeDappSelector } from 'src/dapps/selectors' import { dappSessionEnded } from 'src/dapps/slice' +import { useEthereumProvider } from 'src/ethereumProvider/useEthereumProvider' import BackChevron from 'src/icons/BackChevron' import ForwardChevron from 'src/icons/ForwardChevron' import Refresh from 'src/icons/Refresh' @@ -58,7 +59,8 @@ function WebViewScreen({ route, navigation }: Props) { DynamicConfigs[StatsigDynamicConfigs.DAPP_WEBVIEW_CONFIG] ).disabledMediaPlaybackRequiresUserActionOrigins - const webViewRef = useRef(null) + const webViewRef = useRef(null!) + const { injectedJavaScript, handleMessage } = useEthereumProvider(webViewRef) const [canGoBack, setCanGoBack] = useState(false) const [canGoForward, setCanGoForward] = useState(false) const [showingBottomSheet, setShowingBottomSheet] = useState(false) @@ -224,6 +226,8 @@ function WebViewScreen({ route, navigation }: Props) { }} mediaPlaybackRequiresUserAction={mediaPlaybackRequiresUserAction} testID={activeDapp ? `WebViewScreen/${activeDapp.name}` : 'RNWebView'} + injectedJavaScriptBeforeContentLoaded={injectedJavaScript} + onMessage={handleMessage} /> From 070c6f66d1b11530a1c0f5d59753506fbb084299 Mon Sep 17 00:00:00 2001 From: Alex Bakoushin Date: Tue, 28 Oct 2025 11:32:20 +0100 Subject: [PATCH 2/9] tests --- .../src/ethereumProvider/events.test.ts | 48 +++++++++ .../ethereumProvider/injectedProvider.test.ts | 98 +++++++++++++++++++ .../src/ethereumProvider/requests.test.ts | 39 ++++++++ 3 files changed, 185 insertions(+) create mode 100644 packages/@divvi/mobile/src/ethereumProvider/events.test.ts create mode 100644 packages/@divvi/mobile/src/ethereumProvider/injectedProvider.test.ts create mode 100644 packages/@divvi/mobile/src/ethereumProvider/requests.test.ts diff --git a/packages/@divvi/mobile/src/ethereumProvider/events.test.ts b/packages/@divvi/mobile/src/ethereumProvider/events.test.ts new file mode 100644 index 0000000000..d57e151c67 --- /dev/null +++ b/packages/@divvi/mobile/src/ethereumProvider/events.test.ts @@ -0,0 +1,48 @@ +import React, { RefObject } from 'react' +import { WebViewRef } from 'src/components/WebView' +import { rpcError } from 'src/walletConnect/constants' +import { emitConnect, emitDisconnect } from './events' + +const mockWebViewRef = () => { + const ref = React.createRef() as RefObject + Object.defineProperty(ref, 'current', { + writable: true, + value: { + injectJavaScript: jest.fn(), + }, + }) + return ref +} + +describe('ethereumProvider events', () => { + let webViewRef: RefObject + + beforeEach(() => { + jest.clearAllMocks() + webViewRef = mockWebViewRef() + }) + + describe('emitConnect', () => { + it('injects the connect event with chain id', () => { + emitConnect(webViewRef, '0x2710') + expect(webViewRef.current?.injectJavaScript).toHaveBeenCalledWith( + expect.stringContaining(`event: 'connect'`) + ) + expect(webViewRef.current?.injectJavaScript).toHaveBeenCalledWith( + expect.stringContaining(`data: ${JSON.stringify({ chainId: '0x2710' })}`) + ) + }) + }) + + describe('emitDisconnect', () => { + it('injects the disconnect event with error payload', () => { + emitDisconnect(webViewRef) + expect(webViewRef.current?.injectJavaScript).toHaveBeenCalledWith( + expect.stringContaining(`event: 'disconnect'`) + ) + expect(webViewRef.current?.injectJavaScript).toHaveBeenCalledWith( + expect.stringContaining(`data: ${JSON.stringify({ error: rpcError.DISCONNECTED })}`) + ) + }) + }) +}) diff --git a/packages/@divvi/mobile/src/ethereumProvider/injectedProvider.test.ts b/packages/@divvi/mobile/src/ethereumProvider/injectedProvider.test.ts new file mode 100644 index 0000000000..4a2bb07b1f --- /dev/null +++ b/packages/@divvi/mobile/src/ethereumProvider/injectedProvider.test.ts @@ -0,0 +1,98 @@ +import { getInjectedProviderScript } from './injectedProvider' + +describe('injectedProvider', () => { + let mockWindow: any + let originalWindow: any + + beforeAll(() => { + originalWindow = global.window + }) + + beforeEach(() => { + mockWindow = { + ReactNativeWebView: { + postMessage: jest.fn(), + }, + } + global.window = mockWindow + }) + + afterEach(() => { + global.window = originalWindow + jest.clearAllMocks() + }) + + it('should inject the window.ethereum object', () => { + const script = getInjectedProviderScript({ isConnected: false, chainId: null }) + eval(script) + expect(mockWindow.ethereum).toBeDefined() + }) + + it('should send a request message', () => { + const script = getInjectedProviderScript({ isConnected: true, chainId: '0x1' }) + eval(script) + mockWindow.ethereum.request({ method: 'eth_requestAccounts', params: [] }) + + expect(mockWindow.ReactNativeWebView.postMessage).toHaveBeenCalledWith( + expect.stringContaining('"type":"request"') + ) + expect(mockWindow.ReactNativeWebView.postMessage).toHaveBeenCalledWith( + expect.stringContaining('"method":"eth_requestAccounts"') + ) + }) + + it('should handle a successful response', async () => { + const script = getInjectedProviderScript({ isConnected: true, chainId: '0x1' }) + eval(script) + const requestPromise = mockWindow.ethereum.request({ + method: 'eth_requestAccounts', + params: [], + }) + + const message = JSON.parse(mockWindow.ReactNativeWebView.postMessage.mock.calls[0][0]) + const requestId = message.data.id + + mockWindow.ethereum._handleResponse({ + id: requestId, + result: ['0x123'], + }) + + await expect(requestPromise).resolves.toEqual(['0x123']) + }) + + it('should handle an error response', async () => { + const script = getInjectedProviderScript({ isConnected: true, chainId: '0x1' }) + eval(script) + const requestPromise = mockWindow.ethereum.request({ + method: 'eth_requestAccounts', + params: [], + }) + + const message = JSON.parse(mockWindow.ReactNativeWebView.postMessage.mock.calls[0][0]) + const requestId = message.data.id + const error = { code: 4001, message: 'User Rejected Request' } + + mockWindow.ethereum._handleResponse({ + id: requestId, + error, + }) + + await expect(requestPromise).rejects.toEqual(error) + }) + + it('should handle events', () => { + const script = getInjectedProviderScript({ isConnected: false, chainId: null }) + eval(script) + const connectListener = jest.fn() + mockWindow.ethereum.on('connect', connectListener) + + mockWindow.ethereum._handleEvent({ + event: 'connect', + data: { chainId: '0x1' }, + }) + + expect(connectListener).toHaveBeenCalledWith({ chainId: '0x1' }) + expect(mockWindow.ethereum.isConnected()).toBe(true) + expect(mockWindow.ethereum.chainId).toBe('0x1') + }) +}) diff --git a/packages/@divvi/mobile/src/ethereumProvider/requests.test.ts b/packages/@divvi/mobile/src/ethereumProvider/requests.test.ts new file mode 100644 index 0000000000..c65ea61752 --- /dev/null +++ b/packages/@divvi/mobile/src/ethereumProvider/requests.test.ts @@ -0,0 +1,39 @@ +import React, { RefObject } from 'react' +import { WebViewRef } from 'src/components/WebView' +import { rpcError } from 'src/walletConnect/constants' +import { handleProviderRequest } from './requests' +import { EthereumProviderRequest } from './types' + +describe('handleProviderRequest', () => { + let webViewRef: RefObject + + beforeEach(() => { + jest.clearAllMocks() + webViewRef = React.createRef() as RefObject + Object.defineProperty(webViewRef, 'current', { + writable: true, + value: { + injectJavaScript: jest.fn(), + }, + }) + }) + + it('should send an unsupported method error response', () => { + const request: EthereumProviderRequest = { + id: 'testId', + method: 'eth_requestAccounts', + params: [], + } + + handleProviderRequest(webViewRef, request) + + const expectedResponse = { + id: request.id, + error: rpcError.UNSUPPORTED_METHOD, + } + + expect(webViewRef.current?.injectJavaScript).toHaveBeenCalledWith( + expect.stringContaining(JSON.stringify(expectedResponse)) + ) + }) +}) From 211e905a7788381032759ecbc1c30d8c6ce61c22 Mon Sep 17 00:00:00 2001 From: Alex Bakoushin Date: Tue, 28 Oct 2025 13:25:30 +0100 Subject: [PATCH 3/9] refine tests --- .../src/ethereumProvider/events.test.ts | 27 ++++--------------- .../src/ethereumProvider/requests.test.ts | 17 ++---------- .../mobile/src/ethereumProvider/testUtils.ts | 11 ++++++++ 3 files changed, 18 insertions(+), 37 deletions(-) create mode 100644 packages/@divvi/mobile/src/ethereumProvider/testUtils.ts diff --git a/packages/@divvi/mobile/src/ethereumProvider/events.test.ts b/packages/@divvi/mobile/src/ethereumProvider/events.test.ts index d57e151c67..c6f27632c4 100644 --- a/packages/@divvi/mobile/src/ethereumProvider/events.test.ts +++ b/packages/@divvi/mobile/src/ethereumProvider/events.test.ts @@ -1,41 +1,24 @@ -import React, { RefObject } from 'react' -import { WebViewRef } from 'src/components/WebView' import { rpcError } from 'src/walletConnect/constants' import { emitConnect, emitDisconnect } from './events' - -const mockWebViewRef = () => { - const ref = React.createRef() as RefObject - Object.defineProperty(ref, 'current', { - writable: true, - value: { - injectJavaScript: jest.fn(), - }, - }) - return ref -} +import { createMockWebViewRef } from './testUtils' describe('ethereumProvider events', () => { - let webViewRef: RefObject - - beforeEach(() => { - jest.clearAllMocks() - webViewRef = mockWebViewRef() - }) - describe('emitConnect', () => { it('injects the connect event with chain id', () => { - emitConnect(webViewRef, '0x2710') + const webViewRef = createMockWebViewRef() + emitConnect(webViewRef, '0x1') expect(webViewRef.current?.injectJavaScript).toHaveBeenCalledWith( expect.stringContaining(`event: 'connect'`) ) expect(webViewRef.current?.injectJavaScript).toHaveBeenCalledWith( - expect.stringContaining(`data: ${JSON.stringify({ chainId: '0x2710' })}`) + expect.stringContaining(`data: ${JSON.stringify({ chainId: '0x1' })}`) ) }) }) describe('emitDisconnect', () => { it('injects the disconnect event with error payload', () => { + const webViewRef = createMockWebViewRef() emitDisconnect(webViewRef) expect(webViewRef.current?.injectJavaScript).toHaveBeenCalledWith( expect.stringContaining(`event: 'disconnect'`) diff --git a/packages/@divvi/mobile/src/ethereumProvider/requests.test.ts b/packages/@divvi/mobile/src/ethereumProvider/requests.test.ts index c65ea61752..62d346b3c8 100644 --- a/packages/@divvi/mobile/src/ethereumProvider/requests.test.ts +++ b/packages/@divvi/mobile/src/ethereumProvider/requests.test.ts @@ -1,24 +1,11 @@ -import React, { RefObject } from 'react' -import { WebViewRef } from 'src/components/WebView' import { rpcError } from 'src/walletConnect/constants' import { handleProviderRequest } from './requests' +import { createMockWebViewRef } from './testUtils' import { EthereumProviderRequest } from './types' describe('handleProviderRequest', () => { - let webViewRef: RefObject - - beforeEach(() => { - jest.clearAllMocks() - webViewRef = React.createRef() as RefObject - Object.defineProperty(webViewRef, 'current', { - writable: true, - value: { - injectJavaScript: jest.fn(), - }, - }) - }) - it('should send an unsupported method error response', () => { + const webViewRef = createMockWebViewRef() const request: EthereumProviderRequest = { id: 'testId', method: 'eth_requestAccounts', diff --git a/packages/@divvi/mobile/src/ethereumProvider/testUtils.ts b/packages/@divvi/mobile/src/ethereumProvider/testUtils.ts new file mode 100644 index 0000000000..0228f5c048 --- /dev/null +++ b/packages/@divvi/mobile/src/ethereumProvider/testUtils.ts @@ -0,0 +1,11 @@ +import React, { RefObject } from 'react' +import { WebViewRef } from 'src/components/WebView' + +export const createMockWebViewRef = (): RefObject => { + const ref = React.createRef() as RefObject + Object.defineProperty(ref, 'current', { + writable: true, + value: { injectJavaScript: jest.fn() }, + }) + return ref +} From 3d117819830f9fa44dcc70a60eaa69d41a298ee8 Mon Sep 17 00:00:00 2001 From: Alex Bakoushin Date: Tue, 28 Oct 2025 13:25:37 +0100 Subject: [PATCH 4/9] moar tests --- .../useEthereumProvider.test.ts | 82 +++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 packages/@divvi/mobile/src/ethereumProvider/useEthereumProvider.test.ts diff --git a/packages/@divvi/mobile/src/ethereumProvider/useEthereumProvider.test.ts b/packages/@divvi/mobile/src/ethereumProvider/useEthereumProvider.test.ts new file mode 100644 index 0000000000..22d4f32e36 --- /dev/null +++ b/packages/@divvi/mobile/src/ethereumProvider/useEthereumProvider.test.ts @@ -0,0 +1,82 @@ +import { renderHook } from '@testing-library/react-native' +import { RefObject } from 'react' +import { WebViewRef } from 'src/components/WebView' +import { emitConnect, emitDisconnect } from './events' +import { handleProviderRequest } from './requests' +import { createMockWebViewRef } from './testUtils' +import { useEthereumProvider } from './useEthereumProvider' + +jest.mock('src/redux/hooks', () => ({ useSelector: jest.fn() })) +jest.mock('./injectedProvider', () => ({ getInjectedProviderScript: jest.fn() })) +jest.mock('./requests', () => ({ handleProviderRequest: jest.fn() })) +jest.mock('./events', () => ({ emitConnect: jest.fn(), emitDisconnect: jest.fn() })) + +const mockMessage = (type: string, data: any) => + ({ + nativeEvent: { data: JSON.stringify({ type, data }) }, + }) as any + +describe('useEthereumProvider', () => { + let webViewRef: RefObject + let mockUseSelector: jest.Mock + + beforeEach(() => { + jest.clearAllMocks() + webViewRef = createMockWebViewRef() + + const { useSelector } = require('src/redux/hooks') + mockUseSelector = useSelector as jest.Mock + mockUseSelector.mockReturnValue(true) + }) + + describe('handleMessage', () => { + it('parses and handles request messages', () => { + const { result } = renderHook(() => useEthereumProvider(webViewRef)) + const mockRequest = { id: 'testId', method: 'eth_requestAccounts', params: [] } + const event = mockMessage('request', mockRequest) + + result.current.handleMessage(event) + + expect(handleProviderRequest).toHaveBeenCalledWith(webViewRef, mockRequest) + }) + + it('ignores non-request messages', () => { + const { result } = renderHook(() => useEthereumProvider(webViewRef)) + const event = mockMessage('response', { id: 'testId', result: 'success' }) + + result.current.handleMessage(event) + + expect(handleProviderRequest).not.toHaveBeenCalled() + }) + }) + + describe('network connection', () => { + it('emits connect event when network comes online', () => { + mockUseSelector.mockReturnValue(false) + const { rerender } = renderHook(({ ref }) => useEthereumProvider(ref), { + initialProps: { ref: webViewRef }, + }) + + // Network comes online + mockUseSelector.mockReturnValue(true) + rerender({ ref: webViewRef }) + + expect(emitConnect).toHaveBeenCalledWith(webViewRef, '0xaef3') + expect(emitDisconnect).not.toHaveBeenCalled() + }) + + it('emits disconnect event when network goes offline', () => { + mockUseSelector.mockReturnValue(true) + const { rerender } = renderHook(({ ref }) => useEthereumProvider(ref), { + initialProps: { ref: webViewRef }, + }) + + // Network goes offline + mockUseSelector.mockReturnValue(false) + rerender({ ref: webViewRef }) + + expect(emitDisconnect).toHaveBeenCalledWith(webViewRef) + expect(emitConnect).not.toHaveBeenCalled() + }) + }) +}) From 7e147d1cb31be93ee09121320bf10f1b994c0fd3 Mon Sep 17 00:00:00 2001 From: Alex Bakoushin Date: Tue, 28 Oct 2025 13:36:18 +0100 Subject: [PATCH 5/9] feature gate --- packages/@divvi/mobile/src/statsig/constants.ts | 1 + packages/@divvi/mobile/src/statsig/types.ts | 1 + .../@divvi/mobile/src/webview/WebViewScreen.tsx | 14 ++++++++++---- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/@divvi/mobile/src/statsig/constants.ts b/packages/@divvi/mobile/src/statsig/constants.ts index 0b0eea0018..98dacc16ba 100644 --- a/packages/@divvi/mobile/src/statsig/constants.ts +++ b/packages/@divvi/mobile/src/statsig/constants.ts @@ -36,6 +36,7 @@ export const FeatureGates = { [StatsigFeatureGates.SHOW_DIVVI_SLICES_BOTTOM_SHEET]: false, [StatsigFeatureGates.RECAPTCHA_ENABLED]: false, [StatsigFeatureGates.USE_SMART_ACCOUNT_CAPABILITIES]: false, + [StatsigFeatureGates.INJECTED_ETHEREUM_PROVIDER]: false, } satisfies { [key in StatsigFeatureGates]: boolean } export const ExperimentConfigs = { diff --git a/packages/@divvi/mobile/src/statsig/types.ts b/packages/@divvi/mobile/src/statsig/types.ts index 5d3461af73..9d28e5ec18 100644 --- a/packages/@divvi/mobile/src/statsig/types.ts +++ b/packages/@divvi/mobile/src/statsig/types.ts @@ -38,6 +38,7 @@ export enum StatsigFeatureGates { SHOW_DIVVI_SLICES_BOTTOM_SHEET = 'show_divvi_slices_bottom_sheet', RECAPTCHA_ENABLED = 'recaptcha_enabled', USE_SMART_ACCOUNT_CAPABILITIES = 'use_smart_account_capabilities', + INJECTED_ETHEREUM_PROVIDER = 'injected_ethereum_provider', } export enum StatsigExperiments { diff --git a/packages/@divvi/mobile/src/webview/WebViewScreen.tsx b/packages/@divvi/mobile/src/webview/WebViewScreen.tsx index 9797beb117..2d4f30a24e 100644 --- a/packages/@divvi/mobile/src/webview/WebViewScreen.tsx +++ b/packages/@divvi/mobile/src/webview/WebViewScreen.tsx @@ -32,9 +32,9 @@ import { Screens } from 'src/navigator/Screens' import { TopBarTextButton } from 'src/navigator/TopBarButton' import { StackParamList } from 'src/navigator/types' import { useDispatch, useSelector } from 'src/redux/hooks' -import { getDynamicConfigParams } from 'src/statsig' +import { getDynamicConfigParams, getFeatureGate } from 'src/statsig' import { DynamicConfigs } from 'src/statsig/constants' -import { StatsigDynamicConfigs } from 'src/statsig/types' +import { StatsigDynamicConfigs, StatsigFeatureGates } from 'src/statsig/types' import colors from 'src/styles/colors' import { iconHitslop } from 'src/styles/variables' import Logger from 'src/utils/Logger' @@ -59,6 +59,10 @@ function WebViewScreen({ route, navigation }: Props) { DynamicConfigs[StatsigDynamicConfigs.DAPP_WEBVIEW_CONFIG] ).disabledMediaPlaybackRequiresUserActionOrigins + const ethereumProviderInjectionEnabled = getFeatureGate( + StatsigFeatureGates.INJECTED_ETHEREUM_PROVIDER + ) + const webViewRef = useRef(null!) const { injectedJavaScript, handleMessage } = useEthereumProvider(webViewRef) const [canGoBack, setCanGoBack] = useState(false) @@ -226,8 +230,10 @@ function WebViewScreen({ route, navigation }: Props) { }} mediaPlaybackRequiresUserAction={mediaPlaybackRequiresUserAction} testID={activeDapp ? `WebViewScreen/${activeDapp.name}` : 'RNWebView'} - injectedJavaScriptBeforeContentLoaded={injectedJavaScript} - onMessage={handleMessage} + injectedJavaScriptBeforeContentLoaded={ + ethereumProviderInjectionEnabled ? injectedJavaScript : undefined + } + onMessage={ethereumProviderInjectionEnabled ? handleMessage : undefined} /> From 9e6cbd72a4cd2e0dcc981763977f71fb333bc7d0 Mon Sep 17 00:00:00 2001 From: Alex Bakoushin Date: Tue, 28 Oct 2025 13:59:10 +0100 Subject: [PATCH 6/9] reject when no network --- .../src/ethereumProvider/requests.test.ts | 22 ++++++++++++++++++- .../mobile/src/ethereumProvider/requests.ts | 12 +++++++++- .../useEthereumProvider.test.ts | 2 +- .../ethereumProvider/useEthereumProvider.ts | 4 ++-- 4 files changed, 35 insertions(+), 5 deletions(-) diff --git a/packages/@divvi/mobile/src/ethereumProvider/requests.test.ts b/packages/@divvi/mobile/src/ethereumProvider/requests.test.ts index 62d346b3c8..114d220a6c 100644 --- a/packages/@divvi/mobile/src/ethereumProvider/requests.test.ts +++ b/packages/@divvi/mobile/src/ethereumProvider/requests.test.ts @@ -12,7 +12,7 @@ describe('handleProviderRequest', () => { params: [], } - handleProviderRequest(webViewRef, request) + handleProviderRequest(webViewRef, request, true) const expectedResponse = { id: request.id, @@ -23,4 +23,24 @@ describe('handleProviderRequest', () => { expect.stringContaining(JSON.stringify(expectedResponse)) ) }) + + it('should send a disconnected error response when offline', () => { + const webViewRef = createMockWebViewRef() + const request: EthereumProviderRequest = { + id: 'testId', + method: 'eth_requestAccounts', + params: [], + } + + handleProviderRequest(webViewRef, request, false) + + const expectedResponse = { + id: request.id, + error: rpcError.DISCONNECTED, + } + + expect(webViewRef.current?.injectJavaScript).toHaveBeenCalledWith( + expect.stringContaining(JSON.stringify(expectedResponse)) + ) + }) }) diff --git a/packages/@divvi/mobile/src/ethereumProvider/requests.ts b/packages/@divvi/mobile/src/ethereumProvider/requests.ts index ff051a49d1..213895f5c9 100644 --- a/packages/@divvi/mobile/src/ethereumProvider/requests.ts +++ b/packages/@divvi/mobile/src/ethereumProvider/requests.ts @@ -17,10 +17,20 @@ function sendResponseToWebView( export function handleProviderRequest( webViewRef: React.RefObject, - request: EthereumProviderRequest + request: EthereumProviderRequest, + isNetworkConnected: boolean ): void { const { id, method: _ } = request try { + if (!isNetworkConnected) { + const response: EthereumProviderResponse = { + id, + error: rpcError.DISCONNECTED, + } + sendResponseToWebView(webViewRef, response) + return + } + // TODO: Implement actual methods const response: EthereumProviderResponse = { id, diff --git a/packages/@divvi/mobile/src/ethereumProvider/useEthereumProvider.test.ts b/packages/@divvi/mobile/src/ethereumProvider/useEthereumProvider.test.ts index 22d4f32e36..072d63c895 100644 --- a/packages/@divvi/mobile/src/ethereumProvider/useEthereumProvider.test.ts +++ b/packages/@divvi/mobile/src/ethereumProvider/useEthereumProvider.test.ts @@ -37,7 +37,7 @@ describe('useEthereumProvider', () => { result.current.handleMessage(event) - expect(handleProviderRequest).toHaveBeenCalledWith(webViewRef, mockRequest) + expect(handleProviderRequest).toHaveBeenCalledWith(webViewRef, mockRequest, true) }) it('ignores non-request messages', () => { diff --git a/packages/@divvi/mobile/src/ethereumProvider/useEthereumProvider.ts b/packages/@divvi/mobile/src/ethereumProvider/useEthereumProvider.ts index c97ab09a94..d8747fb24e 100644 --- a/packages/@divvi/mobile/src/ethereumProvider/useEthereumProvider.ts +++ b/packages/@divvi/mobile/src/ethereumProvider/useEthereumProvider.ts @@ -32,13 +32,13 @@ export function useEthereumProvider(webViewRef: React.RefObject) { const message: ProviderMessage = JSON.parse(event.nativeEvent.data) if (message.type === 'request') { - handleProviderRequest(webViewRef, message.data) + handleProviderRequest(webViewRef, message.data, isNetworkConnected) } } catch (error) { Logger.error(TAG, 'Error parsing provider message', error) } }, - [webViewRef] + [webViewRef, isNetworkConnected] ) // Handle online/offline transitions From 8a0ca55ce1dda23dc900896f1a291123cc7fb0f1 Mon Sep 17 00:00:00 2001 From: Alex Bakoushin Date: Tue, 28 Oct 2025 14:29:20 +0100 Subject: [PATCH 7/9] remove legacy --- .../mobile/src/ethereumProvider/injectedProvider.ts | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/packages/@divvi/mobile/src/ethereumProvider/injectedProvider.ts b/packages/@divvi/mobile/src/ethereumProvider/injectedProvider.ts index 3ae4b76615..f683a09a5f 100644 --- a/packages/@divvi/mobile/src/ethereumProvider/injectedProvider.ts +++ b/packages/@divvi/mobile/src/ethereumProvider/injectedProvider.ts @@ -128,22 +128,10 @@ export function getInjectedProviderScript({ } }, - isConnected: function() { - return _isConnected; - }, - // Internal methods for React Native communication _handleResponse: handleResponse, _handleEvent: handleEvent, }; - - // chainId getter prop - Object.defineProperty(window.ethereum, 'chainId', { - get: function() { - return _chainId; - }, - enumerable: true, - }); })(); true; // Required for injection to work ` From 6463c891213ffaa9ff685e211d35a3132b2bfa9b Mon Sep 17 00:00:00 2001 From: Alex Bakoushin Date: Tue, 28 Oct 2025 14:38:20 +0100 Subject: [PATCH 8/9] fix test --- .../mobile/src/ethereumProvider/injectedProvider.test.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/@divvi/mobile/src/ethereumProvider/injectedProvider.test.ts b/packages/@divvi/mobile/src/ethereumProvider/injectedProvider.test.ts index 4a2bb07b1f..3925750eca 100644 --- a/packages/@divvi/mobile/src/ethereumProvider/injectedProvider.test.ts +++ b/packages/@divvi/mobile/src/ethereumProvider/injectedProvider.test.ts @@ -24,12 +24,14 @@ describe('injectedProvider', () => { it('should inject the window.ethereum object', () => { const script = getInjectedProviderScript({ isConnected: false, chainId: null }) + // eslint-disable-next-line no-eval eval(script) expect(mockWindow.ethereum).toBeDefined() }) it('should send a request message', () => { const script = getInjectedProviderScript({ isConnected: true, chainId: '0x1' }) + // eslint-disable-next-line no-eval eval(script) mockWindow.ethereum.request({ method: 'eth_requestAccounts', params: [] }) @@ -43,6 +45,7 @@ describe('injectedProvider', () => { it('should handle a successful response', async () => { const script = getInjectedProviderScript({ isConnected: true, chainId: '0x1' }) + // eslint-disable-next-line no-eval eval(script) const requestPromise = mockWindow.ethereum.request({ method: 'eth_requestAccounts', @@ -62,6 +65,7 @@ describe('injectedProvider', () => { it('should handle an error response', async () => { const script = getInjectedProviderScript({ isConnected: true, chainId: '0x1' }) + // eslint-disable-next-line no-eval eval(script) const requestPromise = mockWindow.ethereum.request({ method: 'eth_requestAccounts', @@ -82,6 +86,7 @@ describe('injectedProvider', () => { it('should handle events', () => { const script = getInjectedProviderScript({ isConnected: false, chainId: null }) + // eslint-disable-next-line no-eval eval(script) const connectListener = jest.fn() mockWindow.ethereum.on('connect', connectListener) @@ -92,7 +97,5 @@ describe('injectedProvider', () => { }) expect(connectListener).toHaveBeenCalledWith({ chainId: '0x1' }) - expect(mockWindow.ethereum.isConnected()).toBe(true) - expect(mockWindow.ethereum.chainId).toBe('0x1') }) }) From 722d73bd64b56b6b94a488ac7e0876af41e7067f Mon Sep 17 00:00:00 2001 From: Alex Bakoushin Date: Tue, 28 Oct 2025 19:14:37 +0100 Subject: [PATCH 9/9] knip --- packages/@divvi/mobile/src/ethereumProvider/types.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/@divvi/mobile/src/ethereumProvider/types.ts b/packages/@divvi/mobile/src/ethereumProvider/types.ts index 1fa3493faa..f56fa60eff 100644 --- a/packages/@divvi/mobile/src/ethereumProvider/types.ts +++ b/packages/@divvi/mobile/src/ethereumProvider/types.ts @@ -1,6 +1,6 @@ -export type EthereumProviderEvent = 'connect' | 'disconnect' +type EthereumProviderEvent = 'connect' | 'disconnect' -export interface EthereumProviderError { +interface EthereumProviderError { code: number message: string data?: unknown @@ -18,7 +18,7 @@ export interface EthereumProviderResponse { error?: EthereumProviderError } -export interface ProviderEventMessage { +interface ProviderEventMessage { event: EthereumProviderEvent data?: unknown }