Merge branch 'main' into feat/1564-assets-controllers-v10

app/actions/browser/index.js

@@ -2,18 +2,18 @@
  * Browser actions for Redux
  */
 export const BrowserActionTypes = {
-  ADD_TO_VISITED_DAPP: 'ADD_TO_VISITED_DAPP',
+  ADD_TO_VIEWED_DAPP: 'ADD_TO_VIEWED_DAPP',
 };
 
 /**
- * Adds a new entry to visited dapps
+ * Adds a new entry to viewed dapps
  *
  * @param {string} hostname - Dapp hostname
  * @returns
  */
-export function addToVisitedDapp(hostname) {
+export function addToViewedDapp(hostname) {
   return {
-    type: BrowserActionTypes.ADD_TO_VISITED_DAPP,
+    type: BrowserActionTypes.ADD_TO_VIEWED_DAPP,
     hostname,
   };
 }

app/actions/sdk/index.ts

@@ -0,0 +1,194 @@
+import type { Action as ReduxAction } from 'redux';
+import { ConnectionProps } from '../../core/SDKConnect/Connection';
+import { ApprovedHosts, SDKSessions } from '../../core/SDKConnect/SDKConnect';
+import { WC2Metadata } from './state';
+
+export enum ActionType {
+  WC2_METADATA = 'WC2_METADATA',
+  RESET_CONNECTIONS = 'RESET_CONNECTIONS',
+  UPDATE_CONNECTION = 'UPDATE_CONNECTION',
+  REMOVE_CONNECTION = 'REMOVE_CONNECTION',
+  ADD_CONNECTION = 'ADD_CONNECTION',
+  DISCONNECT_ALL = 'DISCONNECT_ALL',
+  REMOVE_APPROVED_HOST = 'REMOVE_APPROVWED_HOST',
+  SET_APPROVED_HOST = 'SET_APPROVED_HOST',
+  RESET_APPROVED_HOSTS = 'RESET_APPROVED_HOSTS',
+  SET_CONNECTED = 'SET_CONNECTED',
+  UPDATE_ANDROID_CONNECTION = 'UPDATE_ANDROID_CONNECTION',
+  REMOVE_ANDROID_CONNECTION = 'REMOVE_ANDROID_CONNECTION',
+  RESET_ANDROID_CONNECTIONS = 'RESET_ANDROID_CONNECTIONS',
+}
+
+export type DisconnectAll = ReduxAction<ActionType.DISCONNECT_ALL>;
+
+export interface UpdateConnection
+  extends ReduxAction<ActionType.UPDATE_CONNECTION> {
+  channelId: string;
+  connection: ConnectionProps;
+}
+
+export interface ResetConnection
+  extends ReduxAction<ActionType.RESET_CONNECTIONS> {
+  connections: SDKSessions;
+}
+
+export interface RemoveConnection
+  extends ReduxAction<ActionType.REMOVE_CONNECTION> {
+  channelId: string;
+}
+
+export interface AddConnection extends ReduxAction<ActionType.ADD_CONNECTION> {
+  channelId: string;
+  connection: ConnectionProps;
+}
+
+export interface RemoveApprovedHost
+  extends ReduxAction<ActionType.REMOVE_APPROVED_HOST> {
+  channelId: string;
+}
+
+export interface SetApprovedHost
+  extends ReduxAction<ActionType.SET_APPROVED_HOST> {
+  channelId: string;
+  validUntil: number;
+}
+
+export interface ResetApprovedHosts
+  extends ReduxAction<ActionType.RESET_APPROVED_HOSTS> {
+  approvedHosts: ApprovedHosts;
+}
+
+export interface UpdateAndroidConnection
+  extends ReduxAction<ActionType.UPDATE_ANDROID_CONNECTION> {
+  channelId: string;
+  connection: ConnectionProps;
+}
+
+export interface RemoveAndroidConnection
+  extends ReduxAction<ActionType.REMOVE_ANDROID_CONNECTION> {
+  channelId: string;
+}
+
+export interface ResetAndroidConnections
+  extends ReduxAction<ActionType.RESET_ANDROID_CONNECTIONS> {
+  connections: SDKSessions;
+}
+
+export interface SetConnected extends ReduxAction<ActionType.SET_CONNECTED> {
+  channelId: string;
+  connected: boolean;
+}
+
+export interface UpdateWC2Metadata
+  extends ReduxAction<ActionType.WC2_METADATA> {
+  metadata?: WC2Metadata;
+}
+
+export type Action =
+  | UpdateConnection
+  | DisconnectAll
+  | RemoveConnection
+  | AddConnection
+  | ResetConnection
+  | RemoveApprovedHost
+  | SetApprovedHost
+  | ResetApprovedHosts
+  | UpdateWC2Metadata
+  | UpdateAndroidConnection
+  | RemoveAndroidConnection
+  | ResetAndroidConnections
+  | SetConnected;
+
+export const disconnectAll = (): DisconnectAll => ({
+  type: ActionType.DISCONNECT_ALL,
+});
+
+export const updateWC2Metadata = (
+  metadata: WC2Metadata,
+): UpdateWC2Metadata => ({
+  type: ActionType.WC2_METADATA,
+  metadata,
+});
+
+export const updateConnection = (
+  channelId: string,
+  connection: ConnectionProps,
+): UpdateConnection => ({
+  type: ActionType.UPDATE_CONNECTION,
+  channelId,
+  connection,
+});
+
+export const removeConnection = (channelId: string): RemoveConnection => ({
+  type: ActionType.REMOVE_CONNECTION,
+  channelId,
+});
+
+export const addConnection = (
+  channelId: string,
+  connection: ConnectionProps,
+): AddConnection => ({
+  type: ActionType.ADD_CONNECTION,
+  channelId,
+  connection,
+});
+
+export const resetConnections = (
+  connections: SDKSessions,
+): ResetConnection => ({
+  type: ActionType.RESET_CONNECTIONS,
+  connections,
+});
+
+export const removeApprovedHost = (channelId: string): RemoveApprovedHost => ({
+  type: ActionType.REMOVE_APPROVED_HOST,
+  channelId,
+});
+
+export const setApprovedHost = (
+  channelId: string,
+  validUntil: number,
+): SetApprovedHost => ({
+  type: ActionType.SET_APPROVED_HOST,
+  channelId,
+  validUntil,
+});
+
+export const resetApprovedHosts = (
+  approvedHosts: ApprovedHosts,
+): ResetApprovedHosts => ({
+  type: ActionType.RESET_APPROVED_HOSTS,
+  approvedHosts,
+});
+
+export const updateAndroidConnection = (
+  channelId: string,
+  connection: ConnectionProps,
+): UpdateAndroidConnection => ({
+  type: ActionType.UPDATE_ANDROID_CONNECTION,
+  channelId,
+  connection,
+});
+
+export const removeAndroidConnection = (
+  channelId: string,
+): RemoveAndroidConnection => ({
+  type: ActionType.REMOVE_ANDROID_CONNECTION,
+  channelId,
+});
+
+export const resetAndroidConnections = (
+  connections: SDKSessions,
+): ResetAndroidConnections => ({
+  type: ActionType.RESET_ANDROID_CONNECTIONS,
+  connections,
+});
+
+export const setConnected = (
+  channelId: string,
+  connected: boolean,
+): SetConnected => ({
+  type: ActionType.SET_CONNECTED,
+  channelId,
+  connected,
+});

app/actions/sdk/state.ts

@@ -0,0 +1,14 @@
+import { ApprovedHosts, SDKSessions } from '../../core/SDKConnect/SDKConnect';
+export interface WC2Metadata {
+  id: string;
+  url: string;
+  name: string;
+  icon: string;
+}
+export interface SDKState {
+  connections: SDKSessions;
+  approvedHosts: ApprovedHosts;
+  androidConnections: SDKSessions;
+  // Link to metadata of last created wallet connect session.
+  wc2Metadata?: WC2Metadata;
+}

app/components/Views/AccountConnect/AccountConnect.tsx

@@ -55,8 +55,9 @@ import useFavicon from '../../hooks/useFavicon/useFavicon';
 import URLParse from 'url-parse';
 import SDKConnect from '../../../core/SDKConnect/SDKConnect';
 import AppConstants from '../../../../app/core/AppConstants';
-import { trackDappVisitedEvent } from '../../../util/metrics';
+import { trackDappViewedEvent } from '../../../util/metrics';
 import { useMetrics } from '../../../components/hooks/useMetrics';
+import { RootState } from '../../../../app/reducers';
 
 const AccountConnect = (props: AccountConnectProps) => {
   const Engine = UntypedEngine as any;
@@ -92,28 +93,46 @@ const AccountConnect = (props: AccountConnectProps) => {
     origin: string;
   };
 
-  // Extract connection info from sdk
-  // FIXME should be replaced by passing dynamic parameters to the PermissionController
-  // TODO: Retrive wallet connect connection info from channelId
-  const sdkConnection = SDKConnect.getInstance().getConnection({ channelId });
-  const hostname = (
-    sdkConnection?.originatorInfo?.url ?? metadataOrigin
-  ).replace(AppConstants.MM_SDK.SDK_REMOTE_ORIGIN, '');
-
   const origin: string = useSelector(getActiveTabUrl, isEqual);
+  const accountsLength = useSelector(selectAccountsLength);
 
-  const faviconSource = useFavicon(origin);
+  const [hostname, setHostname] = useState<string>(origin);
   const urlWithProtocol = prefixUrlWithProtocol(hostname);
+  const sdkConnection = SDKConnect.getInstance().getConnection({ channelId });
+  // Last wallet connect session metadata
+  const wc2Metadata = useSelector((state: RootState) => state.sdk.wc2Metadata);
+
+  const dappIconUrl = sdkConnection.originatorInfo?.icon;
+  const faviconSource = useFavicon(origin);
+
+  const actualIcon = useMemo(
+    () => (dappIconUrl ? { uri: dappIconUrl } : faviconSource),
+    [dappIconUrl, faviconSource],
+  );
 
   const secureIcon = useMemo(
     () =>
-      (getUrlObj(origin) as URLParse<string>).protocol === 'https:'
+      (getUrlObj(hostname) as URLParse<string>).protocol === 'https:'
         ? IconName.Lock
         : IconName.LockSlash,
-    [origin],
+    [hostname],
   );
 
-  const accountsLength = useSelector(selectAccountsLength);
+  const loadHostname = useCallback(async () => {
+    if (sdkConnection) {
+      const _hostname = (
+        sdkConnection?.originatorInfo?.url ?? metadataOrigin
+      ).replace(AppConstants.MM_SDK.SDK_REMOTE_ORIGIN, '');
+      return _hostname;
+    }
+
+    return wc2Metadata?.url ?? channelId;
+  }, [channelId, metadataOrigin, sdkConnection, wc2Metadata]);
+
+  // Retrieve hostname info based on channelId
+  useEffect(() => {
+    loadHostname().then(setHostname);
+  }, [hostname, setHostname, loadHostname]);
 
   // Refreshes selected addresses based on the addition and removal of accounts.
   useEffect(() => {
@@ -152,10 +171,10 @@ const AccountConnect = (props: AccountConnectProps) => {
     ],
   );
 
-  const triggerDappVisitedEvent = useCallback(
+  const triggerDappViewedEvent = useCallback(
     (numberOfConnectedAccounts: number) =>
-      // Track dapp visited event
-      trackDappVisitedEvent({ hostname, numberOfConnectedAccounts }),
+      // Track dapp viewed event
+      trackDappViewedEvent({ hostname, numberOfConnectedAccounts }),
     [hostname],
   );
 
@@ -186,7 +205,7 @@ const AccountConnect = (props: AccountConnectProps) => {
         request,
       );
 
-      triggerDappVisitedEvent(connectedAccountLength);
+      triggerDappViewedEvent(connectedAccountLength);
 
       trackEvent(MetaMetricsEvents.CONNECT_REQUEST_COMPLETED, {
         number_of_accounts: accountsLength,
@@ -231,7 +250,7 @@ const AccountConnect = (props: AccountConnectProps) => {
     toastRef,
     accountsLength,
     metadataOrigin,
-    triggerDappVisitedEvent,
+    triggerDappViewedEvent,
     trackEvent,
   ]);
 
@@ -350,7 +369,7 @@ const AccountConnect = (props: AccountConnectProps) => {
         onUserAction={setUserIntent}
         defaultSelectedAccount={defaultSelectedAccount}
         isLoading={isLoading}
-        favicon={faviconSource}
+        favicon={actualIcon}
         secureIcon={secureIcon}
         urlWithProtocol={urlWithProtocol}
       />
@@ -362,11 +381,11 @@ const AccountConnect = (props: AccountConnectProps) => {
     isLoading,
     setScreen,
     setSelectedAddresses,
-    faviconSource,
+    actualIcon,
     secureIcon,
+    sdkConnection,
     urlWithProtocol,
     setUserIntent,
-    sdkConnection,
   ]);
 
   const renderSingleConnectSelectorScreen = useCallback(