@swype-org/react-sdk 0.1.189 → 0.1.190

package/dist/index.cjs

@@ -3859,6 +3859,22 @@ function DepositScreen({
 }) {
   const { tokens } = useSwypeConfig();
   const amount = initialAmount;
+  const [accountPickerOpen, setAccountPickerOpen] = react.useState(false);
+  const pickerRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!accountPickerOpen) return;
+    const handleClick = (e) => {
+      if (pickerRef.current && !pickerRef.current.contains(e.target)) {
+        setAccountPickerOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [accountPickerOpen]);
+  const selectedAccount = accounts?.find((a) => a.id === selectedAccountId);
+  const selectedProviderName = selectedAccount?.name ?? "Wallet";
+  const selectedProviderLogo = KNOWN_LOGOS[selectedProviderName.toLowerCase()];
+  const hasMultipleAccounts = accounts != null && accounts.length > 1;
   const isLowBalance = availableBalance < MIN_DEPOSIT;
   const exceedsLimit = remainingLimit != null && amount > remainingLimit && !isLowBalance;
   const canDeposit = amount >= MIN_DEPOSIT && !exceedsLimit && !isLowBalance && !processing;
@@ -3924,94 +3940,116 @@ function DepositScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: depositCardStyle(tokens), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: depositLabelStyle(tokens.textMuted), children: "Depositing" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountRowStyle2, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountValueStyle(tokens.text), children: [
-              "$",
-              amount.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 2 })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: pickerRef, style: depositCardWrapStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: depositCardStyle(tokens), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: depositLabelStyle(tokens.textMuted), children: "Depositing" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountRowStyle2, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountValueStyle(tokens.text), children: [
+                "$",
+                amount.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 2 })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: onSelectToken,
+                  style: tokenIconButtonStyle2(!!onSelectToken),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenIconWrapStyle2, children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "18", r: "18", fill: "#2DB84B" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("text", { x: "18", y: "23", textAnchor: "middle", fontSize: "18", fill: "#fff", fontWeight: "700", children: "$" })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: checkBadgeStyle2, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "8", fill: "#2775CA" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 8l2 2 4-4", stroke: "#fff", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.5 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6", stroke: tokens.textMuted, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  ]
+                }
+              )
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
                 type: "button",
-                onClick: onSelectToken,
-                style: tokenIconButtonStyle2(!!onSelectToken),
+                onClick: hasMultipleAccounts ? () => setAccountPickerOpen(!accountPickerOpen) : void 0,
+                style: walletBalanceRowStyle(hasMultipleAccounts),
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenIconWrapStyle2, children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "18", r: "18", fill: "#2DB84B" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("text", { x: "18", y: "23", textAnchor: "middle", fontSize: "18", fill: "#fff", fontWeight: "700", children: "$" })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: checkBadgeStyle2, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "8", fill: "#2775CA" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 8l2 2 4-4", stroke: "#fff", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" })
-                    ] })
+                  selectedProviderLogo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: selectedProviderLogo, alt: selectedProviderName, style: providerLogoStyle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: providerFallbackStyle(tokens.textMuted), children: selectedProviderName.charAt(0) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { style: walletBalanceStyle(tokens.text), children: [
+                    "$",
+                    availableBalance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.5 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6", stroke: tokens.textMuted, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  hasMultipleAccounts && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.4 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 10l5-5 5 5M7 14l5 5 5-5", stroke: tokens.textMuted, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
                 ]
               }
             )
-          ] })
-        ] }),
-        accounts && accounts.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: accountSectionStyle, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: accountSectionLabelStyle(tokens.textMuted), children: "Choose account" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: accountListStyle(tokens), children: [
-            accounts.map((account) => {
-              const preferredWallet = getPreferredDepositWallet(account, amount);
-              const active = hasActiveDepositWallet(account);
-              const isSelected = account.id === selectedAccountId;
-              const walletAddress = preferredWallet ? getWalletAddress(preferredWallet) : null;
-              const truncatedAddress = walletAddress ? `${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)}` : null;
-              const accountBalance = account.wallets.reduce(
-                (sum, w) => sum + w.balance.available.amount,
-                0
-              );
-              const providerLogo = KNOWN_LOGOS[account.name.toLowerCase()];
-              return /* @__PURE__ */ jsxRuntime.jsxs(
+          ] }),
+          accountPickerOpen && accounts && accounts.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: accountDropdownOuterStyle(tokens), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: accountDropdownLabelStyle(tokens.textMuted), children: "Choose account" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: accountDropdownInnerStyle(tokens), children: [
+              accounts.map((account) => {
+                const preferredWallet = getPreferredDepositWallet(account, amount);
+                const active = hasActiveDepositWallet(account);
+                const isSelected = account.id === selectedAccountId;
+                const walletAddress = preferredWallet ? getWalletAddress(preferredWallet) : null;
+                const truncatedAddress = walletAddress ? `${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)}` : null;
+                const accountBalance = account.wallets.reduce(
+                  (sum, w) => sum + w.balance.available.amount,
+                  0
+                );
+                const providerLogo = KNOWN_LOGOS[account.name.toLowerCase()];
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      if (active) {
+                        onSelectAccount?.(account.id);
+                      } else {
+                        onAuthorizeAccount?.(account.id);
+                      }
+                      setAccountPickerOpen(false);
+                    },
+                    style: accountRowStyle(tokens, isSelected),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: accountRowLeftStyle, children: [
+                        providerLogo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: providerLogo, alt: account.name, style: accountLogoStyle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: accountFallbackIconStyle(tokens.textMuted), children: account.name.charAt(0) }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: accountInfoStyle, children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { style: accountAddressStyle(tokens.text), children: truncatedAddress ?? account.nickname ?? account.name }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: accountBalanceTextStyle(tokens.textMuted), children: [
+                            "$",
+                            accountBalance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+                          ] })
+                        ] })
+                      ] }),
+                      isSelected ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "11", fill: tokens.success }),
+                        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 11l3 3 5-5", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+                      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: radioEmptyStyle(tokens.border) })
+                    ]
+                  },
+                  account.id
+                );
+              }),
+              onAddProvider && /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
                   type: "button",
                   onClick: () => {
-                    if (active) {
-                      onSelectAccount?.(account.id);
-                    } else {
-                      onAuthorizeAccount?.(account.id);
-                    }
+                    onAddProvider();
+                    setAccountPickerOpen(false);
                   },
