@swype-org/react-sdk 0.1.180 → 0.1.182

package/dist/index.d.cts

@@ -797,8 +797,10 @@ interface TokenPickerScreenProps {
     onSelectAuthorized: (walletId: string, tokenSymbol: string) => void;
     onAuthorizeToken: (walletId: string, tokenAddress: string, chainId: number, tokenSymbol: string) => void;
     onBack: () => void;
+    /** Deposit amount for the context card at top */
+    depositAmount?: number;
 }
-declare function TokenPickerScreen({ account, chains, onSelectAuthorized, onAuthorizeToken, onBack, }: TokenPickerScreenProps): react_jsx_runtime.JSX.Element;
+declare function TokenPickerScreen({ account, chains, onSelectAuthorized, onAuthorizeToken, onBack, depositAmount, }: TokenPickerScreenProps): react_jsx_runtime.JSX.Element;
 
 type FlowPhase = 'link' | 'deposit';
 

package/dist/index.d.ts

@@ -797,8 +797,10 @@ interface TokenPickerScreenProps {
     onSelectAuthorized: (walletId: string, tokenSymbol: string) => void;
     onAuthorizeToken: (walletId: string, tokenAddress: string, chainId: number, tokenSymbol: string) => void;
     onBack: () => void;
+    /** Deposit amount for the context card at top */
+    depositAmount?: number;
 }
-declare function TokenPickerScreen({ account, chains, onSelectAuthorized, onAuthorizeToken, onBack, }: TokenPickerScreenProps): react_jsx_runtime.JSX.Element;
+declare function TokenPickerScreen({ account, chains, onSelectAuthorized, onAuthorizeToken, onBack, depositAmount, }: TokenPickerScreenProps): react_jsx_runtime.JSX.Element;
 
 type FlowPhase = 'link' | 'deposit';
 

package/dist/index.js

