@swype-org/react-sdk 0.1.43 → 0.1.44

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 CHANGED
@@ -3085,108 +3085,6 @@ var linkStyle = (color) => ({
3085
3085
  padding: 0,
3086
3086
  marginBottom: 16
3087
3087
  });
3088
- function SetupStatusScreen({
3089
- complete,
3090
- limit,
3091
- tokensApproved,
3092
- merchantName,
3093
- onContinue,
3094
- onLogout,
3095
- error
3096
- }) {
3097
- const { tokens } = useSwypeConfig();
3098
- const steps = complete ? [
3099
- {
3100
- label: "One-Tap ready",
3101
- detail: `$${limit} limit \xB7 ${tokensApproved} token${tokensApproved !== 1 ? "s" : ""} approved`,
3102
- status: "complete"
3103
- },
3104
- { label: "Done", status: "complete" }
3105
- ] : [
3106
- {
3107
- label: "Setting up Wallet",
3108
- status: "active"
3109
- },
3110
- { label: "Done", status: "pending" }
3111
- ];
3112
- return /* @__PURE__ */ jsxRuntime.jsxs(
3113
- ScreenLayout,
3114
- {
3115
- footer: complete ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3116
- /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onContinue, children: merchantName ? `Return to ${merchantName}` : "Continue" }),
3117
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: swipeHintStyle(tokens.textMuted), children: "Swipe to deposit \u2014 no approvals needed." })
3118
- ] }) : void 0,
3119
- children: [
3120
- /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
3121
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle4, children: [
3122
- complete ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3123
- /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "success", size: 64, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: tokens.success }) }) }),
3124
- /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "You're all set!" })
3125
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3126
- /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
3127
- /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Setting up One-Tap..." })
3128
- ] }),
3129
- error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle4(tokens), children: error }),
3130
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) }),
3131
- !complete && /* @__PURE__ */ jsxRuntime.jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" }),
3132
- complete && /* @__PURE__ */ jsxRuntime.jsx("p", { style: readyHintStyle(tokens.textSecondary), children: "You can now deposit instantly from any partner app." })
3133
- ] })
3134
- ]
3135
- }
3136
- );
3137
- }
3138
- var contentStyle4 = {
3139
- flex: 1,
3140
- display: "flex",
3141
- flexDirection: "column",
3142
- alignItems: "center",
3143
- justifyContent: "center",
3144
- textAlign: "center",
3145
- padding: "0 24px 32px"
3146
- };
3147
- var headingStyle6 = (color) => ({
3148
- fontSize: "1.45rem",
3149
- fontWeight: 700,
3150
- letterSpacing: "-0.02em",
3151
- color,
3152
- margin: "20px 0 16px"
3153
- });
3154
- var errorBannerStyle4 = (tokens) => ({
3155
- background: tokens.errorBg,
3156
- border: `1px solid ${tokens.error}66`,
3157
- borderRadius: 16,
3158
- padding: "11px 14px",
3159
- color: tokens.error,
3160
- fontSize: "0.84rem",
3161
- marginBottom: 14,
3162
- lineHeight: 1.5,
3163
- width: "100%",
3164
- textAlign: "left"
3165
- });
3166
- var stepsWrapStyle = {
3167
- width: "100%",
3168
- maxWidth: 280,
3169
- textAlign: "left",
3170
- marginBottom: 16
3171
- };
3172
- var waitHintStyle = (color) => ({
3173
- fontSize: "0.82rem",
3174
- color,
3175
- margin: 0
3176
- });
3177
- var readyHintStyle = (color) => ({
3178
- fontSize: "0.88rem",
3179
- color,
3180
- margin: "8px 0 0",
3181
- lineHeight: 1.5,
3182
- maxWidth: 280
3183
- });
3184
- var swipeHintStyle = (color) => ({
3185
- textAlign: "center",
3186
- fontSize: "0.8rem",
3187
- color,
3188
- margin: "12px 0 0"
3189
- });
3190
3088
  var MIN_DEPOSIT = 0.25;
