@funkit/connect 1.4.1 → 1.5.0-next.0

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.
Files changed (63) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/__private__/index.d.ts +0 -4
  3. package/dist/components/FunConnectOptions/ConnectDetails.d.ts +7 -0
  4. package/dist/components/QRCode/QRCode.css.d.ts +1 -0
  5. package/dist/index.css +5 -43
  6. package/dist/index.js +510 -2199
  7. package/dist/wallets/walletConnectors/bifrostWallet/bifrostWallet.js +2 -2
  8. package/dist/wallets/walletConnectors/bitgetWallet/bitgetWallet.js +2 -2
  9. package/dist/wallets/walletConnectors/bybitWallet/bybitWallet.js +2 -2
  10. package/dist/wallets/walletConnectors/chunk-32KBKKGT.js +182 -0
  11. package/dist/wallets/walletConnectors/chunk-37MVF2BB.js +94 -0
  12. package/dist/wallets/walletConnectors/chunk-3CLNL7LR.js +73 -0
  13. package/dist/wallets/walletConnectors/chunk-7GGRZNT3.js +96 -0
  14. package/dist/wallets/walletConnectors/chunk-7YDZTPO4.js +100 -0
  15. package/dist/wallets/walletConnectors/chunk-AJKRYTH2.js +92 -0
  16. package/dist/wallets/walletConnectors/chunk-BAFQ33Z6.js +71 -0
  17. package/dist/wallets/walletConnectors/chunk-CMXZK5RR.js +94 -0
  18. package/dist/wallets/walletConnectors/chunk-CVGDYGHA.js +60 -0
  19. package/dist/wallets/walletConnectors/chunk-F4EJ42XO.js +105 -0
  20. package/dist/wallets/walletConnectors/chunk-FGBCIE4L.js +182 -0
  21. package/dist/wallets/walletConnectors/chunk-FL2VIO76.js +71 -0
  22. package/dist/wallets/walletConnectors/chunk-GJ4TYHDI.js +102 -0
  23. package/dist/wallets/walletConnectors/chunk-I5GSQUQN.js +98 -0
  24. package/dist/wallets/walletConnectors/chunk-IIJOJ6AD.js +102 -0
  25. package/dist/wallets/walletConnectors/chunk-KZFAL4RZ.js +27 -0
  26. package/dist/wallets/walletConnectors/chunk-LJRV5JY7.js +95 -0
  27. package/dist/wallets/walletConnectors/chunk-MSRKKVDE.js +98 -0
  28. package/dist/wallets/walletConnectors/chunk-OKZSWAPF.js +60 -0
  29. package/dist/wallets/walletConnectors/chunk-OYKWP3N3.js +60 -0
  30. package/dist/wallets/walletConnectors/chunk-OYW4TIA3.js +81 -0
  31. package/dist/wallets/walletConnectors/chunk-PK46LOWC.js +95 -0
  32. package/dist/wallets/walletConnectors/chunk-QYK7UAJQ.js +96 -0
  33. package/dist/wallets/walletConnectors/chunk-THEL4ZSX.js +105 -0
  34. package/dist/wallets/walletConnectors/chunk-XC7OMZSO.js +73 -0
  35. package/dist/wallets/walletConnectors/chunk-Z4YUZ33O.js +100 -0
  36. package/dist/wallets/walletConnectors/clvWallet/clvWallet.js +2 -2
  37. package/dist/wallets/walletConnectors/coin98Wallet/coin98Wallet.js +2 -2
  38. package/dist/wallets/walletConnectors/coreWallet/coreWallet.js +2 -2
  39. package/dist/wallets/walletConnectors/foxWallet/foxWallet.js +2 -2
  40. package/dist/wallets/walletConnectors/frontierWallet/frontierWallet.js +2 -2
  41. package/dist/wallets/walletConnectors/gateWallet/gateWallet.js +2 -2
  42. package/dist/wallets/walletConnectors/index.js +67 -67
  43. package/dist/wallets/walletConnectors/metaMaskWallet/metaMaskWallet.js +2 -2
  44. package/dist/wallets/walletConnectors/okxWallet/okxWallet.js +2 -2
  45. package/dist/wallets/walletConnectors/rainbowWallet/rainbowWallet.js +2 -2
  46. package/dist/wallets/walletConnectors/roninWallet/roninWallet.js +2 -2
  47. package/dist/wallets/walletConnectors/safepalWallet/safepalWallet.js +2 -2
  48. package/dist/wallets/walletConnectors/subWallet/subWallet.js +2 -2
  49. package/dist/wallets/walletConnectors/tokenPocketWallet/tokenPocketWallet.js +2 -2
  50. package/dist/wallets/walletConnectors/trustWallet/trustWallet.js +2 -2
  51. package/dist/wallets/walletConnectors/zerionWallet/zerionWallet.js +2 -2
  52. package/package.json +6 -6
  53. package/dist/components/ConnectOptions/ConnectDetails.d.ts +0 -35
  54. package/dist/components/ConnectOptions/ConnectOptions.d.ts +0 -4
  55. package/dist/components/ConnectOptions/DesktopOptions.css.d.ts +0 -4
  56. package/dist/components/ConnectOptions/DesktopOptions.d.ts +0 -15
  57. package/dist/components/ConnectOptions/MobileOptions.css.d.ts +0 -3
  58. package/dist/components/ConnectOptions/MobileOptions.d.ts +0 -10
  59. package/dist/components/ConnectOptions/MobileStatus.d.ts +0 -4
  60. package/dist/connect-XNDTNVUH.js +0 -6
  61. package/dist/create-PAJXJDV3.js +0 -6
  62. package/dist/refresh-5KGGHTJP.js +0 -6
  63. package/dist/scan-HZBLXLM4.js +0 -6
package/dist/index.js CHANGED
@@ -11,7 +11,7 @@ import {
11
11
  import "./chunk-I24HX4XM.js";
12
12
 
13
13
  // src/components/ConnectButton/ConnectButton.tsx
14
- import React148, { useContext as useContext30, useEffect as useEffect35, useState as useState45 } from "react";
14
+ import React135, { useContext as useContext27, useEffect as useEffect34, useState as useState44 } from "react";
15
15
 
16
16
  // src/css/sprinkles.css.ts
17
17
  import { createMapValueFn as _51c72 } from "@vanilla-extract/sprinkles/createUtils";
@@ -130,13 +130,13 @@ import PrivyJS, {
130
130
  getUserEmbeddedWallet,
131
131
  LocalStorage
132
132
  } from "@privy-io/js-sdk-core";
133
- import React143, {
134
- createContext as createContext19,
133
+ import React130, {
134
+ createContext as createContext18,
135
135
  useCallback as useCallback31,
136
- useContext as useContext26,
137
- useEffect as useEffect31,
136
+ useContext as useContext23,
137
+ useEffect as useEffect30,
138
138
  useMemo as useMemo35,
139
- useState as useState40
139
+ useState as useState39
140
140
  } from "react";
141
141
  import { useConfig as useConfig5, useConnect as useConnect2, useDisconnect as useDisconnect3 } from "wagmi";
142
142
 
@@ -1130,13 +1130,13 @@ var useFunkitConnectChainsById = () => groupChainsById(useFunkitConnectChains())
1130
1130
  var useInitialChainId = () => useContext3(FunkitConnectChainContext).initialChainId;
1131
1131
 
1132
1132
  // src/components/FunkitProvider/ModalContext.tsx
1133
- import React142, {
1134
- createContext as createContext18,
1133
+ import React129, {
1134
+ createContext as createContext17,
1135
1135
  useCallback as useCallback30,
1136
- useContext as useContext25,
1137
- useEffect as useEffect30,
1136
+ useContext as useContext22,
1137
+ useEffect as useEffect29,
1138
1138
  useMemo as useMemo34,
1139
- useState as useState39
1139
+ useState as useState38
1140
1140
  } from "react";
1141
1141
  import { useAccount as useAccount11, useAccountEffect as useAccountEffect2, useConfig as useConfig4 } from "wagmi";
1142
1142
 
@@ -1889,7 +1889,7 @@ function GeneralWalletProvider({ children }) {
1889
1889
  userId: userInfo.id
1890
1890
  });
1891
1891
  }
1892
- }, [userInfo]);
1892
+ }, [apiKey, userInfo]);
1893
1893
  const intervalRef = useRef2();
1894
1894
  const [isFetchingAssets, setIsFetchingAssets] = useState6(false);
1895
1895
  const [walletAssets, setWalletAssets] = useState6(null);
@@ -2184,12 +2184,6 @@ var useActivityTraversal = () => {
2184
2184
  // src/components/ProfileDetails/ProfileDetails.tsx
2185
2185
  import React107, { useCallback as useCallback24, useState as useState31 } from "react";
2186
2186
 
2187
- // src/components/ConnectOptions/DesktopOptions.css.ts
2188
- var QRCodeBackgroundClassName = "mu4zht0";
2189
- var ScrollClassName = "mu4zht2 _1rsrm2fba _1rsrm2fbw";
2190
- var sidebar = "mu4zht3";
2191
- var sidebarCompactMode = "mu4zht4";
2192
-
2193
2187
  // src/components/FunCheckoutHistoryModal/FunCheckoutHistoryContent.tsx
2194
2188
  import React91, { useCallback as useCallback22, useMemo as useMemo26, useState as useState26 } from "react";
2195
2189
 
@@ -2937,7 +2931,6 @@ function FunkitCheckoutProvider({ children }) {
2937
2931
  historyDepositAddress,
2938
2932
  isGuestUserOnCheckoutHistory,
2939
2933
  isUserLoggedIn,
2940
- walletAddress,
2941
2934
  userInfo
2942
2935
  ]);