@@ -2313,7 +2313,7 @@ var dotStyle = (color) => ({
 var lineStyle = (color) => ({
   width: 32,
   height: 0,
-  borderTop: `2px dashed ${color}`,
+  borderTop: `2px solid ${color}`,
   opacity: 0.4,
   flexShrink: 0
 });
@@ -3844,7 +3844,7 @@ var continueRowStyle = (tokens) => ({
   padding: "10px 16px",
   fontSize: "0.84rem",
   fontWeight: 600,
-  color: tokens.accent,
+  color: tokens.text,
   background: `${tokens.accent}0d`,
   borderTop: `1px solid ${tokens.accent}22`
 });
@@ -5351,10 +5351,10 @@ function TokenPickerScreen({
   chains,
   onSelectAuthorized,
   onAuthorizeToken,
-  onBack
+  onBack,
+  depositAmount
 }) {
-  const { tokens: themeTokens } = useSwypeConfig();
-  const [selectedIndex, setSelectedIndex] = useState(null);
+  const { tokens: t } = useSwypeConfig();
   const entries = [];
   for (const wallet of account.wallets) {
     for (const source of wallet.sources) {
@@ -5369,213 +5369,214 @@ function TokenPickerScreen({
       });
     }
   }
-  const selected = selectedIndex != null ? entries[selectedIndex] : null;
-  const isAuthorized = selected?.status === "AUTHORIZED";
-  const handleConfirm = () => {
-    if (!selected) return;
-    if (isAuthorized) {
-      onSelectAuthorized(selected.walletId, selected.tokenSymbol);
+  const handleSelect = (entry) => {
+    if (entry.status === "AUTHORIZED") {
+      onSelectAuthorized(entry.walletId, entry.tokenSymbol);
     } else {
-      const chain = chains.find((c) => c.name === selected.chainName);
+      const chain = chains.find((c) => c.name === entry.chainName);
       const evmChainId = chain?.commonId;
       if (evmChainId == null) return;
-      onAuthorizeToken(selected.walletId, selected.tokenAddress, evmChainId, selected.tokenSymbol);
+      onAuthorizeToken(entry.walletId, entry.tokenAddress, evmChainId, entry.tokenSymbol);
     }
   };
-  const chainGroups = /* @__PURE__ */ new Map();
-  for (const entry of entries) {
-    const group = chainGroups.get(entry.chainName);
-    if (group) {
-      group.push(entry);
-    } else {
-      chainGroups.set(entry.chainName, [entry]);
-    }
-  }
-  const [expandedChain, setExpandedChain] = useState(
-    entries.length > 0 ? entries[0].chainName : null
-  );
-  return /* @__PURE__ */ jsxs(
-    ScreenLayout,
-    {
-      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          PrimaryButton,
-          {
-            onClick: handleConfirm,
-            disabled: selected == null,
-            children: selected == null ? "Select a token" : isAuthorized ? "Select Source" : "Authorize Token"
-          }
-        ),
-        /* @__PURE__ */ jsx(PoweredByFooter, {})
-      ] }),
-      children: [
-        /* @__PURE__ */ jsx(ScreenHeader, { title: "Select Token", onBack }),
-        /* @__PURE__ */ jsx("p", { style: subtitleStyle9(themeTokens.textSecondary), children: "Choose a token to deposit with. Tokens that haven't been authorized yet will require a one-time wallet approval." }),
-        /* @__PURE__ */ jsx("div", { style: chainListStyle2, children: [...chainGroups.entries()].map(([chainName, chainEntries]) => {
-          const isExpanded = expandedChain === chainName;
-          const chainTotal = chainEntries.reduce((sum, e) => sum + e.balance, 0);
-          return /* @__PURE__ */ jsxs("div", { style: chainCardStyle2(themeTokens), children: [
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: () => setExpandedChain((prev) => prev === chainName ? null : chainName),
-                style: chainHeaderStyle2(themeTokens),
-                children: [
-                  /* @__PURE__ */ jsxs("div", { style: chainHeaderLeftStyle2, children: [
-                    /* @__PURE__ */ jsx("span", { style: chainNameStyle2(themeTokens.text), children: chainName }),
-                    /* @__PURE__ */ jsxs("span", { style: chainBalanceStyle2(themeTokens.textMuted), children: [
-                      "$",
-                      chainTotal.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsx("span", { style: chevronStyle(themeTokens.textMuted), children: isExpanded ? "\u25BE" : "\u25B8" })
-                ]
-              }
-            ),
-            isExpanded && /* @__PURE__ */ jsx("div", { style: tokenListStyle2, children: chainEntries.map((entry) => {
-              const globalIdx = entries.indexOf(entry);
-              const isSelected = selectedIndex === globalIdx;
-              const authorized = entry.status === "AUTHORIZED";
-              return /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setSelectedIndex(globalIdx),
-                  style: tokenRowStyle2(themeTokens, isSelected),
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { style: tokenInfoStyle2, children: [
-                      /* @__PURE__ */ jsxs("div", { style: tokenHeaderRowStyle, children: [
-                        /* @__PURE__ */ jsx("span", { style: tokenSymbolStyle2(themeTokens.text), children: entry.tokenSymbol }),
-                        authorized ? /* @__PURE__ */ jsx("span", { style: statusBadgeStyle(themeTokens.success), children: "Authorized" }) : /* @__PURE__ */ jsx("span", { style: statusBadgeStyle(themeTokens.textMuted), children: "Not authorized" })
-                      ] }),
-                      /* @__PURE__ */ jsxs("span", { style: tokenBalStyle2(themeTokens.textMuted), children: [
-                        "$",
-                        entry.balance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsx("div", { style: radioStyle3(themeTokens, isSelected), children: isSelected && /* @__PURE__ */ jsx("div", { style: radioDotStyle3(themeTokens.accent) }) })
-                  ]
-                },
-                `${entry.walletId}-${entry.tokenSymbol}`
-              );
-            }) })
-          ] }, chainName);
-        }) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsx(PoweredByFooter, {}), children: [
+    /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
+    /* @__PURE__ */ jsx("div", { style: mascotWrapStyle2, children: /* @__PURE__ */ jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotImgStyle }) }),
+    depositAmount != null && /* @__PURE__ */ jsxs("div", { style: depositCardStyle2(t), children: [
+      /* @__PURE__ */ jsx("div", { style: depositLabelStyle2(t.textMuted), children: "Depositing" }),
+      /* @__PURE__ */ jsxs("div", { style: depositAmountRowStyle, children: [
+        /* @__PURE__ */ jsxs("div", { style: depositAmountStyle(t.text), children: [
+          "$",
+          depositAmount.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 2 })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: tokenIconWrapStyle3, children: [
+          /* @__PURE__ */ jsxs("svg", { width: "32", height: "32", viewBox: "0 0 36 36", fill: "none", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "18", fill: "#2DB84B" }),
+            /* @__PURE__ */ jsx("text", { x: "18", y: "23", textAnchor: "middle", fontSize: "18", fill: "#fff", fontWeight: "700", children: "$" })
+          ] }),
+          /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", style: checkBadgeStyle3, children: [
+            /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "8", fill: "#2775CA" }),
+            /* @__PURE__ */ jsx("path", { d: "M5 8l2 2 4-4", stroke: "#fff", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: sectionLabelStyle(t.textMuted), children: "Choose token" }),
+    /* @__PURE__ */ jsx("div", { style: tokenListStyle2, children: entries.map((entry) => {
+      const authorized = entry.status === "AUTHORIZED";
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleSelect(entry),
+          style: tokenRowStyle2(t),
+          children: [
+            /* @__PURE__ */ jsx("div", { style: tokenIconCircleStyle(t), children: /* @__PURE__ */ jsx("span", { style: tokenIconTextStyle(t.textMuted), children: "$" }) }),
+            /* @__PURE__ */ jsxs("div", { style: tokenInfoStyle2, children: [
+              /* @__PURE__ */ jsxs("div", { style: tokenNameRowStyle, children: [
+                /* @__PURE__ */ jsx("span", { style: tokenSymbolTextStyle(t.text), children: entry.tokenSymbol }),
+                /* @__PURE__ */ jsx("span", { style: tokenChainDotStyle(t.textMuted), children: "\xB7" }),
+                /* @__PURE__ */ jsx("span", { style: tokenChainTextStyle(t.textMuted), children: entry.chainName })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: tokenBalanceRowStyle, children: [
+                /* @__PURE__ */ jsxs("span", { style: tokenBalanceStyle(t.textMuted), children: [
+                  "$",
+                  entry.balance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+                ] }),
+                !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" }) }) })
+          ]
+        },
+        `${entry.walletId}-${entry.tokenSymbol}-${entry.chainName}`
+      );
+    }) })
+  ] });
 }
-var subtitleStyle9 = (color) => ({
-  fontSize: "0.86rem",
-  color,
-  margin: "0 0 20px",
-  lineHeight: 1.5
-});
-var chainListStyle2 = {
+var mascotWrapStyle2 = {
   display: "flex",
-  flexDirection: "column",
-  gap: 10
+  justifyContent: "center",
+  marginBottom: 16
+};
+var mascotImgStyle = {
+  width: 36,
+  height: 36
 };
-var chainCardStyle2 = (tokens) => ({
+var depositCardStyle2 = (tokens) => ({
+  background: tokens.bgInput,
   border: `1px solid ${tokens.border}`,
-  borderRadius: 14,
-  overflow: "hidden",
-  background: tokens.bgInput
+  borderRadius: tokens.radiusLg,
+  padding: "16px 20px",
+  marginBottom: 24
 });
-var chainHeaderStyle2 = (tokens) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  width: "100%",
-  padding: "14px 16px",
-  background: tokens.bgInput,
-  border: "none",
-  cursor: "pointer",
-  fontFamily: "inherit",
-  textAlign: "left"
+var depositLabelStyle2 = (color) => ({
+  fontSize: "0.75rem",
+  fontWeight: 500,
+  color,
+  marginBottom: 4
 });
-var chainHeaderLeftStyle2 = {
+var depositAmountRowStyle = {
   display: "flex",
-  flexDirection: "column",
-  gap: 2
+  alignItems: "center",
+  justifyContent: "space-between"
 };
-var chainNameStyle2 = (color) => ({
-  fontSize: "0.92rem",
-  fontWeight: 600,
-  color
-});
-var chainBalanceStyle2 = (color) => ({
-  fontSize: "0.76rem",
+var depositAmountStyle = (color) => ({
+  fontSize: "2.2rem",
+  fontWeight: 700,
+  letterSpacing: "-0.02em",
   color
 });
-var chevronStyle = (color) => ({
-  fontSize: "0.9rem",
-  color
+var tokenIconWrapStyle3 = {
+  position: "relative",
+  width: 32,
+  height: 32,
+  flexShrink: 0
+};
+var checkBadgeStyle3 = {
+  position: "absolute",
+  bottom: -1,
+  right: -3
+};
+var sectionLabelStyle = (color) => ({
+  fontSize: "0.84rem",
+  fontWeight: 500,
+  color,
+  marginBottom: 12
 });
 var tokenListStyle2 = {
-  padding: "0 12px 12px",
   display: "flex",
   flexDirection: "column",
-  gap: 6
+  gap: 10
 };
-var tokenRowStyle2 = (tokens, selected) => ({
+var tokenRowStyle2 = (tokens) => ({
   display: "flex",
   alignItems: "center",
-  justifyContent: "space-between",
-  padding: "12px 14px",
-  background: tokens.bgCard,
-  border: `1.5px solid ${selected ? tokens.accent : tokens.border}`,
-  borderRadius: 10,
+  gap: 14,
+  padding: "14px 16px",
+  background: tokens.bgInput,
+  border: `1px solid ${tokens.border}`,
+  borderRadius: 16,
   cursor: "pointer",
   fontFamily: "inherit",
   textAlign: "left",
-  transition: "border-color 0.15s ease"
+  width: "100%"
+});
+var tokenIconCircleStyle = (tokens) => ({
+  width: 36,
+  height: 36,
+  borderRadius: "50%",
+  border: `1.5px solid ${tokens.border}`,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0
+});
+var tokenIconTextStyle = (color) => ({
+  fontSize: "1rem",
+  fontWeight: 700,
+  color
 });
 var tokenInfoStyle2 = {
   display: "flex",
   flexDirection: "column",
-  gap: 4,
-  flex: 1
+  gap: 2,
+  flex: 1,
+  minWidth: 0
 };
-var tokenHeaderRowStyle = {
+var tokenNameRowStyle = {
   display: "flex",
   alignItems: "center",
-  gap: 8
+  gap: 4
 };
-var tokenSymbolStyle2 = (color) => ({
-  fontSize: "0.88rem",
+var tokenSymbolTextStyle = (color) => ({
+  fontSize: "0.92rem",
   fontWeight: 600,
   color
 });
-var statusBadgeStyle = (color) => ({
-  fontSize: "0.65rem",
-  fontWeight: 600,
-  color,
-  border: `1px solid ${color}44`,
-  borderRadius: 999,
-  padding: "1px 7px",
-  letterSpacing: "0.02em"
+var tokenChainDotStyle = (color) => ({
+  fontSize: "0.8rem",
+  color
 });
-var tokenBalStyle2 = (color) => ({
-  fontSize: "0.74rem",
+var tokenChainTextStyle = (color) => ({
+  fontSize: "0.84rem",
+  fontWeight: 400,
   color
 });
-var radioStyle3 = (tokens, selected) => ({
-  width: 20,
-  height: 20,
+var tokenBalanceRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8
+};
+var tokenBalanceStyle = (color) => ({
+  fontSize: "0.78rem",
+  color
+});
+var notAuthorizedStyle = (color) => ({
+  fontSize: "0.7rem",
+  fontWeight: 500,
+  color
+});
+var selectCircleStyle = (borderColor) => ({
+  width: 28,
+  height: 28,
   borderRadius: "50%",
-  border: `2px solid ${selected ? tokens.accent : tokens.border}`,
+  border: `2px solid ${borderColor}`,
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0
 });
-var radioDotStyle3 = (color) => ({
-  width: 10,
-  height: 10,
+var selectCircleSelectedStyle = (color) => ({
+  width: 28,
+  height: 28,
   borderRadius: "50%",
-  background: color
+  background: color,
+  border: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0
 });
 var LINK_STEPS = /* @__PURE__ */ new Set([
   "create-passkey",
@@ -5831,7 +5832,8 @@ function StepRendererContent({
         chains: state.chains,
         onSelectAuthorized: handlers.onSelectAuthorizedToken,
         onAuthorizeToken: handlers.onAuthorizeToken,
-        onBack: () => handlers.onNavigate(state.previousStep === "setup" ? "setup" : "deposit")
+        onBack: () => handlers.onNavigate(state.previousStep === "setup" ? "setup" : "deposit"),
+        depositAmount: depositAmount ?? void 0
       }
     );
   }