[SDK] Use new BuyWidget in wallet details modal (#7551)

Author: joaquim-verges

.changeset/dirty-bananas-fall.md

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

packages/thirdweb/src/insight/common.ts

@@ -14,8 +14,3 @@ export async function assertInsightEnabled(chains: Chain[]) {
     );
   }
 }
-
-export async function isInsightEnabled(chain: Chain) {
-  const chainIds = await getInsightEnabledChainIds();
-  return chainIds.includes(chain.id);
-}

packages/thirdweb/src/pay/buyWithCrypto/getStatus.ts

@@ -84,11 +84,6 @@ export type BuyWithCryptoStatus =
       purchaseData?: PurchaseData;
     };
 
-export type ValidBuyWithCryptoStatus = Exclude<
-  BuyWithCryptoStatus,
-  { status: "NOT_FOUND" }
->;
-
 /**
  * Gets the status of a buy with crypto transaction
  * @param buyWithCryptoTransaction - Object of type [`BuyWithCryptoTransaction`](https://portal.thirdweb.com/references/typescript/v5/BuyWithCryptoTransaction)

packages/thirdweb/src/pay/buyWithFiat/isSwapRequiredPostOnramp.ts

@@ -1,5 +1,4 @@
 import { getAddress } from "../../utils/address.js";
-import type { PayTokenInfo } from "../utils/commonTypes.js";
 import type { BuyWithFiatQuote } from "./getQuote.js";
 
 /**
@@ -28,58 +27,3 @@ export function isSwapRequiredPostOnramp(
 
   return !(sameChain && sameToken);
 }
-
-export function getOnRampSteps(
-  buyWithFiatQuote: BuyWithFiatQuote,
-): OnRampStep[] {
-  const isSwapRequired = isSwapRequiredPostOnramp(buyWithFiatQuote);
-
-  if (!isSwapRequired) {
-    return [
-      {
-        action: "buy",
-        amount: buyWithFiatQuote.estimatedToAmountMin,
-        token: buyWithFiatQuote.toToken,
-      },
-    ];
-  }
-
-  if (buyWithFiatQuote.routingToken) {
-    return [
-      {
-        action: "buy",
-        amount: buyWithFiatQuote.onRampToken.amount,
-        token: buyWithFiatQuote.onRampToken.token,
-      },
-      {
-        action: "swap",
-        amount: buyWithFiatQuote.routingToken.amount,
-        token: buyWithFiatQuote.routingToken.token,
-      },
-      {
-        action: "bridge",
-        amount: buyWithFiatQuote.estimatedToAmountMin,
-        token: buyWithFiatQuote.toToken,
-      },
-    ];
-  }
-
-  return [
-    {
-      action: "buy",
-      amount: buyWithFiatQuote.onRampToken.amount,
-      token: buyWithFiatQuote.onRampToken.token,
-    },
-    {
-      action: "swap",
-      amount: buyWithFiatQuote.estimatedToAmountMin,
-      token: buyWithFiatQuote.toToken,
-    },
-  ];
-}
-
-export type OnRampStep = {
-  action: "buy" | "swap" | "bridge";
-  token: PayTokenInfo;
-  amount: string;
-};

packages/thirdweb/src/pay/utils/commonTypes.ts

@@ -19,4 +19,4 @@ export type PayOnChainTransactionDetails = {
 
 export type FiatProvider = (typeof FiatProviders)[number];
 
-export const FiatProviders = ["coinbase", "stripe", "transak"] as const;
+const FiatProviders = ["coinbase", "stripe", "transak"] as const;

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

@@ -141,11 +141,18 @@ export function usePaymentMethods(options: {
               limit: 100,
               maxSteps: 3,
               originChainId: chainId,
-              sortBy: "popularity",
             });
 
             // Add all origin tokens from this chain's routes
             for (const route of routesForChain) {
+              // Skip if the origin token is the same as the destination token, will be added later only if includeDestinationToken is true
+              if (
+                route.originToken.chainId === destinationToken.chainId &&
+                route.originToken.address.toLowerCase() ===
+                  destinationToken.address.toLowerCase()
+              ) {
+                continue;
+              }
               const tokenKey = `${route.originToken.chainId}-${route.originToken.address.toLowerCase()}`;
               allValidOriginTokens.set(tokenKey, route.originToken);
             }

packages/thirdweb/src/react/core/utils/storage.ts

@@ -2,7 +2,6 @@ import type { AsyncStorage } from "../../../utils/storage/AsyncStorage.js";
 import type { AuthArgsType } from "../../../wallets/in-app/core/authentication/types.js";
 
 export const LAST_AUTH_PROVIDER_STORAGE_KEY = "lastAuthProvider";
-export const PREFERRED_FIAT_PROVIDER_STORAGE_KEY = "preferredFiatProvider";
 
 export async function setLastAuthProvider(
   authProvider: AuthArgsType["strategy"],

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,