-                  style: accountRowStyle(tokens),
+                  style: addAccountBtnStyle(tokens),
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: accountRowLeftStyle, children: [
-                      providerLogo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: providerLogo, alt: account.name, style: accountLogoStyle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: accountFallbackIconStyle(tokens.textMuted), children: account.name.charAt(0) }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: accountInfoStyle, children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { style: accountAddressStyle(tokens.text), children: truncatedAddress ?? account.nickname ?? account.name }),
-                        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: accountBalanceTextStyle(tokens.textMuted), children: [
-                          "$",
-                          accountBalance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
-                        ] })
-                      ] })
-                    ] }),
-                    isSelected ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "11", fill: tokens.success }),
-                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 11l3 3 5-5", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
-                    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: radioEmptyStyle(tokens.border) })
+                    /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }) }),
+                    "Add Account"
                   ]
-                },
-                account.id
-              );
-            }),
-            onAddProvider && /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: onAddProvider,
-                style: addAccountBtnStyle(tokens),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }) }),
-                  "Add Account"
-                ]
-              }
-            )
+                }
+              )
+            ] })
           ] })
         ] }),
         remainingLimit != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: spendingLimitStyle(tokens.textMuted), children: [
@@ -4027,12 +4065,15 @@ function DepositScreen({
     }
   );
 }
+var depositCardWrapStyle = {
+  position: "relative",
+  marginBottom: 20
+};
 var depositCardStyle = (tokens) => ({
   background: tokens.bgInput,
   border: `1px solid ${tokens.border}`,
   borderRadius: tokens.radiusLg,
-  padding: "16px 20px",
-  marginBottom: 20
+  padding: "16px 20px"
 });
 var depositLabelStyle = (color) => ({
   fontSize: "0.75rem",
@@ -4072,16 +4113,60 @@ var checkBadgeStyle2 = {
   bottom: -1,
   right: -3
 };
-var accountSectionStyle = {
-  marginBottom: 20
+var walletBalanceRowStyle = (clickable) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  background: "transparent",
+  border: "none",
+  padding: 0,
+  cursor: clickable ? "pointer" : "default",
+  fontFamily: "inherit",
+  outline: "none"
+});
+var providerLogoStyle = {
+  width: 18,
+  height: 18,
+  borderRadius: "50%",
+  objectFit: "contain"
 };
-var accountSectionLabelStyle = (color) => ({
+var providerFallbackStyle = (color) => ({
+  width: 18,
+  height: 18,
+  borderRadius: "50%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: "0.65rem",
+  fontWeight: 700,
+  color,
+  flexShrink: 0
+});
+var walletBalanceStyle = (color) => ({
+  fontSize: "0.9rem",
+  fontWeight: 600,
+  color
+});
+var accountDropdownOuterStyle = (tokens) => ({
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  right: 0,
+  marginTop: 4,
+  background: tokens.bgCard,
+  border: `1px solid ${tokens.border}`,
+  borderRadius: tokens.radiusLg,
+  boxShadow: tokens.shadowLg,
+  zIndex: 50,
+  padding: "12px 14px 14px"
+});
+var accountDropdownLabelStyle = (color) => ({
   fontSize: "0.78rem",
   fontWeight: 500,
   color,
   marginBottom: 8
 });
-var accountListStyle = (tokens) => ({
+var accountDropdownInnerStyle = (tokens) => ({
   background: tokens.bgInput,
   border: `1px solid ${tokens.border}`,
   borderRadius: tokens.radiusLg,
@@ -4093,7 +4178,7 @@ var accountRowStyle = (tokens, isSelected) => ({
   justifyContent: "space-between",
   width: "100%",
   padding: "14px 16px",
-  background: "transparent",
+  background: isSelected ? `${tokens.accent}10` : "transparent",
   border: "none",
   borderBottom: `1px solid ${tokens.border}`,
   cursor: "pointer",