@swype-org/react-sdk 0.1.202 → 0.1.205

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

@@ -3636,16 +3636,10 @@ function SetupScreen({
               onClick: onAdvanced,
               style: tokenIconButtonStyle(!!onAdvanced),
               children: [
-                /* @__PURE__ */ jsxs("div", { style: tokenIconWrapStyle, children: [
-                  selectedTokenSymbol && TOKEN_LOGOS[selectedTokenSymbol] ? /* @__PURE__ */ jsx("img", { src: TOKEN_LOGOS[selectedTokenSymbol], alt: selectedTokenSymbol, width: 36, height: 36, style: { borderRadius: "50%" } }) : /* @__PURE__ */ jsxs("svg", { width: "36", height: "36", 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: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: checkBadgeStyle, 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: tokenIconWrapStyle, children: selectedTokenSymbol && TOKEN_LOGOS[selectedTokenSymbol] ? /* @__PURE__ */ jsx("img", { src: TOKEN_LOGOS[selectedTokenSymbol], alt: selectedTokenSymbol, width: 36, height: 36, style: { borderRadius: "50%" } }) : /* @__PURE__ */ jsxs("svg", { width: "36", height: "36", 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__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.5 }, children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6", stroke: tokens.textMuted, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
               ]
             }
@@ -3744,11 +3738,6 @@ var tokenIconWrapStyle = {
   width: 36,
   height: 36
 };
-var checkBadgeStyle = {
-  position: "absolute",
-  bottom: -1,
-  right: -3
-};
 var presetsRowStyle = {
   display: "flex",
   gap: 10,
@@ -4556,7 +4545,7 @@ function SelectSourceScreen({
                 /* @__PURE__ */ jsxs("div", { style: optionContentStyle, children: [
                   /* @__PURE__ */ jsxs("span", { style: optionNameStyle(tokens.text), children: [
                     chain.chainName,
-                    isRecommended && /* @__PURE__ */ jsx("span", { style: recommendedBadgeStyle(tokens.accent), children: " recommended" })
+                    isRecommended && /* @__PURE__ */ jsx("span", { style: recommendedBadgeStyle(tokens.textMuted), children: " recommended" })
                   ] }),
                   /* @__PURE__ */ jsxs("span", { style: optionBalanceStyle(tokens.textMuted), children: [
                     "$",
@@ -4573,6 +4562,7 @@ function SelectSourceScreen({
           /* @__PURE__ */ jsx("label", { style: labelStyle4(tokens.textSecondary), children: "Token" }),
           /* @__PURE__ */ jsx("div", { style: optionListStyle, children: tokenChoices.map((token) => {
             const isSelected = token.tokenSymbol === selectedTokenSymbol;
+            const tokenLogo = TOKEN_LOGOS[token.tokenSymbol];
             return /* @__PURE__ */ jsxs(
               "button",
               {
@@ -4580,11 +4570,14 @@ function SelectSourceScreen({
                 onClick: () => onTokenChange(token.tokenSymbol),
                 style: optionButtonStyle(tokens, isSelected),
                 children: [
-                  /* @__PURE__ */ jsxs("div", { style: optionContentStyle, children: [
-                    /* @__PURE__ */ jsx("span", { style: optionNameStyle(tokens.text), children: token.tokenSymbol }),
-                    /* @__PURE__ */ jsxs("span", { style: optionBalanceStyle(tokens.textMuted), children: [
-                      "$",
-                      token.balance.toFixed(2)
+                  /* @__PURE__ */ jsxs("div", { style: optionMainStyle, children: [
+                    /* @__PURE__ */ jsx("div", { style: tokenIconCircleStyle(tokens, !!tokenLogo), children: tokenLogo ? /* @__PURE__ */ jsx("img", { src: tokenLogo, alt: token.tokenSymbol, style: tokenLogoImgStyle }) : /* @__PURE__ */ jsx("span", { style: tokenIconTextStyle(tokens.textMuted), children: "$" }) }),
+                    /* @__PURE__ */ jsxs("div", { style: optionContentStyle, children: [
+                      /* @__PURE__ */ jsx("span", { style: optionNameStyle(tokens.text), children: token.tokenSymbol }),
+                      /* @__PURE__ */ jsxs("span", { style: optionBalanceStyle(tokens.textMuted), children: [
+                        "$",
+                        token.balance.toFixed(2)
+                      ] })
                     ] })
                   ] }),
                   /* @__PURE__ */ jsx("div", { style: radioStyle(tokens, isSelected), children: isSelected && /* @__PURE__ */ jsx("div", { style: radioDotStyle(tokens.accent) }) })
@@ -4637,6 +4630,11 @@ var optionContentStyle = {
   flexDirection: "column",
   gap: 2
 };
+var optionMainStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12
+};
 var optionNameStyle = (color) => ({
   fontSize: "0.9rem",
   fontWeight: 600,
@@ -4652,6 +4650,28 @@ var optionBalanceStyle = (color) => ({
   fontSize: "0.78rem",
   color
 });
+var tokenIconCircleStyle = (tokens, hasLogo) => ({
+  width: 36,
+  height: 36,
+  borderRadius: "50%",
+  border: hasLogo ? "none" : `1.5px solid ${tokens.border}`,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  overflow: "hidden"
+});
+var tokenLogoImgStyle = {
+  width: 36,
+  height: 36,
+  borderRadius: "50%",
+  objectFit: "cover"
+};
+var tokenIconTextStyle = (color) => ({
+  fontSize: "1rem",
+  fontWeight: 700,
+  color
+});
 var radioStyle = (tokens, selected) => ({
   width: 20,
   height: 20,
@@ -5223,7 +5243,8 @@ function TokenPickerScreen({
   onBack,
   onLogout,
   depositAmount,
-  selectedTokenSymbol
+  selectedTokenSymbol,
+  selectedWalletId
 }) {
   const { tokens: t } = useSwypeConfig();
   const entries = [];
@@ -5279,6 +5300,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",
         {
@@ -5286,7 +5308,7 @@ function TokenPickerScreen({
           onClick: () => handleSelect(entry),
           style: tokenRowStyle2(t),
           children: [
-            /* @__PURE__ */ jsx("div", { style: tokenIconCircleStyle(t, !!TOKEN_LOGOS[entry.tokenSymbol]), children: TOKEN_LOGOS[entry.tokenSymbol] ? /* @__PURE__ */ jsx("img", { src: TOKEN_LOGOS[entry.tokenSymbol], alt: entry.tokenSymbol, style: tokenLogoImgStyle }) : /* @__PURE__ */ jsx("span", { style: tokenIconTextStyle(t.textMuted), children: "$" }) }),
+            /* @__PURE__ */ jsx("div", { style: tokenIconCircleStyle2(t, !!TOKEN_LOGOS[entry.tokenSymbol]), children: TOKEN_LOGOS[entry.tokenSymbol] ? /* @__PURE__ */ jsx("img", { src: TOKEN_LOGOS[entry.tokenSymbol], alt: entry.tokenSymbol, style: tokenLogoImgStyle2 }) : /* @__PURE__ */ jsx("span", { style: tokenIconTextStyle2(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 }),
@@ -5301,7 +5323,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}`
@@ -5366,7 +5388,7 @@ var tokenRowStyle2 = (tokens) => ({
   textAlign: "left",
   width: "100%"
 });
-var tokenIconCircleStyle = (tokens, hasLogo) => ({
+var tokenIconCircleStyle2 = (tokens, hasLogo) => ({
   width: 36,
   height: 36,
   borderRadius: "50%",
@@ -5377,13 +5399,13 @@ var tokenIconCircleStyle = (tokens, hasLogo) => ({
   flexShrink: 0,
   overflow: "hidden"
 });
-var tokenLogoImgStyle = {
+var tokenLogoImgStyle2 = {
   width: 36,
   height: 36,
   borderRadius: "50%",
   objectFit: "cover"
 };
-var tokenIconTextStyle = (color) => ({
+var tokenIconTextStyle2 = (color) => ({
   fontSize: "1rem",
   fontWeight: 700,
   color
@@ -5647,7 +5669,7 @@ function StepRendererContent({
         selectedSourceLabel: effectiveSourceLabel,
         loading: savingOneTapLimit,
         error: state.error,
-        selectedTokenSymbol: selectedSource?.token.symbol
+        selectedTokenSymbol: selectedSource?.token.symbol ?? selectSourceTokenSymbol
       }
     );
   }
@@ -5710,7 +5732,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
       }
     );
   }
@@ -7280,7 +7303,7 @@ function usePaymentEffects(deps) {
           accounts: accts,
           chains: chn,
           defaults,
-          resolvedStep: correctableSteps.includes(state.step) ? resolved.step : void 0,
+          resolvedStep: correctableSteps.includes(state.step) && !state.creatingTransfer ? resolved.step : void 0,
           clearMobileState: resolved.clearPersistedFlow
         });
         if (resolved.clearPersistedFlow) clearMobileFlowState();