@dora-cell/sdk-react 1.0.0 → 1.0.2

package/README.md

@@ -6,8 +6,9 @@ React hooks and components for the Dora Cell VoIP SDK.
 
 ✅ **React Hooks** - Easy-to-use hooks for call management  
 ✅ **Context Provider** - Simple setup with `DoraCellProvider`  
-✅ **Pre-built UI** - Includes `Dialpad` and `CallInterface` components  
-✅ **Auto state management** - Automatic call state and connection tracking
+✅ **Pre-built UI** - Includes `Dialpad`, `CallInterface`, and `CreditBalance`  
+✅ **Auto state management** - Automatic call state and connection tracking  
+✅ **DID Management** - Hooks to fetch and switch between caller IDs
 
 ## Installation
 
@@ -34,10 +35,11 @@ function App() {
     <DoraCellProvider
       config={{
         auth: {
-          type: "extension",
-          extension: "1001",
+          type: "api-token",
+          publicKey: "pk_...",
+          secretKey: "sk_...",
         },
-        debug: true,
+        environment: "production",
       }}
       autoInitialize={true}
     >
@@ -99,17 +101,21 @@ function Dashboard() {
 
 ### `Dialpad`
 
-A flexible keypad for entering numbers and initiating calls.
+A flexible keypad for entering numbers and initiating calls. It automatically fetches available Caller IDs (extensions) and allows switching between them.
+
+### `CreditBalance`
+
+A standalone component that displays the user's current credit balance and currency. It automatically refreshes whenever the SDK initializes and whenever a call ends.
 
 ```tsx
-import { Dialpad } from "@dora-cell/sdk-react";
+import { CreditBalance } from "@dora-cell/sdk-react";
 
-function DialerModal() {
+function Header() {
   return (
-    <Dialpad
-      showKeys={true}
-      onCallInitiated={(number) => console.log("Placing call to:", number)}
-    />
+    <header>
+      <h1>My App</h1>
+      <CreditBalance />
+    </header>
   );
 }
 ```
@@ -134,8 +140,26 @@ Returns the SIP registration state.
 
 - `isConnected`: `true` when registered and ready.
 - `connectionStatus`: `'disconnected' | 'connecting' | 'connected' | 'registered' | 'registrationFailed'`.
+- `extension`: The currently registered extension number.
 - `error`: Any connection error object.
 
+### `useWallet()`
+
+Returns the user's credit balance.
+
+- `balance`: Numerical balance.
+- `currency`: Currency code (e.g., `"NGN"`).
+- `isLoading`: Boolean loading state.
+- `refresh()`: Fetch the latest balance.
+
+### `useExtensions()`
+
+Returns available Caller IDs.
+
+- `extensions`: Array of available DID numbers/extensions.
+- `setExtension(ext)`: Switch to a different Caller ID.
+- `isLoading`: Boolean loading state.
+
 ## Styling
 
 The components use Tailwind CSS internally. To avoid conflicts, all styles are prefixed with `dora-`. You must import the CSS file in your main entry file (e.g., `layout.tsx` or `App.tsx`):

package/dist/index.d.mts

@@ -23,7 +23,7 @@ interface DialpadProps {
     selectedExtension?: string;
     onExtensionChange?: (ext: string) => void;
 }
-declare function Dialpad({ onCallInitiated, initialNumber, showKeys, className, availableExtensions, selectedExtension, onExtensionChange, }: DialpadProps): react_jsx_runtime.JSX.Element;
+declare function Dialpad({ onCallInitiated, initialNumber, showKeys, className, availableExtensions: providedExtensions, selectedExtension: providedSelectedExtension, onExtensionChange, }: DialpadProps): react_jsx_runtime.JSX.Element;
 
 interface DoraCellContextValue {
     sdk: DoraCell | null;
@@ -34,6 +34,7 @@ interface DoraCellContextValue {
     isMuted: boolean;
     isInitialized: boolean;
     error: Error | null;
+    extension: string | null;
     call: (phoneNumber: string, extension?: string) => Promise<void>;
     hangup: () => void;
     toggleMute: () => void;
@@ -71,6 +72,31 @@ declare function useConnectionStatus(): {
     isInitialized: boolean;
     isConnected: boolean;
     error: Error | null;
+    extension: string | null;
 };
+/**
+ * Hook to fetch wallet/credit balance
+ */
+declare function useWallet(): {
+    balance: number;
+    currency: string;
+    isLoading: boolean;
+    error: Error | null;
+    refresh: () => Promise<void>;
+};
+/**
+ * Hook for managing extensions (DID numbers)
+ */
+declare function useExtensions(): {
+    extensions: any[];
+    isLoading: boolean;
+    error: Error | null;
+    setExtension: (extension: string) => Promise<void>;
+    refresh: () => Promise<void>;
+};
+/**
+ * Credit Balance component - mirrors main app style
+ */
+declare function CreditBalance(): react_jsx_runtime.JSX.Element;
 
-export { CallInterface, Dialpad, DoraCellProvider, type DoraCellProviderProps, useCall, useConnectionStatus, useDoraCell };
+export { CallInterface, CreditBalance, Dialpad, DoraCellProvider, type DoraCellProviderProps, useCall, useConnectionStatus, useDoraCell, useExtensions, useWallet };

package/dist/index.d.ts

@@ -23,7 +23,7 @@ interface DialpadProps {
     selectedExtension?: string;
     onExtensionChange?: (ext: string) => void;
 }
-declare function Dialpad({ onCallInitiated, initialNumber, showKeys, className, availableExtensions, selectedExtension, onExtensionChange, }: DialpadProps): react_jsx_runtime.JSX.Element;
+declare function Dialpad({ onCallInitiated, initialNumber, showKeys, className, availableExtensions: providedExtensions, selectedExtension: providedSelectedExtension, onExtensionChange, }: DialpadProps): react_jsx_runtime.JSX.Element;
 
 interface DoraCellContextValue {
     sdk: DoraCell | null;
@@ -34,6 +34,7 @@ interface DoraCellContextValue {
     isMuted: boolean;
     isInitialized: boolean;
     error: Error | null;
+    extension: string | null;
     call: (phoneNumber: string, extension?: string) => Promise<void>;
     hangup: () => void;
     toggleMute: () => void;
@@ -71,6 +72,31 @@ declare function useConnectionStatus(): {
     isInitialized: boolean;
     isConnected: boolean;
     error: Error | null;
+    extension: string | null;
 };
+/**
+ * Hook to fetch wallet/credit balance
+ */
+declare function useWallet(): {
+    balance: number;
+    currency: string;
+    isLoading: boolean;
+    error: Error | null;
+    refresh: () => Promise<void>;
+};
+/**
+ * Hook for managing extensions (DID numbers)
+ */
+declare function useExtensions(): {
+    extensions: any[];
+    isLoading: boolean;
+    error: Error | null;
+    setExtension: (extension: string) => Promise<void>;
+    refresh: () => Promise<void>;
+};
+/**
+ * Credit Balance component - mirrors main app style
+ */
+declare function CreditBalance(): react_jsx_runtime.JSX.Element;
 
-export { CallInterface, Dialpad, DoraCellProvider, type DoraCellProviderProps, useCall, useConnectionStatus, useDoraCell };
+export { CallInterface, CreditBalance, Dialpad, DoraCellProvider, type DoraCellProviderProps, useCall, useConnectionStatus, useDoraCell, useExtensions, useWallet };

package/dist/index.js

@@ -101,8 +101,12 @@ var __iconNode2 = [
 ];
 var ArrowUpRight = createLucideIcon("arrow-up-right", __iconNode2);
 
+// ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.js
+var __iconNode3 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+var ChevronDown = createLucideIcon("chevron-down", __iconNode3);
+
 // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/delete.js
-var __iconNode3 = [
+var __iconNode4 = [
   [
     "path",
     {
@@ -113,19 +117,19 @@ var __iconNode3 = [
   ["path", { d: "m12 9 6 6", key: "anjzzh" }],
   ["path", { d: "m18 9-6 6", key: "1fp51s" }]
 ];
-var Delete = createLucideIcon("delete", __iconNode3);
+var Delete = createLucideIcon("delete", __iconNode4);
 
 // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/maximize.js
-var __iconNode4 = [
+var __iconNode5 = [
   ["path", { d: "M8 3H5a2 2 0 0 0-2 2v3", key: "1dcmit" }],
   ["path", { d: "M21 8V5a2 2 0 0 0-2-2h-3", key: "1e4gt3" }],
   ["path", { d: "M3 16v3a2 2 0 0 0 2 2h3", key: "wsl5sc" }],
   ["path", { d: "M16 21h3a2 2 0 0 0 2-2v-3", key: "18trek" }]
 ];
-var Maximize = createLucideIcon("maximize", __iconNode4);
+var Maximize = createLucideIcon("maximize", __iconNode5);
 
 // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/mic-off.js
-var __iconNode5 = [
+var __iconNode6 = [
   ["path", { d: "M12 19v3", key: "npa21l" }],
   ["path", { d: "M15 9.34V5a3 3 0 0 0-5.68-1.33", key: "1gzdoj" }],
   ["path", { d: "M16.95 16.95A7 7 0 0 1 5 12v-2", key: "cqa7eg" }],
@@ -133,27 +137,27 @@ var __iconNode5 = [
   ["path", { d: "m2 2 20 20", key: "1ooewy" }],
   ["path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12", key: "r2i35w" }]
 ];
-var MicOff = createLucideIcon("mic-off", __iconNode5);
+var MicOff = createLucideIcon("mic-off", __iconNode6);
 
 // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/mic.js
-var __iconNode6 = [
+var __iconNode7 = [
   ["path", { d: "M12 19v3", key: "npa21l" }],
   ["path", { d: "M19 10v2a7 7 0 0 1-14 0v-2", key: "1vc78b" }],
   ["rect", { x: "9", y: "2", width: "6", height: "13", rx: "3", key: "s6n7sd" }]
 ];
-var Mic = createLucideIcon("mic", __iconNode6);
+var Mic = createLucideIcon("mic", __iconNode7);
 
 // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/minimize-2.js
-var __iconNode7 = [
+var __iconNode8 = [
   ["path", { d: "m14 10 7-7", key: "oa77jy" }],
   ["path", { d: "M20 10h-6V4", key: "mjg0md" }],
   ["path", { d: "m3 21 7-7", key: "tjx5ai" }],
   ["path", { d: "M4 14h6v6", key: "rmj7iw" }]
 ];
-var Minimize2 = createLucideIcon("minimize-2", __iconNode7);
+var Minimize2 = createLucideIcon("minimize-2", __iconNode8);
 
 // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/phone.js
-var __iconNode8 = [
+var __iconNode9 = [
   [
     "path",
     {
@@ -162,21 +166,21 @@ var __iconNode8 = [
     }
   ]
 ];
-var Phone = createLucideIcon("phone", __iconNode8);
+var Phone = createLucideIcon("phone", __iconNode9);
 
 // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/user.js
-var __iconNode9 = [
+var __iconNode10 = [
   ["path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", key: "975kel" }],
   ["circle", { cx: "12", cy: "7", r: "4", key: "17ys0d" }]
 ];
-var User = createLucideIcon("user", __iconNode9);
+var User = createLucideIcon("user", __iconNode10);
 
 // ../../node_modules/.pnpm/lucide-react@0.555.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.js
-var __iconNode10 = [
+var __iconNode11 = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ];
-var X = createLucideIcon("x", __iconNode10);
+var X = createLucideIcon("x", __iconNode11);
 function CallInterface({
   isOpen = false,
   onOpenChange,
@@ -423,43 +427,91 @@ function Dialpad({
   initialNumber = "",
   showKeys = true,
   className = "",
-  availableExtensions = [],
-  selectedExtension,
+  availableExtensions: providedExtensions,
+  selectedExtension: providedSelectedExtension,
   onExtensionChange
 }) {
   const { call, callStatus } = useCall();
   const { isConnected } = useConnectionStatus();
+  const { extensions: fetchedExtensions, setExtension } = useExtensions();
   const [number, setNumber] = react.useState(initialNumber);
   const [keysVisible, setKeysVisible] = react.useState(showKeys);
+  const [localSelectedExt, setLocalSelectedExt] = react.useState("");
+  const extensions = providedExtensions?.length ? providedExtensions : fetchedExtensions.map((ext) => ({
+    label: ext.extension,
+    value: ext.extension
+  }));
+  const activeExtension = providedSelectedExtension || localSelectedExt || (extensions.length > 0 ? extensions[0].value : "");
+  react.useEffect(() => {
+    if (!localSelectedExt && extensions.length > 0 && !providedSelectedExtension) {
+      setLocalSelectedExt(extensions[0].value);
+    }
+  }, [extensions, providedSelectedExtension]);
   const append = (digit) => setNumber((s) => s + digit);
   const backspace = () => setNumber((s) => s.slice(0, -1));
+  const handleExtensionChange = async (ext) => {
+    setLocalSelectedExt(ext);
+    onExtensionChange?.(ext);
+    await setExtension(ext);
+  };
   const handleCall = async () => {
     if (!number || number.trim() === "") return;
     try {
-      await call(number, selectedExtension);
+      await call(number, activeExtension);
       onCallInitiated?.(number);
     } catch (e) {
       console.error("Call failed", e);
     }
   };
   const isCallDisabled = !number || number.trim() === "" || !isConnected || callStatus === "ringing" || callStatus === "ongoing" || callStatus === "connecting";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `dora-space-y-4 ${className}`, children: [
-    availableExtensions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-gap-2 dora-bg-[#F6F7F9] dora-rounded-lg dora-flex dora-items-center dora-justify-between dora-p-2 md:dora-p-2.5 dora-mb-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-text-xs md:dora-text-sm dora-text-neutral-500 dora-font-normal dora-whitespace-nowrap", children: "Caller ID" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "select",
+  const keypad_icon = /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
         {
-          className: "dora-bg-transparent dora-text-sm dora-font-medium dora-outline-none",
-          value: selectedExtension,
-          onChange: (e) => onExtensionChange?.(e.target.value),
-          children: availableExtensions.map((ext) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: ext.value, children: ext.label }, ext.value))
+          d: "M11.5333 3.2006C11.5339 3.50413 11.4444 3.801 11.2759 4.05352C11.1075 4.30605 10.8679 4.50284 10.5874 4.61891C10.3069 4.73499 9.99832 4.76512 9.70071 4.70548C9.40309 4.64584 9.12991 4.49911 8.91583 4.28393C8.77351 4.14156 8.66063 3.97254 8.58363 3.78654C8.50662 3.60054 8.46701 3.4012 8.46705 3.19989C8.46709 2.99858 8.50678 2.79925 8.58385 2.61328C8.66093 2.4273 8.77387 2.25834 8.91625 2.11602C9.05862 1.9737 9.22764 1.86081 9.41364 1.78381C9.59964 1.70681 9.79898 1.6672 10.0003 1.66723C10.2016 1.66727 10.4009 1.70696 10.5869 1.78404C10.7729 1.86111 10.9418 1.97406 11.0842 2.11643C11.3717 2.40393 11.5342 2.7931 11.5342 3.19977M14.5333 4.73227C14.7376 4.73703 14.9408 4.7009 15.131 4.62601C15.3211 4.55111 15.4944 4.43896 15.6406 4.29614C15.7868 4.15333 15.9029 3.98273 15.9822 3.79438C16.0616 3.60602 16.1024 3.40372 16.1024 3.19935C16.1024 2.99498 16.0616 2.79267 15.9822 2.60432C15.9029 2.41597 15.7868 2.24537 15.6406 2.10255C15.4944 1.95974 15.3211 1.84759 15.131 1.77269C14.9408 1.6978 14.7376 1.66167 14.5333 1.66643C14.1267 1.66643 13.7367 1.82798 13.4491 2.11554C13.1615 2.40309 13 2.7931 13 3.19977C13 3.60643 13.1615 3.99644 13.4491 4.284C13.7367 4.57155 14.1267 4.73227 14.5333 4.73227ZM7 3.2006C7.00061 3.50413 6.91102 3.801 6.7426 4.05352C6.57419 4.30605 6.33454 4.50284 6.05408 4.61891C5.77362 4.73499 5.46499 4.76512 5.16737 4.70548C4.86976 4.64584 4.59657 4.49911 4.3825 4.28393C4.24018 4.14161 4.12728 3.97265 4.05026 3.7867C3.97324 3.60075 3.93359 3.40145 3.93359 3.20018C3.93359 2.99891 3.97324 2.79961 4.05026 2.61366C4.12728 2.42771 4.24018 2.25875 4.3825 2.11643C4.52482 1.97411 4.69378 1.86122 4.87973 1.78419C5.06568 1.70717 5.26498 1.66753 5.46625 1.66753C5.66752 1.66753 5.86682 1.70717 6.05277 1.78419C6.23872 1.86122 6.40768 1.97411 6.55 2.11643C6.8375 2.40393 6.99917 2.7931 6.99917 3.19977M11.5333 7.7306C11.5352 7.93448 11.4964 8.1367 11.4192 8.32539C11.342 8.51409 11.2279 8.68548 11.0836 8.82952C10.9392 8.97357 10.7677 9.08737 10.5788 9.16426C10.39 9.24114 10.1877 9.27958 9.98381 9.2773C9.77993 9.27503 9.57856 9.2321 9.39148 9.15102C9.2044 9.06994 9.03538 8.95234 8.89433 8.80511C8.75327 8.65789 8.64301 8.484 8.57 8.29362C8.497 8.10325 8.46272 7.90022 8.46917 7.69643C8.48185 7.29562 8.65113 6.91575 8.94068 6.63833C9.23024 6.3609 9.617 6.20802 10.018 6.21249C10.419 6.21697 10.8022 6.37843 11.0855 6.66224C11.3688 6.94606 11.5296 7.32961 11.5333 7.7306ZM14.5333 9.2631C14.7376 9.26786 14.9408 9.23174 15.131 9.15684C15.3211 9.08194 15.4944 8.96979 15.6406 8.82698C15.7868 8.68416 15.9029 8.51356 15.9822 8.32521C16.0616 8.13686 16.1024 7.93455 16.1024 7.73018C16.1024 7.52581 16.0616 7.32351 15.9822 7.13515C15.9029 6.9468 15.7868 6.7762 15.6406 6.63339C15.4944 6.49057 15.3211 6.37842 15.131 6.30352C14.9408 6.22863 14.7376 6.1925 14.5333 6.19727C14.1267 6.19727 13.7367 6.35881 13.4491 6.64637C13.1615 6.93392 13 7.32393 13 7.7306C13 8.13726 13.1615 8.52727 13.4491 8.81483C13.7367 9.10239 14.1267 9.26393 14.5333 9.26393M7 7.7306C7.00021 8.03395 6.91038 8.33054 6.7419 8.58281C6.57341 8.83507 6.33385 9.03165 6.05356 9.14766C5.77326 9.26367 5.46485 9.29389 5.16737 9.23448C4.86989 9.17506 4.59673 9.0287 4.3825 8.81393C4.20461 8.63559 4.07342 8.41615 4.00054 8.17503C3.92766 7.93391 3.91534 7.67854 3.96468 7.43152C4.01401 7.1845 4.12347 6.95345 4.28337 6.75882C4.44328 6.56419 4.64869 6.41197 4.88144 6.31564C5.11419 6.21931 5.36709 6.18184 5.61777 6.20654C5.86845 6.23124 6.10918 6.31735 6.31865 6.45725C6.52812 6.59716 6.69988 6.78654 6.81872 7.00864C6.93756 7.23073 6.99982 7.4787 7 7.7306ZM11.5333 12.2623C11.5348 12.4893 11.4857 12.7138 11.3897 12.9196C11.2937 13.1253 11.1532 13.3071 10.9783 13.4519C10.8034 13.5967 10.5985 13.7007 10.3784 13.7566C10.1583 13.8124 9.9286 13.8186 9.70583 13.7748C9.42088 13.7191 9.1576 13.5836 8.94662 13.3841C8.73564 13.1847 8.58563 12.9294 8.51403 12.648C8.44244 12.3666 8.4522 12.0707 8.5422 11.7947C8.63219 11.5186 8.79871 11.2738 9.02238 11.0887C9.24606 10.9036 9.51769 10.7857 9.8057 10.7489C10.0937 10.7122 10.3862 10.7579 10.6493 10.8808C10.9123 11.0038 11.135 11.1989 11.2915 11.4434C11.448 11.688 11.5319 11.9719 11.5333 12.2623ZM11.5333 16.8006C11.5337 17.0274 11.4836 17.2515 11.3868 17.4567C11.29 17.6618 11.1488 17.8429 10.9735 17.9868C10.7981 18.1308 10.593 18.2339 10.3729 18.2889C10.1528 18.3439 9.92326 18.3493 9.70083 18.3048C9.40375 18.2453 9.13093 18.0992 8.91681 17.8849C8.70269 17.6705 8.55688 17.3975 8.49777 17.1004C8.43866 16.8032 8.46891 16.4952 8.58469 16.2152C8.70048 15.9353 8.89661 15.6959 9.14833 15.5273C9.37915 15.3731 9.64749 15.2845 9.92473 15.2708C10.202 15.2572 10.4777 15.3191 10.7225 15.4499C10.9673 15.5807 11.1721 15.7755 11.3149 16.0135C11.4577 16.2515 11.5332 16.523 11.5333 16.8006ZM16.0667 12.2623C16.0681 12.4893 16.019 12.7138 15.923 12.9196C15.827 13.1253 15.6865 13.3071 15.5116 13.4519C15.3367 13.5967 15.1318 13.7007 14.9117 13.7566C14.6917 13.8124 14.4619 13.8186 14.2392 13.7748C14.0165 13.7312 13.8062 13.6388 13.6236 13.5041C13.4409 13.3695 13.2904 13.1959 13.183 12.9961C13.0755 12.7962 13.0137 12.575 13.0021 12.3484C12.9905 12.1218 13.0294 11.8954 13.1158 11.6856C13.2509 11.3581 13.4952 11.0875 13.8072 10.9197C14.1193 10.7519 14.4797 10.6974 14.8274 10.7653C15.1751 10.8333 15.4886 11.0195 15.7145 11.2924C15.9404 11.5653 16.0648 11.908 16.0667 12.2623ZM7 12.2623C7.00227 12.5661 6.91412 12.8638 6.74675 13.1174C6.57939 13.371 6.34039 13.5691 6.06013 13.6864C5.77987 13.8038 5.47104 13.8352 5.1729 13.7766C4.87476 13.718 4.60079 13.572 4.38583 13.3573C4.20705 13.1796 4.07483 12.9606 4.00086 12.7196C3.9269 12.4787 3.91347 12.2232 3.96176 11.9759C4.01006 11.7285 4.11859 11.4968 4.27776 11.3014C4.43692 11.106 4.64181 10.9528 4.87428 10.8554C5.10676 10.758 5.35966 10.7194 5.61059 10.7431C5.86153 10.7668 6.10276 10.8519 6.31294 10.991C6.52313 11.1301 6.69578 11.3189 6.81561 11.5406C6.93545 11.7624 6.99878 12.0102 7 12.2623Z",
+          fill: "currentColor"
         }
       )
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `dora-bg-white dora-rounded-3xl ${className} dora-font-sans dora-relative dora-z-10`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex dora-items-center dora-justify-between dora-mb-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-bg-emerald-500 dora-text-white dora-px-3 dora-py-1.5 dora-rounded-lg dora-text-xs md:dora-text-sm dora-font-semibold dora-shadow-sm", children: "Dora-cell" }),
+      /* @__PURE__ */ jsxRuntime.jsx(CreditBalance, {})
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-space-y-2 md:dora-space-y-3 dora-bg-[#F6F7F9] dora-p-2 md:dora-p-2.5 dora-rounded-lg", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex dora-items-center dora-gap-2 md:dora-gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex-1 dora-min-w-0 dora-flex dora-items-center dora-bg-white dora-rounded-md dora-px-3 dora-h-10 dora-border dora-border-transparent focus-within:dora-border-green-500 dora-transition-colors", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(User, { className: "dora-text-gray-400 dora-mr-2", size: 18 }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-bg-zinc-50 dora-p-6 dora-rounded-3xl dora-border dora-border-zinc-100 dora-shadow-inner", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex dora-items-center dora-justify-between dora-mb-5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dora-text-zinc-500 dora-font-medium dora-text-sm dora-tracking-tight", children: "Caller ID" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              disabled: extensions.length === 0,
+              className: "dora-appearance-none dora-bg-white dora-border dora-border-zinc-200 dora-rounded-xl dora-px-4 dora-py-2 dora-text-sm dora-font-semibold dora-text-zinc-900 dora-min-w-[170px] dora-pr-10 dora-outline-none focus:dora-border-emerald-500 dora-transition-all dora-shadow-sm disabled:dora-opacity-50",
+              value: activeExtension,
+              onChange: (e) => handleExtensionChange(e.target.value),
+              children: extensions.length > 0 ? extensions.map((ext) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: ext.value, children: ext.label }, ext.value)) : /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Loading..." })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ChevronDown,
+            {
+              size: 18,
+              className: "dora-absolute dora-right-4 dora-top-1/2 dora-transform dora--translate-y-1/2 dora-text-zinc-500 dora-pointer-events-none"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex dora-items-center dora-gap-3 dora-mb-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-flex-1 dora-bg-white dora-border dora-border-zinc-200 dora-rounded-xl dora-flex dora-items-center dora-px-4 dora-h-12 dora-shadow-sm focus-within:dora-border-emerald-500 dora-transition-all", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(User, { size: 18, className: "dora-text-zinc-300 dora-mr-2" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -467,7 +519,7 @@ function Dialpad({
               placeholder: "Enter number",
               value: number,
               onChange: (e) => setNumber(e.target.value),
-              className: "dora-bg-transparent dora-border-none dora-outline-none dora-w-full dora-text-base dora-text-black"
+              className: "dora-bg-transparent dora-border-none dora-outline-none dora-w-full dora-text-base dora-text-zinc-900 dora-font-medium dora-placeholder-zinc-300"
             }
           )
         ] }),
@@ -476,25 +528,24 @@ function Dialpad({
           {
             disabled: isCallDisabled,
             onClick: handleCall,
-            title: "Place Call",
-            className: "dora-bg-green-500 dora-text-white hover:dora-bg-green-600 dora-rounded-lg dora-h-9 md:dora-h-10 dora-w-9 md:dora-w-11 dora-flex dora-items-center dora-justify-center disabled:dora-opacity-50 disabled:dora-cursor-not-allowed dora-transition-colors",
-            children: /* @__PURE__ */ jsxRuntime.jsx(Phone, { size: 16, fill: "currentColor" })
+            className: "dora-bg-emerald-500 dora-text-white dora-w-12 dora-h-12 dora-rounded-xl dora-flex dora-items-center dora-justify-center dora-shadow-lg dora-shadow-emerald-500/20 hover:dora-bg-emerald-600 active:dora-scale-95 dora-transition-all disabled:dora-opacity-50",
+            children: /* @__PURE__ */ jsxRuntime.jsx(Phone, { size: 20, fill: "white", className: "dora-text-white" })
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { children: keysVisible ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-pt-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-flex dora-items-center dora-gap-3 dora-mb-3", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-space-y-5", children: keysVisible ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-flex dora-mb-5", children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             onClick: () => setKeysVisible(false),
-            className: "dora-px-2 md:dora-px-2.5 dora-h-8 dora-bg-white dora-rounded-full dora-shadow dora-text-neutral-500 dora-flex dora-items-center dora-gap-1.5 md:dora-gap-2 dora-text-xs md:dora-text-sm dora-font-normal hover:dora-bg-gray-50 dora-transition-colors",
+            className: "dora-flex dora-items-center dora-gap-2 dora-px-4 dora-py-2 dora-bg-white dora-border dora-border-zinc-200 dora-rounded-full dora-text-xs dora-font-semibold dora-text-zinc-600 hover:dora-bg-zinc-50 dora-transition-colors dora-shadow-sm active:dora-scale-95",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(X, { color: "red", size: 16 }),
-              " Close keypad"
+              /* @__PURE__ */ jsxRuntime.jsx(X, { size: 16, className: "dora-text-red-500" }),
+              "Close"
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-grid dora-grid-cols-3 dora-gap-2 md:dora-gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-grid dora-grid-cols-3 dora-gap-4", children: [
           "1",
           "2",
           "3",
@@ -511,20 +562,19 @@ function Dialpad({
           "button",
           {
             onClick: () => d === "del" ? backspace() : append(d),
-            className: "dora-h-10 md:dora-h-12 dora-bg-white dora-rounded-xl dora-shadow dora-flex dora-items-center dora-justify-center dora-text-base md:dora-text-lg dora-font-medium dora-text-slate-900 hover:dora-bg-gray-50 active:dora-bg-gray-100 dora-transition-colors",
-            "aria-label": d === "del" ? "Delete" : `Dial ${d}`,
-            children: d === "del" ? /* @__PURE__ */ jsxRuntime.jsx(Delete, { size: 18 }) : d
+            className: "dora-h-12 dora-bg-white dora-rounded-xl dora-flex dora-items-center dora-justify-center dora-text-lg dora-font-semibold dora-text-zinc-900 dora-shadow-sm border dora-border-zinc-50 hover:dora-bg-zinc-50 active:dora-scale-95 dora-transition-all",
+            children: d === "del" ? /* @__PURE__ */ jsxRuntime.jsx(Delete, { size: 18, className: "dora-text-zinc-500" }) : d
           },
           d
         )) })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-pt-2 md:dora-pt-3", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dora-flex dora-justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           onClick: () => setKeysVisible(true),
-          className: "dora-rounded-full dora-bg-[#EDEEF1] dora-h-9 md:dora-h-10 dora-flex dora-justify-center dora-items-center dora-px-3 md:dora-px-4 dora-w-full dora-text-xs md:dora-text-sm hover:dora-bg-[#E3E4E8] dora-transition-colors",
+          className: "dora-flex dora-items-center dora-gap-2 dora-px-4 dora-py-2 dora-bg-white dora-border dora-border-zinc-200 dora-rounded-full dora-text-xs dora-font-semibold dora-text-zinc-500 hover:dora-bg-zinc-50 dora-transition-all active:dora-scale-95 dora-shadow-sm",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dora-mr-2", children: "\u{1F522}" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dora-text-xs md:dora-text-sm dora-text-neutral-500 dora-font-normal dora-ml-1.5", children: "Open dialer" })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dora-transform dora-scale-90", children: keypad_icon }),
+            "Open dialer"
           ]
         }
       ) }) })
@@ -545,6 +595,7 @@ function DoraCellProvider({
   const [callDuration, setCallDuration] = react.useState("00:00");
   const [isMuted, setIsMuted] = react.useState(false);
   const [error, setError] = react.useState(null);
+  const [extension, setExtension] = react.useState(null);
   const durationIntervalRef = react.useRef(null);
   react.useEffect(() => {
     if (!autoInitialize) return;
@@ -565,6 +616,9 @@ function DoraCellProvider({
     if (!sdk$1) return;
     const handleConnectionStatus = (state) => {
       setConnectionStatus(state.status);
+      if (state.extension) {
+        setExtension(state.extension);
+      }
       if (state.error) {
         setError(new Error(state.error));
       }
@@ -639,10 +693,10 @@ function DoraCellProvider({
       }
     };
   }, [callStatus, currentCall]);
-  const call = async (phoneNumber, extension) => {
+  const call = async (phoneNumber, extension2) => {
     try {
       setError(null);
-      await sdk$1.call(phoneNumber, { extension });
+      await sdk$1.call(phoneNumber, { extension: extension2 });
     } catch (err) {
       setError(err instanceof Error ? err : new Error("Failed to make call"));
       throw err;
@@ -684,7 +738,8 @@ function DoraCellProvider({
     call,
     hangup,
     toggleMute,
-    answerCall
+    answerCall,
+    extension
   };
   return /* @__PURE__ */ jsxRuntime.jsx(DoraCellContext.Provider, { value: contextValue, children });
 }
@@ -710,13 +765,106 @@ function useCall() {
   };
 }
 function useConnectionStatus() {
-  const { connectionStatus, isInitialized, error } = useDoraCell();
+  const { connectionStatus, isInitialized, error, extension } = useDoraCell();
   return {
     connectionStatus,
     isInitialized,
     isConnected: connectionStatus === "registered",
-    error
+    error,
+    extension
+  };
+}
+function useWallet() {
+  const { sdk, isInitialized } = useDoraCell();
+  const [data, setData] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const fetchData = async () => {
+    if (!sdk || !isInitialized) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const val = await sdk.getWallet();
+      setData(val);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to fetch wallet"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  react.useEffect(() => {
+    if (isInitialized) {
+      console.log("SDK: useWallet fetching data...");
+      fetchData();
+    }
+  }, [isInitialized, sdk]);
+  react.useEffect(() => {
+    if (!sdk || !isInitialized) return;
+    const handleCallEnded = () => {
+      console.log("SDK: Call ended, refreshing wallet balance in 2 seconds...");
+      setTimeout(fetchData, 2e3);
+    };
+    sdk.on("call:ended", handleCallEnded);
+    return () => {
+      sdk.off("call:ended", handleCallEnded);
+    };
+  }, [sdk, isInitialized]);
+  return {
+    balance: data?.balance ?? 0,
+    currency: data?.currency ?? "NGN",
+    isLoading,
+    error,
+    refresh: fetchData
+  };
+}
+function useExtensions() {
+  const { sdk, isInitialized } = useDoraCell();
+  const [extensions, setExtensions] = react.useState([]);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const fetchExtensions = async () => {
+    if (!sdk || !isInitialized) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await sdk.fetchExtensions();
+      setExtensions(data);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to fetch extensions"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const setExtension = async (extension) => {
+    if (!sdk) return;
+    await sdk.setExtension(extension);
   };
+  react.useEffect(() => {
+    if (isInitialized) {
+      fetchExtensions();
+    }
+  }, [isInitialized, sdk]);
+  return {
+    extensions,
+    isLoading,
+    error,
+    setExtension,
+    refresh: fetchExtensions
+  };
+}
+function CreditBalance() {
+  const { balance, currency, isLoading, error } = useWallet();
+  if (error) {
+    console.warn("SDK: CreditBalance error:", error);
+  }
+  const formatted = new Intl.NumberFormat("en-NG", {
+    style: "currency",
+    currency: currency === "NGN" ? "NGN" : currency || "NGN"
+  }).format(balance);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dora-credit-balance dora-px-4 dora-py-2 dora-bg-zinc-100 dora-border dora-border-zinc-200 dora-rounded-full dora-text-sm dora-text-zinc-600 dora-whitespace-nowrap dora-flex dora-items-center dora-shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dora-text-xs dora-text-zinc-500 dora-mr-2", children: "Credit balance:" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dora-font-bold dora-text-zinc-800", children: isLoading ? "..." : formatted })
+  ] });
 }
 /*! Bundled license information:
 
@@ -726,6 +874,7 @@ lucide-react/dist/esm/Icon.js:
 lucide-react/dist/esm/createLucideIcon.js:
 lucide-react/dist/esm/icons/arrow-down-left.js:
 lucide-react/dist/esm/icons/arrow-up-right.js:
+lucide-react/dist/esm/icons/chevron-down.js:
 lucide-react/dist/esm/icons/delete.js:
 lucide-react/dist/esm/icons/maximize.js:
 lucide-react/dist/esm/icons/mic-off.js:
@@ -744,10 +893,13 @@ lucide-react/dist/esm/lucide-react.js:
 */
 
 exports.CallInterface = CallInterface;
+exports.CreditBalance = CreditBalance;
 exports.Dialpad = Dialpad;
 exports.DoraCellProvider = DoraCellProvider;
 exports.useCall = useCall;
 exports.useConnectionStatus = useConnectionStatus;
 exports.useDoraCell = useDoraCell;
+exports.useExtensions = useExtensions;
+exports.useWallet = useWallet;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map