@reown/appkit-react-native 0.0.0-feat-multichain-20250731180941 → 0.0.0-feat-multichain-20250804182547

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reown/appkit-react-native",
-  "version": "0.0.0-feat-multichain-20250731180941",
+  "version": "0.0.0-feat-multichain-20250804182547",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "module": "lib/module/index.js",
@@ -38,10 +38,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@reown/appkit-common-react-native": "0.0.0-feat-multichain-20250731180941",
-    "@reown/appkit-core-react-native": "0.0.0-feat-multichain-20250731180941",
-    "@reown/appkit-siwe-react-native": "0.0.0-feat-multichain-20250731180941",
-    "@reown/appkit-ui-react-native": "0.0.0-feat-multichain-20250731180941",
+    "@reown/appkit-common-react-native": "0.0.0-feat-multichain-20250804182547",
+    "@reown/appkit-core-react-native": "0.0.0-feat-multichain-20250804182547",
+    "@reown/appkit-siwe-react-native": "0.0.0-feat-multichain-20250804182547",
+    "@reown/appkit-ui-react-native": "0.0.0-feat-multichain-20250804182547",
     "@walletconnect/universal-provider": "2.21.5",
     "valtio": "2.1.5"
   },

package/src/AppKit.ts

@@ -1,5 +1,4 @@
 import {
-  type Features,
   EventsController,
   ModalController,
   ConnectionsController,
@@ -7,9 +6,8 @@ import {
   RouterController,
   TransactionsController,
   StorageUtil,
-  type OptionsControllerState,
   ThemeController,
-  ConnectionController,
+  WcController,
   SwapController,
   OnRampController,
   CoreHelperUtil,
@@ -23,18 +21,12 @@ import {
   type ProposalNamespaces,
   type ConnectorType,
   type Namespaces,
-  type Metadata,
   type CaipNetworkId,
   type AppKitNetwork,
   type Provider,
-  type ThemeVariables,
-  type ThemeMode,
   type WalletInfo,
-  type Network,
   type ChainNamespace,
-  type Storage,
   type AppKitConnectOptions,
-  type AppKitSIWEClient,
   type ConnectionProperties,
   type AccountType,
   type AppKitOpenOptions,
@@ -47,29 +39,7 @@ import { WalletConnectConnector } from './connectors/WalletConnectConnector';
 import { WcHelpersUtil } from './utils/HelpersUtil';
 import { NetworkUtil } from './utils/NetworkUtil';
 import { RouterUtil } from './utils/RouterUtil';
-
-interface AppKitConfig {
-  projectId: string;
-  metadata: Metadata;
-  adapters: BlockchainAdapter[];
-  networks: Network[];
-  storage: Storage;
-  extraConnectors?: WalletConnector[];
-  clipboardClient?: OptionsControllerState['clipboardClient'];
-  includeWalletIds?: OptionsControllerState['includeWalletIds'];
-  excludeWalletIds?: OptionsControllerState['excludeWalletIds'];
-  featuredWalletIds?: OptionsControllerState['featuredWalletIds'];
-  customWallets?: OptionsControllerState['customWallets'];
-  tokens?: OptionsControllerState['tokens']; //TODO: check if needed in OptionsController
-  enableAnalytics?: OptionsControllerState['enableAnalytics'];
-  debug?: OptionsControllerState['debug'];
-  themeMode?: ThemeMode;
-  themeVariables?: ThemeVariables;
-  siweConfig?: AppKitSIWEClient;
-  defaultNetwork?: Network;
-  features?: Features;
-  // chainImages?: Record<number, string>; //TODO: rename to networkImages
-}
+import { type AppKitConfig } from './types';
 
 export class AppKit {
   private projectId: string;
@@ -115,7 +85,10 @@ export class AppKit {
     });
 
     this.networks = networksWithAdapters;
-    this.namespaces = WcHelpersUtil.createNamespaces(this.networks) as ProposalNamespaces;
+    this.namespaces = WcHelpersUtil.createNamespaces(
+      this.networks,
+      config.universalProviderConfigOverride
+    ) as ProposalNamespaces;
     this.config = config;
     this.extraConnectors = config.extraConnectors || [];
 
@@ -144,47 +117,59 @@ export class AppKit {
         siweConfig: this.config?.siweConfig
       });
 
-      const walletInfo = connector.getWalletInfo();
-      const properties = connector.getProperties();
+      this.processConnection(connector, approvedNamespaces);
 
-      if (!approvedNamespaces || Object.keys(approvedNamespaces).length === 0) {
-        throw new Error('Connection cancelled or failed: No approved namespaces returned.');
+      // Save connector type and namespaces in storage
+      if (approvedNamespaces && Object.keys(approvedNamespaces).length > 0) {
+        await StorageUtil.setConnectedConnectors({
+          type: connector.type,
+          namespaces: Object.keys(approvedNamespaces)
+        });
       }
+    } catch (error) {
+      console.warn('Connection failed:', error);
+      throw error;
+    }
+  }
 
-      // Setup adapters and subscribe to adapter events
-      const approvedAdapters = this.setupAdaptersAndSubscribe(
-        connector,
-        Object.keys(approvedNamespaces)
-      );
+  private processConnection(
+    connector: WalletConnector,
+    namespaces?: Namespaces,
+    shouldCloseModal: boolean = true
+  ) {
+    if (!namespaces || Object.keys(namespaces).length === 0) {
+      throw new Error('No namespaces provided');
+    }
 
-      // Check if any compatible adapters were found for the *approved* namespaces
-      if (approvedAdapters.length === 0) {
-        //TODO: handle case where devs want to connect to a namespace that has no adapters. Could use the provider directly.
-        throw new Error('No compatible adapters found for the approved namespaces');
-      }
+    const walletInfo = connector.getWalletInfo();
+    const properties = connector.getProperties();
 
-      // Store the connection details for the successfully connected adapters
-      this.setConnection(approvedAdapters, approvedNamespaces, walletInfo, properties);
+    const initializedAdapters = this.setupAdaptersAndSubscribe(connector, Object.keys(namespaces));
 
-      // Store connector type and namespaces in storage
-      await StorageUtil.setConnectedConnectors({
-        type: connector.type,
-        namespaces: Object.keys(approvedNamespaces)
-      });
+    if (initializedAdapters.length === 0) {
+      console.warn('No compatible adapters found for namespaces:', Object.keys(namespaces));
 
-      this.syncAccounts(approvedAdapters);
+      return;
+    }
 
-      if (
-        OptionsController.state.isSiweEnabled &&
-        ConnectionsController.state.activeNamespace === 'eip155'
-      ) {
-        this.handleSiweChange({ isConnection: true });
-      } else {
-        ModalController.close();
-      }
-    } catch (error) {
-      console.warn('Connection failed:', error);
-      throw error;
+    // Store the connection details
+    this.setConnection(initializedAdapters, namespaces, walletInfo, properties);
+
+    // Sync accounts
+    this.syncAccounts(initializedAdapters);
+
+    // Handle SIWE if enabled
+    this.handleSiweConnectionIfEnabled(shouldCloseModal);
+  }
+
+  private handleSiweConnectionIfEnabled(shouldCloseModal: boolean = true): void {
+    if (
+      OptionsController.state.isSiweEnabled &&
+      ConnectionsController.state.activeNamespace === 'eip155'
+    ) {
+      this.handleSiweChange({ isConnection: true });
+    } else if (shouldCloseModal) {
+      ModalController.close();
     }
   }
 
@@ -219,7 +204,7 @@ export class AppKit {
       SwapController.resetState();
       SendController.resetState();
       OnRampController.resetState();
-      ConnectionController.disconnect();
+      WcController.resetState();
 
       if (ConnectionsController.state.activeNamespace === undefined) {
         ConnectionsController.setActiveNamespace(
@@ -383,13 +368,12 @@ export class AppKit {
     return this.walletConnectConnector;
   }
 
-  //TODO: reuse logic with connect method
   /**
    * Initializes connectors based on stored connection data.
    * This attempts to restore previous sessions.
    */
   private async initConnectors() {
-    const connectedConnectors = await StorageUtil.getConnectedConnectors(); // Fetch stored connectors
+    const connectedConnectors = await StorageUtil.getConnectedConnectors();
     if (connectedConnectors.length > 0) {
       ModalController.setLoading(true);
 
@@ -398,31 +382,8 @@ export class AppKit {
           const connector = await this.createConnector(connected.type);
 
           const namespaces = connector.getNamespaces();
-          const walletInfo = connector.getWalletInfo();
-          const properties = connector.getProperties();
-
-          if (namespaces && Object.keys(namespaces).length > 0) {
-            // Ensure namespaces is not empty
-            // Setup adapters and subscribe to events
-            const initializedAdapters = this.setupAdaptersAndSubscribe(
-              connector,
-              Object.keys(namespaces)
-            );
-
-            // If adapters were successfully initialized, store the connection details
-            if (initializedAdapters.length > 0) {
-              this.setConnection(initializedAdapters, namespaces, walletInfo, properties);
-            }
-
-            this.syncAccounts(initializedAdapters);
-
-            if (
-              OptionsController.state.isSiweEnabled &&
-              ConnectionsController.state.activeNamespace === 'eip155'
-            ) {
-              this.handleSiweChange({ isConnection: true });
-            }
-          }
+
+          this.processConnection(connector, namespaces, false);
         } catch (error) {
           // Use console.warn for non-critical initialization failures
           console.warn(`Failed to initialize connector type ${connected.type}:`, error);
@@ -449,7 +410,7 @@ export class AppKit {
     }
 
     adapters.forEach(adapter => {
-      adapter.setConnector(connector);
+      adapter.init({ connector });
       this.subscribeToAdapterEvents(adapter);
     });
 
@@ -569,9 +530,7 @@ export class AppKit {
   private subscribeToAdapterEvents(adapter: BlockchainAdapter): void {
     adapter.on('accountsChanged', ({ accounts }) => {
       const namespace = adapter.getSupportedNamespace();
-      //eslint-disable-next-line no-console
-      console.log('accountsChanged', accounts, namespace);
-      //TODO: check this
+      ConnectionsController.updateAccounts(namespace, accounts);
 
       if (namespace === 'eip155') {
         this.handleSiweChange({ isAccountChange: true });
@@ -605,7 +564,6 @@ export class AppKit {
       this.disconnect(namespace, false);
     });
 
-    //TODO: Add types to this events
     adapter.on('balanceChanged', ({ address, balance }) => {
       //eslint-disable-next-line no-console
       console.log('balanceChanged', address, balance);
@@ -623,7 +581,6 @@ export class AppKit {
     this.setExcludedWallets(options);
     this.setCustomWallets(options);
     OptionsController.setFeaturedWalletIds(options.featuredWalletIds);
-    OptionsController.setTokens(options.tokens);
     OptionsController.setEnableAnalytics(options.enableAnalytics);
     OptionsController.setDebug(options.debug);
     OptionsController.setFeatures(options.features);
@@ -671,8 +628,6 @@ export class AppKit {
 
   private async initRecentWallets(options: AppKitConfig) {
     const wallets = await StorageUtil.getRecentWallets();
-    const connectedWalletImage = await StorageUtil.getConnectedWalletImageUrl();
-
     const filteredWallets = wallets.filter(wallet => {
       const { includeWalletIds, excludeWalletIds } = options;
       if (includeWalletIds) {
@@ -685,11 +640,7 @@ export class AppKit {
       return true;
     });
 
-    ConnectionController.setRecentWallets(filteredWallets);
-
-    if (connectedWalletImage) {
-      ConnectionController.setConnectedWalletImageUrl(connectedWalletImage);
-    }
+    WcController.setRecentWallets(filteredWallets);
   }
 
   private setExcludedWallets(options: AppKitConfig) {
@@ -699,7 +650,7 @@ export class AppKit {
     const excludeCoinbase = !this.extraConnectors.some(connector => connector.type === 'coinbase');
 
     if (excludeCoinbase) {
-      excludedWallets.push(ConstantsUtil.COINBASE_EXPLORER_ID);
+      excludedWallets.push(ConstantsUtil.COINBASE_CUSTOM_WALLET.id);
     }
 
     OptionsController.setExcludeWalletIds(excludedWallets);

package/src/AppKitContext.tsx

@@ -16,8 +16,7 @@ export const AppKitProvider: React.FC<AppKitProviderProps> = ({ children, instan
   return <AppKitContext.Provider value={{ appKit: instance }}>{children}</AppKitContext.Provider>;
 };
 
-//TODO: rename this so it doesn't conflict with the useAppKit hook in the hooks folder
-export const useAppKit = () => {
+export const useInternalAppKit = () => {
   const context = useContext(AppKitContext);
   if (context === undefined) {
     throw new Error('useAppKit must be used within an AppKitProvider');

package/src/connectors/WalletConnectConnector.ts

@@ -1,4 +1,4 @@
-import { ConnectionController } from '@reown/appkit-core-react-native';
+import { WcController } from '@reown/appkit-core-react-native';
 import { UniversalProvider, type IUniversalProvider } from '@walletconnect/universal-provider';
 import {
   WalletConnector,
@@ -11,7 +11,8 @@ import {
   type ConnectOptions,
   type ConnectorInitOptions,
   type Metadata,
-  type ConnectionProperties
+  type ConnectionProperties,
+  type RequestArguments
 } from '@reown/appkit-common-react-native';
 import { getDidAddress, getDidChainId, SIWEController } from '@reown/appkit-siwe-react-native';
 
@@ -95,7 +96,7 @@ export class WalletConnectConnector extends WalletConnector {
   override async connect(opts: ConnectOptions) {
     const { siweConfig, namespaces, defaultChain, universalLink } = opts;
     function onUri(uri: string) {
-      ConnectionController.setWcUri(uri);
+      WcController.setWcUri(uri);
     }
 
     const provider = this.getProvider() as IUniversalProvider;
@@ -201,11 +202,25 @@ export class WalletConnectConnector extends WalletConnector {
     return this.namespaces;
   }
 
-  override getProvider(): Provider {
+  override getProvider(namespace?: ChainNamespace): Provider {
     if (!this.provider) {
       throw new Error('WalletConnectConnector: Provider not initialized. Call init() first.');
     }
 
+    const provider = this.provider as IUniversalProvider;
+
+    if (namespace) {
+      const _chainId = this.getChainId(namespace);
+
+      // @ts-ignore
+      return {
+        ...provider,
+        request: (args: RequestArguments, chainId?: CaipNetworkId) => {
+          return provider.request(args, chainId || _chainId);
+        }
+      };
+    }
+
     return this.provider;
   }
 

package/src/hooks/useProvider.ts

@@ -2,24 +2,45 @@ import { useSnapshot } from 'valtio';
 import { ConnectionsController } from '@reown/appkit-core-react-native';
 import type { Provider, ChainNamespace } from '@reown/appkit-common-react-native';
 
+/**
+ * Interface representing the result of the useProvider hook
+ */
 interface ProviderResult {
+  /** The active connection provider instance */
   provider?: Provider;
+  /** The chain namespace supported by the provider */
   providerType?: ChainNamespace;
 }
 
-export function useProvider(namespace?: ChainNamespace): ProviderResult {
-  const { connections, activeNamespace } = useSnapshot(ConnectionsController.state);
-
-  const targetNamespace = namespace ?? activeNamespace;
-
-  if (!targetNamespace) return { provider: undefined, providerType: undefined };
-
-  const connection = connections.get(targetNamespace);
+/**
+ * Hook that returns the active connection provider and its supported chain namespace.
+ *
+ * This hook accesses the current connection and returns the provider instance along with its supported namespace.
+ *
+ * @returns {ProviderResult} An object containing:
+ *   - `provider`: The active connection provider instance, or undefined if no connection exists
+ *   - `providerType`: The chain namespace supported by the provider, or undefined if no connection exists
+ *
+ * @example
+ * ```typescript
+ * const { provider, providerType } = useProvider();
+ *
+ * if (provider) {
+ *   // Use the provider for blockchain operations
+ *   const balance = await provider.request({
+ *     method: 'eth_getBalance',
+ *     params: [address, 'latest']
+ *   });
+ * }
+ * ```
+ */
+export function useProvider(): ProviderResult {
+  const { connection } = useSnapshot(ConnectionsController.state);
 
   if (!connection) return { provider: undefined, providerType: undefined };
 
   return {
-    provider: connection.adapter.connector?.getProvider(),
+    provider: connection.adapter.getProvider(),
     providerType: connection.adapter.getSupportedNamespace()
   };
 }

package/src/index.ts

@@ -17,6 +17,7 @@ export { AppKit } from './modal/w3m-modal';
 /********** Types **********/
 export type * from '@reown/appkit-core-react-native';
 export type { AppKitNetwork, Storage } from '@reown/appkit-common-react-native';
+export type { AppKitConfig } from './types';
 
 /****** Hooks *******/
 export { useAppKit } from './hooks/useAppKit';

package/src/modal/w3m-account-button/index.tsx

@@ -5,7 +5,8 @@ import {
   ModalController,
   ThemeController,
   ConnectionsController,
-  AssetController
+  AssetController,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 import { AccountButton as AccountButtonUI, ThemeProvider } from '@reown/appkit-ui-react-native';
 
@@ -26,7 +27,7 @@ export function AccountButton({ balance, disabled, style, testID }: AccountButto
     identity
   } = useSnapshot(ConnectionsController.state);
 
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const showBalance = balance === 'show';
 
   return (

package/src/modal/w3m-modal/index.tsx

@@ -15,11 +15,11 @@ import { AppKitRouter } from '../w3m-router';
 import { Header } from '../../partials/w3m-header';
 import { Snackbar } from '../../partials/w3m-snackbar';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { useAppKit } from '../../AppKitContext';
+import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
 export function AppKit() {
-  const { close } = useAppKit();
+  const { close } = useInternalAppKit();
   const { open } = useSnapshot(ModalController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
   const { projectId } = useSnapshot(OptionsController.state);

package/src/modal/w3m-network-button/index.tsx

@@ -3,6 +3,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import {
   ApiController,
   AssetController,
+  AssetUtil,
   ConnectionsController,
   EventsController,
   ModalController,
@@ -24,7 +25,7 @@ export function NetworkButton({ disabled, style }: NetworkButtonProps) {
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
 
   const network = isConnected ? activeNetwork : defaultNetwork;
-  const networkImage = network ? networkImages[network.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(network, networkImages);
 
   const onNetworkPress = () => {
     ModalController.open({ view: 'Networks' });

package/src/partials/w3m-account-activity/index.tsx

@@ -13,6 +13,7 @@ import {
 import { type Transaction, type TransactionImage } from '@reown/appkit-common-react-native';
 import {
   AssetController,
+  AssetUtil,
   ConnectionsController,
   ConstantsUtil,
   EventsController,
@@ -34,7 +35,7 @@ export function AccountActivity({ style }: Props) {
   const { loading, transactions, next } = useSnapshot(TransactionsController.state);
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const isSupported =
     activeNetwork?.caipNetworkId &&
     ConstantsUtil.ACTIVITY_SUPPORTED_CHAINS.includes(activeNetwork.caipNetworkId);

package/src/partials/w3m-account-tokens/index.tsx

@@ -9,6 +9,7 @@ import {
 import { useSnapshot } from 'valtio';
 import {
   AssetController,
+  AssetUtil,
   ConnectionsController,
   RouterController
 } from '@reown/appkit-core-react-native';
@@ -32,7 +33,7 @@ export function AccountTokens({ style, isLoading }: Props) {
   const [refreshing, setRefreshing] = useState(false);
   const { activeNetwork, balances } = useSnapshot(ConnectionsController.state);
   const { networkImages } = useSnapshot(AssetController.state);
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
 
   const getBalance = useCallback(async () => {
     setRefreshing(true);

package/src/partials/w3m-connecting-mobile/index.tsx

@@ -5,7 +5,7 @@ import {
   RouterController,
   ApiController,
   AssetUtil,
-  ConnectionController,
+  WcController,
   CoreHelperUtil,
   OptionsController,
   EventsController,
@@ -21,7 +21,6 @@ import {
 } from '@reown/appkit-ui-react-native';
 
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
-import { UiUtil } from '../../utils/UiUtil';
 import { StoreLink } from './components/StoreLink';
 import { ConnectingBody, getMessage, type BodyErrorType } from '../w3m-connecting-body';
 import styles from './styles';
@@ -35,7 +34,7 @@ interface Props {
 export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
   const { data } = RouterController.state;
   const { maxWidth: width } = useCustomDimensions();
-  const { wcUri, wcError } = useSnapshot(ConnectionController.state);
+  const { wcUri, wcError } = useSnapshot(WcController.state);
   const [errorType, setErrorType] = useState<BodyErrorType>();
   const showCopy =
     OptionsController.isClipboardAvailable() &&
@@ -52,7 +51,7 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
 
   const onRetryPress = () => {
     setErrorType(undefined);
-    ConnectionController.setWcError(false);
+    WcController.setWcError(false);
     onRetry?.();
   };
 
@@ -68,11 +67,11 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
       if (name && mobile_link && wcUri) {
         const { redirect, href } = CoreHelperUtil.formatNativeUrl(mobile_link, wcUri);
         const wcLinking = { name, href };
-        ConnectionController.setWcLinking(wcLinking);
-        ConnectionController.setPressedWallet(data?.wallet);
+        WcController.setWcLinking(wcLinking);
+        WcController.setPressedWallet(data?.wallet);
         await CoreHelperUtil.openLink(redirect);
-        await ConnectionController.state.wcPromise;
-        UiUtil.storeConnectedWallet(wcLinking, data?.wallet);
+        await WcController.state.wcPromise;
+        WcController.setConnectedWallet(wcLinking, data?.wallet);
         EventsController.sendEvent({
           type: 'track',
           event: 'CONNECT_SUCCESS',

package/src/partials/w3m-connecting-qrcode/index.tsx

@@ -1,32 +1,32 @@
 import { useEffect } from 'react';
 import { useSnapshot } from 'valtio';
 import {
-  AssetUtil,
-  ConnectionController,
+  WcController,
   EventsController,
   OptionsController,
   SnackController
 } from '@reown/appkit-core-react-native';
-import { FlexView, Link, QrCode, Text, Spacing } from '@reown/appkit-ui-react-native';
 import { ConstantsUtil } from '@reown/appkit-common-react-native';
+import { FlexView, Link, QrCode, Text, Spacing, Icon } from '@reown/appkit-ui-react-native';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
+import { Linking, Pressable } from 'react-native';
 
 export function ConnectingQrCode() {
-  const { wcUri } = useSnapshot(ConnectionController.state);
+  const { wcUri } = useSnapshot(WcController.state);
   const showCopy = OptionsController.isClipboardAvailable();
   const { maxWidth: windowSize, isPortrait } = useCustomDimensions();
   const qrSize = (windowSize - Spacing.xl * 2) / (isPortrait ? 1 : 1.5);
 
   const onCopyAddress = () => {
-    if (ConnectionController.state.wcUri) {
-      OptionsController.copyToClipboard(ConnectionController.state.wcUri);
+    if (WcController.state.wcUri) {
+      OptionsController.copyToClipboard(WcController.state.wcUri);
       SnackController.showSuccess('Link copied');
     }
   };
 
   const onConnect = async () => {
-    await ConnectionController.state.wcPromise;
+    await WcController.state.wcPromise;
 
     EventsController.sendEvent({
       type: 'track',
@@ -36,10 +36,6 @@ export function ConnectingQrCode() {
         name: 'WalletConnect'
       }
     });
-
-    //TODO: check this
-    const url = AssetUtil.getConnectorImage(ConstantsUtil.WALLET_CONNECT_IMAGE_ID);
-    ConnectionController.setConnectedWalletImageUrl(url);
   };
 
   useEffect(() => {
@@ -56,7 +52,7 @@ export function ConnectingQrCode() {
       padding={['xl', 'xl', '2xl', 'xl']}
     >
       <QrCode size={qrSize} uri={wcUri} testID="qr-code" />
-      <FlexView alignItems="center" margin="m">
+      <FlexView alignItems="center" margin={['m', 'm', '3xl', 'm']}>
         <Text variant="paragraph-500">Scan this QR code with your phone</Text>
         {showCopy && (
           <Link
@@ -70,6 +66,14 @@ export function ConnectingQrCode() {
           </Link>
         )}
       </FlexView>
+      <Pressable onPress={() => Linking.openURL(ConstantsUtil.REOWN_URL)}>
+        <FlexView alignItems="center" justifyContent="center" flexDirection="row" columnGap="2xs">
+          <Text variant="small-500" color="fg-100">
+            UX by
+          </Text>
+          <Icon name="reown" color="fg-150" width={100} height={30} />
+        </FlexView>
+      </Pressable>
     </FlexView>
   );
 }