thirdweb 5.88.6 → 5.88.8-nightly-1fa36c1d56758788a8f9053f8929497bacb2b115-20250224233959

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/currencies.tsx

@@ -1,4 +1,6 @@
 import { RadiobuttonIcon } from "@radix-ui/react-icons";
+import type { SupportedFiatCurrency } from "../../../../../../../pay/convert/type.js";
+import { iconSize } from "../../../../../../core/design-system/index.js";
 import { CADIcon } from "../../../icons/currencies/CADIcon.js";
 import { EURIcon } from "../../../icons/currencies/EURIcon.js";
 import { GBPIcon } from "../../../icons/currencies/GBPIcon.js";
@@ -7,14 +9,16 @@ import { USDIcon } from "../../../icons/currencies/USDIcon.js";
 import type { IconFC } from "../../../icons/types.js";
 
 export type CurrencyMeta = {
-  shorthand: "USD" | "CAD" | "GBP" | "EUR" | "JPY";
+  shorthand: SupportedFiatCurrency;
+  countryCode: string;
   name: string;
   symbol: string;
-  icon: IconFC;
+  icon?: IconFC;
 };
 
 export const usdCurrency: CurrencyMeta = {
   shorthand: "USD",
+  countryCode: "US",
   name: "US Dollar",
   symbol: "$",
   icon: USDIcon,
@@ -24,28 +28,44 @@ export const currencies: CurrencyMeta[] = [
   usdCurrency,
   {
     shorthand: "CAD",
+    countryCode: "CA",
     name: "Canadian Dollar",
     symbol: "$",
     icon: CADIcon,
   },
   {
     shorthand: "GBP",
+    countryCode: "GB",
     name: "British Pound",
     symbol: "£",
     icon: GBPIcon,
   },
   {
     shorthand: "EUR",
+    countryCode: "EU",
     name: "Euro",
     symbol: "€",
     icon: EURIcon,
   },
   {
     shorthand: "JPY",
+    countryCode: "JP",
     name: "Japanese Yen",
     symbol: "¥",
     icon: JPYIcon,
   },
+  {
+    shorthand: "AUD",
+    countryCode: "AU",
+    name: "Australian Dollar",
+    symbol: "$",
+  },
+  {
+    shorthand: "NZD",
+    countryCode: "NZ",
+    name: "New Zealand Dollar",
+    symbol: "$",
+  },
 ];
 
 export function getCurrencyMeta(shorthand: string): CurrencyMeta {
@@ -56,6 +76,7 @@ export function getCurrencyMeta(shorthand: string): CurrencyMeta {
     ) ?? {
       // This should never happen
       icon: UnknownCurrencyIcon,
+      countryCode: "US",
       name: shorthand,
       symbol: "$",
       shorthand: shorthand as CurrencyMeta["shorthand"],
@@ -63,6 +84,21 @@ export function getCurrencyMeta(shorthand: string): CurrencyMeta {
   );
 }
 
+export function getFiatIcon(
+  currency: CurrencyMeta,
+  size: keyof typeof iconSize,
+): React.ReactNode {
+  return currency.icon ? (
+    <currency.icon size={iconSize[size]} />
+  ) : (
+    <img
+      src={`https://flagsapi.com/${currency.countryCode.toUpperCase()}/flat/64.png`}
+      alt={currency.shorthand}
+      width={iconSize[size]}
+      height={iconSize[size]}
+    />
+  );
+}
 const UnknownCurrencyIcon: IconFC = (props) => {
   return <RadiobuttonIcon width={props.size} height={props.size} />;
 };

package/src/react/web/ui/ConnectWallet/screens/Buy/main/types.ts

@@ -39,7 +39,6 @@ export type SelectedScreen =
   | {
       id: "fiat-flow";
       quote: BuyWithFiatQuote;
-      openedWindow: Window | null;
     }
   | {
       id: "transfer-flow";

package/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts

@@ -163,6 +163,16 @@ function getDefaultCurrencyBasedOnLocation(): CurrencyMeta["shorthand"] {
       return "CAD";
     }
 
+    // australia
+    if (timeZone.includes("australia")) {
+      return "AUD";
+    }
+
+    // new zealand
+    if (timeZone.includes("new zealand")) {
+      return "NZD";
+    }
+
     return "USD";
   } catch {
     return "USD";

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx

@@ -0,0 +1,55 @@
+import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
+import { Container } from "../../../../components/basic.js";
+
+export function StepConnectorArrow(props: {
+  active: boolean;
+}) {
+  const theme = useCustomTheme();
+  return (
+    <Container
+      flex="row"
+      center="both"
+      style={{
+        width: "100%",
+        height: "12px",
+        position: "relative",
+        marginTop: "-1px",
+        zIndex: 1000,
+      }}
+    >
+      <svg
+        role="presentation"
+        width="32"
+        height="16"
+        viewBox="0 0 32 16"
+        fill="none"
+        style={{
+          display: "block",
+        }}
+      >
+        <path
+          d="M1 0L16 15L31 0"
+          fill={theme.colors.tertiaryBg}
+          stroke={
+            props.active ? theme.colors.accentText : theme.colors.borderColor
+          }
+          strokeWidth="1"
+          strokeLinecap="square"
+          strokeLinejoin="miter"
+        />
+        <path
+          d="M8 0L16 7.5L24 0"
+          fill="none"
+          stroke={
+            props.active
+              ? theme.colors.accentText
+              : theme.colors.secondaryIconColor
+          }
+          strokeWidth="1"
+          strokeLinecap="square"
+          strokeLinejoin="miter"
+        />
+      </svg>
+    </Container>
+  );
+}

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapSummary.tsx

@@ -1,14 +1,11 @@
-import { ChevronDownIcon } from "@radix-ui/react-icons";
 import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
-import {
-  iconSize,
-  radius,
-} from "../../../../../../core/design-system/index.js";
+import { radius } from "../../../../../../core/design-system/index.js";
 import { Container } from "../../../../components/basic.js";
 import { TokenRow } from "../../../../components/token/TokenRow.js";
 import type { ERC20OrNativeToken } from "../../nativeToken.js";
+import { StepConnectorArrow } from "./StepConnector.js";
 import { WalletRow } from "./WalletRow.js";
 
 export function SwapSummary(props: {
@@ -36,23 +33,21 @@ export function SwapSummary(props: {
           border: `1px solid ${theme.colors.borderColor}`,
         }}
       >
-        {isDifferentRecipient && (
-          <Container
-            flex="row"
-            gap="sm"
-            p="sm"
-            style={{
-              borderBottom: `1px solid ${theme.colors.borderColor}`,
-            }}
-          >
-            <WalletRow
-              address={props.sender}
-              client={props.client}
-              iconSize="md"
-              textSize="sm"
-            />
-          </Container>
-        )}
+        <Container
+          flex="row"
+          gap="sm"
+          p="sm"
+          style={{
+            borderBottom: `1px solid ${theme.colors.borderColor}`,
+          }}
+        >
+          <WalletRow
+            address={props.sender}
+            client={props.client}
+            iconSize="md"
+            textSize="sm"
+          />
+        </Container>
         <TokenRow
           token={props.fromToken}
           chain={props.fromChain}
@@ -69,25 +64,7 @@ export function SwapSummary(props: {
         />
       </Container>
       {/* Connector Icon */}
-      <Container flex="row" center="both" py="xxs">
-        <Container flex="column" center="both">
-          <ChevronDownIcon
-            width={iconSize.md}
-            height={iconSize.md}
-            style={{
-              color: theme.colors.secondaryIconColor,
-            }}
-          />
-          <ChevronDownIcon
-            width={iconSize.md}
-            height={iconSize.md}
-            style={{
-              color: theme.colors.secondaryIconColor,
-              marginTop: "-17px",
-            }}
-          />
-        </Container>
-      </Container>
+      <StepConnectorArrow active={false} />
       {/* Buy */}
       <Container
         flex="column"

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/TokenSelectorScreen.tsx

@@ -69,6 +69,7 @@ export function TokenSelectorScreen(props: {
   onSelectToken: (wallet: Wallet, token: TokenInfo, chain: Chain) => void;
   onConnect: () => void;
   onPayWithFiat: () => void;
+  fiatSupported: boolean;
 }) {
   const connectedWallets = useConnectedWallets();
   const activeAccount = useActiveAccount();
@@ -255,29 +256,31 @@ export function TokenSelectorScreen(props: {
               </Text>
             </Container>
           </Button>
-          <Button
-            variant="secondary"
-            fullWidth
-            onClick={props.onPayWithFiat}
-            bg="tertiaryBg"
-            style={{
-              border: `1px solid ${theme.colors.borderColor}`,
-              padding: spacing.sm,
-            }}
-          >
-            <Container
-              flex="row"
-              gap="sm"
-              center="y"
-              expand
-              color="secondaryIconColor"
+          {props.fiatSupported && (
+            <Button
+              variant="secondary"
+              fullWidth
+              onClick={props.onPayWithFiat}
+              bg="tertiaryBg"
+              style={{
+                border: `1px solid ${theme.colors.borderColor}`,
+                padding: spacing.sm,
+              }}
             >
-              <CardStackIcon width={iconSize.md} height={iconSize.md} />
-              <Text size="sm" color="primaryText">
-                Pay with credit card
-              </Text>
-            </Container>
-          </Button>
+              <Container
+                flex="row"
+                gap="sm"
+                center="y"
+                expand
+                color="secondaryIconColor"
+              >
+                <CardStackIcon width={iconSize.md} height={iconSize.md} />
+                <Text size="sm" color="primaryText">
+                  Pay with credit card
+                </Text>
+              </Container>
+            </Button>
+          )}
         </Container>
       </Container>
     </Container>

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx

@@ -16,12 +16,14 @@ import { Skeleton } from "../../../../components/Skeleton.js";
 import { WalletImage } from "../../../../components/WalletImage.js";
 import { Container } from "../../../../components/basic.js";
 import { Text } from "../../../../components/text.js";
+import { OutlineWalletIcon } from "../../../icons/OutlineWalletIcon.js";
 
 export function WalletRow(props: {
   client: ThirdwebClient;
   address: string;
   iconSize?: keyof typeof iconSize;
   textSize?: keyof typeof fontSize;
+  label?: string;
 }) {
   const { client, address } = props;
   const connectedWallets = useConnectedWallets();
@@ -51,8 +53,15 @@ export function WalletRow(props: {
             size={iconSize[props.iconSize || "md"]}
             client={props.client}
           />
-        ) : null}
+        ) : (
+          <OutlineWalletIcon size={iconSize[props.iconSize || "md"]} />
+        )}
         <Container flex="column" gap="4xs">
+          {props.label ? (
+            <Text size="xs" color="secondaryText">
+              {props.label}
+            </Text>
+          ) : null}
           <Text size={props.textSize || "xs"} color="primaryText">
             {addressOrENS || shortenAddress(props.address)}
           </Text>

package/src/rpc/rpc.ts

@@ -218,7 +218,7 @@ export function getRpcClient(
         reject = reject_;
       });
       inflightRequests.set(requestKey, promise);
-      // @ts-expect-error - they *are* definitely assgined within the promise constructor
+      // @ts-expect-error - they *are* definitely assigned within the promise constructor
       pendingBatch.push({ request, resolve, reject, requestKey });
       if (batchSize > 1) {
         // if there is no timeout, set one

package/src/storage/upload/mobile.ts

@@ -41,7 +41,7 @@ export async function uploadBatchMobile(
             "Request to upload timed out! No upload progress received in 30s",
           ),
         );
-      }, 30000);
+      }, client.config?.storage?.fetch?.requestTimeoutMs ?? 30000);
 
       xhr.upload.addEventListener("progress", (event) => {
         clearTimeout(timer);

package/src/storage/upload/web-node.ts

@@ -17,6 +17,7 @@ export async function uploadBatch<const TFiles extends UploadableFile[]>(
       method: "POST",
       headers,
       body: form,
+      requestTimeoutMs: client.config?.storage?.fetch?.requestTimeoutMs,
     },
   );
 

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.88.6";
+export const version = "5.88.8-nightly-1fa36c1d56758788a8f9053f8929497bacb2b115-20250224233959";

package/src/wallets/in-app/web/ecosystem.ts

@@ -39,7 +39,7 @@ import { createInAppWallet } from "../core/wallet/in-app-core.js";
  *
  * ### Connect to a restricted ecosystem wallet with your designated partner ID
  *
- * The parnter ID will be provided to you by the ecosystem with which you're integrating.
+ * The partner ID will be provided to you by the ecosystem with which you're integrating.
  *
  * ```ts
  * import { ecosystemWallet } from "thirdweb/wallets";

package/src/wallets/in-app/web/lib/iframe-wallet.ts

@@ -203,7 +203,7 @@ export class IFrameWallet implements IWebWallet {
       };
 
       if (tx.maxFeePerGas) {
-        // ethers (in the iframe) rejects any type 0 trasaction with unknown keys
+        // ethers (in the iframe) rejects any type 0 transaction with unknown keys
         // TODO remove this once iframe is upgraded to v5
         transaction.accessList = tx.accessList;
         transaction.maxFeePerGas = tx.maxFeePerGas;

package/dist/cjs/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatFlow.js

@@ -1,63 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FiatFlow = FiatFlow;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const pay_js_1 = require("../../../../../../../analytics/track/pay.js");
-const getStatus_js_1 = require("../../../../../../../pay/buyWithFiat/getStatus.js");
-const isSwapRequiredPostOnramp_js_1 = require("../../../../../../../pay/buyWithFiat/isSwapRequiredPostOnramp.js");
-const openOnRamppopup_js_1 = require("../openOnRamppopup.js");
-const pendingSwapTx_js_1 = require("../swap/pendingSwapTx.js");
-const FiatStatusScreen_js_1 = require("./FiatStatusScreen.js");
-const FiatSteps_js_1 = require("./FiatSteps.js");
-const PostOnRampSwapFlow_js_1 = require("./PostOnRampSwapFlow.js");
-function FiatFlow(props) {
-    const hasTwoSteps = (0, isSwapRequiredPostOnramp_js_1.isSwapRequiredPostOnramp)(props.quote);
-    const [screen, setScreen] = (0, react_1.useState)(hasTwoSteps
-        ? {
-            id: "step-1",
-        }
-        : {
-            id: "onramp-status",
-        });
-    const [popupWindow, setPopupWindow] = (0, react_1.useState)(props.openedWindow);
-    const onPostOnrampSuccess = (0, react_1.useCallback)(() => {
-        // report the status of fiat status instead of post onramp swap status when post onramp swap is successful
-        (0, getStatus_js_1.getBuyWithFiatStatus)({
-            intentId: props.quote.intentId,
-            client: props.client,
-        }).then((status) => {
-            props.onSuccess(status);
-        });
-    }, [props.onSuccess, props.quote.intentId, props.client]);
-    if (screen.id === "step-1") {
-        return ((0, jsx_runtime_1.jsx)(FiatSteps_js_1.FiatSteps, { title: props.title, client: props.client, onBack: props.onBack, partialQuote: (0, FiatSteps_js_1.fiatQuoteToPartialQuote)(props.quote), step: 1, onContinue: () => {
-                const popup = (0, openOnRamppopup_js_1.openOnrampPopup)(props.quote.onRampLink, props.theme);
-                (0, pay_js_1.trackPayEvent)({
-                    event: "open_onramp_popup",
-                    client: props.client,
-                    walletAddress: props.payer.account.address,
-                    walletType: props.payer.wallet.id,
-                });
-                (0, pendingSwapTx_js_1.addPendingTx)({
-                    type: "fiat",
-                    intentId: props.quote.intentId,
-                });
-                setPopupWindow(popup);
-                setScreen({ id: "onramp-status" });
-            } }));
-    }
-    if (screen.id === "onramp-status") {
-        return ((0, jsx_runtime_1.jsx)(FiatStatusScreen_js_1.OnrampStatusScreen, { title: props.title, client: props.client, intentId: props.quote.intentId, onBack: props.onBack, hasTwoSteps: hasTwoSteps, openedWindow: popupWindow, quote: props.quote, onDone: props.onDone, onShowSwapFlow: (_status) => {
-                setScreen({ id: "postonramp-swap", data: _status });
-            }, transactionMode: props.transactionMode, isEmbed: props.isEmbed, onSuccess: props.onSuccess }));
-    }
-    if (screen.id === "postonramp-swap") {
-        return ((0, jsx_runtime_1.jsx)(PostOnRampSwapFlow_js_1.PostOnRampSwapFlow, { title: props.title, status: screen.data, quote: (0, FiatSteps_js_1.fiatQuoteToPartialQuote)(props.quote), client: props.client, onBack: props.onBack, onDone: props.onDone, onSwapFlowStarted: () => {
-                // no op
-            }, transactionMode: props.transactionMode, isEmbed: props.isEmbed, payer: props.payer, onSuccess: onPostOnrampSuccess }));
-    }
-    // never
-    return null;
-}
-//# sourceMappingURL=FiatFlow.js.map

package/dist/cjs/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatFlow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FiatFlow.js","sourceRoot":"","sources":["../../../../../../../../../src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatFlow.tsx"],"names":[],"mappings":";;AA0CA,4BA6GC;;AAvJD,iCAA8C;AAC9C,wEAA4E;AAG5E,oFAG2D;AAC3D,kHAA4G;AAC5G,8DAAwD;AACxD,+DAAwD;AAExD,+DAA2D;AAC3D,iDAAoE;AACpE,mEAA6D;AA4B7D,SAAgB,QAAQ,CAAC,KAaxB;IACC,MAAM,WAAW,GAAG,IAAA,sDAAwB,EAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAClC,WAAW;QACT,CAAC,CAAC;YACE,EAAE,EAAE,QAAQ;SACb;QACH,CAAC,CAAC;YACE,EAAE,EAAE,eAAe;SACpB,CACN,CAAC;IAEF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAC5C,KAAK,CAAC,YAAY,CACnB,CAAC;IAEF,MAAM,mBAAmB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC3C,0GAA0G;QAC1G,IAAA,mCAAoB,EAAC;YACnB,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ;YAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;SACrB,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;YACjB,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAE1D,IAAI,MAAM,CAAC,EAAE,KAAK,QAAQ,EAAE,CAAC;QAC3B,OAAO,CACL,uBAAC,wBAAS,IACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,YAAY,EAAE,IAAA,sCAAuB,EAAC,KAAK,CAAC,KAAK,CAAC,EAClD,IAAI,EAAE,CAAC,EACP,UAAU,EAAE,GAAG,EAAE;gBACf,MAAM,KAAK,GAAG,IAAA,oCAAe,EAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;gBACnE,IAAA,sBAAa,EAAC;oBACZ,KAAK,EAAE,mBAAmB;oBAC1B,MAAM,EAAE,KAAK,CAAC,MAAM;oBACpB,aAAa,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO;oBAC1C,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;iBAClC,CAAC,CAAC;gBACH,IAAA,+BAAY,EAAC;oBACX,IAAI,EAAE,MAAM;oBACZ,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ;iBAC/B,CAAC,CAAC;gBACH,cAAc,CAAC,KAAK,CAAC,CAAC;gBACtB,SAAS,CAAC,EAAE,EAAE,EAAE,eAAe,EAAE,CAAC,CAAC;YACrC,CAAC,GACD,CACH,CAAC;IACJ,CAAC;IAED,IAAI,MAAM,CAAC,EAAE,KAAK,eAAe,EAAE,CAAC;QAClC,OAAO,CACL,uBAAC,wCAAkB,IACjB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,EAC9B,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,WAAW,EACzB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,cAAc,EAAE,CAAC,OAAO,EAAE,EAAE;gBAC1B,SAAS,CAAC,EAAE,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;YACtD,CAAC,EACD,eAAe,EAAE,KAAK,CAAC,eAAe,EACtC,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,GAC1B,CACH,CAAC;IACJ,CAAC;IAED,IAAI,MAAM,CAAC,EAAE,KAAK,iBAAiB,EAAE,CAAC;QACpC,OAAO,CACL,uBAAC,0CAAkB,IACjB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,MAAM,CAAC,IAAI,EACnB,KAAK,EAAE,IAAA,sCAAuB,EAAC,KAAK,CAAC,KAAK,CAAC,EAC3C,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,iBAAiB,EAAE,GAAG,EAAE;gBACtB,QAAQ;YACV,CAAC,EACD,eAAe,EAAE,KAAK,CAAC,eAAe,EACtC,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,SAAS,EAAE,mBAAmB,GAC9B,CACH,CAAC;IACJ,CAAC;IAED,QAAQ;IACR,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/cjs/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatStatusScreen.js

@@ -1,116 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OnrampStatusScreen = OnrampStatusScreen;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_icons_1 = require("@radix-ui/react-icons");
-const react_query_1 = require("@tanstack/react-query");
-const react_1 = require("react");
-const isMobile_js_1 = require("../../../../../../../utils/web/isMobile.js");
-const index_js_1 = require("../../../../../../core/design-system/index.js");
-const useBuyWithFiatStatus_js_1 = require("../../../../../../core/hooks/pay/useBuyWithFiatStatus.js");
-const invalidateWalletBalance_js_1 = require("../../../../../../core/providers/invalidateWalletBalance.js");
-const Spacer_js_1 = require("../../../../components/Spacer.js");
-const Spinner_js_1 = require("../../../../components/Spinner.js");
-const StepBar_js_1 = require("../../../../components/StepBar.js");
-const basic_js_1 = require("../../../../components/basic.js");
-const buttons_js_1 = require("../../../../components/buttons.js");
-const text_js_1 = require("../../../../components/text.js");
-const AccentFailIcon_js_1 = require("../../../icons/AccentFailIcon.js");
-const statusMeta_js_1 = require("../pay-transactions/statusMeta.js");
-const FiatTxDetailsTable_js_1 = require("./FiatTxDetailsTable.js");
-/**
- * Poll for "Buy with Fiat" status - when the on-ramp is in progress
- * - Show success screen if swap is not required and on-ramp is completed
- * - Show Failed screen if on-ramp failed
- * - call `onShowSwapFlow` if on-ramp is completed and swap is required
- */
-function OnrampStatusScreen(props) {
-    const queryClient = (0, react_query_1.useQueryClient)();
-    const { openedWindow, onSuccess } = props;
-    const statusQuery = (0, useBuyWithFiatStatus_js_1.useBuyWithFiatStatus)({
-        intentId: props.intentId,
-        client: props.client,
-    });
-    // determine UI status
-    let uiStatus = "loading";
-    if (statusQuery.data?.status === "ON_RAMP_TRANSFER_FAILED" ||
-        statusQuery.data?.status === "PAYMENT_FAILED") {
-        uiStatus = "failed";
-    }
-    else if (statusQuery.data?.status === "CRYPTO_SWAP_FALLBACK") {
-        uiStatus = "partialSuccess";
-    }
-    else if (statusQuery.data?.status === "ON_RAMP_TRANSFER_COMPLETED") {
-        uiStatus = "completed";
-    }
-    const purchaseCbCalled = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
-        if (purchaseCbCalled.current || !onSuccess) {
-            return;
-        }
-        if (statusQuery.data?.status === "ON_RAMP_TRANSFER_COMPLETED") {
-            purchaseCbCalled.current = true;
-            onSuccess(statusQuery.data);
-        }
-    }, [onSuccess, statusQuery.data]);
-    // close the onramp popup if onramp is completed
-    (0, react_1.useEffect)(() => {
-        if (!openedWindow || !statusQuery.data) {
-            return;
-        }
-        if (statusQuery.data?.status === "CRYPTO_SWAP_REQUIRED" ||
-            statusQuery.data?.status === "ON_RAMP_TRANSFER_COMPLETED") {
-            openedWindow.close();
-        }
-    }, [statusQuery.data, openedWindow]);
-    // invalidate wallet balance when onramp is completed
-    const invalidatedBalance = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
-        if (!invalidatedBalance.current &&
-            statusQuery.data?.status === "ON_RAMP_TRANSFER_COMPLETED") {
-            invalidatedBalance.current = true;
-            (0, invalidateWalletBalance_js_1.invalidateWalletBalance)(queryClient);
-        }
-    }, [statusQuery.data, queryClient]);
-    // show swap flow
-    (0, react_1.useEffect)(() => {
-        if (statusQuery.data?.status === "CRYPTO_SWAP_REQUIRED") {
-            props.onShowSwapFlow(statusQuery.data);
-        }
-    }, [statusQuery.data, props.onShowSwapFlow]);
-    return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { p: "lg", children: [(0, jsx_runtime_1.jsx)(basic_js_1.ModalHeader, { title: props.title, onBack: props.onBack }), props.hasTwoSteps && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), (0, jsx_runtime_1.jsx)(StepBar_js_1.StepBar, { steps: 2, currentStep: 1 }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "sm" }), (0, jsx_runtime_1.jsxs)(text_js_1.Text, { size: "xs", children: ["Step 1 of 2 - Buying ", props.quote.onRampToken.token.symbol, " with", " ", props.quote.fromCurrencyWithFees.currencySymbol] })] })), (0, jsx_runtime_1.jsx)(OnrampStatusScreenUI, { uiStatus: uiStatus, onDone: props.onDone, fiatStatus: statusQuery.data, client: props.client, transactionMode: props.transactionMode, quote: props.quote, isEmbed: props.isEmbed })] }));
-}
-function OnrampStatusScreenUI(props) {
-    const { uiStatus } = props;
-    const statusMeta = props.fiatStatus
-        ? (0, statusMeta_js_1.getBuyWithFiatStatusMeta)(props.fiatStatus)
-        : undefined;
-    const fiatStatus = props.fiatStatus && props.fiatStatus.status !== "NOT_FOUND"
-        ? props.fiatStatus
-        : undefined;
-    const onRampTokenQuote = props.quote.onRampToken;
-    const txDetails = ((0, jsx_runtime_1.jsx)(FiatTxDetailsTable_js_1.OnRampTxDetailsTable, { client: props.client, token: fiatStatus?.source // source tx is onRamp token
-            ? {
-                chainId: fiatStatus.source.token.chainId,
-                address: fiatStatus.source.token.tokenAddress,
-                symbol: fiatStatus.source.token.symbol || "",
-                amount: fiatStatus.source.amount,
-            }
-            : {
-                chainId: onRampTokenQuote.token.chainId,
-                address: onRampTokenQuote.token.tokenAddress,
-                symbol: onRampTokenQuote.token.symbol,
-                amount: onRampTokenQuote.amount,
-            }, fiat: {
-            amount: props.quote.fromCurrencyWithFees.amount,
-            currencySymbol: props.quote.fromCurrencyWithFees.currencySymbol,
-        }, statusMeta: fiatStatus?.source && statusMeta
-            ? {
-                color: statusMeta?.color,
-                text: statusMeta?.status,
-                txHash: fiatStatus.source.transactionHash,
-            }
-            : undefined }));
-    return ((0, jsx_runtime_1.jsxs)(basic_js_1.Container, { children: [(0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xl" }), uiStatus === "loading" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "row", center: "x", children: (0, jsx_runtime_1.jsx)(Spinner_js_1.Spinner, { size: "xxl", color: "accentText" }) }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { color: "primaryText", size: "lg", center: true, children: "Buy Pending" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "sm" }), !(0, isMobile_js_1.isMobile)() && (0, jsx_runtime_1.jsx)(text_js_1.Text, { center: true, children: "Complete the purchase in popup" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xxl" }), txDetails] })), uiStatus === "failed" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "row", center: "x", children: (0, jsx_runtime_1.jsx)(AccentFailIcon_js_1.AccentFailIcon, { size: index_js_1.iconSize["3xl"] }) }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "lg" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { color: "primaryText", size: "lg", center: true, children: "Transaction Failed" }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xxl" }), txDetails] })), uiStatus === "completed" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(basic_js_1.Container, { flex: "row", center: "x", color: "success", children: (0, jsx_runtime_1.jsx)(react_icons_1.CheckCircledIcon, { width: index_js_1.iconSize["3xl"], height: index_js_1.iconSize["3xl"] }) }), (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "md" }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { color: "primaryText", size: "lg", center: true, children: "Buy Complete" }), props.fiatStatus && props.fiatStatus.status !== "NOT_FOUND" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "xxl" }), txDetails, (0, jsx_runtime_1.jsx)(Spacer_js_1.Spacer, { y: "sm" })] })), (0, jsx_runtime_1.jsx)(buttons_js_1.Button, { variant: "accent", fullWidth: true, onClick: props.onDone, children: props.transactionMode ? "Continue Transaction" : "Done" })] }))] }));
-}
-//# sourceMappingURL=FiatStatusScreen.js.map

package/dist/cjs/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatStatusScreen.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FiatStatusScreen.js","sourceRoot":"","sources":["../../../../../../../../../src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatStatusScreen.tsx"],"names":[],"mappings":"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"}