Merge pull-request #1081

Author: moe-dev

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" />

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;