Use new BuyWidget in wallet details modal

Author: joaquim-verges

.changeset/dirty-bananas-fall.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Use new BuyWidget in wallet details modal

packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts

@@ -141,7 +141,6 @@ export function usePaymentMethods(options: {
               limit: 100,
               maxSteps: 3,
               originChainId: chainId,
-              sortBy: "popularity",
             });
 
             // Add all origin tokens from this chain's routes

packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx

@@ -227,7 +227,10 @@ export function BridgeOrchestrator({
         <ErrorBanner
           client={client}
           error={state.context.currentError}
-          onCancel={onCancel}
+          onCancel={() => {
+            send({ type: "RESET" });
+            onCancel?.();
+          }}
           onRetry={handleRetry}
         />
       )}

packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

@@ -20,6 +20,7 @@ import {
 } from "react";
 import { trackPayEvent } from "../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../chains/types.js";
+import { getCachedChain } from "../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getContract } from "../../../../contract/contract.js";
 import type { SupportedFiatCurrency } from "../../../../pay/convert/type.js";
@@ -61,7 +62,10 @@ import type {
   ConnectButtonProps,
   PayUIOptions,
 } from "../../../core/hooks/connection/ConnectButtonProps.js";
-import { useChainFaucets } from "../../../core/hooks/others/useChainQuery.js";
+import {
+  useChainFaucets,
+  useChainMetadata,
+} from "../../../core/hooks/others/useChainQuery.js";
 import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
 import { useActiveWalletChain } from "../../../core/hooks/wallets/useActiveWalletChain.js";
@@ -80,6 +84,7 @@ import type {
 } from "../../../core/utils/defaultTokens.js";
 import { useWalletInfo } from "../../../core/utils/wallet.js";
 import { WalletUIStatesProvider } from "../../providers/wallet-ui-states-provider.js";
+import { BuyWidget } from "../Bridge/BuyWidget.js";
 import { Container, Line } from "../components/basic.js";
 import { Button, IconButton } from "../components/buttons.js";
 import { ChainActiveDot } from "../components/ChainActiveDot.js";
@@ -116,7 +121,6 @@ import {
   NetworkSelectorContent,
   type NetworkSelectorProps,
 } from "./NetworkSelector.js";
-import { LazyBuyScreen } from "./screens/Buy/LazyBuyScreen.js";
 import { WalletManagerScreen } from "./screens/Details/WalletManagerScreen.js";
 import { LinkedProfilesScreen } from "./screens/LinkedProfilesScreen.js";
 import { LinkProfileScreen } from "./screens/LinkProfileScreen.js";
