@nibgate/sdk 0.2.37 → 0.2.39

package/dist/nibgate.js

@@ -27551,7 +27551,11 @@ ${prettyStateOverride(stateOverride)}`;
       });
       document.body.appendChild(gwOverlay);
       document.addEventListener("keydown", onDepKey);
-      Promise.resolve().then(() => (init_default_ui(), default_ui_exports)).then((m) => m.renderDefaultGatewayWalletUI(modal, options.gatewayOptions || {})).catch(() => {
+      Promise.resolve().then(() => (init_default_ui(), default_ui_exports)).then((m) => m.renderDefaultGatewayWalletUI(modal, {
+        address: ctrl.getWalletAddress(),
+        gatewayBalanceUrl: options.gatewayBalanceUrl,
+        ...options.gatewayOptions || {}
+      })).catch(() => {
       });
     }
     function onDepKey(e) {
@@ -27745,9 +27749,10 @@ ${prettyStateOverride(stateOverride)}`;
     <div style="display:flex;gap:12px;margin-bottom:20px">
       <div data-gw-wallet-card style="flex:1;background:${theme.bg};border:1px solid ${theme.border};border-radius:12px;padding:16px">
         <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
-          <div style="font-size:12px;font-weight:600;color:${theme.muted};letter-spacing:.02em">Wallet</div>
-          <button data-gw-connect style="font-size:12px;font-weight:600;cursor:pointer;border:1px solid ${theme.accent};background:transparent;color:${theme.accent};border-radius:8px;padding:4px 12px;font-family:inherit">Connect</button>
+          <div></div>
+          <span data-gw-connect-label style="font-size:12px;font-weight:600;color:${theme.accent}">Connected</span>
         </div>
+        <div data-gw-wallet-addr class="nui-mono" style="font-size:13px;color:${theme.muted};margin-bottom:4px"></div>
         <div data-gw-wallet-balance class="nui-mono" style="font-size:24px;font-weight:700;color:${theme.fg}">\u2014</div>
       </div>
       <div style="flex:1;background:${theme.bg};border:1px solid ${theme.border};border-radius:12px;padding:16px">
@@ -27764,6 +27769,12 @@ ${prettyStateOverride(stateOverride)}`;
     (typeof container === "string" ? document.querySelector(container) : container)?.appendChild(wrap3);
     const formEl = wrap3.querySelector("[data-gw-form]");
     const tabs = wrap3.querySelectorAll("[data-tab]");
+    const walletAddrEl = wrap3.querySelector("[data-gw-wallet-addr]");
+    const walletBalEl = wrap3.querySelector("[data-gw-wallet-balance]");
+    const gwBalEl = wrap3.querySelector("[data-gw-balance]");
+    const ARC_RPC = "https://arc-testnet.drpc.org";
+    const USDC = "0x3600000000000000000000000000000000000000";
+    const BALANCE_OF = "0x70a08231";
     function select(btns, t) {
       btns.forEach((b) => {
         const on = b.dataset.tab === t;
@@ -27771,6 +27782,69 @@ ${prettyStateOverride(stateOverride)}`;
         b.style.borderBottomColor = on ? theme.accent : "transparent";
       });
     }