3191
3089
  function DepositScreen({
3192
3090
  merchantName,
@@ -3336,7 +3234,7 @@ function DepositScreen({
3336
3234
  "%)"
3337
3235
  ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: detailRowStyle(tokens.textMuted), children: "Fees calculated at time of transfer" })
3338
3236
  ] }),
3339
- error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle5(tokens), children: error })
3237
+ error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle4(tokens), children: error })
3340
3238
  ]
3341
3239
  }
3342
3240
  );
@@ -3404,7 +3302,7 @@ var detailRowStyle = (color) => ({
3404
3302
  color,
3405
3303
  marginBottom: 4
3406
3304
  });
3407
- var errorBannerStyle5 = (tokens) => ({
3305
+ var errorBannerStyle4 = (tokens) => ({
3408
3306
  background: tokens.errorBg,
3409
3307
  border: `1px solid ${tokens.error}66`,
3410
3308
  borderRadius: 16,
@@ -3493,9 +3391,9 @@ function SuccessScreen({
3493
3391
  right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout })
3494
3392
  }
3495
3393
  ),
3496
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
3394
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle4, children: [
3497
3395
  /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "success", size: 64, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: tokens.success }) }) }),
3498
- /* @__PURE__ */ jsxRuntime.jsxs("h2", { style: headingStyle7(tokens.text), children: [
3396
+ /* @__PURE__ */ jsxRuntime.jsxs("h2", { style: headingStyle6(tokens.text), children: [
3499
3397
  "$",
3500
3398
  amount.toFixed(2),
3501
3399
  " deposited"
@@ -3534,14 +3432,14 @@ function SuccessScreen({
3534
3432
  }
3535
3433
  );
3536
3434
  }
3537
- var contentStyle5 = {
3435
+ var contentStyle4 = {
3538
3436
  flex: 1,
3539
3437
  display: "flex",
3540
3438
  flexDirection: "column",
3541
3439
  alignItems: "center",
3542
3440
  paddingTop: 16
3543
3441
  };
3544
- var headingStyle7 = (color) => ({
3442
+ var headingStyle6 = (color) => ({
3545
3443
  fontSize: "1.5rem",
3546
3444
  fontWeight: 700,
3547
3445
  letterSpacing: "-0.02em",
@@ -3804,16 +3702,16 @@ function TransferStatusScreen({
3804
3702
  const steps = buildSteps(phase);
3805
3703
  return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { children: [
3806
3704
  /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
3807
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle6, children: [
3705
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
3808
3706
  /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
3809
- /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle8(tokens.text), children: "Processing Transfer..." }),
3810
- error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle6(tokens), children: error }),
3811
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle2, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) }),
3812
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: waitHintStyle2(tokens.textMuted), children: "Usually takes a few seconds" })
3707
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle7(tokens.text), children: "Processing Transfer..." }),
3708
+ error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle5(tokens), children: error }),
3709
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) }),
3710
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" })
3813
3711
  ] })
3814
3712
  ] });
3815
3713
  }
