@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.cjs +421 -59
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +38 -5
- package/dist/index.d.ts +38 -5
- package/dist/index.js +420 -60
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
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"
|
|
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) =>
|
|
1945
|
-
|
|
1946
|
-
|
|
1947
|
-
|
|
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
|
-
|
|
1989
|
-
|
|
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(
|
|
3052
|
-
|
|
3053
|
-
|
|
3054
|
-
|
|
3055
|
-
|
|
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
|
|
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:
|
|
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
|
|
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:
|
|
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
|
|
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..." : "
|
|
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:
|
|
3879
|
-
/* @__PURE__ */ jsx("p", { style:
|
|
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
|
|
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
|
|
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:
|
|
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
|
|
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
|
-
|
|
4440
|
-
|
|
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
|
-
|
|
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
|