thirdweb 5.48.1-nightly-7ef1c721ef693584d153554d46f2e70e8015b261-20240822000343 → 5.48.2-nightly-1405598e7e51e4d415fd57f8169012823db0cedf-20240824000351

package/src/react/web/ui/ConnectWallet/Details.tsx

@@ -14,6 +14,7 @@ import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getContract } from "../../../../contract/contract.js";
 import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js";
+import { formatNumber } from "../../../../utils/formatNumber.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
@@ -246,9 +247,7 @@ export const ConnectedWalletDetails: React.FC<{
             color="secondaryText"
             weight={400}
           >
-            {Number.parseFloat(
-              Number(balanceQuery.data.displayValue).toFixed(3),
-            )}{" "}
+            {formatBalanceOnButton(Number(balanceQuery.data.displayValue))}{" "}
             {balanceQuery.data.symbol}
           </Text>
         ) : (
@@ -352,9 +351,7 @@ function DetailsModal(props: {
           {chainNameQuery.name || `Unknown chain #${walletChain?.id}`}
           <Text color="secondaryText" size="xs">
             {balanceQuery.data ? (
-              Number.parseFloat(
-                Number(balanceQuery.data.displayValue).toFixed(3),
-              )
+              formatNumber(Number(balanceQuery.data.displayValue), 5)
             ) : (
               <Skeleton height="1em" width="100px" />
             )}{" "}
@@ -374,84 +371,91 @@ function DetailsModal(props: {
     </MenuButton>
   );
 
+  const avatarContent = (
+    <Container
+      style={{
+        position: "relative",
+        height: `${iconSize.xl}px`,
+        width: `${iconSize.xl}px`,
+      }}
+    >
+      <Container
+        style={{
+          width: "100%",
+          height: "100%",
+          borderRadius: "100%",
+          overflow: "hidden",
+        }}
+      >
+        {ensAvatarQuery.data ? (
+          <img
+            src={ensAvatarQuery.data}
+            style={{
+              width: iconSize.xxl,
+              height: iconSize.xxl,
+            }}
+            alt=""
+          />
+        ) : (
+          activeAccount && (
+            <Blobbie
+              address={activeAccount.address}
+              size={Number(iconSize.xxl)}
+            />
+          )
+        )}
+      </Container>
+      <Container
+        style={{
+          position: "absolute",
+          bottom: -2,
+          right: -2,
+        }}
+      >
+        <IconContainer
+          style={{
+            background: theme.colors.modalBg,
+          }}
+          padding="4px"
+        >
+          {activeWallet && (
+            <WalletImage
+              style={{ borderRadius: 0 }}
+              id={activeWallet.id}
+              client={client}
+              size="12"
+            />
+          )}
+        </IconContainer>
+      </Container>
+    </Container>
+  );
+
   let content = (
     <div>
       <Spacer y="xs" />
       <Container p="lg" gap="sm" flex="row" center="y">
-        <ToolTip tip="Switch wallet">
-          <div
-            style={{
-              cursor: "pointer",
-            }}
-            onKeyDown={(e) => {
-              if (e.key === "w") {
-                setScreen("wallet-manager");
-              }
-            }}
-            onClick={() => {
-              setScreen("wallet-manager");
-            }}
-          >
-            <Container
+        {props.detailsModal?.hideSwitchWallet ? (
+          avatarContent
+        ) : (
+          <ToolTip tip="Switch wallet">
+            <div
               style={{
-                position: "relative",
-                height: `${iconSize.xl}px`,
-                width: `${iconSize.xl}px`,
+                cursor: "pointer",
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "w") {
+                  setScreen("wallet-manager");
+                }
+              }}
+              onClick={() => {
+                setScreen("wallet-manager");
               }}
             >
-              <Container
-                style={{
-                  width: "100%",
-                  height: "100%",
-                  borderRadius: "100%",
-                  overflow: "hidden",
-                }}
-              >
-                {ensAvatarQuery.data ? (
-                  <img
-                    src={ensAvatarQuery.data}
-                    style={{
-                      width: iconSize.xxl,
-                      height: iconSize.xxl,
-                    }}
-                    alt=""
-                  />
-                ) : (
-                  activeAccount && (
-                    <Blobbie
-                      address={activeAccount.address}
-                      size={Number(iconSize.xxl)}
-                    />
-                  )
-                )}
-              </Container>
-              <Container
-                style={{
-                  position: "absolute",
-                  bottom: -2,
-                  right: -2,
-                }}
-              >
-                <IconContainer
-                  style={{
-                    background: theme.colors.modalBg,
-                  }}
-                  padding="4px"
-                >
-                  {activeWallet && (
-                    <WalletImage
-                      style={{ borderRadius: 0 }}
-                      id={activeWallet.id}
-                      client={client}
-                      size="12"
-                    />
-                  )}
-                </IconContainer>
-              </Container>
-            </Container>
-          </div>
-        </ToolTip>
-
+              {avatarContent}
+            </div>
+          </ToolTip>
+        )}
         <Container flex="column" gap="3xs">
           <div
             style={{
@@ -909,6 +913,10 @@ function DetailsModal(props: {
   );
 }
 
+function formatBalanceOnButton(num: number) {
+  return formatNumber(num, num < 1 ? 5 : 4);
+}
+
 const WalletInfoButton = /* @__PURE__ */ StyledButton((_) => {
   const theme = useCustomTheme();
   return {
@@ -1257,6 +1265,13 @@ export type UseWalletDetailsModalOptions = {
    */
   hideDisconnect?: boolean;
 
+  /**
+   * Hide the "Switch Wallet" button in the Wallet Details Modal.
+   *
+   * By default it is `false`
+   */
+  hideSwitchWallet?: boolean;
+
   /**
    * Callback to be called when a wallet is disconnected by clicking the "Disconnect Wallet" button in the Wallet Details Modal.
    *
@@ -1363,6 +1378,7 @@ export function useWalletDetailsModal() {
             detailsModal={{
               footer: props.footer,
               hideDisconnect: props.hideDisconnect,
+              hideSwitchWallet: props.hideSwitchWallet,
               networkSelector: props.networkSelector,
               payOptions: props.payOptions,
               showTestnetFaucet: props.showTestnetFaucet,

package/src/react/web/ui/ConnectWallet/icons/currencies/JPYIcon.tsx

@@ -0,0 +1,21 @@
+import type { IconFC } from "../types.js";
+
+export const JPYIcon: IconFC = (props) => {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 32 32"
+      xmlns="http://www.w3.org/2000/svg"
+      role="presentation"
+    >
+      <g fill="none" fill-rule="evenodd">
+        <circle cx="16" cy="16" fill="#a81b1b" r="16" />
+        <path
+          d="M17.548 18.711v1.878h5.063v2.288h-5.063V25.5h-3.096v-2.623H9.389v-2.288h5.063v-1.878H9.389v-2.288h4.171L7.5 7.5h3.752l4.8 7.534L20.853 7.5H24.5l-6.086 8.923h4.197v2.288z"
+          fill="#ffffff"
+        />
+      </g>
+    </svg>
+  );
+};

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -325,12 +325,19 @@ function BuyScreenContent(props: BuyScreenContentProps) {
         onBack={goBack}
         payer={payer}
         client={props.client}
-        onDone={onDone}
         chain={toChain}
         token={toToken}
         tokenAmount={tokenAmount}
         receiverAddress={receiverAddress}
         transactionMode={props.payOptions.mode === "transaction"}
+        isEmbed={props.isEmbed}
+        onDone={onDone}
+        onTryAgain={() => {
+          setScreen({
+            id: "buy-with-crypto",
+          });
+        }}
+        onSuccess={onSwapSuccess}
       />
     );
   }

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

@@ -2,23 +2,24 @@ import { RadiobuttonIcon } from "@radix-ui/react-icons";
 import { CADIcon } from "../../../icons/currencies/CADIcon.js";
 import { EURIcon } from "../../../icons/currencies/EURIcon.js";
 import { GBPIcon } from "../../../icons/currencies/GBPIcon.js";
+import { JPYIcon } from "../../../icons/currencies/JPYIcon.js";
 import { USDIcon } from "../../../icons/currencies/USDIcon.js";
 import type { IconFC } from "../../../icons/types.js";
 
 export type CurrencyMeta = {
-  shorthand: "USD" | "CAD" | "GBP" | "EUR";
+  shorthand: "USD" | "CAD" | "GBP" | "EUR" | "JPY";
   name: string;
   icon: IconFC;
 };
 
-export const defaultSelectedCurrency: CurrencyMeta = {
+export const usdCurrency: CurrencyMeta = {
   shorthand: "USD",
   name: "US Dollar",
   icon: USDIcon,
 };
 
 export const currencies: CurrencyMeta[] = [
-  defaultSelectedCurrency,
+  usdCurrency,
   {
     shorthand: "CAD",
     name: "Canadian Dollar",
@@ -34,6 +35,11 @@ export const currencies: CurrencyMeta[] = [
     name: "Euro",
     icon: EURIcon,
   },
+  {
+    shorthand: "JPY",
+    name: "Japanese Yen",
+    icon: JPYIcon,
+  },
 ];
 
 export function getCurrencyMeta(shorthand: string): CurrencyMeta {

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

@@ -8,7 +8,11 @@ import type {
 import { useActiveWalletChain } from "../../../../../../core/hooks/wallets/useActiveWalletChain.js";
 import { useDebouncedValue } from "../../../../hooks/useDebouncedValue.js";
 import { type ERC20OrNativeToken, NATIVE_TOKEN } from "../../nativeToken.js";
-import { defaultSelectedCurrency } from "../fiat/currencies.js";
+import {
+  type CurrencyMeta,
+  currencies,
+  usdCurrency,
+} from "../fiat/currencies.js";
 import type { SupportedChainAndTokens } from "../swap/useSwapSupportedChains.js";
 
 // handle states for token and chain selection
@@ -71,10 +75,17 @@ export function useUISelectionStates(options: {
   );
 
   // --------------------------------------------------------------------------
+  const devSpecifiedDefaultCurrency =
+    payOptions.buyWithFiat !== false
+      ? payOptions.buyWithFiat?.prefillSource?.currency
+      : undefined;
+
+  const defaultSelectedCurrencyShorthand =
+    devSpecifiedDefaultCurrency || getDefaultCurrencyBasedOnLocation();
 
-  // stripe only supports USD, so not using a state right now
   const [selectedCurrency, setSelectedCurrency] = useState(
-    defaultSelectedCurrency,
+    currencies.find((x) => x.shorthand === defaultSelectedCurrencyShorthand) ||
+      usdCurrency,
   );
 
   return {
@@ -95,3 +106,36 @@ export function useUISelectionStates(options: {
     setSelectedCurrency,
   };
 }
+
+function getDefaultCurrencyBasedOnLocation(): CurrencyMeta["shorthand"] {
+  // if Intl is not supported - browser throws
+  try {
+    const timeZone = Intl.DateTimeFormat()
+      .resolvedOptions()
+      .timeZone.toLowerCase();
+
+    // Europe/London -> GBP
+    if (timeZone.includes("london")) {
+      return "GBP";
+    }
+
+    // Europe/* -> EUR
+    if (timeZone.includes("europe")) {
+      return "EUR";
+    }
+
+    // Japan
+    if (timeZone.includes("japan")) {
+      return "JPY";
+    }
+
+    // canada
+    if (timeZone.includes("canada")) {
+      return "CAD";
+    }
+
+    return "USD";
+  } catch {
+    return "USD";
+  }
+}

package/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/SwapDetailsScreen.tsx

@@ -100,7 +100,9 @@ export function SwapTxDetailsTable(
 ) {
   let uiData: SwapTxDetailsData;
   let showStatusRow = true;
+  let isTransfer = false;
   if (props.type === "status") {
+    isTransfer = props.status.swapType === "TRANSFER";
     const status = props.status;
     if (props.hideStatusRow) {
       showStatusRow = false;
@@ -189,6 +191,30 @@ export function SwapTxDetailsTable(
     </>
   );
 
+  if (isTransfer) {
+    return (
+      <div>
+        {/* source chain Tx hash link */}
+        {fromChainExplorers.explorers?.[0]?.url && sourceTxHash && (
+          <ButtonLink
+            fullWidth
+            variant="outline"
+            href={`${fromChainExplorers.explorers[0].url}/tx/${sourceTxHash}`}
+            target="_blank"
+            gap="xs"
+            style={{
+              fontSize: fontSize.sm,
+              padding: spacing.sm,
+            }}
+          >
+            View on {fromChainName.name} Explorer
+            <ExternalLinkIcon width={iconSize.sm} height={iconSize.sm} />
+          </ButtonLink>
+        )}
+      </div>
+    );
+  }
+
   return (
     <div>
       {isPartialSuccess && gotToken ? (

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

@@ -26,7 +26,7 @@ export function SwapStatusScreen(props: {
   onDone: () => void;
   transactionMode: boolean;
   isEmbed: boolean;
-  quote: BuyWithCryptoQuote;
+  quote: BuyWithCryptoQuote | undefined;
   onSuccess: ((status: BuyWithCryptoStatus) => void) | undefined;
 }) {
   const { onSuccess } = props;
@@ -82,13 +82,13 @@ export function SwapStatusScreen(props: {
         hideStatusRow={true}
         client={props.client}
       />
-    ) : (
+    ) : props.quote ? (
       <SwapTxDetailsTable
         type="quote"
         quote={props.quote}
         client={props.client}
       />
-    );
+    ) : null;
 
   return (
     <Container animate="fadein">