3816
- var contentStyle6 = {
3714
+ var contentStyle5 = {
3817
3715
  flex: 1,
3818
3716
  display: "flex",
3819
3717
  flexDirection: "column",
@@ -3822,14 +3720,14 @@ var contentStyle6 = {
3822
3720
  textAlign: "center",
3823
3721
  padding: "0 24px"
3824
3722
  };
3825
- var headingStyle8 = (color) => ({
3723
+ var headingStyle7 = (color) => ({
3826
3724
  fontSize: "1.45rem",
3827
3725
  fontWeight: 700,
3828
3726
  letterSpacing: "-0.02em",
3829
3727
  color,
3830
3728
  margin: "20px 0 16px"
3831
3729
  });
3832
- var errorBannerStyle6 = (tokens) => ({
3730
+ var errorBannerStyle5 = (tokens) => ({
3833
3731
  background: tokens.errorBg,
3834
3732
  border: `1px solid ${tokens.error}66`,
3835
3733
  borderRadius: 16,
@@ -3841,13 +3739,13 @@ var errorBannerStyle6 = (tokens) => ({
3841
3739
  width: "100%",
3842
3740
  textAlign: "left"
3843
3741
  });
3844
- var stepsWrapStyle2 = {
3742
+ var stepsWrapStyle = {
3845
3743
  width: "100%",
3846
3744
  maxWidth: 280,
3847
3745
  textAlign: "left",
3848
3746
  marginBottom: 16
3849
3747
  };
3850
- var waitHintStyle2 = (color) => ({
3748
+ var waitHintStyle = (color) => ({
3851
3749
  fontSize: "0.82rem",
3852
3750
  color,
3853
3751
  margin: 0
@@ -3971,10 +3869,7 @@ function SwypePayment({
3971
3869
  const [verificationTarget, setVerificationTarget] = react.useState(null);
3972
3870
  const [otpCode, setOtpCode] = react.useState("");
3973
3871
  const [oneTapLimit, setOneTapLimit] = react.useState(100);
3974
- const [setupComplete, setSetupComplete] = react.useState(false);
3975
- const [setupStepLabel, setSetupStepLabel] = react.useState(void 0);
3976
3872
  const [mobileFlow, setMobileFlow] = react.useState(false);
3977
- const [mobileSetupFlow, setMobileSetupFlow] = react.useState(false);
3978
3873
  const pollingTransferIdRef = react.useRef(null);
3979
3874
  const mobileSigningTransferIdRef = react.useRef(null);
3980
3875
  const processingStartedAtRef = react.useRef(null);
@@ -3987,7 +3882,7 @@ function SwypePayment({
3987
3882
  const transferSigning = useTransferSigning();
3988
3883
  const sourceType = connectingNewAccount ? "providerId" : selectedWalletId ? "walletId" : selectedAccountId ? "accountId" : "providerId";
3989
3884
  const sourceId = connectingNewAccount ? selectedProviderId ?? "" : selectedWalletId ? selectedWalletId : selectedAccountId ? selectedAccountId : selectedProviderId ?? "";
3990
- const reloadAccounts = react.useCallback(async () => {
3885
+ react.useCallback(async () => {
3991
3886
  const token = await getAccessToken();
3992
3887
  if (!token || !activeCredentialId) return;
3993
3888
  const [accts, prov] = await Promise.all([
@@ -4215,24 +4110,7 @@ function SwypePayment({
4215
4110
  return () => window.clearTimeout(timeoutId);
4216
4111
  }, [step, polling.transfer, transfer, polling.stopPolling, onError]);
4217
4112
  react.useEffect(() => {
4218
- if (!mobileSetupFlow) return;
4219
- const polledTransfer = polling.transfer;
4220
- if (!polledTransfer) return;
4221
- if (polledTransfer.status !== "AUTHORIZED" && polledTransfer.status !== "COMPLETED") return;
4222
- polling.stopPolling();
4223
- setMobileFlow(false);
4224
- setMobileSetupFlow(false);
4225
- const finishSetup = async () => {
4226
- try {
4227
- await reloadAccounts();
4228
- } catch {
4229
- }
4230
- setStep("deposit");
4231
- };
4232
- void finishSetup();
4233
- }, [mobileSetupFlow, polling, reloadAccounts]);
4234
- react.useEffect(() => {
4235
- if (!mobileFlow || mobileSetupFlow) return;
4113
+ if (!mobileFlow) return;
4236
4114
  const polledTransfer = polling.transfer;
4237
4115
  if (!polledTransfer || polledTransfer.status !== "AUTHORIZED") return;
4238
4116
  if (transferSigning.signing) return;
@@ -4250,7 +4128,7 @@ function SwypePayment({
4250
4128
  }
4251
4129
  };
4252
4130
  void sign();
4253
- }, [mobileFlow, mobileSetupFlow, polling.transfer, transferSigning, onError]);
4131
+ }, [mobileFlow, polling.transfer, transferSigning, onError]);
4254
4132
  react.useEffect(() => {
4255
4133
  if (!mobileFlow) return;
4256
4134
  const transferIdToResume = pollingTransferIdRef.current ?? transfer?.id;
@@ -4298,7 +4176,7 @@ function SwypePayment({
4298
4176
  initializedSelectSourceActionRef.current = pendingSelectSourceAction.id;
4299
4177
  }, [pendingSelectSourceAction, selectSourceChoices, selectSourceRecommended]);
4300
4178
  react.useEffect(() => {
4301
- if (pendingSelectSourceAction && (step === "processing" || step === "setup-status")) {
4179
+ if (pendingSelectSourceAction && step === "processing") {
4302
4180
  preSelectSourceStepRef.current = step;
4303
4181
  setStep("select-source");
4304
4182
  } else if (!pendingSelectSourceAction && step === "select-source") {
@@ -4306,22 +4184,6 @@ function SwypePayment({
4306
4184
  preSelectSourceStepRef.current = null;
4307
4185
  }
4308
4186
  }, [pendingSelectSourceAction, step]);
4309
- const SETUP_ACTION_LABELS = react.useMemo(() => ({
4310
- OPEN_PROVIDER: "Connecting wallet",
4311
- SELECT_SOURCE: "Selecting source",
4312
- SWITCH_CHAIN: "Switching network",
4313
- APPROVE_PERMIT2: "Approving tokens",
4314
- SIGN_PERMIT2: "Signing permit",
4315
- DEPLOY_SMART_ACCOUNT: "Setting up account",
4316
- CREATE_SMART_ACCOUNT: "Creating account"
4317
- }), []);
4318
- react.useEffect(() => {
4319
- if (step !== "setup-status") return;
4320
- const actionType = authExecutor.currentAction?.type;
4321
- if (!actionType) return;
4322
- const label = SETUP_ACTION_LABELS[actionType];
4323
- if (label) setSetupStepLabel(label);
4324
- }, [step, authExecutor.currentAction, SETUP_ACTION_LABELS]);
4325
4187
  const handleSelectSourceChainChange = react.useCallback(
4326
4188
  (chainName) => {
4327
4189
  setSelectSourceChainName(chainName);
@@ -4510,74 +4372,11 @@ function SwypePayment({
4510
4372
  setStep("deposit");
4511
4373
  }
4512
4374
  }, [accounts]);
4513
- const handleSetupOneTap = react.useCallback(async (limit) => {
4514
- setOneTapLimit(limit);
4515
- setStep("setup-status");
4516
- setSetupComplete(false);
4517
- setSetupStepLabel("Preparing");
4518
- setError(null);
4519
- try {
4520
- const token = await getAccessToken();
4521
- if (!token) throw new Error("Not authenticated");
4522
- if (!sourceId) {
4523
- throw new Error("No wallet selected for setup.");
4524
- }
4525
- await updateUserConfig(apiBaseUrl, token, { defaultAllowance: limit });
4526
- const setupAmount = depositAmount ?? MIN_SEND_AMOUNT_USD;
4527
- const t = await createTransfer(apiBaseUrl, token, {
4528
- id: idempotencyKey,
4529
- credentialId: activeCredentialId ?? "",
4530
- merchantAuthorization,
4531
- sourceType,
4532
- sourceId,
4533
- destination,
4534
- amount: setupAmount
4535
- });
4536
- if (t.authorizationSessions && t.authorizationSessions.length > 0) {
4537
- const shouldUseConnector = shouldUseWalletConnector({
4538
- useWalletConnector,
4539
- userAgent: typeof navigator === "undefined" ? void 0 : navigator.userAgent
4540
- });
4541
- if (!shouldUseConnector) {
4542
- setMobileFlow(true);
4543
- setMobileSetupFlow(true);
4544
- pollingTransferIdRef.current = t.id;
4545
- polling.startPolling(t.id);
4546
- window.location.href = t.authorizationSessions[0].uri;
4547
- return;
4548
- } else {
4549
- await authExecutor.executeSession(t);
4550
- }
4551
- }
4552
- await reloadAccounts();
4553
- setSetupStepLabel(void 0);
4554
- setSetupComplete(true);
4555
- } catch (err) {
4556
- const msg = err instanceof Error ? err.message : "Setup failed";
4557
- setError(msg);
4558
- onError?.(msg);
4559
- }
4560
- }, [
4561
- getAccessToken,
4562
- idempotencyKey,
4563
- sourceId,
4564
- sourceType,
4565
- activeCredentialId,
4566
- destination,
4567
- apiBaseUrl,
4568
- merchantAuthorization,
4569
- useWalletConnector,
4570
- authExecutor,
4571
- polling,
4572
- onError,
4573
- depositAmount,
4574
- reloadAccounts
4575
- ]);
4576
4375
  const handleSelectProvider = react.useCallback((providerId) => {
4577
4376
  setSelectedProviderId(providerId);
4578
4377
  setSelectedAccountId(null);
4579
4378
  setConnectingNewAccount(true);
4580
- setStep("setup");
4379
+ setStep("deposit");
4581
4380
  }, []);
4582
4381
  const handleContinueConnection = react.useCallback(
4583
4382
  (accountId) => {
@@ -4585,7 +4384,7 @@ function SwypePayment({
4585
4384
  setSelectedAccountId(accountId);
4586
4385
  setSelectedWalletId(acct?.wallets[0]?.id ?? null);
4587
4386
  setConnectingNewAccount(false);
4588
- setStep("setup");
4387
+ setStep("deposit");
4589
4388
  },
4590
4389
  [accounts]
4591
4390
  );
@@ -4595,13 +4394,11 @@ function SwypePayment({
4595
4394
  setError(null);
4596
4395
  setAmount(depositAmount != null ? depositAmount.toString() : "");
4597
4396
  setMobileFlow(false);
4598
- setMobileSetupFlow(false);
4599
4397
  processingStartedAtRef.current = null;
4600
4398
  pollingTransferIdRef.current = null;
4601
4399
  mobileSigningTransferIdRef.current = null;
4602
4400
  setConnectingNewAccount(false);
4603
4401
  setSelectedWalletId(null);
4604
- setSetupComplete(false);
4605
4402
  if (accounts.length > 0) setSelectedAccountId(accounts[0].id);
4606
4403
  }, [depositAmount, accounts]);
4607
4404
  const handleLogout = react.useCallback(async () => {
@@ -4628,8 +4425,6 @@ function SwypePayment({
4628
4425
  setConnectingNewAccount(false);
4629
4426
  setAmount(depositAmount != null ? depositAmount.toString() : "");
4630
4427
  setMobileFlow(false);
4631
- setMobileSetupFlow(false);
4632
- setSetupComplete(false);
4633
4428
  resetHeadlessLogin();
4634
4429
  }, [logout, polling, depositAmount, resetHeadlessLogin]);
4635
4430
  if (!ready) {
@@ -4699,35 +4494,6 @@ function SwypePayment({
4699
4494
  }
4700
4495
  );
4701
4496
  }
4702
- if (step === "setup") {
4703
- return /* @__PURE__ */ jsxRuntime.jsx(
4704
- SetupScreen,
4705
- {
4706
- availableBalance: maxSourceBalance,
4707
- tokenCount,
4708
- sourceName,
4709
- onSetupOneTap: handleSetupOneTap,
4710
- onBack: () => setStep("wallet-picker"),
4711
- onLogout: handleLogout,
4712
- loading: loadingData,
4713
- error
4714
- }
4715
- );
4716
- }
4717
- if (step === "setup-status") {
4718
- return /* @__PURE__ */ jsxRuntime.jsx(
4719
- SetupStatusScreen,
4720
- {
4721
- complete: setupComplete,
4722
- limit: oneTapLimit,
4723
- tokensApproved: tokenCount,
4724
- merchantName,
4725
- onContinue: () => setStep("deposit"),
4726
- onLogout: handleLogout,
4727
- error
4728
- }
4729
- );
4730
- }
4731
4497
  if (step === "deposit") {
4732
4498
  if (loadingData) {
4733
4499
  return /* @__PURE__ */ jsxRuntime.jsx(ScreenLayout, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { label: "Loading..." }) }) });