@@ -390,6 +394,7 @@ export function DetailsModal(props: {
 
   const activeWallet = useActiveWallet();
   const chainFaucetsQuery = useChainFaucets(walletChain);
+  const chainMetadataQuery = useChainMetadata(walletChain);
 
   const disableSwitchChain = !activeWallet?.switchChain;
 
@@ -622,33 +627,35 @@ export function DetailsModal(props: {
                 </Button>
               )}
 
-              {!hideBuyFunds && (
-                <Button
-                  onClick={() => {
-                    trackPayEvent({
-                      client: client,
-                      event: "details_modal_buy_click",
-                      walletAddress: activeAccount?.address,
-                      walletType: activeWallet?.id,
-                    });
-                    setScreen("buy");
-                  }}
-                  style={{
-                    alignItems: "center",
-                    display: "flex",
-                    flex: 1,
-                    fontSize: fontSize.sm,
-                    gap: spacing.xs,
-                    padding: spacing.sm,
-                  }}
-                  variant="outline"
-                >
-                  <Container center="both" color="secondaryText" flex="row">
-                    <PlusIcon height={iconSize.sm} width={iconSize.sm} />
-                  </Container>
-                  {locale.buy}
-                </Button>
-              )}
+              {!hideBuyFunds &&
+                chainMetadataQuery.data &&
+                !chainMetadataQuery.data.testnet && (
+                  <Button
+                    onClick={() => {
+                      trackPayEvent({
+                        client: client,
+                        event: "details_modal_buy_click",
+                        walletAddress: activeAccount?.address,
+                        walletType: activeWallet?.id,
+                      });
+                      setScreen("buy");
+                    }}
+                    style={{
+                      alignItems: "center",
+                      display: "flex",
+                      flex: 1,
+                      fontSize: fontSize.sm,
+                      gap: spacing.xs,
+                      padding: spacing.sm,
+                    }}
+                    variant="outline"
+                  >
+                    <Container center="both" color="secondaryText" flex="row">
+                      <PlusIcon height={iconSize.sm} width={iconSize.sm} />
+                    </Container>
+                    {locale.buy}
+                  </Button>
+                )}
             </Container>
           </Container>
 
@@ -956,23 +963,26 @@ export function DetailsModal(props: {
 
   // thirdweb pay
   else if (screen === "buy") {
+    const requestedChainId =
+      props.detailsModal?.payOptions?.prefillBuy?.chain?.id ||
+      walletChain?.id ||
+      props.chains[0]?.id ||
+      1;
     content = (
-      <LazyBuyScreen
+      <BuyWidget
+        amount={props.detailsModal?.payOptions?.prefillBuy?.amount || "0.01"}
+        chain={getCachedChain(requestedChainId)}
         client={client}
-        connectLocale={locale}
-        connectOptions={undefined}
         hiddenWallets={props.detailsModal?.hiddenWallets}
-        isEmbed={false}
-        onBack={() => setScreen("main")}
-        onDone={closeModal}
-        payOptions={
-          props.detailsModal?.payOptions || {
-            mode: "fund_wallet",
-          }
-        }
+        locale={locale.id}
+        onCancel={() => setScreen("main")}
+        onSuccess={() => setScreen("main")}
         supportedTokens={props.supportedTokens}
-        theme={typeof props.theme === "string" ? props.theme : props.theme.type}
-        title={locale.buy}
+        tokenAddress={
+          props.displayBalanceToken?.[Number(requestedChainId)] as
+            | `0x${string}`
+            | undefined
+        }
       />
     );
   }
@@ -1143,7 +1153,6 @@ const WalletInfoButton = /* @__PURE__ */ StyledButton((_) => {
       transition: "background 250ms ease",
     },
     alignItems: "center",
-    all: "unset",
     animation: `${fadeInAnimation} 300ms ease`,
     background: theme.colors.connectedButtonBg,
     border: `1px solid ${theme.colors.borderColor}`,

packages/thirdweb/src/react/web/ui/ConnectWallet/MenuButton.tsx

@@ -25,7 +25,6 @@ export const MenuButton = /* @__PURE__ */ StyledButton((_) => {
       cursor: "not-allowed",
     },
     alignItems: "center",
-    all: "unset",
     backgroundColor: "transparent",
     borderRadius: radius.md,
     // border: `1px solid ${theme.colors.borderColor}`,

packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx

@@ -690,12 +690,10 @@ export const ChainButton = /* @__PURE__ */ memo(function ChainButton(props: {
           )}
         </Container>
         {confirming || switchingFailed ? (
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              gap: spacing.xs,
-            }}
+          <Container
+            flex="column"
+            gap="3xs"
+            style={{ alignItems: "flex-start", width: "100%" }}
           >
             <ChainName
               loadingComponent={<Skeleton height="20px" width="150px" />}
@@ -718,7 +716,7 @@ export const ChainButton = /* @__PURE__ */ memo(function ChainButton(props: {
                 </Container>
               )}
             </Container>
-          </div>
+          </Container>
         ) : (
           <ChainName
             className="tw-chain-icon-none-confirming"
@@ -741,7 +739,6 @@ export const TabButton = /* @__PURE__ */ (() =>
         background: theme.colors.secondaryButtonBg,
         color: theme.colors.primaryText,
       },
-      all: "unset",
       borderRadius: radius.lg,
       color: theme.colors.secondaryText,
       cursor: "pointer",
@@ -787,7 +784,6 @@ export const NetworkButton = /* @__PURE__ */ StyledButton((_) => {
       background: theme.colors.secondaryButtonBg,
     },
     alignItems: "center",
-    all: "unset",
     borderRadius: radius.md,
     boxSizing: "border-box",
     color: theme.colors.primaryText,

packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx

@@ -720,7 +720,6 @@ const ShowAllWalletsIcon = /* @__PURE__ */ StyledDiv(() => {
 });
 
 const WalletList = /* @__PURE__ */ StyledUl({
-  all: "unset",
   boxSizing: "border-box",
   display: "flex",
   flex: 1,

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx

@@ -88,7 +88,6 @@ const WalletAddressContainer = /* @__PURE__ */ StyledButton((_) => {
     "&:hover": {
       borderColor: theme.colors.accentText,
     },
-    all: "unset",
     border: `1px solid ${theme.colors.borderColor}`,
     borderRadius: radius.md,
     boxSizing: "border-box",

packages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsx

@@ -286,7 +286,6 @@ const WalletAddressContainer = /* @__PURE__ */ StyledButton((_) => {
     "&:hover": {
       borderColor: theme.colors.accentText,
     },
-    all: "unset",
     border: `1px solid ${theme.colors.borderColor}`,
     borderRadius: `0 0 ${radius.md} ${radius.md}`,
     boxSizing: "border-box",

packages/thirdweb/src/react/web/ui/components/buttons.tsx

@@ -38,7 +38,6 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
       cursor: "not-allowed",
     },
     alignItems: "center",
-    all: "unset",
     background: (() => {
       if (props.bg) {
         return theme.colors[props.bg];
@@ -152,7 +151,6 @@ export const IconButton = /* @__PURE__ */ StyledButton((_) => {
       cursor: "not-allowed",
     },
     alignItems: "center",
-    all: "unset",
     borderRadius: radius.sm,
     color: theme.colors.secondaryIconColor,
     cursor: "pointer",