Add live and sandbox toggle to rwk demo

examples/demos/with-react-wallet-kit/src/components/Switch.tsx

@@ -7,11 +7,20 @@ interface ToggleSwitchProps {
   disabled?: boolean;
   size?: "sm" | "md";
   label?: string;
+  subLabel?: string;
   tooltip?: string;
 }
 
 export function ToggleSwitch(props: ToggleSwitchProps) {
-  const { checked, onChange, size = "md", disabled, label, tooltip } = props;
+  const {
+    checked,
+    onChange,
+    size = "md",
+    disabled,
+    label,
+    subLabel,
+    tooltip,
+  } = props;
   const height = size === "sm" ? "h-4.5" : "h-5.5";
   const width = size === "sm" ? "w-8" : "w-10";
   const knobSize = size === "sm" ? "h-3 w-3" : "h-4 w-4";
@@ -29,7 +38,16 @@ export function ToggleSwitch(props: ToggleSwitchProps) {
         disabled && "opacity-50 cursor-not-allowed",
       )}
     >
-      {label && <span className="text-sm">{label}</span>}
+      {(label || subLabel) && (
+        <div className="flex min-w-0 flex-col pr-3">
+          {label && <span className="text-sm">{label}</span>}
+          {subLabel && (
+            <span className="text-xs text-icon-text-light dark:text-icon-text-dark">
+              {subLabel}
+            </span>
+          )}
+        </div>
+      )}
       <Switch
         checked={checked}
         disabled={disabled ?? false}

examples/demos/with-react-wallet-kit/src/components/demo/DemoPanel.tsx

@@ -12,6 +12,7 @@ import {
   Button,
   Transition,
 } from "@headlessui/react";
+import { ToggleSwitch } from "@/components/Switch";
 import {
   ConnectedWallet,
   useModal,
@@ -67,6 +68,7 @@ export default function DemoPanel() {
   const [connectedWalletIcons, setConnectedWalletIcons] = useState<string[]>(
     [],
   ); // Initialize with an empty array
+  const [sandboxMode, setSandboxMode] = useState(true);
 
   useEffect(() => {
     const getConnectedWalletIcons = async (): Promise<string[]> => {
@@ -113,8 +115,10 @@ export default function DemoPanel() {
     try {
       await handleOnRamp({
         walletAccount: selectedWalletAccount!,
-        sandboxMode: true,
+        sandboxMode,
         defaultFiatCurrencyAmount: "40",
+        countryCode: "US",
+        countrySubdivisionCode: "OR",
       });
     } catch (error) {
       handleError(error);
@@ -125,8 +129,10 @@ export default function DemoPanel() {
     try {
       await handleOffRamp({
         walletAccount: selectedWalletAccount!,
-        sandboxMode: true,
+        sandboxMode,
         defaultCryptoAmount: "0.05",
+        countryCode: "US",
+        countrySubdivisionCode: "OR",
       });
     } catch (error) {
       handleError(error);
@@ -409,19 +415,25 @@ export default function DemoPanel() {
             Sign Message
           </Button>
 
-          <div className="flex items-center gap-4">
-            <Button
-              className="flex w-full items-center justify-center 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={handleDepositFunds}
-            >
-              Deposit Funds
-            </Button>
-            <Button
-              className="flex w-full items-center justify-center 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={handleWithdrawFunds}
-            >
-              Withdraw Funds
-            </Button>
+          <div className="flex flex-col gap-2">
+            <FundingModeToggle
+              sandboxMode={sandboxMode}
+              onChange={setSandboxMode}
+            />
+            <div className="flex items-center gap-4">
+              <Button
+                className="flex w-full items-center justify-center 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={handleDepositFunds}
+              >
+                Deposit Funds
+              </Button>
+              <Button
+                className="flex w-full items-center justify-center 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={handleWithdrawFunds}
+              >
+                Withdraw Funds
+              </Button>
+            </div>
           </div>
           {selectedWallet?.source === WalletSource.Embedded && (
             <>
@@ -475,6 +487,30 @@ export default function DemoPanel() {
   );
 }
 
+const FundingModeToggle = ({
+  sandboxMode,
+  onChange,
+}: {
+  sandboxMode: boolean;
+  onChange: (sandboxMode: boolean) => void;
+}) => {
+  return (
+    <div className="rounded-lg bg-background-light px-3 py-2 dark:bg-background-dark">
+      <ToggleSwitch
+        label={sandboxMode ? "Sandbox" : "Live"}
+        subLabel={
+          sandboxMode
+            ? "Use test funds for deposit and withdraw"
+            : "Use real funds for deposit and withdraw"
+        }
+        tooltip="Toggle between sandbox and live mode"
+        checked={sandboxMode}
+        onChange={onChange}
+      />
+    </div>
+  );
+};
+
 const StackedImg = ({
   connectedWalletIcons,
 }: {