@swype-org/react-sdk 0.1.59 → 0.1.64
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.cjs +377 -69
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +26 -5
- package/dist/index.d.ts +26 -5
- package/dist/index.js +377 -70
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -680,7 +680,7 @@ function createPasskeyViaPopup(options) {
|
|
|
680
680
|
return new Promise((resolve, reject) => {
|
|
681
681
|
const encoded = btoa(JSON.stringify(options));
|
|
682
682
|
const popupUrl = `${window.location.origin}/passkey-register#${encoded}`;
|
|
683
|
-
const popup = window.open(popupUrl, "swype-passkey"
|
|
683
|
+
const popup = window.open(popupUrl, "swype-passkey");
|
|
684
684
|
if (!popup) {
|
|
685
685
|
reject(new Error("Pop-up blocked. Please allow pop-ups for this site and try again."));
|
|
686
686
|
return;
|
|
@@ -1944,10 +1944,20 @@ function LimitSlider({
|
|
|
1944
1944
|
}
|
|
1945
1945
|
)
|
|
1946
1946
|
] }),
|
|
1947
|
-
ticks && ticks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: ticksStyle, children: ticks.map((tick) =>
|
|
1948
|
-
|
|
1949
|
-
|
|
1950
|
-
|
|
1947
|
+
ticks && ticks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: ticksStyle, children: ticks.map((tick, i) => {
|
|
1948
|
+
const pctPos = (tick - min) / (max - min) * 100;
|
|
1949
|
+
const isFirst = i === 0;
|
|
1950
|
+
const isLast = i === ticks.length - 1;
|
|
1951
|
+
const label = tick % 1 === 0 ? `$${tick}` : `$${tick.toFixed(2)}`;
|
|
1952
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1953
|
+
"span",
|
|
1954
|
+
{
|
|
1955
|
+
style: tickLabelStyle(tokens.textMuted, pctPos, isFirst, isLast),
|
|
1956
|
+
children: label
|
|
1957
|
+
},
|
|
1958
|
+
tick
|
|
1959
|
+
);
|
|
1960
|
+
}) }),
|
|
1951
1961
|
/* @__PURE__ */ jsxRuntime.jsx("style", { children: sliderThumbCss(tokens.accent) })
|
|
1952
1962
|
] });
|
|
1953
1963
|
}
|
|
@@ -1988,14 +1998,18 @@ var rangeInputStyle = {
|
|
|
1988
1998
|
background: "transparent"
|
|
1989
1999
|
};
|
|
1990
2000
|
var ticksStyle = {
|
|
1991
|
-
|
|
1992
|
-
|
|
2001
|
+
position: "relative",
|
|
2002
|
+
height: 18,
|
|
1993
2003
|
marginTop: 6
|
|
1994
2004
|
};
|
|
1995
|
-
var tickLabelStyle = (color) => ({
|
|
2005
|
+
var tickLabelStyle = (color, pct, isFirst, isLast) => ({
|
|
2006
|
+
position: "absolute",
|
|
2007
|
+
left: `${pct}%`,
|
|
2008
|
+
transform: isFirst ? "none" : isLast ? "translateX(-100%)" : "translateX(-50%)",
|
|
1996
2009
|
fontSize: "0.72rem",
|
|
1997
2010
|
fontWeight: 500,
|
|
1998
|
-
color
|
|
2011
|
+
color,
|
|
2012
|
+
whiteSpace: "nowrap"
|
|
1999
2013
|
});
|
|
2000
2014
|
var sliderThumbCss = (accent) => `
|
|
2001
2015
|
.swype-slider-wrap input[type="range"]::-webkit-slider-runnable-track {
|
|
@@ -3008,11 +3022,13 @@ function SetupScreen({
|
|
|
3008
3022
|
onSetupOneTap,
|
|
3009
3023
|
onBack,
|
|
3010
3024
|
onLogout,
|
|
3025
|
+
onAdvanced,
|
|
3026
|
+
selectedSourceLabel,
|
|
3011
3027
|
loading,
|
|
3012
3028
|
error
|
|
3013
3029
|
}) {
|
|
3014
3030
|
const { tokens } = useSwypeConfig();
|
|
3015
|
-
const effectiveMax = Math.min(DEFAULT_MAX, availableBalance > 0 ? availableBalance : DEFAULT_MAX);
|
|
3031
|
+
const effectiveMax = Math.floor(Math.min(DEFAULT_MAX, availableBalance > 0 ? availableBalance : DEFAULT_MAX) * 100) / 100;
|
|
3016
3032
|
const effectiveMin = Math.min(ABSOLUTE_MIN, effectiveMax);
|
|
3017
3033
|
const sliderStep = effectiveMax <= 10 ? 0.5 : effectiveMax <= 50 ? 1 : 5;
|
|
3018
3034
|
const ticks = buildTicks(effectiveMin, effectiveMax);
|
|
@@ -3051,18 +3067,30 @@ function SetupScreen({
|
|
|
3051
3067
|
] })
|
|
3052
3068
|
] })
|
|
3053
3069
|
] }),
|
|
3054
|
-
tokenCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3055
|
-
|
|
3056
|
-
|
|
3057
|
-
|
|
3058
|
-
|
|
3059
|
-
|
|
3070
|
+
tokenCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3071
|
+
"button",
|
|
3072
|
+
{
|
|
3073
|
+
type: "button",
|
|
3074
|
+
onClick: onAdvanced,
|
|
3075
|
+
style: tokenBadgeButtonStyle(tokens, !!onAdvanced),
|
|
3076
|
+
children: [
|
|
3077
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenDotStyle(tokens.accent) }),
|
|
3078
|
+
tokenCount,
|
|
3079
|
+
" ",
|
|
3080
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: chevronStyle, children: ">" })
|
|
3081
|
+
]
|
|
3082
|
+
}
|
|
3083
|
+
)
|
|
3084
|
+
] }),
|
|
3085
|
+
selectedSourceLabel && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: selectedSourceStyle(tokens.textSecondary), children: [
|
|
3086
|
+
"Source: ",
|
|
3087
|
+
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: selectedSourceLabel })
|
|
3060
3088
|
] }),
|
|
3061
3089
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: limitSectionStyle, children: [
|
|
3062
3090
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: limitLabelStyle(tokens.textMuted), children: "Your One-Tap limit" }),
|
|
3063
3091
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: limitValueStyle(tokens.text), children: [
|
|
3064
3092
|
"$",
|
|
3065
|
-
limit
|
|
3093
|
+
limit.toFixed(2)
|
|
3066
3094
|
] }),
|
|
3067
3095
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3068
3096
|
LimitSlider,
|
|
@@ -3137,7 +3165,7 @@ var balanceValueStyle = (color) => ({
|
|
|
3137
3165
|
fontWeight: 700,
|
|
3138
3166
|
color
|
|
3139
3167
|
});
|
|
3140
|
-
var
|
|
3168
|
+
var tokenBadgeButtonStyle = (tokens, clickable) => ({
|
|
3141
3169
|
display: "flex",
|
|
3142
3170
|
alignItems: "center",
|
|
3143
3171
|
gap: 4,
|
|
@@ -3145,7 +3173,16 @@ var tokenBadgeStyle = (tokens) => ({
|
|
|
3145
3173
|
color: tokens.textMuted,
|
|
3146
3174
|
border: `1px solid ${tokens.border}`,
|
|
3147
3175
|
borderRadius: 999,
|
|
3148
|
-
padding: "4px 10px"
|
|
3176
|
+
padding: "4px 10px",
|
|
3177
|
+
background: "transparent",
|
|
3178
|
+
fontFamily: "inherit",
|
|
3179
|
+
cursor: clickable ? "pointer" : "default"
|
|
3180
|
+
});
|
|
3181
|
+
var selectedSourceStyle = (color) => ({
|
|
3182
|
+
fontSize: "0.8rem",
|
|
3183
|
+
color,
|
|
3184
|
+
marginBottom: 16,
|
|
3185
|
+
textAlign: "center"
|
|
3149
3186
|
});
|
|
3150
3187
|
var tokenDotStyle = (color) => ({
|
|
3151
3188
|
width: 8,
|
|
@@ -3310,7 +3347,7 @@ function DepositScreen({
|
|
|
3310
3347
|
] })
|
|
3311
3348
|
] })
|
|
3312
3349
|
] }),
|
|
3313
|
-
tokenCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
3350
|
+
tokenCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenBadgeStyle(tokens), children: [
|
|
3314
3351
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenDotStyle2(tokens.accent) }),
|
|
3315
3352
|
tokenCount,
|
|
3316
3353
|
" ",
|
|
@@ -3373,7 +3410,7 @@ var balanceAmountStyle = {
|
|
|
3373
3410
|
fontSize: "1rem",
|
|
3374
3411
|
fontWeight: 700
|
|
3375
3412
|
};
|
|
3376
|
-
var
|
|
3413
|
+
var tokenBadgeStyle = (tokens) => ({
|
|
3377
3414
|
display: "flex",
|
|
3378
3415
|
alignItems: "center",
|
|
3379
3416
|
gap: 4,
|
|
@@ -3778,6 +3815,228 @@ var radioDotStyle = (color) => ({
|
|
|
3778
3815
|
borderRadius: "50%",
|
|
3779
3816
|
background: color
|
|
3780
3817
|
});
|
|
3818
|
+
function AdvancedSourceScreen({
|
|
3819
|
+
choices,
|
|
3820
|
+
selectedChainName,
|
|
3821
|
+
selectedTokenSymbol,
|
|
3822
|
+
onSelectSource,
|
|
3823
|
+
onBack
|
|
3824
|
+
}) {
|
|
3825
|
+
const { tokens } = useSwypeConfig();
|
|
3826
|
+
const [expandedChain, setExpandedChain] = react.useState(
|
|
3827
|
+
selectedChainName || (choices[0]?.chainName ?? null)
|
|
3828
|
+
);
|
|
3829
|
+
const [localChain, setLocalChain] = react.useState(selectedChainName);
|
|
3830
|
+
const [localToken, setLocalToken] = react.useState(selectedTokenSymbol);
|
|
3831
|
+
const canConfirm = !!localChain && !!localToken;
|
|
3832
|
+
const handleChainToggle = (chainName) => {
|
|
3833
|
+
setExpandedChain((prev) => prev === chainName ? null : chainName);
|
|
3834
|
+
};
|
|
3835
|
+
const handleTokenSelect = (chainName, tokenSymbol) => {
|
|
3836
|
+
setLocalChain(chainName);
|
|
3837
|
+
setLocalToken(tokenSymbol);
|
|
3838
|
+
setExpandedChain(chainName);
|
|
3839
|
+
};
|
|
3840
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3841
|
+
ScreenLayout,
|
|
3842
|
+
{
|
|
3843
|
+
footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3844
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3845
|
+
PrimaryButton,
|
|
3846
|
+
{
|
|
3847
|
+
onClick: () => onSelectSource(localChain, localToken),
|
|
3848
|
+
disabled: !canConfirm,
|
|
3849
|
+
children: "Select Source"
|
|
3850
|
+
}
|
|
3851
|
+
),
|
|
3852
|
+
/* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
|
|
3853
|
+
] }),
|
|
3854
|
+
children: [
|
|
3855
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3856
|
+
ScreenHeader,
|
|
3857
|
+
{
|
|
3858
|
+
title: "Swype Setup",
|
|
3859
|
+
onBack,
|
|
3860
|
+
right: /* @__PURE__ */ jsxRuntime.jsx("span", { style: advancedBadgeStyle(tokens.accent), children: "Advanced" })
|
|
3861
|
+
}
|
|
3862
|
+
),
|
|
3863
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle7(tokens.text), children: "Set up One-Tap deposits" }),
|
|
3864
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle8(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
|
|
3865
|
+
/* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle3(tokens.textSecondary), children: "Select tokens to approve" }),
|
|
3866
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: chainListStyle, children: choices.map((chain) => {
|
|
3867
|
+
const isExpanded = expandedChain === chain.chainName;
|
|
3868
|
+
const chainHasSelection = localChain === chain.chainName;
|
|
3869
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: chainCardStyle(tokens), children: [
|
|
3870
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3871
|
+
"button",
|
|
3872
|
+
{
|
|
3873
|
+
type: "button",
|
|
3874
|
+
onClick: () => handleChainToggle(chain.chainName),
|
|
3875
|
+
style: chainHeaderStyle(tokens),
|
|
3876
|
+
children: [
|
|
3877
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: chainHeaderLeftStyle, children: [
|
|
3878
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: chainNameStyle(tokens.text), children: chain.chainName }),
|
|
3879
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { style: chainBalanceStyle(tokens.textMuted), children: [
|
|
3880
|
+
"$",
|
|
3881
|
+
chain.balance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
3882
|
+
] })
|
|
3883
|
+
] }),
|
|
3884
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: chevronIconStyle(isExpanded, tokens.textMuted), children: isExpanded ? "\u25BE" : "\u25B8" })
|
|
3885
|
+
]
|
|
3886
|
+
}
|
|
3887
|
+
),
|
|
3888
|
+
isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { style: tokenListStyle, children: chain.tokens.map((token) => {
|
|
3889
|
+
const isSelected = chainHasSelection && localToken === token.tokenSymbol;
|
|
3890
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3891
|
+
"button",
|
|
3892
|
+
{
|
|
3893
|
+
type: "button",
|
|
3894
|
+
onClick: () => handleTokenSelect(chain.chainName, token.tokenSymbol),
|
|
3895
|
+
style: tokenRowStyle(tokens, isSelected),
|
|
3896
|
+
children: [
|
|
3897
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenInfoStyle, children: [
|
|
3898
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenSymbolStyle(tokens.text), children: token.tokenSymbol }),
|
|
3899
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { style: tokenBalStyle(tokens.textMuted), children: [
|
|
3900
|
+
"Balance: ",
|
|
3901
|
+
token.balance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
|
|
3902
|
+
" ",
|
|
3903
|
+
token.tokenSymbol
|
|
3904
|
+
] })
|
|
3905
|
+
] }),
|
|
3906
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: radioStyle2(tokens, isSelected), children: isSelected && /* @__PURE__ */ jsxRuntime.jsx("div", { style: radioDotStyle2(tokens.accent) }) })
|
|
3907
|
+
]
|
|
3908
|
+
},
|
|
3909
|
+
token.tokenSymbol
|
|
3910
|
+
);
|
|
3911
|
+
}) })
|
|
3912
|
+
] }, chain.chainName);
|
|
3913
|
+
}) })
|
|
3914
|
+
]
|
|
3915
|
+
}
|
|
3916
|
+
);
|
|
3917
|
+
}
|
|
3918
|
+
var advancedBadgeStyle = (color) => ({
|
|
3919
|
+
fontSize: "0.72rem",
|
|
3920
|
+
fontWeight: 600,
|
|
3921
|
+
color,
|
|
3922
|
+
border: `1px solid ${color}`,
|
|
3923
|
+
borderRadius: 999,
|
|
3924
|
+
padding: "3px 10px",
|
|
3925
|
+
letterSpacing: "0.02em"
|
|
3926
|
+
});
|
|
3927
|
+
var headingStyle7 = (color) => ({
|
|
3928
|
+
fontSize: "1.3rem",
|
|
3929
|
+
fontWeight: 700,
|
|
3930
|
+
letterSpacing: "-0.02em",
|
|
3931
|
+
color,
|
|
3932
|
+
margin: "8px 0 4px"
|
|
3933
|
+
});
|
|
3934
|
+
var subtitleStyle8 = (color) => ({
|
|
3935
|
+
fontSize: "0.86rem",
|
|
3936
|
+
color,
|
|
3937
|
+
margin: "0 0 20px",
|
|
3938
|
+
lineHeight: 1.5
|
|
3939
|
+
});
|
|
3940
|
+
var labelStyle3 = (color) => ({
|
|
3941
|
+
display: "block",
|
|
3942
|
+
fontSize: "0.75rem",
|
|
3943
|
+
fontWeight: 600,
|
|
3944
|
+
color,
|
|
3945
|
+
textTransform: "uppercase",
|
|
3946
|
+
letterSpacing: "0.05em",
|
|
3947
|
+
marginBottom: 10
|
|
3948
|
+
});
|
|
3949
|
+
var chainListStyle = {
|
|
3950
|
+
display: "flex",
|
|
3951
|
+
flexDirection: "column",
|
|
3952
|
+
gap: 10
|
|
3953
|
+
};
|
|
3954
|
+
var chainCardStyle = (tokens) => ({
|
|
3955
|
+
border: `1px solid ${tokens.border}`,
|
|
3956
|
+
borderRadius: 14,
|
|
3957
|
+
overflow: "hidden",
|
|
3958
|
+
background: tokens.bgInput
|
|
3959
|
+
});
|
|
3960
|
+
var chainHeaderStyle = (tokens, _expanded) => ({
|
|
3961
|
+
display: "flex",
|
|
3962
|
+
alignItems: "center",
|
|
3963
|
+
justifyContent: "space-between",
|
|
3964
|
+
width: "100%",
|
|
3965
|
+
padding: "14px 16px",
|
|
3966
|
+
background: tokens.bgInput,
|
|
3967
|
+
border: "none",
|
|
3968
|
+
cursor: "pointer",
|
|
3969
|
+
fontFamily: "inherit",
|
|
3970
|
+
textAlign: "left"
|
|
3971
|
+
});
|
|
3972
|
+
var chainHeaderLeftStyle = {
|
|
3973
|
+
display: "flex",
|
|
3974
|
+
flexDirection: "column",
|
|
3975
|
+
gap: 2
|
|
3976
|
+
};
|
|
3977
|
+
var chainNameStyle = (color) => ({
|
|
3978
|
+
fontSize: "0.92rem",
|
|
3979
|
+
fontWeight: 600,
|
|
3980
|
+
color
|
|
3981
|
+
});
|
|
3982
|
+
var chainBalanceStyle = (color) => ({
|
|
3983
|
+
fontSize: "0.76rem",
|
|
3984
|
+
color
|
|
3985
|
+
});
|
|
3986
|
+
var chevronIconStyle = (_expanded, color) => ({
|
|
3987
|
+
fontSize: "0.9rem",
|
|
3988
|
+
color,
|
|
3989
|
+
transition: "transform 0.15s ease"
|
|
3990
|
+
});
|
|
3991
|
+
var tokenListStyle = {
|
|
3992
|
+
padding: "0 12px 12px",
|
|
3993
|
+
display: "flex",
|
|
3994
|
+
flexDirection: "column",
|
|
3995
|
+
gap: 6
|
|
3996
|
+
};
|
|
3997
|
+
var tokenRowStyle = (tokens, selected) => ({
|
|
3998
|
+
display: "flex",
|
|
3999
|
+
alignItems: "center",
|
|
4000
|
+
justifyContent: "space-between",
|
|
4001
|
+
padding: "12px 14px",
|
|
4002
|
+
background: tokens.bgCard,
|
|
4003
|
+
border: `1.5px solid ${selected ? tokens.accent : tokens.border}`,
|
|
4004
|
+
borderRadius: 10,
|
|
4005
|
+
cursor: "pointer",
|
|
4006
|
+
fontFamily: "inherit",
|
|
4007
|
+
textAlign: "left",
|
|
4008
|
+
transition: "border-color 0.15s ease"
|
|
4009
|
+
});
|
|
4010
|
+
var tokenInfoStyle = {
|
|
4011
|
+
display: "flex",
|
|
4012
|
+
flexDirection: "column",
|
|
4013
|
+
gap: 2
|
|
4014
|
+
};
|
|
4015
|
+
var tokenSymbolStyle = (color) => ({
|
|
4016
|
+
fontSize: "0.88rem",
|
|
4017
|
+
fontWeight: 600,
|
|
4018
|
+
color
|
|
4019
|
+
});
|
|
4020
|
+
var tokenBalStyle = (color) => ({
|
|
4021
|
+
fontSize: "0.74rem",
|
|
4022
|
+
color
|
|
4023
|
+
});
|
|
4024
|
+
var radioStyle2 = (tokens, selected) => ({
|
|
4025
|
+
width: 20,
|
|
4026
|
+
height: 20,
|
|
4027
|
+
borderRadius: "50%",
|
|
4028
|
+
border: `2px solid ${selected ? tokens.accent : tokens.border}`,
|
|
4029
|
+
display: "flex",
|
|
4030
|
+
alignItems: "center",
|
|
4031
|
+
justifyContent: "center",
|
|
4032
|
+
flexShrink: 0
|
|
4033
|
+
});
|
|
4034
|
+
var radioDotStyle2 = (color) => ({
|
|
4035
|
+
width: 10,
|
|
4036
|
+
height: 10,
|
|
4037
|
+
borderRadius: "50%",
|
|
4038
|
+
background: color
|
|
4039
|
+
});
|
|
3781
4040
|
var STEP_LABELS = ["Creating transfer", "Verifying", "Sent", "Done"];
|
|
3782
4041
|
var PHASE_ACTIVE_INDEX = {
|
|
3783
4042
|
creating: 0,
|
|
@@ -3803,7 +4062,7 @@ function TransferStatusScreen({
|
|
|
3803
4062
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
|
|
3804
4063
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
|
|
3805
4064
|
/* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
|
|
3806
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { style:
|
|
4065
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle8(tokens.text), children: "Processing Transfer..." }),
|
|
3807
4066
|
error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle5(tokens), children: error }),
|
|
3808
4067
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) }),
|
|
3809
4068
|
/* @__PURE__ */ jsxRuntime.jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" })
|
|
@@ -3819,7 +4078,7 @@ var contentStyle5 = {
|
|
|
3819
4078
|
textAlign: "center",
|
|
3820
4079
|
padding: "0 24px"
|
|
3821
4080
|
};
|
|
3822
|
-
var
|
|
4081
|
+
var headingStyle8 = (color) => ({
|
|
3823
4082
|
fontSize: "1.45rem",
|
|
3824
4083
|
fontWeight: 700,
|
|
3825
4084
|
letterSpacing: "-0.02em",
|
|
@@ -3862,10 +4121,7 @@ function OpenWalletScreen({
|
|
|
3862
4121
|
react.useEffect(() => {
|
|
3863
4122
|
if (loading || !deeplinkUri || autoOpenedRef.current === deeplinkUri) return;
|
|
3864
4123
|
autoOpenedRef.current = deeplinkUri;
|
|
3865
|
-
|
|
3866
|
-
if (!opened && window === window.parent) {
|
|
3867
|
-
window.location.href = deeplinkUri;
|
|
3868
|
-
}
|
|
4124
|
+
window.location.href = deeplinkUri;
|
|
3869
4125
|
}, [loading, deeplinkUri]);
|
|
3870
4126
|
const handleOpen = react.useCallback(() => {
|
|
3871
4127
|
const opened = window.open(deeplinkUri, "_blank");
|
|
@@ -3887,8 +4143,8 @@ function OpenWalletScreen({
|
|
|
3887
4143
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
|
|
3888
4144
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle6, children: [
|
|
3889
4145
|
logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
|
|
3890
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { style:
|
|
3891
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style:
|
|
4146
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle9(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
|
|
4147
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle9(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
|
|
3892
4148
|
!loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: waitingBadgeStyle(tokens), children: [
|
|
3893
4149
|
/* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 14 }),
|
|
3894
4150
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Waiting for authorization..." })
|
|
@@ -3913,14 +4169,14 @@ var logoStyle = {
|
|
|
3913
4169
|
borderRadius: 14,
|
|
3914
4170
|
objectFit: "contain"
|
|
3915
4171
|
};
|
|
3916
|
-
var
|
|
4172
|
+
var headingStyle9 = (color) => ({
|
|
3917
4173
|
fontSize: "1.45rem",
|
|
3918
4174
|
fontWeight: 700,
|
|
3919
4175
|
letterSpacing: "-0.02em",
|
|
3920
4176
|
color,
|
|
3921
4177
|
margin: "20px 0 8px"
|
|
3922
4178
|
});
|
|
3923
|
-
var
|
|
4179
|
+
var subtitleStyle9 = (color) => ({
|
|
3924
4180
|
fontSize: "0.9rem",
|
|
3925
4181
|
color,
|
|
3926
4182
|
margin: "0 0 24px",
|
|
@@ -3966,8 +4222,8 @@ function ConfirmSignScreen({
|
|
|
3966
4222
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
|
|
3967
4223
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle7, children: [
|
|
3968
4224
|
logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
|
|
3969
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { style:
|
|
3970
|
-
/* @__PURE__ */ jsxRuntime.jsxs("p", { style:
|
|
4225
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle10(tokens.text), children: "Wallet authorized" }),
|
|
4226
|
+
/* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle10(tokens.textSecondary), children: [
|
|
3971
4227
|
displayName,
|
|
3972
4228
|
" approved the connection. Tap below to confirm your payment."
|
|
3973
4229
|
] }),
|
|
@@ -3995,14 +4251,14 @@ var logoStyle2 = {
|
|
|
3995
4251
|
borderRadius: 14,
|
|
3996
4252
|
objectFit: "contain"
|
|
3997
4253
|
};
|
|
3998
|
-
var
|
|
4254
|
+
var headingStyle10 = (color) => ({
|
|
3999
4255
|
fontSize: "1.45rem",
|
|
4000
4256
|
fontWeight: 700,
|
|
4001
4257
|
letterSpacing: "-0.02em",
|
|
4002
4258
|
color,
|
|
4003
4259
|
margin: "20px 0 8px"
|
|
4004
4260
|
});
|
|
4005
|
-
var
|
|
4261
|
+
var subtitleStyle10 = (color) => ({
|
|
4006
4262
|
fontSize: "0.9rem",
|
|
4007
4263
|
color,
|
|
4008
4264
|
margin: "0 0 24px",
|
|
@@ -4061,7 +4317,7 @@ var PaymentErrorBoundary = class extends react.Component {
|
|
|
4061
4317
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8v5", stroke: "#ef4444", strokeWidth: "1.5", strokeLinecap: "round" }),
|
|
4062
4318
|
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "16", r: "0.75", fill: "#ef4444" })
|
|
4063
4319
|
] }) }),
|
|
4064
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { style:
|
|
4320
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle11, children: "Something went wrong" }),
|
|
4065
4321
|
/* @__PURE__ */ jsxRuntime.jsx("p", { style: messageStyle, children: "An unexpected error occurred. Please try again." }),
|
|
4066
4322
|
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: this.handleReset, style: buttonStyle3, children: "Try again" })
|
|
4067
4323
|
] });
|
|
@@ -4081,7 +4337,7 @@ var containerStyle8 = {
|
|
|
4081
4337
|
var iconStyle4 = {
|
|
4082
4338
|
marginBottom: 20
|
|
4083
4339
|
};
|
|
4084
|
-
var
|
|
4340
|
+
var headingStyle11 = {
|
|
4085
4341
|
fontSize: "1.25rem",
|
|
4086
4342
|
fontWeight: 700,
|
|
4087
4343
|
color: "#1a1a1a",
|
|
@@ -4104,13 +4360,6 @@ var buttonStyle3 = {
|
|
|
4104
4360
|
fontFamily: "inherit",
|
|
4105
4361
|
cursor: "pointer"
|
|
4106
4362
|
};
|
|
4107
|
-
function isInIframe() {
|
|
4108
|
-
try {
|
|
4109
|
-
return typeof window !== "undefined" && window !== window.top;
|
|
4110
|
-
} catch {
|
|
4111
|
-
return true;
|
|
4112
|
-
}
|
|
4113
|
-
}
|
|
4114
4363
|
var ACTIVE_CREDENTIAL_STORAGE_KEY = "swype_active_credential_id";
|
|
4115
4364
|
var MOBILE_FLOW_STORAGE_KEY = "swype_mobile_flow";
|
|
4116
4365
|
var MIN_SEND_AMOUNT_USD = 0.25;
|
|
@@ -4203,6 +4452,24 @@ function buildSelectSourceChoices(options) {
|
|
|
4203
4452
|
}
|
|
4204
4453
|
return chainChoices;
|
|
4205
4454
|
}
|
|
4455
|
+
function resolvePostAuthStep(state) {
|
|
4456
|
+
if (!state.hasPasskey) {
|
|
4457
|
+
return { step: "create-passkey", clearPersistedFlow: false };
|
|
4458
|
+
}
|
|
4459
|
+
const hasActiveWallet = state.accounts.some(
|
|
4460
|
+
(a) => a.wallets.some((w) => w.status === "ACTIVE")
|
|
4461
|
+
);
|
|
4462
|
+
if (state.persistedMobileFlow) {
|
|
4463
|
+
if (hasActiveWallet && !state.mobileSetupInProgress) {
|
|
4464
|
+
return { step: "deposit", clearPersistedFlow: true };
|
|
4465
|
+
}
|
|
4466
|
+
return { step: "open-wallet", clearPersistedFlow: false };
|
|
4467
|
+
}
|
|
4468
|
+
if ((state.accounts.length === 0 || !hasActiveWallet) && !state.connectingNewAccount) {
|
|
4469
|
+
return { step: "wallet-picker", clearPersistedFlow: false };
|
|
4470
|
+
}
|
|
4471
|
+
return { step: "deposit", clearPersistedFlow: false };
|
|
4472
|
+
}
|
|
4206
4473
|
function SwypePayment(props) {
|
|
4207
4474
|
const resetKey = react.useRef(0);
|
|
4208
4475
|
const handleBoundaryReset = react.useCallback(() => {
|
|
@@ -4377,19 +4644,47 @@ function SwypePaymentInner({
|
|
|
4377
4644
|
let cancelled = false;
|
|
4378
4645
|
setError(null);
|
|
4379
4646
|
resetHeadlessLogin();
|
|
4380
|
-
const restoreOrDeposit = () => {
|
|
4647
|
+
const restoreOrDeposit = async (credId, token) => {
|
|
4381
4648
|
const persisted = loadMobileFlowState();
|
|
4382
|
-
|
|
4649
|
+
let accts = [];
|
|
4650
|
+
try {
|
|
4651
|
+
accts = await fetchAccounts(apiBaseUrl, token, credId);
|
|
4652
|
+
if (cancelled) return;
|
|
4653
|
+
} catch {
|
|
4654
|
+
}
|
|
4655
|
+
const resolved = resolvePostAuthStep({
|
|
4656
|
+
hasPasskey: true,
|
|
4657
|
+
accounts: accts,
|
|
4658
|
+
persistedMobileFlow: persisted,
|
|
4659
|
+
mobileSetupInProgress: false,
|
|
4660
|
+
connectingNewAccount: false
|
|
4661
|
+
});
|
|
4662
|
+
if (resolved.clearPersistedFlow) {
|
|
4663
|
+
clearMobileFlowState();
|
|
4664
|
+
}
|
|
4665
|
+
if (resolved.step === "open-wallet" && persisted) {
|
|
4666
|
+
try {
|
|
4667
|
+
const existingTransfer = await fetchTransfer(apiBaseUrl, token, persisted.transferId);
|
|
4668
|
+
if (cancelled) return;
|
|
4669
|
+
const terminalStatuses = ["AUTHORIZED", "COMPLETED", "FAILED"];
|
|
4670
|
+
if (terminalStatuses.includes(existingTransfer.status)) {
|
|
4671
|
+
clearMobileFlowState();
|
|
4672
|
+
setStep("deposit");
|
|
4673
|
+
return;
|
|
4674
|
+
}
|
|
4675
|
+
} catch {
|
|
4676
|
+
clearMobileFlowState();
|
|
4677
|
+
setStep("deposit");
|
|
4678
|
+
return;
|
|
4679
|
+
}
|
|
4383
4680
|
setMobileFlow(true);
|
|
4384
4681
|
setDeeplinkUri(persisted.deeplinkUri);
|
|
4385
4682
|
setSelectedProviderId(persisted.providerId);
|
|
4386
4683
|
pollingTransferIdRef.current = persisted.transferId;
|
|
4387
4684
|
mobileSetupFlowRef.current = persisted.isSetup;
|
|
4388
|
-
setStep("open-wallet");
|
|
4389
4685
|
polling.startPolling(persisted.transferId);
|
|
4390
|
-
} else {
|
|
4391
|
-
setStep("deposit");
|
|
4392
4686
|
}
|
|
4687
|
+
setStep(resolved.step);
|
|
4393
4688
|
};
|
|
4394
4689
|
const checkPasskey = async () => {
|
|
4395
4690
|
try {
|
|
@@ -4406,7 +4701,7 @@ function SwypePaymentInner({
|
|
|
4406
4701
|
return;
|
|
4407
4702
|
}
|
|
4408
4703
|
if (activeCredentialId && allPasskeys.some((p) => p.credentialId === activeCredentialId)) {
|
|
4409
|
-
restoreOrDeposit();
|
|
4704
|
+
await restoreOrDeposit(activeCredentialId, token);
|
|
4410
4705
|
return;
|
|
4411
4706
|
}
|
|
4412
4707
|
if (cancelled) return;
|
|
@@ -4416,7 +4711,7 @@ function SwypePaymentInner({
|
|
|
4416
4711
|
if (matched) {
|
|
4417
4712
|
setActiveCredentialId(matched);
|
|
4418
4713
|
window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, matched);
|
|
4419
|
-
restoreOrDeposit();
|
|
4714
|
+
await restoreOrDeposit(matched, token);
|
|
4420
4715
|
return;
|
|
4421
4716
|
}
|
|
4422
4717
|
setStep("create-passkey");
|
|
@@ -4457,14 +4752,25 @@ function SwypePaymentInner({
|
|
|
4457
4752
|
if (defaults) {
|
|
4458
4753
|
setSelectedAccountId(defaults.accountId);
|
|
4459
4754
|
setSelectedWalletId(defaults.walletId);
|
|
4460
|
-
} else if (prov.length > 0) {
|
|
4755
|
+
} else if (prov.length > 0 && !connectingNewAccount) {
|
|
4461
4756
|
setSelectedProviderId(prov[0].id);
|
|
4462
4757
|
}
|
|
4463
|
-
const
|
|
4464
|
-
|
|
4465
|
-
|
|
4466
|
-
|
|
4467
|
-
|
|
4758
|
+
const persisted = loadMobileFlowState();
|
|
4759
|
+
const resolved = resolvePostAuthStep({
|
|
4760
|
+
hasPasskey: !!activeCredentialId,
|
|
4761
|
+
accounts: accts,
|
|
4762
|
+
persistedMobileFlow: persisted,
|
|
4763
|
+
mobileSetupInProgress: mobileSetupFlowRef.current,
|
|
4764
|
+
connectingNewAccount
|
|
4765
|
+
});
|
|
4766
|
+
if (resolved.clearPersistedFlow) {
|
|
4767
|
+
clearMobileFlowState();
|
|
4768
|
+
setMobileFlow(false);
|
|
4769
|
+
setDeeplinkUri(null);
|
|
4770
|
+
}
|
|
4771
|
+
const correctableSteps = ["deposit", "wallet-picker", "open-wallet"];
|
|
4772
|
+
if (correctableSteps.includes(step)) {
|
|
4773
|
+
setStep(resolved.step);
|
|
4468
4774
|
}
|
|
4469
4775
|
} catch (err) {
|
|
4470
4776
|
if (!cancelled) {
|
|
@@ -4731,12 +5037,10 @@ function SwypePaymentInner({
|
|
|
4731
5037
|
persistMobileFlowState({
|
|
4732
5038
|
transferId: t.id,
|
|
4733
5039
|
deeplinkUri: uri,
|
|
4734
|
-
providerId: selectedProviderId,
|
|
5040
|
+
providerId: sourceOverrides?.sourceType === "providerId" ? sourceOverrides.sourceId : selectedProviderId,
|
|
4735
5041
|
isSetup: mobileSetupFlowRef.current
|
|
4736
5042
|
});
|
|
4737
|
-
|
|
4738
|
-
window.location.href = uri;
|
|
4739
|
-
}
|
|
5043
|
+
window.location.href = uri;
|
|
4740
5044
|
return;
|
|
4741
5045
|
} else {
|
|
4742
5046
|
await authExecutor.executeSession(t);
|
|
@@ -4777,15 +5081,18 @@ function SwypePaymentInner({
|
|
|
4777
5081
|
setActiveCredentialId(credentialId);
|
|
4778
5082
|
window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, credentialId);
|
|
4779
5083
|
setPasskeyPopupNeeded(false);
|
|
4780
|
-
const
|
|
4781
|
-
|
|
4782
|
-
|
|
4783
|
-
|
|
4784
|
-
|
|
4785
|
-
|
|
4786
|
-
|
|
5084
|
+
const resolved = resolvePostAuthStep({
|
|
5085
|
+
hasPasskey: true,
|
|
5086
|
+
accounts,
|
|
5087
|
+
persistedMobileFlow: loadMobileFlowState(),
|
|
5088
|
+
mobileSetupInProgress: mobileSetupFlowRef.current,
|
|
5089
|
+
connectingNewAccount
|
|
5090
|
+
});
|
|
5091
|
+
if (resolved.clearPersistedFlow) {
|
|
5092
|
+
clearMobileFlowState();
|
|
4787
5093
|
}
|
|
4788
|
-
|
|
5094
|
+
setStep(resolved.step);
|
|
5095
|
+
}, [getAccessToken, apiBaseUrl, accounts, connectingNewAccount]);
|
|
4789
5096
|
const handleRegisterPasskey = react.useCallback(async () => {
|
|
4790
5097
|
setRegisteringPasskey(true);
|
|
4791
5098
|
setError(null);
|
|
@@ -5104,6 +5411,7 @@ function SwypePaymentInner({
|
|
|
5104
5411
|
return null;
|
|
5105
5412
|
}
|
|
5106
5413
|
|
|
5414
|
+
exports.AdvancedSourceScreen = AdvancedSourceScreen;
|
|
5107
5415
|
exports.CreatePasskeyScreen = CreatePasskeyScreen;
|
|
5108
5416
|
exports.IconCircle = IconCircle;
|
|
5109
5417
|
exports.OutlineButton = OutlineButton;
|