Transak Sandbox

redirect.js

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

export default function Redirect() {
  const [walletRedirection, setWalletRedirection] = useState(false);

  // Configuration details for Transak URL
  const transakURL = "https://global-stg.transak.com";
  const apiKey = config.apiKeyGlobalStaging;
  const redirectURL = encodeURIComponent("https://transak.com");
  const environment = "STAGING";
  const themeColor = "FDC809";

  // Constructing the URL based on wallet redirection state
  const hrefURL = `${transakURL}/?apiKey=${apiKey}&environment=${environment}&productsAvailed=${
    walletRedirection ? "SELL" : "BUY"
  }&redirectURL=${redirectURL}&themeColor=${themeColor}${
    walletRedirection ? "&walletRedirection=true" : ""
  }`;

  // Event handler for button click
  const handleButtonClick = () => {
    window.open(hrefURL, "_blank");
  };

  return (
    <Stack direction="column" alignItems="center" sx={{ p: 4, height: "40vh" }}>
      <Box
        sx={{
          width: "100%",
          height: "100%",
          p: 2,
          border: "1px dashed grey",
        }}
      >
        <Stack
          direction="column"
          justifyContent="center"
          alignItems="center"
          height="100%"
        >
          <FormControlLabel
            control={
              <Checkbox
                checked={walletRedirection}
                onChange={(e) => setWalletRedirection(e.target.checked)}
              />
            }
            label={
              <div>
                Enable Wallet Redirection
                <span
                  style={{
                    fontSize: "0.75rem",
                    display: "block",
                    marginTop: "4px",
                  }}
                >
                  Wallet redirection feature is only for the SELL flow.
                </span>
              </div>
            }
          />
          <Button
            variant="contained"
            color="primary"
            onClick={handleButtonClick}
            sx={{ mt: 2 }}
          >
            Launch Transak - {walletRedirection ? "SELL" : "BUY"} Flow
          </Button>
        </Stack>
      </Box>
    </Stack>
  );
}