@swype-org/react-sdk 0.1.202 → 0.1.204

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,
@@ -5286,7 +5306,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 }),
@@ -5366,7 +5386,7 @@ var tokenRowStyle2 = (tokens) => ({
   textAlign: "left",
   width: "100%"
 });
-var tokenIconCircleStyle = (tokens, hasLogo) => ({
+var tokenIconCircleStyle2 = (tokens, hasLogo) => ({
   width: 36,
   height: 36,
   borderRadius: "50%",
@@ -5377,13 +5397,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 +5667,7 @@ function StepRendererContent({
         selectedSourceLabel: effectiveSourceLabel,
         loading: savingOneTapLimit,
         error: state.error,
-        selectedTokenSymbol: selectedSource?.token.symbol
+        selectedTokenSymbol: selectedSource?.token.symbol ?? selectSourceTokenSymbol
       }
     );
   }
@@ -7280,7 +7300,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();