btc-wallet 0.5.63-beta → 0.5.64-beta

package/README.md

@@ -31,7 +31,7 @@ const selector = await setupWalletSelector({
       autoConnect?: boolean,    // optional: enable auto-connect, defaults to true
       syncLogOut?: boolean,     // optional: sync logout across tabs, defaults to true
       env?: 'mainnet' | 'testnet' | 'private_mainnet' | 'dev', // optional: defaults to NEAR network environment
-      gasStrategy?: 'auto' | 'near' | 'btc' // optional: specify gas payment strategy, defaults to 'auto'
+      gasStrategy?: 'auto' | 'near' | 'btc', // optional: specify gas payment strategy, defaults to 'auto'
                                            // 'auto': use NEAR if balance > 0.5, otherwise use BTC token
                                            // 'near': force use NEAR for gas payment
                                            // 'btc': force use BTC token for gas payment
@@ -48,6 +48,10 @@ setupWalletSelectorModal(selector, {
   showChainGroups?: boolean,    // optional: show chain group selection, defaults to true
   showWalletUIForNearAccount?: boolean, // optional: show wallet UI for regular NEAR accounts, defaults to true
   env?: 'mainnet' | 'testnet' | 'private_mainnet' | 'dev', // optional: defaults to NEAR network environment
+  draggable?: boolean,          // optional: enable button dragging, defaults to true
+  initialPosition?: { right: string; bottom: string }, // optional: initial button position, defaults to { right: '20px', bottom: '20px' }
+  buttonSize?: string,          // optional: button size, defaults to '60px'
+  mobileButtonSize?: string,    // optional: mobile button size, defaults to '40px'
 });
 
 // 3. Wrap your app with BtcWalletSelectorContextProvider

package/dist/core/setupModal.d.ts

@@ -6,6 +6,13 @@ export interface WalletSelectorModalOptions extends _ModalOptions {
     showWalletUIForNearAccount?: boolean;
     walletUrl?: string;
     env?: ENV;
+    draggable?: boolean;
+    initialPosition?: {
+        right: string;
+        bottom: string;
+    };
+    buttonSize?: string;
+    mobileButtonSize?: string;
 }
 export type WalletSelectorModal = _WalletSelectorModal;
 export declare function setupWalletSelectorModal(selector: WalletSelector, options: WalletSelectorModalOptions): _WalletSelectorModal;

package/dist/index.js

@@ -4449,11 +4449,16 @@ function uint8ArrayToHex(uint8Array) {
 
 // src/utils/initWalletButton.ts
 var storage4 = storageStore("SATOSHI_WALLET_BUTTON");
+var minimumMargin = 10;
 function setupWalletButton({
   env,
   nearWallet,
   btcWallet,
-  walletUrl
+  walletUrl,
+  draggable = true,
+  initialPosition,
+  buttonSize,
+  mobileButtonSize
 }) {
   if (document.getElementById("satoshi-wallet-button")) {
     return;
@@ -4477,14 +4482,22 @@ function setupWalletButton({
   const button = createFloatingButtonWithIframe({
     openImageUrl,
     closeImageUrl,
-    iframe
+    iframe,
+    draggable,
+    initialPosition,
+    buttonSize,
+    mobileButtonSize
   });
   setupButtonClickHandler(button, iframe, nearWallet, btcWallet);
 }
 function createFloatingButtonWithIframe({
   openImageUrl,
   closeImageUrl,
-  iframe
+  iframe,
+  draggable,
+  initialPosition,
+  buttonSize,
+  mobileButtonSize
 }) {
   const button = document.createElement("img");
   button.id = "satoshi-wallet-button";
@@ -4493,32 +4506,49 @@ function createFloatingButtonWithIframe({
   iframe.style.display = isIframeVisible ? "block" : "none";
   const windowWidth = window.innerWidth;
   const windowHeight = window.innerHeight;
-  const savedPosition = (storage4 == null ? void 0 : storage4.get("position")) || {
+  const savedPosition = storage4 == null ? void 0 : storage4.get("position");
+  const currentInitialPosition = initialPosition || savedPosition || {
     right: "20px",
     bottom: "20px"
   };
-  const right = Math.min(Math.max(20, parseInt(savedPosition.right)), windowWidth - 80);
-  const bottom = Math.min(Math.max(20, parseInt(savedPosition.bottom)), windowHeight - 80);
+  const tempButtonSize = buttonSize || "60px";
+  const tempMobileButtonSize = mobileButtonSize || buttonSize || "40px";
+  const actualButtonSize = isMobile() ? parseInt(tempMobileButtonSize) : parseInt(tempButtonSize);
+  const right = Math.min(
+    Math.max(minimumMargin, parseInt(currentInitialPosition.right)),
+    windowWidth - actualButtonSize - minimumMargin
+  );
+  const bottom = Math.min(
+    Math.max(minimumMargin, parseInt(currentInitialPosition.bottom)),
+    windowHeight - actualButtonSize - minimumMargin
+  );
   Object.assign(button.style, {
     position: "fixed",
     bottom: `${bottom}px`,
     right: `${right}px`,
     zIndex: "100000",
-    width: "60px",
-    height: "60px",
-    cursor: "grab",
+    width: buttonSize || "60px",
+    height: buttonSize || "60px",
+    cursor: draggable ? "grab" : "pointer",
     transition: "transform 0.15s ease",
     userSelect: "none",
     touchAction: "none"
   });
   if (isMobile()) {
     Object.assign(button.style, {
-      width: "40px",
-      height: "40px"
+      width: mobileButtonSize || buttonSize || "40px",
+      height: mobileButtonSize || buttonSize || "40px"
     });
   }
   document.body.appendChild(button);
-  updateIframePosition(iframe, right, bottom, windowWidth, windowHeight);
+  updateIframePosition(
+    iframe,
+    right,
+    bottom,
+    windowWidth,
+    windowHeight,
+    parseInt(button.style.width)
+  );
   let isDragging = false;
   let startX = 0;
   let startY = 0;
@@ -4526,6 +4556,8 @@ function createFloatingButtonWithIframe({
   let initialBottom = 0;
   let dragStartTime = 0;
   function startDrag(clientX, clientY) {
+    if (!draggable)
+      return;
     isDragging = true;
     startX = clientX;
     startY = clientY;
@@ -4554,7 +4586,7 @@ function createFloatingButtonWithIframe({
   button.addEventListener(
     "click",
     (e) => {
-      if (!isDragging) {
+      if (!isDragging || !draggable) {
         toggleWallet();
       }
       e.preventDefault();
@@ -4562,107 +4594,117 @@ function createFloatingButtonWithIframe({
     },
     { capture: true }
   );
-  button.addEventListener(
-    "mousedown",
-    (e) => {
-      startDrag(e.clientX, e.clientY);
-      e.preventDefault();
-      e.stopPropagation();
-    },
-    { capture: true }
-  );
-  button.addEventListener(
-    "touchstart",
-    (e) => {
-      if (e.touches.length === 1) {
-        const touch = e.touches[0];
-        startDrag(touch.clientX, touch.clientY);
+  if (draggable) {
+    button.addEventListener(
+      "mousedown",
+      (e) => {
+        startDrag(e.clientX, e.clientY);
         e.preventDefault();
         e.stopPropagation();
-      }
-    },
-    { capture: true }
-  );
-  document.addEventListener(
-    "mousemove",
-    (e) => {
-      if (!isDragging)
-        return;
-      moveButton(e.clientX, e.clientY);
-      e.preventDefault();
-    },
-    { capture: true }
-  );
-  document.addEventListener(
-    "touchmove",
-    (e) => {
-      if (!isDragging || e.touches.length !== 1)
-        return;
-      const touch = e.touches[0];
-      moveButton(touch.clientX, touch.clientY);
-      e.preventDefault();
-    },
-    { capture: true }
-  );
+      },
+      { capture: true }
+    );
+    button.addEventListener(
+      "touchstart",
+      (e) => {
+        if (e.touches.length === 1) {
+          const touch = e.touches[0];
+          startDrag(touch.clientX, touch.clientY);
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      },
+      { capture: true }
+    );
+    document.addEventListener(
+      "mousemove",
+      (e) => {
+        if (!isDragging)
+          return;
+        moveButton(e.clientX, e.clientY);
+        e.preventDefault();
+      },
+      { capture: true }
+    );
+    document.addEventListener(
+      "touchmove",
+      (e) => {
+        if (!isDragging || e.touches.length !== 1)
+          return;
+        const touch = e.touches[0];
+        moveButton(touch.clientX, touch.clientY);
+        e.preventDefault();
+      },
+      { capture: true }
+    );
+    document.addEventListener(
+      "mouseup",
+      (e) => {
+        if (isDragging) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        endDrag();
+      },
+      { capture: true }
+    );
+    document.addEventListener(
+      "touchend",
+      (e) => {
+        if (isDragging) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        endDrag();
+        const dragEndTime = Date.now();
+        const dragDuration = dragEndTime - dragStartTime;
+        if (dragDuration < 200 && Math.abs(parseInt(button.style.right) - initialRight) < 5 && Math.abs(parseInt(button.style.bottom) - initialBottom) < 5) {
+          toggleWallet();
+        }
+      },
+      { capture: true }
+    );
+    document.addEventListener(
+      "touchcancel",
+      () => {
+        endDrag();
+      },
+      { capture: true }
+    );
+  }
   function moveButton(clientX, clientY) {
     const deltaX = startX - clientX;
     const deltaY = startY - clientY;
     let newRight = initialRight + deltaX;
     let newBottom = initialBottom + deltaY;
-    newRight = Math.min(Math.max(20, newRight), windowWidth - 80);
-    newBottom = Math.min(Math.max(20, newBottom), windowHeight - 80);
-    const snapThreshold = 20;
-    const buttonLeft = windowWidth - newRight - 60;
+    const currentButtonSize = parseInt(button.style.width);
+    newRight = Math.min(
+      Math.max(minimumMargin, newRight),
+      windowWidth - currentButtonSize - minimumMargin
+    );
+    newBottom = Math.min(
+      Math.max(minimumMargin, newBottom),
+      windowHeight - currentButtonSize - minimumMargin
+    );
+    const snapThreshold = minimumMargin;
+    const buttonLeft = windowWidth - newRight - currentButtonSize;
     if (buttonLeft < snapThreshold) {
-      newRight = windowWidth - 80;
-    } else if (buttonLeft > windowWidth - snapThreshold - 60) {
-      newRight = 20;
+      newRight = windowWidth - currentButtonSize - minimumMargin;
+    } else if (newRight < snapThreshold) {
+      newRight = minimumMargin;
     }
-    if (newBottom < snapThreshold) {
-      newBottom = 20;
-    } else if (newBottom > windowHeight - snapThreshold - 60) {
-      newBottom = windowHeight - 80;
+    const buttonTop = windowHeight - newBottom - currentButtonSize;
+    if (buttonTop < snapThreshold) {
+      newBottom = windowHeight - currentButtonSize - minimumMargin;
+    } else if (newBottom < snapThreshold) {
+      newBottom = minimumMargin;
     }
     button.style.right = `${newRight}px`;
     button.style.bottom = `${newBottom}px`;
-    updateIframePosition(iframe, newRight, newBottom, windowWidth, windowHeight);
+    updateIframePosition(iframe, newRight, newBottom, windowWidth, windowHeight, currentButtonSize);
   }
-  document.addEventListener(
-    "mouseup",
-    (e) => {
-      if (isDragging) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-      endDrag();
-    },
-    { capture: true }
-  );
-  document.addEventListener(
-    "touchend",
-    (e) => {
-      if (isDragging) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-      endDrag();
-      const dragEndTime = Date.now();
-      const dragDuration = dragEndTime - dragStartTime;
-      if (dragDuration < 200 && Math.abs(parseInt(button.style.right) - initialRight) < 5 && Math.abs(parseInt(button.style.bottom) - initialBottom) < 5) {
-        toggleWallet();
-      }
-    },
-    { capture: true }
-  );
-  document.addEventListener(
-    "touchcancel",
-    () => {
-      endDrag();
-    },
-    { capture: true }
-  );
   function endDrag() {
-    if (!isDragging)
+    if (!isDragging || !draggable)
       return;
     isDragging = false;
     button.style.cursor = "grab";
@@ -4672,8 +4714,6 @@ function createFloatingButtonWithIframe({
       bottom: button.style.bottom
     });
   }
-  const handleButtonClick = () => {
-  };
   button.onclick = null;
   return button;
 }
@@ -4766,16 +4806,16 @@ function removeWalletButton() {
   const iframe = document.getElementById("satoshi-wallet-iframe");
   iframe == null ? void 0 : iframe.remove();
 }
-function updateIframePosition(iframe, buttonRight, buttonBottom, windowWidth, windowHeight) {
+function updateIframePosition(iframe, buttonRight, buttonBottom, windowWidth, windowHeight, buttonSize) {
   const iframeWidth = parseInt(iframe.style.width);
   const iframeHeight = parseInt(iframe.style.height);
   let iframeRight = buttonRight;
-  let iframeBottom = buttonBottom + 70;
-  if (iframeRight + iframeWidth > windowWidth - 20) {
-    iframeRight = Math.max(20, windowWidth - iframeWidth - 20);
+  let iframeBottom = buttonBottom + buttonSize + 10;
+  if (iframeRight + iframeWidth > windowWidth - minimumMargin) {
+    iframeRight = Math.max(minimumMargin, windowWidth - iframeWidth - minimumMargin);
   }
-  if (iframeBottom + iframeHeight > windowHeight - 20) {
-    iframeBottom = Math.max(20, buttonBottom - iframeHeight - 10);
+  if (iframeBottom + iframeHeight > windowHeight - minimumMargin) {
+    iframeBottom = Math.max(minimumMargin, buttonBottom - iframeHeight - 10);
   }
   iframe.style.right = `${iframeRight}px`;
   iframe.style.bottom = `${iframeBottom}px`;
@@ -5123,7 +5163,11 @@ function setupWalletSelectorModal(selector, options) {
     showChainGroups = true,
     showWalletUIForNearAccount = true,
     env = "mainnet",
-    walletUrl
+    walletUrl,
+    draggable = true,
+    initialPosition = { right: "20px", bottom: "20px" },
+    buttonSize = "60px",
+    mobileButtonSize = "40px"
   } = options;
   subscription == null ? void 0 : subscription.unsubscribe();
   const state = selector.store.getState();
@@ -5135,7 +5179,15 @@ function setupWalletSelectorModal(selector, options) {
       removeWalletButton();
     if (showWalletUIForNearAccount && walletId !== "btc-wallet") {
       selector.wallet().then((wallet) => {
-        setupWalletButton({ env, nearWallet: wallet, walletUrl });
+        setupWalletButton({
+          env,
+          nearWallet: wallet,
+          walletUrl,
+          draggable,
+          initialPosition,
+          buttonSize,
+          mobileButtonSize
+        });
       });
     }
   });
@@ -5227,7 +5279,7 @@ function getGroup(state) {
 
 // src/index.ts
 var getVersion = () => {
-  return "0.5.63-beta";
+  return "0.5.64-beta";
 };
 if (typeof window !== "undefined") {
   window.__BTC_WALLET_VERSION = getVersion();