SEP-6: Deposit and Withdrawal API

// Fetches and returns the endpoint used for SEP-6 transfer interactions.
export async function getTransferServerSep6(domain) {
  let { TRANSFER_SERVER } = await fetchStellarToml(domain);
  return TRANSFER_SERVER;
}

import { getTransferServerSep6 } from "$lib/stellar/sep1";

// Fetches and returns basic information about what the SEP-6 transfer server suppports.
export async function getSep6Info(domain) {
  let transferServer = await getTransferServerSep6(domain);
  let res = await fetch(`${transferServer}/info`);
  let json = await res.json();
  return json;
}

<script>
  /* This <script> tag has been abbreviated for simplicity */

  // We import things from external packages that will be needed
  import { LogInIcon, LogOutIcon } from "svelte-feather-icons";

  // We import some of our `$lib` functions
  import { getSep6Info } from "$lib/stellar/sep6";

  // The `open` Svelte context is used to open the confirmation modal
  import { getContext } from "svelte";
  const { open } = getContext("simple-modal");

  /* ... */
</script>

<!-- HTML has been omitted from this tutorial. Please check the source file -->

<script>
  /* This <script> tag has been abbreviated for simplicity */

  // We import any Svelte components we will need
  import TransferModalSep6 from "./components/TransferModalSep6.svelte";

  // Launch the SEP-6 modal to begin the transfer process and gather information from the user.
  const launchTransferModalSep6 = ({
    homeDomain,
    assetCode,
    assetIssuer,
    endpoint,
    sep6Info,
  }) => {
    // Open the SEP-6 transfer modal, supplying the relevant props for our
    // desired type of transfer.
    open(TransferModalSep6, {
      homeDomain: homeDomain,
      assetIssuer: assetIssuer,
      transferData: {
        endpoint: endpoint,
      },
      formData: {
        account: data.publicKey,
        asset_code: assetCode,
      },
      sep6Info: sep6Info,
      // This `submitPayment` function is described later on.
      submitPayment: submitPayment,
    });
  };
</script>

<!-- HTML has been omitted from this tutorial. Please check the source file -->

// Fetches and returns the endpoint used for SEP-12 KYC interactions.
export async function getKycServer(domain) {
  let { KYC_SERVER, TRANSFER_SERVER } = await fetchStellarToml(domain);
  // If `KYC_SERVER` is undefined in the domain's TOML file, `TRANSFER_SERVER`
  // will be used
  return KYC_SERVER ?? TRANSFER_SERVER;
}

import { getKycServer } from "$lib/stellar/sep1";

// Sends a `GET` request to query KYC status for a customer, returns current status of KYC submission
export async function getSep12Fields({ authToken, homeDomain }) {
  let kycServer = await getKycServer(homeDomain);

  let res = await fetch(`${kycServer}/customer`, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${authToken}`,
    },
  });
  let json = await res.json();

  return json;
}

// Sends a `PUT` request to the KYC server, submitting the supplied fields for the customer's record.
export async function putSep12Fields({ authToken, fields, homeDomain }) {
  let kycServer = await getKycServer(homeDomain);

  let res = await fetch(`${kycServer}/customer`, {
    method: "PUT",
    mode: "cors",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${authToken}`,
    },
    body: JSON.stringify(fields),
  });
  let json = await res.json();

  return json;
}

// Initiates a transfer using the SEP-6 protocol.
export async function initiateTransfer6({
  authToken,
  endpoint,
  formData,
  domain,
}) {
  let transferServer = await getTransferServerSep6(domain);
  let searchParams = new URLSearchParams(formData);

  let res = await fetch(`${transferServer}/${endpoint}?${searchParams}`, {
    method: "GET",
    mode: "cors",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${authToken}`,
    },
  });
  let json = await res.json();

  if (!res.ok) {
    throw error(res.status, {
      message: json.error,
    });
  } else {
    return json;
  }
}

<script>
  /* This <script> tag has been abbreviated for simplicity */

  // Define some component variables that will be used throughout the page
  let paymentXDR = "";
  let paymentNetwork = "";

  // After a withdraw transaction has been presented to the user, and they've confirmed with the correct pincode, sign and submit the transaction to the Stellar network.
  const onPaymentConfirm = async (pincode) => {
    // Use the walletStore to sign the transaction
    let signedTransaction = await walletStore.sign({
      transactionXDR: paymentXDR,
      network: paymentNetwork,
      pincode: pincode,
    });
    // Submit the transaction to the Stellar network
    await submit(signedTransaction);
  };

  // Builds a Stellar payment to present to the user which will complete a transfer to the Anchor.
  let submitPayment = async ({
    withdrawDetails,
    assetCode,
    assetIssuer,
    amount,
  }) => {
    let { transaction, network_passphrase } = await createPaymentTransaction({
      source: data.publicKey,
      destination: withdrawDetails.account_id,
      asset: `${assetCode}:${assetIssuer}`,
      amount: amount,
      memo: withdrawDetails.memo
        ? Buffer.from(withdrawDetails.memo, "base64")
        : undefined,
    });

    // Set the component variables to hold the transaction details
    paymentXDR = transaction;
    paymentNetwork = network_passphrase;

    // We close the SEP-6 modal, and open the regular confirmation modal
    close();
    open(ConfirmationModal, {
      transactionXDR: paymentXDR,
      transactionNetwork: paymentNetwork,
      onConfirm: onPaymentConfirm,
    });
  };

  /* ... */
</script>

<!-- HTML has been omitted from this tutorial. Please check the source file -->