@swype-org/react-sdk 0.1.190 → 0.1.202
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 +218 -211
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +7 -2
- package/dist/index.d.ts +7 -2
- package/dist/index.js +218 -211
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -2122,51 +2122,59 @@ function isMobileUserAgent(userAgent) {
|
|
|
2122
2122
|
function shouldUseWalletConnector(options) {
|
|
2123
2123
|
return options.useWalletConnector ?? !isMobileUserAgent(options.userAgent);
|
|
2124
2124
|
}
|
|
2125
|
-
var
|
|
2126
|
-
var
|
|
2125
|
+
var MUTED = "#7fa4b0";
|
|
2126
|
+
var LOGO_SIZE = 48;
|
|
2127
2127
|
function SwypeLoadingScreen() {
|
|
2128
2128
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle, children: [
|
|
2129
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2129
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2130
|
+
"svg",
|
|
2131
|
+
{
|
|
2132
|
+
width: LOGO_SIZE,
|
|
2133
|
+
height: LOGO_SIZE,
|
|
2134
|
+
viewBox: "0 0 100 100",
|
|
2135
|
+
fill: "none",
|
|
2136
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2137
|
+
style: { borderRadius: 10 },
|
|
2138
|
+
children: [
|
|
2139
|
+
/* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#swype-loading-clip)", children: [
|
|
2140
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { width: "100", height: "100", rx: "18.5874", fill: "white" }),
|
|
2141
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M64.0138 36.6191C68.3952 36.7025 70.2512 42.3038 65.1932 44.0399C61.4251 44.2617 60.8419 41.8557 61.3059 38.6113C62.3258 37.4916 62.6562 37.2326 64.0138 36.6191Z", fill: "white" }),
|
|
2142
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M34.7441 36.6714C36.6646 36.3309 38.4839 37.6898 38.813 39.71C39.1407 41.7302 37.8542 43.6499 35.9352 43.9994C34.7427 44.2169 33.5274 43.7774 32.7154 42.8325C31.8492 41.8262 31.5728 40.4029 31.9959 39.1191C32.419 37.8367 33.4719 36.8979 34.7441 36.6714Z", fill: "white" }),
|
|
2143
|
+
/* @__PURE__ */ jsxRuntime.jsx("g", { style: { transformOrigin: "50px 62px", animation: "swype-legs-walk 0.8s ease-in-out infinite" }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M37.719 72.0299C39.0372 70.605 40.611 68.9843 41.7888 67.4312L50.1528 61.6651L57.6601 61.4468C57.4965 63.5289 61.7342 75.3729 61.6981 77.5158C62.154 77.0628 63.0658 76.3318 63.567 75.9876C65.9954 74.3365 68.8384 73.8223 71.4833 74.5554C72.8167 74.9328 73.9331 75.9251 74.58 77.3075C75.2967 78.8451 75.3771 80.3207 74.9127 82.0281C73.8912 85.7844 71.5792 88.6365 68.624 90.5357C66.125 92.1415 61.7077 93.9276 58.9822 93.0828C58.078 92.7956 56.4567 92.015 55.9204 91.1399C55.1385 89.8648 54.5613 88.8907 54.1469 87.3736C53.3686 84.4709 53.3459 86.0793 52.7439 77.9085C52.8102 75.0919 52.9961 69.1199 52.9088 66.782C52.1044 67.8121 48.6686 72.1053 47.7896 73.7937L43.7186 79.5555C45.2316 79.4947 47.0626 79.5314 48.354 80.4535C49.2813 81.1277 49.9192 82.2144 50.1273 83.4755C50.2332 83.8294 50.3132 84.6855 50.3258 85.0634C50.4307 88.2051 49.4337 91.7462 46.8974 93.4764C45.8189 94.2126 44.2654 94.598 43.01 94.7341C37.9909 95.3115 33.0817 93.5835 29.3502 89.9257C28.3222 88.8994 27.4875 87.705 27.4333 86.0333C27.4046 85.1165 27.6099 84.1963 28.0241 83.3859C28.6301 82.2147 30.2471 80.3005 31.0794 79.3156C33.2057 76.7997 35.4975 74.4306 37.719 72.0299Z", fill: "black" }) }),
|
|
2144
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M25.2815 30.5666C25.6441 30.6182 25.869 30.0928 25.5864 29.8598C23.1701 27.868 21.5484 25.4469 21.0444 22.6545C20.3641 19.1251 21.516 15.5212 24.2422 12.6488C26.8514 9.91783 30.7518 8.12575 35.0552 7.68041C40.5681 7.11357 44.9544 9.44386 49.0355 11.908C49.1016 11.9479 49.1793 11.964 49.2559 11.9535L49.6641 11.8975C49.7772 11.882 49.8729 11.8099 49.9313 11.7118C50.7042 10.4132 53.3609 9.13558 54.9428 8.55183C63.274 5.47733 72.1015 8.67608 75.6217 15.0543C77.4169 18.3043 77.4637 21.9922 75.7515 25.2845C74.8719 26.99 73.8277 28.1868 72.3742 29.4156C72.1074 29.6412 72.3057 30.099 72.652 30.0534C78.3434 29.3036 83.6958 29.6535 88.1602 33.0995C88.1743 33.1104 88.1896 33.1204 88.2051 33.1289C94.9326 36.8336 95.4063 45.4019 90.8735 50.5016C88.6438 53.0434 85.3883 54.9193 81.641 55.8268C81.4786 55.8662 81.3675 56.017 81.3778 56.1837C81.627 60.2197 80.6407 63.7049 77.0957 66.8558C74.3594 69.31 72.2572 70.905 68.1242 71.1594C66.1317 71.2671 64.5824 71.0823 61.0405 69.4728C57.7759 67.9894 53.6996 61.9918 52.509 57.7058C52.4204 57.3871 51.9326 57.3204 51.7644 57.6052C49.4075 61.5961 43.2088 67.6787 38.7227 69.4728C35.1404 70.8919 32.2895 71.8779 28.5005 70.8789C24.3706 69.7951 20.9698 67.4623 19.0499 64.3964C18.0021 62.7282 16.7577 59.3144 17.4723 57.5087C17.4921 57.4587 17.5023 57.4056 17.4951 57.3522C17.4647 57.1259 17.359 56.7067 17.1377 56.6504C8.17592 54.367 2.58735 48.0815 5.03045 40.4013C6.14562 36.9784 8.95444 34.0395 12.8321 32.2381C16.7957 30.3763 20.9323 29.9475 25.2815 30.5666Z", fill: "black" }),
|
|
2145
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { x: "44.3433", y: "56.4863", width: "10.1195", height: "9.10751", fill: "black" }),
|
|
2146
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M45.6929 25.6221C49.2323 25.6223 52.1021 31.512 52.1021 38.7773C52.102 46.0426 49.2323 51.9323 45.6929 51.9326C42.2373 51.9326 39.4213 46.3188 39.2896 39.292C41.4308 38.8166 43.9097 38.7264 46.1079 39.1299C47.0121 39.2956 47.8949 38.5389 47.4956 37.7109C46.0273 34.6668 42.4111 34.0327 39.686 34.1816C40.5942 29.1824 42.9408 25.6221 45.6929 25.6221Z", fill: "white" }),
|
|
2147
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M63.2471 25.6216C66.7865 25.6219 69.6562 31.5116 69.6562 38.7769C69.6562 46.0422 66.7865 51.9319 63.2471 51.9321C59.7916 51.9321 56.9756 46.319 56.8438 39.2925C58.985 38.8171 61.4639 38.7259 63.6621 39.1294C64.5663 39.2952 65.4491 38.5394 65.0498 37.7114C63.5816 34.6669 59.9654 34.0322 57.2402 34.1812C58.1484 29.1821 60.4951 25.6216 63.2471 25.6216Z", fill: "white" })
|
|
2148
|
+
] }),
|
|
2149
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "swype-loading-clip", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "100", height: "100", rx: "18.5874", fill: "white" }) }) })
|
|
2150
|
+
]
|
|
2151
|
+
}
|
|
2152
|
+
),
|
|
2153
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle, children: "Loading..." }),
|
|
2133
2154
|
/* @__PURE__ */ jsxRuntime.jsx("style", { children: `
|
|
2134
|
-
@keyframes swype-
|
|
2135
|
-
|
|
2155
|
+
@keyframes swype-legs-walk {
|
|
2156
|
+
0%, 100% { transform: rotate(0deg); }
|
|
2157
|
+
25% { transform: rotate(5deg); }
|
|
2158
|
+
75% { transform: rotate(-5deg); }
|
|
2136
2159
|
}
|
|
2137
2160
|
` })
|
|
2138
2161
|
] });
|
|
2139
2162
|
}
|
|
2140
2163
|
var containerStyle = {
|
|
2141
2164
|
display: "flex",
|
|
2165
|
+
flexDirection: "column",
|
|
2142
2166
|
alignItems: "center",
|
|
2143
2167
|
justifyContent: "center",
|
|
2168
|
+
gap: 12,
|
|
2144
2169
|
height: "100%",
|
|
2145
2170
|
flex: 1,
|
|
2146
2171
|
background: "transparent"
|
|
2147
2172
|
};
|
|
2148
|
-
var
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
};
|
|
2154
|
-
var wordmarkStyle = {
|
|
2155
|
-
fontSize: 28,
|
|
2156
|
-
fontWeight: 700,
|
|
2157
|
-
letterSpacing: "-0.04em",
|
|
2158
|
-
color: ACCENT,
|
|
2159
|
-
margin: 0,
|
|
2160
|
-
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
|
|
2161
|
-
};
|
|
2162
|
-
var spinnerStyle = {
|
|
2163
|
-
width: 44,
|
|
2164
|
-
height: 44,
|
|
2165
|
-
border: `4px solid ${BG_RING}`,
|
|
2166
|
-
borderTopColor: ACCENT,
|
|
2167
|
-
borderRightColor: `${ACCENT}66`,
|
|
2168
|
-
borderRadius: "50%",
|
|
2169
|
-
animation: "swype-loading-spin 0.9s linear infinite"
|
|
2173
|
+
var labelStyle = {
|
|
2174
|
+
color: MUTED,
|
|
2175
|
+
fontSize: 13,
|
|
2176
|
+
fontFamily: "system-ui, -apple-system, sans-serif",
|
|
2177
|
+
letterSpacing: "0.02em"
|
|
2170
2178
|
};
|
|
2171
2179
|
|
|
2172
2180
|
// src/assets/logos.ts
|
|
@@ -2216,25 +2224,32 @@ var SWYPE_SVG = `<svg width="100" height="100" viewBox="0 0 100 100" fill="none"
|
|
|
2216
2224
|
</clipPath>
|
|
2217
2225
|
</defs>
|
|
2218
2226
|
</svg>`;
|
|
2219
|
-
var
|
|
2220
|
-
|
|
2221
|
-
<path d="
|
|
2222
|
-
<path d="
|
|
2223
|
-
<path d="M37.719 72.0299C39.0372 70.605 40.611 68.9843 41.7888 67.4312L50.1528 61.6651L57.6601 61.4468C57.4965 63.5289 61.7342 75.3729 61.6981 77.5158C62.154 77.0628 63.0658 76.3318 63.567 75.9876C65.9954 74.3365 68.8384 73.8223 71.4833 74.5554C72.8167 74.9328 73.9331 75.9251 74.58 77.3075C75.2967 78.8451 75.3771 80.3207 74.9127 82.0281C73.8912 85.7844 71.5792 88.6365 68.624 90.5357C66.125 92.1415 61.7077 93.9276 58.9822 93.0828C58.078 92.7956 56.4567 92.015 55.9204 91.1399C55.1385 89.8648 54.5613 88.8907 54.1469 87.3736C53.3686 84.4709 53.3459 86.0793 52.7439 77.9085C52.8102 75.0919 52.9961 69.1199 52.9088 66.782C52.1044 67.8121 48.6686 72.1053 47.7896 73.7937L43.7186 79.5555C45.2316 79.4947 47.0626 79.5314 48.354 80.4535C49.2813 81.1277 49.9192 82.2144 50.1273 83.4755C50.2332 83.8294 50.3132 84.6855 50.3258 85.0634C50.4307 88.2051 49.4337 91.7462 46.8974 93.4764C45.8189 94.2126 44.2654 94.598 43.01 94.7341C37.9909 95.3115 33.0817 93.5835 29.3502 89.9257C28.3222 88.8994 27.4875 87.705 27.4333 86.0333C27.4046 85.1165 27.6099 84.1963 28.0241 83.3859C28.6301 82.2147 30.2471 80.3005 31.0794 79.3156C33.2057 76.7997 35.4975 74.4306 37.719 72.0299Z" fill="#4ABA5A"/>
|
|
2224
|
-
<path d="M25.2815 30.5666C25.6441 30.6182 25.869 30.0928 25.5864 29.8598C23.1701 27.868 21.5484 25.4469 21.0444 22.6545C20.3641 19.1251 21.516 15.5212 24.2422 12.6488C26.8514 9.91783 30.7518 8.12575 35.0552 7.68041C40.5681 7.11357 44.9544 9.44386 49.0355 11.908C49.1016 11.9479 49.1793 11.964 49.2559 11.9535L49.6641 11.8975C49.7772 11.882 49.8729 11.8099 49.9313 11.7118C50.7042 10.4132 53.3609 9.13558 54.9428 8.55183C63.274 5.47733 72.1015 8.67608 75.6217 15.0543C77.4169 18.3043 77.4637 21.9922 75.7515 25.2845C74.8719 26.99 73.8277 28.1868 72.3742 29.4156C72.1074 29.6412 72.3057 30.099 72.652 30.0534C78.3434 29.3036 83.6958 29.6535 88.1602 33.0995C88.1743 33.1104 88.1896 33.1204 88.2051 33.1289C94.9326 36.8336 95.4063 45.4019 90.8735 50.5016C88.6438 53.0434 85.3883 54.9193 81.641 55.8268C81.4786 55.8662 81.3675 56.017 81.3778 56.1837C81.627 60.2197 80.6407 63.7049 77.0957 66.8558C74.3594 69.31 72.2572 70.905 68.1242 71.1594C66.1317 71.2671 64.5824 71.0823 61.0405 69.4728C57.7759 67.9894 53.6996 61.9918 52.509 57.7058C52.4204 57.3871 51.9326 57.3204 51.7644 57.6052C49.4075 61.5961 43.2088 67.6787 38.7227 69.4728C35.1404 70.8919 32.2895 71.8779 28.5005 70.8789C24.3706 69.7951 20.9698 67.4623 19.0499 64.3964C18.0021 62.7282 16.7577 59.3144 17.4723 57.5087C17.4921 57.4587 17.5023 57.4056 17.4951 57.3522C17.4647 57.1259 17.359 56.7067 17.1377 56.6504C8.17592 54.367 2.58735 48.0815 5.03045 40.4013C6.14562 36.9784 8.95444 34.0395 12.8321 32.2381C16.7957 30.3763 20.9323 29.9475 25.2815 30.5666Z" fill="#4ABA5A"/>
|
|
2225
|
-
<rect x="44.3433" y="56.4863" width="10.1195" height="9.10751" fill="#4ABA5A"/>
|
|
2226
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M45.6929 25.6221C49.2323 25.6223 52.1021 31.512 52.1021 38.7773C52.102 46.0426 49.2323 51.9323 45.6929 51.9326C42.2373 51.9326 39.4213 46.3188 39.2896 39.292C41.4308 38.8166 43.9097 38.7264 46.1079 39.1299C47.0121 39.2956 47.8949 38.5389 47.4956 37.7109C46.0273 34.6668 42.4111 34.0327 39.686 34.1816C40.5942 29.1824 42.9408 25.6221 45.6929 25.6221Z" fill="#1a5c2a"/>
|
|
2227
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M63.2471 25.6216C66.7865 25.6219 69.6562 31.5116 69.6562 38.7769C69.6562 46.0422 66.7865 51.9319 63.2471 51.9321C59.7916 51.9321 56.9756 46.319 56.8438 39.2925C58.985 38.8171 61.4639 38.7259 63.6621 39.1294C64.5663 39.2952 65.4491 38.5394 65.0498 37.7114C63.5816 34.6669 59.9654 34.0322 57.2402 34.1812C58.1484 29.1821 60.4951 25.6216 63.2471 25.6216Z" fill="#1a5c2a"/>
|
|
2227
|
+
var USDC_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
|
|
2228
|
+
<path d="M1000 2000c554.17 0 1000-445.83 1000-1000S1554.17 0 1000 0 0 445.83 0 1000s445.83 1000 1000 1000z" fill="#2775ca"/>
|
|
2229
|
+
<path d="M1275 1158.33c0-145.83-87.5-195.83-262.5-216.66-125-16.67-150-50-150-108.34s41.67-95.83 125-95.83c75 0 116.67 25 137.5 87.5 4.17 12.5 16.67 20.83 29.17 20.83h66.66c16.67 0 29.17-12.5 29.17-29.16v-4.17c-16.67-91.67-91.67-162.5-187.5-170.83v-100c0-16.67-12.5-29.17-33.33-33.34h-62.5c-16.67 0-29.17 12.5-33.34 33.34v95.83c-125 16.67-204.16 100-204.16 204.17 0 137.5 83.33 191.66 258.33 212.5 116.67 20.83 154.17 45.83 154.17 112.5s-58.34 112.5-137.5 112.5c-108.34 0-145.84-45.84-158.34-108.34-4.16-16.66-16.66-25-29.16-25h-70.84c-16.66 0-29.16 12.5-29.16 29.17v4.17c16.66 104.16 83.33 179.16 220.83 200v100c0 16.66 12.5 29.16 33.33 33.33h62.5c16.67 0 29.17-12.5 33.34-33.33v-100c125-20.84 208.33-108.34 208.33-220.84z" fill="#fff"/>
|
|
2230
|
+
<path d="M787.5 1595.83c-325-116.66-491.67-479.16-370.83-800 62.5-175 200-308.33 370.83-370.83 16.67-8.33 25-20.83 25-41.67V325c0-16.67-8.33-29.17-25-33.33-4.17 0-12.5 0-16.67 4.16-395.83 125-612.5 545.84-487.5 941.67 75 233.33 254.17 412.5 487.5 487.5 16.67 8.33 33.34 0 37.5-16.67 4.17-4.16 4.17-8.33 4.17-16.66v-58.34c0-12.5-12.5-29.16-25-37.5zM1229.17 295.83c-16.67-8.33-33.34 0-37.5 16.67-4.17 4.17-4.17 8.33-4.17 16.67v58.33c0 16.67 12.5 33.33 25 41.67 325 116.66 491.67 479.16 370.83 800-62.5 175-200 308.33-370.83 370.83-16.67 8.33-25 20.83-25 41.67V1700c0 16.67 8.33 29.17 25 33.33 4.17 0 12.5 0 16.67-4.16 395.83-125 612.5-545.84 487.5-941.67-75-237.5-258.34-416.67-487.5-491.67z" fill="#fff"/>
|
|
2228
2231
|
</svg>`;
|
|
2229
|
-
var
|
|
2232
|
+
var TETHER_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
|
|
2233
|
+
<circle fill="#009393" cx="400" cy="400" r="400"/>
|
|
2234
|
+
<path fill="#fff" fill-rule="evenodd" d="M400.49,428.59c68.79,0,126.28-11.63,140.33-27.17-11.93-13.18-55.08-23.56-109.88-26.4v32.83c-9.81.51-20.01.76-30.46.76s-20.65-.25-30.48-.76v-32.83c-54.78,2.84-97.95,13.22-109.88,26.4,14.07,15.54,71.57,27.17,140.36,27.17ZM522.71,274.06v45.21h-91.77v31.35c64.46,3.35,112.83,17.13,113.19,33.62v34.38c-.36,16.49-48.73,30.24-113.19,33.6v76.94h-60.93v-76.94c-64.46-3.35-112.81-17.11-113.17-33.6v-34.38c.36-16.49,48.71-30.27,113.17-33.62v-31.35h-91.77v-45.21h244.48ZM242.15,202.11h322.16c7.7,0,14.79,4.05,18.63,10.63l93.85,161.16c4.86,8.36,3.42,18.91-3.52,25.68l-258.34,252.18c-8.38,8.17-21.84,8.17-30.2,0L126.71,399.92c-7.09-6.94-8.43-17.79-3.2-26.19l100.33-161.49c3.91-6.28,10.85-10.12,18.32-10.12Z"/>
|
|
2235
|
+
</svg>`;
|
|
2236
|
+
var SWYPE_LOGO = svgToDataUri(SWYPE_SVG);
|
|
2237
|
+
var SWYPE_MASCOT = SWYPE_LOGO;
|
|
2230
2238
|
var BASE_LOGO = svgToDataUri(BASE_SVG);
|
|
2231
2239
|
var METAMASK_LOGO = svgToDataUri(METAMASK_SVG);
|
|
2232
2240
|
var TRUST_WALLET_LOGO = svgToDataUri(TRUST_WALLET_SVG);
|
|
2241
|
+
var USDC_LOGO = svgToDataUri(USDC_SVG);
|
|
2242
|
+
var TETHER_LOGO = svgToDataUri(TETHER_SVG);
|
|
2233
2243
|
var KNOWN_LOGOS = {
|
|
2234
2244
|
metamask: METAMASK_LOGO,
|
|
2235
2245
|
base: BASE_LOGO,
|
|
2236
2246
|
"trust wallet": TRUST_WALLET_LOGO
|
|
2237
2247
|
};
|
|
2248
|
+
var TOKEN_LOGOS = {
|
|
2249
|
+
USDC: USDC_LOGO,
|
|
2250
|
+
"USDC.e": USDC_LOGO,
|
|
2251
|
+
USDT: TETHER_LOGO
|
|
2252
|
+
};
|
|
2238
2253
|
var FOOTER_CSS = `
|
|
2239
2254
|
.swype-screen-footer {
|
|
2240
2255
|
padding-bottom: max(32px, env(safe-area-inset-bottom, 32px));
|
|
@@ -2285,21 +2300,33 @@ function useFlowPhase() {
|
|
|
2285
2300
|
function StepProgress({ phase }) {
|
|
2286
2301
|
const { tokens } = useSwypeConfig();
|
|
2287
2302
|
if (phase === "deposit") {
|
|
2288
|
-
return /* @__PURE__ */ jsxRuntime.jsx("img", { src:
|
|
2303
|
+
return /* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_LOGO, alt: "Swype", style: mascotStyle });
|
|
2289
2304
|
}
|
|
2290
2305
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle3, children: [
|
|
2291
|
-
/* @__PURE__ */ jsxRuntime.
|
|
2292
|
-
|
|
2306
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: sectionStyle("flex-end"), children: [
|
|
2307
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle2(tokens.text), children: "Link" }),
|
|
2308
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.accent) })
|
|
2309
|
+
] }),
|
|
2293
2310
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: lineStyle(tokens.textMuted) }),
|
|
2294
|
-
/* @__PURE__ */ jsxRuntime.
|
|
2295
|
-
|
|
2311
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: sectionStyle("flex-start"), children: [
|
|
2312
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.textMuted) }),
|
|
2313
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle2(tokens.textMuted), children: "Deposit" })
|
|
2314
|
+
] })
|
|
2296
2315
|
] });
|
|
2297
2316
|
}
|
|
2298
2317
|
var containerStyle3 = {
|
|
2299
2318
|
display: "flex",
|
|
2300
2319
|
alignItems: "center",
|
|
2301
|
-
gap: 6
|
|
2320
|
+
gap: 6,
|
|
2321
|
+
width: "100%"
|
|
2302
2322
|
};
|
|
2323
|
+
var sectionStyle = (justify) => ({
|
|
2324
|
+
flex: 1,
|
|
2325
|
+
display: "flex",
|
|
2326
|
+
alignItems: "center",
|
|
2327
|
+
justifyContent: justify,
|
|
2328
|
+
gap: 6
|
|
2329
|
+
});
|
|
2303
2330
|
var dotStyle = (color) => ({
|
|
2304
2331
|
width: 8,
|
|
2305
2332
|
height: 8,
|
|
@@ -2314,7 +2341,7 @@ var lineStyle = (color) => ({
|
|
|
2314
2341
|
opacity: 0.4,
|
|
2315
2342
|
flexShrink: 0
|
|
2316
2343
|
});
|
|
2317
|
-
var
|
|
2344
|
+
var labelStyle2 = (color) => ({
|
|
2318
2345
|
fontSize: "0.82rem",
|
|
2319
2346
|
fontWeight: 600,
|
|
2320
2347
|
color,
|
|
@@ -2456,19 +2483,16 @@ var badgeStyle = (color) => ({
|
|
|
2456
2483
|
});
|
|
2457
2484
|
function PoweredByFooter() {
|
|
2458
2485
|
const { tokens } = useSwypeConfig();
|
|
2459
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
2460
|
-
/* @__PURE__ */ jsxRuntime.
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
|
|
2465
|
-
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
] }),
|
|
2470
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style: pillStyle(tokens.textMuted, tokens.border), children: "Beta Version" })
|
|
2471
|
-
] });
|
|
2486
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle5(tokens.textMuted), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle, children: [
|
|
2487
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2488
|
+
"path",
|
|
2489
|
+
{
|
|
2490
|
+
d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3-9H9V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2z",
|
|
2491
|
+
fill: "currentColor"
|
|
2492
|
+
}
|
|
2493
|
+
) }),
|
|
2494
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Powered by Blink" })
|
|
2495
|
+
] }) });
|
|
2472
2496
|
}
|
|
2473
2497
|
var containerStyle5 = (color) => ({
|
|
2474
2498
|
display: "flex",
|
|
@@ -2485,14 +2509,6 @@ var rowStyle = {
|
|
|
2485
2509
|
alignItems: "center",
|
|
2486
2510
|
gap: 6
|
|
2487
2511
|
};
|
|
2488
|
-
var pillStyle = (color, border) => ({
|
|
2489
|
-
fontSize: "0.65rem",
|
|
2490
|
-
fontWeight: 600,
|
|
2491
|
-
padding: "2px 8px",
|
|
2492
|
-
borderRadius: 999,
|
|
2493
|
-
border: `1px solid ${border}`,
|
|
2494
|
-
color
|
|
2495
|
-
});
|
|
2496
2512
|
function PrimaryButton({ children, onClick, disabled, loading, icon }) {
|
|
2497
2513
|
const { tokens } = useSwypeConfig();
|
|
2498
2514
|
const isDisabled = disabled || loading;
|
|
@@ -2512,7 +2528,7 @@ function PrimaryButton({ children, onClick, disabled, loading, icon }) {
|
|
|
2512
2528
|
}
|
|
2513
2529
|
var buttonStyle = (tokens, disabled) => ({
|
|
2514
2530
|
width: "100%",
|
|
2515
|
-
padding: "
|
|
2531
|
+
padding: "18px 24px",
|
|
2516
2532
|
background: `linear-gradient(180deg, ${tokens.accent}, ${tokens.accentHover})`,
|
|
2517
2533
|
color: tokens.accentText,
|
|
2518
2534
|
border: "none",
|
|
@@ -2523,7 +2539,7 @@ var buttonStyle = (tokens, disabled) => ({
|
|
|
2523
2539
|
opacity: disabled ? 0.5 : 1,
|
|
2524
2540
|
transition: "filter 0.15s ease, transform 0.15s ease",
|
|
2525
2541
|
fontFamily: "inherit",
|
|
2526
|
-
boxShadow: "0
|
|
2542
|
+
boxShadow: "0 6px 20px rgba(178, 255, 147, 0.25)",
|
|
2527
2543
|
display: "flex",
|
|
2528
2544
|
alignItems: "center",
|
|
2529
2545
|
justifyContent: "center",
|
|
@@ -2740,7 +2756,7 @@ function StepList({ steps }) {
|
|
|
2740
2756
|
}
|
|
2741
2757
|
),
|
|
2742
2758
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: labelContainerStyle, children: [
|
|
2743
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style:
|
|
2759
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle3(isComplete || isActive ? tokens.text : tokens.textMuted), children: step.label }),
|
|
2744
2760
|
step.detail && /* @__PURE__ */ jsxRuntime.jsx("span", { style: detailStyle(tokens.textMuted), children: step.detail })
|
|
2745
2761
|
] })
|
|
2746
2762
|
] }, i);
|
|
@@ -2781,7 +2797,7 @@ var labelContainerStyle = {
|
|
|
2781
2797
|
display: "flex",
|
|
2782
2798
|
flexDirection: "column"
|
|
2783
2799
|
};
|
|
2784
|
-
var
|
|
2800
|
+
var labelStyle3 = (color) => ({
|
|
2785
2801
|
fontSize: "0.9rem",
|
|
2786
2802
|
fontWeight: 500,
|
|
2787
2803
|
color
|
|
@@ -2834,7 +2850,7 @@ function LoginScreen({
|
|
|
2834
2850
|
right: merchantInitials ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: avatarStyle(tokens), children: merchantInitials }) : void 0
|
|
2835
2851
|
}
|
|
2836
2852
|
),
|
|
2837
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
2853
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle, children: [
|
|
2838
2854
|
/* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_LOGO, alt: "Swype", style: logoStyle }),
|
|
2839
2855
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle(tokens.text), children: "Your Money. Any App.\nOne Tap." }),
|
|
2840
2856
|
error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorStyle(tokens), children: error }),
|
|
@@ -2869,7 +2885,7 @@ function socialLabel(provider) {
|
|
|
2869
2885
|
return "X";
|
|
2870
2886
|
}
|
|
2871
2887
|
}
|
|
2872
|
-
var
|
|
2888
|
+
var contentStyle = {
|
|
2873
2889
|
textAlign: "center",
|
|
2874
2890
|
flex: 1,
|
|
2875
2891
|
display: "flex",
|
|
@@ -3010,7 +3026,7 @@ function OtpVerifyScreen({
|
|
|
3010
3026
|
] }),
|
|
3011
3027
|
children: [
|
|
3012
3028
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
|
|
3013
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
3029
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle2, children: [
|
|
3014
3030
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle2(tokens.text), children: "Confirm it is you" }),
|
|
3015
3031
|
/* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle(tokens.textSecondary), children: [
|
|
3016
3032
|
"We sent a 6-digit code to",
|
|
@@ -3034,7 +3050,7 @@ function OtpVerifyScreen({
|
|
|
3034
3050
|
}
|
|
3035
3051
|
);
|
|
3036
3052
|
}
|
|
3037
|
-
var
|
|
3053
|
+
var contentStyle2 = {
|
|
3038
3054
|
textAlign: "center",
|
|
3039
3055
|
display: "flex",
|
|
3040
3056
|
flexDirection: "column",
|
|
@@ -3099,15 +3115,16 @@ function PasskeyScreen({
|
|
|
3099
3115
|
] }),
|
|
3100
3116
|
children: [
|
|
3101
3117
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack, onLogout }),
|
|
3102
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
3118
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle3, children: [
|
|
3103
3119
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle3(tokens.text), children: "Secure your account with a passkey" }),
|
|
3120
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle2(tokens.textSecondary), children: "This enables secure one-tap deposits on this device" }),
|
|
3104
3121
|
error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle2(tokens), children: error })
|
|
3105
3122
|
] })
|
|
3106
3123
|
]
|
|
3107
3124
|
}
|
|
3108
3125
|
);
|
|
3109
3126
|
}
|
|
3110
|
-
var
|
|
3127
|
+
var contentStyle3 = {
|
|
3111
3128
|
textAlign: "center",
|
|
3112
3129
|
flex: 1,
|
|
3113
3130
|
display: "flex",
|
|
@@ -3122,6 +3139,12 @@ var headingStyle3 = (color) => ({
|
|
|
3122
3139
|
color,
|
|
3123
3140
|
margin: "24px 0 8px"
|
|
3124
3141
|
});
|
|
3142
|
+
var subtitleStyle2 = (color) => ({
|
|
3143
|
+
fontSize: "0.86rem",
|
|
3144
|
+
color,
|
|
3145
|
+
margin: "0 0 20px",
|
|
3146
|
+
lineHeight: 1.5
|
|
3147
|
+
});
|
|
3125
3148
|
var errorBannerStyle2 = (tokens) => ({
|
|
3126
3149
|
background: tokens.errorBg,
|
|
3127
3150
|
border: `1px solid ${tokens.error}66`,
|
|
@@ -3259,7 +3282,7 @@ function WalletPickerScreen({
|
|
|
3259
3282
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Set up Swype", onBack, onLogout }),
|
|
3260
3283
|
hasPending && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3261
3284
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle4(tokens.text), children: "Continue where you left off" }),
|
|
3262
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style:
|
|
3285
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: "You have a wallet that still needs setup" }),
|
|
3263
3286
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: pendingListStyle, children: pendingConnections.map((acct) => {
|
|
3264
3287
|
const wallet = acct.wallets[0];
|
|
3265
3288
|
const address = wallet ? truncateAddress(wallet.name) : void 0;
|
|
@@ -3363,7 +3386,7 @@ var headingStyle4 = (color) => ({
|
|
|
3363
3386
|
color,
|
|
3364
3387
|
margin: "8px 0 4px"
|
|
3365
3388
|
});
|
|
3366
|
-
var
|
|
3389
|
+
var subtitleStyle3 = (color) => ({
|
|
3367
3390
|
fontSize: "0.88rem",
|
|
3368
3391
|
color,
|
|
3369
3392
|
margin: "0 0 24px"
|
|
@@ -3527,7 +3550,8 @@ function SetupScreen({
|
|
|
3527
3550
|
onLogout,
|
|
3528
3551
|
onAdvanced,
|
|
3529
3552
|
loading,
|
|
3530
|
-
error
|
|
3553
|
+
error,
|
|
3554
|
+
selectedTokenSymbol
|
|
3531
3555
|
}) {
|
|
3532
3556
|
const { tokens } = useSwypeConfig();
|
|
3533
3557
|
const effectiveMax = DEFAULT_MAX;
|
|
@@ -3616,7 +3640,7 @@ function SetupScreen({
|
|
|
3616
3640
|
style: tokenIconButtonStyle(!!onAdvanced),
|
|
3617
3641
|
children: [
|
|
3618
3642
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenIconWrapStyle, children: [
|
|
3619
|
-
/* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
|
|
3643
|
+
selectedTokenSymbol && TOKEN_LOGOS[selectedTokenSymbol] ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: TOKEN_LOGOS[selectedTokenSymbol], alt: selectedTokenSymbol, width: 36, height: 36, style: { borderRadius: "50%" } }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
|
|
3620
3644
|
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "18", r: "18", fill: "#2DB84B" }),
|
|
3621
3645
|
/* @__PURE__ */ jsxRuntime.jsx("text", { x: "18", y: "23", textAnchor: "middle", fontSize: "18", fill: "#fff", fontWeight: "700", children: "$" })
|
|
3622
3646
|
] }),
|
|
@@ -3762,10 +3786,10 @@ function SetupStatusScreen({
|
|
|
3762
3786
|
if (complete) {
|
|
3763
3787
|
return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {}), children: [
|
|
3764
3788
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack: onContinue }),
|
|
3765
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
3766
|
-
/* @__PURE__ */ jsxRuntime.jsx("img", { src:
|
|
3789
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle4, children: [
|
|
3790
|
+
/* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_LOGO, alt: "Swype", style: mascotStyle2 }),
|
|
3767
3791
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Done!" }),
|
|
3768
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style:
|
|
3792
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle4(tokens.textSecondary), children: "Return to the app to try one-tap deposits." })
|
|
3769
3793
|
] })
|
|
3770
3794
|
] });
|
|
3771
3795
|
}
|
|
@@ -3775,7 +3799,7 @@ function SetupStatusScreen({
|
|
|
3775
3799
|
];
|
|
3776
3800
|
return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { children: [
|
|
3777
3801
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onLogout }),
|
|
3778
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
3802
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle4, children: [
|
|
3779
3803
|
/* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
|
|
3780
3804
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Setting up One-Tap..." }),
|
|
3781
3805
|
error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle4(tokens), children: error }),
|
|
@@ -3784,7 +3808,7 @@ function SetupStatusScreen({
|
|
|
3784
3808
|
] })
|
|
3785
3809
|
] });
|
|
3786
3810
|
}
|
|
3787
|
-
var
|
|
3811
|
+
var contentStyle4 = {
|
|
3788
3812
|
flex: 1,
|
|
3789
3813
|
display: "flex",
|
|
3790
3814
|
flexDirection: "column",
|
|
@@ -3804,7 +3828,7 @@ var headingStyle6 = (color) => ({
|
|
|
3804
3828
|
color,
|
|
3805
3829
|
margin: "20px 0 8px"
|
|
3806
3830
|
});
|
|
3807
|
-
var
|
|
3831
|
+
var subtitleStyle4 = (color) => ({
|
|
3808
3832
|
fontSize: "0.9rem",
|
|
3809
3833
|
color,
|
|
3810
3834
|
margin: "0 0 28px",
|
|
@@ -3855,7 +3879,8 @@ function DepositScreen({
|
|
|
3855
3879
|
onAuthorizeAccount,
|
|
3856
3880
|
onAddProvider,
|
|
3857
3881
|
onSelectToken,
|
|
3858
|
-
selectedSourceLabel
|
|
3882
|
+
selectedSourceLabel,
|
|
3883
|
+
selectedTokenSymbol
|
|
3859
3884
|
}) {
|
|
3860
3885
|
const { tokens } = useSwypeConfig();
|
|
3861
3886
|
const amount = initialAmount;
|
|
@@ -3874,7 +3899,6 @@ function DepositScreen({
|
|
|
3874
3899
|
const selectedAccount = accounts?.find((a) => a.id === selectedAccountId);
|
|
3875
3900
|
const selectedProviderName = selectedAccount?.name ?? "Wallet";
|
|
3876
3901
|
const selectedProviderLogo = KNOWN_LOGOS[selectedProviderName.toLowerCase()];
|
|
3877
|
-
const hasMultipleAccounts = accounts != null && accounts.length > 1;
|
|
3878
3902
|
const isLowBalance = availableBalance < MIN_DEPOSIT;
|
|
3879
3903
|
const exceedsLimit = remainingLimit != null && amount > remainingLimit && !isLowBalance;
|
|
3880
3904
|
const canDeposit = amount >= MIN_DEPOSIT && !exceedsLimit && !isLowBalance && !processing;
|
|
@@ -3926,27 +3950,18 @@ function DepositScreen({
|
|
|
3926
3950
|
ScreenLayout,
|
|
3927
3951
|
{
|
|
3928
3952
|
footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3929
|
-
exceedsLimit && onIncreaseLimit ? /* @__PURE__ */ jsxRuntime.
|
|
3930
|
-
/* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onIncreaseLimit, loading: increasingLimit, children: "Increase limit" }),
|
|
3931
|
-
/* @__PURE__ */ jsxRuntime.jsxs("p", { style: limitExceededHintStyle(tokens.warning), children: [
|
|
3932
|
-
"Your deposit of $",
|
|
3933
|
-
amount.toFixed(2),
|
|
3934
|
-
" exceeds your One-Tap limit of $",
|
|
3935
|
-
remainingLimit?.toFixed(2) ?? "0.00",
|
|
3936
|
-
". Increase your limit to continue."
|
|
3937
|
-
] })
|
|
3938
|
-
] }) : /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: () => onDeposit(amount), disabled: !canDeposit, loading: processing, children: "Confirm" }),
|
|
3953
|
+
!accountPickerOpen && (exceedsLimit && onIncreaseLimit ? /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onIncreaseLimit, loading: increasingLimit, children: "Increase limit" }) : /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: () => onDeposit(amount), disabled: !canDeposit, loading: processing, children: "Confirm" })),
|
|
3939
3954
|
/* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
|
|
3940
3955
|
] }),
|
|
3941
3956
|
children: [
|
|
3942
|
-
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
|
|
3957
|
+
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack, onLogout }),
|
|
3943
3958
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { ref: pickerRef, style: depositCardWrapStyle, children: [
|
|
3944
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
3959
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
3945
3960
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: depositLabelStyle(tokens.textMuted), children: "Depositing" }),
|
|
3946
3961
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountRowStyle2, children: [
|
|
3947
3962
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountValueStyle(tokens.text), children: [
|
|
3948
3963
|
"$",
|
|
3949
|
-
amount.toLocaleString("en-US", { minimumFractionDigits:
|
|
3964
|
+
amount.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
3950
3965
|
] }),
|
|
3951
3966
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3952
3967
|
"button",
|
|
@@ -3955,34 +3970,28 @@ function DepositScreen({
|
|
|
3955
3970
|
onClick: onSelectToken,
|
|
3956
3971
|
style: tokenIconButtonStyle2(!!onSelectToken),
|
|
3957
3972
|
children: [
|
|
3958
|
-
/* @__PURE__ */ jsxRuntime.
|
|
3959
|
-
/* @__PURE__ */ jsxRuntime.
|
|
3960
|
-
|
|
3961
|
-
|
|
3962
|
-
] }),
|
|
3963
|
-
/* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: checkBadgeStyle2, children: [
|
|
3964
|
-
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "8", fill: "#2775CA" }),
|
|
3965
|
-
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 8l2 2 4-4", stroke: "#fff", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
3966
|
-
] })
|
|
3967
|
-
] }),
|
|
3973
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: tokenIconWrapStyle2, children: selectedTokenSymbol && TOKEN_LOGOS[selectedTokenSymbol] ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: TOKEN_LOGOS[selectedTokenSymbol], alt: selectedTokenSymbol, width: 36, height: 36, style: { borderRadius: "50%" } }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
|
|
3974
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "18", r: "18", fill: "#2DB84B" }),
|
|
3975
|
+
/* @__PURE__ */ jsxRuntime.jsx("text", { x: "18", y: "23", textAnchor: "middle", fontSize: "18", fill: "#fff", fontWeight: "700", children: "$" })
|
|
3976
|
+
] }) }),
|
|
3968
3977
|
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.5 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6", stroke: tokens.textMuted, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
3969
3978
|
]
|
|
3970
3979
|
}
|
|
3971
3980
|
)
|
|
3972
3981
|
] }),
|
|
3973
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3982
|
+
!accountPickerOpen && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3974
3983
|
"button",
|
|
3975
3984
|
{
|
|
3976
3985
|
type: "button",
|
|
3977
|
-
onClick:
|
|
3978
|
-
style: walletBalanceRowStyle
|
|
3986
|
+
onClick: () => setAccountPickerOpen(!accountPickerOpen),
|
|
3987
|
+
style: walletBalanceRowStyle,
|
|
3979
3988
|
children: [
|
|
3980
3989
|
selectedProviderLogo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: selectedProviderLogo, alt: selectedProviderName, style: providerLogoStyle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: providerFallbackStyle(tokens.textMuted), children: selectedProviderName.charAt(0) }),
|
|
3981
3990
|
/* @__PURE__ */ jsxRuntime.jsxs("span", { style: walletBalanceStyle(tokens.text), children: [
|
|
3982
3991
|
"$",
|
|
3983
3992
|
availableBalance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
3984
3993
|
] }),
|
|
3985
|
-
|
|
3994
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.4 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 10l5-5 5 5M7 14l5 5 5-5", stroke: tokens.textMuted, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
3986
3995
|
]
|
|
3987
3996
|
}
|
|
3988
3997
|
)
|
|
@@ -4052,12 +4061,19 @@ function DepositScreen({
|
|
|
4052
4061
|
] })
|
|
4053
4062
|
] })
|
|
4054
4063
|
] }),
|
|
4055
|
-
remainingLimit != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: spendingLimitStyle(tokens.textMuted), children: [
|
|
4064
|
+
!accountPickerOpen && remainingLimit != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: spendingLimitStyle(tokens.textMuted), children: [
|
|
4056
4065
|
"Spending Limit",
|
|
4057
4066
|
" ",
|
|
4058
4067
|
/* @__PURE__ */ jsxRuntime.jsxs("strong", { style: { color: tokens.text }, children: [
|
|
4059
4068
|
"$",
|
|
4060
|
-
remainingLimit.toLocaleString("en-US", { minimumFractionDigits:
|
|
4069
|
+
remainingLimit.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
4070
|
+
] }),
|
|
4071
|
+
exceedsLimit && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: limitExceededHintStyle(tokens.warning), children: [
|
|
4072
|
+
"Your deposit of $",
|
|
4073
|
+
amount.toFixed(2),
|
|
4074
|
+
" exceeds your One-Tap limit of $",
|
|
4075
|
+
remainingLimit?.toFixed(2) ?? "0.00",
|
|
4076
|
+
". Increase your limit to continue."
|
|
4061
4077
|
] })
|
|
4062
4078
|
] }),
|
|
4063
4079
|
error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle5(tokens), children: error })
|
|
@@ -4069,12 +4085,6 @@ var depositCardWrapStyle = {
|
|
|
4069
4085
|
position: "relative",
|
|
4070
4086
|
marginBottom: 20
|
|
4071
4087
|
};
|
|
4072
|
-
var depositCardStyle = (tokens) => ({
|
|
4073
|
-
background: tokens.bgInput,
|
|
4074
|
-
border: `1px solid ${tokens.border}`,
|
|
4075
|
-
borderRadius: tokens.radiusLg,
|
|
4076
|
-
padding: "16px 20px"
|
|
4077
|
-
});
|
|
4078
4088
|
var depositLabelStyle = (color) => ({
|
|
4079
4089
|
fontSize: "0.75rem",
|
|
4080
4090
|
fontWeight: 500,
|
|
@@ -4108,22 +4118,19 @@ var tokenIconWrapStyle2 = {
|
|
|
4108
4118
|
width: 36,
|
|
4109
4119
|
height: 36
|
|
4110
4120
|
};
|
|
4111
|
-
var
|
|
4112
|
-
position: "absolute",
|
|
4113
|
-
bottom: -1,
|
|
4114
|
-
right: -3
|
|
4115
|
-
};
|
|
4116
|
-
var walletBalanceRowStyle = (clickable) => ({
|
|
4121
|
+
var walletBalanceRowStyle = {
|
|
4117
4122
|
display: "flex",
|
|
4118
4123
|
alignItems: "center",
|
|
4124
|
+
justifyContent: "center",
|
|
4119
4125
|
gap: 8,
|
|
4120
4126
|
background: "transparent",
|
|
4121
4127
|
border: "none",
|
|
4122
4128
|
padding: 0,
|
|
4123
|
-
|
|
4129
|
+
width: "100%",
|
|
4130
|
+
cursor: "pointer",
|
|
4124
4131
|
fontFamily: "inherit",
|
|
4125
4132
|
outline: "none"
|
|
4126
|
-
}
|
|
4133
|
+
};
|
|
4127
4134
|
var providerLogoStyle = {
|
|
4128
4135
|
width: 18,
|
|
4129
4136
|
height: 18,
|
|
@@ -4148,16 +4155,11 @@ var walletBalanceStyle = (color) => ({
|
|
|
4148
4155
|
color
|
|
4149
4156
|
});
|
|
4150
4157
|
var accountDropdownOuterStyle = (tokens) => ({
|
|
4151
|
-
position: "absolute",
|
|
4152
|
-
top: "100%",
|
|
4153
|
-
left: 0,
|
|
4154
|
-
right: 0,
|
|
4155
4158
|
marginTop: 4,
|
|
4156
4159
|
background: tokens.bgCard,
|
|
4157
4160
|
border: `1px solid ${tokens.border}`,
|
|
4158
4161
|
borderRadius: tokens.radiusLg,
|
|
4159
4162
|
boxShadow: tokens.shadowLg,
|
|
4160
|
-
zIndex: 50,
|
|
4161
4163
|
padding: "12px 14px 14px"
|
|
4162
4164
|
});
|
|
4163
4165
|
var accountDropdownLabelStyle = (color) => ({
|
|
@@ -4246,7 +4248,7 @@ var addAccountBtnStyle = (tokens) => ({
|
|
|
4246
4248
|
padding: "12px 16px",
|
|
4247
4249
|
background: "transparent",
|
|
4248
4250
|
border: "none",
|
|
4249
|
-
color: tokens.
|
|
4251
|
+
color: tokens.textMuted,
|
|
4250
4252
|
fontWeight: 600,
|
|
4251
4253
|
fontSize: "0.85rem",
|
|
4252
4254
|
cursor: "pointer",
|
|
@@ -4373,7 +4375,7 @@ function SuccessScreen({
|
|
|
4373
4375
|
] }),
|
|
4374
4376
|
children: [
|
|
4375
4377
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onLogout }),
|
|
4376
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
4378
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
|
|
4377
4379
|
succeeded ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
4378
4380
|
/* @__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 }) }) }),
|
|
4379
4381
|
/* @__PURE__ */ jsxRuntime.jsxs("h2", { style: headingStyle7(tokens.text), children: [
|
|
@@ -4381,14 +4383,14 @@ function SuccessScreen({
|
|
|
4381
4383
|
amount.toFixed(2),
|
|
4382
4384
|
" deposited"
|
|
4383
4385
|
] }),
|
|
4384
|
-
merchantName && /* @__PURE__ */ jsxRuntime.jsxs("p", { style:
|
|
4386
|
+
merchantName && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle5(tokens.textSecondary), children: [
|
|
4385
4387
|
"to ",
|
|
4386
4388
|
merchantName
|
|
4387
4389
|
] })
|
|
4388
4390
|
] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
4389
4391
|
/* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "error", size: 64, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z", fill: tokens.error }) }) }),
|
|
4390
4392
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle7(tokens.text), children: "Transfer failed" }),
|
|
4391
|
-
error && /* @__PURE__ */ jsxRuntime.jsx("p", { style:
|
|
4393
|
+
error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle5(tokens.error), children: error })
|
|
4392
4394
|
] }),
|
|
4393
4395
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryCardStyle(tokens), children: [
|
|
4394
4396
|
sourceName && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryRowStyle, children: [
|
|
@@ -4420,7 +4422,7 @@ function SuccessScreen({
|
|
|
4420
4422
|
}
|
|
4421
4423
|
);
|
|
4422
4424
|
}
|
|
4423
|
-
var
|
|
4425
|
+
var contentStyle5 = {
|
|
4424
4426
|
flex: 1,
|
|
4425
4427
|
display: "flex",
|
|
4426
4428
|
flexDirection: "column",
|
|
@@ -4434,7 +4436,7 @@ var headingStyle7 = (color) => ({
|
|
|
4434
4436
|
color,
|
|
4435
4437
|
margin: "20px 0 4px"
|
|
4436
4438
|
});
|
|
4437
|
-
var
|
|
4439
|
+
var subtitleStyle5 = (color) => ({
|
|
4438
4440
|
fontSize: "0.9rem",
|
|
4439
4441
|
color,
|
|
4440
4442
|
margin: "0 0 20px"
|
|
@@ -4542,8 +4544,8 @@ function SelectSourceScreen({
|
|
|
4542
4544
|
onLogout
|
|
4543
4545
|
}
|
|
4544
4546
|
),
|
|
4545
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style:
|
|
4546
|
-
/* @__PURE__ */ jsxRuntime.jsx("label", { style:
|
|
4547
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle6(tokens.textMuted), children: "Choose which chain and token to pay from." }),
|
|
4548
|
+
/* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle4(tokens.textSecondary), children: "Chain" }),
|
|
4547
4549
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: optionListStyle, children: choices.map((chain) => {
|
|
4548
4550
|
const isSelected = chain.chainName === selectedChainName;
|
|
4549
4551
|
const isRecommended = chain.chainName === recommended?.chainName;
|
|
@@ -4571,7 +4573,7 @@ function SelectSourceScreen({
|
|
|
4571
4573
|
);
|
|
4572
4574
|
}) }),
|
|
4573
4575
|
tokenChoices.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
4574
|
-
/* @__PURE__ */ jsxRuntime.jsx("label", { style:
|
|
4576
|
+
/* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle4(tokens.textSecondary), children: "Token" }),
|
|
4575
4577
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: optionListStyle, children: tokenChoices.map((token) => {
|
|
4576
4578
|
const isSelected = token.tokenSymbol === selectedTokenSymbol;
|
|
4577
4579
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -4599,13 +4601,13 @@ function SelectSourceScreen({
|
|
|
4599
4601
|
}
|
|
4600
4602
|
);
|
|
4601
4603
|
}
|
|
4602
|
-
var
|
|
4604
|
+
var subtitleStyle6 = (color) => ({
|
|
4603
4605
|
fontSize: "0.85rem",
|
|
4604
4606
|
color,
|
|
4605
4607
|
margin: "0 0 20px",
|
|
4606
4608
|
lineHeight: 1.5
|
|
4607
4609
|
});
|
|
4608
|
-
var
|
|
4610
|
+
var labelStyle4 = (color) => ({
|
|
4609
4611
|
display: "block",
|
|
4610
4612
|
fontSize: "0.75rem",
|
|
4611
4613
|
fontWeight: 600,
|
|
@@ -4715,8 +4717,8 @@ function AdvancedSourceScreen({
|
|
|
4715
4717
|
}
|
|
4716
4718
|
),
|
|
4717
4719
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle8(tokens.text), children: "Set up One-Tap deposits" }),
|
|
4718
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style:
|
|
4719
|
-
/* @__PURE__ */ jsxRuntime.jsx("label", { style:
|
|
4720
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle7(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
|
|
4721
|
+
/* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle5(tokens.textSecondary), children: "Select tokens to approve" }),
|
|
4720
4722
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: chainListStyle, children: choices.map((chain) => {
|
|
4721
4723
|
const isExpanded = expandedChain === chain.chainName;
|
|
4722
4724
|
const chainHasSelection = localChain === chain.chainName;
|
|
@@ -4785,13 +4787,13 @@ var headingStyle8 = (color) => ({
|
|
|
4785
4787
|
color,
|
|
4786
4788
|
margin: "8px 0 4px"
|
|
4787
4789
|
});
|
|
4788
|
-
var
|
|
4790
|
+
var subtitleStyle7 = (color) => ({
|
|
4789
4791
|
fontSize: "0.86rem",
|
|
4790
4792
|
color,
|
|
4791
4793
|
margin: "0 0 20px",
|
|
4792
4794
|
lineHeight: 1.5
|
|
4793
4795
|
});
|
|
4794
|
-
var
|
|
4796
|
+
var labelStyle5 = (color) => ({
|
|
4795
4797
|
display: "block",
|
|
4796
4798
|
fontSize: "0.75rem",
|
|
4797
4799
|
fontWeight: 600,
|
|
@@ -4913,7 +4915,7 @@ function TransferStatusScreen({
|
|
|
4913
4915
|
const steps = buildSteps(phase);
|
|
4914
4916
|
return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {}), children: [
|
|
4915
4917
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onLogout }),
|
|
4916
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
4918
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle6, children: [
|
|
4917
4919
|
/* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 64 }),
|
|
4918
4920
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle9(tokens.text), children: "Depositing your money..." }),
|
|
4919
4921
|
error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle6(tokens), children: error }),
|
|
@@ -4921,7 +4923,7 @@ function TransferStatusScreen({
|
|
|
4921
4923
|
] })
|
|
4922
4924
|
] });
|
|
4923
4925
|
}
|
|
4924
|
-
var
|
|
4926
|
+
var contentStyle6 = {
|
|
4925
4927
|
flex: 1,
|
|
4926
4928
|
display: "flex",
|
|
4927
4929
|
flexDirection: "column",
|
|
@@ -5012,14 +5014,14 @@ function OpenWalletScreen({
|
|
|
5012
5014
|
] }),
|
|
5013
5015
|
children: [
|
|
5014
5016
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onLogout }),
|
|
5015
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
5017
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle7, children: [
|
|
5016
5018
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: logoCircleStyle(tokens.bgInput), children: logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 32 }) }),
|
|
5017
5019
|
/* @__PURE__ */ jsxRuntime.jsxs("h2", { style: headingStyle10(tokens.text), children: [
|
|
5018
5020
|
"Setting up ",
|
|
5019
5021
|
displayName,
|
|
5020
5022
|
"..."
|
|
5021
5023
|
] }),
|
|
5022
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style:
|
|
5024
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle8(tokens.textSecondary), children: "Approve the connection in your wallet extension." }),
|
|
5023
5025
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: waitingBadgeStyle(tokens), children: [
|
|
5024
5026
|
/* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 14 }),
|
|
5025
5027
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Waiting for authorization..." })
|
|
@@ -5045,10 +5047,10 @@ function OpenWalletScreen({
|
|
|
5045
5047
|
] }),
|
|
5046
5048
|
children: [
|
|
5047
5049
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack, onLogout }),
|
|
5048
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
5050
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle7, children: [
|
|
5049
5051
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: logoCircleStyle(tokens.bgInput), children: logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 32 }) }),
|
|
5050
5052
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle10(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
|
|
5051
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style:
|
|
5053
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle8(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
|
|
5052
5054
|
!loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: waitingBadgeStyle(tokens), children: [
|
|
5053
5055
|
/* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 14 }),
|
|
5054
5056
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Waiting for authorization..." })
|
|
@@ -5058,7 +5060,7 @@ function OpenWalletScreen({
|
|
|
5058
5060
|
}
|
|
5059
5061
|
);
|
|
5060
5062
|
}
|
|
5061
|
-
var
|
|
5063
|
+
var contentStyle7 = {
|
|
5062
5064
|
flex: 1,
|
|
5063
5065
|
display: "flex",
|
|
5064
5066
|
flexDirection: "column",
|
|
@@ -5095,7 +5097,7 @@ var headingStyle10 = (color) => ({
|
|
|
5095
5097
|
color,
|
|
5096
5098
|
margin: "20px 0 8px"
|
|
5097
5099
|
});
|
|
5098
|
-
var
|
|
5100
|
+
var subtitleStyle8 = (color) => ({
|
|
5099
5101
|
fontSize: "0.9rem",
|
|
5100
5102
|
color,
|
|
5101
5103
|
margin: "0 0 24px",
|
|
@@ -5144,10 +5146,10 @@ function ConfirmSignScreen({
|
|
|
5144
5146
|
] }),
|
|
5145
5147
|
children: [
|
|
5146
5148
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onLogout }),
|
|
5147
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
5149
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle8, children: [
|
|
5148
5150
|
logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle3 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
|
|
5149
5151
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle11(tokens.text), children: "Wallet authorized" }),
|
|
5150
|
-
/* @__PURE__ */ jsxRuntime.jsxs("p", { style:
|
|
5152
|
+
/* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle9(tokens.textSecondary), children: [
|
|
5151
5153
|
displayName,
|
|
5152
5154
|
" approved the connection. Tap below to confirm your payment."
|
|
5153
5155
|
] }),
|
|
@@ -5160,7 +5162,7 @@ function ConfirmSignScreen({
|
|
|
5160
5162
|
}
|
|
5161
5163
|
);
|
|
5162
5164
|
}
|
|
5163
|
-
var
|
|
5165
|
+
var contentStyle8 = {
|
|
5164
5166
|
flex: 1,
|
|
5165
5167
|
display: "flex",
|
|
5166
5168
|
flexDirection: "column",
|
|
@@ -5182,7 +5184,7 @@ var headingStyle11 = (color) => ({
|
|
|
5182
5184
|
color,
|
|
5183
5185
|
margin: "20px 0 8px"
|
|
5184
5186
|
});
|
|
5185
|
-
var
|
|
5187
|
+
var subtitleStyle9 = (color) => ({
|
|
5186
5188
|
fontSize: "0.9rem",
|
|
5187
5189
|
color,
|
|
5188
5190
|
margin: "0 0 24px",
|
|
@@ -5223,7 +5225,8 @@ function TokenPickerScreen({
|
|
|
5223
5225
|
onAuthorizeToken,
|
|
5224
5226
|
onBack,
|
|
5225
5227
|
onLogout,
|
|
5226
|
-
depositAmount
|
|
5228
|
+
depositAmount,
|
|
5229
|
+
selectedTokenSymbol
|
|
5227
5230
|
}) {
|
|
5228
5231
|
const { tokens: t } = useSwypeConfig();
|
|
5229
5232
|
const entries = [];
|
|
@@ -5252,24 +5255,28 @@ function TokenPickerScreen({
|
|
|
5252
5255
|
};
|
|
5253
5256
|
return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {}), children: [
|
|
5254
5257
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack, onLogout }),
|
|
5255
|
-
|
|
5256
|
-
depositAmount != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: depositCardStyle2(t), children: [
|
|
5258
|
+
depositAmount != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
5257
5259
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: depositLabelStyle2(t.textMuted), children: "Depositing" }),
|
|
5258
5260
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: depositAmountRowStyle, children: [
|
|
5259
5261
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: depositAmountStyle(t.text), children: [
|
|
5260
5262
|
"$",
|
|
5261
|
-
depositAmount.toLocaleString("en-US", { minimumFractionDigits:
|
|
5263
|
+
depositAmount.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
5262
5264
|
] }),
|
|
5263
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5264
|
-
|
|
5265
|
-
|
|
5266
|
-
|
|
5267
|
-
|
|
5268
|
-
|
|
5269
|
-
|
|
5270
|
-
|
|
5271
|
-
|
|
5272
|
-
|
|
5265
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5266
|
+
"button",
|
|
5267
|
+
{
|
|
5268
|
+
type: "button",
|
|
5269
|
+
onClick: onBack,
|
|
5270
|
+
style: tokenIconButtonStyle3,
|
|
5271
|
+
children: [
|
|
5272
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: tokenIconWrapStyle3, children: selectedTokenSymbol && TOKEN_LOGOS[selectedTokenSymbol] ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: TOKEN_LOGOS[selectedTokenSymbol], alt: selectedTokenSymbol, width: 36, height: 36, style: { borderRadius: "50%" } }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
|
|
5273
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "18", r: "18", fill: "#2DB84B" }),
|
|
5274
|
+
/* @__PURE__ */ jsxRuntime.jsx("text", { x: "18", y: "23", textAnchor: "middle", fontSize: "18", fill: "#fff", fontWeight: "700", children: "$" })
|
|
5275
|
+
] }) }),
|
|
5276
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.5 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6", stroke: t.textMuted, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
5277
|
+
]
|
|
5278
|
+
}
|
|
5279
|
+
)
|
|
5273
5280
|
] })
|
|
5274
5281
|
] }),
|
|
5275
5282
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: sectionLabelStyle(t.textMuted), children: "Choose token" }),
|
|
@@ -5282,7 +5289,7 @@ function TokenPickerScreen({
|
|
|
5282
5289
|
onClick: () => handleSelect(entry),
|
|
5283
5290
|
style: tokenRowStyle2(t),
|
|
5284
5291
|
children: [
|
|
5285
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: tokenIconCircleStyle(t), children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenIconTextStyle(t.textMuted), children: "$" }) }),
|
|
5292
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: tokenIconCircleStyle(t, !!TOKEN_LOGOS[entry.tokenSymbol]), children: TOKEN_LOGOS[entry.tokenSymbol] ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: TOKEN_LOGOS[entry.tokenSymbol], alt: entry.tokenSymbol, style: tokenLogoImgStyle }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenIconTextStyle(t.textMuted), children: "$" }) }),
|
|
5286
5293
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenInfoStyle2, children: [
|
|
5287
5294
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenNameRowStyle, children: [
|
|
5288
5295
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenSymbolTextStyle(t.text), children: entry.tokenSymbol }),
|
|
@@ -5305,22 +5312,6 @@ function TokenPickerScreen({
|
|
|
5305
5312
|
}) })
|
|
5306
5313
|
] });
|
|
5307
5314
|
}
|
|
5308
|
-
var mascotWrapStyle = {
|
|
5309
|
-
display: "flex",
|
|
5310
|
-
justifyContent: "center",
|
|
5311
|
-
marginBottom: 16
|
|
5312
|
-
};
|
|
5313
|
-
var mascotImgStyle = {
|
|
5314
|
-
width: 36,
|
|
5315
|
-
height: 36
|
|
5316
|
-
};
|
|
5317
|
-
var depositCardStyle2 = (tokens) => ({
|
|
5318
|
-
background: tokens.bgInput,
|
|
5319
|
-
border: `1px solid ${tokens.border}`,
|
|
5320
|
-
borderRadius: tokens.radiusLg,
|
|
5321
|
-
padding: "16px 20px",
|
|
5322
|
-
marginBottom: 24
|
|
5323
|
-
});
|
|
5324
5315
|
var depositLabelStyle2 = (color) => ({
|
|
5325
5316
|
fontSize: "0.75rem",
|
|
5326
5317
|
fontWeight: 500,
|
|
@@ -5333,22 +5324,27 @@ var depositAmountRowStyle = {
|
|
|
5333
5324
|
justifyContent: "space-between"
|
|
5334
5325
|
};
|
|
5335
5326
|
var depositAmountStyle = (color) => ({
|
|
5336
|
-
fontSize: "2.
|
|
5327
|
+
fontSize: "2.4rem",
|
|
5337
5328
|
fontWeight: 700,
|
|
5338
5329
|
letterSpacing: "-0.02em",
|
|
5339
5330
|
color
|
|
5340
5331
|
});
|
|
5332
|
+
var tokenIconButtonStyle3 = {
|
|
5333
|
+
display: "flex",
|
|
5334
|
+
alignItems: "center",
|
|
5335
|
+
gap: 4,
|
|
5336
|
+
background: "transparent",
|
|
5337
|
+
border: "none",
|
|
5338
|
+
cursor: "pointer",
|
|
5339
|
+
padding: 0,
|
|
5340
|
+
flexShrink: 0
|
|
5341
|
+
};
|
|
5341
5342
|
var tokenIconWrapStyle3 = {
|
|
5342
5343
|
position: "relative",
|
|
5343
|
-
width:
|
|
5344
|
-
height:
|
|
5344
|
+
width: 36,
|
|
5345
|
+
height: 36,
|
|
5345
5346
|
flexShrink: 0
|
|
5346
5347
|
};
|
|
5347
|
-
var checkBadgeStyle3 = {
|
|
5348
|
-
position: "absolute",
|
|
5349
|
-
bottom: -1,
|
|
5350
|
-
right: -3
|
|
5351
|
-
};
|
|
5352
5348
|
var sectionLabelStyle = (color) => ({
|
|
5353
5349
|
fontSize: "0.84rem",
|
|
5354
5350
|
fontWeight: 500,
|
|
@@ -5373,16 +5369,23 @@ var tokenRowStyle2 = (tokens) => ({
|
|
|
5373
5369
|
textAlign: "left",
|
|
5374
5370
|
width: "100%"
|
|
5375
5371
|
});
|
|
5376
|
-
var tokenIconCircleStyle = (tokens) => ({
|
|
5372
|
+
var tokenIconCircleStyle = (tokens, hasLogo) => ({
|
|
5377
5373
|
width: 36,
|
|
5378
5374
|
height: 36,
|
|
5379
5375
|
borderRadius: "50%",
|
|
5380
|
-
border: `1.5px solid ${tokens.border}`,
|
|
5376
|
+
border: hasLogo ? "none" : `1.5px solid ${tokens.border}`,
|
|
5381
5377
|
display: "flex",
|
|
5382
5378
|
alignItems: "center",
|
|
5383
5379
|
justifyContent: "center",
|
|
5384
|
-
flexShrink: 0
|
|
5380
|
+
flexShrink: 0,
|
|
5381
|
+
overflow: "hidden"
|
|
5385
5382
|
});
|
|
5383
|
+
var tokenLogoImgStyle = {
|
|
5384
|
+
width: 36,
|
|
5385
|
+
height: 36,
|
|
5386
|
+
borderRadius: "50%",
|
|
5387
|
+
objectFit: "cover"
|
|
5388
|
+
};
|
|
5386
5389
|
var tokenIconTextStyle = (color) => ({
|
|
5387
5390
|
fontSize: "1rem",
|
|
5388
5391
|
fontWeight: 700,
|
|
@@ -5646,7 +5649,8 @@ function StepRendererContent({
|
|
|
5646
5649
|
onAdvanced: handlers.onSelectToken,
|
|
5647
5650
|
selectedSourceLabel: effectiveSourceLabel,
|
|
5648
5651
|
loading: savingOneTapLimit,
|
|
5649
|
-
error: state.error
|
|
5652
|
+
error: state.error,
|
|
5653
|
+
selectedTokenSymbol: selectedSource?.token.symbol
|
|
5650
5654
|
}
|
|
5651
5655
|
);
|
|
5652
5656
|
}
|
|
@@ -5690,7 +5694,8 @@ function StepRendererContent({
|
|
|
5690
5694
|
onAuthorizeAccount: handlers.onContinueConnection,
|
|
5691
5695
|
onAddProvider: () => handlers.onNavigate("wallet-picker"),
|
|
5692
5696
|
onSelectToken: handlers.onSelectToken,
|
|
5693
|
-
selectedSourceLabel
|
|
5697
|
+
selectedSourceLabel,
|
|
5698
|
+
selectedTokenSymbol: selectedSource?.token.symbol
|
|
5694
5699
|
}
|
|
5695
5700
|
);
|
|
5696
5701
|
}
|
|
@@ -5707,7 +5712,8 @@ function StepRendererContent({
|
|
|
5707
5712
|
onAuthorizeToken: handlers.onAuthorizeToken,
|
|
5708
5713
|
onBack: () => handlers.onNavigate(state.previousStep === "setup" ? "setup" : "deposit"),
|
|
5709
5714
|
onLogout: handlers.onLogout,
|
|
5710
|
-
depositAmount: depositAmount ?? void 0
|
|
5715
|
+
depositAmount: depositAmount ?? void 0,
|
|
5716
|
+
selectedTokenSymbol: selectedSource?.token.symbol
|
|
5711
5717
|
}
|
|
5712
5718
|
);
|
|
5713
5719
|
}
|
|
@@ -5784,7 +5790,8 @@ function StepRendererContent({
|
|
|
5784
5790
|
onSelectAccount: handlers.onSelectAccount,
|
|
5785
5791
|
onAuthorizeAccount: handlers.onContinueConnection,
|
|
5786
5792
|
onAddProvider: () => handlers.onNavigate("wallet-picker"),
|
|
5787
|
-
selectedSourceLabel
|
|
5793
|
+
selectedSourceLabel,
|
|
5794
|
+
selectedTokenSymbol: selectedSource?.token.symbol
|
|
5788
5795
|
}
|
|
5789
5796
|
);
|
|
5790
5797
|
}
|