@swype-org/react-sdk 0.1.187 → 0.1.189

package/dist/index.cjs

@@ -2723,357 +2723,6 @@ var inputStyle = (tokens, filled) => ({
   caretColor: tokens.borderFocus,
   transition: "border-color 0.15s ease"
 });
-function SourceCard({
-  name,
-  address,
-  verified,
-  accounts,
-  selectedAccountId,
-  depositAmount,
-  onSelectAccount,
-  onAuthorizeAccount,
-  onAddProvider
-}) {
-  const { tokens } = useSwypeConfig();
-  const [open, setOpen] = react.useState(false);
-  const containerRef = react.useRef(null);
-  const hasDropdown = accounts != null && accounts.length > 0;
-  react.useEffect(() => {
-    if (!open) return;
-    const handleClick = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, [open]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardContainerStyle(tokens), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: leftStyle, children: [
-        KNOWN_LOGOS[name.toLowerCase()] ? /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: KNOWN_LOGOS[name.toLowerCase()],
-            alt: name,
-            style: logoImgStyle
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconStyle3(tokens.textMuted), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M21 7H3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm0 8H3V9h18v6z",
-            fill: "currentColor"
-          }
-        ) }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: nameRowStyle, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: nameStyle(tokens.text), children: name }),
-            verified && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: tokens.accent }) })
-          ] }),
-          address && /* @__PURE__ */ jsxRuntime.jsx("span", { style: addressStyle(tokens.textMuted), children: address })
-        ] })
-      ] }),
-      hasDropdown && /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => setOpen(!open),
-          style: changeStyle(tokens.accent),
-          children: [
-            "Change source",
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                width: "10",
-                height: "10",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                style: {
-                  marginLeft: 4,
-                  transform: open ? "rotate(180deg)" : "rotate(0deg)",
-                  transition: "transform 0.15s ease"
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
-                  {
-                    d: "M7 10l5 5 5-5",
-                    stroke: tokens.accent,
-                    strokeWidth: "2.5",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round"
-                  }
-                )
-              }
-            )
-          ]
-        }
-      )
-    ] }),
-    open && hasDropdown && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dropdownStyle2(tokens), children: [
-      accounts.map((account) => {
-        const preferredWallet = getPreferredDepositWallet(account, depositAmount ?? 0);
-        const active = hasActiveDepositWallet(account);
-        const isSelected = account.id === selectedAccountId;
-        const displayName = account.nickname ?? account.name;
-        const walletAddress = preferredWallet ? getWalletAddress(preferredWallet) : null;
-        const hasAllowance = active && account.remainingAllowance != null;
-        const exceedsLimit = hasAllowance && depositAmount != null && depositAmount > account.remainingAllowance;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              if (active) {
-                onSelectAccount?.(account.id);
-              } else {
-                onAuthorizeAccount?.(account.id);
-              }
-              setOpen(false);
-            },
-            style: dropdownRowStyle(tokens, active, isSelected),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dropdownRowLeftStyle, children: [
-                KNOWN_LOGOS[account.name.toLowerCase()] ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "img",
-                  {
-                    src: KNOWN_LOGOS[account.name.toLowerCase()],
-                    alt: account.name,
-                    style: dropdownLogoStyle
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: dropdownFallbackIconStyle(active ? tokens.textMuted : tokens.border), children: account.name.charAt(0) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dropdownNameColumnStyle, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: dropdownNameStyle(active ? tokens.text : tokens.textMuted), children: displayName }),
-                  walletAddress && /* @__PURE__ */ jsxRuntime.jsx("span", { style: dropdownAddressStyle(active ? tokens.textMuted : tokens.border), children: walletAddress }),
-                  hasAllowance && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: remainingAllowanceStyle(exceedsLimit ? tokens.warning : tokens.textMuted), children: [
-                    "$",
-                    account.remainingAllowance.toFixed(2),
-                    " remaining"
-                  ] })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: dropdownRowRightStyle, children: active ? exceedsLimit ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: exceedsLimitBadgeStyle(tokens), children: "Exceeds limit" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: activeBadgeStyle(tokens), children: "Active" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: inactiveBadgeStyle(tokens), children: "Setup incomplete" }) })
-            ]
-          },
-          account.id
-        );
-      }),
-      onAddProvider && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: dropdownDividerStyle(tokens.border) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              onAddProvider();
-              setOpen(false);
-            },
-            style: addProviderStyle(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"
-            ]
-          }
-        )
-      ] })
-    ] })
-  ] });
-}
-var cardContainerStyle = (tokens) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  padding: "12px 16px",
-  background: tokens.bgInput,
-  border: `1px solid ${tokens.border}`,
-  borderRadius: 16
-});
-var leftStyle = {
-  display: "flex",
-  alignItems: "center",
-  gap: 10
-};
-var logoImgStyle = {
-  width: 20,
-  height: 20,
-  borderRadius: "50%",
-  objectFit: "contain"
-};
-var iconStyle3 = (color) => ({
-  color,
-  display: "flex",
-  alignItems: "center"
-});
-var nameRowStyle = {
-  display: "flex",
-  alignItems: "center",
-  gap: 4
-};
-var nameStyle = (color) => ({
-  fontWeight: 600,
-  fontSize: "0.9rem",
-  color
-});
-var addressStyle = (color) => ({
-  fontSize: "0.72rem",
-  color,
-  fontFamily: '"SF Mono", "Fira Code", monospace'
-});
-var changeStyle = (color) => ({
-  display: "flex",
-  alignItems: "center",
-  background: "transparent",
-  border: "none",
-  color,
-  fontWeight: 600,
-  fontSize: "0.82rem",
-  cursor: "pointer",
-  fontFamily: "inherit",
-  padding: 0
-});
-var dropdownStyle2 = (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,
-  overflow: "hidden"
-});
-var dropdownRowStyle = (tokens, active, isSelected) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  width: "100%",
-  padding: "10px 14px",
-  background: isSelected ? tokens.accent + "12" : "transparent",
-  border: "none",
-  borderBottom: `1px solid ${tokens.border}`,
-  cursor: "pointer",
-  fontFamily: "inherit",
-  fontSize: "0.85rem",
-  textAlign: "left",
-  outline: "none",
-  opacity: active ? 1 : 0.55,
-  transition: "background 0.1s ease"
-});
-var dropdownRowLeftStyle = {
-  display: "flex",
-  alignItems: "center",
-  gap: 10,
-  minWidth: 0,
-  flex: 1
-};
-var dropdownRowRightStyle = {
-  display: "flex",
-  alignItems: "center",
-  gap: 8,
-  flexShrink: 0
-};
-var dropdownLogoStyle = {
-  width: 20,
-  height: 20,
-  borderRadius: "50%",
-  objectFit: "contain",
-  flexShrink: 0
-};
-var dropdownFallbackIconStyle = (color) => ({
-  width: 20,
-  height: 20,
-  borderRadius: "50%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  fontSize: "0.72rem",
-  fontWeight: 700,
-  color,
-  flexShrink: 0
-});
-var dropdownNameColumnStyle = {
-  display: "flex",
-  flexDirection: "column",
-  gap: 2,
-  minWidth: 0
-};
-var dropdownNameStyle = (color) => ({
-  fontWeight: 500,
-  color,
-  whiteSpace: "nowrap",
-  overflow: "hidden",
-  textOverflow: "ellipsis"
-});
-var dropdownAddressStyle = (color) => ({
-  fontSize: "0.72rem",
-  color,
-  fontFamily: '"SF Mono", "Fira Code", monospace',
-  whiteSpace: "nowrap",
-  overflow: "hidden",
-  textOverflow: "ellipsis"
-});
-var activeBadgeStyle = (tokens) => ({
-  fontSize: "0.6rem",
-  fontWeight: 600,
-  color: tokens.success,
-  background: tokens.successBg,
-  padding: "2px 7px",
-  borderRadius: 999,
-  textTransform: "uppercase",
-  letterSpacing: "0.03em",
-  whiteSpace: "nowrap"
-});
-var inactiveBadgeStyle = (tokens) => ({
-  fontSize: "0.6rem",
-  fontWeight: 600,
-  color: tokens.warning,
-  background: tokens.warningBg ?? `${tokens.warning}1a`,
-  padding: "2px 7px",
-  borderRadius: 999,
-  textTransform: "uppercase",
-  letterSpacing: "0.03em",
-  whiteSpace: "nowrap"
-});
-var dropdownDividerStyle = (borderColor) => ({
-  height: 0,
-  borderTop: `1px solid ${borderColor}`
-});
-var remainingAllowanceStyle = (color) => ({
-  fontSize: "0.68rem",
-  color,
-  fontWeight: 500,
-  whiteSpace: "nowrap",
-  overflow: "hidden",
-  textOverflow: "ellipsis"
-});
-var exceedsLimitBadgeStyle = (tokens) => ({
-  fontSize: "0.6rem",
-  fontWeight: 600,
-  color: tokens.warning,
-  background: tokens.warningBg ?? `${tokens.warning}1a`,
-  padding: "2px 7px",
-  borderRadius: 999,
-  textTransform: "uppercase",
-  letterSpacing: "0.03em",
-  whiteSpace: "nowrap"
-});
-var addProviderStyle = (tokens) => ({
-  display: "flex",
-  alignItems: "center",
-  gap: 8,
-  width: "100%",
-  padding: "10px 14px",
-  background: "transparent",
-  border: "none",
-  color: tokens.accent,
-  fontWeight: 600,
-  fontSize: "0.85rem",
-  cursor: "pointer",
-  fontFamily: "inherit",
-  textAlign: "left",
-  outline: "none"
-});
 function StepList({ steps }) {
   const { tokens } = useSwypeConfig();
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: listStyle, children: steps.map((step, i) => {
@@ -3083,11 +2732,11 @@ function StepList({ steps }) {
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          style: isActive ? activeBadgeContainerStyle : badgeStyle2(
-            isComplete ? tokens.accent : tokens.border,
+          style: badgeStyle2(
+            isComplete || isActive ? tokens.accent : tokens.border,
             isComplete
           ),
-          children: isComplete ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: "#fff" }) }) : isActive ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: activeDotStyle(tokens.accent) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: badgeNumberStyle, children: i + 1 })
+          children: isComplete ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: "#fff" }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: isActive ? activeBadgeNumberStyle(tokens.accent) : badgeNumberStyle, children: i + 1 })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: labelContainerStyle, children: [
@@ -3118,26 +2767,16 @@ var badgeStyle2 = (color, filled) => ({
   justifyContent: "center",
   flexShrink: 0
 });
-var activeBadgeContainerStyle = {
-  width: 28,
-  height: 28,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  flexShrink: 0
-};
-var activeDotStyle = (color) => ({
-  width: 8,
-  height: 8,
-  borderRadius: "50%",
-  backgroundColor: color,
-  display: "block"
-});
 var badgeNumberStyle = {
   fontSize: "0.75rem",
   fontWeight: 600,
   color: "inherit"
 };
+var activeBadgeNumberStyle = (color) => ({
+  fontSize: "0.75rem",
+  fontWeight: 600,
+  color
+});
 var labelContainerStyle = {
   display: "flex",
   flexDirection: "column"
@@ -3639,7 +3278,7 @@ function WalletPickerScreen({
                       {
                         src: KNOWN_LOGOS[acct.name.toLowerCase()],
                         alt: acct.name,
-                        style: logoImgStyle2
+                        style: logoImgStyle
                       }
                     ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: emojiStyle, children: WALLET_EMOJIS[acct.name.toLowerCase()] ?? acct.name.charAt(0) }) }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: pendingInfoStyle, children: [
@@ -3700,10 +3339,10 @@ function WalletPickerScreen({
                   {
                     src: logoSrc,
                     alt: p.name,
-                    style: logoImgStyle2
+                    style: logoImgStyle
                   }
                 ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: emojiStyle, children: emoji }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { style: nameStyle2(tokens.text), children: p.name })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: nameStyle(tokens.text), children: p.name })
               ]
             },
             p.id
