@swype-org/react-sdk 0.1.56 → 0.1.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -677,7 +677,7 @@ function createPasskeyViaPopup(options) {
677
677
  return new Promise((resolve, reject) => {
678
678
  const encoded = btoa(JSON.stringify(options));
679
679
  const popupUrl = `${window.location.origin}/passkey-register#${encoded}`;
680
- const popup = window.open(popupUrl, "swype-passkey", "width=460,height=600");
680
+ const popup = window.open(popupUrl, "swype-passkey");
681
681
  if (!popup) {
682
682
  reject(new Error("Pop-up blocked. Please allow pop-ups for this site and try again."));
683
683
  return;
@@ -1941,10 +1941,20 @@ function LimitSlider({
1941
1941
  }
1942
1942
  )
1943
1943
  ] }),
1944
- ticks && ticks.length > 0 && /* @__PURE__ */ jsx("div", { style: ticksStyle, children: ticks.map((tick) => /* @__PURE__ */ jsxs("span", { style: tickLabelStyle(tokens.textMuted), children: [
1945
- "$",
1946
- tick
1947
- ] }, tick)) }),
1944
+ ticks && ticks.length > 0 && /* @__PURE__ */ jsx("div", { style: ticksStyle, children: ticks.map((tick, i) => {
1945
+ const pctPos = (tick - min) / (max - min) * 100;
1946
+ const isFirst = i === 0;
1947
+ const isLast = i === ticks.length - 1;
1948
+ const label = tick % 1 === 0 ? `$${tick}` : `$${tick.toFixed(2)}`;
1949
+ return /* @__PURE__ */ jsx(
1950
+ "span",
1951
+ {
1952
+ style: tickLabelStyle(tokens.textMuted, pctPos, isFirst, isLast),
1953
+ children: label
1954
+ },
1955
+ tick
1956
+ );
1957
+ }) }),
1948
1958
  /* @__PURE__ */ jsx("style", { children: sliderThumbCss(tokens.accent) })
1949
1959
  ] });
1950
1960
  }
@@ -1985,14 +1995,18 @@ var rangeInputStyle = {
1985
1995
  background: "transparent"
1986
1996
  };
1987
1997
  var ticksStyle = {
1988
- display: "flex",
1989
- justifyContent: "space-between",
1998
+ position: "relative",
1999
+ height: 18,
1990
2000
  marginTop: 6
1991
2001
  };
