Transak Sandbox

offRampStreamSDK.js

import React, { useEffect } from "react";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import { Transak } from "@transak/transak-sdk";
import config from "../config";

export default function OffRampStreamSDK() {
  useEffect(() => {
    const transakConfig = {
      apiKey: config.apiKeyGlobalStaging,
      environment: Transak.ENVIRONMENTS.STAGING,
      containerId: "transakContainer",
      isTransakStreamOffRamp: true,
      cryptoCurrencyCode: "ETH",
      network: "ethereum",
    };

    const transak = new Transak(transakConfig);
    transak.init();

    return () => {
      transak.close();
    };
  }, []);

  return (
    <Stack direction="column" alignItems="center" sx={{ p: "4px" }}>
      <Box
        sx={{
          width: "100%",
          minHeight: "100px",
          p: "16px",
          border: "1px dashed grey",
        }}
      >
        <Stack direction="column" justifyContent="center" alignItems="center">
          <div
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              flexDirection: "column",
            }}
          >
            <div id="transakContainer" />
          </div>
        </Stack>
      </Box>
    </Stack>
  );
}