@@ -3756,13 +3395,13 @@ var emojiStyle = {
   fontSize: "1.75rem",
   lineHeight: 1
 };
-var logoImgStyle2 = {
+var logoImgStyle = {
   width: 32,
   height: 32,
   borderRadius: 8,
   objectFit: "contain"
 };
-var nameStyle2 = (color) => ({
+var nameStyle = (color) => ({
   fontSize: "0.88rem",
   fontWeight: 600,
   color
@@ -4198,9 +3837,6 @@ var waitHintStyle = (color) => ({
 var MIN_DEPOSIT = 0.25;
 function DepositScreen({
   merchantName,
-  sourceName,
-  sourceAddress,
-  sourceVerified,
   availableBalance,
   remainingLimit,
   tokenCount,
@@ -4239,20 +3875,6 @@ function DepositScreen({
         ] }),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: headerTitle, onBack, onLogout }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SourceCard,
-            {
-              name: sourceName,
-              address: sourceAddress,
-              verified: sourceVerified,
-              accounts,
-              selectedAccountId,
-              depositAmount: amount,
-              onSelectAccount,
-              onAuthorizeAccount,
-              onAddProvider
-            }
-          ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: lowBalanceAmountDisplayStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: lowBalanceAmountStyle, children: [
             "$",
             amount.toFixed(2)
@@ -4284,7 +3906,6 @@ function DepositScreen({
       }
     );
   }
-  const providerLogo = KNOWN_LOGOS[sourceName.toLowerCase()];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ScreenLayout,
     {
@@ -4303,20 +3924,6 @@ function DepositScreen({
       ] }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          SourceCard,
-          {
-            name: sourceName,
-            address: sourceAddress,
-            verified: sourceVerified,
-            accounts,
-            selectedAccountId,
-            depositAmount: amount,
-            onSelectAccount,
-            onAuthorizeAccount,
-            onAddProvider
-          }
-        ),
         /* @__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: [
@@ -4345,14 +3952,66 @@ function DepositScreen({
                 ]
               }
             )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: walletBalanceRowStyle, children: [
-            providerLogo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: providerLogo, alt: sourceName, style: providerLogoStyle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: providerFallbackStyle(tokens.textMuted), children: sourceName.charAt(0) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: walletBalanceStyle(tokens.text), children: [
-              "$",
-              availableBalance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
-            ] }),
-            /* @__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(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    if (active) {
+                      onSelectAccount?.(account.id);
+                    } else {
+                      onAuthorizeAccount?.(account.id);
+                    }
+                  },
+                  style: accountRowStyle(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) })
+                  ]
+                },
+                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: [
@@ -4413,33 +4072,102 @@ var checkBadgeStyle2 = {
   bottom: -1,
   right: -3
 };
-var walletBalanceRowStyle = {
+var accountSectionStyle = {
+  marginBottom: 20
+};
+var accountSectionLabelStyle = (color) => ({
+  fontSize: "0.78rem",
+  fontWeight: 500,
+  color,
+  marginBottom: 8
+});
+var accountListStyle = (tokens) => ({
+  background: tokens.bgInput,
+  border: `1px solid ${tokens.border}`,
+  borderRadius: tokens.radiusLg,
+  overflow: "hidden"
+});
+var accountRowStyle = (tokens, isSelected) => ({
   display: "flex",
   alignItems: "center",
-  gap: 8
+  justifyContent: "space-between",
+  width: "100%",
+  padding: "14px 16px",
+  background: "transparent",
+  border: "none",
+  borderBottom: `1px solid ${tokens.border}`,
+  cursor: "pointer",
+  fontFamily: "inherit",
+  textAlign: "left",
+  outline: "none"
+});
+var accountRowLeftStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  minWidth: 0,
+  flex: 1
 };
-var providerLogoStyle = {
-  width: 18,
-  height: 18,
+var accountLogoStyle = {
+  width: 28,
+  height: 28,
   borderRadius: "50%",
-  objectFit: "contain"
+  objectFit: "contain",
+  flexShrink: 0
 };
-var providerFallbackStyle = (color) => ({
-  width: 18,
-  height: 18,
+var accountFallbackIconStyle = (color) => ({
+  width: 28,
+  height: 28,
   borderRadius: "50%",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  fontSize: "0.65rem",
+  fontSize: "0.75rem",
   fontWeight: 700,
   color,
   flexShrink: 0
 });
-var walletBalanceStyle = (color) => ({
-  fontSize: "0.9rem",
+var accountInfoStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 2,
+  minWidth: 0
+};
+var accountAddressStyle = (color) => ({
   fontWeight: 600,
-  color
+  fontSize: "0.88rem",
+  color,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+});
+var accountBalanceTextStyle = (color) => ({
+  fontSize: "0.76rem",
+  color,
+  fontWeight: 500
+});
+var radioEmptyStyle = (borderColor) => ({
+  width: 22,
+  height: 22,
+  borderRadius: "50%",
+  border: `2px solid ${borderColor}`,
+  flexShrink: 0
+});
+var addAccountBtnStyle = (tokens) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  width: "100%",
+  padding: "12px 16px",
+  background: "transparent",
+  border: "none",
+  color: tokens.accent,
+  fontWeight: 600,
+  fontSize: "0.85rem",
+  cursor: "pointer",
+  fontFamily: "inherit",
+  textAlign: "left",
+  outline: "none"
 });
 var spendingLimitStyle = (color) => ({
   textAlign: "center",
@@ -5676,8 +5404,6 @@ function StepRendererContent({
   pendingConnections,
   depositEligibleAccounts,
   sourceName,
-  sourceAddress,
-  sourceVerified,
   maxSourceBalance,
   tokenCount,
   selectedAccount,
@@ -5861,9 +5587,6 @@ function StepRendererContent({
       DepositScreen,
       {
         merchantName,
-        sourceName,
-        sourceAddress,
-        sourceVerified,
         availableBalance: selectedSource ? selectedSource.balance.available.amount : selectedAccount ? selectedAccount.wallets.reduce((sum, w) => sum + w.balance.available.amount, 0) : maxSourceBalance,
         remainingLimit: selectedSource?.remainingAllowance ?? selectedAccount?.remainingAllowance ?? null,
         tokenCount,
@@ -5961,9 +5684,6 @@ function StepRendererContent({
       DepositScreen,
       {
         merchantName,
-        sourceName,
-        sourceAddress,
-        sourceVerified,
         availableBalance: 0,
         remainingLimit: selectedSource?.remainingAllowance ?? selectedAccount?.remainingAllowance ?? null,
         tokenCount,
@@ -6021,7 +5741,7 @@ var PaymentErrorBoundary = class extends react.Component {
       return this.props.children;
     }
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle9, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconStyle4, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconStyle3, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", children: [
         /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "#ef4444", strokeWidth: "1.5" }),
         /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8v5", stroke: "#ef4444", strokeWidth: "1.5", strokeLinecap: "round" }),
         /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "16", r: "0.75", fill: "#ef4444" })
@@ -6043,7 +5763,7 @@ var containerStyle9 = {
   maxWidth: 420,
   margin: "0 auto"
 };
-var iconStyle4 = {
+var iconStyle3 = {
   marginBottom: 20
 };
 var headingStyle12 = {
@@ -6085,8 +5805,6 @@ function useDerivedState(state) {
     return selectedWallet.sources.find((s) => s.token.status === "AUTHORIZED") ?? selectedWallet.sources[0] ?? null;
   }, [selectedWallet, state.selectedTokenSymbol]);
   const sourceName = selectedAccount?.name ?? selectedWallet?.chain.name ?? "Wallet";
-  const sourceAddress = selectedWallet ? `${selectedWallet.name.slice(0, 6)}...${selectedWallet.name.slice(-4)}` : void 0;
-  const sourceVerified = selectedWallet?.status === "ACTIVE";
   const pendingConnections = react.useMemo(
     () => state.accounts.filter(
       (a) => a.wallets.length > 0 && !a.wallets.some((w) => w.status === "ACTIVE")
@@ -6128,8 +5846,6 @@ function useDerivedState(state) {
     selectedWallet,
     selectedSource,
     sourceName,
-    sourceAddress,
-    sourceVerified,
     pendingConnections,
     depositEligibleAccounts,
     maxSourceBalance,
@@ -7985,8 +7701,6 @@ function SwypePaymentInner({
       pendingConnections: derived.pendingConnections,
       depositEligibleAccounts: derived.depositEligibleAccounts,
       sourceName: derived.sourceName,
-      sourceAddress: derived.sourceAddress,
-      sourceVerified: derived.sourceVerified,
       maxSourceBalance: derived.maxSourceBalance,
       tokenCount: derived.tokenCount,
       selectedAccount: derived.selectedAccount,