@swype-org/react-sdk 0.1.204 → 0.1.206

package/dist/index.d.cts

@@ -807,8 +807,10 @@ interface TokenPickerScreenProps {
     depositAmount?: number;
     /** Currently selected token symbol, e.g. "USDC" or "USDT" */
     selectedTokenSymbol?: string;
+    /** Currently selected wallet ID so we can identify the active token across chains */
+    selectedWalletId?: string;
 }
-declare function TokenPickerScreen({ account, chains, onSelectAuthorized, onAuthorizeToken, onBack, onLogout, depositAmount, selectedTokenSymbol, }: TokenPickerScreenProps): react_jsx_runtime.JSX.Element;
+declare function TokenPickerScreen({ account, chains, onSelectAuthorized, onAuthorizeToken, onBack, onLogout, depositAmount, selectedTokenSymbol, selectedWalletId, }: TokenPickerScreenProps): react_jsx_runtime.JSX.Element;
 
 type FlowPhase = 'link' | 'deposit';
 

package/dist/index.d.ts

@@ -807,8 +807,10 @@ interface TokenPickerScreenProps {
     depositAmount?: number;
     /** Currently selected token symbol, e.g. "USDC" or "USDT" */
     selectedTokenSymbol?: string;
+    /** Currently selected wallet ID so we can identify the active token across chains */
+    selectedWalletId?: string;
 }
-declare function TokenPickerScreen({ account, chains, onSelectAuthorized, onAuthorizeToken, onBack, onLogout, depositAmount, selectedTokenSymbol, }: TokenPickerScreenProps): react_jsx_runtime.JSX.Element;
+declare function TokenPickerScreen({ account, chains, onSelectAuthorized, onAuthorizeToken, onBack, onLogout, depositAmount, selectedTokenSymbol, selectedWalletId, }: TokenPickerScreenProps): react_jsx_runtime.JSX.Element;
 
 type FlowPhase = 'link' | 'deposit';
 

package/dist/index.js

@@ -3888,50 +3888,6 @@ function DepositScreen({
   const isLowBalance = availableBalance < MIN_DEPOSIT;
   const exceedsLimit = remainingLimit != null && amount > remainingLimit && !isLowBalance;
   const canDeposit = amount >= MIN_DEPOSIT && !exceedsLimit && !isLowBalance && !processing;
-  const headerTitle = merchantName ? `Deposit to ${merchantName}` : "Deposit";
-  if (isLowBalance) {
-    return /* @__PURE__ */ jsxs(
-      ScreenLayout,
-      {
-        footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(PrimaryButton, { onClick: onSwitchWallet, children: "Switch wallet" }),
-          /* @__PURE__ */ jsx("p", { style: switchHintStyle(tokens.textMuted), children: "Use a different wallet with more balance" }),
-          /* @__PURE__ */ jsx("div", { style: outlineBtnWrapStyle, children: /* @__PURE__ */ jsx(OutlineButton, { onClick: onBack, children: "Back to deposit options" }) }),
-          /* @__PURE__ */ jsx(PoweredByFooter, {})
-        ] }),
-        children: [
-          /* @__PURE__ */ jsx(ScreenHeader, { title: headerTitle, onBack, onLogout }),
-          /* @__PURE__ */ jsx("div", { style: lowBalanceAmountDisplayStyle, children: /* @__PURE__ */ jsxs("span", { style: lowBalanceAmountStyle, children: [
-            "$",
-            amount.toFixed(2)
-          ] }) }),
-          /* @__PURE__ */ jsxs("div", { style: lowBalanceRowStyle, children: [
-            /* @__PURE__ */ jsxs("div", { style: lowBalanceLeftStyle, children: [
-              /* @__PURE__ */ jsx("div", { style: lowBalanceCoinStyle(tokens.warning), children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
-                /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
-                /* @__PURE__ */ jsx("text", { x: "12", y: "16", textAnchor: "middle", fontSize: "12", fill: "#fff", fontWeight: "700", children: "$" })
-              ] }) }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("div", { style: lowBalanceLabelStyle(tokens.textMuted), children: selectedSourceLabel ?? "Available" }),
-                /* @__PURE__ */ jsxs("div", { style: { fontSize: "1rem", fontWeight: 700, color: tokens.warning }, children: [
-                  "$",
-                  availableBalance.toFixed(2)
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z", fill: tokens.warning }) })
-          ] }),
-          /* @__PURE__ */ jsxs(WarningBanner, { title: "Not enough funds", children: [
-            "Your wallet balance is $",
-            availableBalance.toFixed(2),
-            " \u2014 you need at least $",
-            MIN_DEPOSIT.toFixed(2),
-            " to deposit via One-Tap."
-          ] })
-        ]
-      }
-    );
-  }
   return /* @__PURE__ */ jsxs(
     ScreenLayout,
     {
@@ -4062,6 +4018,13 @@ function DepositScreen({
             ". Increase your limit to continue."
           ] })
         ] }),
+        !accountPickerOpen && isLowBalance && /* @__PURE__ */ jsxs(WarningBanner, { title: "Not enough funds", children: [
+          "Your wallet balance is $",
+          availableBalance.toFixed(2),
+          " \u2014 you need at least $",
+          MIN_DEPOSIT.toFixed(2),
+          " to deposit via One-Tap."
+        ] }),
         error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle5(tokens), children: error })
       ]
     }
