From 98eefdf90b0d6afcfc1765c57862afaca59cfb87 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Thu, 14 Aug 2025 18:58:15 +0000
Subject: [PATCH] Dashboard: Fix No Funds PayEmbed in TransactionButton (#7856)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating the `MismatchButton` component by replacing the `PayEmbed` with `CheckoutWidget`, adjusting the transition duration in `DynamicHeight`, and streamlining the dialog content structure.

### Detailed summary
- Changed transition duration in `DynamicHeight` from `250ms` to `220ms`.
- Replaced `PayEmbed` with `CheckoutWidget` in the `MismatchButton` component.
- Simplified the dialog content structure by removing the `DynamicHeight` wrapper.
- Adjusted class names for consistency and clarity.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- New Features
  - “Not enough funds” flow now uses a new checkout widget and only appears when your account is connected.

- Style
  - Payment dialog is wider and uses full available width for improved readability.
  - Spacing and layout refined for a cleaner experience.
  - Slightly faster height transition animations for snappier UI feedback.

- Refactor
  - Simplified dialog content by removing an extra height wrapper.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../@/components/tx-button/MismatchButton.tsx | 62 ++++++++-----------
 .../src/@/components/ui/DynamicHeight.tsx     |  2 +-
 2 files changed, 27 insertions(+), 37 deletions(-)

diff --git a/apps/dashboard/src/@/components/tx-button/MismatchButton.tsx b/apps/dashboard/src/@/components/tx-button/MismatchButton.tsx
index 5882ff0e7f6..edb78f5e9fd 100644
--- a/apps/dashboard/src/@/components/tx-button/MismatchButton.tsx
+++ b/apps/dashboard/src/@/components/tx-button/MismatchButton.tsx
@@ -18,7 +18,7 @@ import {
 } from "thirdweb";
 import { type Chain, type ChainMetadata, localhost } from "thirdweb/chains";
 import {
-  PayEmbed,
+  CheckoutWidget,
   useActiveAccount,
   useActiveWallet,
   useActiveWalletChain,
@@ -29,7 +29,6 @@ import {
 import { privateKeyToAccount, type Wallet } from "thirdweb/wallets";
 import { apiServerProxy } from "@/actions/proxies";
 import { Button } from "@/components/ui/button";
-import { DynamicHeight } from "@/components/ui/DynamicHeight";
 import {
   Dialog,
   DialogContent,
@@ -251,39 +250,34 @@ export const MismatchButton = forwardRef<
       >
         <DialogContent
           className={cn(
-            "gap-0 p-0",
-            dialog === "no-funds" && "md:!max-w-[480px]",
-            dialog === "pay" && "md:!max-w-[360px] border-none bg-transparent",
+            "gap-0 p-0 md:!max-w-[480px]",
+            dialog === "pay" && "border-none bg-transparent",
           )}
           dialogCloseClassName="focus:ring-0"
         >
-          <DynamicHeight>
-            {dialog === "no-funds" && (
-              <NoFundsDialogContent
-                chain={txChain}
-                client={props.client}
-                isLoggedIn={props.isLoggedIn}
-                onCloseModal={() => setDialog(undefined)}
-                openPayModal={() => {
-                  setDialog("pay");
-                }}
-              />
-            )}
+          {dialog === "no-funds" && (
+            <NoFundsDialogContent
+              chain={txChain}
+              client={props.client}
+              isLoggedIn={props.isLoggedIn}
+              onCloseModal={() => setDialog(undefined)}
+              openPayModal={() => {
+                setDialog("pay");
+              }}
+            />
+          )}
 
-            {dialog === "pay" && (
-              <PayEmbed
-                className="!w-auto"
-                client={props.client}
-                payOptions={{
-                  prefillBuy: {
-                    amount: "0.01",
-                    chain: txChain,
-                  },
-                }}
-                theme={getSDKTheme(theme === "dark" ? "dark" : "light")}
-              />
-            )}
-          </DynamicHeight>
+          {dialog === "pay" && account && (
+            <CheckoutWidget
+              className="!w-full"
+              client={props.client}
+              chain={txChain}
+              amount="0.01"
+              name="Buy Funds"
+              seller={account.address as `0x${string}`}
+              theme={getSDKTheme(theme === "dark" ? "dark" : "light")}
+            />
+          )}
         </DialogContent>
       </Dialog>
     </>
@@ -362,11 +356,7 @@ function NoFundsDialogContent(props: {
                 (x) => x.enabled && x.service === "pay",
               ) ? (
               // pay case
-              <Button
-                className="w-full"
-                onClick={props.openPayModal}
-                variant="primary"
-              >
+              <Button className="w-full" onClick={props.openPayModal}>
                 Buy Funds
               </Button>
             ) : // no funds options available
diff --git a/apps/dashboard/src/@/components/ui/DynamicHeight.tsx b/apps/dashboard/src/@/components/ui/DynamicHeight.tsx
index 4835281db51..535be848aaa 100644
--- a/apps/dashboard/src/@/components/ui/DynamicHeight.tsx
+++ b/apps/dashboard/src/@/components/ui/DynamicHeight.tsx
@@ -17,7 +17,7 @@ export function DynamicHeight(props: {
         boxSizing: "border-box",
         height: height ? `${height}px` : "auto",
         overflow: "hidden",
-        transition: props.transition || "height 250ms ease",
+        transition: props.transition || "height 220ms ease",
       }}
     >
       <div