From 27c5cbccbc0fccdb54a6a7221e99d1735b667407 Mon Sep 17 00:00:00 2001
From: Mohammad Cheikh <moe@turnkey.io>
Date: Thu, 6 Nov 2025 14:31:00 -0500
Subject: [PATCH] add onramp example to wallet

---
 .../src/components/demo/DemoPanel.tsx         | 20 +++++++++++++++++++
 .../src/providers/client/Provider.tsx         |  6 +++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/examples/react-wallet-kit/src/components/demo/DemoPanel.tsx b/examples/react-wallet-kit/src/components/demo/DemoPanel.tsx
index 1ec0edb28..2026c34e9 100644
--- a/examples/react-wallet-kit/src/components/demo/DemoPanel.tsx
+++ b/examples/react-wallet-kit/src/components/demo/DemoPanel.tsx
@@ -53,6 +53,7 @@ export default function DemoPanel() {
     handleImportWallet,
     handleConnectExternalWallet,
     fetchWalletProviders,
+    handleOnRamp,
   } = useTurnkey();
 
   const { pushPage } = useModal();
@@ -112,6 +113,18 @@ export default function DemoPanel() {
     }
   }, [wallets]);
 
+  const handleAddFunds = async () => {
+    try {
+      await handleOnRamp({
+        onrampProvider: "FIAT_ON_RAMP_PROVIDER_MOONPAY",
+        walletAccount: selectedWalletAccount!,
+        sandboxMode: true,
+      });
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
   function truncateAddress(address: string) {
     return `${address.slice(0, 4)}...${address.slice(-4)}`;
   }
@@ -385,6 +398,13 @@ export default function DemoPanel() {
           >
             Sign Message
           </Button>
+
+          <Button
+            className="bg-primary-light dark:bg-primary-dark text-primary-text-light dark:text-primary-text-dark rounded-lg px-4 py-2 active:scale-95 transition-transform cursor-pointer"
+            onClick={handleAddFunds}
+          >
+            Add Funds
+          </Button>
           {selectedWallet?.source === WalletSource.Embedded && (
             <>
               <hr className="border-draggable-background-light dark:border-draggable-background-dark" />
diff --git a/packages/react-wallet-kit/src/providers/client/Provider.tsx b/packages/react-wallet-kit/src/providers/client/Provider.tsx
index a83b5b600..ad12cef12 100644
--- a/packages/react-wallet-kit/src/providers/client/Provider.tsx
+++ b/packages/react-wallet-kit/src/providers/client/Provider.tsx
@@ -5331,7 +5331,11 @@ export const ClientProvider: React.FC<ClientProviderProps> = ({
               pollingRef.current = null;
             }
           };
-
+          useEffect(() => {
+            return () => {
+              cleanup();
+            };
+          }, []);
           const action = async () => {
             try {
               let onRampWindow: Window | null = null;