Transak Sandbox

offRampStreamIFrame.js

import React, { useEffect, useState } from "react";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import config from "../config";

export default function OffRampStreamIFrame() {
  const [iframeSrc, setIframeSrc] = useState("");

  useEffect(() => {
    const baseUrl = "https://global-stg.transak.com";
    const queryParams = [
      `apiKey=${config.apiKeyGlobalStaging}`,
      `isTransakStreamOffRamp=true`,
      `cryptoCurrencyCode=ETH`,
      `network=ethereum`,
    ].join("&");

    setIframeSrc(`${baseUrl}?${queryParams}`);
  }, []);

  return (
    <Stack direction="column" alignItems="center" sx={{ p: "4px" }}>
      <Box
        sx={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          width: "100%",
          minHeight: "100px",
          border: "1px dashed grey",
          p: "16px",
        }}
      >
        {iframeSrc && (
          <iframe
            title="Transak"
            src={iframeSrc}
            allow="camera;microphone;fullscreen;payment"
            style={{ height: 650, width: 400, border: "none" }}
          />
        )}
      </Box>
    </Stack>
  );
}