feat(release): 7.0.0

.js.env.example

@@ -29,3 +29,10 @@ export MM_TEST_ACCOUNT_PRIVATE_KEY=""
 
 # address is the address of the first account generated from the previous SRP
 export MM_TEST_ACCOUNT_ADDRESS=""
+
+
+# Wallet connect project id -- should be v2 compatible
+export WALLET_CONNECT_PROJECT_ID=""
+
+# Optional: SDK Remote Communication url (for testing with your local socket server)
+# export SDK_COMMLAYER_URL="http://{YOUR_LOCAL_IP}

CHANGELOG.md

@@ -71,6 +71,27 @@
 - [#6228](https://github.com/MetaMask/metamask-mobile/pull/6228): [UPDATE] Checkbox component
 - [#6226](https://github.com/MetaMask/metamask-mobile/pull/6226): [UPDATE] Button's icon props and button org
 
+## 7.0.0 - Jun 6, 2023
+- [#6536](https://github.com/MetaMask/metamask-mobile/pull/6380): [FEATURE] WalletConnect v2 Integration (#6380)
+
+## 6.6.0 - May 25, 2023
+- [#5866](https://github.com/MetaMask/metamask-mobile/pull/5866): [FIX] sturdier check
+- [#6340](https://github.com/MetaMask/metamask-mobile/pull/6340): [FIX] Missing network name onramp
+- [#6325](https://github.com/MetaMask/metamask-mobile/pull/6325): [FEATURE] Add development environment to onramp-sdk
+- [#6309](https://github.com/MetaMask/metamask-mobile/pull/6309): [FIX] Missing handler on mandatory modal
+- [#6165](https://github.com/MetaMask/metamask-mobile/pull/6165): [FEATURE] Edit account name view
+- [#5876](https://github.com/MetaMask/metamask-mobile/pull/5876): [FIX] Gas is not re-calculated when updating a transaction
+- [#6093](https://github.com/MetaMask/metamask-mobile/pull/6093): [FEATURE] Account actions on wallet view
+- [#6253](https://github.com/MetaMask/metamask-mobile/pull/6253): [FIX] Confirm button should be disabled if account has no balance
+- [#6097](https://github.com/MetaMask/metamask-mobile/pull/6097): [UPDATE] Extracting out signature request related code from RootRPCMethodsUI conponent
+- [#6246](https://github.com/MetaMask/metamask-mobile/pull/6246): [FIX] Wrong to account information on confirmation page
+- [#6085](https://github.com/MetaMask/metamask-mobile/pull/6085): [FEATURE] Update account section with card
+- [#6255](https://github.com/MetaMask/metamask-mobile/pull/6255): [UPDATE] Onboarding translation updated
+- [#6210](https://github.com/MetaMask/metamask-mobile/pull/6210): [UPDATE] Extend the readme documentation to cover E2E testing in more detail.
+- [#6249](https://github.com/MetaMask/metamask-mobile/pull/6249): [FIX] Terms of Use checkbox test id
+- [#6228](https://github.com/MetaMask/metamask-mobile/pull/6228): [UPDATE] Checkbox component
+- [#6226](https://github.com/MetaMask/metamask-mobile/pull/6226): [UPDATE] Button's icon props and button org
+
 ## 6.5.0 - May 4, 2023
 - [#5743](https://github.com/MetaMask/metamask-mobile/pull/5743): [FEATURE] On-ramp: Add buy-crypto deeplink
 - [#6201](https://github.com/MetaMask/metamask-mobile/pull/6201): [FIX] [SDK] Missing redirect breaking backward compatibility

README.md

@@ -89,6 +89,7 @@ cd metamask-mobile
 
 -   _MetaMask Only:_ Rename the `.*.env.example` files (remove the `.example`) in the root of the project and fill in the appropriate values for each key. Get the values from another MetaMask Mobile developer.
 -   _Non-MetaMask Only:_ In the project root folder run
+- If you intend to use WalletConnect v2 during your development, you should register to get a projectId from WalletConnect website and set the `WALLET_CONNECT_PROJECT_ID` value accordingly in .js.env file.
 ```
   cp .ios.env.example .ios.env && \
   cp .android.env.example .android.env && \

app/components/Nav/App/index.js

@@ -82,6 +82,7 @@ import AccountActions from '../../../components/Views/AccountActions';
 import WalletActions from '../../Views/WalletActions';
 import NetworkSelector from '../../../components/Views/NetworkSelector';
 import EditAccountName from '../../Views/EditAccountName/EditAccountName';
+import WC2Manager from '../../../../app/core/WalletConnect/WalletConnectV2';
 
 const clearStackNavigatorOptions = {
   headerShown: false,
@@ -347,21 +348,22 @@ const App = ({ userLoggedIn }) => {
 
   useEffect(() => {
     if (navigator) {
-      SDKConnect.getInstance().init({ navigation: navigator });
+      SDKConnect.getInstance()
+        .init({ navigation: navigator })
+        .catch((err) => {
+          console.error(`Cannot initialize SDKConnect`, err);
+        });
     }
     return () => {
       SDKConnect.getInstance().unmount();
     };
   }, [navigator]);
 
   useEffect(() => {
-    if (navigator) {
-      SDKConnect.getInstance().init({ navigation: navigator });
-    }
-    return () => {
-      SDKConnect.getInstance().unmount();
-    };
-  }, [navigator]);
+    WC2Manager.init().catch((err) => {
+      console.error(`Cannot initialize WalletConnect Manager.`, err);
+    });
+  }, []);
 
   useEffect(() => {
     async function checkExisting() {

app/components/Nav/Main/RootRPCMethodsUI.js

@@ -17,7 +17,7 @@ import {
   setTransactionObject,
 } from '../../../actions/transaction';
 import Modal from 'react-native-modal';
-import WalletConnect from '../../../core/WalletConnect';
+import WalletConnect from '../../../core/WalletConnect/WalletConnect';
 import {
   getMethodData,
   TOKEN_METHOD_TRANSFER,
@@ -418,6 +418,11 @@ const RootRPCMethodsUI = (props) => {
 
   const renderWalletConnectSessionRequestModal = () => {
     const meta = walletConnectRequestInfo?.data?.peerMeta || null;
+    const currentPageInformation = {
+      title: meta?.name || meta?.title,
+      url: meta?.url,
+      icon: meta?.icons?.[0],
+    };
     return (
       <Modal
         isVisible={showPendingApproval?.type === ApprovalTypes.WALLET_CONNECT}
@@ -435,11 +440,7 @@ const RootRPCMethodsUI = (props) => {
         <AccountApproval
           onCancel={onWalletConnectSessionRejected}
           onConfirm={onWalletConnectSessionApproval}
-          currentPageInformation={{
-            title: meta?.name,
-            url: meta?.url,
-            icon: meta?.icons?.[0],
-          }}
+          currentPageInformation={currentPageInformation}
           walletConnectRequest
         />
       </Modal>

app/components/Views/Approval/index.js

@@ -10,6 +10,7 @@ import { resetTransaction } from '../../../actions/transaction';
 import { connect } from 'react-redux';
 import NotificationManager from '../../../core/NotificationManager';
 import Analytics from '../../../core/Analytics/Analytics';
+import AppConstants from '../../../core/AppConstants';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import {
   getTransactionReviewActionKey,
@@ -109,6 +110,14 @@ class Approval extends PureComponent {
     transactionConfirmed: false,
   };
 
+  originIsWalletConnect = this.props.transaction.origin?.startsWith(
+    WALLET_CONNECT_ORIGIN,
+  );
+
+  originIsMMSDKRemoteConn = this.props.transaction.origin?.startsWith(
+    AppConstants.MM_SDK.SDK_REMOTE_ORIGIN,
+  );
+
   updateNavBar = () => {
     const colors = this.context.colors || mockTheme.colors;
     const { navigation } = this.props;
@@ -264,6 +273,11 @@ class Approval extends PureComponent {
         gas_estimate_type: gasEstimateType,
         gas_mode: gasSelected ? 'Basic' : 'Advanced',
         speed_set: gasSelected || undefined,
+        request_source: this.originIsMMSDKRemoteConn
+          ? AppConstants.REQUEST_SOURCES.SDK_REMOTE_CONN
+          : this.originIsWalletConnect
+          ? AppConstants.REQUEST_SOURCES.WC
+          : AppConstants.REQUEST_SOURCES.IN_APP_BROWSER,
       };
     } catch (error) {
       return {};

app/components/Views/SDKSessionsManager/SDKSessionItem.tsx

@@ -37,6 +37,7 @@ const createStyles = (
     } as TextStyle,
     dappName: {
       flexShrink: 1,
+      flexGrow: 1,
       marginLeft: 5,
       marginRight: 5,
       flexWrap: 'wrap',
@@ -69,7 +70,7 @@ export const SDKSessionItem = ({
     const _sessionName =
       connection.originatorInfo?.url ||
       connection.originatorInfo?.title ||
-      strings('sdk.unkown_dapp');
+      connection.id;
     setIcon(connection.originatorInfo?.icon);
     setSessionName(_sessionName);
   }, [connection]);

app/components/Views/SendFlow/Confirm/index.js

@@ -41,6 +41,7 @@ import {
 import { getGasLimit } from '../../../../util/custom-gas';
 import Engine from '../../../../core/Engine';
 import Logger from '../../../../util/Logger';
+import { WALLET_CONNECT_ORIGIN } from '../../../../util/walletconnect';
 import CustomNonceModal from '../../../UI/CustomNonceModal';
 import NotificationManager from '../../../../core/NotificationManager';
 import { strings } from '../../../../../locales/i18n';
@@ -238,6 +239,14 @@ class Confirm extends PureComponent {
     multiLayerL1FeeTotal: '0x0',
   };
 
+  originIsWalletConnect = this.props.transaction.origin?.startsWith(
+    WALLET_CONNECT_ORIGIN,
+  );
+
+  originIsMMSDKRemoteConn = this.props.transaction.origin?.startsWith(
+    AppConstants.MM_SDK.SDK_REMOTE_ORIGIN,
+  );
+
   setNetworkNonce = async () => {
     const { setNonce, setProposedNonce, transaction } = this.props;
     const proposedNonce = await getNetworkNonce(transaction);
@@ -257,6 +266,11 @@ class Confirm extends PureComponent {
         gas_estimate_type: gasEstimateType,
         gas_mode: gasSelected ? 'Basic' : 'Advanced',
         speed_set: gasSelected || undefined,
+        request_source: this.originIsMMSDKRemoteConn
+          ? AppConstants.REQUEST_SOURCES.SDK_REMOTE_CONN
+          : this.originIsWalletConnect
+          ? AppConstants.REQUEST_SOURCES.WC
+          : AppConstants.REQUEST_SOURCES.IN_APP_BROWSER,
       };
     } catch (error) {
       return {};

app/components/Views/WalletConnectSessions/index.js

@@ -14,11 +14,12 @@ import { getNavigationOptionsTitle } from '../../UI/Navbar';
 import WebsiteIcon from '../../UI/WebsiteIcon';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import ActionSheet from 'react-native-actionsheet';
-import WalletConnect from '../../../core/WalletConnect';
+import WalletConnect from '../../../core/WalletConnect/WalletConnect';
 import Logger from '../../../util/Logger';
 import { WALLETCONNECT_SESSIONS } from '../../../constants/storage';
 import { ThemeContext, mockTheme } from '../../../util/theme';
 import PropTypes from 'prop-types';
+import WC2Manager from '../../../../app/core/WalletConnect/WalletConnectV2';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -80,6 +81,7 @@ const createStyles = (colors) =>
 export default class WalletConnectSessions extends PureComponent {
   state = {
     sessions: [],
+    sessionsV2: [],
   };
 
   actionSheet = null;
@@ -114,7 +116,11 @@ export default class WalletConnectSessions extends PureComponent {
     if (sessionData) {
       sessions = JSON.parse(sessionData);
     }
-    this.setState({ ready: true, sessions });
+
+    // Add wallet connect v2 sessions to the list
+    const sessionsV2 = (await WC2Manager.getInstance())?.getSessions() || [];
+
+    this.setState({ ready: true, sessions, sessionsV2 });
   };
 
   renderDesc = (meta) => {
@@ -140,8 +146,16 @@ export default class WalletConnectSessions extends PureComponent {
   onActionSheetPress = (index) => (index === 0 ? this.killSession() : null);
 
   killSession = async () => {
+    const isV2 = this.sessionToRemove.peerId === undefined;
     try {
-      await WalletConnect.killSession(this.sessionToRemove.peerId);
+      if (isV2) {
+        await (
+          await WC2Manager.getInstance()
+        )?.removeSession(this.sessionToRemove);
+      } else {
+        await WalletConnect.killSession(this.sessionToRemove.peerId);
+      }
+
       Alert.alert(
         strings('walletconnect_sessions.session_ended_title'),
         strings('walletconnect_sessions.session_ended_desc'),
@@ -153,11 +167,20 @@ export default class WalletConnectSessions extends PureComponent {
   };
 
   renderSessions = () => {
-    const { sessions } = this.state;
+    const { sessions, sessionsV2 } = this.state;
+
+    return (
+      <>
+        {sessions.map((session) => this.renderV1(session))}
+        {sessionsV2.map((session, index) => this.renderV2(session, index))}
+      </>
+    );
+  };
+
+  renderV1 = (session) => {
     const colors = this.context.colors || mockTheme.colors;
     const styles = createStyles(colors);
-
-    return sessions.map((session) => (
+    return (
       <TouchableOpacity
         // eslint-disable-next-line react/jsx-no-bind
         onLongPress={() => this.onLongPress(session)}
@@ -172,7 +195,31 @@ export default class WalletConnectSessions extends PureComponent {
           {this.renderDesc(session.peerMeta)}
         </View>
       </TouchableOpacity>
-    ));
+    );
+  };
+
+  renderV2 = (session, index) => {
+    const colors = this.context.colors || mockTheme.colors;
+    const styles = createStyles(colors);
+    return (
+      <TouchableOpacity
+        // eslint-disable-next-line react/jsx-no-bind
+        onLongPress={() => this.onLongPress(session)}
+        key={`session_${session.id}_${index}`}
+        style={styles.row}
+      >
+        <WebsiteIcon
+          url={session.peer.metadata.url}
+          style={styles.websiteIcon}
+        />
+        <View style={styles.info}>
+          <Text style={styles.name}>{session.peer.metadata.name}</Text>
+          <Text style={styles.url}>{session.topic}</Text>
+          <Text style={styles.url}>{session.peer.metadata.url}</Text>
+          {this.renderDesc(session.peer.metadata)}
+        </View>
+      </TouchableOpacity>
+    );
   };
 
   renderEmpty = () => {
@@ -189,12 +236,13 @@ export default class WalletConnectSessions extends PureComponent {
   };
 
   render = () => {
-    const { ready, sessions } = this.state;
+    const { ready, sessions, sessionsV2 } = this.state;
     if (!ready) return null;
     const colors = this.context.colors || mockTheme.colors;
     const themeAppearance = this.context.themeAppearance;
     const styles = createStyles(colors);
 
+    const sessionsLength = sessions.length + sessionsV2.length;
     return (
       <SafeAreaView
         style={styles.wrapper}
@@ -204,7 +252,7 @@ export default class WalletConnectSessions extends PureComponent {
           style={styles.wrapper}
           contentContainerStyle={styles.scrollviewContent}
         >
-          {sessions.length ? this.renderSessions() : this.renderEmpty()}
+          {sessionsLength > 0 ? this.renderSessions() : this.renderEmpty()}
         </ScrollView>
         <ActionSheet
           ref={this.createActionSheetRef}

app/core/AppConstants.js

@@ -52,6 +52,14 @@ export default {
     //One day in hours
     SESSION_LIFETIME: 24,
     LIMIT_SESSIONS: 20,
+    DEEPLINK_SESSIONS: 'wc2sessions_deeplink',
+    PROJECT_ID: process.env.WALLET_CONNECT_PROJECT_ID,
+    METADATA: {
+      name: 'MetaMask Wallet',
+      description: 'MetaMask Wallet Integration',
+      url: 'https://metamask.io/',
+      icons: [],
+    },
   },
   SWAPS: {
     ACTIVE: true,
@@ -120,14 +128,15 @@ export default {
   REQUEST_SOURCES: {
     SDK_REMOTE_CONN: 'MetaMask-SDK-Remote-Conn',
     WC: 'WalletConnect',
+    WC2: 'WalletConnectV2',
     IN_APP_BROWSER: 'In-App-Browser',
   },
   MM_SDK: {
     SDK_CONNECTIONS: 'sdkConnections',
     SDK_APPROVEDHOSTS: 'sdkApprovedHosts',
-    // Adjust the serverUrl during local dev if need to debug the communication protocol.
-    // SERVER_URL: 'http://192.168.50.114:4000',
-    SERVER_URL: 'https://metamask-sdk-socket.metafi.codefi.network/',
+    SERVER_URL:
+      process.env.SDK_COMMLAYER_URL ??
+      'https://metamask-sdk-socket.metafi.codefi.network/',
     PLATFORM: 'metamask-mobile',
     SDK_REMOTE_ORIGIN: 'MMSDKREMOTE::',
     UNKNOWN_PARAM: 'UNKNOWN',