2943
2936
  useEffect7(() => {
@@ -4273,8 +4266,8 @@ function AsyncImage({
4273
4266
  width,
4274
4267
  testId
4275
4268
  }) {
4276
- const src7 = useAsyncImage(srcProp || fallbackSrc);
4277
- const isRemoteImage = src7 && /^http/.test(src7);
4269
+ const src3 = useAsyncImage(srcProp || fallbackSrc);
4270
+ const isRemoteImage = src3 && /^http/.test(src3);
4278
4271
  const [isRemoteImageLoaded, setRemoteImageLoaded] = useReducer2(
4279
4272
  () => true,
4280
4273
  false
@@ -4295,11 +4288,11 @@ function AsyncImage({
4295
4288
  width: typeof width === "string" ? width : void 0,
4296
4289
  testId
4297
4290
  }, /* @__PURE__ */ React26.createElement(Box, {
4298
- ...useAsImage ? { "aria-hidden": true, as: "img", src: src7 } : isRemoteImage ? {
4291
+ ...useAsImage ? { "aria-hidden": true, as: "img", src: src3 } : isRemoteImage ? {
4299
4292
  "aria-hidden": true,
4300
4293
  as: "img",
4301
4294
  onLoad: setRemoteImageLoaded,
4302
- src: src7,
4295
+ src: src3,
4303
4296
  onError: ({ currentTarget }) => {
4304
4297
  currentTarget.onerror = null;
4305
4298
  currentTarget.src = fallbackSrc;
@@ -4316,9 +4309,9 @@ function AsyncImage({
4316
4309
  ...!useAsImage ? isRemoteImage ? {
4317
4310
  opacity: isRemoteImageLoaded ? 1 : 0
4318
4311
  } : {
4319
- backgroundImage: src7 ? `url(${src7})` : void 0,
4312
+ backgroundImage: src3 ? `url(${src3})` : void 0,
4320
4313
  backgroundRepeat: "no-repeat",
4321
- opacity: src7 ? 1 : 0
4314
+ opacity: src3 ? 1 : 0
4322
4315
  } : {}
4323
4316
  },
4324
4317
  width: "full"
@@ -5846,16 +5839,6 @@ import React52, { useMemo as useMemo10 } from "react";
5846
5839
 
5847
5840
  // src/components/Icons/Info.tsx
5848
5841
  import React51 from "react";
5849
- var InfoIcon = () => /* @__PURE__ */ React51.createElement("svg", {
5850
- fill: "none",
5851
- height: "12",
5852
- viewBox: "0 0 8 12",
5853
- width: "8",
5854
- xmlns: "http://www.w3.org/2000/svg"
5855
- }, /* @__PURE__ */ React51.createElement("path", {
5856
- d: "M3.64258 7.99609C4.19336 7.99609 4.5625 7.73828 4.68555 7.24609C4.69141 7.21094 4.70312 7.16406 4.70898 7.13477C4.80859 6.60742 5.05469 6.35547 6.04492 5.76367C7.14648 5.10156 7.67969 4.3457 7.67969 3.24414C7.67969 1.39844 6.17383 0.255859 3.95898 0.255859C2.32422 0.255859 1.05859 0.894531 0.548828 1.86719C0.396484 2.14844 0.320312 2.44727 0.320312 2.74023C0.314453 3.37305 0.742188 3.79492 1.42188 3.79492C1.91406 3.79492 2.33594 3.54883 2.53516 3.11523C2.78711 2.47656 3.23242 2.21289 3.83594 2.21289C4.55664 2.21289 5.10742 2.65234 5.10742 3.29102C5.10742 3.9707 4.7793 4.29883 3.81836 4.87891C3.02148 5.36523 2.50586 5.92773 2.50586 6.76562V6.90039C2.50586 7.55664 2.96289 7.99609 3.64258 7.99609ZM3.67188 11.4473C4.42773 11.4473 5.04297 10.8672 5.04297 10.1406C5.04297 9.41406 4.42773 8.83984 3.67188 8.83984C2.91602 8.83984 2.30664 9.41406 2.30664 10.1406C2.30664 10.8672 2.91602 11.4473 3.67188 11.4473Z",
5857
- fill: "currentColor"
5858
- }));
5859
5842
  var FunInfoIcon = () => /* @__PURE__ */ React51.createElement("svg", {
5860
5843
  width: "13",
5861
5844
  height: "14",
@@ -6745,6 +6728,11 @@ import React63 from "react";
6745
6728
  // src/components/QRCode/QRCode.tsx
6746
6729
  import QRCodeUtil from "qrcode";
6747
6730
  import React62, { useMemo as useMemo15 } from "react";
6731
+
6732
+ // src/components/QRCode/QRCode.css.ts
6733
+ var QRCodeBackgroundClassName = "mthwt00";
6734
+
6735
+ // src/components/QRCode/QRCode.tsx
6748
6736
  var generateMatrix = (value, errorCorrectionLevel) => {
6749
6737
  const arr = Array.prototype.slice.call(
6750
6738
  QRCodeUtil.create(value, { errorCorrectionLevel }).modules.data,
@@ -7943,7 +7931,7 @@ var Chain3 = ({
7943
7931
  switchChain,
7944
7932
  chainIconSize,
7945
7933
  isLoading,
7946
- src: src7,
7934
+ src: src3,
7947
7935
  name,
7948
7936
  iconBackground,
7949
7937
  idx
@@ -11665,12 +11653,12 @@ function ProfileDetails({ onClose, onDisconnect }) {
11665
11653
  [onSelectActivity, view]
11666
11654
  );
11667
11655
  return /* @__PURE__ */ React107.createElement(Box, {
11668
- className: sidebarCompactMode,
11669
11656
  display: "flex",
11670
11657
  flexDirection: "column",
11671
11658
  marginTop: "16",
11672
11659
  paddingX: "20",
11673
- width: "full"
11660
+ width: "full",
11661
+ minWidth: "full"
11674
11662
  }, view === 0 /* HOME */ ? /* @__PURE__ */ React107.createElement(Home, {
11675
11663
  onClose,
11676
11664
  onChangeView: (newView) => setView(newView),
@@ -11843,11 +11831,11 @@ function ChainModal({ onClose, open }) {
11843
11831
  }
11844
11832
 
11845
11833
  // src/components/ConnectModal/ConnectModal.tsx
11846
- import React139 from "react";
11834
+ import React126 from "react";
11847
11835
  import { useAccount as useAccount10, useDisconnect as useDisconnect2 } from "wagmi";
11848
11836
 
11849
11837
  // src/components/FunConnectOptions/FunConnectOptions.tsx
11850
- import React137, { useCallback as useCallback28, useState as useState38 } from "react";
11838
+ import React123, { useCallback as useCallback28, useState as useState37 } from "react";
11851
11839
 
11852
11840
  // src/components/FunConnectOptions/FunConnectErrorStep.tsx
11853
11841
  import React111 from "react";
@@ -11897,7 +11885,7 @@ function isArc() {
11897
11885
  }
11898
11886
  function getBrowser() {
11899
11887
  var _a, _b;
11900
- if (typeof navigator === "undefined" || Object.keys(navigator).length === 0)
11888
+ if (typeof navigator === "undefined")
11901
11889
  return "Browser" /* Browser */;
11902
11890
  const ua2 = (_a = navigator.userAgent) == null ? void 0 : _a.toLowerCase();
11903
11891
  if ((_b = navigator.brave) == null ? void 0 : _b.isBrave)
@@ -12932,10 +12920,10 @@ var FunWeb2ConnectingStep = (props) => {
12932
12920
  };
12933
12921
 
12934
12922
  // src/components/FunConnectOptions/FunWeb3ConnectingStep.tsx
12935
- import React136 from "react";
12923
+ import React122 from "react";
12936
12924
 
12937
- // src/components/ConnectOptions/ConnectDetails.tsx
12938
- import React135, { useContext as useContext23, useEffect as useEffect29 } from "react";
12925
+ // src/components/FunConnectOptions/ConnectDetails.tsx
12926
+ import React121, { useEffect as useEffect28 } from "react";
12939
12927
 
12940
12928
  // src/hooks/useWindowSize.ts
12941
12929
  import { useEffect as useEffect27, useState as useState36 } from "react";
@@ -12974,33 +12962,6 @@ var useWindowSize = () => {
12974
12962
  return windowSize;
12975
12963
  };
12976
12964
 
12977
- // src/utils/colors.ts
12978
- var convertHexToRGBA = (hexCode, opacity = 1) => {
12979
- let hex = hexCode.replace("#", "");
12980
- if (hex.length === 3) {
12981
- hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
12982
- }
12983
- const r = parseInt(hex.substring(0, 2), 16);
12984
- const g = parseInt(hex.substring(2, 4), 16);
12985
- const b = parseInt(hex.substring(4, 6), 16);
12986
- if (opacity > 1 && opacity <= 100) {
12987
- opacity = opacity / 100;
12988
- }
12989
- return `rgba(${r},${g},${b},${opacity})`;
12990
- };
12991
- var getGradientRGBAs = (hexColor) => {
12992
- if (!hexColor)
12993
- return null;
12994
- return [
12995
- convertHexToRGBA(hexColor, 0.2),
12996
- convertHexToRGBA(hexColor, 0.14),
12997
- convertHexToRGBA(hexColor, 0.1)
12998
- ];
12999
- };
13000
- var isHexString = (color) => {
13001
- return /^#([0-9a-f]{3}){1,2}$/i.test(color);
13002
- };
13003
-
13004
12965
  // src/utils/platforms.ts
13005
12966
  import { UAParser } from "ua-parser-js";
13006
12967
  var ua = UAParser();
@@ -13026,117 +12987,28 @@ function getPlatform() {
13026
12987
  return "Desktop" /* Desktop */;
13027
12988
  }
13028
12989
 
13029
- // src/components/Button/ActionButton.tsx
13030
- import React120 from "react";
13031
- var sizeVariants = {
13032
- large: {
13033
- fontSize: "16",
13034
- paddingX: "24",
13035
- paddingY: "10"
13036
- },
13037
- medium: {
13038
- fontSize: "14",
13039
- height: "28",
13040
- paddingX: "12",
13041
- paddingY: "4"
13042
- },
13043
- small: {
13044
- fontSize: "14",
13045
- paddingX: "10",
13046
- paddingY: "5"
13047
- }
13048
- };
13049
- function ActionButton({
13050
- disabled = false,
13051
- href,
13052
- label,
13053
- onClick,
13054
- rel = "noreferrer noopener",
13055
- size = "medium",
13056
- target = "_blank",
13057
- testId,
13058
- type = "primary"
13059
- }) {
13060
- const isPrimary = type === "primary";
13061
- const isNotLarge = size !== "large";
13062
- const mobile = isMobile();
13063
- const background = !disabled ? isPrimary ? "accentColor" : isNotLarge ? "actionButtonSecondaryBackground" : null : "actionButtonSecondaryBackground";
13064
- const { fontSize, height, paddingX, paddingY } = sizeVariants[size];
13065
- const hasBorder = !mobile || !isNotLarge;
13066
- return /* @__PURE__ */ React120.createElement(Box, {
13067
- ...href ? !disabled ? { as: "a", href, rel, target } : {} : { as: "button", type: "button" },
13068
- onClick: !disabled ? onClick : void 0,
13069
- ...hasBorder ? {
13070
- borderColor: mobile && !isNotLarge && !isPrimary ? "actionButtonBorderMobile" : "actionButtonBorder",
13071
- borderStyle: "solid",
13072
- borderWidth: "1"
13073
- } : {},
13074
- borderRadius: "actionButton",
13075
- className: !disabled && touchableStyles({ active: "shrinkSm", hover: "grow" }),
13076
- display: "block",
13077
- paddingX,
13078
- paddingY,
13079
- style: { willChange: "transform" },
13080
- testId,
13081
- textAlign: "center",
13082
- transition: "transform",
13083
- ...background ? { background } : {},
13084
- ...height ? { height } : {}
13085
- }, /* @__PURE__ */ React120.createElement(Text, {
13086
- color: !disabled ? isPrimary ? "accentColorForeground" : "accentColor" : "modalTextSecondary",
13087
- size: fontSize,
13088
- weight: "bold"
13089
- }, label));
13090
- }
13091
-
13092
- // src/components/Icons/Connect.tsx
13093
- import React121 from "react";
13094
- var src = async () => (await import("./connect-XNDTNVUH.js")).default;
13095
- var preloadConnectIcon = () => loadImages(src);
13096
- var ConnectIcon = () => /* @__PURE__ */ React121.createElement(AsyncImage, {
13097
- background: "#515a70",
13098
- borderColor: "generalBorder",
13099
- borderRadius: "10",
13100
- height: "48",
13101
- src,
13102
- width: "48"
13103
- });
13104
-
13105
- // src/components/Icons/Create.tsx
13106
- import React122 from "react";
13107
- var src2 = async () => (await import("./create-PAJXJDV3.js")).default;
13108
- var preloadCreateIcon = () => loadImages(src2);
13109
- var CreateIcon = () => /* @__PURE__ */ React122.createElement(AsyncImage, {
13110
- background: "#e3a5e8",
13111
- borderColor: "generalBorder",
13112
- borderRadius: "10",
13113
- height: "48",
13114
- src: src2,
13115
- width: "48"
13116
- });
13117
-
13118
12990
  // src/components/Icons/LinkIcon.tsx
13119
- import React123 from "react";
12991
+ import React120 from "react";
13120
12992
  var LinkIcon = () => {
13121
- return /* @__PURE__ */ React123.createElement("svg", {
12993
+ return /* @__PURE__ */ React120.createElement("svg", {
13122
12994
  width: "21",
13123
12995
  height: "11",
13124
12996
  viewBox: "0 0 21 11",
13125
12997
  fill: "none",
13126
12998
  xmlns: "http://www.w3.org/2000/svg"
13127
- }, /* @__PURE__ */ React123.createElement("path", {
12999
+ }, /* @__PURE__ */ React120.createElement("path", {
13128
13000
  d: "M7.375 1.33325H5.29167C3.32748 1.33325 2.34539 1.33325 1.73519 1.94345C1.125 2.55365 1.125 3.53575 1.125 5.49992C1.125 7.46409 1.125 8.44617 1.7352 9.05638C2.34539 9.66658 3.32748 9.66658 5.29167 9.66658H7.375",
13129
13001
  stroke: "currentColor",
13130
13002
  strokeWidth: "2.08333",
13131
13003
  strokeLinecap: "round",
13132
13004
  strokeLinejoin: "round"
13133
- }), /* @__PURE__ */ React123.createElement("path", {
13005
+ }), /* @__PURE__ */ React120.createElement("path", {
13134
13006
  d: "M13.625 9.66658H15.7083C17.6725 9.66658 18.6546 9.66658 19.2648 9.05638C19.875 8.44617 19.875 7.46409 19.875 5.49992C19.875 3.53575 19.875 2.55364 19.2648 1.94344C18.6546 1.33325 17.6725 1.33325 15.7083 1.33325H13.625",
13135
13007
  stroke: "currentColor",
13136
13008
  strokeWidth: "2.08333",
13137
13009
  strokeLinecap: "round",
13138
13010
  strokeLinejoin: "round"
13139
- }), /* @__PURE__ */ React123.createElement("path", {
13011
+ }), /* @__PURE__ */ React120.createElement("path", {
13140
13012
  d: "M6.3335 5.5H14.6668",
13141
13013
  stroke: "currentColor",
13142
13014
  strokeWidth: "2.08333",
@@ -13145,1436 +13017,178 @@ var LinkIcon = () => {
13145
13017
  }));
13146
13018
  };
13147
13019
 
13148
- // src/components/Icons/Refresh.tsx
13149
- import React124 from "react";
13150
- var src3 = async () => (await import("./refresh-5KGGHTJP.js")).default;
13151
- var preloadRefreshIcon = () => loadImages(src3);
13152
- var RefreshIcon = () => /* @__PURE__ */ React124.createElement(AsyncImage, {
13153
- background: "#515a70",
13154
- borderColor: "generalBorder",
13155
- borderRadius: "10",
13156
- height: "48",
13157
- src: src3,
13158
- width: "48"
13159
- });
13160
-
13161
- // src/components/Icons/Scan.tsx
13162
- import React125 from "react";
13163
- var src4 = async () => (await import("./scan-HZBLXLM4.js")).default;
13164
- var preloadScanIcon = () => loadImages(src4);
13165
- var ScanIcon = () => /* @__PURE__ */ React125.createElement(AsyncImage, {
13166
- background: "#515a70",
13167
- borderColor: "generalBorder",
13168
- borderRadius: "10",
13169
- height: "48",
13170
- src: src4,
13171
- width: "48"
13172
- });
13173
-
13174
- // src/components/ConnectOptions/DesktopOptions.tsx
13175
- import React134, { Fragment as Fragment4, useContext as useContext22, useEffect as useEffect28, useRef as useRef10, useState as useState37 } from "react";
13176
-
13177
- // src/components/ConnectModal/ConnectModalIntro.tsx
13178
- import React131, { useContext as useContext21 } from "react";
13179
-
13180
- // src/components/Disclaimer/DisclaimerLink.tsx
13181
- import React126 from "react";
13182
- var DisclaimerLink = ({
13183
- children,
13184
- href
13185
- }) => {
13186
- return /* @__PURE__ */ React126.createElement(Box, {
13187
- as: "a",
13188
- color: "accentColor",
13189
- href,
13190
- rel: "noreferrer",
13191
- target: "_blank"
13192
- }, children);
13193
- };
13194
-
13195
- // src/components/Disclaimer/DisclaimerText.tsx
13196
- import React127 from "react";
13197
- var DisclaimerText = ({ children }) => {
13198
- return /* @__PURE__ */ React127.createElement(Text, {
13199
- color: "modalTextSecondary",
13200
- size: "12",
13201
- weight: "medium"
13202
- }, children);
13020
+ // src/components/FunConnectOptions/ConnectDetails.tsx
13021
+ var getBrowserSrc = async () => {
13022
+ const browser = getBrowser();
13023
+ switch (browser) {
13024
+ case "Arc" /* Arc */:
13025
+ return (await import("./Arc-QDJFTGH2.js")).default;
13026
+ case "Brave" /* Brave */:
13027
+ return (await import("./Brave-YATE5BIM.js")).default;
13028
+ case "Chrome" /* Chrome */:
13029
+ return (await import("./Chrome-LGF33C3S.js")).default;
13030
+ case "Edge" /* Edge */:
13031
+ return (await import("./Edge-K2JEGI5S.js")).default;
13032
+ case "Firefox" /* Firefox */:
13033
+ return (await import("./Firefox-NP5SYEK5.js")).default;
13034
+ case "Opera" /* Opera */:
13035
+ return (await import("./Opera-KV54PXPA.js")).default;
13036
+ case "Safari" /* Safari */:
13037
+ return (await import("./Safari-2QIYKJ4P.js")).default;
13038
+ default:
13039
+ return (await import("./Browser-HN7O5MN7.js")).default;
13040
+ }
13203
13041
  };
13204
-
13205
- // src/components/FunkitProvider/AppContext.ts
13206
- import { createContext as createContext17 } from "react";
13207
- var defaultAppInfo = {
13208
- appName: void 0,
13209
- disclaimer: void 0,
13210
- learnMoreUrl: "https://learn.rainbow.me/understanding-web3?utm_source=rainbowkit&utm_campaign=learnmore"
13042
+ var preloadBrowserIcon = () => loadImages(getBrowserSrc);
13043
+ var getPlatformSrc = async () => {
13044
+ const platform = getPlatform();
13045
+ switch (platform) {
13046
+ case "Windows" /* Windows */:
13047
+ return (await import("./Windows-R3CKAIUV.js")).default;
13048
+ case "macOS" /* MacOS */:
13049
+ return (await import("./Macos-2KTZ2XLP.js")).default;
13050
+ case "Linux" /* Linux */:
13051
+ return (await import("./Linux-NS2LQPT4.js")).default;
13052
+ default:
13053
+ return (await import("./Linux-NS2LQPT4.js")).default;
13054
+ }
13211
13055
  };
13212
- var AppContext = createContext17(defaultAppInfo);
13213
-
13214
- // src/components/Icons/Assets.tsx
13215
- import React129 from "react";
13216
- var src5 = async () => (await import("./assets-26YY4GVD.js")).default;
13217
- var preloadAssetsIcon = () => loadImages(src5);
13218
- var AssetsIcon = () => /* @__PURE__ */ React129.createElement(AsyncImage, {
13219
- background: "#d0d5de",
13220
- borderRadius: "10",
13221
- height: "48",
13222
- src: src5,
13223
- width: "48"
13224
- });
13225
-
13226
- // src/components/Icons/Login.tsx
13227
- import React130 from "react";
13228
- var src6 = async () => (await import("./login-ZSMM5UYL.js")).default;
13229
- var preloadLoginIcon = () => loadImages(src6);
13230
- var LoginIcon = () => /* @__PURE__ */ React130.createElement(AsyncImage, {
13231
- background: "#d0d5de",
13232
- borderRadius: "10",
13233
- height: "48",
13234
- src: src6,
13235
- width: "48"
13236
- });
13237
-
13238
- // src/components/ConnectModal/ConnectModalIntro.tsx
13239
- function ConnectModalIntro({
13240
- compactModeEnabled = false,
13241
- getWallet
13242
- }) {
13243
- const { disclaimer: Disclaimer, learnMoreUrl } = useContext21(AppContext);
13244
- const { i18n: i18n2 } = useContext21(I18nContext);
13245
- return /* @__PURE__ */ React131.createElement(React131.Fragment, null, /* @__PURE__ */ React131.createElement(Box, {
13056
+ var preloadPlatformIcon = () => loadImages(getPlatformSrc);
13057
+ function LinkItem() {
13058
+ return /* @__PURE__ */ React121.createElement(Box, {
13059
+ display: "flex",
13060
+ alignItems: "center",
13061
+ justifyContent: "center",
13062
+ width: "full"
13063
+ }, /* @__PURE__ */ React121.createElement(Box, {
13064
+ style: { flex: 1 }
13065
+ }, /* @__PURE__ */ React121.createElement(FunDivider, null)), /* @__PURE__ */ React121.createElement(Box, {
13066
+ display: "flex",
13246
13067
  alignItems: "center",
13068
+ justifyContent: "center",
13247
13069
  color: "accentColor",
13070
+ background: "modalBorder",
13071
+ padding: "8",
13072
+ borderRadius: "13"
13073
+ }, /* @__PURE__ */ React121.createElement(LinkIcon, null)), /* @__PURE__ */ React121.createElement(Box, {
13074
+ style: { flex: 1 }
13075
+ }, /* @__PURE__ */ React121.createElement(FunDivider, null)));
13076
+ }
13077
+ function ConnectDetail({
13078
+ compactModeEnabled,
13079
+ qrCodeUri,
13080
+ wallet
13081
+ }) {
13082
+ const {
13083
+ downloadUrls,
13084
+ iconBackground,
13085
+ iconUrl,
13086
+ name,
13087
+ qrCode,
13088
+ ready,
13089
+ getDesktopUri
13090
+ } = wallet;
13091
+ const safari = isSafari();
13092
+ const funkitConfig = useFunkitConfig();
13093
+ const appConfig = {
13094
+ name: funkitConfig.appName,
13095
+ logoSrc: funkitConfig.appLogoSrc,
13096
+ logoBackground: funkitConfig.appLogoBackgroundColor
13097
+ };
13098
+ const hasExtension = !!wallet.extensionDownloadUrl;
13099
+ const hasQrCode = qrCode && qrCodeUri;
13100
+ const { width: windowWidth } = useWindowSize();
13101
+ const smallWindow = windowWidth && windowWidth < 768;
13102
+ useEffect28(() => {
13103
+ preloadBrowserIcon();
13104
+ preloadPlatformIcon();
13105
+ }, []);
13106
+ return /* @__PURE__ */ React121.createElement(Box, {
13248
13107
  display: "flex",
13249
13108
  flexDirection: "column",
13250
13109
  height: "full",
13251
- justifyContent: "space-around"
13252
- }, /* @__PURE__ */ React131.createElement(Box, {
13253
- marginBottom: "10"
13254
- }, !compactModeEnabled && /* @__PURE__ */ React131.createElement(Text, {
13255
- color: "modalText",
13256
- size: "18",
13257
- weight: "heavy"
13258
- }, i18n2.t("intro.title"))), /* @__PURE__ */ React131.createElement(Box, {
13259
- display: "flex",
13260
- flexDirection: "column",
13261
- gap: "32",
13262
- justifyContent: "center",
13263
- marginY: "20",
13264
- style: { maxWidth: 312 }
13265
- }, /* @__PURE__ */ React131.createElement(Box, {
13110
+ width: "full"
13111
+ }, hasQrCode ? /* @__PURE__ */ React121.createElement(Box, {
13266
13112
  alignItems: "center",
13267
13113
  display: "flex",
13268
- flexDirection: "row",
13269
- gap: "16"
13270
- }, /* @__PURE__ */ React131.createElement(Box, {
13271
- borderRadius: "6",
13272
- height: "48",
13273
- minWidth: "48",
13274
- width: "48"
13275
- }, /* @__PURE__ */ React131.createElement(AssetsIcon, null)), /* @__PURE__ */ React131.createElement(Box, {
13114
+ height: "full",
13115
+ justifyContent: "center",
13116
+ flexDirection: "column"
13117
+ }, /* @__PURE__ */ React121.createElement(QRCode, {
13118
+ logoBackground: iconBackground,
13119
+ logoSize: compactModeEnabled ? 60 : 72,
13120
+ logoUrl: iconUrl,
13121
+ size: compactModeEnabled ? 318 : smallWindow ? Math.max(280, Math.min(windowWidth - 308, 382)) : 382,
13122
+ uri: qrCodeUri
13123
+ }), /* @__PURE__ */ React121.createElement(Box, {
13276
13124
  display: "flex",
13277
- flexDirection: "column",
13278
- gap: "4"
13279
- }, /* @__PURE__ */ React131.createElement(Text, {
13125
+ alignItems: "center",
13126
+ justifyContent: "center",
13127
+ paddingTop: "20"
13128
+ }, /* @__PURE__ */ React121.createElement(Text, {
13129
+ weight: "medium",
13280
13130
  color: "modalText",
13281
13131
  size: "14",
13282
- weight: "bold"
13283
- }, i18n2.t("intro.digital_asset.title")), /* @__PURE__ */ React131.createElement(Text, {
13284
- color: "modalTextSecondary",
13285
- size: "14",
13286
- weight: "medium"
13287
- }, i18n2.t("intro.digital_asset.description")))), /* @__PURE__ */ React131.createElement(Box, {
13132
+ style: { paddingRight: 8 }
13133
+ }, "Copy Link"), /* @__PURE__ */ React121.createElement(CopyAddress, {
13134
+ address: qrCodeUri,
13135
+ type: "button"
13136
+ }))) : /* @__PURE__ */ React121.createElement(Box, {
13288
13137
  alignItems: "center",
13289
13138
  display: "flex",
13290
- flexDirection: "row",
13291
- gap: "16"
13292
- }, /* @__PURE__ */ React131.createElement(Box, {
13293
- borderRadius: "6",
13294
- height: "48",
13295
- minWidth: "48",
13296
- width: "48"
13297
- }, /* @__PURE__ */ React131.createElement(LoginIcon, null)), /* @__PURE__ */ React131.createElement(Box, {
13139
+ justifyContent: "center",
13140
+ style: { flexGrow: 1 }
13141
+ }, /* @__PURE__ */ React121.createElement(Box, {
13142
+ alignItems: "center",
13298
13143
  display: "flex",
13299
13144
  flexDirection: "column",
13300
- gap: "4"
13301
- }, /* @__PURE__ */ React131.createElement(Text, {
13302
- color: "modalText",
13303
- size: "14",
13304
- weight: "bold"
13305
- }, i18n2.t("intro.login.title")), /* @__PURE__ */ React131.createElement(Text, {
13306
- color: "modalTextSecondary",
13307
- size: "14",
13308
- weight: "medium"
13309
- }, i18n2.t("intro.login.description"))))), /* @__PURE__ */ React131.createElement(Box, {
13310
- alignItems: "center",
13311
- display: "flex",
13312
- flexDirection: "column",
13313
- gap: "12",
13314
- justifyContent: "center",
13315
- margin: "10"
13316
- }, /* @__PURE__ */ React131.createElement(ActionButton, {
13317
- label: i18n2.t("intro.get.label"),
13318
- onClick: getWallet
13319
- }), /* @__PURE__ */ React131.createElement(Box, {
13320
- as: "a",
13321
- className: touchableStyles({ active: "shrink", hover: "grow" }),
13322
- display: "block",
13323
- href: learnMoreUrl,
13324
- paddingX: "12",
13325
- paddingY: "4",
13326
- rel: "noreferrer",
13327
- style: { willChange: "transform" },
13328
- target: "_blank",
13329
- transition: "default"
13330
- }, /* @__PURE__ */ React131.createElement(Text, {
13331
- color: "accentColor",
13332
- size: "14",
13333
- weight: "bold"
13334
- }, i18n2.t("intro.learn_more.label")))), Disclaimer && !compactModeEnabled && /* @__PURE__ */ React131.createElement(Box, {
13335
- marginBottom: "8",
13336
- marginTop: "12",
13337
- textAlign: "center"
13338
- }, /* @__PURE__ */ React131.createElement(Disclaimer, {
13339
- Link: DisclaimerLink,
13340
- Text: DisclaimerText
13341
- }))));
13342
- }
13343
-
13344
- // src/components/Icons/Back.tsx
13345
- import React132 from "react";
13346
- var BackIcon = () => /* @__PURE__ */ React132.createElement("svg", {
13347
- fill: "none",
13348
- height: "17",
13349
- viewBox: "0 0 11 17",
13350
- width: "11",
13351
- xmlns: "http://www.w3.org/2000/svg"
13352
- }, /* @__PURE__ */ React132.createElement("path", {
13353
- d: "M0.99707 8.6543C0.99707 9.08496 1.15527 9.44531 1.51562 9.79688L8.16016 16.3096C8.43262 16.5732 8.74902 16.7051 9.13574 16.7051C9.90918 16.7051 10.5508 16.0811 10.5508 15.3076C10.5508 14.9121 10.3838 14.5605 10.0938 14.2705L4.30176 8.64551L10.0938 3.0293C10.3838 2.74805 10.5508 2.3877 10.5508 2.00098C10.5508 1.23633 9.90918 0.603516 9.13574 0.603516C8.74902 0.603516 8.43262 0.735352 8.16016 0.999023L1.51562 7.51172C1.15527 7.85449 1.00586 8.21484 0.99707 8.6543Z",
13354
- fill: "currentColor"
13355
- }));
13356
-
13357
- // src/components/InfoButton/InfoButton.tsx
13358
- import React133 from "react";
13359
- var InfoButton = ({
13360
- "aria-label": ariaLabel = "Info",
13361
- onClick
13362
- }) => {
13363
- const mobile = isMobile();
13364
- return /* @__PURE__ */ React133.createElement(Box, {
13365
- alignItems: "center",
13366
- "aria-label": ariaLabel,
13367
- as: "button",
13368
- background: "closeButtonBackground",
13369
- borderColor: "actionButtonBorder",
13370
- borderRadius: "full",
13371
- borderStyle: "solid",
13372
- borderWidth: mobile ? "0" : "1",
13373
- className: touchableStyles({ active: "shrinkSm", hover: "growLg" }),
13374
- color: "closeButton",
13375
- display: "flex",
13376
- height: mobile ? "30" : "28",
13377
- justifyContent: "center",
13378
- onClick,
13379
- style: { willChange: "transform" },
13380
- transition: "default",
13381
- type: "button",
13382
- width: mobile ? "30" : "28"
13383
- }, /* @__PURE__ */ React133.createElement(InfoIcon, null));
13384
- };
13385
-
13386
- // src/components/ConnectOptions/DesktopOptions.tsx
13387
- function DesktopOptions({ onClose }) {
13388
- const titleId = "rk_connect_title";
13389
- const [selectedOptionId, setSelectedOptionId] = useState37();
13390
- const [selectedWallet, setSelectedWallet] = useState37();
13391
- const [qrCodeUri, setQrCodeUri] = useState37();
13392
- const hasQrCode = !!(selectedWallet == null ? void 0 : selectedWallet.qrCode) && qrCodeUri;
13393
- const [connectionError, setConnectionError] = useState37(false);
13394
- const modalSize = useContext22(ModalSizeContext);
13395
- const compactModeEnabled = modalSize === ModalSizeOptions.COMPACT;
13396
- const { disclaimer: Disclaimer } = useContext22(AppContext);
13397
- const { i18n: i18n2 } = useContext22(I18nContext);
13398
- const safari = isSafari();
13399
- const initialized = useRef10(false);
13400
- const { connector } = useContext22(WalletButtonContext);
13401
- const mergeEIP6963WithRkConnectors = !connector;
13402
- const wallets = useWalletConnectors(mergeEIP6963WithRkConnectors).filter((wallet) => wallet.ready || !!wallet.extensionDownloadUrl).sort((a, b) => a.groupIndex - b.groupIndex);
13403
- const groupedWallets = groupBy(wallets, (wallet) => wallet.groupName);
13404
- const supportedI18nGroupNames = [
13405
- "Recommended",
13406
- "Other",
13407
- "Popular",
13408
- "More",
13409
- "Others",
13410
- "Installed"
13411
- ];
13412
- useEffect28(() => {
13413
- if (connector && !initialized.current) {
13414
- changeWalletStep("CONNECT" /* Connect */);
13415
- selectWallet(connector);
13416
- initialized.current = true;
13417
- }
13418
- }, [connector]);
13419
- const connectToWallet = (wallet) => {
13420
- var _a, _b;
13421
- setConnectionError(false);
13422
- if (wallet.ready) {
13423
- (_b = (_a = wallet == null ? void 0 : wallet.connect) == null ? void 0 : _a.call(wallet)) == null ? void 0 : _b.catch(() => {
13424
- setConnectionError(true);
13425
- });
13426
- }
13427
- };
13428
- const onDesktopUri = async (wallet) => {
13429
- const sWallet = wallets.find((w) => wallet.id === w.id);
13430
- if (!(sWallet == null ? void 0 : sWallet.getDesktopUri))
13431
- return;
13432
- setTimeout(async () => {
13433
- var _a;
13434
- const uri = await ((_a = sWallet == null ? void 0 : sWallet.getDesktopUri) == null ? void 0 : _a.call(sWallet));
13435
- if (uri)
13436
- window.open(uri, safari ? "_blank" : "_self");
13437
- }, 0);
13438
- };
13439
- const onQrCode = async (wallet) => {
13440
- var _a;
13441
- const sWallet = wallets.find((w) => wallet.id === w.id);
13442
- const uri = await ((_a = sWallet == null ? void 0 : sWallet.getQrCodeUri) == null ? void 0 : _a.call(sWallet));
13443
- setQrCodeUri(uri);
13444
- setTimeout(
13445
- () => {
13446
- setSelectedWallet(sWallet);
13447
- changeWalletStep("CONNECT" /* Connect */);
13448
- },
13449
- uri ? 0 : 50
13450
- );
13451
- };
13452
- const selectWallet = async (wallet) => {
13453
- addLatestWalletId(wallet.id);
13454
- if (wallet.ready) {
13455
- onQrCode(wallet);
13456
- onDesktopUri(wallet);
13457
- }
13458
- connectToWallet(wallet);
13459
- setSelectedOptionId(wallet.id);
13460
- if (!wallet.ready) {
13461
- setSelectedWallet(wallet);
13462
- changeWalletStep(
13463
- (wallet == null ? void 0 : wallet.extensionDownloadUrl) ? "DOWNLOAD_OPTIONS" /* DownloadOptions */ : "CONNECT" /* Connect */
13464
- );
13465
- }
13466
- };
13467
- const getWalletDownload = (id) => {
13468
- var _a;
13469
- setSelectedOptionId(id);
13470
- const sWallet = wallets.find((w) => id === w.id);
13471
- const isMobile2 = (_a = sWallet == null ? void 0 : sWallet.downloadUrls) == null ? void 0 : _a.qrCode;
13472
- const isDesktop = !!(sWallet == null ? void 0 : sWallet.desktopDownloadUrl);
13473
- const isExtension = !!(sWallet == null ? void 0 : sWallet.extensionDownloadUrl);
13474
- setSelectedWallet(sWallet);
13475
- if (isMobile2 && (isExtension || isDesktop)) {
13476
- changeWalletStep("DOWNLOAD_OPTIONS" /* DownloadOptions */);
13477
- } else if (isMobile2) {
13478
- changeWalletStep("DOWNLOAD" /* Download */);
13479
- } else if (isDesktop) {
13480
- changeWalletStep("INSTRUCTIONS_DESKTOP" /* InstructionsDesktop */);
13481
- } else {
13482
- changeWalletStep("INSTRUCTIONS_EXTENSION" /* InstructionsExtension */);
13483
- }
13484
- };
13485
- const clearSelectedWallet = () => {
13486
- setSelectedOptionId(void 0);
13487
- setSelectedWallet(void 0);
13488
- setQrCodeUri(void 0);
13489
- };
13490
- const changeWalletStep = (newWalletStep, isBack = false) => {
13491
- if (isBack && newWalletStep === "GET" /* Get */ && initialWalletStep === "GET" /* Get */) {
13492
- clearSelectedWallet();
13493
- } else if (!isBack && newWalletStep === "GET" /* Get */) {
13494
- setInitialWalletStep("GET" /* Get */);
13495
- } else if (!isBack && newWalletStep === "CONNECT" /* Connect */) {
13496
- setInitialWalletStep("CONNECT" /* Connect */);
13497
- }
13498
- setWalletStep(newWalletStep);
13499
- };
13500
- const [initialWalletStep, setInitialWalletStep] = useState37(
13501
- "NONE" /* None */
13502
- );
13503
- const [walletStep, setWalletStep] = useState37("NONE" /* None */);
13504
- let walletContent = null;
13505
- let headerLabel = null;
13506
- let headerBackButtonLink = null;
13507
- let headerBackButtonCallback;
13508
- useEffect28(() => {
13509
- setConnectionError(false);
13510
- }, [walletStep, selectedWallet]);
13511
- const hasExtension = !!(selectedWallet == null ? void 0 : selectedWallet.extensionDownloadUrl);
13512
- const hasExtensionAndMobile = !!(hasExtension && (selectedWallet == null ? void 0 : selectedWallet.mobileDownloadUrl));
13513
- switch (walletStep) {
13514
- case "NONE" /* None */:
13515
- walletContent = /* @__PURE__ */ React134.createElement(ConnectModalIntro, {
13516
- getWallet: () => changeWalletStep("GET" /* Get */)
13517
- });
13518
- break;
13519
- case "LEARN_COMPACT" /* LearnCompact */:
13520
- walletContent = /* @__PURE__ */ React134.createElement(ConnectModalIntro, {
13521
- compactModeEnabled,
13522
- getWallet: () => changeWalletStep("GET" /* Get */)
13523
- });
13524
- headerLabel = i18n2.t("intro.title");
13525
- headerBackButtonLink = "NONE" /* None */;
13526
- break;
13527
- case "GET" /* Get */:
13528
- walletContent = /* @__PURE__ */ React134.createElement(GetDetail, {
13529
- getWalletDownload,
13530
- compactModeEnabled
13531
- });
13532
- headerLabel = i18n2.t("get.title");
13533
- headerBackButtonLink = compactModeEnabled ? "LEARN_COMPACT" /* LearnCompact */ : "NONE" /* None */;
13534
- break;
13535
- case "CONNECT" /* Connect */:
13536
- walletContent = selectedWallet && /* @__PURE__ */ React134.createElement(ConnectDetail, {
13537
- changeWalletStep,
13538
- compactModeEnabled,
13539
- connectionError,
13540
- onClose,
13541
- qrCodeUri,
13542
- reconnect: connectToWallet,
13543
- wallet: selectedWallet
13544
- });
13545
- headerLabel = hasQrCode && (selectedWallet.name === "WalletConnect" ? i18n2.t("connect_scan.fallback_title") : i18n2.t("connect_scan.title", {
13546
- wallet: selectedWallet.name
13547
- }));
13548
- headerBackButtonLink = compactModeEnabled ? connector ? null : "NONE" /* None */ : null;
13549
- headerBackButtonCallback = compactModeEnabled ? !connector ? clearSelectedWallet : () => void 0 : () => void 0;
13550
- break;
13551
- case "DOWNLOAD_OPTIONS" /* DownloadOptions */:
13552
- walletContent = selectedWallet && /* @__PURE__ */ React134.createElement(DownloadOptionsDetail, {
13553
- changeWalletStep,
13554
- wallet: selectedWallet
13555
- });
13556
- headerLabel = selectedWallet && i18n2.t("get_options.short_title", { wallet: selectedWallet.name });
13557
- headerBackButtonLink = connector ? "CONNECT" /* Connect */ : compactModeEnabled ? "NONE" /* None */ : null;
13558
- break;
13559
- case "DOWNLOAD" /* Download */:
13560
- walletContent = selectedWallet && /* @__PURE__ */ React134.createElement(DownloadDetail, {
13561
- changeWalletStep,
13562
- wallet: selectedWallet
13563
- });
13564
- headerLabel = selectedWallet && i18n2.t("get_mobile.title", { wallet: selectedWallet.name });
13565
- headerBackButtonLink = hasExtensionAndMobile ? "DOWNLOAD_OPTIONS" /* DownloadOptions */ : initialWalletStep;
13566
- break;
13567
- case "INSTRUCTIONS_MOBILE" /* InstructionsMobile */:
13568
- walletContent = selectedWallet && /* @__PURE__ */ React134.createElement(InstructionMobileDetail, {
13569
- connectWallet: selectWallet,
13570
- wallet: selectedWallet
13571
- });
13572
- headerLabel = selectedWallet && i18n2.t("get_options.title", {
13573
- wallet: compactModeEnabled ? selectedWallet.shortName || selectedWallet.name : selectedWallet.name
13574
- });
13575
- headerBackButtonLink = "DOWNLOAD" /* Download */;
13576
- break;
13577
- case "INSTRUCTIONS_EXTENSION" /* InstructionsExtension */:
13578
- walletContent = selectedWallet && /* @__PURE__ */ React134.createElement(InstructionExtensionDetail, {
13579
- wallet: selectedWallet
13580
- });
13581
- headerLabel = selectedWallet && i18n2.t("get_options.title", {
13582
- wallet: compactModeEnabled ? selectedWallet.shortName || selectedWallet.name : selectedWallet.name
13583
- });
13584
- headerBackButtonLink = "DOWNLOAD_OPTIONS" /* DownloadOptions */;
13585
- break;
13586
- case "INSTRUCTIONS_DESKTOP" /* InstructionsDesktop */:
13587
- walletContent = selectedWallet && /* @__PURE__ */ React134.createElement(InstructionDesktopDetail, {
13588
- connectWallet: selectWallet,
13589
- wallet: selectedWallet
13590
- });
13591
- headerLabel = selectedWallet && i18n2.t("get_options.title", {
13592
- wallet: compactModeEnabled ? selectedWallet.shortName || selectedWallet.name : selectedWallet.name
13593
- });
13594
- headerBackButtonLink = "DOWNLOAD_OPTIONS" /* DownloadOptions */;
13595
- break;
13596
- default:
13597
- break;
13598
- }
13599
- return /* @__PURE__ */ React134.createElement(Box, {
13600
- display: "flex",
13601
- flexDirection: "row",
13602
- style: { maxHeight: compactModeEnabled ? 468 : 504 }
13603
- }, (compactModeEnabled ? walletStep === "NONE" /* None */ : true) && /* @__PURE__ */ React134.createElement(Box, {
13604
- className: compactModeEnabled ? sidebarCompactMode : sidebar,
13605
- display: "flex",
13606
- flexDirection: "column",
13607
- marginTop: "16"
13608
- }, /* @__PURE__ */ React134.createElement(Box, {
13609
- display: "flex",
13610
- justifyContent: "space-between"
13611
- }, compactModeEnabled && Disclaimer && /* @__PURE__ */ React134.createElement(Box, {
13612
- marginLeft: "16",
13613
- width: "28"
13614
- }, /* @__PURE__ */ React134.createElement(InfoButton, {
13615
- onClick: () => changeWalletStep("LEARN_COMPACT" /* LearnCompact */)
13616
- })), compactModeEnabled && !Disclaimer && /* @__PURE__ */ React134.createElement(Box, {
13617
- marginLeft: "16",
13618
- width: "28"
13619
- }), /* @__PURE__ */ React134.createElement(Box, {
13620
- marginLeft: compactModeEnabled ? "0" : "6",
13621
- paddingBottom: "8",
13622
- paddingTop: "2",
13623
- paddingX: "18"
13624
- }, /* @__PURE__ */ React134.createElement(Text, {
13625
- as: "h1",
13626
- color: "modalText",
13627
- id: titleId,
13628
- size: "18",
13629
- weight: "heavy",
13630
- testId: "connect-header-label"
13631
- }, i18n2.t("connect.title"))), compactModeEnabled && /* @__PURE__ */ React134.createElement(Box, {
13632
- marginRight: "16"
13633
- }, /* @__PURE__ */ React134.createElement(CloseButton, {
13634
- onClose
13635
- }))), /* @__PURE__ */ React134.createElement(Box, {
13636
- className: ScrollClassName,
13637
- paddingBottom: "18"
13638
- }, Object.entries(groupedWallets).map(
13639
- ([groupName, wallets2], index) => wallets2.length > 0 && /* @__PURE__ */ React134.createElement(Fragment4, {
13640
- key: index
13641
- }, groupName ? /* @__PURE__ */ React134.createElement(Box, {
13642
- marginBottom: "8",
13643
- marginTop: "16",
13644
- marginX: "6"
13645
- }, /* @__PURE__ */ React134.createElement(Text, {
13646
- color: groupName === "Installed" ? "accentColor" : "modalTextSecondary",
13647
- size: "14",
13648
- weight: "bold"
13649
- }, supportedI18nGroupNames.includes(groupName) ? i18n2.t(
13650
- `connector_group.${groupName.toLowerCase()}`
13651
- ) : groupName)) : null, /* @__PURE__ */ React134.createElement(Box, {
13652
- display: "flex",
13653
- flexDirection: "column",
13654
- gap: "4"
13655
- }, wallets2.map((wallet) => {
13656
- return /* @__PURE__ */ React134.createElement(ModalSelection, {
13657
- currentlySelected: wallet.id === selectedOptionId,
13658
- iconBackground: wallet.iconBackground,
13659
- iconUrl: wallet.iconUrl,
13660
- key: wallet.id,
13661
- name: wallet.name,
13662
- onClick: () => selectWallet(wallet),
13663
- ready: wallet.ready,
13664
- recent: wallet.recent,
13665
- testId: `wallet-option-${wallet.id}`,
13666
- isFunkitSdkConnector: wallet.isFunkitSdkConnector
13667
- });
13668
- })))
13669
- )), compactModeEnabled && /* @__PURE__ */ React134.createElement(React134.Fragment, null, /* @__PURE__ */ React134.createElement(Box, {
13670
- background: "generalBorder",
13671
- height: "1",
13672
- marginTop: "-1"
13673
- }), Disclaimer ? /* @__PURE__ */ React134.createElement(Box, {
13674
- paddingX: "24",
13675
- paddingY: "16",
13676
- textAlign: "center"
13677
- }, /* @__PURE__ */ React134.createElement(Disclaimer, {
13678
- Link: DisclaimerLink,
13679
- Text: DisclaimerText
13680
- })) : /* @__PURE__ */ React134.createElement(Box, {
13681
- alignItems: "center",
13682
- display: "flex",
13683
- justifyContent: "space-between",
13684
- paddingX: "24",
13685
- paddingY: "16"
13686
- }, /* @__PURE__ */ React134.createElement(Box, {
13687
- paddingY: "4"
13688
- }, /* @__PURE__ */ React134.createElement(Text, {
13689
- color: "modalTextSecondary",
13690
- size: "14",
13691
- weight: "medium"
13692
- }, i18n2.t("connect.new_to_ethereum.description"))), /* @__PURE__ */ React134.createElement(Box, {
13693
- alignItems: "center",
13694
- display: "flex",
13695
- flexDirection: "row",
13696
- gap: "4",
13697
- justifyContent: "center"
13698
- }, /* @__PURE__ */ React134.createElement(Box, {
13699
- className: touchableStyles({
13700
- active: "shrink",
13701
- hover: "grow"
13702
- }),
13703
- cursor: "pointer",
13704
- onClick: () => changeWalletStep("LEARN_COMPACT" /* LearnCompact */),
13705
- paddingY: "4",
13706
- style: { willChange: "transform" },
13707
- transition: "default"
13708
- }, /* @__PURE__ */ React134.createElement(Text, {
13709
- color: "accentColor",
13710
- size: "14",
13711
- weight: "bold"
13712
- }, i18n2.t("connect.new_to_ethereum.learn_more.label"))))))), (compactModeEnabled ? walletStep !== "NONE" /* None */ : true) && /* @__PURE__ */ React134.createElement(React134.Fragment, null, !compactModeEnabled && /* @__PURE__ */ React134.createElement(Box, {
13713
- background: "generalBorder",
13714
- minWidth: "1",
13715
- width: "1"
13716
- }), /* @__PURE__ */ React134.createElement(Box, {
13717
- display: "flex",
13718
- flexDirection: "column",
13719
- margin: "16",
13720
- style: { flexGrow: 1 }
13721
- }, /* @__PURE__ */ React134.createElement(Box, {
13722
- alignItems: "center",
13723
- display: "flex",
13724
- justifyContent: "space-between",
13725
- marginBottom: "12"
13726
- }, /* @__PURE__ */ React134.createElement(Box, {
13727
- width: "28"
13728
- }, headerBackButtonLink && /* @__PURE__ */ React134.createElement(Box, {
13729
- as: "button",
13730
- className: touchableStyles({
13731
- active: "shrinkSm",
13732
- hover: "growLg"
13733
- }),
13734
- color: "accentColor",
13735
- onClick: () => {
13736
- headerBackButtonLink && changeWalletStep(headerBackButtonLink, true);
13737
- headerBackButtonCallback == null ? void 0 : headerBackButtonCallback();
13738
- },
13739
- paddingX: "8",
13740
- paddingY: "4",
13741
- style: {
13742
- boxSizing: "content-box",
13743
- height: 17,
13744
- willChange: "transform"
13745
- },
13746
- transition: "default",
13747
- type: "button"
13748
- }, /* @__PURE__ */ React134.createElement(BackIcon, null))), /* @__PURE__ */ React134.createElement(Box, {
13749
- display: "flex",
13750
- justifyContent: "center",
13751
- style: { flexGrow: 1 }
13752
- }, headerLabel && /* @__PURE__ */ React134.createElement(Text, {
13753
- color: "modalText",
13754
- size: "18",
13755
- textAlign: "center",
13756
- weight: "heavy"
13757
- }, headerLabel)), /* @__PURE__ */ React134.createElement(CloseButton, {
13758
- onClose
13759
- })), /* @__PURE__ */ React134.createElement(Box, {
13760
- display: "flex",
13761
- flexDirection: "column",
13762
- style: { minHeight: compactModeEnabled ? 396 : 432 }
13763
- }, /* @__PURE__ */ React134.createElement(Box, {
13764
- alignItems: "center",
13765
- display: "flex",
13766
- flexDirection: "column",
13767
- gap: "6",
13768
- height: "full",
13769
- justifyContent: "center",
13770
- marginX: "8"
13771
- }, walletContent)))));
13772
- }
13773
-
13774
- // src/components/ConnectOptions/ConnectDetails.tsx
13775
- var getBrowserSrc = async () => {
13776
- const browser = getBrowser();
13777
- switch (browser) {
13778
- case "Arc" /* Arc */:
13779
- return (await import("./Arc-QDJFTGH2.js")).default;
13780
- case "Brave" /* Brave */:
13781
- return (await import("./Brave-YATE5BIM.js")).default;
13782
- case "Chrome" /* Chrome */:
13783
- return (await import("./Chrome-LGF33C3S.js")).default;
13784
- case "Edge" /* Edge */:
13785
- return (await import("./Edge-K2JEGI5S.js")).default;
13786
- case "Firefox" /* Firefox */:
13787
- return (await import("./Firefox-NP5SYEK5.js")).default;
13788
- case "Opera" /* Opera */:
13789
- return (await import("./Opera-KV54PXPA.js")).default;
13790
- case "Safari" /* Safari */:
13791
- return (await import("./Safari-2QIYKJ4P.js")).default;
13792
- default:
13793
- return (await import("./Browser-HN7O5MN7.js")).default;
13794
- }
13795
- };
13796
- var preloadBrowserIcon = () => loadImages(getBrowserSrc);
13797
- var getPlatformSrc = async () => {
13798
- const platform = getPlatform();
13799
- switch (platform) {
13800
- case "Windows" /* Windows */:
13801
- return (await import("./Windows-R3CKAIUV.js")).default;
13802
- case "macOS" /* MacOS */:
13803
- return (await import("./Macos-2KTZ2XLP.js")).default;
13804
- case "Linux" /* Linux */:
13805
- return (await import("./Linux-NS2LQPT4.js")).default;
13806
- default:
13807
- return (await import("./Linux-NS2LQPT4.js")).default;
13808
- }
13809
- };
13810
- var preloadPlatformIcon = () => loadImages(getPlatformSrc);
13811
- function GetDetail({
13812
- getWalletDownload,
13813
- compactModeEnabled
13814
- }) {
13815
- const wallets = useWalletConnectors().filter(
13816
- (wallet) => wallet.isFunkitSdkConnector
13817
- );
13818
- const shownWallets = wallets.splice(0, 5);
13819
- const { i18n: i18n2 } = useContext23(I18nContext);
13820
- return /* @__PURE__ */ React135.createElement(Box, {
13821
- alignItems: "center",
13822
- display: "flex",
13823
- flexDirection: "column",
13824
- height: "full",
13825
- marginTop: "18",
13826
- width: "full"
13827
- }, /* @__PURE__ */ React135.createElement(Box, {
13828
- alignItems: "center",
13829
- display: "flex",
13830
- flexDirection: "column",
13831
- gap: "28",
13832
- height: "full",
13833
- width: "full"
13834
- }, shownWallets == null ? void 0 : shownWallets.filter(
13835
- (wallet) => {
13836
- var _a;
13837
- return wallet.extensionDownloadUrl || wallet.desktopDownloadUrl || wallet.qrCode && ((_a = wallet.downloadUrls) == null ? void 0 : _a.qrCode);
13838
- }
13839
- ).map((wallet) => {
13840
- const { downloadUrls, iconBackground, iconUrl, id, name, qrCode } = wallet;
13841
- const hasMobileCompanionApp = (downloadUrls == null ? void 0 : downloadUrls.qrCode) && qrCode;
13842
- const hasExtension = !!wallet.extensionDownloadUrl;
13843
- const hasMobileAndExtension = (downloadUrls == null ? void 0 : downloadUrls.qrCode) && hasExtension;
13844
- const hasMobileAndDesktop = (downloadUrls == null ? void 0 : downloadUrls.qrCode) && !!wallet.desktopDownloadUrl;
13845
- return /* @__PURE__ */ React135.createElement(Box, {
13846
- alignItems: "center",
13847
- display: "flex",
13848
- gap: "16",
13849
- justifyContent: "space-between",
13850
- key: wallet.id,
13851
- width: "full"
13852
- }, /* @__PURE__ */ React135.createElement(Box, {
13853
- alignItems: "center",
13854
- display: "flex",
13855
- flexDirection: "row",
13856
- gap: "16"
13857
- }, /* @__PURE__ */ React135.createElement(AsyncImage, {
13858
- background: iconBackground,
13859
- borderColor: "actionButtonBorder",
13860
- borderRadius: "10",
13861
- height: "48",
13862
- src: iconUrl,
13863
- width: "48"
13864
- }), /* @__PURE__ */ React135.createElement(Box, {
13865
- display: "flex",
13866
- flexDirection: "column",
13867
- gap: "2"
13868
- }, /* @__PURE__ */ React135.createElement(Text, {
13869
- color: "modalText",
13870
- size: "14",
13871
- weight: "bold"
13872
- }, name), /* @__PURE__ */ React135.createElement(Text, {
13873
- color: "modalTextSecondary",
13874
- size: "14",
13875
- weight: "medium"
13876
- }, hasMobileAndExtension ? i18n2.t("get.mobile_and_extension.description") : hasMobileAndDesktop ? i18n2.t("get.mobile_and_desktop.description") : hasMobileCompanionApp ? i18n2.t("get.mobile.description") : hasExtension ? i18n2.t("get.extension.description") : null))), /* @__PURE__ */ React135.createElement(Box, {
13877
- display: "flex",
13878
- flexDirection: "column",
13879
- gap: "4"
13880
- }, /* @__PURE__ */ React135.createElement(ActionButton, {
13881
- label: i18n2.t("get.action.label"),
13882
- onClick: () => getWalletDownload(id),
13883
- type: "secondary"
13884
- })));
13885
- })), /* @__PURE__ */ React135.createElement(Box, {
13886
- alignItems: "center",
13887
- borderRadius: "10",
13888
- display: "flex",
13889
- flexDirection: "column",
13890
- gap: "8",
13891
- justifyContent: "space-between",
13892
- marginBottom: "4",
13893
- paddingY: "8",
13894
- style: { maxWidth: 275, textAlign: "center" }
13895
- }, /* @__PURE__ */ React135.createElement(Text, {
13896
- color: "modalText",
13897
- size: "14",
13898
- weight: "bold"
13899
- }, i18n2.t("get.looking_for.title")), /* @__PURE__ */ React135.createElement(Text, {
13900
- color: "modalTextSecondary",
13901
- size: "14",
13902
- weight: "medium"
13903
- }, compactModeEnabled ? i18n2.t("get.looking_for.desktop.compact_description") : i18n2.t("get.looking_for.desktop.wide_description"))));
13904
- }
13905
- function LinkItem() {
13906
- return /* @__PURE__ */ React135.createElement(Box, {
13907
- display: "flex",
13908
- alignItems: "center",
13909
- justifyContent: "center",
13910
- width: "full"
13911
- }, /* @__PURE__ */ React135.createElement(Box, {
13912
- style: { flex: 1 }
13913
- }, /* @__PURE__ */ React135.createElement(FunDivider, null)), /* @__PURE__ */ React135.createElement(Box, {
13914
- display: "flex",
13915
- alignItems: "center",
13916
- justifyContent: "center",
13917
- color: "accentColor",
13918
- background: "modalBorder",
13919
- padding: "8",
13920
- borderRadius: "13"
13921
- }, /* @__PURE__ */ React135.createElement(LinkIcon, null)), /* @__PURE__ */ React135.createElement(Box, {
13922
- style: { flex: 1 }
13923
- }, /* @__PURE__ */ React135.createElement(FunDivider, null)));
13924
- }
13925
- function ConnectDetail({
13926
- compactModeEnabled,
13927
- qrCodeUri,
13928
- wallet
13929
- }) {
13930
- const {
13931
- downloadUrls,
13932
- iconBackground,
13933
- iconUrl,
13934
- name,
13935
- qrCode,
13936
- ready,
13937
- getDesktopUri
13938
- } = wallet;
13939
- const safari = isSafari();
13940
- const funkitConfig = useFunkitConfig();
13941
- const appConfig = {
13942
- name: funkitConfig.appName,
13943
- logoSrc: funkitConfig.appLogoSrc,
13944
- logoBackground: funkitConfig.appLogoBackgroundColor
13945
- };
13946
- const hasExtension = !!wallet.extensionDownloadUrl;
13947
- const hasQrCode = qrCode && qrCodeUri;
13948
- const { width: windowWidth } = useWindowSize();
13949
- const smallWindow = windowWidth && windowWidth < 768;
13950
- useEffect29(() => {
13951
- preloadBrowserIcon();
13952
- preloadPlatformIcon();
13953
- }, []);
13954
- return /* @__PURE__ */ React135.createElement(Box, {
13955
- display: "flex",
13956
- flexDirection: "column",
13957
- height: "full",
13958
- width: "full"
13959
- }, hasQrCode ? /* @__PURE__ */ React135.createElement(Box, {
13960
- alignItems: "center",
13961
- display: "flex",
13962
- height: "full",
13963
- justifyContent: "center",
13964
- flexDirection: "column"
13965
- }, /* @__PURE__ */ React135.createElement(QRCode, {
13966
- logoBackground: iconBackground,
13967
- logoSize: compactModeEnabled ? 60 : 72,
13968
- logoUrl: iconUrl,
13969
- size: compactModeEnabled ? 318 : smallWindow ? Math.max(280, Math.min(windowWidth - 308, 382)) : 382,
13970
- uri: qrCodeUri
13971
- }), /* @__PURE__ */ React135.createElement(Box, {
13972
- display: "flex",
13973
- alignItems: "center",
13974
- justifyContent: "center",
13975
- paddingTop: "20"
13976
- }, /* @__PURE__ */ React135.createElement(Text, {
13977
- weight: "medium",
13978
- color: "modalText",
13979
- size: "14",
13980
- style: { paddingRight: 8 }
13981
- }, "Copy Link"), /* @__PURE__ */ React135.createElement(CopyAddress, {
13982
- address: qrCodeUri,
13983
- type: "button"
13984
- }))) : /* @__PURE__ */ React135.createElement(Box, {
13985
- alignItems: "center",
13986
- display: "flex",
13987
- justifyContent: "center",
13988
- style: { flexGrow: 1 }
13989
- }, /* @__PURE__ */ React135.createElement(Box, {
13990
- alignItems: "center",
13991
- display: "flex",
13992
- flexDirection: "column",
13993
- gap: "8"
13994
- }, /* @__PURE__ */ React135.createElement(Box, {
13995
- alignItems: "center",
13996
- display: "flex",
13997
- flexDirection: "column",
13998
- gap: "4",
13999
- style: { textAlign: "center" }
14000
- }, ready && !hasQrCode ? /* @__PURE__ */ React135.createElement(Box, {
14001
- width: "full",
14002
- display: "flex",
14003
- flexDirection: "column",
14004
- gap: "24"
14005
- }, /* @__PURE__ */ React135.createElement(Box, {
14006
- id: "link-graphics",
14007
- display: "flex",
14008
- flexDirection: "row",
14009
- justifyContent: "space-between"
14010
- }, /* @__PURE__ */ React135.createElement(Box, {
14011
- style: { width: 80, height: 80 }
14012
- }, /* @__PURE__ */ React135.createElement(AsyncImage, {
14013
- background: appConfig.logoBackground,
14014
- borderRadius: "menuButton",
14015
- src: appConfig.logoSrc,
14016
- width: 80,
14017
- height: 80
14018
- })), /* @__PURE__ */ React135.createElement(LinkItem, null), /* @__PURE__ */ React135.createElement(Box, {
14019
- style: { width: 80, height: 80 }
14020
- }, /* @__PURE__ */ React135.createElement(AsyncImage, {
14021
- background: iconBackground,
14022
- borderRadius: "menuButton",
14023
- src: iconUrl,
14024
- width: 80,
14025
- height: 80
14026
- }))), /* @__PURE__ */ React135.createElement(Box, {
14027
- id: "link-text",
14028
- display: "flex",
14029
- flexDirection: "column",
14030
- gap: "10"
14031
- }, /* @__PURE__ */ React135.createElement(Text, {
14032
- color: "accentColor",
14033
- weight: "semibold",
14034
- size: "18"
14035
- }, "Connecting to ", name, "..."), /* @__PURE__ */ React135.createElement(Text, {
14036
- color: "modalTextSecondary",
14037
- weight: "medium",
14038
- size: "14"
14039
- }, "Approve the ", appConfig.name, " application to execute transactions seamlessly."))) : null))));
14040
- }
14041
- var DownloadOptionsBox = ({
14042
- actionLabel,
14043
- description,
14044
- iconAccent,
14045
- iconBackground,
14046
- iconUrl,
14047
- isCompact,
14048
- onAction,
14049
- title,
14050
- url,
14051
- variant
14052
- }) => {
14053
- const isBrowserCard = variant === "browser";
14054
- const gradientRgbas = !isBrowserCard && iconAccent && getGradientRGBAs(iconAccent);
14055
- return /* @__PURE__ */ React135.createElement(Box, {
14056
- alignItems: "center",
14057
- borderRadius: "13",
14058
- display: "flex",
14059
- justifyContent: "center",
14060
- overflow: "hidden",
14061
- paddingX: isCompact ? "18" : "44",
14062
- position: "relative",
14063
- style: { flex: 1, isolation: "isolate" },
14064
- width: "full"
14065
- }, /* @__PURE__ */ React135.createElement(Box, {
14066
- borderColor: "actionButtonBorder",
14067
- borderRadius: "13",
14068
- borderStyle: "solid",
14069
- borderWidth: "1",
14070
- style: {
14071
- bottom: "0",
14072
- left: "0",
14073
- position: "absolute",
14074
- right: "0",
14075
- top: "0",
14076
- zIndex: 1
14077
- }
14078
- }), isBrowserCard && /* @__PURE__ */ React135.createElement(Box, {
14079
- background: "downloadTopCardBackground",
14080
- height: "full",
14081
- position: "absolute",
14082
- style: {
14083
- zIndex: 0
14084
- },
14085
- width: "full"
14086
- }, /* @__PURE__ */ React135.createElement(Box, {
14087
- display: "flex",
14088
- flexDirection: "row",
14089
- justifyContent: "space-between",
14090
- style: {
14091
- bottom: "0",
14092
- filter: "blur(20px)",
14093
- left: "0",
14094
- position: "absolute",
14095
- right: "0",
14096
- top: "0",
14097
- transform: "translate3d(0, 0, 0)"
14098
- }
14099
- }, /* @__PURE__ */ React135.createElement(Box, {
14100
- style: {
14101
- filter: "blur(100px)",
14102
- marginLeft: -27,
14103
- marginTop: -20,
14104
- opacity: 0.6,
14105
- transform: "translate3d(0, 0, 0)"
14106
- }
14107
- }, /* @__PURE__ */ React135.createElement(AsyncImage, {
14108
- borderRadius: "full",
14109
- height: "200",
14110
- src: iconUrl,
14111
- width: "200"
14112
- })), /* @__PURE__ */ React135.createElement(Box, {
14113
- style: {
14114
- filter: "blur(100px)",
14115
- marginRight: 0,
14116
- marginTop: 105,
14117
- opacity: 0.6,
14118
- overflow: "auto",
14119
- transform: "translate3d(0, 0, 0)"
14120
- }
14121
- }, /* @__PURE__ */ React135.createElement(AsyncImage, {
14122
- borderRadius: "full",
14123
- height: "200",
14124
- src: iconUrl,
14125
- width: "200"
14126
- })))), !isBrowserCard && gradientRgbas && /* @__PURE__ */ React135.createElement(Box, {
14127
- background: "downloadBottomCardBackground",
14128
- style: {
14129
- bottom: "0",
14130
- left: "0",
14131
- position: "absolute",
14132
- right: "0",
14133
- top: "0"
14134
- }
14135
- }, /* @__PURE__ */ React135.createElement(Box, {
14136
- position: "absolute",
14137
- style: {
14138
- background: `radial-gradient(50% 50% at 50% 50%, ${gradientRgbas[0]} 0%, ${gradientRgbas[1]} 25%, rgba(0,0,0,0) 100%)`,
14139
- height: 564,
14140
- left: -215,
14141
- top: -197,
14142
- transform: "translate3d(0, 0, 0)",
14143
- width: 564
14144
- }
14145
- }), /* @__PURE__ */ React135.createElement(Box, {
14146
- position: "absolute",
14147
- style: {
14148
- background: `radial-gradient(50% 50% at 50% 50%, ${gradientRgbas[2]} 0%, rgba(0, 0, 0, 0) 100%)`,
14149
- height: 564,
14150
- left: -1,
14151
- top: -76,
14152
- transform: "translate3d(0, 0, 0)",
14153
- width: 564
14154
- }
14155
- })), /* @__PURE__ */ React135.createElement(Box, {
14156
- alignItems: "flex-start",
14157
- display: "flex",
14158
- flexDirection: "row",
14159
- gap: "24",
14160
- height: "max",
14161
- justifyContent: "center",
14162
- style: { zIndex: 1 }
14163
- }, /* @__PURE__ */ React135.createElement(Box, null, /* @__PURE__ */ React135.createElement(AsyncImage, {
14164
- height: "60",
14165
- src: iconUrl,
14166
- width: "60",
14167
- ...iconBackground ? {
14168
- background: iconBackground,
14169
- borderColor: "generalBorder",
14170
- borderRadius: "10"
14171
- } : null
14172
- })), /* @__PURE__ */ React135.createElement(Box, {
14173
- display: "flex",
14174
- flexDirection: "column",
14175
- gap: "4",
14176
- style: { flex: 1 },
14177
- width: "full"
14178
- }, /* @__PURE__ */ React135.createElement(Text, {
14179
- color: "modalText",
14180
- size: "14",
14181
- weight: "bold"
14182
- }, title), /* @__PURE__ */ React135.createElement(Text, {
14183
- color: "modalTextSecondary",
14184
- size: "14",
14185
- weight: "medium"
14186
- }, description), /* @__PURE__ */ React135.createElement(Box, {
14187
- marginTop: "14",
14188
- width: "max"
14189
- }, /* @__PURE__ */ React135.createElement(ActionButton, {
14190
- href: url,
14191
- label: actionLabel,
14192
- onClick: onAction,
14193
- size: "medium"
14194
- })))));
14195
- };
14196
- function DownloadOptionsDetail({
14197
- changeWalletStep,
14198
- wallet
14199
- }) {
14200
- const browser = getBrowser();
14201
- const platform = getPlatform();
14202
- const modalSize = useContext23(ModalSizeContext);
14203
- const isCompact = modalSize === "compact";
14204
- const {
14205
- desktop,
14206
- desktopDownloadUrl,
14207
- extension,
14208
- extensionDownloadUrl,
14209
- mobileDownloadUrl
14210
- } = wallet;
14211
- const { i18n: i18n2 } = useContext23(I18nContext);
14212
- useEffect29(() => {
14213
- preloadCreateIcon();
14214
- preloadScanIcon();
14215
- preloadRefreshIcon();
14216
- preloadConnectIcon();
14217
- }, []);
14218
- return /* @__PURE__ */ React135.createElement(Box, {
14219
- alignItems: "center",
14220
- display: "flex",
14221
- flexDirection: "column",
14222
- gap: "24",
14223
- height: "full",
14224
- marginBottom: "8",
14225
- marginTop: "4",
14226
- width: "full"
14227
- }, /* @__PURE__ */ React135.createElement(Box, {
13145
+ gap: "8"
13146
+ }, /* @__PURE__ */ React121.createElement(Box, {
14228
13147
  alignItems: "center",
14229
13148
  display: "flex",
14230
13149
  flexDirection: "column",
14231
- gap: "8",
14232
- height: "full",
14233
- justifyContent: "center",
14234
- width: "full"
14235
- }, extensionDownloadUrl && /* @__PURE__ */ React135.createElement(DownloadOptionsBox, {
14236
- actionLabel: i18n2.t("get_options.extension.download.label", {
14237
- browser
14238
- }),
14239
- description: i18n2.t("get_options.extension.description"),
14240
- iconUrl: getBrowserSrc,
14241
- isCompact,
14242
- onAction: () => changeWalletStep(
14243
- (extension == null ? void 0 : extension.instructions) ? "INSTRUCTIONS_EXTENSION" /* InstructionsExtension */ : "CONNECT" /* Connect */
14244
- ),
14245
- title: i18n2.t("get_options.extension.title", {
14246
- wallet: wallet.name,
14247
- browser
14248
- }),
14249
- url: extensionDownloadUrl,
14250
- variant: "browser"
14251
- }), desktopDownloadUrl && /* @__PURE__ */ React135.createElement(DownloadOptionsBox, {
14252
- actionLabel: i18n2.t("get_options.desktop.download.label", {
14253
- platform
14254
- }),
14255
- description: i18n2.t("get_options.desktop.description"),
14256
- iconUrl: getPlatformSrc,
14257
- isCompact,
14258
- onAction: () => changeWalletStep(
14259
- (desktop == null ? void 0 : desktop.instructions) ? "INSTRUCTIONS_DESKTOP" /* InstructionsDesktop */ : "CONNECT" /* Connect */
14260
- ),
14261
- title: i18n2.t("get_options.desktop.title", {
14262
- wallet: wallet.name,
14263
- platform
14264
- }),
14265
- url: desktopDownloadUrl,
14266
- variant: "desktop"
14267
- }), mobileDownloadUrl && /* @__PURE__ */ React135.createElement(DownloadOptionsBox, {
14268
- actionLabel: i18n2.t("get_options.mobile.download.label", {
14269
- wallet: wallet.name
14270
- }),
14271
- description: i18n2.t("get_options.mobile.description"),
14272
- iconAccent: wallet.iconAccent,
14273
- iconBackground: wallet.iconBackground,
14274
- iconUrl: wallet.iconUrl,
14275
- isCompact,
14276
- onAction: () => {
14277
- changeWalletStep("DOWNLOAD" /* Download */);
14278
- },
14279
- title: i18n2.t("get_options.mobile.title", { wallet: wallet.name }),
14280
- variant: "app"
14281
- })));
14282
- }
14283
- function DownloadDetail({
14284
- changeWalletStep,
14285
- wallet
14286
- }) {
14287
- const { downloadUrls, qrCode } = wallet;
14288
- const { i18n: i18n2 } = useContext23(I18nContext);
14289
- useEffect29(() => {
14290
- preloadCreateIcon();
14291
- preloadScanIcon();
14292
- }, []);
14293
- return /* @__PURE__ */ React135.createElement(Box, {
14294
- alignItems: "center",
13150
+ gap: "4",
13151
+ style: { textAlign: "center" }
13152
+ }, ready && !hasQrCode ? /* @__PURE__ */ React121.createElement(Box, {
13153
+ width: "full",
14295
13154
  display: "flex",
14296
13155
  flexDirection: "column",
14297
- gap: "24",
14298
- height: "full",
14299
- width: "full"
14300
- }, /* @__PURE__ */ React135.createElement(Box, {
14301
- style: { maxWidth: 220, textAlign: "center" }
14302
- }, /* @__PURE__ */ React135.createElement(Text, {
14303
- color: "modalTextSecondary",
14304
- size: "14",
14305
- weight: "semibold"
14306
- }, i18n2.t("get_mobile.description"))), /* @__PURE__ */ React135.createElement(Box, {
14307
- height: "full"
14308
- }, (downloadUrls == null ? void 0 : downloadUrls.qrCode) ? /* @__PURE__ */ React135.createElement(QRCode, {
14309
- logoSize: 0,
14310
- size: 268,
14311
- uri: downloadUrls.qrCode
14312
- }) : null), /* @__PURE__ */ React135.createElement(Box, {
14313
- alignItems: "center",
14314
- borderRadius: "10",
13156
+ gap: "24"
13157
+ }, /* @__PURE__ */ React121.createElement(Box, {
13158
+ id: "link-graphics",
14315
13159
  display: "flex",
14316
13160
  flexDirection: "row",
14317
- gap: "8",
14318
- height: "34",
14319
- justifyContent: "space-between",
14320
- marginBottom: "12",
14321
- paddingY: "8"
14322
- }, /* @__PURE__ */ React135.createElement(ActionButton, {
14323
- label: i18n2.t("get_mobile.continue.label"),
14324
- onClick: () => changeWalletStep(
14325
- (qrCode == null ? void 0 : qrCode.instructions) ? "INSTRUCTIONS_MOBILE" /* InstructionsMobile */ : "CONNECT" /* Connect */
14326
- )
14327
- })));
14328
- }
14329
- var stepIcons = {
14330
- connect: () => /* @__PURE__ */ React135.createElement(ConnectIcon, null),
14331
- create: () => /* @__PURE__ */ React135.createElement(CreateIcon, null),
14332
- install: (wallet) => /* @__PURE__ */ React135.createElement(AsyncImage, {
14333
- background: wallet.iconBackground,
14334
- borderColor: "generalBorder",
14335
- borderRadius: "10",
14336
- height: "48",
14337
- src: wallet.iconUrl,
14338
- width: "48"
14339
- }),
14340
- refresh: () => /* @__PURE__ */ React135.createElement(RefreshIcon, null),
14341
- scan: () => /* @__PURE__ */ React135.createElement(ScanIcon, null)
14342
- };
14343
- function InstructionMobileDetail({
14344
- connectWallet,
14345
- wallet
14346
- }) {
14347
- var _a, _b, _c, _d;
14348
- const { i18n: i18n2 } = useContext23(I18nContext);
14349
- return /* @__PURE__ */ React135.createElement(Box, {
14350
- alignItems: "center",
14351
- display: "flex",
14352
- flexDirection: "column",
14353
- height: "full",
14354
- width: "full"
14355
- }, /* @__PURE__ */ React135.createElement(Box, {
14356
- display: "flex",
14357
- flexDirection: "column",
14358
- gap: "28",
14359
- height: "full",
14360
- justifyContent: "center",
14361
- paddingY: "32",
14362
- style: { maxWidth: 320 }
14363
- }, (_b = (_a = wallet == null ? void 0 : wallet.qrCode) == null ? void 0 : _a.instructions) == null ? void 0 : _b.steps.map((d, idx) => {
14364
- var _a2;
14365
- return /* @__PURE__ */ React135.createElement(Box, {
14366
- alignItems: "center",
14367
- display: "flex",
14368
- flexDirection: "row",
14369
- gap: "16",
14370
- key: idx
14371
- }, /* @__PURE__ */ React135.createElement(Box, {
14372
- borderRadius: "10",
14373
- height: "48",
14374
- minWidth: "48",
14375
- overflow: "hidden",
14376
- position: "relative",
14377
- width: "48"
14378
- }, (_a2 = stepIcons[d.step]) == null ? void 0 : _a2.call(stepIcons, wallet)), /* @__PURE__ */ React135.createElement(Box, {
14379
- display: "flex",
14380
- flexDirection: "column",
14381
- gap: "4"
14382
- }, /* @__PURE__ */ React135.createElement(Text, {
14383
- color: "modalText",
14384
- size: "14",
14385
- weight: "bold"
14386
- }, i18n2.t(d.title, void 0, {
14387
- rawKeyIfTranslationMissing: true
14388
- })), /* @__PURE__ */ React135.createElement(Text, {
14389
- color: "modalTextSecondary",
14390
- size: "14",
14391
- weight: "medium"
14392
- }, i18n2.t(d.description, void 0, {
14393
- rawKeyIfTranslationMissing: true
14394
- }))));
14395
- })), /* @__PURE__ */ React135.createElement(Box, {
14396
- alignItems: "center",
14397
- display: "flex",
14398
- flexDirection: "column",
14399
- gap: "12",
14400
- justifyContent: "center",
14401
- marginBottom: "16"
14402
- }, /* @__PURE__ */ React135.createElement(ActionButton, {
14403
- label: i18n2.t("get_instructions.mobile.connect.label"),
14404
- onClick: () => connectWallet(wallet)
14405
- }), /* @__PURE__ */ React135.createElement(Box, {
14406
- as: "a",
14407
- className: touchableStyles({ active: "shrink", hover: "grow" }),
14408
- display: "block",
14409
- href: (_d = (_c = wallet == null ? void 0 : wallet.qrCode) == null ? void 0 : _c.instructions) == null ? void 0 : _d.learnMoreUrl,
14410
- paddingX: "12",
14411
- paddingY: "4",
14412
- rel: "noreferrer",
14413
- style: { willChange: "transform" },
14414
- target: "_blank",
14415
- transition: "default"
14416
- }, /* @__PURE__ */ React135.createElement(Text, {
14417
- color: "accentColor",
14418
- size: "14",
14419
- weight: "bold"
14420
- }, i18n2.t("get_instructions.mobile.learn_more.label")))));
14421
- }
14422
- function InstructionExtensionDetail({
14423
- wallet
14424
- }) {
14425
- var _a, _b, _c, _d;
14426
- const { i18n: i18n2 } = useContext23(I18nContext);
14427
- return /* @__PURE__ */ React135.createElement(Box, {
14428
- alignItems: "center",
14429
- display: "flex",
14430
- flexDirection: "column",
14431
- height: "full",
14432
- width: "full"
14433
- }, /* @__PURE__ */ React135.createElement(Box, {
14434
- display: "flex",
14435
- flexDirection: "column",
14436
- gap: "28",
14437
- height: "full",
14438
- justifyContent: "center",
14439
- paddingY: "32",
14440
- style: { maxWidth: 320 }
14441
- }, (_b = (_a = wallet == null ? void 0 : wallet.extension) == null ? void 0 : _a.instructions) == null ? void 0 : _b.steps.map((d, idx) => {
14442
- var _a2;
14443
- return /* @__PURE__ */ React135.createElement(Box, {
14444
- alignItems: "center",
14445
- display: "flex",
14446
- flexDirection: "row",
14447
- gap: "16",
14448
- key: idx
14449
- }, /* @__PURE__ */ React135.createElement(Box, {
14450
- borderRadius: "10",
14451
- height: "48",
14452
- minWidth: "48",
14453
- overflow: "hidden",
14454
- position: "relative",
14455
- width: "48"
14456
- }, (_a2 = stepIcons[d.step]) == null ? void 0 : _a2.call(stepIcons, wallet)), /* @__PURE__ */ React135.createElement(Box, {
14457
- display: "flex",
14458
- flexDirection: "column",
14459
- gap: "4"
14460
- }, /* @__PURE__ */ React135.createElement(Text, {
14461
- color: "modalText",
14462
- size: "14",
14463
- weight: "bold"
14464
- }, i18n2.t(d.title, void 0, {
14465
- rawKeyIfTranslationMissing: true
14466
- })), /* @__PURE__ */ React135.createElement(Text, {
14467
- color: "modalTextSecondary",
14468
- size: "14",
14469
- weight: "medium"
14470
- }, i18n2.t(d.description, void 0, {
14471
- rawKeyIfTranslationMissing: true
14472
- }))));
14473
- })), /* @__PURE__ */ React135.createElement(Box, {
14474
- alignItems: "center",
14475
- display: "flex",
14476
- flexDirection: "column",
14477
- gap: "12",
14478
- justifyContent: "center",
14479
- marginBottom: "16"
14480
- }, /* @__PURE__ */ React135.createElement(ActionButton, {
14481
- label: i18n2.t("get_instructions.extension.refresh.label"),
14482
- onClick: window.location.reload.bind(window.location)
14483
- }), /* @__PURE__ */ React135.createElement(Box, {
14484
- as: "a",
14485
- className: touchableStyles({ active: "shrink", hover: "grow" }),
14486
- display: "block",
14487
- href: (_d = (_c = wallet == null ? void 0 : wallet.extension) == null ? void 0 : _c.instructions) == null ? void 0 : _d.learnMoreUrl,
14488
- paddingX: "12",
14489
- paddingY: "4",
14490
- rel: "noreferrer",
14491
- style: { willChange: "transform" },
14492
- target: "_blank",
14493
- transition: "default"
14494
- }, /* @__PURE__ */ React135.createElement(Text, {
14495
- color: "accentColor",
14496
- size: "14",
14497
- weight: "bold"
14498
- }, i18n2.t("get_instructions.extension.learn_more.label")))));
14499
- }
14500
- function InstructionDesktopDetail({
14501
- connectWallet,
14502
- wallet
14503
- }) {
14504
- var _a, _b, _c, _d;
14505
- const { i18n: i18n2 } = useContext23(I18nContext);
14506
- return /* @__PURE__ */ React135.createElement(Box, {
14507
- alignItems: "center",
14508
- display: "flex",
14509
- flexDirection: "column",
14510
- height: "full",
14511
- width: "full"
14512
- }, /* @__PURE__ */ React135.createElement(Box, {
14513
- display: "flex",
14514
- flexDirection: "column",
14515
- gap: "28",
14516
- height: "full",
14517
- justifyContent: "center",
14518
- paddingY: "32",
14519
- style: { maxWidth: 320 }
14520
- }, (_b = (_a = wallet == null ? void 0 : wallet.desktop) == null ? void 0 : _a.instructions) == null ? void 0 : _b.steps.map((d, idx) => {
14521
- var _a2;
14522
- return /* @__PURE__ */ React135.createElement(Box, {
14523
- alignItems: "center",
14524
- display: "flex",
14525
- flexDirection: "row",
14526
- gap: "16",
14527
- key: idx
14528
- }, /* @__PURE__ */ React135.createElement(Box, {
14529
- borderRadius: "10",
14530
- height: "48",
14531
- minWidth: "48",
14532
- overflow: "hidden",
14533
- position: "relative",
14534
- width: "48"
14535
- }, (_a2 = stepIcons[d.step]) == null ? void 0 : _a2.call(stepIcons, wallet)), /* @__PURE__ */ React135.createElement(Box, {
14536
- display: "flex",
14537
- flexDirection: "column",
14538
- gap: "4"
14539
- }, /* @__PURE__ */ React135.createElement(Text, {
14540
- color: "modalText",
14541
- size: "14",
14542
- weight: "bold"
14543
- }, i18n2.t(d.title, void 0, {
14544
- rawKeyIfTranslationMissing: true
14545
- })), /* @__PURE__ */ React135.createElement(Text, {
14546
- color: "modalTextSecondary",
14547
- size: "14",
14548
- weight: "medium"
14549
- }, i18n2.t(d.description, void 0, {
14550
- rawKeyIfTranslationMissing: true
14551
- }))));
14552
- })), /* @__PURE__ */ React135.createElement(Box, {
14553
- alignItems: "center",
13161
+ justifyContent: "space-between"
13162
+ }, /* @__PURE__ */ React121.createElement(Box, {
13163
+ style: { width: 80, height: 80 }
13164
+ }, /* @__PURE__ */ React121.createElement(AsyncImage, {
13165
+ background: appConfig.logoBackground,
13166
+ borderRadius: "menuButton",
13167
+ src: appConfig.logoSrc,
13168
+ width: 80,
13169
+ height: 80
13170
+ })), /* @__PURE__ */ React121.createElement(LinkItem, null), /* @__PURE__ */ React121.createElement(Box, {
13171
+ style: { width: 80, height: 80 }
13172
+ }, /* @__PURE__ */ React121.createElement(AsyncImage, {
13173
+ background: iconBackground,
13174
+ borderRadius: "menuButton",
13175
+ src: iconUrl,
13176
+ width: 80,
13177
+ height: 80
13178
+ }))), /* @__PURE__ */ React121.createElement(Box, {
13179
+ id: "link-text",
14554
13180
  display: "flex",
14555
13181
  flexDirection: "column",
14556
- gap: "12",
14557
- justifyContent: "center",
14558
- marginBottom: "16"
14559
- }, /* @__PURE__ */ React135.createElement(ActionButton, {
14560
- label: i18n2.t("get_instructions.desktop.connect.label"),
14561
- onClick: () => connectWallet(wallet)
14562
- }), /* @__PURE__ */ React135.createElement(Box, {
14563
- as: "a",
14564
- className: touchableStyles({ active: "shrink", hover: "grow" }),
14565
- display: "block",
14566
- href: (_d = (_c = wallet == null ? void 0 : wallet.desktop) == null ? void 0 : _c.instructions) == null ? void 0 : _d.learnMoreUrl,
14567
- paddingX: "12",
14568
- paddingY: "4",
14569
- rel: "noreferrer",
14570
- style: { willChange: "transform" },
14571
- target: "_blank",
14572
- transition: "default"
14573
- }, /* @__PURE__ */ React135.createElement(Text, {
13182
+ gap: "10"
13183
+ }, /* @__PURE__ */ React121.createElement(Text, {
14574
13184
  color: "accentColor",
14575
- size: "14",
14576
- weight: "bold"
14577
- }, i18n2.t("get_instructions.desktop.learn_more.label")))));
13185
+ weight: "semibold",
13186
+ size: "18"
13187
+ }, "Connecting to ", name, "..."), /* @__PURE__ */ React121.createElement(Text, {
13188
+ color: "modalTextSecondary",
13189
+ weight: "medium",
13190
+ size: "14"
13191
+ }, "Approve the ", appConfig.name, " application to execute transactions seamlessly."))) : null))));
14578
13192
  }
14579
13193
 
14580
13194
  // src/components/FunConnectOptions/FunWeb3ConnectingStep.tsx
@@ -14584,8 +13198,8 @@ function FunWeb3ConnectingStep({
14584
13198
  selectedWallet,
14585
13199
  qrCodeUri
14586
13200
  }) {
14587
- const [animateOut, setAnimateOut] = React136.useState(false);
14588
- return /* @__PURE__ */ React136.createElement(Box, null, /* @__PURE__ */ React136.createElement(FunModalTitleSection, {
13201
+ const [animateOut, setAnimateOut] = React122.useState(false);
13202
+ return /* @__PURE__ */ React122.createElement(Box, null, /* @__PURE__ */ React122.createElement(FunModalTitleSection, {
14589
13203
  title: "Connect Wallet",
14590
13204
  hasBackButton: true,
14591
13205
  onBack: () => {
@@ -14597,27 +13211,23 @@ function FunWeb3ConnectingStep({
14597
13211
  backAnimation: animateOut,
14598
13212
  hasCloseButton: true,
14599
13213
  onClose
14600
- }), selectedWallet ? /* @__PURE__ */ React136.createElement(Box, {
13214
+ }), selectedWallet ? /* @__PURE__ */ React122.createElement(Box, {
14601
13215
  display: "flex",
14602
13216
  flexDirection: "column",
14603
13217
  paddingY: "20",
14604
13218
  gap: "24",
14605
13219
  className: animateOut ? animateContentOutClass : animateContentInClass
14606
- }, /* @__PURE__ */ React136.createElement(ConnectDetail, {
14607
- changeWalletStep: () => void 0,
13220
+ }, /* @__PURE__ */ React122.createElement(ConnectDetail, {
14608
13221
  compactModeEnabled: true,
14609
13222
  qrCodeUri,
14610
- onClose,
14611
- wallet: selectedWallet,
14612
- connectionError: false,
14613
- reconnect: () => void 0
14614
- }), /* @__PURE__ */ React136.createElement(FunButton, {
13223
+ wallet: selectedWallet
13224
+ }), /* @__PURE__ */ React122.createElement(FunButton, {
14615
13225
  isDisabled: true,
14616
- titleSuffix: /* @__PURE__ */ React136.createElement(Box, {
13226
+ titleSuffix: /* @__PURE__ */ React122.createElement(Box, {
14617
13227
  display: "flex",
14618
13228
  alignItems: "center",
14619
13229
  color: "modalText"
14620
- }, /* @__PURE__ */ React136.createElement(SpinnerIcon, {
13230
+ }, /* @__PURE__ */ React122.createElement(SpinnerIcon, {
14621
13231
  height: 21,
14622
13232
  width: 21
14623
13233
  })),
@@ -14627,13 +13237,13 @@ function FunWeb3ConnectingStep({
14627
13237
 
14628
13238
  // src/components/FunConnectOptions/FunConnectOptions.tsx
14629
13239
  function FunConnectOptions({ onClose }) {
14630
- const [step, setStep] = useState38(0 /* SIGNIN */);
14631
- const [selectedWallet, setSelectedWallet] = useState38();
14632
- const [qrCodeUri, setQrCodeUri] = useState38("");
14633
- const [emailInput, setEmailInput] = useState38("");
14634
- const [otpInput, setOtpInput] = useState38("");
14635
- const [farcasterUri, setFarcasterUri] = useState38("");
14636
- const [farcasterToken, setFarcasterToken] = useState38("");
13240
+ const [step, setStep] = useState37(0 /* SIGNIN */);
13241
+ const [selectedWallet, setSelectedWallet] = useState37();
13242
+ const [qrCodeUri, setQrCodeUri] = useState37("");
13243
+ const [emailInput, setEmailInput] = useState37("");
13244
+ const [otpInput, setOtpInput] = useState37("");
13245
+ const [farcasterUri, setFarcasterUri] = useState37("");
13246
+ const [farcasterToken, setFarcasterToken] = useState37("");
14637
13247
  const changeStep = (newStep) => {
14638
13248
  setStep(newStep);
14639
13249
  if (newStep === 0 /* SIGNIN */) {
@@ -14651,17 +13261,17 @@ function FunConnectOptions({ onClose }) {
14651
13261
  });
14652
13262
  }
14653
13263
  }, []);
14654
- return /* @__PURE__ */ React137.createElement(Box, {
13264
+ return /* @__PURE__ */ React123.createElement(Box, {
14655
13265
  display: "flex",
14656
13266
  flexDirection: "row"
14657
- }, /* @__PURE__ */ React137.createElement(Box, {
14658
- className: sidebarCompactMode,
13267
+ }, /* @__PURE__ */ React123.createElement(Box, {
14659
13268
  display: "flex",
14660
13269
  flexDirection: "column",
14661
13270
  marginTop: "16",
14662
13271
  paddingX: "20",
13272
+ minWidth: "full",
14663
13273
  width: "full"
14664
- }, step === 0 /* SIGNIN */ ? /* @__PURE__ */ React137.createElement(FunSignInStep, {
13274
+ }, step === 0 /* SIGNIN */ ? /* @__PURE__ */ React123.createElement(FunSignInStep, {
14665
13275
  emailInput,
14666
13276
  setEmailInput,
14667
13277
  onClose,
@@ -14674,24 +13284,24 @@ function FunConnectOptions({ onClose }) {
14674
13284
  setFarcasterUri(connectUri);
14675
13285
  changeStep(3 /* PENDING_FARCASTER */);
14676
13286
  }
14677
- }) : step === 2 /* PENDING_WALLET */ ? /* @__PURE__ */ React137.createElement(FunWeb3ConnectingStep, {
13287
+ }) : step === 2 /* PENDING_WALLET */ ? /* @__PURE__ */ React123.createElement(FunWeb3ConnectingStep, {
14678
13288
  onClose,
14679
13289
  changeStep,
14680
13290
  selectedWallet,
14681
13291
  qrCodeUri
14682
- }) : step === 1 /* PENDING_EMAIL */ ? /* @__PURE__ */ React137.createElement(FunWeb2ConnectingStep, {
13292
+ }) : step === 1 /* PENDING_EMAIL */ ? /* @__PURE__ */ React123.createElement(FunWeb2ConnectingStep, {
14683
13293
  emailInput,
14684
13294
  otpInput,
14685
13295
  setOtpInput,
14686
13296
  onClose,
14687
13297
  onBack: () => changeStep(0 /* SIGNIN */),
14688
13298
  setSelectedWallet
14689
- }) : step === 3 /* PENDING_FARCASTER */ ? /* @__PURE__ */ React137.createElement(FunFarcasterConnectingStep, {
13299
+ }) : step === 3 /* PENDING_FARCASTER */ ? /* @__PURE__ */ React123.createElement(FunFarcasterConnectingStep, {
14690
13300
  farcasterUri,
14691
13301
  farcasterToken,
14692
13302
  changeStep,
14693
13303
  onClose
14694
- }) : step === 4 /* ERROR */ ? /* @__PURE__ */ React137.createElement(FunConnectErrorStep, {
13304
+ }) : step === 4 /* ERROR */ ? /* @__PURE__ */ React123.createElement(FunConnectErrorStep, {
14695
13305
  title: "Connection Failed",
14696
13306
  onBack: () => changeStep(0 /* SIGNIN */),
14697
13307
  onClose,
@@ -14711,16 +13321,81 @@ function FunConnectOptions({ onClose }) {
14711
13321
  }
14712
13322
 
14713
13323
  // src/components/SignIn/SignIn.tsx
14714
- import React138, { useCallback as useCallback29, useContext as useContext24, useRef as useRef11 } from "react";
13324
+ import React125, { useCallback as useCallback29, useContext as useContext21, useRef as useRef10 } from "react";
14715
13325
  import { UserRejectedRequestError } from "viem";
14716
13326
  import { useAccount as useAccount9, useSignMessage } from "wagmi";
13327
+
13328
+ // src/components/Button/ActionButton.tsx
13329
+ import React124 from "react";
13330
+ var sizeVariants = {
13331
+ large: {
13332
+ fontSize: "16",
13333
+ paddingX: "24",
13334
+ paddingY: "10"
13335
+ },
13336
+ medium: {
13337
+ fontSize: "14",
13338
+ height: "28",
13339
+ paddingX: "12",
13340
+ paddingY: "4"
13341
+ },
13342
+ small: {
13343
+ fontSize: "14",
13344
+ paddingX: "10",
13345
+ paddingY: "5"
13346
+ }
13347
+ };
13348
+ function ActionButton({
13349
+ disabled = false,
13350
+ href,
13351
+ label,
13352
+ onClick,
13353
+ rel = "noreferrer noopener",
13354
+ size = "medium",
13355
+ target = "_blank",
13356
+ testId,
13357
+ type = "primary"
13358
+ }) {
13359
+ const isPrimary = type === "primary";
13360
+ const isNotLarge = size !== "large";
13361
+ const mobile = isMobile();
13362
+ const background = !disabled ? isPrimary ? "accentColor" : isNotLarge ? "actionButtonSecondaryBackground" : null : "actionButtonSecondaryBackground";
13363
+ const { fontSize, height, paddingX, paddingY } = sizeVariants[size];
13364
+ const hasBorder = !mobile || !isNotLarge;
13365
+ return /* @__PURE__ */ React124.createElement(Box, {
13366
+ ...href ? !disabled ? { as: "a", href, rel, target } : {} : { as: "button", type: "button" },
13367
+ onClick: !disabled ? onClick : void 0,
13368
+ ...hasBorder ? {
13369
+ borderColor: mobile && !isNotLarge && !isPrimary ? "actionButtonBorderMobile" : "actionButtonBorder",
13370
+ borderStyle: "solid",
13371
+ borderWidth: "1"
13372
+ } : {},
13373
+ borderRadius: "actionButton",
13374
+ className: !disabled && touchableStyles({ active: "shrinkSm", hover: "grow" }),
13375
+ display: "block",
13376
+ paddingX,
13377
+ paddingY,
13378
+ style: { willChange: "transform" },
13379
+ testId,
13380
+ textAlign: "center",
13381
+ transition: "transform",
13382
+ ...background ? { background } : {},
13383
+ ...height ? { height } : {}
13384
+ }, /* @__PURE__ */ React124.createElement(Text, {
13385
+ color: !disabled ? isPrimary ? "accentColorForeground" : "accentColor" : "modalTextSecondary",
13386
+ size: fontSize,
13387
+ weight: "bold"
13388
+ }, label));
13389
+ }
13390
+
13391
+ // src/components/SignIn/SignIn.tsx
14717
13392
  var signInIcon = async () => (await import("./sign-FZVB2CS6.js")).default;
14718
13393
  function SignIn({
14719
13394
  onClose,
14720
13395
  onCloseModal
14721
13396
  }) {
14722
- const { i18n: i18n2 } = useContext24(I18nContext);
14723
- const [{ status, ...state }, setState] = React138.useState({ status: "idle" });
13397
+ const { i18n: i18n2 } = useContext21(I18nContext);
13398
+ const [{ status, ...state }, setState] = React125.useState({ status: "idle" });
14724
13399
  const authAdapter = useAuthenticationAdapter();
14725
13400
  const getNonce = useCallback29(async () => {
14726
13401
  try {
@@ -14734,8 +13409,8 @@ function SignIn({
14734
13409
  }));
14735
13410
  }
14736
13411
  }, [authAdapter, i18n2]);
14737
- const onceRef = useRef11(false);
14738
- React138.useEffect(() => {
13412
+ const onceRef = useRef10(false);
13413
+ React125.useEffect(() => {
14739
13414
  if (onceRef.current)
14740
13415
  return;
14741
13416
  onceRef.current = true;
@@ -14797,17 +13472,17 @@ function SignIn({
14797
13472
  });
14798
13473
  }
14799
13474
  };
14800
- return /* @__PURE__ */ React138.createElement(Box, {
13475
+ return /* @__PURE__ */ React125.createElement(Box, {
14801
13476
  position: "relative"
14802
- }, /* @__PURE__ */ React138.createElement(Box, {
13477
+ }, /* @__PURE__ */ React125.createElement(Box, {
14803
13478
  display: "flex",
14804
13479
  paddingRight: "16",
14805
13480
  paddingTop: "16",
14806
13481
  position: "absolute",
14807
13482
  right: "0"
14808
- }, /* @__PURE__ */ React138.createElement(CloseButton, {
13483
+ }, /* @__PURE__ */ React125.createElement(CloseButton, {
14809
13484
  onClose
14810
- })), /* @__PURE__ */ React138.createElement(Box, {
13485
+ })), /* @__PURE__ */ React125.createElement(Box, {
14811
13486
  alignItems: "center",
14812
13487
  display: "flex",
14813
13488
  flexDirection: "column",
@@ -14815,58 +13490,58 @@ function SignIn({
14815
13490
  padding: "24",
14816
13491
  paddingX: "18",
14817
13492
  style: { paddingTop: mobile ? "60px" : "36px" }
14818
- }, /* @__PURE__ */ React138.createElement(Box, {
13493
+ }, /* @__PURE__ */ React125.createElement(Box, {
14819
13494
  alignItems: "center",
14820
13495
  display: "flex",
14821
13496
  flexDirection: "column",
14822
13497
  gap: mobile ? "6" : "4",
14823
13498
  style: { maxWidth: mobile ? 320 : 280 }
14824
- }, /* @__PURE__ */ React138.createElement(Box, {
13499
+ }, /* @__PURE__ */ React125.createElement(Box, {
14825
13500
  alignItems: "center",
14826
13501
  display: "flex",
14827
13502
  flexDirection: "column",
14828
13503
  gap: mobile ? "32" : "16"
14829
- }, /* @__PURE__ */ React138.createElement(AsyncImage, {
13504
+ }, /* @__PURE__ */ React125.createElement(AsyncImage, {
14830
13505
  height: 40,
14831
13506
  src: signInIcon,
14832
13507
  width: 40
14833
- }), /* @__PURE__ */ React138.createElement(Text, {
13508
+ }), /* @__PURE__ */ React125.createElement(Text, {
14834
13509
  color: "modalText",
14835
13510
  size: mobile ? "20" : "18",
14836
13511
  textAlign: "center",
14837
13512
  weight: "heavy"
14838
- }, i18n2.t("sign_in.label"))), /* @__PURE__ */ React138.createElement(Box, {
13513
+ }, i18n2.t("sign_in.label"))), /* @__PURE__ */ React125.createElement(Box, {
14839
13514
  alignItems: "center",
14840
13515
  display: "flex",
14841
13516
  flexDirection: "column",
14842
13517
  gap: mobile ? "16" : "12"
14843
- }, /* @__PURE__ */ React138.createElement(Text, {
13518
+ }, /* @__PURE__ */ React125.createElement(Text, {
14844
13519
  color: "modalTextSecondary",
14845
13520
  size: mobile ? "16" : "14",
14846
13521
  textAlign: "center"
14847
- }, i18n2.t("sign_in.description")), status === "idle" && state.errorMessage ? /* @__PURE__ */ React138.createElement(Text, {
13522
+ }, i18n2.t("sign_in.description")), status === "idle" && state.errorMessage ? /* @__PURE__ */ React125.createElement(Text, {
14848
13523
  color: "error",
14849
13524
  size: mobile ? "16" : "14",
14850
13525
  textAlign: "center",
14851
13526
  weight: "bold"
14852
- }, state.errorMessage) : null)), /* @__PURE__ */ React138.createElement(Box, {
13527
+ }, state.errorMessage) : null)), /* @__PURE__ */ React125.createElement(Box, {
14853
13528
  alignItems: !mobile ? "center" : void 0,
14854
13529
  display: "flex",
14855
13530
  flexDirection: "column",
14856
13531
  gap: "8",
14857
13532
  width: "full"
14858
- }, /* @__PURE__ */ React138.createElement(ActionButton, {
13533
+ }, /* @__PURE__ */ React125.createElement(ActionButton, {
14859
13534
  disabled: !state.nonce || status === "signing" || status === "verifying",
14860
13535
  label: !state.nonce ? i18n2.t("sign_in.message.preparing") : status === "signing" ? i18n2.t("sign_in.signature.waiting") : status === "verifying" ? i18n2.t("sign_in.signature.verifying") : i18n2.t("sign_in.message.send"),
14861
13536
  onClick: signIn,
14862
13537
  size: mobile ? "large" : "medium",
14863
13538
  testId: "auth-message-button"
14864
- }), mobile ? /* @__PURE__ */ React138.createElement(ActionButton, {
13539
+ }), mobile ? /* @__PURE__ */ React125.createElement(ActionButton, {
14865
13540
  label: "Cancel",
14866
13541
  onClick: onClose,
14867
13542
  size: "large",
14868
13543
  type: "secondary"
14869
- }) : /* @__PURE__ */ React138.createElement(Box, {
13544
+ }) : /* @__PURE__ */ React125.createElement(Box, {
14870
13545
  as: "button",
14871
13546
  borderRadius: "full",
14872
13547
  className: touchableStyles({ active: "shrink", hover: "grow" }),
@@ -14878,7 +13553,7 @@ function SignIn({
14878
13553
  style: { willChange: "transform" },
14879
13554
  target: "_blank",
14880
13555
  transition: "default"
14881
- }, /* @__PURE__ */ React138.createElement(Text, {
13556
+ }, /* @__PURE__ */ React125.createElement(Text, {
14882
13557
  color: "closeButton",
14883
13558
  size: mobile ? "16" : "14",
14884
13559
  weight: "bold"
@@ -14891,38 +13566,38 @@ function ConnectModal({ onClose, open }) {
14891
13566
  const connectionStatus = useConnectionStatus();
14892
13567
  const { disconnect } = useDisconnect2();
14893
13568
  const { isConnecting } = useAccount10();
14894
- const onAuthCancel = React139.useCallback(() => {
13569
+ const onAuthCancel = React126.useCallback(() => {
14895
13570
  onClose();
14896
13571
  disconnect();
14897
13572
  }, [onClose, disconnect]);
14898
- const onConnectModalCancel = React139.useCallback(() => {
13573
+ const onConnectModalCancel = React126.useCallback(() => {
14899
13574
  if (isConnecting)
14900
13575
  disconnect();
14901
13576
  onClose();
14902
13577
  }, [onClose, disconnect, isConnecting]);
14903
13578
  if (connectionStatus === "disconnected" || connectionStatus === "loading") {
14904
- return /* @__PURE__ */ React139.createElement(Dialog, {
13579
+ return /* @__PURE__ */ React126.createElement(Dialog, {
14905
13580
  onClose: onConnectModalCancel,
14906
13581
  open,
14907
13582
  titleId,
14908
13583
  isSmartCloseable: true
14909
- }, /* @__PURE__ */ React139.createElement(DialogContent, {
13584
+ }, /* @__PURE__ */ React126.createElement(DialogContent, {
14910
13585
  bottomSheetOnMobile: true,
14911
13586
  padding: "0"
14912
- }, /* @__PURE__ */ React139.createElement(FunConnectOptions, {
13587
+ }, /* @__PURE__ */ React126.createElement(FunConnectOptions, {
14913
13588
  onClose: onConnectModalCancel
14914
13589
  })));
14915
13590
  }
14916
13591
  if (connectionStatus === "unauthenticated") {
14917
- return /* @__PURE__ */ React139.createElement(Dialog, {
13592
+ return /* @__PURE__ */ React126.createElement(Dialog, {
14918
13593
  onClose: onAuthCancel,
14919
13594
  open,
14920
13595
  titleId,
14921
13596
  isSmartCloseable: true
14922
- }, /* @__PURE__ */ React139.createElement(DialogContent, {
13597
+ }, /* @__PURE__ */ React126.createElement(DialogContent, {
14923
13598
  bottomSheetOnMobile: true,
14924
13599
  padding: "0"
14925
- }, /* @__PURE__ */ React139.createElement(SignIn, {
13600
+ }, /* @__PURE__ */ React126.createElement(SignIn, {
14926
13601
  onClose: onAuthCancel,
14927
13602
  onCloseModal: onClose
14928
13603
  })));
@@ -14931,7 +13606,7 @@ function ConnectModal({ onClose, open }) {
14931
13606
  }
14932
13607
 
14933
13608
  // src/components/FunCheckoutHistoryModal/FunCheckoutHistoryModal.tsx
14934
- import React140 from "react";
13609
+ import React127 from "react";
14935
13610
  function FunCheckoutHistoryModal({
14936
13611
  onClose,
14937
13612
  open,
@@ -14943,17 +13618,17 @@ function FunCheckoutHistoryModal({
14943
13618
  "Unable to open checkout history modal without a depositAddress"
14944
13619
  );
14945
13620
  }
14946
- return /* @__PURE__ */ React140.createElement(Dialog, {
13621
+ return /* @__PURE__ */ React127.createElement(Dialog, {
14947
13622
  open,
14948
13623
  onClose,
14949
13624
  titleId: "fun-checkout-history-modal"
14950
- }, /* @__PURE__ */ React140.createElement(DialogContent, {
13625
+ }, /* @__PURE__ */ React127.createElement(DialogContent, {
14951
13626
  bottomSheetOnMobile: true,
14952
13627
  padding: "0"
14953
- }, /* @__PURE__ */ React140.createElement(Box, {
13628
+ }, /* @__PURE__ */ React127.createElement(Box, {
14954
13629
  paddingTop: "20",
14955
13630
  paddingX: "20"
14956
- }, /* @__PURE__ */ React140.createElement(FunCheckoutHistoryContent, {
13631
+ }, /* @__PURE__ */ React127.createElement(FunCheckoutHistoryContent, {
14957
13632
  depositAddress,
14958
13633
  initialPage,
14959
13634
  onClose,
@@ -14962,20 +13637,20 @@ function FunCheckoutHistoryModal({
14962
13637
  }
14963
13638
 
14964
13639
  // src/components/FunDevTestModal/FunDevTestModal.tsx
14965
- import React141 from "react";
13640
+ import React128 from "react";
14966
13641
  function FunDevTestModal({ onClose, open }) {
14967
- return /* @__PURE__ */ React141.createElement(Dialog, {
13642
+ return /* @__PURE__ */ React128.createElement(Dialog, {
14968
13643
  onClose,
14969
13644
  open,
14970
13645
  titleId: "dev/test modal"
14971
- }, /* @__PURE__ */ React141.createElement(DialogContent, {
13646
+ }, /* @__PURE__ */ React128.createElement(DialogContent, {
14972
13647
  bottomSheetOnMobile: true
14973
- }, /* @__PURE__ */ React141.createElement(Box, null)));
13648
+ }, /* @__PURE__ */ React128.createElement(Box, null)));
14974
13649
  }
14975
13650
 
14976
13651
  // src/components/FunkitProvider/ModalContext.tsx
14977
13652
  function useModalStateValue() {
14978
- const [isModalOpen, setModalOpen] = useState39(false);
13653
+ const [isModalOpen, setModalOpen] = useState38(false);
14979
13654
  return {
14980
13655
  closeModal: useCallback30(() => setModalOpen(false), []),
14981
13656
  isModalOpen,
@@ -14983,8 +13658,8 @@ function useModalStateValue() {
14983
13658
  };
14984
13659
  }
14985
13660
  function useModalStateValueWithId() {
14986
- const [isModalOpen, setModalOpen] = useState39(false);
14987
- const [modalId, setModalId] = useState39(null);
13661
+ const [isModalOpen, setModalOpen] = useState38(false);
13662
+ const [modalId, setModalId] = useState38(null);
14988
13663
  return {
14989
13664
  closeModal: useCallback30(() => {
14990
13665
  setModalId(null);
@@ -14998,7 +13673,7 @@ function useModalStateValueWithId() {
14998
13673
  }, [])
14999
13674
  };
15000
13675
  }
15001
- var ModalContext = createContext18({
13676
+ var ModalContext = createContext17({
15002
13677
  accountModalOpen: false,
15003
13678
  chainModalOpen: false,
15004
13679
  connectModalOpen: false,
@@ -15025,7 +13700,7 @@ function ModalProvider({ children }) {
15025
13700
  isModalOpen: chainModalOpen,
15026
13701
  openModal: openChainModal
15027
13702
  } = useModalStateValue();
15028
- const [isWalletConnectModalOpen, setIsWalletConnectModalOpen] = useState39(false);
13703
+ const [isWalletConnectModalOpen, setIsWalletConnectModalOpen] = useState38(false);
15029
13704
  const {
15030
13705
  closeModal: closeFunCheckoutModal,
15031
13706
  isModalOpen: funCheckoutModalOpen,
@@ -15063,11 +13738,11 @@ function ModalProvider({ children }) {
15063
13738
  onConnect: () => closeModals({ keepConnectModalOpen: isUnauthenticated }),
15064
13739
  onDisconnect: () => closeModals()
15065
13740
  });
15066
- useEffect30(() => {
13741
+ useEffect29(() => {
15067
13742
  if (isUnauthenticated)
15068
13743
  closeModals();
15069
13744
  }, [isUnauthenticated]);
15070
- return /* @__PURE__ */ React142.createElement(ModalContext.Provider, {
13745
+ return /* @__PURE__ */ React129.createElement(ModalContext.Provider, {
15071
13746
  value: useMemo34(
15072
13747
  () => ({
15073
13748
  accountModalOpen,
@@ -15107,21 +13782,21 @@ function ModalProvider({ children }) {
15107
13782
  openFunDevTestModal
15108
13783
  ]
15109
13784
  )
15110
- }, children, /* @__PURE__ */ React142.createElement(ConnectModal, {
13785
+ }, children, /* @__PURE__ */ React129.createElement(ConnectModal, {
15111
13786
  onClose: closeConnectModal,
15112
13787
  open: connectModalOpen
15113
- }), /* @__PURE__ */ React142.createElement(AccountModal, {
13788
+ }), /* @__PURE__ */ React129.createElement(AccountModal, {
15114
13789
  onClose: closeAccountModal,
15115
13790
  open: accountModalOpen
15116
- }), /* @__PURE__ */ React142.createElement(ChainModal, {
13791
+ }), /* @__PURE__ */ React129.createElement(ChainModal, {
15117
13792
  onClose: closeChainModal,
15118
13793
  open: chainModalOpen
15119
- }), /* @__PURE__ */ React142.createElement(FunCheckoutModal, {
13794
+ }), /* @__PURE__ */ React129.createElement(FunCheckoutModal, {
15120
13795
  onClose: closeFunCheckoutModal,
15121
13796
  open: funCheckoutModalOpen,
15122
13797
  checkoutId: funCheckoutModalId,
15123
13798
  key: funCheckoutModalId
15124
- }), depositAddressInitialPageCombined ? /* @__PURE__ */ React142.createElement(FunCheckoutHistoryModal, {
13799
+ }), depositAddressInitialPageCombined ? /* @__PURE__ */ React129.createElement(FunCheckoutHistoryModal, {
15125
13800
  onClose: closeFunCheckoutHistoryModal,
15126
13801
  open: funCheckoutHistoryModalOpen,
15127
13802
  depositAddress: deconstructDepositAddressAndInitialPage(
@@ -15130,13 +13805,13 @@ function ModalProvider({ children }) {
15130
13805
  initialPage: deconstructDepositAddressAndInitialPage(
15131
13806
  depositAddressInitialPageCombined
15132
13807
  ).initialPage
15133
- }) : null, /* @__PURE__ */ React142.createElement(FunDevTestModal, {
13808
+ }) : null, /* @__PURE__ */ React129.createElement(FunDevTestModal, {
15134
13809
  onClose: closeFunDevTestModal,
15135
13810
  open: funDevTestModalOpen
15136
13811
  }));
15137
13812
  }
15138
13813
  function useModalState() {
15139
- const { accountModalOpen, chainModalOpen, connectModalOpen } = useContext25(ModalContext);
13814
+ const { accountModalOpen, chainModalOpen, connectModalOpen } = useContext22(ModalContext);
15140
13815
  return {
15141
13816
  accountModalOpen,
15142
13817
  chainModalOpen,
@@ -15144,19 +13819,19 @@ function useModalState() {
15144
13819
  };
15145
13820
  }
15146
13821
  function useAccountModal() {
15147
- const { accountModalOpen, openAccountModal } = useContext25(ModalContext);
13822
+ const { accountModalOpen, openAccountModal } = useContext22(ModalContext);
15148
13823
  return { accountModalOpen, openAccountModal };
15149
13824
  }
15150
13825
  function useChainModal() {
15151
- const { chainModalOpen, openChainModal } = useContext25(ModalContext);
13826
+ const { chainModalOpen, openChainModal } = useContext22(ModalContext);
15152
13827
  return { chainModalOpen, openChainModal };
15153
13828
  }
15154
13829
  function useWalletConnectOpenState() {
15155
- const { isWalletConnectModalOpen, setIsWalletConnectModalOpen } = useContext25(ModalContext);
13830
+ const { isWalletConnectModalOpen, setIsWalletConnectModalOpen } = useContext22(ModalContext);
15156
13831
  return { isWalletConnectModalOpen, setIsWalletConnectModalOpen };
15157
13832
  }
15158
13833
  function useConnectModal() {
15159
- const { connectModalOpen, openConnectModal } = useContext25(ModalContext);
13834
+ const { connectModalOpen, openConnectModal } = useContext22(ModalContext);
15160
13835
  const { isWalletConnectModalOpen } = useWalletConnectOpenState();
15161
13836
  return {
15162
13837
  connectModalOpen: connectModalOpen || isWalletConnectModalOpen,
@@ -15164,11 +13839,11 @@ function useConnectModal() {
15164
13839
  };
15165
13840
  }
15166
13841
  function useFunCheckoutModal() {
15167
- const { funCheckoutModalOpen, openFunCheckoutModal } = useContext25(ModalContext);
13842
+ const { funCheckoutModalOpen, openFunCheckoutModal } = useContext22(ModalContext);
15168
13843
  return { funCheckoutModalOpen, openFunCheckoutModal };
15169
13844
  }
15170
13845
  function useFunCheckoutHistoryModal() {
15171
- const { funCheckoutHistoryModalOpen, openFunCheckoutHistoryModal } = useContext25(ModalContext);
13846
+ const { funCheckoutHistoryModalOpen, openFunCheckoutHistoryModal } = useContext22(ModalContext);
15172
13847
  return { funCheckoutHistoryModalOpen, openFunCheckoutHistoryModal };
15173
13848
  }
15174
13849
 
@@ -15212,7 +13887,7 @@ var isFunkitSdkConnector = (wallet) => {
15212
13887
  };
15213
13888
  var isEIP6963Connector = (wallet) => {
15214
13889
  var _a;
15215
- return !!(!wallet.isFunkitSdkConnector && ((_a = wallet.icon) == null ? void 0 : _a.startsWith("data:image")) && wallet.uid && wallet.name);
13890
+ return !!(!wallet.isFunkitSdkConnector && ((_a = wallet.icon) == null ? void 0 : _a.replace(/\n/g, "").startsWith("data:image")) && wallet.uid && wallet.name);
15216
13891
  };
15217
13892
  var rainbowKitConnectorWithWalletConnect = (wallet, walletConnectModalConnector) => {
15218
13893
  const shouldUseWalletConnectModal = wallet.id === "walletConnect" && walletConnectModalConnector;
@@ -15396,7 +14071,7 @@ var ERROR_MESSAGES = {
15396
14071
  PRIVY_USER_NOT_INITIALIZED: "Privy user not initialized",
15397
14072
  FARCASTER_NOT_INITIALIZED: "Unable to initialize Farcaster login"
15398
14073
  };
15399
- var FunkitWeb2Context = createContext19({
14074
+ var FunkitWeb2Context = createContext18({
15400
14075
  isSendingOtpEmail: false,
15401
14076
  isGeneratingFcUri: false,
15402
14077
  handleSendOtpEmail: () => Promise.resolve({ success: false, error: "" }),
@@ -15435,15 +14110,15 @@ var FunkitWeb2Provider = ({
15435
14110
  const { connectAsync } = useConnect2();
15436
14111
  const { chains } = useConfig5();
15437
14112
  const { connectors, disconnectAsync } = useDisconnect3();
15438
- const [privy, setPrivy] = useState40(null);
15439
- const [privyIframeUrl, setPrivyIframeUrl] = useState40();
15440
- const [loginMethod, setLoginMethod] = useState40(
14113
+ const [privy, setPrivy] = useState39(null);
14114
+ const [privyIframeUrl, setPrivyIframeUrl] = useState39();
14115
+ const [loginMethod, setLoginMethod] = useState39(
15441
14116
  getLoginMethodFromCache() || null
15442
14117
  );
15443
14118
  const wallets = useWalletConnectors();
15444
- const [isLoggingIn, setIsLoggingIn] = useState40(false);
15445
- const [loginErrorMessage, setLoginErrorMessage] = useState40("");
15446
- const [loggedInUser, setLoggedInUser] = useState40(null);
14119
+ const [isLoggingIn, setIsLoggingIn] = useState39(false);
14120
+ const [loginErrorMessage, setLoginErrorMessage] = useState39("");
14121
+ const [loggedInUser, setLoggedInUser] = useState39(null);
15447
14122
  const setLoginMethodAndCache = useCallback31(
15448
14123
  (method) => {
15449
14124
  try {
@@ -15459,7 +14134,7 @@ var FunkitWeb2Provider = ({
15459
14134
  },
15460
14135
  []
15461
14136
  );
15462
- useEffect31(() => {
14137
+ useEffect30(() => {
15463
14138
  const newPrivy = new PrivyJS({
15464
14139
  appId: funkitConfig.privyAppId,
15465
14140
  storage: new LocalStorage(),
@@ -15661,7 +14336,7 @@ var FunkitWeb2Provider = ({
15661
14336
  }
15662
14337
  }
15663
14338
  }, [handleFunkitWeb2Login, initChainId, loginMethod]);
15664
- useEffect31(() => {
14339
+ useEffect30(() => {
15665
14340
  if (privy && privyIframeUrl && isNotNullish(initChainId)) {
15666
14341
  const iframe = document.getElementById(
15667
14342
  PRIVY_IFRAME_ID
@@ -15703,7 +14378,7 @@ var FunkitWeb2Provider = ({
15703
14378
  },
15704
14379
  [privy, setLoginMethodAndCache]
15705
14380
  );
15706
- const [isSendingOtpEmail, setIsSendingOtpEmail] = useState40(false);
14381
+ const [isSendingOtpEmail, setIsSendingOtpEmail] = useState39(false);
15707
14382
  const handleSendOtpEmail = useCallback31(
15708
14383
  async (emailAddress) => {
15709
14384
  try {
@@ -15731,7 +14406,7 @@ var FunkitWeb2Provider = ({
15731
14406
  },
15732
14407
  [privy, setLoginMethodAndCache]
15733
14408
  );
15734
- const [isGeneratingFcUri, setIsGeneratingFcUri] = useState40(false);
14409
+ const [isGeneratingFcUri, setIsGeneratingFcUri] = useState39(false);
15735
14410
  const handleGenerateFcUri = useCallback31(async () => {
15736
14411
  try {
15737
14412
  if (!privy)
@@ -15848,15 +14523,15 @@ var FunkitWeb2Provider = ({
15848
14523
  handleFunkitWeb2Logout,
15849
14524
  web2UserInfo
15850
14525
  };
15851
- return /* @__PURE__ */ React143.createElement(FunkitWeb2Context.Provider, {
14526
+ return /* @__PURE__ */ React130.createElement(FunkitWeb2Context.Provider, {
15852
14527
  value: contextValue
15853
- }, privyIframeUrl ? /* @__PURE__ */ React143.createElement("iframe", {
14528
+ }, privyIframeUrl ? /* @__PURE__ */ React130.createElement("iframe", {
15854
14529
  id: PRIVY_IFRAME_ID,
15855
14530
  src: privyIframeUrl,
15856
14531
  style: { display: "none" }
15857
14532
  }) : null, children);
15858
14533
  };
15859
- var useFunkitWeb2Login = () => useContext26(FunkitWeb2Context);
14534
+ var useFunkitWeb2Login = () => useContext23(FunkitWeb2Context);
15860
14535
 
15861
14536
  // src/hooks/useConnectionStatus.ts
15862
14537
  function useConnectionStatus() {
@@ -15879,27 +14554,27 @@ function useConnectionStatus() {
15879
14554
  }
15880
14555
 
15881
14556
  // src/components/FunkitProvider/ShowBalanceContext.tsx
15882
- import React144, { createContext as createContext20, useContext as useContext27, useState as useState41 } from "react";
15883
- var ShowBalanceContext = createContext20({
14557
+ import React131, { createContext as createContext19, useContext as useContext24, useState as useState40 } from "react";
14558
+ var ShowBalanceContext = createContext19({
15884
14559
  showBalance: void 0,
15885
14560
  setShowBalance: () => void 0
15886
14561
  });
15887
14562
  function ShowBalanceProvider({ children }) {
15888
- const [showBalance, setShowBalance] = useState41();
15889
- return /* @__PURE__ */ React144.createElement(ShowBalanceContext.Provider, {
14563
+ const [showBalance, setShowBalance] = useState40();
14564
+ return /* @__PURE__ */ React131.createElement(ShowBalanceContext.Provider, {
15890
14565
  value: { showBalance, setShowBalance }
15891
14566
  }, children);
15892
14567
  }
15893
- var useShowBalance = () => useContext27(ShowBalanceContext);
14568
+ var useShowBalance = () => useContext24(ShowBalanceContext);
15894
14569
 
15895
14570
  // src/components/Icons/Dropdown.tsx
15896
- import React145 from "react";
15897
- var DropdownIcon = () => /* @__PURE__ */ React145.createElement("svg", {
14571
+ import React132 from "react";
14572
+ var DropdownIcon = () => /* @__PURE__ */ React132.createElement("svg", {
15898
14573
  fill: "none",
15899
14574
  height: "7",
15900
14575
  width: "14",
15901
14576
  xmlns: "http://www.w3.org/2000/svg"
15902
- }, /* @__PURE__ */ React145.createElement("path", {
14577
+ }, /* @__PURE__ */ React132.createElement("path", {
15903
14578
  d: "M12.75 1.54001L8.51647 5.0038C7.77974 5.60658 6.72026 5.60658 5.98352 5.0038L1.75 1.54001",
15904
14579
  stroke: "currentColor",
15905
14580
  strokeLinecap: "round",
@@ -15909,14 +14584,14 @@ var DropdownIcon = () => /* @__PURE__ */ React145.createElement("svg", {
15909
14584
  }));
15910
14585
 
15911
14586
  // src/components/ConnectButton/ConnectButtonRenderer.tsx
15912
- import React147, { useContext as useContext29 } from "react";
14587
+ import React134, { useContext as useContext26 } from "react";
15913
14588
  import { useAccount as useAccount16, useBalance, useConfig as useConfig6 } from "wagmi";
15914
14589
 
15915
14590
  // src/hooks/useIsMounted.ts
15916
- import { useCallback as useCallback32, useEffect as useEffect32, useState as useState42 } from "react";
14591
+ import { useCallback as useCallback32, useEffect as useEffect31, useState as useState41 } from "react";
15917
14592
  function useIsMounted() {
15918
- const [isMounted, setIsMounted] = useState42(false);
15919
- useEffect32(() => {
14593
+ const [isMounted, setIsMounted] = useState41(false);
14594
+ useEffect31(() => {
15920
14595
  setIsMounted(true);
15921
14596
  return () => {
15922
14597
  setIsMounted(false);
@@ -15942,7 +14617,7 @@ function useMainnetEnsAvatar(name) {
15942
14617
  }
15943
14618
 
15944
14619
  // src/transactions/useRecentTransactions.ts
15945
- import { useEffect as useEffect34, useState as useState44 } from "react";
14620
+ import { useEffect as useEffect33, useState as useState43 } from "react";
15946
14621
  import { useAccount as useAccount15 } from "wagmi";
15947
14622
 
15948
14623
  // src/hooks/useChainId.ts
@@ -15954,7 +14629,7 @@ function useChainId() {
15954
14629
  }
15955
14630
 
15956
14631
  // src/transactions/TransactionStoreContext.tsx
15957
- import React146, { createContext as createContext21, useContext as useContext28, useEffect as useEffect33, useState as useState43 } from "react";
14632
+ import React133, { createContext as createContext20, useContext as useContext25, useEffect as useEffect32, useState as useState42 } from "react";
15958
14633
  import { useAccount as useAccount14, usePublicClient } from "wagmi";
15959
14634
 
15960
14635
  // src/transactions/transactionStore.ts
@@ -16097,30 +14772,30 @@ function createTransactionStore({
16097
14772
 
16098
14773
  // src/transactions/TransactionStoreContext.tsx
16099
14774
  var storeSingleton;
16100
- var TransactionStoreContext = createContext21(null);
14775
+ var TransactionStoreContext = createContext20(null);
16101
14776
  function TransactionStoreProvider({
16102
14777
  children
16103
14778
  }) {
16104
14779
  const provider = usePublicClient();
16105
14780
  const { address } = useAccount14();
16106
14781
  const chainId = useChainId();
16107
- const [store] = useState43(
14782
+ const [store] = useState42(
16108
14783
  () => storeSingleton != null ? storeSingleton : storeSingleton = createTransactionStore({ provider })
16109
14784
  );
16110
- useEffect33(() => {
14785
+ useEffect32(() => {
16111
14786
  store.setProvider(provider);
16112
14787
  }, [store, provider]);
16113
- useEffect33(() => {
14788
+ useEffect32(() => {
16114
14789
  if (address && chainId) {
16115
14790
  store.waitForPendingTransactions(address, chainId);
16116
14791
  }
16117
14792
  }, [store, address, chainId]);
16118
- return /* @__PURE__ */ React146.createElement(TransactionStoreContext.Provider, {
14793
+ return /* @__PURE__ */ React133.createElement(TransactionStoreContext.Provider, {
16119
14794
  value: store
16120
14795
  }, children);
16121
14796
  }
16122
14797
  function useTransactionStore() {
16123
- const store = useContext28(TransactionStoreContext);
14798
+ const store = useContext25(TransactionStoreContext);
16124
14799
  if (!store) {
16125
14800
  throw new Error("Transaction hooks must be used within FunkitProvider");
16126
14801
  }
@@ -16132,10 +14807,10 @@ function useRecentTransactions() {
16132
14807
  const store = useTransactionStore();
16133
14808
  const { address } = useAccount15();
16134
14809
  const chainId = useChainId();
16135
- const [transactions, setTransactions] = useState44(
14810
+ const [transactions, setTransactions] = useState43(
16136
14811
  () => store && address && chainId ? store.getTransactions(address, chainId) : []
16137
14812
  );
16138
- useEffect34(() => {
14813
+ useEffect33(() => {
16139
14814
  if (store && address && chainId) {
16140
14815
  setTransactions(store.getTransactions(address, chainId));
16141
14816
  return store.onChange(() => {
@@ -16147,8 +14822,8 @@ function useRecentTransactions() {
16147
14822
  }
16148
14823
 
16149
14824
  // src/components/FunkitProvider/ShowRecentTransactionsContext.ts
16150
- import { createContext as createContext22 } from "react";
16151
- var ShowRecentTransactionsContext = createContext22(false);
14825
+ import { createContext as createContext21 } from "react";
14826
+ var ShowRecentTransactionsContext = createContext21(false);
16152
14827
 
16153
14828
  // src/components/ConnectButton/abbreviateETHBalance.ts
16154
14829
  var units = ["k", "m", "b", "t"];
@@ -16198,7 +14873,7 @@ function ConnectButtonRenderer({
16198
14873
  const chainIconUrl = (_c = funkitConnectChain == null ? void 0 : funkitConnectChain.iconUrl) != null ? _c : void 0;
16199
14874
  const chainIconBackground = (_d = funkitConnectChain == null ? void 0 : funkitConnectChain.iconBackground) != null ? _d : void 0;
16200
14875
  const resolvedChainIconUrl = useAsyncImage(chainIconUrl);
16201
- const showRecentTransactions = useContext29(ShowRecentTransactionsContext);
14876
+ const showRecentTransactions = useContext26(ShowRecentTransactionsContext);
16202
14877
  const hasPendingTransactions = useRecentTransactions().some(({ status }) => status === "pending") && showRecentTransactions;
16203
14878
  const { showBalance } = useShowBalance();
16204
14879
  const computeShouldShowBalance = () => {
@@ -16219,7 +14894,7 @@ function ConnectButtonRenderer({
16219
14894
  const { openChainModal } = useChainModal();
16220
14895
  const { openAccountModal } = useAccountModal();
16221
14896
  const { accountModalOpen, chainModalOpen, connectModalOpen } = useModalState();
16222
- return /* @__PURE__ */ React147.createElement(React147.Fragment, null, children({
14897
+ return /* @__PURE__ */ React134.createElement(React134.Fragment, null, children({
16223
14898
  account: address ? {
16224
14899
  address,
16225
14900
  balanceDecimals: balanceData == null ? void 0 : balanceData.decimals,
@@ -16267,8 +14942,8 @@ function ChainSelectorButton({
16267
14942
  chain
16268
14943
  }) {
16269
14944
  var _a, _b;
16270
- const { i18n: i18n2 } = useContext30(I18nContext);
16271
- return /* @__PURE__ */ React148.createElement(Box, {
14945
+ const { i18n: i18n2 } = useContext27(I18nContext);
14946
+ return /* @__PURE__ */ React135.createElement(Box, {
16272
14947
  alignItems: "center",
16273
14948
  "aria-label": "Chain Selector",
16274
14949
  as: "button",
@@ -16294,37 +14969,37 @@ function ChainSelectorButton({
16294
14969
  testId: unsupportedChain ? "wrong-network-button" : "chain-button",
16295
14970
  transition: "default",
16296
14971
  type: "button"
16297
- }, unsupportedChain ? /* @__PURE__ */ React148.createElement(Box, {
14972
+ }, unsupportedChain ? /* @__PURE__ */ React135.createElement(Box, {
16298
14973
  alignItems: "center",
16299
14974
  display: "flex",
16300
14975
  height: "24",
16301
14976
  paddingX: "4"
16302
- }, i18n2.t("connect_wallet.wrong_network.label")) : /* @__PURE__ */ React148.createElement(Box, {
14977
+ }, i18n2.t("connect_wallet.wrong_network.label")) : /* @__PURE__ */ React135.createElement(Box, {
16303
14978
  alignItems: "center",
16304
14979
  display: "flex",
16305
14980
  gap: "6"
16306
- }, chain.hasIcon ? /* @__PURE__ */ React148.createElement(Box, {
14981
+ }, chain.hasIcon ? /* @__PURE__ */ React135.createElement(Box, {
16307
14982
  display: mapResponsiveValue(
16308
14983
  chainStatus,
16309
14984
  (value) => value === "full" || value === "icon" ? "block" : "none"
16310
14985
  ),
16311
14986
  height: "24",
16312
14987
  width: "24"
16313
- }, /* @__PURE__ */ React148.createElement(AsyncImage, {
14988
+ }, /* @__PURE__ */ React135.createElement(AsyncImage, {
16314
14989
  alt: (_a = chain.name) != null ? _a : "Chain icon",
16315
14990
  background: chain.iconBackground,
16316
14991
  borderRadius: "full",
16317
14992
  height: "24",
16318
14993
  src: chain.iconUrl,
16319
14994
  width: "24"
16320
- })) : null, /* @__PURE__ */ React148.createElement(Box, {
14995
+ })) : null, /* @__PURE__ */ React135.createElement(Box, {
16321
14996
  display: mapResponsiveValue(chainStatus, (value) => {
16322
14997
  if (value === "icon" && !chain.iconUrl) {
16323
14998
  return "block";
16324
14999
  }
16325
15000
  return value === "full" || value === "name" ? "block" : "none";
16326
15001
  })
16327
- }, (_b = chain.name) != null ? _b : chain.id)), /* @__PURE__ */ React148.createElement(DropdownIcon, null));
15002
+ }, (_b = chain.name) != null ? _b : chain.id)), /* @__PURE__ */ React135.createElement(DropdownIcon, null));
16328
15003
  }
16329
15004
  function AccountButton({
16330
15005
  openAccountModal,
@@ -16333,7 +15008,7 @@ function AccountButton({
16333
15008
  accountStatus
16334
15009
  }) {
16335
15010
  const { userInfo } = useGeneralWallet();
16336
- return /* @__PURE__ */ React148.createElement(Box, {
15011
+ return /* @__PURE__ */ React135.createElement(Box, {
16337
15012
  alignItems: "center",
16338
15013
  as: "button",
16339
15014
  background: "accentColor",
@@ -16351,14 +15026,14 @@ function AccountButton({
16351
15026
  testId: "account-button",
16352
15027
  transition: "default",
16353
15028
  type: "button"
16354
- }, account.displayBalance && /* @__PURE__ */ React148.createElement(Box, {
15029
+ }, account.displayBalance && /* @__PURE__ */ React135.createElement(Box, {
16355
15030
  display: mapResponsiveValue(
16356
15031
  showBalance,
16357
15032
  (value) => value ? "block" : "none"
16358
15033
  ),
16359
15034
  padding: "8",
16360
15035
  paddingLeft: "12"
16361
- }, account.displayBalance), /* @__PURE__ */ React148.createElement(Box, {
15036
+ }, account.displayBalance), /* @__PURE__ */ React135.createElement(Box, {
16362
15037
  background: "connectButtonInnerBackground",
16363
15038
  borderColor: "accentColor",
16364
15039
  borderRadius: "connectButton",
@@ -16370,32 +15045,32 @@ function AccountButton({
16370
15045
  paddingX: "8",
16371
15046
  paddingY: "6",
16372
15047
  transition: "default"
16373
- }, /* @__PURE__ */ React148.createElement(Box, {
15048
+ }, /* @__PURE__ */ React135.createElement(Box, {
16374
15049
  alignItems: "center",
16375
15050
  display: "flex",
16376
15051
  gap: "6",
16377
15052
  height: "24"
16378
- }, /* @__PURE__ */ React148.createElement(Box, {
15053
+ }, /* @__PURE__ */ React135.createElement(Box, {
16379
15054
  display: mapResponsiveValue(
16380
15055
  accountStatus,
16381
15056
  (value) => value === "full" || value === "avatar" ? "block" : "none"
16382
15057
  )
16383
- }, /* @__PURE__ */ React148.createElement(Avatar, {
15058
+ }, /* @__PURE__ */ React135.createElement(Avatar, {
16384
15059
  address: account.address,
16385
15060
  imageUrl: account.ensAvatar || userInfo.iconSrc,
16386
15061
  loading: account.hasPendingTransactions,
16387
15062
  size: 24
16388
- })), /* @__PURE__ */ React148.createElement(Box, {
15063
+ })), /* @__PURE__ */ React135.createElement(Box, {
16389
15064
  alignItems: "center",
16390
15065
  display: "flex",
16391
15066
  gap: "6"
16392
- }, /* @__PURE__ */ React148.createElement(Box, {
15067
+ }, /* @__PURE__ */ React135.createElement(Box, {
16393
15068
  display: mapResponsiveValue(
16394
15069
  accountStatus,
16395
15070
  (value) => value === "full" || value === "address" ? "block" : "none"
16396
15071
  ),
16397
15072
  style: { textWrap: "nowrap" }
16398
- }, userInfo.nameTruncated), /* @__PURE__ */ React148.createElement(DropdownIcon, null)))));
15073
+ }, userInfo.nameTruncated), /* @__PURE__ */ React135.createElement(DropdownIcon, null)))));
16399
15074
  }
16400
15075
  function ConnectButton({
16401
15076
  accountStatus = defaultProps.accountStatus,
@@ -16408,14 +15083,14 @@ function ConnectButton({
16408
15083
  const chains = useFunkitConnectChains();
16409
15084
  const connectionStatus = useConnectionStatus();
16410
15085
  const { setShowBalance } = useShowBalance();
16411
- const [ready, setReady] = useState45(false);
16412
- const { i18n: i18n2 } = useContext30(I18nContext);
16413
- useEffect35(() => {
15086
+ const [ready, setReady] = useState44(false);
15087
+ const { i18n: i18n2 } = useContext27(I18nContext);
15088
+ useEffect34(() => {
16414
15089
  setShowBalance(showBalance);
16415
15090
  if (!ready)
16416
15091
  setReady(true);
16417
15092
  }, [showBalance, setShowBalance, ready]);
16418
- return ready ? /* @__PURE__ */ React148.createElement(ConnectButtonRenderer, null, ({
15093
+ return ready ? /* @__PURE__ */ React135.createElement(ConnectButtonRenderer, null, ({
16419
15094
  account,
16420
15095
  chain,
16421
15096
  mounted,
@@ -16426,7 +15101,7 @@ function ConnectButton({
16426
15101
  var _a;
16427
15102
  const ready2 = mounted && connectionStatus !== "loading";
16428
15103
  const unsupportedChain = (_a = chain == null ? void 0 : chain.unsupported) != null ? _a : false;
16429
- return /* @__PURE__ */ React148.createElement(Box, {
15104
+ return /* @__PURE__ */ React135.createElement(Box, {
16430
15105
  display: "flex",
16431
15106
  gap: "12",
16432
15107
  ...!ready2 && {
@@ -16437,17 +15112,17 @@ function ConnectButton({
16437
15112
  userSelect: "none"
16438
15113
  }
16439
15114
  }
16440
- }, ready2 && account && connectionStatus === "connected" ? /* @__PURE__ */ React148.createElement(React148.Fragment, null, showChainSelector && chain && (chains.length > 1 || unsupportedChain) && /* @__PURE__ */ React148.createElement(ChainSelectorButton, {
15115
+ }, ready2 && account && connectionStatus === "connected" ? /* @__PURE__ */ React135.createElement(React135.Fragment, null, showChainSelector && chain && (chains.length > 1 || unsupportedChain) && /* @__PURE__ */ React135.createElement(ChainSelectorButton, {
16441
15116
  unsupportedChain,
16442
15117
  chainStatus,
16443
15118
  openChainModal,
16444
15119
  chain
16445
- }), !unsupportedChain && /* @__PURE__ */ React148.createElement(AccountButton, {
15120
+ }), !unsupportedChain && /* @__PURE__ */ React135.createElement(AccountButton, {
16446
15121
  openAccountModal,
16447
15122
  account,
16448
15123
  showBalance,
16449
15124
  accountStatus
16450
- })) : /* @__PURE__ */ React148.createElement(Box, {
15125
+ })) : /* @__PURE__ */ React135.createElement(Box, {
16451
15126
  as: "button",
16452
15127
  background: "accentColor",
16453
15128
  borderRadius: "connectButton",
@@ -16466,19 +15141,19 @@ function ConnectButton({
16466
15141
  testId: "connect-button",
16467
15142
  transition: "default",
16468
15143
  type: "button"
16469
- }, /* @__PURE__ */ React148.createElement(Box, {
15144
+ }, /* @__PURE__ */ React135.createElement(Box, {
16470
15145
  display: "flex",
16471
15146
  gap: "8",
16472
15147
  alignItems: "center"
16473
15148
  }, mounted && label === "Connect Wallet" ? i18n2.t("connect_wallet.label") : label, suffixIcon)));
16474
- }) : /* @__PURE__ */ React148.createElement(React148.Fragment, null);
15149
+ }) : /* @__PURE__ */ React135.createElement(React135.Fragment, null);
16475
15150
  }
16476
15151
  ConnectButton.__defaultProps = defaultProps;
16477
15152
  ConnectButton.Custom = ConnectButtonRenderer;
16478
15153
 
16479
15154
  // src/components/FunkitProvider/FunkitProvider.tsx
16480
15155
  import { QueryClientProvider } from "@tanstack/react-query";
16481
- import React149, { createContext as createContext23, useContext as useContext31 } from "react";
15156
+ import React139, { createContext as createContext23, useContext as useContext28 } from "react";
16482
15157
  import { useAccountEffect as useAccountEffect3, WagmiProvider } from "wagmi";
16483
15158
 
16484
15159
  // src/config/getDefaultConfig.ts
@@ -16501,6 +15176,11 @@ var computeWalletConnectMetaData = ({
16501
15176
  };
16502
15177
  };
16503
15178
 
15179
+ // src/utils/colors.ts
15180
+ var isHexString = (color) => {
15181
+ return /^#([0-9a-f]{3}){1,2}$/i.test(color);
15182
+ };
15183
+
16504
15184
  // src/utils/omitUndefinedValues.ts
16505
15185
  function omitUndefinedValues(obj) {
16506
15186
  return Object.fromEntries(
@@ -17288,26 +15968,47 @@ function validateFunkitProviderProps(props) {
17288
15968
  validateTheme(props);
17289
15969
  }
17290
15970
 
15971
+ // src/components/FunkitProvider/AppContext.ts
15972
+ import { createContext as createContext22 } from "react";
15973
+ var defaultAppInfo = {
15974
+ appName: void 0,
15975
+ disclaimer: void 0,
15976
+ learnMoreUrl: "https://learn.rainbow.me/understanding-web3?utm_source=rainbowkit&utm_campaign=learnmore"
15977
+ };
15978
+ var AppContext = createContext22(defaultAppInfo);
15979
+
17291
15980
  // src/components/FunkitProvider/useFingerprint.ts
17292
- import { useCallback as useCallback33, useEffect as useEffect36 } from "react";
15981
+ import { useCallback as useCallback33, useEffect as useEffect35 } from "react";
17293
15982
  var storageKey6 = "funkit-connect-version";
17294
15983
  function setFunkitConnectVersion({ version }) {
17295
15984
  localStorage.setItem(storageKey6, version);
17296
15985
  }
17297
15986
  function getCurrentSdkVersion() {
17298
- return "1.4.1";
15987
+ return "1.5.0-next.0";
17299
15988
  }
17300
15989
  function useFingerprint() {
17301
15990
  const fingerprint = useCallback33(() => {
17302
15991
  setFunkitConnectVersion({ version: getCurrentSdkVersion() });
17303
15992
  }, []);
17304
- useEffect36(() => {
15993
+ useEffect35(() => {
17305
15994
  fingerprint();
17306
15995
  }, [fingerprint]);
17307
15996
  }
17308
15997
 
17309
15998
  // src/components/FunkitProvider/usePreloadImages.ts
17310
- import { useCallback as useCallback34, useEffect as useEffect37 } from "react";
15999
+ import { useCallback as useCallback34, useEffect as useEffect36 } from "react";
16000
+
16001
+ // src/components/Icons/Assets.tsx
16002
+ import React137 from "react";
16003
+ var src = async () => (await import("./assets-26YY4GVD.js")).default;
16004
+ var preloadAssetsIcon = () => loadImages(src);
16005
+
16006
+ // src/components/Icons/Login.tsx
16007
+ import React138 from "react";
16008
+ var src2 = async () => (await import("./login-ZSMM5UYL.js")).default;
16009
+ var preloadLoginIcon = () => loadImages(src2);
16010
+
16011
+ // src/components/FunkitProvider/usePreloadImages.ts
17311
16012
  function usePreloadImages() {
17312
16013
  const funkitConnectChains = useFunkitConnectChains();
17313
16014
  const walletConnectors = useWalletConnectors();
@@ -17325,7 +16026,7 @@ function usePreloadImages() {
17325
16026
  loadImages(signInIcon);
17326
16027
  }
17327
16028
  }, [walletConnectors, funkitConnectChains, isUnauthenticated]);
17328
- useEffect37(() => {
16029
+ useEffect36(() => {
17329
16030
  preloadImages();
17330
16031
  }, [preloadImages]);
17331
16032
  }
@@ -17359,9 +16060,9 @@ function FunkitProvider(props) {
17359
16060
  !!props.debug,
17360
16061
  getCurrentSdkVersion()
17361
16062
  );
17362
- const MainChild = /* @__PURE__ */ React149.createElement(FunkitThemeProvider, {
16063
+ const MainChild = /* @__PURE__ */ React139.createElement(FunkitThemeProvider, {
17363
16064
  theme: props.theme
17364
- }, /* @__PURE__ */ React149.createElement(FunkitProviderInner, {
16065
+ }, /* @__PURE__ */ React139.createElement(FunkitProviderInner, {
17365
16066
  appInfo: props.appInfo,
17366
16067
  avatar: props.avatar,
17367
16068
  id: props.id,
@@ -17372,9 +16073,9 @@ function FunkitProvider(props) {
17372
16073
  sandbox: props.sandbox,
17373
16074
  modalSize: props.modalSize
17374
16075
  }, props.children));
17375
- return finalWagmiConfig && finalQueryClient ? /* @__PURE__ */ React149.createElement(WagmiProvider, {
16076
+ return finalWagmiConfig && finalQueryClient ? /* @__PURE__ */ React139.createElement(WagmiProvider, {
17376
16077
  config: finalWagmiConfig
17377
- }, /* @__PURE__ */ React149.createElement(QueryClientProvider, {
16078
+ }, /* @__PURE__ */ React139.createElement(QueryClientProvider, {
17378
16079
  client: finalQueryClient
17379
16080
  }, MainChild)) : MainChild;
17380
16081
  }
@@ -17404,35 +16105,35 @@ function FunkitProviderInner({
17404
16105
  const modalSizeFinal = modalSize || ModalSizeOptions.WIDE;
17405
16106
  const coolMode = false;
17406
16107
  const showRecentTransactions = false;
17407
- return /* @__PURE__ */ React149.createElement(FunkitConfigContext.Provider, {
16108
+ return /* @__PURE__ */ React139.createElement(FunkitConfigContext.Provider, {
17408
16109
  value: funkitConfig
17409
- }, /* @__PURE__ */ React149.createElement(FunkitConnectChainProvider, {
16110
+ }, /* @__PURE__ */ React139.createElement(FunkitConnectChainProvider, {
17410
16111
  initialChain
17411
- }, /* @__PURE__ */ React149.createElement(WalletButtonProvider, null, /* @__PURE__ */ React149.createElement(I18nProvider, {
16112
+ }, /* @__PURE__ */ React139.createElement(WalletButtonProvider, null, /* @__PURE__ */ React139.createElement(I18nProvider, {
17412
16113
  locale
17413
- }, /* @__PURE__ */ React149.createElement(CoolModeContext.Provider, {
16114
+ }, /* @__PURE__ */ React139.createElement(CoolModeContext.Provider, {
17414
16115
  value: coolMode
17415
- }, /* @__PURE__ */ React149.createElement(ModalSizeProvider, {
16116
+ }, /* @__PURE__ */ React139.createElement(ModalSizeProvider, {
17416
16117
  modalSize: modalSizeFinal
17417
- }, /* @__PURE__ */ React149.createElement(FunkitWeb2Provider, null, /* @__PURE__ */ React149.createElement(GeneralWalletProvider, null, /* @__PURE__ */ React149.createElement(FunkitCheckoutProvider, null, /* @__PURE__ */ React149.createElement(ShowRecentTransactionsContext.Provider, {
16118
+ }, /* @__PURE__ */ React139.createElement(FunkitWeb2Provider, null, /* @__PURE__ */ React139.createElement(GeneralWalletProvider, null, /* @__PURE__ */ React139.createElement(FunkitCheckoutProvider, null, /* @__PURE__ */ React139.createElement(ShowRecentTransactionsContext.Provider, {
17418
16119
  value: showRecentTransactions
17419
- }, /* @__PURE__ */ React149.createElement(FunkitSandboxContext.Provider, {
16120
+ }, /* @__PURE__ */ React139.createElement(FunkitSandboxContext.Provider, {
17420
16121
  value: isSandboxMode
17421
- }, /* @__PURE__ */ React149.createElement(FunkitMeshProvider, null, /* @__PURE__ */ React149.createElement(TransactionStoreProvider, null, /* @__PURE__ */ React149.createElement(AvatarContext.Provider, {
16122
+ }, /* @__PURE__ */ React139.createElement(FunkitMeshProvider, null, /* @__PURE__ */ React139.createElement(TransactionStoreProvider, null, /* @__PURE__ */ React139.createElement(AvatarContext.Provider, {
17422
16123
  value: avatarContext
17423
- }, /* @__PURE__ */ React149.createElement(AppContext.Provider, {
16124
+ }, /* @__PURE__ */ React139.createElement(AppContext.Provider, {
17424
16125
  value: appContext
17425
- }, /* @__PURE__ */ React149.createElement(ThemeIdContext2.Provider, {
16126
+ }, /* @__PURE__ */ React139.createElement(ThemeIdContext2.Provider, {
17426
16127
  value: id
17427
- }, /* @__PURE__ */ React149.createElement(ShowBalanceProvider, null, /* @__PURE__ */ React149.createElement(FunToastProvider, null, /* @__PURE__ */ React149.createElement(FunkitMoonpayProvider, {
16128
+ }, /* @__PURE__ */ React139.createElement(ShowBalanceProvider, null, /* @__PURE__ */ React139.createElement(FunToastProvider, null, /* @__PURE__ */ React139.createElement(FunkitMoonpayProvider, {
17428
16129
  debug: !!debug
17429
- }, /* @__PURE__ */ React149.createElement(ModalProvider, null, activeTheme ? /* @__PURE__ */ React149.createElement("div", {
16130
+ }, /* @__PURE__ */ React139.createElement(ModalProvider, null, activeTheme ? /* @__PURE__ */ React139.createElement("div", {
17430
16131
  ...createThemeRootProps2(id),
17431
16132
  style: {
17432
16133
  width: "100%",
17433
16134
  height: "100%"
17434
16135
  }
17435
- }, /* @__PURE__ */ React149.createElement("style", {
16136
+ }, /* @__PURE__ */ React139.createElement("style", {
17436
16137
  dangerouslySetInnerHTML: {
17437
16138
  __html: [
17438
16139
  `${selector}{${cssStringFromTheme(
@@ -17444,18 +16145,18 @@ function FunkitProviderInner({
17444
16145
  }
17445
16146
 
17446
16147
  // src/components/WalletButton/WalletButton.tsx
17447
- import React151, { useContext as useContext33 } from "react";
16148
+ import React141, { useContext as useContext30 } from "react";
17448
16149
 
17449
16150
  // src/components/WalletButton/WalletButton.css.ts
17450
16151
  var border = "_85s11r0";
17451
16152
  var maxWidth = "_85s11r1";
17452
16153
 
17453
16154
  // src/components/WalletButton/WalletButtonRenderer.tsx
17454
- import React150, {
17455
- useContext as useContext32,
17456
- useEffect as useEffect38,
16155
+ import React140, {
16156
+ useContext as useContext29,
16157
+ useEffect as useEffect37,
17457
16158
  useMemo as useMemo36,
17458
- useState as useState46
16159
+ useState as useState45
17459
16160
  } from "react";
17460
16161
  import { useAccount as useAccount17, useAccountEffect as useAccountEffect4 } from "wagmi";
17461
16162
  function WalletButtonRenderer({
@@ -17465,16 +16166,16 @@ function WalletButtonRenderer({
17465
16166
  const isMounted = useIsMounted();
17466
16167
  const { openConnectModal } = useConnectModal();
17467
16168
  const { connectModalOpen } = useModalState();
17468
- const { connector, setConnector } = useContext32(WalletButtonContext);
16169
+ const { connector, setConnector } = useContext29(WalletButtonContext);
17469
16170
  const [firstConnector] = useWalletConnectors().filter((wallet2) => wallet2.isFunkitSdkConnector).filter((_wallet) => _wallet.id.toLowerCase() === wallet.toLowerCase()).sort((a, b) => a.groupIndex - b.groupIndex);
17470
16171
  if (!firstConnector) {
17471
16172
  throw new Error("Connector not found");
17472
16173
  }
17473
16174
  const connectionStatus = useConnectionStatus();
17474
- const [loading, setLoading] = useState46(false);
17475
- const [isError, setIsError] = useState46(false);
16175
+ const [loading, setLoading] = useState45(false);
16176
+ const [isError, setIsError] = useState45(false);
17476
16177
  const mobile = isMobile();
17477
- useEffect38(() => {
16178
+ useEffect37(() => {
17478
16179
  if (!connectModalOpen && connector)
17479
16180
  setConnector(null);
17480
16181
  }, [connectModalOpen, connector, setConnector]);
@@ -17511,7 +16212,7 @@ function WalletButtonRenderer({
17511
16212
  const isStatusLoading = connectionStatus === "loading";
17512
16213
  const ready = !isConnecting && !!openConnectModal && firstConnector && !isStatusLoading;
17513
16214
  const isNotSupported = !(firstConnector == null ? void 0 : firstConnector.installed) || !(firstConnector == null ? void 0 : firstConnector.ready);
17514
- return /* @__PURE__ */ React150.createElement(React150.Fragment, null, children({
16215
+ return /* @__PURE__ */ React140.createElement(React140.Fragment, null, children({
17515
16216
  error: isError,
17516
16217
  loading,
17517
16218
  connected: isLastWalletIdConnected,
@@ -17532,15 +16233,15 @@ function WalletButtonRenderer({
17532
16233
 
17533
16234
  // src/components/WalletButton/WalletButton.tsx
17534
16235
  var WalletButton = ({ wallet }) => {
17535
- const { i18n: i18n2 } = useContext33(I18nContext);
17536
- return /* @__PURE__ */ React151.createElement(WalletButtonRenderer, {
16236
+ const { i18n: i18n2 } = useContext30(I18nContext);
16237
+ return /* @__PURE__ */ React141.createElement(WalletButtonRenderer, {
17537
16238
  wallet
17538
16239
  }, ({ ready, connect, connected, mounted, connector, loading }) => {
17539
16240
  const isDisabled = !ready || loading;
17540
16241
  const connectorName = (connector == null ? void 0 : connector.name) || "";
17541
16242
  if (!mounted)
17542
16243
  return;
17543
- return /* @__PURE__ */ React151.createElement(Box, {
16244
+ return /* @__PURE__ */ React141.createElement(Box, {
17544
16245
  display: "flex",
17545
16246
  flexDirection: "column",
17546
16247
  alignItems: "center",
@@ -17548,7 +16249,7 @@ var WalletButton = ({ wallet }) => {
17548
16249
  style: {
17549
16250
  pointerEvents: isDisabled ? "none" : "all"
17550
16251
  }
17551
- }, /* @__PURE__ */ React151.createElement(Box, {
16252
+ }, /* @__PURE__ */ React141.createElement(Box, {
17552
16253
  as: "button",
17553
16254
  borderRadius: "menuButton",
17554
16255
  borderStyle: "solid",
@@ -17570,7 +16271,7 @@ var WalletButton = ({ wallet }) => {
17570
16271
  transition: "default",
17571
16272
  width: "full",
17572
16273
  background: "connectButtonBackground"
17573
- }, /* @__PURE__ */ React151.createElement(Box, {
16274
+ }, /* @__PURE__ */ React141.createElement(Box, {
17574
16275
  color: "modalText",
17575
16276
  fontFamily: "body",
17576
16277
  fontSize: "16",
@@ -17578,28 +16279,28 @@ var WalletButton = ({ wallet }) => {
17578
16279
  transition: "default",
17579
16280
  display: "flex",
17580
16281
  alignItems: "center"
17581
- }, /* @__PURE__ */ React151.createElement(Box, {
16282
+ }, /* @__PURE__ */ React141.createElement(Box, {
17582
16283
  alignItems: "center",
17583
16284
  display: "flex",
17584
16285
  flexDirection: "row",
17585
16286
  gap: "12",
17586
16287
  paddingRight: "6"
17587
- }, /* @__PURE__ */ React151.createElement(Box, null, loading ? /* @__PURE__ */ React151.createElement(SpinnerIcon, null) : /* @__PURE__ */ React151.createElement(AsyncImage, {
16288
+ }, /* @__PURE__ */ React141.createElement(Box, null, loading ? /* @__PURE__ */ React141.createElement(SpinnerIcon, null) : /* @__PURE__ */ React141.createElement(AsyncImage, {
17588
16289
  background: connector == null ? void 0 : connector.iconBackground,
17589
16290
  borderRadius: "6",
17590
16291
  height: "28",
17591
16292
  src: connector == null ? void 0 : connector.iconUrl,
17592
16293
  width: "28"
17593
- })), /* @__PURE__ */ React151.createElement(Box, {
16294
+ })), /* @__PURE__ */ React141.createElement(Box, {
17594
16295
  alignItems: "center",
17595
16296
  display: "flex",
17596
16297
  flexDirection: "column",
17597
16298
  color: "modalText"
17598
- }, /* @__PURE__ */ React151.createElement(Box, {
16299
+ }, /* @__PURE__ */ React141.createElement(Box, {
17599
16300
  testId: `wallet-button-label-${(connector == null ? void 0 : connector.id) || ""}`
17600
16301
  }, loading ? i18n2.t("connect.status.connecting", {
17601
16302
  wallet: connectorName
17602
- }) : connectorName)), connected ? /* @__PURE__ */ React151.createElement(Box, {
16303
+ }) : connectorName)), connected ? /* @__PURE__ */ React141.createElement(Box, {
17603
16304
  background: "connectionIndicator",
17604
16305
  borderColor: "selectedOptionBorder",
17605
16306
  borderRadius: "full",
@@ -17636,608 +16337,218 @@ function getDefaultWallets(parameters) {
17636
16337
  };
17637
16338
  }
17638
16339
 
17639
- // src/components/ConnectOptions/MobileOptions.tsx
17640
- import React152, {
17641
- useCallback as useCallback35,
17642
- useContext as useContext34,
17643
- useEffect as useEffect39,
17644
- useRef as useRef12,
17645
- useState as useState47
17646
- } from "react";
17647
-
17648
- // src/components/ConnectOptions/MobileOptions.css.ts
17649
- var rotatingBorder = "_1dcc7392";
17650
- var scroll = "_1dcc7390";
17651
- var spinner = "_1dcc7393";
17652
-
17653
- // src/components/ConnectOptions/MobileOptions.tsx
17654
- var LoadingSpinner = ({ wallet }) => {
17655
- const width = 80;
17656
- const height = 80;
17657
- const radiusFactor = 20;
17658
- const perimeter = 2 * (width + height - 4 * radiusFactor);
17659
- return /* @__PURE__ */ React152.createElement("svg", {
17660
- className: spinner,
17661
- viewBox: "0 0 86 86",
17662
- width: "86",
17663
- height: "86"
17664
- }, /* @__PURE__ */ React152.createElement("title", null, "Loading"), /* @__PURE__ */ React152.createElement("rect", {
17665
- x: "3",
17666
- y: "3",
17667
- width,
17668
- height,
17669
- rx: radiusFactor,
17670
- ry: radiusFactor,
17671
- strokeDasharray: `${perimeter / 3} ${2 * perimeter / 3}`,
17672
- strokeDashoffset: perimeter,
17673
- className: rotatingBorder,
17674
- style: {
17675
- stroke: (wallet == null ? void 0 : wallet.iconAccent) || "#0D3887"
17676
- }
17677
- }));
17678
- };
17679
- function WalletButton2({
17680
- onClose,
17681
- wallet,
17682
- connecting
17683
- }) {
17684
- const {
17685
- connect,
17686
- iconBackground,
17687
- iconUrl,
17688
- id,
17689
- name,
17690
- getMobileUri,
17691
- ready,
17692
- shortName,
17693
- showWalletConnectModal
17694
- } = wallet;
17695
- const coolModeRef = useCoolMode(iconUrl);
17696
- const initialized = useRef12(false);
17697
- const { i18n: i18n2 } = useContext34(I18nContext);
17698
- const onConnect = useCallback35(async () => {
17699
- const onMobileUri = async () => {
17700
- const mobileUri = await (getMobileUri == null ? void 0 : getMobileUri());
17701
- if (!mobileUri)
17702
- return;
17703
- if (mobileUri) {
17704
- setWalletConnectDeepLink({ mobileUri, name });
17705
- }
17706
- if (mobileUri.startsWith("http")) {
17707
- const link = document.createElement("a");
17708
- link.href = mobileUri;
17709
- link.target = "_blank";
17710
- link.rel = "noreferrer noopener";
17711
- link.click();
17712
- } else {
17713
- window.location.href = mobileUri;
17714
- }
17715
- };
17716
- if (id !== "walletConnect")
17717
- onMobileUri();
17718
- if (showWalletConnectModal) {
17719
- showWalletConnectModal();
17720
- onClose == null ? void 0 : onClose();
17721
- return;
17722
- }
17723
- connect == null ? void 0 : connect();
17724
- }, [connect, getMobileUri, showWalletConnectModal, onClose, name, id]);
17725
- useEffect39(() => {
17726
- if (connecting && !initialized.current) {
17727
- onConnect();
17728
- initialized.current = true;
17729
- }
17730
- }, [connecting, onConnect]);
17731
- return /* @__PURE__ */ React152.createElement(Box, {
17732
- as: "button",
17733
- color: ready ? "modalText" : "modalTextSecondary",
17734
- disabled: !ready,
17735
- fontFamily: "body",
17736
- key: id,
17737
- onClick: onConnect,
17738
- ref: coolModeRef,
17739
- style: { overflow: "visible", textAlign: "center" },
17740
- testId: `wallet-option-${id}`,
17741
- type: "button",
17742
- width: "full"
17743
- }, /* @__PURE__ */ React152.createElement(Box, {
17744
- alignItems: "center",
17745
- display: "flex",
17746
- flexDirection: "column",
17747
- justifyContent: "center"
17748
- }, /* @__PURE__ */ React152.createElement(Box, {
17749
- display: "flex",
17750
- alignItems: "center",
17751
- justifyContent: "center",
17752
- paddingBottom: "8",
17753
- paddingTop: "10",
17754
- position: "relative"
17755
- }, connecting ? /* @__PURE__ */ React152.createElement(LoadingSpinner, {
17756
- wallet
17757
- }) : null, /* @__PURE__ */ React152.createElement(AsyncImage, {
17758
- background: iconBackground,
17759
- borderRadius: "13",
17760
- boxShadow: "walletLogo",
17761
- height: "60",
17762
- src: iconUrl,
17763
- width: "60"
17764
- })), !connecting ? /* @__PURE__ */ React152.createElement(Box, {
17765
- display: "flex",
17766
- flexDirection: "column",
17767
- textAlign: "center"
17768
- }, /* @__PURE__ */ React152.createElement(Text, {
17769
- as: "h2",
17770
- color: wallet.ready ? "modalText" : "modalTextSecondary",
17771
- size: "13",
17772
- weight: "medium"
17773
- }, /* @__PURE__ */ React152.createElement(Box, {
17774
- as: "span",
17775
- position: "relative"
17776
- }, shortName != null ? shortName : name, !wallet.ready && " (unsupported)")), wallet.recent && /* @__PURE__ */ React152.createElement(Text, {
17777
- color: "accentColor",
17778
- size: "12",
17779
- weight: "medium"
17780
- }, i18n2.t("connect.recent"))) : null));
17781
- }
17782
- function MobileOptions({ onClose }) {
17783
- var _a;
17784
- const titleId = "rk_connect_title";
17785
- const wallets = useWalletConnectors().filter(
17786
- (wallet) => wallet.isFunkitSdkConnector
17787
- );
17788
- const { disclaimer: Disclaimer, learnMoreUrl } = useContext34(AppContext);
17789
- let headerLabel = null;
17790
- let walletContent = null;
17791
- let headerBackgroundContrast = false;
17792
- let headerBackButtonLink = null;
17793
- const [walletStep, setWalletStep] = useState47(
17794
- "CONNECT" /* Connect */
17795
- );
17796
- const { i18n: i18n2 } = useContext34(I18nContext);
17797
- const ios = isIOS();
17798
- switch (walletStep) {
17799
- case "CONNECT" /* Connect */: {
17800
- headerLabel = i18n2.t("connect.title");
17801
- headerBackgroundContrast = true;
17802
- walletContent = /* @__PURE__ */ React152.createElement(Box, null, /* @__PURE__ */ React152.createElement(Box, {
17803
- background: "profileForeground",
17804
- className: scroll,
17805
- display: "flex",
17806
- paddingBottom: "20",
17807
- paddingTop: "6"
17808
- }, /* @__PURE__ */ React152.createElement(Box, {
17809
- display: "flex",
17810
- style: { margin: "0 auto" }
17811
- }, wallets.filter((wallet) => wallet.ready).map((wallet) => {
17812
- return /* @__PURE__ */ React152.createElement(Box, {
17813
- key: wallet.id,
17814
- paddingX: "20"
17815
- }, /* @__PURE__ */ React152.createElement(Box, {
17816
- width: "60"
17817
- }, /* @__PURE__ */ React152.createElement(WalletButton2, {
17818
- onClose,
17819
- wallet
17820
- })));
17821
- }))), /* @__PURE__ */ React152.createElement(Box, {
17822
- background: "generalBorder",
17823
- height: "1",
17824
- marginBottom: "32",
17825
- marginTop: "-1"
17826
- }), /* @__PURE__ */ React152.createElement(Box, {
17827
- alignItems: "center",
17828
- display: "flex",
17829
- flexDirection: "column",
17830
- gap: "32",
17831
- paddingX: "32",
17832
- style: { textAlign: "center" }
17833
- }, /* @__PURE__ */ React152.createElement(Box, {
17834
- display: "flex",
17835
- flexDirection: "column",
17836
- gap: "8",
17837
- textAlign: "center"
17838
- }, /* @__PURE__ */ React152.createElement(Text, {
17839
- color: "modalText",
17840
- size: "16",
17841
- weight: "bold"
17842
- }, i18n2.t("intro.title")), /* @__PURE__ */ React152.createElement(Text, {
17843
- color: "modalTextSecondary",
17844
- size: "16"
17845
- }, i18n2.t("intro.description")))), /* @__PURE__ */ React152.createElement(Box, {
17846
- paddingTop: "32",
17847
- paddingX: "20"
17848
- }, /* @__PURE__ */ React152.createElement(Box, {
17849
- display: "flex",
17850
- gap: "14",
17851
- justifyContent: "center"
17852
- }, /* @__PURE__ */ React152.createElement(ActionButton, {
17853
- label: i18n2.t("intro.get.label"),
17854
- onClick: () => setWalletStep("GET" /* Get */),
17855
- size: "large",
17856
- type: "secondary"
17857
- }), /* @__PURE__ */ React152.createElement(ActionButton, {
17858
- href: learnMoreUrl,
17859
- label: i18n2.t("intro.learn_more.label"),
17860
- size: "large",
17861
- type: "secondary"
17862
- }))), Disclaimer && /* @__PURE__ */ React152.createElement(Box, {
17863
- marginTop: "28",
17864
- marginX: "32",
17865
- textAlign: "center"
17866
- }, /* @__PURE__ */ React152.createElement(Disclaimer, {
17867
- Link: DisclaimerLink,
17868
- Text: DisclaimerText
17869
- })));
17870
- break;
17871
- }
17872
- case "GET" /* Get */: {
17873
- headerLabel = i18n2.t("get.title");
17874
- headerBackButtonLink = "CONNECT" /* Connect */;
17875
- const mobileWallets = (_a = wallets == null ? void 0 : wallets.filter(
17876
- (wallet) => {
17877
- var _a2, _b, _c;
17878
- return ((_a2 = wallet.downloadUrls) == null ? void 0 : _a2.ios) || ((_b = wallet.downloadUrls) == null ? void 0 : _b.android) || ((_c = wallet.downloadUrls) == null ? void 0 : _c.mobile);
17879
- }
17880
- )) == null ? void 0 : _a.splice(0, 3);
17881
- walletContent = /* @__PURE__ */ React152.createElement(Box, null, /* @__PURE__ */ React152.createElement(Box, {
17882
- alignItems: "center",
17883
- display: "flex",
17884
- flexDirection: "column",
17885
- height: "full",
17886
- marginBottom: "36",
17887
- marginTop: "5",
17888
- paddingTop: "12",
17889
- width: "full"
17890
- }, mobileWallets.map((wallet, index) => {
17891
- const { downloadUrls, iconBackground, iconUrl, name } = wallet;
17892
- if (!(downloadUrls == null ? void 0 : downloadUrls.ios) && !(downloadUrls == null ? void 0 : downloadUrls.android) && !(downloadUrls == null ? void 0 : downloadUrls.mobile)) {
17893
- return null;
17894
- }
17895
- return /* @__PURE__ */ React152.createElement(Box, {
17896
- display: "flex",
17897
- gap: "16",
17898
- key: wallet.id,
17899
- paddingX: "20",
17900
- width: "full"
17901
- }, /* @__PURE__ */ React152.createElement(Box, {
17902
- style: { minHeight: 48, minWidth: 48 }
17903
- }, /* @__PURE__ */ React152.createElement(AsyncImage, {
17904
- background: iconBackground,
17905
- borderColor: "generalBorder",
17906
- borderRadius: "10",
17907
- height: "48",
17908
- src: iconUrl,
17909
- width: "48"
17910
- })), /* @__PURE__ */ React152.createElement(Box, {
17911
- display: "flex",
17912
- flexDirection: "column",
17913
- width: "full"
17914
- }, /* @__PURE__ */ React152.createElement(Box, {
17915
- alignItems: "center",
17916
- display: "flex",
17917
- height: "48"
17918
- }, /* @__PURE__ */ React152.createElement(Box, {
17919
- width: "full"
17920
- }, /* @__PURE__ */ React152.createElement(Text, {
17921
- color: "modalText",
17922
- size: "18",
17923
- weight: "bold"
17924
- }, name)), /* @__PURE__ */ React152.createElement(ActionButton, {
17925
- href: (ios ? downloadUrls == null ? void 0 : downloadUrls.ios : downloadUrls == null ? void 0 : downloadUrls.android) || (downloadUrls == null ? void 0 : downloadUrls.mobile),
17926
- label: i18n2.t("get.action.label"),
17927
- size: "small",
17928
- type: "secondary"
17929
- })), index < mobileWallets.length - 1 && /* @__PURE__ */ React152.createElement(Box, {
17930
- background: "generalBorderDim",
17931
- height: "1",
17932
- marginY: "10",
17933
- width: "full"
17934
- })));
17935
- })), /* @__PURE__ */ React152.createElement(Box, {
17936
- style: { marginBottom: "42px" }
17937
- }), /* @__PURE__ */ React152.createElement(Box, {
17938
- alignItems: "center",
17939
- display: "flex",
17940
- flexDirection: "column",
17941
- gap: "36",
17942
- paddingX: "36",
17943
- style: { textAlign: "center" }
17944
- }, /* @__PURE__ */ React152.createElement(Box, {
17945
- display: "flex",
17946
- flexDirection: "column",
17947
- gap: "12",
17948
- textAlign: "center"
17949
- }, /* @__PURE__ */ React152.createElement(Text, {
17950
- color: "modalText",
17951
- size: "16",
17952
- weight: "bold"
17953
- }, i18n2.t("get.looking_for.title")), /* @__PURE__ */ React152.createElement(Text, {
17954
- color: "modalTextSecondary",
17955
- size: "16"
17956
- }, i18n2.t("get.looking_for.mobile.description")))));
17957
- break;
17958
- }
17959
- }
17960
- return /* @__PURE__ */ React152.createElement(Box, {
17961
- display: "flex",
17962
- flexDirection: "column",
17963
- paddingBottom: "36"
17964
- }, /* @__PURE__ */ React152.createElement(Box, {
17965
- background: headerBackgroundContrast ? "profileForeground" : "modalBackground",
17966
- display: "flex",
17967
- flexDirection: "column",
17968
- paddingBottom: "4",
17969
- paddingTop: "14"
17970
- }, /* @__PURE__ */ React152.createElement(Box, {
17971
- display: "flex",
17972
- justifyContent: "center",
17973
- paddingBottom: "6",
17974
- paddingX: "20",
17975
- position: "relative"
17976
- }, headerBackButtonLink && /* @__PURE__ */ React152.createElement(Box, {
17977
- display: "flex",
17978
- position: "absolute",
17979
- style: {
17980
- left: 0,
17981
- marginBottom: -20,
17982
- marginTop: -20
17983
- }
17984
- }, /* @__PURE__ */ React152.createElement(Box, {
17985
- alignItems: "center",
17986
- as: "button",
17987
- className: touchableStyles({
17988
- active: "shrinkSm",
17989
- hover: "growLg"
17990
- }),
17991
- color: "accentColor",
17992
- display: "flex",
17993
- marginLeft: "4",
17994
- marginTop: "20",
17995
- onClick: () => setWalletStep(headerBackButtonLink),
17996
- padding: "16",
17997
- style: { height: 17, willChange: "transform" },
17998
- transition: "default",
17999
- type: "button"
18000
- }, /* @__PURE__ */ React152.createElement(BackIcon, null))), /* @__PURE__ */ React152.createElement(Box, {
18001
- marginTop: "4",
18002
- textAlign: "center",
18003
- width: "full"
18004
- }, /* @__PURE__ */ React152.createElement(Text, {
18005
- as: "h1",
18006
- color: "modalText",
18007
- id: titleId,
18008
- size: "20",
18009
- weight: "bold"
18010
- }, headerLabel)), /* @__PURE__ */ React152.createElement(Box, {
18011
- alignItems: "center",
18012
- display: "flex",
18013
- height: "32",
18014
- paddingRight: "14",
18015
- position: "absolute",
18016
- right: "0"
18017
- }, /* @__PURE__ */ React152.createElement(Box, {
18018
- style: { marginBottom: -20, marginTop: -20 }
18019
- }, /* @__PURE__ */ React152.createElement(CloseButton, {
18020
- onClose
18021
- }))))), /* @__PURE__ */ React152.createElement(Box, {
18022
- display: "flex",
18023
- flexDirection: "column"
18024
- }, walletContent));
18025
- }
18026
-
18027
16340
  // src/__private__/index.ts
18028
16341
  var __private__ = {
18029
- DesktopOptions,
18030
16342
  dialogContent,
18031
- dialogContentMobile,
18032
- MobileOptions
16343
+ dialogContentMobile
18033
16344
  };
18034
16345
 
18035
16346
  // src/components/Icons/FunkitPaymentsIconLine.tsx
18036
- import React153 from "react";
16347
+ import React142 from "react";
18037
16348
  function MetaMaskPaymentIcon({ size = 16 }) {
18038
- return /* @__PURE__ */ React153.createElement("svg", {
16349
+ return /* @__PURE__ */ React142.createElement("svg", {
18039
16350
  width: size,
18040
16351
  height: size,
18041
16352
  viewBox: "0 0 28 28",
18042
16353
  fill: "none",
18043
16354
  xmlns: "http://www.w3.org/2000/svg"
18044
- }, /* @__PURE__ */ React153.createElement("path", {
16355
+ }, /* @__PURE__ */ React142.createElement("path", {
18045
16356
  d: "M24.0891 3.1199L15.3446 9.61456L16.9617 5.7828L24.0891 3.1199Z",
18046
16357
  fill: "#E2761B",
18047
16358
  stroke: "#E2761B",
18048
16359
  strokeWidth: "0.0878845",
18049
16360
  strokeLinecap: "round",
18050
16361
  strokeLinejoin: "round"
18051
- }), /* @__PURE__ */ React153.createElement("path", {
16362
+ }), /* @__PURE__ */ React142.createElement("path", {
18052
16363
  d: "M3.90207 3.1199L12.5763 9.67608L11.0383 5.7828L3.90207 3.1199Z",
18053
16364
  fill: "#E4761B",
18054
16365
  stroke: "#E4761B",
18055
16366
  strokeWidth: "0.0878845",
18056
16367
  strokeLinecap: "round",
18057
16368
  strokeLinejoin: "round"
18058
- }), /* @__PURE__ */ React153.createElement("path", {
16369
+ }), /* @__PURE__ */ React142.createElement("path", {
18059
16370
  d: "M20.9429 18.1745L18.6139 21.7426L23.597 23.1136L25.0295 18.2536L20.9429 18.1745Z",
18060
16371
  fill: "#E4761B",
18061
16372
  stroke: "#E4761B",
18062
16373
  strokeWidth: "0.0878845",
18063
16374
  strokeLinecap: "round",
18064
16375
  strokeLinejoin: "round"
18065
- }), /* @__PURE__ */ React153.createElement("path", {
16376
+ }), /* @__PURE__ */ React142.createElement("path", {
18066
16377
  d: "M2.97929 18.2536L4.40301 23.1136L9.38607 21.7426L7.05713 18.1745L2.97929 18.2536Z",
18067
16378
  fill: "#E4761B",
18068
16379
  stroke: "#E4761B",
18069
16380
  strokeWidth: "0.0878845",
18070
16381
  strokeLinecap: "round",
18071
16382
  strokeLinejoin: "round"
18072
- }), /* @__PURE__ */ React153.createElement("path", {
16383
+ }), /* @__PURE__ */ React142.createElement("path", {
18073
16384
  d: "M9.10483 12.1456L7.71626 14.2461L12.6642 14.4658L12.4884 9.14877L9.10483 12.1456Z",
18074
16385
  fill: "#E4761B",
18075
16386
  stroke: "#E4761B",
18076
16387
  strokeWidth: "0.0878845",
18077
16388
  strokeLinecap: "round",
18078
16389
  strokeLinejoin: "round"
18079
- }), /* @__PURE__ */ React153.createElement("path", {
16390
+ }), /* @__PURE__ */ React142.createElement("path", {
18080
16391
  d: "M18.8864 12.1456L15.4589 9.08725L15.3446 14.4658L20.2837 14.2461L18.8864 12.1456Z",
18081
16392
  fill: "#E4761B",
18082
16393
  stroke: "#E4761B",
18083
16394
  strokeWidth: "0.0878845",
18084
16395
  strokeLinecap: "round",
18085
16396
  strokeLinejoin: "round"
18086
- }), /* @__PURE__ */ React153.createElement("path", {
16397
+ }), /* @__PURE__ */ React142.createElement("path", {
18087
16398
  d: "M9.38606 21.7426L12.3566 20.2925L9.79033 18.2888L9.38606 21.7426Z",
18088
16399
  fill: "#E4761B",
18089
16400
  stroke: "#E4761B",
18090
16401
  strokeWidth: "0.0878845",
18091
16402
  strokeLinecap: "round",
18092
16403
  strokeLinejoin: "round"
18093
- }), /* @__PURE__ */ React153.createElement("path", {
16404
+ }), /* @__PURE__ */ React142.createElement("path", {
18094
16405
  d: "M15.6347 20.2925L18.6139 21.7426L18.2009 18.2888L15.6347 20.2925Z",
18095
16406
  fill: "#E4761B",
18096
16407
  stroke: "#E4761B",
18097
16408
  strokeWidth: "0.0878845",
18098
16409
  strokeLinecap: "round",
18099
16410
  strokeLinejoin: "round"
18100
- }), /* @__PURE__ */ React153.createElement("path", {
16411
+ }), /* @__PURE__ */ React142.createElement("path", {
18101
16412
  d: "M18.6139 21.7426L15.6347 20.2925L15.8719 22.2348L15.8456 23.0521L18.6139 21.7426Z",
18102
16413
  fill: "#D7C1B3",
18103
16414
  stroke: "#D7C1B3",
18104
16415
  strokeWidth: "0.0878845",
18105
16416
  strokeLinecap: "round",
18106
16417
  strokeLinejoin: "round"
18107
- }), /* @__PURE__ */ React153.createElement("path", {
16418
+ }), /* @__PURE__ */ React142.createElement("path", {
18108
16419
  d: "M9.38606 21.7426L12.1544 23.0521L12.1368 22.2348L12.3566 20.2925L9.38606 21.7426Z",
18109
16420
  fill: "#D7C1B3",
18110
16421
  stroke: "#D7C1B3",
18111
16422
  strokeWidth: "0.0878845",
18112
16423
  strokeLinecap: "round",
18113
16424
  strokeLinejoin: "round"
18114
- }), /* @__PURE__ */ React153.createElement("path", {
16425
+ }), /* @__PURE__ */ React142.createElement("path", {
18115
16426
  d: "M12.1984 17.0056L9.72002 16.2762L11.4689 15.4765L12.1984 17.0056Z",
18116
16427
  fill: "#233447",
18117
16428
  stroke: "#233447",
18118
16429
  strokeWidth: "0.0878845",
18119
16430
  strokeLinecap: "round",
18120
16431
  strokeLinejoin: "round"
18121
- }), /* @__PURE__ */ React153.createElement("path", {
16432
+ }), /* @__PURE__ */ React142.createElement("path", {
18122
16433
  d: "M15.7928 17.0056L16.5223 15.4765L18.28 16.2762L15.7928 17.0056Z",
18123
16434
  fill: "#233447",
18124
16435
  stroke: "#233447",
18125
16436
  strokeWidth: "0.0878845",
18126
16437
  strokeLinecap: "round",
18127
16438
  strokeLinejoin: "round"
18128
- }), /* @__PURE__ */ React153.createElement("path", {
16439
+ }), /* @__PURE__ */ React142.createElement("path", {
18129
16440
  d: "M9.38606 21.7426L9.80791 18.1745L7.05712 18.2536L9.38606 21.7426Z",
18130
16441
  fill: "#CD6116",
18131
16442
  stroke: "#CD6116",
18132
16443
  strokeWidth: "0.0878845",
18133
16444
  strokeLinecap: "round",
18134
16445
  strokeLinejoin: "round"
18135
- }), /* @__PURE__ */ React153.createElement("path", {
16446
+ }), /* @__PURE__ */ React142.createElement("path", {
18136
16447
  d: "M18.1921 18.1745L18.6139 21.7426L20.9429 18.2536L18.1921 18.1745Z",
18137
16448
  fill: "#CD6116",
18138
16449
  stroke: "#CD6116",
18139
16450
  strokeWidth: "0.0878845",
18140
16451
  strokeLinecap: "round",
18141
16452
  strokeLinejoin: "round"
18142
- }), /* @__PURE__ */ React153.createElement("path", {
16453
+ }), /* @__PURE__ */ React142.createElement("path", {
18143
16454
  d: "M20.2837 14.2461L15.3446 14.4658L15.8016 17.0057L16.5311 15.4765L18.2888 16.2762L20.2837 14.2461Z",
18144
16455
  fill: "#CD6116",
18145
16456
  stroke: "#CD6116",
18146
16457
  strokeWidth: "0.0878845",
18147
16458
  strokeLinecap: "round",
18148
16459
  strokeLinejoin: "round"
18149
- }), /* @__PURE__ */ React153.createElement("path", {
16460
+ }), /* @__PURE__ */ React142.createElement("path", {
18150
16461
  d: "M9.72002 16.2762L11.4777 15.4765L12.1984 17.0057L12.6642 14.4658L7.71626 14.2461L9.72002 16.2762Z",
18151
16462
  fill: "#CD6116",
18152
16463
  stroke: "#CD6116",
18153
16464
  strokeWidth: "0.0878845",
18154
16465
  strokeLinecap: "round",
18155
16466
  strokeLinejoin: "round"
18156
- }), /* @__PURE__ */ React153.createElement("path", {
16467
+ }), /* @__PURE__ */ React142.createElement("path", {
18157
16468
  d: "M7.71626 14.2461L9.79033 18.2888L9.72002 16.2762L7.71626 14.2461Z",
18158
16469
  fill: "#E4751F",
18159
16470
  stroke: "#E4751F",
18160
16471
  strokeWidth: "0.0878845",
18161
16472
  strokeLinecap: "round",
18162
16473
  strokeLinejoin: "round"
18163
- }), /* @__PURE__ */ React153.createElement("path", {
16474
+ }), /* @__PURE__ */ React142.createElement("path", {
18164
16475
  d: "M18.2888 16.2762L18.2009 18.2888L20.2837 14.2461L18.2888 16.2762Z",
18165
16476
  fill: "#E4751F",
18166
16477
  stroke: "#E4751F",
18167
16478
  strokeWidth: "0.0878845",
18168
16479
  strokeLinecap: "round",
18169
16480
  strokeLinejoin: "round"
18170
- }), /* @__PURE__ */ React153.createElement("path", {
16481
+ }), /* @__PURE__ */ React142.createElement("path", {
18171
16482
  d: "M12.6642 14.4658L12.1984 17.0057L12.7784 20.0025L12.9102 16.0565L12.6642 14.4658Z",
18172
16483
  fill: "#E4751F",
18173
16484
  stroke: "#E4751F",
18174
16485
  strokeWidth: "0.0878845",
18175
16486
  strokeLinecap: "round",
18176
16487
  strokeLinejoin: "round"
18177
- }), /* @__PURE__ */ React153.createElement("path", {
16488
+ }), /* @__PURE__ */ React142.createElement("path", {
18178
16489
  d: "M15.3446 14.4658L15.1073 16.0477L15.2128 20.0025L15.8016 17.0057L15.3446 14.4658Z",
18179
16490
  fill: "#E4751F",
18180
16491
  stroke: "#E4751F",
18181
16492
  strokeWidth: "0.0878845",
18182
16493
  strokeLinecap: "round",
18183
16494
  strokeLinejoin: "round"
18184
- }), /* @__PURE__ */ React153.createElement("path", {
16495
+ }), /* @__PURE__ */ React142.createElement("path", {
18185
16496
  d: "M15.8016 17.0056L15.2128 20.0025L15.6347 20.2925L18.2009 18.2888L18.2888 16.2762L15.8016 17.0056Z",
18186
16497
  fill: "#F6851B",
18187
16498
  stroke: "#F6851B",
18188
16499
  strokeWidth: "0.0878845",
18189
16500
  strokeLinecap: "round",
18190
16501
  strokeLinejoin: "round"
18191
- }), /* @__PURE__ */ React153.createElement("path", {
16502
+ }), /* @__PURE__ */ React142.createElement("path", {
18192
16503
  d: "M9.72002 16.2762L9.79033 18.2888L12.3566 20.2925L12.7784 20.0025L12.1984 17.0056L9.72002 16.2762Z",
18193
16504
  fill: "#F6851B",
18194
16505
  stroke: "#F6851B",
18195
16506
  strokeWidth: "0.0878845",
18196
16507
  strokeLinecap: "round",
18197
16508
  strokeLinejoin: "round"
18198
- }), /* @__PURE__ */ React153.createElement("path", {
16509
+ }), /* @__PURE__ */ React142.createElement("path", {
18199
16510
  d: "M15.8456 23.0521L15.8719 22.2348L15.6522 22.0414H12.339L12.1368 22.2348L12.1544 23.0521L9.38606 21.7426L10.3528 22.5336L12.3126 23.8958H15.6786L17.6472 22.5336L18.6139 21.7426L15.8456 23.0521Z",
18200
16511
  fill: "#C0AD9E",
18201
16512
  stroke: "#C0AD9E",
18202
16513
  strokeWidth: "0.0878845",
18203
16514
  strokeLinecap: "round",
18204
16515
  strokeLinejoin: "round"
18205
- }), /* @__PURE__ */ React153.createElement("path", {
16516
+ }), /* @__PURE__ */ React142.createElement("path", {
18206
16517
  d: "M15.6347 20.2925L15.2128 20.0025H12.7784L12.3566 20.2925L12.1368 22.2348L12.339 22.0414H15.6522L15.8719 22.2348L15.6347 20.2925Z",
18207
16518
  fill: "#161616",
18208
16519
  stroke: "#161616",
18209
16520
  strokeWidth: "0.0878845",
18210
16521
  strokeLinecap: "round",
18211
16522
  strokeLinejoin: "round"
18212
- }), /* @__PURE__ */ React153.createElement("path", {
16523
+ }), /* @__PURE__ */ React142.createElement("path", {
18213
16524
  d: "M24.4583 10.0364L25.2053 6.45072L24.0891 3.1199L15.6347 9.39485L18.8864 12.1456L23.4827 13.4903L24.5022 12.3038L24.0628 11.9874L24.7658 11.3459L24.221 10.924L24.924 10.3879L24.4583 10.0364Z",
18214
16525
  fill: "#763D16",
18215
16526
  stroke: "#763D16",
18216
16527
  strokeWidth: "0.0878845",
18217
16528
  strokeLinecap: "round",
18218
16529
  strokeLinejoin: "round"
18219
- }), /* @__PURE__ */ React153.createElement("path", {
16530
+ }), /* @__PURE__ */ React142.createElement("path", {
18220
16531
  d: "M2.79472 6.45072L3.54174 10.0364L3.06717 10.3879L3.77024 10.924L3.23415 11.3459L3.93722 11.9874L3.4978 12.3038L4.50847 13.4903L9.10483 12.1456L12.3566 9.39485L3.90207 3.1199L2.79472 6.45072Z",
18221
16532
  fill: "#763D16",
18222
16533
  stroke: "#763D16",
18223
16534
  strokeWidth: "0.0878845",
18224
16535
  strokeLinecap: "round",
18225
16536
  strokeLinejoin: "round"
18226
- }), /* @__PURE__ */ React153.createElement("path", {
16537
+ }), /* @__PURE__ */ React142.createElement("path", {
18227
16538
  d: "M23.4827 13.4903L18.8864 12.1456L20.2837 14.2461L18.2009 18.2888L20.9429 18.2536H25.0295L23.4827 13.4903Z",
18228
16539
  fill: "#F6851B",
18229
16540
  stroke: "#F6851B",
18230
16541
  strokeWidth: "0.0878845",
18231
16542
  strokeLinecap: "round",
18232
16543
  strokeLinejoin: "round"
18233
- }), /* @__PURE__ */ React153.createElement("path", {
16544
+ }), /* @__PURE__ */ React142.createElement("path", {
18234
16545
  d: "M9.10484 12.1456L4.50848 13.4903L2.97929 18.2536H7.05713L9.79033 18.2888L7.71626 14.2461L9.10484 12.1456Z",
18235
16546
  fill: "#F6851B",
18236
16547
  stroke: "#F6851B",
18237
16548
  strokeWidth: "0.0878845",
18238
16549
  strokeLinecap: "round",
18239
16550
  strokeLinejoin: "round"
18240
- }), /* @__PURE__ */ React153.createElement("path", {
16551
+ }), /* @__PURE__ */ React142.createElement("path", {
18241
16552
  d: "M15.3446 14.4658L15.6347 9.39485L16.9705 5.7828H11.0383L12.3566 9.39485L12.6642 14.4658L12.7696 16.0653L12.7784 20.0025H15.2128L15.2304 16.0653L15.3446 14.4658Z",
18242
16553
  fill: "#F6851B",
18243
16554
  stroke: "#F6851B",
@@ -18247,29 +16558,29 @@ function MetaMaskPaymentIcon({ size = 16 }) {
18247
16558
  }));
18248
16559
  }
18249
16560
  function MastercardPaymentIcon({ size = 16 }) {
18250
- return /* @__PURE__ */ React153.createElement("svg", {
16561
+ return /* @__PURE__ */ React142.createElement("svg", {
18251
16562
  xmlns: "http://www.w3.org/2000/svg",
18252
16563
  height: size,
18253
16564
  viewBox: "0 0 152.407 108"
18254
- }, /* @__PURE__ */ React153.createElement("g", null, /* @__PURE__ */ React153.createElement("rect", {
16565
+ }, /* @__PURE__ */ React142.createElement("g", null, /* @__PURE__ */ React142.createElement("rect", {
18255
16566
  width: "152.407",
18256
16567
  height: "108",
18257
16568
  fill: "transparent"
18258
- }), /* @__PURE__ */ React153.createElement("g", null, /* @__PURE__ */ React153.createElement("rect", {
16569
+ }), /* @__PURE__ */ React142.createElement("g", null, /* @__PURE__ */ React142.createElement("rect", {
18259
16570
  x: "60.4117",
18260
16571
  y: "25.6968",
18261
16572
  width: "31.5",
18262
16573
  height: "56.6064",
18263
16574
  fill: "#ff5f00"
18264
- }), /* @__PURE__ */ React153.createElement("path", {
16575
+ }), /* @__PURE__ */ React142.createElement("path", {
18265
16576
  d: "M382.20839,306a35.9375,35.9375,0,0,1,13.7499-28.3032,36,36,0,1,0,0,56.6064A35.938,35.938,0,0,1,382.20839,306Z",
18266
16577
  transform: "translate(-319.79649 -252)",
18267
16578
  fill: "#eb001b"
18268
- }), /* @__PURE__ */ React153.createElement("path", {
16579
+ }), /* @__PURE__ */ React142.createElement("path", {
18269
16580
  d: "M454.20349,306a35.99867,35.99867,0,0,1-58.2452,28.3032,36.00518,36.00518,0,0,0,0-56.6064A35.99867,35.99867,0,0,1,454.20349,306Z",
18270
16581
  transform: "translate(-319.79649 -252)",
18271
16582
  fill: "#f79e1b"
18272
- }), /* @__PURE__ */ React153.createElement("path", {
16583
+ }), /* @__PURE__ */ React142.createElement("path", {
18273
16584
  d: "M450.76889,328.3077v-1.1589h.4673v-.2361h-1.1901v.2361h.4675v1.1589Zm2.3105,0v-1.3973h-.3648l-.41959.9611-.41971-.9611h-.365v1.3973h.2576v-1.054l.3935.9087h.2671l.39351-.911v1.0563Z",
18274
16585
  transform: "translate(-319.79649 -252)",
18275
16586
  fill: "#f79e1b"
@@ -18279,29 +16590,29 @@ function FunkitPaymentsIconLine({
18279
16590
  size = 16,
18280
16591
  gap = "2"
18281
16592
  }) {
18282
- return /* @__PURE__ */ React153.createElement(Box, {
16593
+ return /* @__PURE__ */ React142.createElement(Box, {
18283
16594
  display: "flex",
18284
16595
  flexDirection: "row",
18285
16596
  gap,
18286
16597
  alignItems: "center",
18287
16598
  justifyContent: "center"
18288
- }, /* @__PURE__ */ React153.createElement(MetaMaskPaymentIcon, {
16599
+ }, /* @__PURE__ */ React142.createElement(MetaMaskPaymentIcon, {
18289
16600
  size
18290
- }), /* @__PURE__ */ React153.createElement(MastercardPaymentIcon, {
16601
+ }), /* @__PURE__ */ React142.createElement(MastercardPaymentIcon, {
18291
16602
  size
18292
- }), /* @__PURE__ */ React153.createElement(CoinbaseIcon, {
16603
+ }), /* @__PURE__ */ React142.createElement(CoinbaseIcon, {
18293
16604
  size
18294
16605
  }));
18295
16606
  }
18296
16607
 
18297
16608
  // src/transactions/useAddRecentTransaction.ts
18298
- import { useCallback as useCallback36 } from "react";
16609
+ import { useCallback as useCallback35 } from "react";
18299
16610
  import { useAccount as useAccount18 } from "wagmi";
18300
16611
  function useAddRecentTransaction() {
18301
16612
  const store = useTransactionStore();
18302
16613
  const { address } = useAccount18();
18303
16614
  const chainId = useChainId();
18304
- return useCallback36(
16615
+ return useCallback35(
18305
16616
  (transaction) => {
18306
16617
  if (!address || !chainId) {
18307
16618
  throw new Error("No address or chain ID found");