+    const GATEWAY = "0x0077777d7EBA4688BDeF3E311b846F25870A19B9";
+    const SEL_APPROVE = "0x095ea7b3";
+    const SEL_DEPOSIT = "0x47e7ef24";
+    function parse6(v) {
+      const [w = "0", f = ""] = String(v).split(".");
+      return BigInt(w + f.padEnd(6, "0").slice(0, 6));
+    }
+    function addr32(a) {
+      return "000000000000000000000000" + a.slice(2);
+    }
+    function setTx(msg, ok) {
+      const el2 = formEl.querySelector("[data-gw-tx]");
+      if (!el2) return;
+      el2.style.display = "block";
+      el2.style.color = ok ? theme.accent : "#dc2626";
+      el2.textContent = msg;
+    }
+    async function doDeposit() {
+      if (!window.ethereum) {
+        setTx("No wallet found");
+        return;
+      }
+      const input = formEl.querySelector("[data-gw-deposit-amount]");
+      const amt = input?.value;
+      if (!amt || Number(amt) <= 0) {
+        setTx("Enter an amount");
+        return;
+      }
+      const btn = formEl.querySelector("[data-gw-deposit]");
+      try {
+        btn.disabled = true;
+        btn.textContent = "Approving\u2026";
+        const accts = await window.ethereum.request({ method: "eth_accounts" });
+        const addr = accts?.[0];
+        if (!addr) {
+          setTx("Connect wallet");
+          btn.disabled = false;
+          btn.textContent = "Deposit";
+          return;
+        }
+        const amount = parse6(amt).toString(16);
+        const approveTx = await window.ethereum.request({
+          method: "eth_sendTransaction",
+          params: [{ from: addr, to: USDC, data: SEL_APPROVE + addr32(GATEWAY) + amount.padStart(64, "0") }]
+        });
+        setTx("Approved: " + approveTx.slice(0, 10) + "\u2026", true);
+        btn.textContent = "Depositing\u2026";
+        const depositTx = await window.ethereum.request({
+          method: "eth_sendTransaction",
+          params: [{ from: addr, to: GATEWAY, data: SEL_DEPOSIT + addr32(USDC) + amount.padStart(64, "0") }]
+        });
+        setTx("Deposited: " + depositTx.slice(0, 10) + "\u2026", true);
+        updateWallet();
+        btn.textContent = "Deposit";
+      } catch (e) {
+        setTx(e?.message || "Deposit failed");
+      }
+      btn.disabled = false;
+      btn.textContent = "Deposit";
+    }
+    async function doWithdraw() {
+      setTx("Withdraw via admin dashboard", false);
+    }
     function render(t) {
       tab = t;
       select(tabs, t);
@@ -27781,6 +27855,7 @@ ${prettyStateOverride(stateOverride)}`;
         <button type="button" data-gw-deposit class="nui-btn nui-btn-primary" style="width:100%;padding:16px 28px;font-size:20px">Deposit</button>
         <div data-gw-tx class="nui-mono" style="font-size:12px;color:${theme.muted};word-break:break-all;margin-top:12px;display:none"></div>
       `;
+        formEl.querySelector("[data-gw-deposit]")?.addEventListener("click", doDeposit);
       } else {
         formEl.innerHTML = `
         <label class="nui-label">Amount (USDC)</label>
@@ -27788,10 +27863,67 @@ ${prettyStateOverride(stateOverride)}`;
         <button type="button" data-gw-withdraw class="nui-btn nui-btn-primary" style="width:100%;padding:16px 28px;font-size:20px">Withdraw to your wallet</button>
         <div data-gw-tx class="nui-mono" style="font-size:12px;color:${theme.muted};word-break:break-all;margin-top:12px;display:none"></div>
       `;
+        formEl.querySelector("[data-gw-withdraw]")?.addEventListener("click", doWithdraw);
+      }
+    }
+    function shortAddress(a) {
+      return a ? a.slice(0, 6) + "..." + a.slice(-4) : "";
+    }
+    async function updateWallet() {
+      if (!window.ethereum) return;
+      try {
+        const accts = await window.ethereum.request({ method: "eth_accounts" });
+        const addr = Array.isArray(accts) && accts[0] ? accts[0] : null;
+        if (addr) {
+          walletAddrEl.textContent = shortAddress(addr);
+          fetchWalletUsdc(addr);
+          fetchGwBal(addr);
+        }
+      } catch {
+      }
+    }
+    async function fetchWalletUsdc(addr) {
+      try {
+        const r = await fetch(ARC_RPC, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            jsonrpc: "2.0",
+            method: "eth_call",
+            params: [{ to: USDC, data: BALANCE_OF + addr.slice(2).padStart(64, "0") }, "latest"],
+            id: 1
+          })
+        });
+        const d = await r.json();
+        const bal = d.result ? parseInt(d.result, 16) / 1e6 : 0;
+        walletBalEl.textContent = bal.toFixed(2) + " USDC";
+      } catch {
+        walletBalEl.textContent = "\u2014";
+      }
+    }
+    async function fetchGwBal(addr) {
+      if (!options.gatewayBalanceUrl) {
+        gwBalEl.textContent = "\u2014";
+        return;
       }
+      try {
+        const r = await fetch(options.gatewayBalanceUrl, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ address: addr })
+        });
+        const data = await r.json();
+        gwBalEl.textContent = data?.balance || "0.00 USDC";
+      } catch {
+        gwBalEl.textContent = "\u2014";
+      }
+    }
+    if (window.ethereum) {
+      window.ethereum.on("accountsChanged", updateWallet);
     }
     render("deposit");
     tabs.forEach((b) => b.addEventListener("click", () => render(b.dataset.tab)));
+    setTimeout(updateWallet, 100);
     return { element: wrap3, destroy: () => wrap3.remove(), switchTab: render };
   }
   var SID, theme, css;