@reown/appkit-react-native 0.0.0-chore-qr-borders-20251104183806 → 0.0.0-chore-use-theme-hook-20251105184714

package/lib/commonjs/hooks/useAccount.js

@@ -65,6 +65,7 @@ function useAccount() {
     networks
   } = (0, _valtio.useSnapshot)(_appkitCoreReactNative.ConnectionsController.state);
   const allAccounts = (0, _react.useMemo)(() => {
+    if (!address) return [];
     return Array.from(connections.values()).flatMap(_connection => _connection.accounts.map(account => {
       const [namespace, chainId, plainAddress] = account.split(':');
       if (!plainAddress || !namespace || !chainId) {
@@ -80,7 +81,7 @@ function useAccount() {
         type: _connection.type
       };
     }).filter(account => account !== undefined));
-  }, [connections]);
+  }, [connections, address]);
   const activeChain = (0, _react.useMemo)(() => connection?.caipNetwork ? networks.find(network => network.caipNetworkId === connection?.caipNetwork) : undefined, [connection?.caipNetwork, networks]);
   return {
     allAccounts,

package/lib/commonjs/hooks/useAccount.js.map

@@ -1 +1 @@
-{"version":3,"names":["_appkitCoreReactNative","require","_react","_valtio","_useAppKit","useAccount","useAppKit","activeAddress","address","activeNamespace","connection","connections","networks","useSnapshot","ConnectionsController","state","allAccounts","useMemo","Array","from","values","flatMap","_connection","accounts","map","account","namespace","chainId","plainAddress","split","LogController","sendError","undefined","type","filter","activeChain","caipNetwork","find","network","caipNetworkId","CoreHelperUtil","getPlainAddress","isConnected","id","String","chain"],"sourceRoot":"../../../src","sources":["hooks/useAccount.ts"],"mappings":";;;;;;AACA,IAAAA,sBAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AARA;;AAWA;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASI,UAAUA,CAAA,EAAG;EAC3B,IAAAC,oBAAS,EAAC,CAAC,CAAC,CAAC;;EAEb,MAAM;IACJC,aAAa,EAAEC,OAAO;IACtBC,eAAe;IACfC,UAAU;IACVC,WAAW;IACXC;EACF,CAAC,GAAG,IAAAC,mBAAW,EAACC,4CAAqB,CAACC,KAAK,CAAC;EAE5C,MAAMC,WAAsB,GAAG,IAAAC,cAAO,EAAC,MAAM;IAC3C,OAAOC,KAAK,CAACC,IAAI,CAACR,WAAW,CAACS,MAAM,CAAC,CAAC,CAAC,CAACC,OAAO,CAC7CC,WAAW,IACTA,WAAW,CAACC,QAAQ,CACjBC,GAAG,CAACC,OAAO,IAAI;MACd,MAAM,CAACC,SAAS,EAAEC,OAAO,EAAEC,YAAY,CAAC,GAAGH,OAAO,CAACI,KAAK,CAAC,GAAG,CAAC;MAC7D,IAAI,CAACD,YAAY,IAAI,CAACF,SAAS,IAAI,CAACC,OAAO,EAAE;QAC3CG,oCAAa,CAACC,SAAS,CAAC,iBAAiB,EAAE,eAAe,EAAE,YAAY,EAAE;UACxEN;QACF,CAAC,CAAC;QAEF,OAAOO,SAAS;MAClB;MAEA,OAAO;QACLxB,OAAO,EAAEoB,YAAY;QACrBF,SAAS;QACTC,OAAO;QACPM,IAAI,EAAEX,WAAW,CAACW;MACpB,CAAC;IACH,CAAC,CAAC,CACDC,MAAM,CAACT,OAAO,IAAIA,OAAO,KAAKO,SAAS,CAC9C,CAAC;EACH,CAAC,EAAE,CAACrB,WAAW,CAAC,CAAC;EAEjB,MAAMwB,WAAW,GAAG,IAAAlB,cAAO,EACzB,MACEP,UAAU,EAAE0B,WAAW,GACnBxB,QAAQ,CAACyB,IAAI,CAACC,OAAO,IAAIA,OAAO,CAACC,aAAa,KAAK7B,UAAU,EAAE0B,WAAW,CAAC,GAC3EJ,SAAS,EACf,CAACtB,UAAU,EAAE0B,WAAW,EAAExB,QAAQ,CACpC,CAAC;EAED,OAAO;IACLI,WAAW;IACXR,OAAO,EAAEgC,qCAAc,CAACC,eAAe,CAACjC,OAAO,CAAC;IAChDkC,WAAW,EAAE,CAAC,CAAClC,OAAO;IACtBmB,OAAO,EAAEQ,WAAW,EAAEQ,EAAE,KAAKX,SAAS,GAAGY,MAAM,CAACT,WAAW,CAACQ,EAAE,CAAC,GAAGX,SAAS;IAC3Ea,KAAK,EAAEV,WAAwC;IAC/CT,SAAS,EAAEjB;EACb,CAAC;AACH","ignoreList":[]}
+{"version":3,"names":["_appkitCoreReactNative","require","_react","_valtio","_useAppKit","useAccount","useAppKit","activeAddress","address","activeNamespace","connection","connections","networks","useSnapshot","ConnectionsController","state","allAccounts","useMemo","Array","from","values","flatMap","_connection","accounts","map","account","namespace","chainId","plainAddress","split","LogController","sendError","undefined","type","filter","activeChain","caipNetwork","find","network","caipNetworkId","CoreHelperUtil","getPlainAddress","isConnected","id","String","chain"],"sourceRoot":"../../../src","sources":["hooks/useAccount.ts"],"mappings":";;;;;;AACA,IAAAA,sBAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AARA;;AAWA;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASI,UAAUA,CAAA,EAAG;EAC3B,IAAAC,oBAAS,EAAC,CAAC,CAAC,CAAC;;EAEb,MAAM;IACJC,aAAa,EAAEC,OAAO;IACtBC,eAAe;IACfC,UAAU;IACVC,WAAW;IACXC;EACF,CAAC,GAAG,IAAAC,mBAAW,EAACC,4CAAqB,CAACC,KAAK,CAAC;EAE5C,MAAMC,WAAsB,GAAG,IAAAC,cAAO,EAAC,MAAM;IAC3C,IAAI,CAACT,OAAO,EAAE,OAAO,EAAE;IAEvB,OAAOU,KAAK,CAACC,IAAI,CAACR,WAAW,CAACS,MAAM,CAAC,CAAC,CAAC,CAACC,OAAO,CAC7CC,WAAW,IACTA,WAAW,CAACC,QAAQ,CACjBC,GAAG,CAACC,OAAO,IAAI;MACd,MAAM,CAACC,SAAS,EAAEC,OAAO,EAAEC,YAAY,CAAC,GAAGH,OAAO,CAACI,KAAK,CAAC,GAAG,CAAC;MAC7D,IAAI,CAACD,YAAY,IAAI,CAACF,SAAS,IAAI,CAACC,OAAO,EAAE;QAC3CG,oCAAa,CAACC,SAAS,CAAC,iBAAiB,EAAE,eAAe,EAAE,YAAY,EAAE;UACxEN;QACF,CAAC,CAAC;QAEF,OAAOO,SAAS;MAClB;MAEA,OAAO;QACLxB,OAAO,EAAEoB,YAAY;QACrBF,SAAS;QACTC,OAAO;QACPM,IAAI,EAAEX,WAAW,CAACW;MACpB,CAAC;IACH,CAAC,CAAC,CACDC,MAAM,CAACT,OAAO,IAAIA,OAAO,KAAKO,SAAS,CAC9C,CAAC;EACH,CAAC,EAAE,CAACrB,WAAW,EAAEH,OAAO,CAAC,CAAC;EAE1B,MAAM2B,WAAW,GAAG,IAAAlB,cAAO,EACzB,MACEP,UAAU,EAAE0B,WAAW,GACnBxB,QAAQ,CAACyB,IAAI,CAACC,OAAO,IAAIA,OAAO,CAACC,aAAa,KAAK7B,UAAU,EAAE0B,WAAW,CAAC,GAC3EJ,SAAS,EACf,CAACtB,UAAU,EAAE0B,WAAW,EAAExB,QAAQ,CACpC,CAAC;EAED,OAAO;IACLI,WAAW;IACXR,OAAO,EAAEgC,qCAAc,CAACC,eAAe,CAACjC,OAAO,CAAC;IAChDkC,WAAW,EAAE,CAAC,CAAClC,OAAO;IACtBmB,OAAO,EAAEQ,WAAW,EAAEQ,EAAE,KAAKX,SAAS,GAAGY,MAAM,CAACT,WAAW,CAACQ,EAAE,CAAC,GAAGX,SAAS;IAC3Ea,KAAK,EAAEV,WAAwC;IAC/CT,SAAS,EAAEjB;EACb,CAAC;AACH","ignoreList":[]}

package/lib/commonjs/hooks/useAppKitTheme.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAppKitTheme = useAppKitTheme;
+var _react = require("react");
+var _valtio = require("valtio");
+var _appkitCoreReactNative = require("@reown/appkit-core-react-native");
+var _useAppKit = require("./useAppKit");
+/**
+ * Interface representing the result of the useAppKitTheme hook
+ */
+
+/**
+ * Hook to control the visual appearance of the AppKit modal
+ *
+ * @remarks
+ * This hook provides access to the theme mode and theme variables, allowing you to
+ * customize the modal's appearance. Use this hook when you need to implement dark/light
+ * mode or match the modal's appearance with your application's theme.
+ *
+ * Currently, the only supported theme variable is `accent`, which controls the primary
+ * accent color used throughout the modal interface.
+ *
+ * @returns {UseAppKitThemeReturn} An object containing:
+ *   - `themeMode`: The current theme mode ('dark' or 'light')
+ *   - `themeVariables`: The current theme variables (only 'accent' is supported)
+ *   - `setThemeMode`: Function to change the theme mode
+ *   - `setThemeVariables`: Function to update theme variables
+ *
+ * @throws {Error} If used outside of an AppKitProvider
+ *
+ * @example
+ * ```typescript
+ * import { useAppKitTheme } from '@reown/appkit-react-native';
+ *
+ * function MyComponent() {
+ *   const { themeMode, themeVariables, setThemeMode, setThemeVariables } = useAppKitTheme();
+ *
+ *   // Set theme to dark mode
+ *   setThemeMode('dark');
+ *
+ *   // Customize the accent color
+ *   setThemeVariables({
+ *     accent: '#00BB7F'
+ *   });
+ *
+ *   return (
+ *     <View>
+ *       <Text>Current theme: {themeMode}</Text>
+ *       <Text>Accent color: {themeVariables?.accent}</Text>
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+function useAppKitTheme() {
+  (0, _useAppKit.useAppKit)(); // Use the hook for checks
+  const {
+    themeMode,
+    themeVariables
+  } = (0, _valtio.useSnapshot)(_appkitCoreReactNative.ThemeController.state);
+  const stableFunctions = (0, _react.useMemo)(() => ({
+    setThemeMode: _appkitCoreReactNative.ThemeController.setThemeMode.bind(_appkitCoreReactNative.ThemeController),
+    setThemeVariables: _appkitCoreReactNative.ThemeController.setThemeVariables.bind(_appkitCoreReactNative.ThemeController)
+  }), []);
+  return {
+    themeMode,
+    themeVariables,
+    ...stableFunctions
+  };
+}
+//# sourceMappingURL=useAppKitTheme.js.map

package/lib/commonjs/hooks/useAppKitTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_valtio","_appkitCoreReactNative","_useAppKit","useAppKitTheme","useAppKit","themeMode","themeVariables","useSnapshot","ThemeController","state","stableFunctions","useMemo","setThemeMode","bind","setThemeVariables"],"sourceRoot":"../../../src","sources":["hooks/useAppKitTheme.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAEA,IAAAE,sBAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAEA;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASI,cAAcA,CAAA,EAAyB;EACrD,IAAAC,oBAAS,EAAC,CAAC,CAAC,CAAC;EACb,MAAM;IAAEC,SAAS;IAAEC;EAAe,CAAC,GAAG,IAAAC,mBAAW,EAACC,sCAAe,CAACC,KAAK,CAAC;EAExE,MAAMC,eAAe,GAAG,IAAAC,cAAO,EAC7B,OAAO;IACLC,YAAY,EAAEJ,sCAAe,CAACI,YAAY,CAACC,IAAI,CAACL,sCAAe,CAAC;IAChEM,iBAAiB,EAAEN,sCAAe,CAACM,iBAAiB,CAACD,IAAI,CAACL,sCAAe;EAC3E,CAAC,CAAC,EACF,EACF,CAAC;EAED,OAAO;IACLH,SAAS;IACTC,cAAc;IACd,GAAGI;EACL,CAAC;AACH","ignoreList":[]}

package/lib/module/hooks/useAccount.js

@@ -61,6 +61,7 @@ export function useAccount() {
     networks
   } = useSnapshot(ConnectionsController.state);
   const allAccounts = useMemo(() => {
+    if (!address) return [];
     return Array.from(connections.values()).flatMap(_connection => _connection.accounts.map(account => {
       const [namespace, chainId, plainAddress] = account.split(':');
       if (!plainAddress || !namespace || !chainId) {
@@ -76,7 +77,7 @@ export function useAccount() {
         type: _connection.type
       };
     }).filter(account => account !== undefined));
-  }, [connections]);
+  }, [connections, address]);
   const activeChain = useMemo(() => connection?.caipNetwork ? networks.find(network => network.caipNetworkId === connection?.caipNetwork) : undefined, [connection?.caipNetwork, networks]);
   return {
     allAccounts,

package/lib/module/hooks/useAccount.js.map

@@ -1 +1 @@
-{"version":3,"names":["ConnectionsController","CoreHelperUtil","LogController","useMemo","useSnapshot","useAppKit","useAccount","activeAddress","address","activeNamespace","connection","connections","networks","state","allAccounts","Array","from","values","flatMap","_connection","accounts","map","account","namespace","chainId","plainAddress","split","sendError","undefined","type","filter","activeChain","caipNetwork","find","network","caipNetworkId","getPlainAddress","isConnected","id","String","chain"],"sourceRoot":"../../../src","sources":["hooks/useAccount.ts"],"mappings":";;AAAA;AACA,SACEA,qBAAqB,EACrBC,cAAc,EACdC,aAAa,QACR,iCAAiC;AACxC,SAASC,OAAO,QAAQ,OAAO;AAC/B,SAASC,WAAW,QAAQ,QAAQ;AACpC,SAASC,SAAS,QAAQ,aAAa;;AAGvC;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAAA,EAAG;EAC3BD,SAAS,CAAC,CAAC,CAAC,CAAC;;EAEb,MAAM;IACJE,aAAa,EAAEC,OAAO;IACtBC,eAAe;IACfC,UAAU;IACVC,WAAW;IACXC;EACF,CAAC,GAAGR,WAAW,CAACJ,qBAAqB,CAACa,KAAK,CAAC;EAE5C,MAAMC,WAAsB,GAAGX,OAAO,CAAC,MAAM;IAC3C,OAAOY,KAAK,CAACC,IAAI,CAACL,WAAW,CAACM,MAAM,CAAC,CAAC,CAAC,CAACC,OAAO,CAC7CC,WAAW,IACTA,WAAW,CAACC,QAAQ,CACjBC,GAAG,CAACC,OAAO,IAAI;MACd,MAAM,CAACC,SAAS,EAAEC,OAAO,EAAEC,YAAY,CAAC,GAAGH,OAAO,CAACI,KAAK,CAAC,GAAG,CAAC;MAC7D,IAAI,CAACD,YAAY,IAAI,CAACF,SAAS,IAAI,CAACC,OAAO,EAAE;QAC3CtB,aAAa,CAACyB,SAAS,CAAC,iBAAiB,EAAE,eAAe,EAAE,YAAY,EAAE;UACxEL;QACF,CAAC,CAAC;QAEF,OAAOM,SAAS;MAClB;MAEA,OAAO;QACLpB,OAAO,EAAEiB,YAAY;QACrBF,SAAS;QACTC,OAAO;QACPK,IAAI,EAAEV,WAAW,CAACU;MACpB,CAAC;IACH,CAAC,CAAC,CACDC,MAAM,CAACR,OAAO,IAAIA,OAAO,KAAKM,SAAS,CAC9C,CAAC;EACH,CAAC,EAAE,CAACjB,WAAW,CAAC,CAAC;EAEjB,MAAMoB,WAAW,GAAG5B,OAAO,CACzB,MACEO,UAAU,EAAEsB,WAAW,GACnBpB,QAAQ,CAACqB,IAAI,CAACC,OAAO,IAAIA,OAAO,CAACC,aAAa,KAAKzB,UAAU,EAAEsB,WAAW,CAAC,GAC3EJ,SAAS,EACf,CAAClB,UAAU,EAAEsB,WAAW,EAAEpB,QAAQ,CACpC,CAAC;EAED,OAAO;IACLE,WAAW;IACXN,OAAO,EAAEP,cAAc,CAACmC,eAAe,CAAC5B,OAAO,CAAC;IAChD6B,WAAW,EAAE,CAAC,CAAC7B,OAAO;IACtBgB,OAAO,EAAEO,WAAW,EAAEO,EAAE,KAAKV,SAAS,GAAGW,MAAM,CAACR,WAAW,CAACO,EAAE,CAAC,GAAGV,SAAS;IAC3EY,KAAK,EAAET,WAAwC;IAC/CR,SAAS,EAAEd;EACb,CAAC;AACH","ignoreList":[]}
+{"version":3,"names":["ConnectionsController","CoreHelperUtil","LogController","useMemo","useSnapshot","useAppKit","useAccount","activeAddress","address","activeNamespace","connection","connections","networks","state","allAccounts","Array","from","values","flatMap","_connection","accounts","map","account","namespace","chainId","plainAddress","split","sendError","undefined","type","filter","activeChain","caipNetwork","find","network","caipNetworkId","getPlainAddress","isConnected","id","String","chain"],"sourceRoot":"../../../src","sources":["hooks/useAccount.ts"],"mappings":";;AAAA;AACA,SACEA,qBAAqB,EACrBC,cAAc,EACdC,aAAa,QACR,iCAAiC;AACxC,SAASC,OAAO,QAAQ,OAAO;AAC/B,SAASC,WAAW,QAAQ,QAAQ;AACpC,SAASC,SAAS,QAAQ,aAAa;;AAGvC;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAAA,EAAG;EAC3BD,SAAS,CAAC,CAAC,CAAC,CAAC;;EAEb,MAAM;IACJE,aAAa,EAAEC,OAAO;IACtBC,eAAe;IACfC,UAAU;IACVC,WAAW;IACXC;EACF,CAAC,GAAGR,WAAW,CAACJ,qBAAqB,CAACa,KAAK,CAAC;EAE5C,MAAMC,WAAsB,GAAGX,OAAO,CAAC,MAAM;IAC3C,IAAI,CAACK,OAAO,EAAE,OAAO,EAAE;IAEvB,OAAOO,KAAK,CAACC,IAAI,CAACL,WAAW,CAACM,MAAM,CAAC,CAAC,CAAC,CAACC,OAAO,CAC7CC,WAAW,IACTA,WAAW,CAACC,QAAQ,CACjBC,GAAG,CAACC,OAAO,IAAI;MACd,MAAM,CAACC,SAAS,EAAEC,OAAO,EAAEC,YAAY,CAAC,GAAGH,OAAO,CAACI,KAAK,CAAC,GAAG,CAAC;MAC7D,IAAI,CAACD,YAAY,IAAI,CAACF,SAAS,IAAI,CAACC,OAAO,EAAE;QAC3CtB,aAAa,CAACyB,SAAS,CAAC,iBAAiB,EAAE,eAAe,EAAE,YAAY,EAAE;UACxEL;QACF,CAAC,CAAC;QAEF,OAAOM,SAAS;MAClB;MAEA,OAAO;QACLpB,OAAO,EAAEiB,YAAY;QACrBF,SAAS;QACTC,OAAO;QACPK,IAAI,EAAEV,WAAW,CAACU;MACpB,CAAC;IACH,CAAC,CAAC,CACDC,MAAM,CAACR,OAAO,IAAIA,OAAO,KAAKM,SAAS,CAC9C,CAAC;EACH,CAAC,EAAE,CAACjB,WAAW,EAAEH,OAAO,CAAC,CAAC;EAE1B,MAAMuB,WAAW,GAAG5B,OAAO,CACzB,MACEO,UAAU,EAAEsB,WAAW,GACnBpB,QAAQ,CAACqB,IAAI,CAACC,OAAO,IAAIA,OAAO,CAACC,aAAa,KAAKzB,UAAU,EAAEsB,WAAW,CAAC,GAC3EJ,SAAS,EACf,CAAClB,UAAU,EAAEsB,WAAW,EAAEpB,QAAQ,CACpC,CAAC;EAED,OAAO;IACLE,WAAW;IACXN,OAAO,EAAEP,cAAc,CAACmC,eAAe,CAAC5B,OAAO,CAAC;IAChD6B,WAAW,EAAE,CAAC,CAAC7B,OAAO;IACtBgB,OAAO,EAAEO,WAAW,EAAEO,EAAE,KAAKV,SAAS,GAAGW,MAAM,CAACR,WAAW,CAACO,EAAE,CAAC,GAAGV,SAAS;IAC3EY,KAAK,EAAET,WAAwC;IAC/CR,SAAS,EAAEd;EACb,CAAC;AACH","ignoreList":[]}

package/lib/module/hooks/useAppKitTheme.js

@@ -0,0 +1,71 @@
+"use strict";
+
+import { useMemo } from 'react';
+import { useSnapshot } from 'valtio';
+import { ThemeController } from '@reown/appkit-core-react-native';
+import { useAppKit } from './useAppKit';
+
+/**
+ * Interface representing the result of the useAppKitTheme hook
+ */
+
+/**
+ * Hook to control the visual appearance of the AppKit modal
+ *
+ * @remarks
+ * This hook provides access to the theme mode and theme variables, allowing you to
+ * customize the modal's appearance. Use this hook when you need to implement dark/light
+ * mode or match the modal's appearance with your application's theme.
+ *
+ * Currently, the only supported theme variable is `accent`, which controls the primary
+ * accent color used throughout the modal interface.
+ *
+ * @returns {UseAppKitThemeReturn} An object containing:
+ *   - `themeMode`: The current theme mode ('dark' or 'light')
+ *   - `themeVariables`: The current theme variables (only 'accent' is supported)
+ *   - `setThemeMode`: Function to change the theme mode
+ *   - `setThemeVariables`: Function to update theme variables
+ *
+ * @throws {Error} If used outside of an AppKitProvider
+ *
+ * @example
+ * ```typescript
+ * import { useAppKitTheme } from '@reown/appkit-react-native';
+ *
+ * function MyComponent() {
+ *   const { themeMode, themeVariables, setThemeMode, setThemeVariables } = useAppKitTheme();
+ *
+ *   // Set theme to dark mode
+ *   setThemeMode('dark');
+ *
+ *   // Customize the accent color
+ *   setThemeVariables({
+ *     accent: '#00BB7F'
+ *   });
+ *
+ *   return (
+ *     <View>
+ *       <Text>Current theme: {themeMode}</Text>
+ *       <Text>Accent color: {themeVariables?.accent}</Text>
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export function useAppKitTheme() {
+  useAppKit(); // Use the hook for checks
+  const {
+    themeMode,
+    themeVariables
+  } = useSnapshot(ThemeController.state);
+  const stableFunctions = useMemo(() => ({
+    setThemeMode: ThemeController.setThemeMode.bind(ThemeController),
+    setThemeVariables: ThemeController.setThemeVariables.bind(ThemeController)
+  }), []);
+  return {
+    themeMode,
+    themeVariables,
+    ...stableFunctions
+  };
+}
+//# sourceMappingURL=useAppKitTheme.js.map

package/lib/module/hooks/useAppKitTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","useSnapshot","ThemeController","useAppKit","useAppKitTheme","themeMode","themeVariables","state","stableFunctions","setThemeMode","bind","setThemeVariables"],"sourceRoot":"../../../src","sources":["hooks/useAppKitTheme.ts"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,WAAW,QAAQ,QAAQ;AAEpC,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,SAAS,QAAQ,aAAa;;AAEvC;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAAA,EAAyB;EACrDD,SAAS,CAAC,CAAC,CAAC,CAAC;EACb,MAAM;IAAEE,SAAS;IAAEC;EAAe,CAAC,GAAGL,WAAW,CAACC,eAAe,CAACK,KAAK,CAAC;EAExE,MAAMC,eAAe,GAAGR,OAAO,CAC7B,OAAO;IACLS,YAAY,EAAEP,eAAe,CAACO,YAAY,CAACC,IAAI,CAACR,eAAe,CAAC;IAChES,iBAAiB,EAAET,eAAe,CAACS,iBAAiB,CAACD,IAAI,CAACR,eAAe;EAC3E,CAAC,CAAC,EACF,EACF,CAAC;EAED,OAAO;IACLG,SAAS;IACTC,cAAc;IACd,GAAGE;EACL,CAAC;AACH","ignoreList":[]}

package/lib/typescript/hooks/useAccount.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAccount.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAccount.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEpF;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB,4CAA4C;IAC5C,OAAO,EAAE,MAAM,CAAC;IAChB,kFAAkF;IAClF,SAAS,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,OAAO,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,UAAU;;;;;;;EAoDzB"}
+{"version":3,"file":"useAccount.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAccount.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEpF;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB,4CAA4C;IAC5C,OAAO,EAAE,MAAM,CAAC;IAChB,kFAAkF;IAClF,SAAS,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,OAAO,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,UAAU;;;;;;;EAsDzB"}

package/lib/typescript/hooks/useAppKitTheme.d.ts

@@ -0,0 +1,60 @@
+import type { ThemeMode, ThemeVariables } from '@reown/appkit-common-react-native';
+/**
+ * Interface representing the result of the useAppKitTheme hook
+ */
+interface UseAppKitThemeReturn {
+    /** The current theme mode ('dark' or 'light'), or undefined if using system default */
+    themeMode: ThemeMode | undefined;
+    /** The current theme variables, currently only supports 'accent' color */
+    themeVariables: ThemeVariables | undefined;
+    /** Function to set the theme mode */
+    setThemeMode: (themeMode: ThemeMode | undefined) => void;
+    /** Function to set theme variables */
+    setThemeVariables: (themeVariables: ThemeVariables | undefined) => void;
+}
+/**
+ * Hook to control the visual appearance of the AppKit modal
+ *
+ * @remarks
+ * This hook provides access to the theme mode and theme variables, allowing you to
+ * customize the modal's appearance. Use this hook when you need to implement dark/light
+ * mode or match the modal's appearance with your application's theme.
+ *
+ * Currently, the only supported theme variable is `accent`, which controls the primary
+ * accent color used throughout the modal interface.
+ *
+ * @returns {UseAppKitThemeReturn} An object containing:
+ *   - `themeMode`: The current theme mode ('dark' or 'light')
+ *   - `themeVariables`: The current theme variables (only 'accent' is supported)
+ *   - `setThemeMode`: Function to change the theme mode
+ *   - `setThemeVariables`: Function to update theme variables
+ *
+ * @throws {Error} If used outside of an AppKitProvider
+ *
+ * @example
+ * ```typescript
+ * import { useAppKitTheme } from '@reown/appkit-react-native';
+ *
+ * function MyComponent() {
+ *   const { themeMode, themeVariables, setThemeMode, setThemeVariables } = useAppKitTheme();
+ *
+ *   // Set theme to dark mode
+ *   setThemeMode('dark');
+ *
+ *   // Customize the accent color
+ *   setThemeVariables({
+ *     accent: '#00BB7F'
+ *   });
+ *
+ *   return (
+ *     <View>
+ *       <Text>Current theme: {themeMode}</Text>
+ *       <Text>Accent color: {themeVariables?.accent}</Text>
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export declare function useAppKitTheme(): UseAppKitThemeReturn;
+export {};
+//# sourceMappingURL=useAppKitTheme.d.ts.map

package/lib/typescript/hooks/useAppKitTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAppKitTheme.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAppKitTheme.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAInF;;GAEG;AACH,UAAU,oBAAoB;IAC5B,uFAAuF;IACvF,SAAS,EAAE,SAAS,GAAG,SAAS,CAAC;IACjC,0EAA0E;IAC1E,cAAc,EAAE,cAAc,GAAG,SAAS,CAAC;IAC3C,qCAAqC;IACrC,YAAY,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IACzD,sCAAsC;IACtC,iBAAiB,EAAE,CAAC,cAAc,EAAE,cAAc,GAAG,SAAS,KAAK,IAAI,CAAC;CACzE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wBAAgB,cAAc,IAAI,oBAAoB,CAiBrD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reown/appkit-react-native",
-  "version": "0.0.0-chore-qr-borders-20251104183806",
+  "version": "0.0.0-chore-use-theme-hook-20251105184714",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "module": "lib/module/index.js",
@@ -39,9 +39,9 @@
     "provenance": true
   },
   "dependencies": {
-    "@reown/appkit-common-react-native": "0.0.0-chore-qr-borders-20251104183806",
-    "@reown/appkit-core-react-native": "0.0.0-chore-qr-borders-20251104183806",
-    "@reown/appkit-ui-react-native": "0.0.0-chore-qr-borders-20251104183806",
+    "@reown/appkit-common-react-native": "0.0.0-chore-use-theme-hook-20251105184714",
+    "@reown/appkit-core-react-native": "0.0.0-chore-use-theme-hook-20251105184714",
+    "@reown/appkit-ui-react-native": "0.0.0-chore-use-theme-hook-20251105184714",
     "@walletconnect/universal-provider": "2.21.10",
     "valtio": "2.1.8"
   },

package/src/hooks/useAccount.ts

@@ -75,6 +75,8 @@ export function useAccount() {
   } = useSnapshot(ConnectionsController.state);
 
   const allAccounts: Account[] = useMemo(() => {
+    if (!address) return [];
+
     return Array.from(connections.values()).flatMap(
       _connection =>
         _connection.accounts
@@ -97,7 +99,7 @@ export function useAccount() {
           })
           .filter(account => account !== undefined) as Account[]
     );
-  }, [connections]);
+  }, [connections, address]);
 
   const activeChain = useMemo(
     () =>

package/src/hooks/useAppKitTheme.ts

@@ -0,0 +1,81 @@
+import { useMemo } from 'react';
+import { useSnapshot } from 'valtio';
+import type { ThemeMode, ThemeVariables } from '@reown/appkit-common-react-native';
+import { ThemeController } from '@reown/appkit-core-react-native';
+import { useAppKit } from './useAppKit';
+
+/**
+ * Interface representing the result of the useAppKitTheme hook
+ */
+interface UseAppKitThemeReturn {
+  /** The current theme mode ('dark' or 'light'), or undefined if using system default */
+  themeMode: ThemeMode | undefined;
+  /** The current theme variables, currently only supports 'accent' color */
+  themeVariables: ThemeVariables | undefined;
+  /** Function to set the theme mode */
+  setThemeMode: (themeMode: ThemeMode | undefined) => void;
+  /** Function to set theme variables */
+  setThemeVariables: (themeVariables: ThemeVariables | undefined) => void;
+}
+
+/**
+ * Hook to control the visual appearance of the AppKit modal
+ *
+ * @remarks
+ * This hook provides access to the theme mode and theme variables, allowing you to
+ * customize the modal's appearance. Use this hook when you need to implement dark/light
+ * mode or match the modal's appearance with your application's theme.
+ *
+ * Currently, the only supported theme variable is `accent`, which controls the primary
+ * accent color used throughout the modal interface.
+ *
+ * @returns {UseAppKitThemeReturn} An object containing:
+ *   - `themeMode`: The current theme mode ('dark' or 'light')
+ *   - `themeVariables`: The current theme variables (only 'accent' is supported)
+ *   - `setThemeMode`: Function to change the theme mode
+ *   - `setThemeVariables`: Function to update theme variables
+ *
+ * @throws {Error} If used outside of an AppKitProvider
+ *
+ * @example
+ * ```typescript
+ * import { useAppKitTheme } from '@reown/appkit-react-native';
+ *
+ * function MyComponent() {
+ *   const { themeMode, themeVariables, setThemeMode, setThemeVariables } = useAppKitTheme();
+ *
+ *   // Set theme to dark mode
+ *   setThemeMode('dark');
+ *
+ *   // Customize the accent color
+ *   setThemeVariables({
+ *     accent: '#00BB7F'
+ *   });
+ *
+ *   return (
+ *     <View>
+ *       <Text>Current theme: {themeMode}</Text>
+ *       <Text>Accent color: {themeVariables?.accent}</Text>
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export function useAppKitTheme(): UseAppKitThemeReturn {
+  useAppKit(); // Use the hook for checks
+  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+
+  const stableFunctions = useMemo(
+    () => ({
+      setThemeMode: ThemeController.setThemeMode.bind(ThemeController),
+      setThemeVariables: ThemeController.setThemeVariables.bind(ThemeController)
+    }),
+    []
+  );
+
+  return {
+    themeMode,
+    themeVariables,
+    ...stableFunctions
+  };
+}