1992
- var tickLabelStyle = (color) => ({
2002
+ var tickLabelStyle = (color, pct, isFirst, isLast) => ({
2003
+ position: "absolute",
2004
+ left: `${pct}%`,
2005
+ transform: isFirst ? "none" : isLast ? "translateX(-100%)" : "translateX(-50%)",
1993
2006
  fontSize: "0.72rem",
1994
2007
  fontWeight: 500,
1995
- color
2008
+ color,
2009
+ whiteSpace: "nowrap"
1996
2010
  });
1997
2011
  var sliderThumbCss = (accent) => `
1998
2012
  .swype-slider-wrap input[type="range"]::-webkit-slider-runnable-track {
@@ -3005,11 +3019,13 @@ function SetupScreen({
3005
3019
  onSetupOneTap,
3006
3020
  onBack,
3007
3021
  onLogout,
3022
+ onAdvanced,
3023
+ selectedSourceLabel,
3008
3024
  loading,
3009
3025
  error
3010
3026
  }) {
3011
3027
  const { tokens } = useSwypeConfig();
3012
- const effectiveMax = Math.min(DEFAULT_MAX, availableBalance > 0 ? availableBalance : DEFAULT_MAX);
3028
+ const effectiveMax = Math.floor(Math.min(DEFAULT_MAX, availableBalance > 0 ? availableBalance : DEFAULT_MAX) * 100) / 100;
3013
3029
  const effectiveMin = Math.min(ABSOLUTE_MIN, effectiveMax);
3014
3030
  const sliderStep = effectiveMax <= 10 ? 0.5 : effectiveMax <= 50 ? 1 : 5;
3015
3031
  const ticks = buildTicks(effectiveMin, effectiveMax);
@@ -3048,18 +3064,30 @@ function SetupScreen({
3048
3064
  ] })
3049
3065
  ] })
3050
3066
  ] }),
3051
- tokenCount > 0 && /* @__PURE__ */ jsxs("div", { style: tokenBadgeStyle(tokens), children: [
3052
- /* @__PURE__ */ jsx("span", { style: tokenDotStyle(tokens.accent) }),
3053
- tokenCount,
3054
- " ",
3055
- /* @__PURE__ */ jsx("span", { style: chevronStyle, children: ">" })
3056
- ] })
3067
+ tokenCount > 0 && /* @__PURE__ */ jsxs(
3068
+ "button",
3069
+ {
3070
+ type: "button",
3071
+ onClick: onAdvanced,
3072
+ style: tokenBadgeButtonStyle(tokens, !!onAdvanced),
3073
+ children: [
3074
+ /* @__PURE__ */ jsx("span", { style: tokenDotStyle(tokens.accent) }),
3075
+ tokenCount,
3076
+ " ",
3077
+ /* @__PURE__ */ jsx("span", { style: chevronStyle, children: ">" })
3078
+ ]
3079
+ }
3080
+ )
3081
+ ] }),
3082
+ selectedSourceLabel && /* @__PURE__ */ jsxs("div", { style: selectedSourceStyle(tokens.textSecondary), children: [
3083
+ "Source: ",
3084
+ /* @__PURE__ */ jsx("strong", { children: selectedSourceLabel })
3057
3085
  ] }),
3058
3086
  /* @__PURE__ */ jsxs("div", { style: limitSectionStyle, children: [
3059
3087
  /* @__PURE__ */ jsx("div", { style: limitLabelStyle(tokens.textMuted), children: "Your One-Tap limit" }),
3060
3088
  /* @__PURE__ */ jsxs("div", { style: limitValueStyle(tokens.text), children: [
3061
3089
  "$",
3062
- limit
3090
+ limit.toFixed(2)
3063
3091
  ] }),
3064
3092
  /* @__PURE__ */ jsx(
3065
3093
  LimitSlider,
@@ -3134,7 +3162,7 @@ var balanceValueStyle = (color) => ({
3134
3162
  fontWeight: 700,
3135
3163
  color
3136
3164
  });
3137
- var tokenBadgeStyle = (tokens) => ({
3165
+ var tokenBadgeButtonStyle = (tokens, clickable) => ({
3138
3166
  display: "flex",
3139
3167
  alignItems: "center",
3140
3168
  gap: 4,
@@ -3142,7 +3170,16 @@ var tokenBadgeStyle = (tokens) => ({
3142
3170
  color: tokens.textMuted,
3143
3171
  border: `1px solid ${tokens.border}`,
3144
3172
  borderRadius: 999,
3145
- padding: "4px 10px"
3173
+ padding: "4px 10px",
3174
+ background: "transparent",
3175
+ fontFamily: "inherit",
3176
+ cursor: clickable ? "pointer" : "default"
3177
+ });
3178
+ var selectedSourceStyle = (color) => ({
3179
+ fontSize: "0.8rem",
3180
+ color,
3181
+ marginBottom: 16,
3182
+ textAlign: "center"
3146
3183
  });
3147
3184
  var tokenDotStyle = (color) => ({
3148
3185
  width: 8,
@@ -3307,7 +3344,7 @@ function DepositScreen({
3307
3344
  ] })
3308
3345
  ] })
3309
3346
  ] }),
3310
- tokenCount > 0 && /* @__PURE__ */ jsxs("div", { style: tokenBadgeStyle2(tokens), children: [
3347
+ tokenCount > 0 && /* @__PURE__ */ jsxs("div", { style: tokenBadgeStyle(tokens), children: [
3311
3348
  /* @__PURE__ */ jsx("span", { style: tokenDotStyle2(tokens.accent) }),
3312
3349
  tokenCount,
3313
3350
  " ",
@@ -3370,7 +3407,7 @@ var balanceAmountStyle = {
3370
3407
  fontSize: "1rem",
3371
3408
  fontWeight: 700
3372
3409
  };
3373
- var tokenBadgeStyle2 = (tokens) => ({
3410
+ var tokenBadgeStyle = (tokens) => ({
3374
3411
  display: "flex",
3375
3412
  alignItems: "center",
3376
3413
  gap: 4,
@@ -3775,6 +3812,228 @@ var radioDotStyle = (color) => ({
3775
3812
  borderRadius: "50%",
3776
3813
  background: color
3777
3814
  });
3815
+ function AdvancedSourceScreen({
3816
+ choices,
3817
+ selectedChainName,
3818
+ selectedTokenSymbol,
3819
+ onSelectSource,
3820
+ onBack
3821
+ }) {
3822
+ const { tokens } = useSwypeConfig();
3823
+ const [expandedChain, setExpandedChain] = useState(
3824
+ selectedChainName || (choices[0]?.chainName ?? null)
3825
+ );
3826
+ const [localChain, setLocalChain] = useState(selectedChainName);
3827
+ const [localToken, setLocalToken] = useState(selectedTokenSymbol);
3828
+ const canConfirm = !!localChain && !!localToken;
3829
+ const handleChainToggle = (chainName) => {
3830
+ setExpandedChain((prev) => prev === chainName ? null : chainName);
3831
+ };
3832
+ const handleTokenSelect = (chainName, tokenSymbol) => {
3833
+ setLocalChain(chainName);
3834
+ setLocalToken(tokenSymbol);
3835
+ setExpandedChain(chainName);
3836
+ };
3837
+ return /* @__PURE__ */ jsxs(
3838
+ ScreenLayout,
3839
+ {
3840
+ footer: /* @__PURE__ */ jsxs(Fragment, { children: [
3841
+ /* @__PURE__ */ jsx(
3842
+ PrimaryButton,
3843
+ {
3844
+ onClick: () => onSelectSource(localChain, localToken),
3845
+ disabled: !canConfirm,
3846
+ children: "Select Source"
3847
+ }
3848
+ ),
3849
+ /* @__PURE__ */ jsx(PoweredByFooter, {})
3850
+ ] }),
3851
+ children: [
3852
+ /* @__PURE__ */ jsx(
3853
+ ScreenHeader,
3854
+ {
3855
+ title: "Swype Setup",
3856
+ onBack,
3857
+ right: /* @__PURE__ */ jsx("span", { style: advancedBadgeStyle(tokens.accent), children: "Advanced" })
3858
+ }
3859
+ ),
3860
+ /* @__PURE__ */ jsx("h2", { style: headingStyle7(tokens.text), children: "Set up One-Tap deposits" }),
3861
+ /* @__PURE__ */ jsx("p", { style: subtitleStyle8(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
3862
+ /* @__PURE__ */ jsx("label", { style: labelStyle3(tokens.textSecondary), children: "Select tokens to approve" }),
3863
+ /* @__PURE__ */ jsx("div", { style: chainListStyle, children: choices.map((chain) => {
3864
+ const isExpanded = expandedChain === chain.chainName;
3865
+ const chainHasSelection = localChain === chain.chainName;
3866
+ return /* @__PURE__ */ jsxs("div", { style: chainCardStyle(tokens), children: [
3867
+ /* @__PURE__ */ jsxs(
3868
+ "button",
3869
+ {
3870
+ type: "button",
3871
+ onClick: () => handleChainToggle(chain.chainName),
3872
+ style: chainHeaderStyle(tokens),
3873
+ children: [
3874
+ /* @__PURE__ */ jsxs("div", { style: chainHeaderLeftStyle, children: [
3875
+ /* @__PURE__ */ jsx("span", { style: chainNameStyle(tokens.text), children: chain.chainName }),
3876
+ /* @__PURE__ */ jsxs("span", { style: chainBalanceStyle(tokens.textMuted), children: [
3877
+ "$",
3878
+ chain.balance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
3879
+ ] })
3880
+ ] }),
3881
+ /* @__PURE__ */ jsx("span", { style: chevronIconStyle(isExpanded, tokens.textMuted), children: isExpanded ? "\u25BE" : "\u25B8" })
3882
+ ]
3883
+ }
3884
+ ),
3885
+ isExpanded && /* @__PURE__ */ jsx("div", { style: tokenListStyle, children: chain.tokens.map((token) => {
3886
+ const isSelected = chainHasSelection && localToken === token.tokenSymbol;
3887
+ return /* @__PURE__ */ jsxs(
3888
+ "button",
3889
+ {
3890
+ type: "button",
3891
+ onClick: () => handleTokenSelect(chain.chainName, token.tokenSymbol),
3892
+ style: tokenRowStyle(tokens, isSelected),
3893
+ children: [
3894
+ /* @__PURE__ */ jsxs("div", { style: tokenInfoStyle, children: [
3895
+ /* @__PURE__ */ jsx("span", { style: tokenSymbolStyle(tokens.text), children: token.tokenSymbol }),
3896
+ /* @__PURE__ */ jsxs("span", { style: tokenBalStyle(tokens.textMuted), children: [
3897
+ "Balance: ",
3898
+ token.balance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
3899
+ " ",
3900
+ token.tokenSymbol
3901
+ ] })
3902
+ ] }),
3903
+ /* @__PURE__ */ jsx("div", { style: radioStyle2(tokens, isSelected), children: isSelected && /* @__PURE__ */ jsx("div", { style: radioDotStyle2(tokens.accent) }) })
3904
+ ]
3905
+ },
3906
+ token.tokenSymbol
3907
+ );
3908
+ }) })
3909
+ ] }, chain.chainName);
3910
+ }) })
3911
+ ]
3912
+ }
3913
+ );
3914
+ }
3915
+ var advancedBadgeStyle = (color) => ({
3916
+ fontSize: "0.72rem",
3917
+ fontWeight: 600,
3918
+ color,
3919
+ border: `1px solid ${color}`,
3920
+ borderRadius: 999,
3921
+ padding: "3px 10px",
3922
+ letterSpacing: "0.02em"
3923
+ });
3924
+ var headingStyle7 = (color) => ({
3925
+ fontSize: "1.3rem",
3926
+ fontWeight: 700,
3927
+ letterSpacing: "-0.02em",
3928
+ color,
3929
+ margin: "8px 0 4px"
3930
+ });
3931
+ var subtitleStyle8 = (color) => ({
3932
+ fontSize: "0.86rem",
3933
+ color,
3934
+ margin: "0 0 20px",
3935
+ lineHeight: 1.5
3936
+ });
3937
+ var labelStyle3 = (color) => ({
3938
+ display: "block",
3939
+ fontSize: "0.75rem",
3940
+ fontWeight: 600,
3941
+ color,
3942
+ textTransform: "uppercase",
3943
+ letterSpacing: "0.05em",
3944
+ marginBottom: 10
3945
+ });
3946
+ var chainListStyle = {
3947
+ display: "flex",
3948
+ flexDirection: "column",
3949
+ gap: 10
3950
+ };
3951
+ var chainCardStyle = (tokens) => ({
3952
+ border: `1px solid ${tokens.border}`,
3953
+ borderRadius: 14,
3954
+ overflow: "hidden",
3955
+ background: tokens.bgInput
3956
+ });
3957
+ var chainHeaderStyle = (tokens, _expanded) => ({
3958
+ display: "flex",
3959
+ alignItems: "center",
3960
+ justifyContent: "space-between",
3961
+ width: "100%",
3962
+ padding: "14px 16px",
3963
+ background: tokens.bgInput,
3964
+ border: "none",
3965
+ cursor: "pointer",
3966
+ fontFamily: "inherit",
3967
+ textAlign: "left"
3968
+ });
3969
+ var chainHeaderLeftStyle = {
3970
+ display: "flex",
3971
+ flexDirection: "column",
3972
+ gap: 2
3973
+ };
3974
+ var chainNameStyle = (color) => ({
3975
+ fontSize: "0.92rem",
3976
+ fontWeight: 600,
3977
+ color
3978
+ });
3979
+ var chainBalanceStyle = (color) => ({
3980
+ fontSize: "0.76rem",
3981
+ color
3982
+ });
3983
+ var chevronIconStyle = (_expanded, color) => ({
3984
+ fontSize: "0.9rem",
3985
+ color,
3986
+ transition: "transform 0.15s ease"
3987
+ });
3988
+ var tokenListStyle = {
3989
+ padding: "0 12px 12px",
3990
+ display: "flex",
3991
+ flexDirection: "column",
3992
+ gap: 6
3993
+ };
3994
+ var tokenRowStyle = (tokens, selected) => ({
3995
+ display: "flex",
3996
+ alignItems: "center",
3997
+ justifyContent: "space-between",
3998
+ padding: "12px 14px",
3999
+ background: tokens.bgCard,
4000
+ border: `1.5px solid ${selected ? tokens.accent : tokens.border}`,
4001
+ borderRadius: 10,
4002
+ cursor: "pointer",
4003
+ fontFamily: "inherit",
4004
+ textAlign: "left",
4005
+ transition: "border-color 0.15s ease"
4006
+ });
4007
+ var tokenInfoStyle = {
4008
+ display: "flex",
4009
+ flexDirection: "column",
4010
+ gap: 2
4011
+ };
4012
+ var tokenSymbolStyle = (color) => ({
4013
+ fontSize: "0.88rem",
4014
+ fontWeight: 600,
4015
+ color
4016
+ });
4017
+ var tokenBalStyle = (color) => ({
4018
+ fontSize: "0.74rem",
4019
+ color
4020
+ });
4021
+ var radioStyle2 = (tokens, selected) => ({
4022
+ width: 20,
4023
+ height: 20,
4024
+ borderRadius: "50%",
4025
+ border: `2px solid ${selected ? tokens.accent : tokens.border}`,
4026
+ display: "flex",
4027
+ alignItems: "center",
4028
+ justifyContent: "center",
4029
+ flexShrink: 0
4030
+ });
4031
+ var radioDotStyle2 = (color) => ({
4032
+ width: 10,
4033
+ height: 10,
4034
+ borderRadius: "50%",
4035
+ background: color
4036
+ });
3778
4037
  var STEP_LABELS = ["Creating transfer", "Verifying", "Sent", "Done"];
3779
4038
  var PHASE_ACTIVE_INDEX = {
3780
4039
  creating: 0,
@@ -3800,7 +4059,7 @@ function TransferStatusScreen({
3800
4059
  /* @__PURE__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
3801
4060
  /* @__PURE__ */ jsxs("div", { style: contentStyle5, children: [
3802
4061
  /* @__PURE__ */ jsx(Spinner, { size: 48 }),
3803
- /* @__PURE__ */ jsx("h2", { style: headingStyle7(tokens.text), children: "Processing Transfer..." }),
4062
+ /* @__PURE__ */ jsx("h2", { style: headingStyle8(tokens.text), children: "Processing Transfer..." }),
3804
4063
  error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle5(tokens), children: error }),
3805
4064
  /* @__PURE__ */ jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsx(StepList, { steps }) }),
3806
4065
  /* @__PURE__ */ jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" })
@@ -3816,7 +4075,7 @@ var contentStyle5 = {
3816
4075
  textAlign: "center",
3817
4076
  padding: "0 24px"
3818
4077
  };
3819
- var headingStyle7 = (color) => ({
4078
+ var headingStyle8 = (color) => ({
3820
4079
  fontSize: "1.45rem",
3821
4080
  fontWeight: 700,
3822
4081
  letterSpacing: "-0.02em",
@@ -3855,6 +4114,12 @@ function OpenWalletScreen({
3855
4114
  const { tokens } = useSwypeConfig();
3856
4115
  const displayName = walletName ?? "your wallet";
3857
4116
  const logoSrc = walletName ? KNOWN_LOGOS[walletName.toLowerCase()] : void 0;
4117
+ const autoOpenedRef = useRef(null);
4118
+ useEffect(() => {
4119
+ if (loading || !deeplinkUri || autoOpenedRef.current === deeplinkUri) return;
4120
+ autoOpenedRef.current = deeplinkUri;
4121
+ window.location.href = deeplinkUri;
4122
+ }, [loading, deeplinkUri]);
3858
4123
  const handleOpen = useCallback(() => {
3859
4124
  const opened = window.open(deeplinkUri, "_blank");
3860
4125
  if (!opened && window === window.parent) {
@@ -3869,14 +4134,14 @@ function OpenWalletScreen({
3869
4134
  "Open ",
3870
4135
  displayName
3871
4136
  ] }),
3872
- /* @__PURE__ */ jsx("p", { style: hintStyle3(tokens.textMuted), children: loading ? "Preparing authorization..." : "Tap the button to authorize in your wallet app" })
4137
+ /* @__PURE__ */ jsx("p", { style: hintStyle3(tokens.textMuted), children: loading ? "Preparing authorization..." : "If your wallet didn't open automatically, tap the button above" })
3873
4138
  ] }),
3874
4139
  children: [
3875
4140
  /* @__PURE__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
3876
4141
  /* @__PURE__ */ jsxs("div", { style: contentStyle6, children: [
3877
4142
  logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle }) : /* @__PURE__ */ jsx(Spinner, { size: 48 }),
3878
- /* @__PURE__ */ jsx("h2", { style: headingStyle8(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
3879
- /* @__PURE__ */ jsx("p", { style: subtitleStyle8(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
4143
+ /* @__PURE__ */ jsx("h2", { style: headingStyle9(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
4144
+ /* @__PURE__ */ jsx("p", { style: subtitleStyle9(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
3880
4145
  !loading && /* @__PURE__ */ jsxs("div", { style: waitingBadgeStyle(tokens), children: [
3881
4146
  /* @__PURE__ */ jsx(Spinner, { size: 14 }),
3882
4147
  /* @__PURE__ */ jsx("span", { children: "Waiting for authorization..." })
@@ -3901,14 +4166,14 @@ var logoStyle = {
3901
4166
  borderRadius: 14,
3902
4167
  objectFit: "contain"
3903
4168
  };
3904
- var headingStyle8 = (color) => ({
4169
+ var headingStyle9 = (color) => ({
3905
4170
  fontSize: "1.45rem",
3906
4171
  fontWeight: 700,
3907
4172
  letterSpacing: "-0.02em",
3908
4173
  color,
3909
4174
  margin: "20px 0 8px"
3910
4175
  });
3911
- var subtitleStyle8 = (color) => ({
4176
+ var subtitleStyle9 = (color) => ({
3912
4177
  fontSize: "0.9rem",
3913
4178
  color,
3914
4179
  margin: "0 0 24px",
@@ -3932,6 +4197,98 @@ var hintStyle3 = (color) => ({
3932
4197
  color,
3933
4198
  margin: "8px 0 0"
3934
4199
  });
4200
+ function ConfirmSignScreen({
4201
+ walletName,
4202
+ signing,
4203
+ error,
4204
+ onSign,
4205
+ onLogout
4206
+ }) {
4207
+ const { tokens } = useSwypeConfig();
4208
+ const displayName = walletName ?? "your wallet";
4209
+ const logoSrc = walletName ? KNOWN_LOGOS[walletName.toLowerCase()] : void 0;
4210
+ return /* @__PURE__ */ jsxs(
4211
+ ScreenLayout,
4212
+ {
4213
+ footer: /* @__PURE__ */ jsxs(Fragment, { children: [
4214
+ /* @__PURE__ */ jsx(PrimaryButton, { onClick: onSign, disabled: signing, children: signing ? "Confirming..." : "Confirm payment" }),
4215
+ error && /* @__PURE__ */ jsx("p", { style: errorStyle2(tokens.textMuted), children: error }),
4216
+ !error && /* @__PURE__ */ jsx("p", { style: hintStyle4(tokens.textMuted), children: "You may be prompted for biometric verification" })
4217
+ ] }),
4218
+ children: [
4219
+ /* @__PURE__ */ jsx(ScreenHeader, { right: /* @__PURE__ */ jsx(SettingsMenu, { onLogout }) }),
4220
+ /* @__PURE__ */ jsxs("div", { style: contentStyle7, children: [
4221
+ logoSrc ? /* @__PURE__ */ jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsx(Spinner, { size: 48 }),
4222
+ /* @__PURE__ */ jsx("h2", { style: headingStyle10(tokens.text), children: "Wallet authorized" }),
4223
+ /* @__PURE__ */ jsxs("p", { style: subtitleStyle10(tokens.textSecondary), children: [
4224
+ displayName,
4225
+ " approved the connection. Tap below to confirm your payment."
4226
+ ] }),
4227
+ /* @__PURE__ */ jsxs("div", { style: successBadgeStyle(tokens), children: [
4228
+ /* @__PURE__ */ jsx("span", { style: checkmarkStyle, children: "\u2713" }),
4229
+ /* @__PURE__ */ jsx("span", { children: "Authorization complete" })
4230
+ ] })
4231
+ ] })
4232
+ ]
4233
+ }
4234
+ );
4235
+ }
4236
+ var contentStyle7 = {
4237
+ flex: 1,
4238
+ display: "flex",
4239
+ flexDirection: "column",
4240
+ alignItems: "center",
4241
+ justifyContent: "center",
4242
+ textAlign: "center",
4243
+ padding: "0 24px"
4244
+ };
4245
+ var logoStyle2 = {
4246
+ width: 56,
4247
+ height: 56,
4248
+ borderRadius: 14,
4249
+ objectFit: "contain"
4250
+ };
4251
+ var headingStyle10 = (color) => ({
4252
+ fontSize: "1.45rem",
4253
+ fontWeight: 700,
4254
+ letterSpacing: "-0.02em",
4255
+ color,
4256
+ margin: "20px 0 8px"
4257
+ });
4258
+ var subtitleStyle10 = (color) => ({
4259
+ fontSize: "0.9rem",
4260
+ color,
4261
+ margin: "0 0 24px",
4262
+ lineHeight: 1.5,
4263
+ maxWidth: 280
4264
+ });
4265
+ var successBadgeStyle = (tokens) => ({
4266
+ display: "inline-flex",
4267
+ alignItems: "center",
4268
+ gap: 8,
4269
+ padding: "8px 16px",
4270
+ borderRadius: 20,
4271
+ background: tokens.bgInput,
4272
+ border: `1px solid ${tokens.border}`,
4273
+ color: "#22c55e",
4274
+ fontSize: "0.82rem"
4275
+ });
4276
+ var checkmarkStyle = {
4277
+ fontWeight: 700,
4278
+ fontSize: "0.9rem"
4279
+ };
4280
+ var hintStyle4 = (color) => ({
4281
+ textAlign: "center",
4282
+ fontSize: "0.82rem",
4283
+ color,
4284
+ margin: "8px 0 0"
4285
+ });
4286
+ var errorStyle2 = (color) => ({
4287
+ textAlign: "center",
4288
+ fontSize: "0.82rem",
4289
+ color: "#ef4444",
4290
+ margin: "8px 0 0"
4291
+ });
3935
4292
  var PaymentErrorBoundary = class extends Component {
3936
4293
  constructor(props) {
3937
4294
  super(props);
@@ -3957,7 +4314,7 @@ var PaymentErrorBoundary = class extends Component {
3957
4314
  /* @__PURE__ */ jsx("path", { d: "M12 8v5", stroke: "#ef4444", strokeWidth: "1.5", strokeLinecap: "round" }),
3958
4315
  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "16", r: "0.75", fill: "#ef4444" })
3959
4316
  ] }) }),
3960
- /* @__PURE__ */ jsx("h2", { style: headingStyle9, children: "Something went wrong" }),
4317
+ /* @__PURE__ */ jsx("h2", { style: headingStyle11, children: "Something went wrong" }),
3961
4318
  /* @__PURE__ */ jsx("p", { style: messageStyle, children: "An unexpected error occurred. Please try again." }),
3962
4319
  /* @__PURE__ */ jsx("button", { type: "button", onClick: this.handleReset, style: buttonStyle3, children: "Try again" })
3963
4320
  ] });
@@ -3977,7 +4334,7 @@ var containerStyle8 = {
3977
4334
  var iconStyle4 = {
3978
4335
  marginBottom: 20
3979
4336
  };
3980
- var headingStyle9 = {
4337
+ var headingStyle11 = {
3981
4338
  fontSize: "1.25rem",
3982
4339
  fontWeight: 700,
3983
4340
  color: "#1a1a1a",
@@ -4000,13 +4357,6 @@ var buttonStyle3 = {
4000
4357
  fontFamily: "inherit",
4001
4358
  cursor: "pointer"
4002
4359
  };
4003
- function isInIframe() {
4004
- try {
4005
- return typeof window !== "undefined" && window !== window.top;
4006
- } catch {
4007
- return true;
4008
- }
4009
- }
4010
4360
  var ACTIVE_CREDENTIAL_STORAGE_KEY = "swype_active_credential_id";
4011
4361
  var MOBILE_FLOW_STORAGE_KEY = "swype_mobile_flow";
4012
4362
  var MIN_SEND_AMOUNT_USD = 0.25;
@@ -4353,7 +4703,7 @@ function SwypePaymentInner({
4353
4703
  if (defaults) {
4354
4704
  setSelectedAccountId(defaults.accountId);
4355
4705
  setSelectedWalletId(defaults.walletId);
4356
- } else if (prov.length > 0) {
4706
+ } else if (prov.length > 0 && !connectingNewAccount) {
4357
4707
  setSelectedProviderId(prov[0].id);
4358
4708
  }
4359
4709
  const hasActiveWallet = accts.some(
@@ -4436,23 +4786,8 @@ function SwypePaymentInner({
4436
4786
  });
4437
4787
  return;
4438
4788
  }
4439
- if (transferSigning.signing) return;
4440
- if (mobileSigningTransferIdRef.current === polledTransfer.id) return;
4441
- mobileSigningTransferIdRef.current = polledTransfer.id;
4442
- const sign = async () => {
4443
- try {
4444
- const signedTransfer = await transferSigning.signTransfer(polledTransfer.id);
4445
- setTransfer(signedTransfer);
4446
- clearMobileFlowState();
4447
- setStep("processing");
4448
- } catch (err) {
4449
- mobileSigningTransferIdRef.current = null;
4450
- const msg = err instanceof Error ? err.message : "Failed to sign transfer";
4451
- setError(msg);
4452
- onError?.(msg);
4453
- }
4454
- };
4455
- void sign();
4789
+ setTransfer(polledTransfer);
4790
+ setStep("confirm-sign");
4456
4791
  }, [mobileFlow, polling.transfer, polling.stopPolling, transferSigning, onError, reloadAccounts]);
4457
4792
  useEffect(() => {
4458
4793
  if (!mobileFlow) return;
@@ -4642,12 +4977,10 @@ function SwypePaymentInner({
4642
4977
  persistMobileFlowState({
4643
4978
  transferId: t.id,
4644
4979
  deeplinkUri: uri,
4645
- providerId: selectedProviderId,
4980
+ providerId: sourceOverrides?.sourceType === "providerId" ? sourceOverrides.sourceId : selectedProviderId,
4646
4981
  isSetup: mobileSetupFlowRef.current
4647
4982
  });
4648
- if (!isInIframe()) {
4649
- window.location.href = uri;
4650
- }
4983
+ window.location.href = uri;
4651
4984
  return;
4652
4985
  } else {
4653
4986
  await authExecutor.executeSession(t);
@@ -4803,6 +5136,20 @@ function SwypePaymentInner({
4803
5136
  setDeeplinkUri(null);
4804
5137
  resetHeadlessLogin();
4805
5138
  }, [logout, polling, depositAmount, resetHeadlessLogin]);
5139
+ const handleConfirmSign = useCallback(async () => {
5140
+ const t = transfer ?? polling.transfer;
5141
+ if (!t) return;
5142
+ try {
5143
+ const signedTransfer = await transferSigning.signTransfer(t.id);
5144
+ setTransfer(signedTransfer);
5145
+ clearMobileFlowState();
5146
+ setStep("processing");
5147
+ } catch (err) {
5148
+ const msg = err instanceof Error ? err.message : "Failed to sign transfer";
5149
+ setError(msg);
5150
+ onError?.(msg);
5151
+ }
5152
+ }, [transfer, polling.transfer, transferSigning, onError]);
4806
5153
  if (!ready) {
4807
5154
  return /* @__PURE__ */ jsx(ScreenLayout, { children: /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Spinner, { label: "Initializing..." }) }) });
4808
5155
  }
@@ -4884,6 +5231,19 @@ function SwypePaymentInner({
4884
5231
  }
4885
5232
  );
4886
5233
  }
5234
+ if (step === "confirm-sign") {
5235
+ const providerName = providers.find((p) => p.id === selectedProviderId)?.name ?? null;
5236
+ return /* @__PURE__ */ jsx(
5237
+ ConfirmSignScreen,
5238
+ {
5239
+ walletName: providerName,
5240
+ signing: transferSigning.signing,
5241
+ error: error || transferSigning.error,
5242
+ onSign: handleConfirmSign,
5243
+ onLogout: handleLogout
5244
+ }
5245
+ );
5246
+ }
4887
5247
  if (step === "deposit") {
4888
5248
  if (loadingData) {
4889
5249
  return /* @__PURE__ */ jsx(ScreenLayout, { children: /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Spinner, { label: "Loading..." }) }) });
@@ -4988,6 +5348,6 @@ function SwypePaymentInner({
4988
5348
  return null;
4989
5349
  }
4990
5350
 
4991
- export { IconCircle, OutlineButton, PasskeyIframeBlockedError, PoweredByFooter, PrimaryButton, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, Spinner, StepList, SwypePayment, SwypeProvider, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
5351
+ export { AdvancedSourceScreen, CreatePasskeyScreen, IconCircle, OutlineButton, PasskeyIframeBlockedError, PoweredByFooter, PrimaryButton, ScreenHeader, ScreenLayout, SelectSourceScreen, SettingsMenu, SetupScreen, Spinner, StepList, SwypePayment, SwypeProvider, buildPasskeyPopupOptions, createPasskeyCredential, createPasskeyViaPopup, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
4992
5352
  //# sourceMappingURL=index.js.map
4993
5353
  //# sourceMappingURL=index.js.map