@@ -4265,46 +4228,6 @@ var limitExceededHintStyle = (color) => ({
   margin: "12px 0 2px",
   lineHeight: 1.5
 });
-var switchHintStyle = (color) => ({
-  textAlign: "center",
-  fontSize: "0.8rem",
-  color,
-  margin: "10px 0"
-});
-var outlineBtnWrapStyle = {
-  marginBottom: 8
-};
-var lowBalanceAmountDisplayStyle = {
-  textAlign: "center",
-  padding: "20px 0 8px"
-};
-var lowBalanceAmountStyle = {
-  fontSize: "2.5rem",
-  fontWeight: 700,
-  color: "#ccc",
-  letterSpacing: "-0.02em"
-};
-var lowBalanceRowStyle = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  marginBottom: 16
-};
-var lowBalanceLeftStyle = {
-  display: "flex",
-  alignItems: "center",
-  gap: 10
-};
-var lowBalanceCoinStyle = (color) => ({
-  color,
-  display: "flex",
-  alignItems: "center"
-});
-var lowBalanceLabelStyle = (color) => ({
-  fontSize: "0.72rem",
-  color,
-  fontWeight: 500
-});
 function SuccessScreen({
   amount,
   currency,
@@ -5243,7 +5166,8 @@ function TokenPickerScreen({
   onBack,
   onLogout,
   depositAmount,
-  selectedTokenSymbol
+  selectedTokenSymbol,
+  selectedWalletId
 }) {
   const { tokens: t } = useSwypeConfig();
   const entries = [];
@@ -5299,6 +5223,7 @@ function TokenPickerScreen({
     /* @__PURE__ */ jsx("div", { style: sectionLabelStyle(t.textMuted), children: "Choose token" }),
     /* @__PURE__ */ jsx("div", { style: tokenListStyle2, children: entries.map((entry) => {
       const authorized = entry.status === "AUTHORIZED";
+      const isSelected = entry.walletId === selectedWalletId && entry.tokenSymbol === selectedTokenSymbol;
       return /* @__PURE__ */ jsxs(
         "button",
         {
@@ -5321,7 +5246,7 @@ function TokenPickerScreen({
                 !authorized && /* @__PURE__ */ jsx("span", { style: notAuthorizedStyle(t.textMuted), children: "Not authorized" })
               ] })
             ] }),
-            /* @__PURE__ */ jsx("div", { style: authorized ? selectCircleSelectedStyle(t.accent) : selectCircleStyle(t.border), children: authorized && /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: "#fff" }) }) })
+            /* @__PURE__ */ jsx("div", { style: isSelected ? selectCircleSelectedStyle(t.accent) : selectCircleStyle(t.border), children: isSelected && /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: "#fff" }) }) })
           ]
         },
         `${entry.walletId}-${entry.tokenSymbol}-${entry.chainName}`
@@ -5657,7 +5582,7 @@ function StepRendererContent({
     return /* @__PURE__ */ jsx(
       SetupScreen,
       {
-        availableBalance: selectedSource ? selectedSource.balance.available.amount : selectedAccount ? selectedAccount.wallets.reduce((sum, w) => sum + w.balance.available.amount, 0) : selectSourceAvailableBalance > 0 ? selectSourceAvailableBalance : maxSourceBalance,
+        availableBalance: selectedSource ? selectedSource.balance.available.amount : selectSourceAvailableBalance > 0 ? selectSourceAvailableBalance : selectedAccount ? selectedAccount.wallets.reduce((sum, w) => sum + w.balance.available.amount, 0) : maxSourceBalance,
         tokenCount: effectiveTokenCount,
         sourceName,
         onSetupOneTap: handlers.onSetupOneTap,
@@ -5730,7 +5655,8 @@ function StepRendererContent({
         onBack: () => handlers.onNavigate(state.previousStep === "setup" ? "setup" : "deposit"),
         onLogout: handlers.onLogout,
         depositAmount: depositAmount ?? void 0,
-        selectedTokenSymbol: selectedSource?.token.symbol
+        selectedTokenSymbol: selectedSource?.token.symbol,
+        selectedWalletId: state.selectedWalletId
       }
     );
   }